@principal-ai/subsystems-react 0.17.0

package/dist/components/NodeTooltip.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '@principal-ade/industry-theme';
+import { IndustryMarkdownSlide } from 'themed-markdown';
+import { TooltipPortalContext } from '../contexts/TooltipPortalContext';
+/**
+ * Tooltip component for displaying node information on hover
+ * Uses a portal to render above all other elements
+ */
+export const NodeTooltip = ({ description, otel, sources, references, visible, nodeRef, }) => {
+    const { theme } = useTheme();
+    const portalTarget = useContext(TooltipPortalContext);
+    const [position, setPosition] = useState(null);
+    useEffect(() => {
+        if (visible && nodeRef?.current && portalTarget) {
+            const nodeRect = nodeRef.current.getBoundingClientRect();
+            const containerRect = portalTarget.getBoundingClientRect();
+            // Position relative to the container, not the viewport
+            setPosition({
+                top: nodeRect.bottom - containerRect.top + 8,
+                left: nodeRect.left - containerRect.left + nodeRect.width / 2, // centered horizontally
+            });
+        }
+        else if (visible && nodeRef?.current && !portalTarget) {
+            // Fallback to viewport positioning if no portal target
+            const rect = nodeRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + 8,
+                left: rect.left + rect.width / 2,
+            });
+        }
+        else if (!nodeRef) {
+            // No ref provided - will use relative positioning (for storybook demos)
+            setPosition({ top: 0, left: 0 });
+        }
+    }, [visible, nodeRef, portalTarget]);
+    if (!visible)
+        return null;
+    // If no nodeRef, render inline (for storybook demos)
+    const usePortal = Boolean(nodeRef);
+    const getKindLabel = (kind) => {
+        switch (kind) {
+            case 'type':
+                return 'Type';
+            case 'service':
+                return 'Service';
+            case 'instance':
+                return 'Instance';
+            default:
+                return kind;
+        }
+    };
+    const getKindColor = (kind) => {
+        switch (kind) {
+            case 'type':
+                return '#4A90E2'; // Blue
+            case 'service':
+                return '#7ED321'; // Green
+            case 'instance':
+                return '#9B59B6'; // Purple
+            default:
+                return '#888';
+        }
+    };
+    const renderTooltipContent = () => (_jsxs("div", { style: {
+            // Use absolute positioning relative to portal target container
+            position: usePortal ? 'absolute' : 'absolute',
+            top: usePortal ? position?.top ?? 0 : '100%',
+            left: usePortal ? position?.left ?? 0 : '50%',
+            transform: 'translateX(-50%)',
+            marginTop: usePortal ? 0 : '8px',
+            padding: '8px 12px',
+            backgroundColor: 'rgba(0, 0, 0, 0.9)',
+            color: 'white',
+            borderRadius: '6px',
+            fontSize: theme.fontSizes[0],
+            fontFamily: theme.fonts.body,
+            maxWidth: '400px',
+            maxHeight: '500px',
+            zIndex: 99999,
+            pointerEvents: 'none',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+            whiteSpace: 'normal',
+            opacity: usePortal ? (position ? 1 : 0) : 1,
+            overflow: 'auto',
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    top: '-6px',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    width: 0,
+                    height: 0,
+                    borderLeft: '6px solid transparent',
+                    borderRight: '6px solid transparent',
+                    borderBottom: '6px solid rgba(0, 0, 0, 0.9)',
+                } }), otel && (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '6px',
+                    marginBottom: description || otel.scope ? '6px' : 0,
+                }, children: [_jsx("span", { style: {
+                            backgroundColor: getKindColor(otel.kind),
+                            color: 'white',
+                            padding: '2px 6px',
+                            borderRadius: '3px',
+                            fontSize: theme.fontSizes[0],
+                            fontWeight: theme.fontWeights.semibold,
+                            fontFamily: theme.fonts.body,
+                            textTransform: 'uppercase',
+                        }, children: getKindLabel(otel.kind) }), otel.category && (_jsx("span", { style: { color: 'rgba(255,255,255,0.7)', fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }, children: otel.category }))] })), otel?.scope && (_jsxs("div", { style: {
+                    marginBottom: description ? '6px' : 0,
+                    fontSize: theme.fontSizes[0],
+                    fontFamily: theme.fonts.body,
+                    color: 'rgba(255,255,255,0.8)'
+                }, children: [_jsx("span", { style: {
+                            color: 'rgba(255,255,255,0.6)',
+                            fontWeight: theme.fontWeights.semibold
+                        }, children: "Scope:" }), ' ', _jsx("span", { style: { fontFamily: 'monospace' }, children: otel.scope })] })), description ? (_jsx("div", { style: { lineHeight: '1.4', color: 'rgba(255,255,255,0.9)' }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "tooltip", slideIndex: 0, isVisible: true, theme: {
+                        ...theme,
+                        colors: {
+                            ...theme.colors,
+                            background: 'transparent',
+                            text: 'rgba(255,255,255,0.9)',
+                        },
+                    }, transparentBackground: true, disableScroll: true, fontSizeScale: 0.85, enableKeyboardScrolling: false, autoFocusOnVisible: false }) })) : (_jsx("div", { style: { lineHeight: '1.4', color: 'rgba(255,255,255,0.5)' }, children: "No description" })), (() => {
+                const sourceFiles = otel?.files || sources;
+                if (!sourceFiles || sourceFiles.length === 0)
+                    return null;
+                return (_jsxs("div", { style: { marginTop: '8px', borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: '6px' }, children: [_jsx("div", { style: {
+                                fontSize: theme.fontSizes[0],
+                                fontWeight: theme.fontWeights.semibold,
+                                color: 'rgba(255,255,255,0.7)',
+                                marginBottom: '4px'
+                            }, children: "Source Files:" }), _jsx("div", { style: { fontSize: theme.fontSizes[0], color: 'rgba(255,255,255,0.8)' }, children: sourceFiles.map((file, index) => (_jsx("div", { style: {
+                                    fontFamily: 'monospace',
+                                    fontSize: theme.fontSizes[0],
+                                    marginTop: index > 0 ? '2px' : 0,
+                                    wordBreak: 'break-all'
+                                }, children: file }, index))) })] }));
+            })(), references && references.length > 0 && (_jsxs("div", { style: { marginTop: '8px', borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: '6px' }, children: [_jsx("div", { style: {
+                            fontSize: theme.fontSizes[0],
+                            fontWeight: theme.fontWeights.semibold,
+                            color: 'rgba(255,255,255,0.7)',
+                            marginBottom: '4px'
+                        }, children: "References:" }), _jsx("div", { style: { fontSize: theme.fontSizes[0], color: 'rgba(255,255,255,0.8)' }, children: references.map((ref, index) => (_jsx("div", { style: {
+                                fontFamily: 'monospace',
+                                fontSize: theme.fontSizes[0],
+                                marginTop: index > 0 ? '2px' : 0,
+                                wordBreak: 'break-all'
+                            }, children: ref }, index))) })] }))] }));
+    // Use portal to render in the graph container when available, otherwise render inline
+    if (usePortal) {
+        // Portal to graph container (hides with tab) or fallback to body
+        const target = portalTarget || document.body;
+        return createPortal(renderTooltipContent(), target);
+    }
+    return renderTooltipContent();
+};
+//# sourceMappingURL=NodeTooltip.js.map

