@principal-ai/subsystems-react 0.18.0 → 0.19.0

package/README.md

@@ -1,93 +1,19 @@
-# @principal-ai/visual-validation-react
+# @principal-ai/subsystems-react
 
-React UI **component library** for the Visual Validation Framework.
+React UI for **Subsystem Models**: component graphs, Pierre code views, graphify helpers, and session-event feeds used by Subsystems Studio.
 
-This library provides **building blocks** for creating graph visualization applications. The actual "panel" application should be built separately using these components.
-
-## Features
-
-- 🎨 `GraphRenderer` - Interactive graph visualization with @xyflow/react
-  - Custom node shapes (circle, rectangle, hexagon, diamond)
-  - State-based node styling
-  - Animated and styled edges
-  - Auto-layout algorithms (hierarchical, circular)
-  - Zoom, pan, drag interactions
-  - Minimap and controls
-- 🎭 `CustomNode` / `CustomEdge` - Configurable xyflow renderers
-
-## Installation
+## Install
 
 ```bash
-npm install @principal-ai/visual-validation-react
-# or
-bun add @principal-ai/visual-validation-react
+npm install @principal-ai/subsystems-react
 ```
 
-## Peer Dependencies
-
-```json
-{
-  "react": "^18.0.0 || ^19.0.0",
-  "react-dom": "^18.0.0 || ^19.0.0"
-}
-```
-
-## Usage
-
-These are **building block components**. You compose them to build your panel application:
-
-```typescript
-import { GraphRenderer } from '@principal-ai/visual-validation-react';
-import type { ExtendedCanvas } from '@principal-ai/subsystems-core';
-
-const canvas: ExtendedCanvas = {
-  // ... your canvas data
-};
-
-function MyPanel() {
-  return (
-    <GraphRenderer
-      canvas={canvas}
-      width="100%"
-      height="600px"
-    />
-  );
-}
-```
-
-**Building a Complete Panel:**
-For a complete panel application with all features (playback controls, filters, etc.), you should create a separate project using a panel starter template and compose these components together.
-
-## Documentation
-
-Comprehensive guides with Mermaid diagrams:
-
-- **[Configuration Guide](../../docs/CONFIGURATION.md)** - Define your graph structure, node/edge types, and validation rules
-- **[Event System Guide](../../docs/EVENT_SYSTEM.md)** - Stream events to update your graph in real-time
-- **[Usage Guide](../../docs/USAGE.md)** - Build complete panels with React components
-
-Or browse the [full documentation index](../../docs/README.md).
-
-## Storybook
-
-Interactive component examples:
-
-```bash
-bun run storybook
-```
-
-## Status
-
-**Alpha** - Core placeholder implemented. Full visualization features coming soon.
-
-### TODO
-
-- ✅ Integrate xyflow for graph visualization
-- ✅ Implement node renderers with shapes and states
-- ✅ Implement edge renderers with styles and animations
-- ✅ Add auto-layout algorithms
-- ✅ Add Storybook stories
+Peer dependency: `@principal-ai/subsystems-core` (>= 0.29.0), plus React 18/19.
 
-## License
+## Main exports
 
-MIT
+- `SubsystemComponentGraph` — interactive subsystem model graph
+- Pierre wrappers — `PierreFileView`, `PierreSnippetView`, `PierreThroughlineCodeView`
+- Graphify helpers — anchor/signature/kind utilities
+- `SessionEventFeed` / `SessionEventFeedGrouped` — agent session event feeds
+- ELK layout helpers — `computeElkLayout`, `useElkLayout`

package/dist/subsystem/SubsystemCarousel.d.ts

@@ -0,0 +1,36 @@
+/**
+ * SubsystemCarousel — prototype gallery for flipping through subsystem models.
+ *
+ * Stage shows one live `SubsystemComponentGraph` at a time (prev/next). A
+ * browse button opens a grid overlay of all items so users can jump directly.
+ * Hosts pass items explicitly so site showcase cases and package Storybook
+ * fixtures can both drive the same component.
+ */
+/// <reference types="react" />
+import type { SubsystemComponent, SubsystemComponentEdge, SubsystemThroughline } from './model';
+export interface SubsystemCarouselItem {
+    id: string;
+    /** Card / stage title. */
+    title: string;
+    /** One-line blurb on the card. */
+    description?: string;
+    /** Stack chip (e.g. TypeScript, Python, Rust). */
+    stack?: string;
+    complexity?: 'low' | 'medium' | 'high';
+    components: SubsystemComponent[];
+    edges: SubsystemComponentEdge[];
+    throughlines?: SubsystemThroughline[];
+}
+export interface SubsystemCarouselProps {
+    items: SubsystemCarouselItem[];
+    /** Controlled selection; falls back to first item when omitted. */
+    selectedId?: string;
+    /** Fires when the user picks a card or uses prev/next. */
+    onSelect?: (id: string) => void;
+    /** Show the live graph for the selected item. @default true */
+    showGraph?: boolean;
+    /** Stage height (CSS). @default '70vh' */
+    stageHeight?: string | number;
+}
+export declare function SubsystemCarousel({ items, selectedId: controlledId, onSelect, showGraph, stageHeight, }: SubsystemCarouselProps): import("react").JSX.Element;
+//# sourceMappingURL=SubsystemCarousel.d.ts.map

package/dist/subsystem/SubsystemCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubsystemCarousel.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemCarousel.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;AAOH,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAOD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EAAE,YAAY,EACxB,QAAQ,EACR,SAAgB,EAChB,WAAoB,GACrB,EAAE,sBAAsB,+BAiRxB"}