package/dist/components/NodeTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTooltip.js","sourceRoot":"","sources":["../../src/components/NodeTooltip.tsx"],"names":[],"mappings":"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"}

package/dist/components/SelectionSidebar.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { NodeState, NodeTypeDefinition } from '@principal-ai/subsystems-core';
+export interface SelectionSidebarProps {
+    /** Set of selected node IDs */
+    selectedNodeIds: Set<string>;
+    /** All nodes in the graph */
+    nodes: NodeState[];
+    /** Node type definitions for icons and colors */
+    nodeTypeDefinitions: Record<string, NodeTypeDefinition>;
+    /** Callback when sidebar is closed */
+    onClose: () => void;
+}
+/**
+ * Sidebar that displays information about multiple selected nodes
+ * Shows name and description for each node, with expandable details
+ */
+export declare const SelectionSidebar: React.FC<SelectionSidebarProps>;
+//# sourceMappingURL=SelectionSidebar.d.ts.map

package/dist/components/SelectionSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionSidebar.d.ts","sourceRoot":"","sources":["../../src/components/SelectionSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAInF,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,6BAA6B;IAC7B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,iDAAiD;IACjD,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACxD,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAMD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuU5D,CAAC"}

package/dist/components/SelectionSidebar.js

@@ -0,0 +1,190 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { resolveIcon } from '../utils/iconResolver';
+/**
+ * Sidebar that displays information about multiple selected nodes
+ * Shows name and description for each node, with expandable details
+ */
+export const SelectionSidebar = ({ selectedNodeIds, nodes, nodeTypeDefinitions, onClose, }) => {
+    const { theme } = useTheme();
+    const [expandedNodes, setExpandedNodes] = useState({});
+    // Get the selected nodes in order
+    const selectedNodes = nodes.filter((n) => selectedNodeIds.has(n.id));
+    const toggleExpanded = (nodeId) => {
+        setExpandedNodes((prev) => ({
+            ...prev,
+            [nodeId]: !prev[nodeId],
+        }));
+    };
+    // Internal fields that should not be displayed
+    const internalFields = [
+        'icon',
+        'name',
+        'description',
+        'sources',
+        'color',
+        'stroke',
+        'width',
+        'height',
+        'canvasType',
+        'text',
+        'file',
+        'url',
+        'shape',
+        'states',
+        'actions',
+        'nodeType',
+    ];
+    return (_jsxs("div", { style: {
+            position: 'absolute',
+            top: '60px',
+            right: '20px',
+            backgroundColor: theme.colors.background,
+            color: theme.colors.text,
+            borderRadius: '8px',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+            padding: '16px',
+            minWidth: '280px',
+            maxWidth: '350px',
+            maxHeight: 'calc(100vh - 120px)',
+            overflowY: 'auto',
+            zIndex: 1000,
+            border: `1px solid ${theme.colors.border}`,
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '12px',
+                    paddingBottom: '8px',
+                    borderBottom: `2px solid ${theme.colors.primary}`,
+                }, children: [_jsxs("div", { style: { fontWeight: theme.fontWeights.bold, fontSize: theme.fontSizes[1], fontFamily: theme.fonts.body, color: theme.colors.primary }, children: [selectedNodes.length, " nodes selected"] }), _jsx("button", { onClick: onClose, style: {
+                            border: 'none',
+                            background: 'none',
+                            cursor: 'pointer',
+                            fontSize: theme.fontSizes[3],
+                            fontFamily: theme.fonts.body,
+                            color: theme.colors.textSecondary,
+                            padding: '0',
+                            width: '24px',
+                            height: '24px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }, children: "x" })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: selectedNodes.map((node) => {
+                    const typeDefinition = nodeTypeDefinitions[node.type];
+                    const nodeColor = node.data?.color || typeDefinition?.color || theme.colors.secondary;
+                    const icon = node.data?.icon || typeDefinition?.icon;
+                    const isExpanded = expandedNodes[node.id] || false;
+                    const description = node.data?.description;
+                    // Get displayable data entries
+                    const dataEntries = node.data
+                        ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key))
+                        : [];
+                    return (_jsxs("div", { style: {
+                            backgroundColor: theme.colors.surface,
+                            borderRadius: '6px',
+                            border: `1px solid ${theme.colors.border}`,
+                            overflow: 'hidden',
+                        }, children: [_jsxs("button", { onClick: () => toggleExpanded(node.id), style: {
+                                    width: '100%',
+                                    padding: '10px 12px',
+                                    backgroundColor: 'transparent',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'flex-start',
+                                    gap: '10px',
+                                    textAlign: 'left',
+                                }, children: [_jsx("div", { style: {
+                                            width: '28px',
+                                            height: '28px',
+                                            borderRadius: '6px',
+                                            backgroundColor: nodeColor,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            flexShrink: 0,
+                                            color: 'white',
+                                        }, children: icon ? resolveIcon(icon, 16) : null }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
+                                                    fontWeight: theme.fontWeights.semibold,
+                                                    fontSize: theme.fontSizes[1],
+                                                    fontFamily: theme.fonts.body,
+                                                    color: theme.colors.text,
+                                                    marginBottom: description ? '2px' : 0,
+                                                }, children: node.name || node.id }), description && (_jsx("div", { style: {
+                                                    fontSize: theme.fontSizes[0],
+                                                    fontFamily: theme.fonts.body,
+                                                    color: theme.colors.textSecondary,
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    display: '-webkit-box',
+                                                    WebkitLineClamp: isExpanded ? 'unset' : 2,
+                                                    WebkitBoxOrient: 'vertical',
+                                                }, children: description }))] }), _jsx("div", { style: {
+                                            color: theme.colors.textSecondary,
+                                            fontSize: '10px',
+                                            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                                            transition: 'transform 0.2s',
+                                            flexShrink: 0,
+                                        }, children: "\u25BC" })] }), isExpanded && (_jsxs("div", { style: {
+                                    padding: '0 12px 10px 12px',
+                                    borderTop: `1px solid ${theme.colors.border}`,
+                                    marginTop: '0',
+                                }, children: [_jsxs("div", { style: { marginTop: '10px' }, children: [_jsx("div", { style: {
+                                                    fontSize: theme.fontSizes[0],
+                                                    fontFamily: theme.fonts.body,
+                                                    color: theme.colors.textSecondary,
+                                                    marginBottom: '4px',
+                                                }, children: "Type" }), _jsx("div", { style: {
+                                                    fontSize: theme.fontSizes[0],
+                                                    fontFamily: theme.fonts.body,
+                                                    padding: '3px 8px',
+                                                    backgroundColor: nodeColor,
+                                                    color: 'white',
+                                                    borderRadius: '4px',
+                                                    display: 'inline-block',
+                                                }, children: node.type })] }), node.state && (_jsxs("div", { style: { marginTop: '8px' }, children: [_jsx("div", { style: {
+                                                    fontSize: theme.fontSizes[0],
+                                                    fontFamily: theme.fonts.body,
+                                                    color: theme.colors.textSecondary,
+                                                    marginBottom: '4px',
+                                                }, children: "State" }), _jsx("div", { style: {
+                                                    fontSize: theme.fontSizes[0],
+                                                    fontFamily: theme.fonts.body,
+                                                    padding: '3px 8px',
+                                                    backgroundColor: typeDefinition?.states?.[node.state]?.color || theme.colors.secondary,
+                                                    color: 'white',
+                                                    borderRadius: '4px',
+                                                    display: 'inline-block',
+                                                }, children: typeDefinition?.states?.[node.state]?.label || node.state })] })), dataEntries.length > 0 && (_jsxs("div", { style: { marginTop: '8px' }, children: [_jsx("div", { style: {
+                                                    fontSize: theme.fontSizes[0],
+                                                    fontFamily: theme.fonts.body,
+                                                    color: theme.colors.textSecondary,
+                                                    marginBottom: '6px',
+                                                    fontWeight: 'bold',
+                                                }, children: "Properties" }), dataEntries.map(([key, value]) => (_jsxs("div", { style: { marginBottom: '6px' }, children: [_jsx("div", { style: {
+                                                            fontSize: theme.fontSizes[0],
+                                                            fontFamily: theme.fonts.body,
+                                                            color: theme.colors.textSecondary,
+                                                            marginBottom: '2px',
+                                                        }, children: key }), _jsx("div", { style: {
+                                                            fontSize: theme.fontSizes[0],
+                                                            fontFamily: theme.fonts.body,
+                                                            color: theme.colors.text,
+                                                            wordBreak: 'break-word',
+                                                        }, children: value !== undefined && value !== null
+                                                            ? typeof value === 'object'
+                                                                ? JSON.stringify(value, null, 2)
+                                                                : String(value)
+                                                            : '-' })] }, key)))] })), _jsxs("div", { style: {
+                                            fontSize: theme.fontSizes[0],
+                                            fontFamily: theme.fonts.body,
+                                            color: theme.colors.textMuted,
+                                            marginTop: '8px',
+                                            paddingTop: '6px',
+                                            borderTop: `1px solid ${theme.colors.border}`,
+                                        }, children: ["ID: ", node.id] })] }))] }, node.id));
+                }) })] }));
+};
+//# sourceMappingURL=SelectionSidebar.js.map