package/dist/subsystem/SubsystemCarousel.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SubsystemCarousel — prototype gallery for flipping through subsystem models.
+ *
+ * Stage shows one live `SubsystemComponentGraph` at a time (prev/next). A
+ * browse button opens a grid overlay of all items so users can jump directly.
+ * Hosts pass items explicitly so site showcase cases and package Storybook
+ * fixtures can both drive the same component.
+ */
+import { useCallback, useEffect, useId, useState } from 'react';
+import { ChevronLeft, ChevronRight, LayoutGrid, X } from 'lucide-react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { SubsystemComponentGraph } from './SubsystemComponentGraph';
+function clampIndex(i, len) {
+    if (len <= 0)
+        return 0;
+    return ((i % len) + len) % len;
+}
+export function SubsystemCarousel({ items, selectedId: controlledId, onSelect, showGraph = true, stageHeight = '70vh', }) {
+    const { theme } = useTheme();
+    const titleId = useId();
+    const [gridOpen, setGridOpen] = useState(false);
+    const [uncontrolledId, setUncontrolledId] = useState(items[0]?.id ?? '');
+    const selectedId = controlledId ?? uncontrolledId;
+    const selectedIndex = Math.max(0, items.findIndex((it) => it.id === selectedId));
+    const selected = items[selectedIndex] ?? items[0];
+    const selectAt = useCallback((index) => {
+        const next = items[clampIndex(index, items.length)];
+        if (!next)
+            return;
+        if (controlledId === undefined)
+            setUncontrolledId(next.id);
+        onSelect?.(next.id);
+    }, [controlledId, items, onSelect]);
+    const selectId = useCallback((id) => {
+        const idx = items.findIndex((it) => it.id === id);
+        if (idx >= 0)
+            selectAt(idx);
+    }, [items, selectAt]);
+    useEffect(() => {
+        if (controlledId !== undefined)
+            return;
+        if (!items.some((it) => it.id === uncontrolledId) && items[0]) {
+            setUncontrolledId(items[0].id);
+        }
+    }, [controlledId, items, uncontrolledId]);
+    useEffect(() => {
+        if (!gridOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                setGridOpen(false);
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [gridOpen]);
+    const onStageKeyDown = (e) => {
+        if (gridOpen)
+            return;
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            selectAt(selectedIndex + 1);
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            selectAt(selectedIndex - 1);
+        }
+    };
+    if (!items.length || !selected) {
+        return (_jsx("div", { style: { padding: 24, color: theme.colors.textMuted ?? theme.colors.textSecondary }, children: "No subsystem examples." }));
+    }
+    const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+    const border = theme.colors.border ?? 'rgba(127,127,127,0.3)';
+    return (_jsxs("div", { role: "region", "aria-labelledby": titleId, tabIndex: 0, onKeyDown: onStageKeyDown, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            minHeight: 0,
+            position: 'relative',
+            background: theme.colors.background,
+            color: theme.colors.text,
+            fontFamily: theme.fonts.body,
+            outline: 'none',
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 12,
+                    padding: '10px 16px',
+                    borderBottom: `1px solid ${border}`,
+                }, children: [_jsx("button", { type: "button", "aria-label": "Previous example", onClick: () => selectAt(selectedIndex - 1), style: navBtnStyle(theme), children: _jsx(ChevronLeft, { size: 18 }) }), _jsxs("div", { style: { textAlign: 'center', minWidth: 0, flex: 1 }, children: [_jsx("div", { id: titleId, style: { fontWeight: 600, fontSize: 16 }, children: selected.title }), selected.description && (_jsx("div", { style: { fontSize: 13, color: muted, marginTop: 2 }, children: selected.description })), _jsxs("div", { style: { fontSize: 11, color: muted, marginTop: 4, opacity: 0.8 }, children: [selectedIndex + 1, " / ", items.length, selected.stack ? ` · ${selected.stack}` : ''] })] }), _jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsxs("button", { type: "button", "aria-label": "Browse all examples", "aria-expanded": gridOpen, onClick: () => setGridOpen(true), style: {
+                                    ...navBtnStyle(theme),
+                                    width: 'auto',
+                                    padding: '0 12px',
+                                    gap: 6,
+                                    fontSize: 13,
+                                }, children: [_jsx(LayoutGrid, { size: 16 }), "All"] }), _jsx("button", { type: "button", "aria-label": "Next example", onClick: () => selectAt(selectedIndex + 1), style: navBtnStyle(theme), children: _jsx(ChevronRight, { size: 18 }) })] })] }), showGraph && (_jsx("div", { style: { flex: 1, minHeight: stageHeight, position: 'relative' }, children: _jsx(SubsystemComponentGraph, { components: selected.components, edges: selected.edges, throughlines: selected.throughlines, title: selected.title, description: selected.description, hideSidebar: true, graphTitle: selected.title, showEdgeLabels: true }, selected.id) })), gridOpen && (_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "All subsystem examples", style: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 40,
+                    background: theme.colors.background,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: 0,
+                }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            padding: '12px 16px',
+                            borderBottom: `1px solid ${border}`,
+                        }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: 16 }, children: "All examples" }), _jsx("button", { type: "button", "aria-label": "Close browse grid", onClick: () => setGridOpen(false), style: navBtnStyle(theme), children: _jsx(X, { size: 18 }) })] }), _jsx("div", { style: {
+                            flex: 1,
+                            overflow: 'auto',
+                            padding: 16,
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                            gap: 12,
+                            alignContent: 'start',
+                        }, children: items.map((item) => {
+                            const active = item.id === selected.id;
+                            return (_jsxs("button", { type: "button", onClick: () => {
+                                    selectId(item.id);
+                                    setGridOpen(false);
+                                }, style: {
+                                    textAlign: 'left',
+                                    padding: '14px 16px',
+                                    borderRadius: 10,
+                                    border: `1px solid ${active ? (theme.colors.accent ?? theme.colors.primary) : border}`,
+                                    background: active
+                                        ? (theme.colors.backgroundSecondary ?? theme.colors.surface)
+                                        : (theme.colors.surface ?? theme.colors.background),
+                                    color: theme.colors.text,
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 6,
+                                    minHeight: 110,
+                                }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }, children: [item.stack && (_jsx("span", { style: {
+                                                    fontSize: 11,
+                                                    fontFamily: theme.fonts.monospace,
+                                                    padding: '2px 6px',
+                                                    borderRadius: 4,
+                                                    background: theme.colors.backgroundSecondary ?? theme.colors.surface,
+                                                    color: muted,
+                                                }, children: item.stack })), item.complexity && (_jsx("span", { style: { fontSize: 11, color: muted }, children: item.complexity }))] }), _jsx("div", { style: { fontSize: 15, fontWeight: 600, lineHeight: 1.3 }, children: item.title }), item.description && (_jsx("div", { style: { fontSize: 12, lineHeight: 1.4, color: muted }, children: item.description }))] }, item.id));
+                        }) })] }))] }));
+}
+function navBtnStyle(theme) {
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        border: `1px solid ${theme.colors.border ?? 'rgba(127,127,127,0.3)'}`,
+        background: theme.colors.surface ?? 'transparent',
+        color: theme.colors.text,
+        cursor: 'pointer',
+    };
+}
+//# sourceMappingURL=SubsystemCarousel.js.map