package/dist/components/SelectionSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionSidebar.js","sourceRoot":"","sources":["../../src/components/SelectionSidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/SequenceDiagramRenderer.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Sequence Diagram Renderer
+ *
+ * Renders events in swimlane-based sequence diagram layout.
+ * Uses namespaces to determine swimlanes and event order for vertical positioning.
+ */
+import React from 'react';
+import { type NodeTypes, type EdgeTypes } from '@xyflow/react';
+import { type SequenceEvent, type SequenceEdge, type UseSequenceLayoutOptions } from '../hooks/useSequenceLayout';
+/**
+ * Props for SequenceDiagramRenderer
+ */
+export interface SequenceDiagramRendererProps {
+    /** Events to display in the diagram */
+    events: SequenceEvent[];
+    /** Edges connecting events */
+    edges: SequenceEdge[];
+    /** Layout options */
+    layoutOptions?: UseSequenceLayoutOptions;
+    /** Optional custom node types */
+    nodeTypes?: NodeTypes;
+    /** Optional custom edge types */
+    edgeTypes?: EdgeTypes;
+    /**
+     * Called when the user toggles a lane's drill state via the header
+     * chevrons. Update `layoutOptions.openedNamespaces` in response to
+     * open/close the lane.
+     */
+    onToggleNamespace?: (namespace: string) => void;
+    /** Callback when a node is clicked */
+    onNodeClick?: (nodeId: string, event: React.MouseEvent) => void;
+    /** ID of the currently selected node (for visual highlighting) */
+    selectedNodeId?: string;
+    /** Optional class name */
+    className?: string;
+    /** Optional width */
+    width?: number | string;
+    /** Optional height */
+    height?: number | string;
+    /** Whether to show controls */
+    showControls?: boolean;
+    /** Whether to show background grid */
+    showBackground?: boolean;
+    /** Whether swimlane headers should stick to the top when scrolling vertically (default: true) */
+    stickyHeaders?: boolean;
+    /** Whether to show event labels on nodes (default: false, labels already shown on edges) */
+    showEventLabels?: boolean;
+    /**
+     * When true, render the diagram chrome (canvas background, swimlane fills,
+     * header backgrounds) as transparent so the diagram can be composited over
+     * an arbitrary backdrop. Lifelines, borders, edges, and label pills keep
+     * their theme colors so the diagram stays legible. Defaults to `false`.
+     */
+    transparent?: boolean;
+}
+/**
+ * Sequence Diagram Renderer
+ *
+ * Renders events as a sequence diagram with swimlanes based on namespaces.
+ *
+ * @example
+ * ```tsx
+ * <SequenceDiagramRenderer
+ *   events={[
+ *     { id: '1', name: 'auth.validation.started' },
+ *     { id: '2', name: 'auth.validation.completed' },
+ *     { id: '3', name: 'database.query.executed' },
+ *   ]}
+ *   edges={[
+ *     { id: 'e1', fromEvent: '1', toEvent: '2' },
+ *     { id: 'e2', fromEvent: '2', toEvent: '3' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function SequenceDiagramRenderer(props: SequenceDiagramRendererProps): React.JSX.Element;
+//# sourceMappingURL=SequenceDiagramRenderer.d.ts.map

package/dist/components/SequenceDiagramRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SequenceDiagramRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SequenceDiagramRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAaL,KAAK,SAAS,EACd,KAAK,SAAS,EAGf,MAAM,eAAe,CAAC;AAGvB,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,wBAAwB,EAG9B,MAAM,4BAA4B,CAAC;AA8uBpC;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,uCAAuC;IACvC,MAAM,EAAE,aAAa,EAAE,CAAC;IAExB,8BAA8B;IAC9B,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB,qBAAqB;IACrB,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,iCAAiC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEhE,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,sCAAsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,4FAA4F;IAC5F,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiRD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBAiB1E"}