package/dist/subsystem/SubsystemCarousel.js.map

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

package/dist/subsystem/SubsystemComponentGraph.d.ts

@@ -50,12 +50,37 @@ export interface SubsystemComponentGraphProps {
      * subsystem name visible as an overlay on the canvas.
      */
     hideSidebar?: boolean;
+    /**
+     * How throughline step highlighting behaves on the canvas.
+     * - `focus` (default): zoom to the step, hide non-participants, open drawer
+     * - `dim`: keep the full graph, dim non-participants (same as hovering a step)
+     */
+    throughlineStepMode?: 'focus' | 'dim';
+    /**
+     * When true, cycles throughline steps automatically using `dim` highlighting
+     * (no zoom, no drawer). Loops across all throughlines that have steps.
+     * Useful for graph-only embeds (`hideSidebar`).
+     */
+    autoPlayThroughlines?: boolean;
+    /** Pause between autoplay steps in ms. @default 2500 */
+    throughlineAutoPlayIntervalMs?: number;
+    /**
+     * When false, focusing a throughline/step does not call `fitView`.
+     * @default true
+     */
+    zoomOnThroughlineFocus?: boolean;
     /**
      * Subsystem title rendered as a non-interactive overlay chip on the graph
      * canvas (top-center). Does not trigger the sidebar — for graph-only
      * embeds that still need to name what they show.
      */
     graphTitle?: string;
+    /**
+     * When true, shows the active throughline's title as a non-interactive
+     * overlay chip on the canvas (under `graphTitle` when both are set).
+     * Uses the focused or hover-highlighted throughline.
+     */
+    showThroughlineTitle?: boolean;
     /** Markdown description rendered in the sidebar. */
     description?: string;
     /** Rendered over the graph canvas only (not the title/legend sidebar). */

package/dist/subsystem/SubsystemComponentGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubsystemComponentGraph.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemComponentGraph.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBtE,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EAEvB,KAAK,oBAAoB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAKjE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAUzE,+EAA+E;AAC/E,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,oBAAoB,CAAC;IAClC,0EAA0E;IAC1E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAMD,MAAM,WAAW,4BAA4B;IAC3C,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD;kFAC8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAChF;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACvE;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAC9D;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,2DAA2D;IAC3D,qBAAqB,CAAC,EAAE,0BAA0B,GAAG,IAAI,CAAC;CAC3D;AAu7CD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,+BAsC1E"}
+{"version":3,"file":"SubsystemComponentGraph.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemComponentGraph.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBtE,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EAEvB,KAAK,oBAAoB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAKjE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAYzE,+EAA+E;AAC/E,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,oBAAoB,CAAC;IAClC,0EAA0E;IAC1E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAMD,MAAM,WAAW,4BAA4B;IAC3C,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD;kFAC8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACtC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAChF;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACvE;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAC9D;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,2DAA2D;IAC3D,qBAAqB,CAAC,EAAE,0BAA0B,GAAG,IAAI,CAAC;CAC3D;AAsvDD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,+BAsC1E"}