@principal-ai/subsystems-react 0.20.6 → 0.21.1

package/src/subsystem/model.ts

@@ -21,6 +21,10 @@ import { computeElkLayout, calculatePathLength } from '../utils/elkLayout';
 import type { GraphifyComponentDetail } from '../graphify';
 import type { SubsystemDeclarationRef } from './declarationRef';
 
+/** Structured declaration shape — same union as graphify drill-down payloads. */
+export type SubsystemConstructDeclaration = GraphifyComponentDetail;
+export type SubsystemDeclarationProvenance = 'verified' | 'authored';
+
 export type SubsystemComponentConstruct =
   | 'class'
   | 'function'
@@ -82,20 +86,29 @@ export interface SubsystemDeclToken {
   color?: string;
 }
 
-export type SubsystemEdgeMechanism =
+/**
+ * Topology relation type — structural / module / type claims.
+ * Belongs on `relations[]`, not on walkthrough hops.
+ */
+export type SubsystemRelationType =
   | 'imports'
   | 'imports_from'
   | 're_exports'
   | 'defines'
-  | 'calls'
   | 'extends'
   | 'inherits'
   | 'implements'
   | 'mixes_in'
-  | 'uses'
   | 'method'
   | 'references'
-  | 'contains'
+  | 'contains';
+
+/**
+ * Walkthrough hop mechanism — runtime seams with a `file:line` site.
+ */
+export type SubsystemWalkthroughMechanism =
+  | 'calls'
+  | 'uses'
   | 'feeds'
   | 'produces'
   | 'writes'
@@ -103,6 +116,11 @@ export type SubsystemEdgeMechanism =
   | 'watches'
   | 'registers-into';
 
+/** Union for derived graph-edge styling (relationType or hop mechanism). */
+export type SubsystemEdgeMechanism =
+  | SubsystemRelationType
+  | SubsystemWalkthroughMechanism;
+
 /** A component node — the named unit, construct-tagged; `file` is its location. */
 export interface SubsystemComponent {
   id: string;
@@ -187,20 +205,20 @@ export interface SubsystemComponent {
    */
   layer?: number;
   /**
-   * Graphify drill-down detail for this component, when the facet is anchored
-   * to a graphify node. Discriminated by kind (class/function/type/module/store/
-   * external); rendered in the detail panel on click.
+   * Structured declaration shape of the construct (params, members, type
+   * buckets, …). Single source of truth for the click panel — authored by
+   * agents/CLI or filled by verified graphify capture. Discriminated by kind.
    */
-  detail?: GraphifyComponentDetail;
+  declaration?: SubsystemConstructDeclaration;
   /**
-   * Where the drill-down `detail` came from. `verified` = extracted from
+   * Where the structured `declaration` came from. `verified` = extracted from
    * source by tooling (graphify AST, signature extraction) — may be trusted
    * as matching the code. `authored` = written by the authoring agent/human
    * to highlight specific inputs/outputs — informative, not checked against
-   * source. Detail without provenance is treated as `authored`; only tooling
-   * may claim `verified`.
+   * source. Declaration without provenance is treated as `authored`; only
+   * tooling may claim `verified`.
    */
-  detailProvenance?: 'verified' | 'authored';
+  declarationProvenance?: SubsystemDeclarationProvenance;
   /**
    * Pre-tokenized declaration for the detail panel. When present, the
    * renderer skips client-side tokenization. Tokens are language-agnostic;
@@ -214,7 +232,20 @@ export interface SubsystemComponent {
   declarationRef?: SubsystemDeclarationRef;
 }
 
-/** A cross-component edge in the subsystem graph. */
+/** A topology relation between components (structural / module / type). */
+export interface SubsystemRelation {
+  id: string;
+  from: string;
+  to: string;
+  relationType: SubsystemRelationType;
+  /** Concrete file/symbol refs backing the relation. */
+  refs?: string[];
+}
+
+/**
+ * Derived / display graph edge used by renderers. Built from `relations`
+ * and/or walkthrough hops — not authored as its own document field.
+ */
 export interface SubsystemComponentEdge {
   id: string;
   from: string; // component id
@@ -225,41 +256,97 @@ export interface SubsystemComponentEdge {
 }
 
 /**
- * A single site on an existing edge — the exact `file:line` where that edge's
- * seam manifests for a given flow. The edge stays the abstract contract
- * (`from`, `to`, `mechanism`); a throughline step picks the concrete
- * manifestation. One edge can appear in many steps.
+ * A single runtime hop — `from`/`to`/`mechanism` plus the exact `file:line`
+ * where that seam fires for a walkthrough.
  */
-export interface SubsystemThroughlineStep {
-  /** Id of the existing edge this hop traverses. */
-  edgeId: string;
-  /** Repo-root-relative path of the file where the edge fires. */
+export interface SubsystemWalkthroughStep {
+  from: string;
+  to: string;
+  mechanism: SubsystemWalkthroughMechanism;
+  /** Repo-root-relative path of the file where the seam fires. */
   file: string;
   /** 1-based line of the site within `file`. */
   line: number;
   /**
    * Frame name for this hop — the function/method/symbol on the stack at
-   * this site. Optional so existing throughlines keep working; when set the
-   * flows list shows it instead of mechanism + filename.
+   * this site. Optional; when set the walkthroughs list shows it instead of
+   * mechanism + filename.
    */
   symbol?: string;
   /**
    * Free-text note anchored to this hop's site line. Optional — informative
-   * only, never verified against source; the Pierre throughline code view
+   * only, never verified against source; the Pierre walkthrough code view
    * surfaces it in the annotation column next to the highlighted line.
    */
   annotation?: string;
 }
 
-/**
- * An ordered execution story over a graph's edges — each step references an
- * existing edge and the exact site where that relationship fires for a flow;
- * ordering is the array. One throughline per flow (save flow, load flow, …).
- */
-export interface SubsystemThroughline {
+/** An ordered runtime walkthrough — one named behavior story. */
+export interface SubsystemWalkthrough {
   id: string;
   title: string;
-  steps: SubsystemThroughlineStep[];
+  steps: SubsystemWalkthroughStep[];
+}
+
+export interface SubsystemModelDocument {
+  components: SubsystemComponent[];
+  /** Topology relations (structural / module / type). May be empty. */
+  relations: SubsystemRelation[];
+  /** Ordered runtime walkthroughs (one per named behavior). */
+  walkthroughs?: SubsystemWalkthrough[];
+}
+
+/** Stable id for a derived graph edge from a relation or walkthrough hop. */
+export function derivedGraphEdgeId(
+  from: string,
+  to: string,
+  mechanism: SubsystemEdgeMechanism,
+): string {
+  return `${from}--${mechanism}-->${to}`;
+}
+
+/**
+ * Build display edges for the graph canvas from topology relations and
+ * walkthrough hops (deduped by from/to/mechanism).
+ */
+/** React Flow / canvas edge id for a walkthrough hop. */
+export function walkthroughStepGraphEdgeId(
+  step: Pick<SubsystemWalkthroughStep, 'from' | 'to' | 'mechanism'>,
+): string {
+  return derivedGraphEdgeId(step.from, step.to, step.mechanism);
+}
+
+export function deriveGraphEdges(doc: {
+  relations?: SubsystemRelation[];
+  walkthroughs?: SubsystemWalkthrough[];
+}): SubsystemComponentEdge[] {
+  const byId = new Map<string, SubsystemComponentEdge>();
+  for (const r of doc.relations ?? []) {
+    const id = r.id || derivedGraphEdgeId(r.from, r.to, r.relationType);
+    if (!byId.has(id)) {
+      byId.set(id, {
+        id,
+        from: r.from,
+        to: r.to,
+        mechanism: r.relationType,
+        refs: r.refs,
+      });
+    }
+  }
+  for (const w of doc.walkthroughs ?? []) {
+    for (const step of w.steps) {
+      const id = derivedGraphEdgeId(step.from, step.to, step.mechanism);
+      if (!byId.has(id)) {
+        byId.set(id, {
+          id,
+          from: step.from,
+          to: step.to,
+          mechanism: step.mechanism,
+        });
+      }
+    }
+  }
+  return [...byId.values()];
 }
 
 /**
@@ -337,13 +424,6 @@ export function formatPurl(purl: string): string {
   return identity;
 }
 
-export interface SubsystemModelDocument {
-  components: SubsystemComponent[];
-  edges: SubsystemComponentEdge[];
-  /** Ordered execution stories over the graph's edges (one per flow). */
-  throughlines?: SubsystemThroughline[];
-}
-
 // ---------------------------------------------------------------------------
 // React Flow conversion
 // ---------------------------------------------------------------------------
@@ -552,6 +632,50 @@ export function rightBadgeColor(component: {
   return null;
 }
 
+/** Display label per store `storage` backing. */
+export const STORAGE_LABEL: Record<string, string> = {
+  memory: 'memory',
+  disk: 'disk',
+  external: 'db',
+};
+
+/** Right-badge accent per store `storage` backing — retention reads as its
+ *  own hue so memory / disk / db are scannable from far on a canvas. */
+export const STORAGE_COLOR: Record<string, string> = {
+  memory: '#5aa9e6', // sky — process-lifetime RAM
+  disk: '#e3b341', // amber — this process on the filesystem
+  external: '#c46fd8', // violet — mediated by another system (db/service)
+};
+
+function storeStorage(component: {
+  declaration?: GraphifyComponentDetail;
+}): string | undefined {
+  return component.declaration?.kind === 'store'
+    ? component.declaration.storage
+    : undefined;
+}
+
+/** Top-right storage badge for `construct: 'store'` nodes with an authored
+ *  `storage` declaration — how the retained state is backed. Sits beside the
+ *  role/proposed badge (storage is orthogonal to topology). Null otherwise. */
+export function storageBadgeLabel(component: {
+  construct: SubsystemComponentConstruct;
+  declaration?: GraphifyComponentDetail;
+}): string | null {
+  if (component.construct !== 'store') return null;
+  const storage = storeStorage(component);
+  return storage ? (STORAGE_LABEL[storage] ?? storage) : null;
+}
+
+export function storageBadgeColor(component: {
+  construct: SubsystemComponentConstruct;
+  declaration?: GraphifyComponentDetail;
+}): string | null {
+  if (component.construct !== 'store') return null;
+  const storage = storeStorage(component);
+  return storage ? (STORAGE_COLOR[storage] ?? null) : null;
+}
+
 /**
  * Primary badge text for a node: prefer framework stereotype over the
  * language construct so a React UI unit reads as "component" / "hook"
@@ -605,13 +729,19 @@ export function nodeMinWidthForBadges(component: {
   role?: SubsystemComponentRole;
   proposed?: boolean;
   entityKind?: string;
+  declaration?: GraphifyComponentDetail;
 }): number {
   const left = estimateBadgeLabelWidth(constructBadgeLabel(component));
-  const rightLabel = rightBadgeLabel(component);
-  if (rightLabel == null) {
+  const rightBadges = [
+    storageBadgeLabel(component),
+    rightBadgeLabel(component),
+  ].filter((l): l is string => l != null);
+  if (rightBadges.length === 0) {
     return Math.max(NODE_CSS_MIN_WIDTH, BADGE_EDGE_INSET + left + BADGE_EDGE_INSET);
   }
-  const right = estimateBadgeLabelWidth(rightLabel);
+  const right = rightBadges
+    .map(estimateBadgeLabelWidth)
+    .reduce((acc, w) => acc + BADGE_PAIR_GAP + w);
   return Math.max(
     NODE_CSS_MIN_WIDTH,
     BADGE_EDGE_INSET + left + BADGE_PAIR_GAP + right + BADGE_EDGE_INSET,
@@ -714,7 +844,7 @@ export function convertSubsystemToEdges(doc: SubsystemModelDocument): SubsystemG
   const compIds = new Set(doc.components.map((c) => c.id));
   const edges: SubsystemGraphEdge[] = [];
 
-  for (const e of doc.edges) {
+  for (const e of deriveGraphEdges(doc)) {
     const color = MECHANISM_COLOR[e.mechanism];
     const style = MECHANISM_STYLE[e.mechanism];
     // If `to` is a real component, connect directly; otherwise point at a stub node.
@@ -741,14 +871,14 @@ export function convertSubsystemToEdges(doc: SubsystemModelDocument): SubsystemG
 
 /** Stable key for layout-affecting graph fields (ignores declarationRef, etc.). */
 export function subsystemGraphLayoutKey(
-  doc: Pick<SubsystemModelDocument, 'components' | 'edges'>,
+  doc: Pick<SubsystemModelDocument, 'components' | 'relations' | 'walkthroughs'>,
 ): string {
   const components = doc.components
     .map(({ id, purl, name, symbol, construct, file, purpose, process }) =>
       [id, purl, name, symbol ?? '', construct, file, purpose ?? '', process ?? ''].join('\0'))
     .sort()
     .join('\n');
-  const edgeKey = doc.edges
+  const edgeKey = deriveGraphEdges(doc)
     .map(({ id, from, to, mechanism }) => [id, from, to, mechanism].join('\0'))
     .sort()
     .join('\n');
@@ -788,7 +918,7 @@ export async function buildSubsystemGraph(
   // cross-package edges have something to land on.
   const realIds = new Set(doc.components.map((c) => c.id));
   const externalIds: string[] = [];
-  for (const e of doc.edges) {
+  for (const e of deriveGraphEdges(doc)) {
     if (!realIds.has(e.to)) {
       const extId = `external:${e.to}`;
       if (!externalIds.includes(extId)) externalIds.push(extId);

package/src/subsystem/nodes.tsx

@@ -23,6 +23,8 @@ import {
   constructBadgeLabel,
   rightBadgeLabel,
   rightBadgeColor,
+  storageBadgeLabel,
+  storageBadgeColor,
   deriveNameFromSymbol,
   BADGE_EDGE_INSET,
   nodeMinWidthForBadges,
@@ -97,6 +99,9 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
   const badgeMinWidth = nodeMinWidthForBadges(c);
   const topRightLabel = rightBadgeLabel(c);
   const topRightColor = rightBadgeColor(c);
+  // Store retention backing badge — memory/disk/db, beside role (orthogonal).
+  const storageLabel = storageBadgeLabel(c);
+  const storageColor = storageBadgeColor(c);
   // Set while a file is open in the drawer: true → spotlight, false → dim,
   // absent (no file open) → neutral.
   const fileMatch = data.fileMatch as boolean | undefined;
@@ -176,28 +181,57 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
         {constructBadgeLabel(c)}
       </div>
 
-      {/* Right badge — proposed wins over role when both are set. */}
-      {topRightLabel != null && topRightColor != null && (
+      {/* Right badge cluster — proposed wins over role when both are set;
+          store storage (retention backing) sits beside, since it is
+          orthogonal to topology. Persistent; pointer-events pass through. */}
+      {(topRightLabel != null || storageLabel != null) && (
         <div
           style={{
             position: 'absolute',
             top: -9,
             right: BADGE_EDGE_INSET,
             zIndex: 1,
-            fontFamily: theme.fonts.monospace,
-            fontSize: theme.fontSizes[0] * 1.1,
-            letterSpacing: 0.5,
-            textTransform: 'uppercase',
-            lineHeight: '17px',
+            display: 'flex',
+            gap: 6,
             whiteSpace: 'nowrap',
-            color: topRightColor,
-            background: theme.colors.backgroundSecondary ?? theme.colors.background,
-            border: `1px solid ${topRightColor}`,
-            borderRadius: 4,
-            padding: '0 5px',
           }}
         >
-          {topRightLabel}
+          {storageLabel != null && storageColor != null && (
+            <span
+              style={{
+                fontFamily: theme.fonts.monospace,
+                fontSize: theme.fontSizes[0] * 1.1,
+                letterSpacing: 0.5,
+                textTransform: 'uppercase',
+                lineHeight: '17px',
+                color: storageColor,
+                background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                border: `1px solid ${storageColor}`,
+                borderRadius: 4,
+                padding: '0 5px',
+              }}
+            >
+              {storageLabel}
+            </span>
+          )}
+          {topRightLabel != null && topRightColor != null && (
+            <span
+              style={{
+                fontFamily: theme.fonts.monospace,
+                fontSize: theme.fontSizes[0] * 1.1,
+                letterSpacing: 0.5,
+                textTransform: 'uppercase',
+                lineHeight: '17px',
+                color: topRightColor,
+                background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                border: `1px solid ${topRightColor}`,
+                borderRadius: 4,
+                padding: '0 5px',
+              }}
+            >
+              {topRightLabel}
+            </span>
+          )}
         </div>
       )}
 

package/src/subsystem/tokenizeComponent.ts

@@ -50,9 +50,9 @@ export async function tokenizeComponent(
   if (component.tokens) return component.tokens;
 
   // External kind — not valid TypeScript, bypass Prettier.
-  const kind = component.detail?.kind ?? component.construct;
+  const kind = component.declaration?.kind ?? component.construct;
   if (kind === 'external') {
-    const label = component.detail?.kind === 'external' ? component.detail.label : component.name;
+    const label = component.declaration?.kind === 'external' ? component.declaration.label : component.name;
     const escaped = label.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
     return tokenizeFormatted(`external '${escaped}'`, themeName);
   }

package/dist/components/ConfigurationSelector.d.ts

@@ -1,35 +0,0 @@
-import React from 'react';
-import type { ConfigurationFile } from '@principal-ai/subsystems-core';
-export interface ConfigurationSelectorProps {
-    /** Available configurations */
-    configurations: ConfigurationFile[];
-    /** Currently selected configuration name */
-    selectedConfig: string;
-    /** Callback when configuration changes */
-    onConfigChange: (configName: string) => void;
-    /** Optional custom className */
-    className?: string;
-    /** Optional custom styles */
-    style?: React.CSSProperties;
-    /** Whether to show description */
-    showDescription?: boolean;
-    /** Label text for the selector */
-    label?: string;
-}
-/**
- * Configuration selector component for switching between multiple graph configurations
- *
- * @example
- * ```tsx
- * const [selectedConfig, setSelectedConfig] = useState('simple-service');
- *
- * <ConfigurationSelector
- *   configurations={loadedConfigs}
- *   selectedConfig={selectedConfig}
- *   onConfigChange={setSelectedConfig}
- *   showDescription
- * />
- * ```
- */
-export declare const ConfigurationSelector: React.FC<ConfigurationSelectorProps>;
-//# sourceMappingURL=ConfigurationSelector.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ConfigurationSelector.d.ts","sourceRoot":"","sources":["../../src/components/ConfigurationSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,WAAW,0BAA0B;IACzC,+BAA+B;IAC/B,cAAc,EAAE,iBAAiB,EAAE,CAAC;IAEpC,4CAA4C;IAC5C,cAAc,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA2FtE,CAAC"}

package/dist/components/ConfigurationSelector.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Configuration selector component for switching between multiple graph configurations
- *
- * @example
- * ```tsx
- * const [selectedConfig, setSelectedConfig] = useState('simple-service');
- *
- * <ConfigurationSelector
- *   configurations={loadedConfigs}
- *   selectedConfig={selectedConfig}
- *   onConfigChange={setSelectedConfig}
- *   showDescription
- * />
- * ```
- */
-export const ConfigurationSelector = ({ configurations, selectedConfig, onConfigChange, className, style, showDescription = false, label = 'Graph Configuration', }) => {
-    const handleChange = (event) => {
-        onConfigChange(event.target.value);
-    };
-    const selectedConfigData = configurations.find((c) => c.name === selectedConfig);
-    const defaultStyle = {
-        backgroundColor: 'white',
-        padding: '12px 16px',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        ...style,
-    };
-    const labelStyle = {
-        display: 'block',
-        fontSize: '14px',
-        fontWeight: 600,
-        marginBottom: '8px',
-        color: '#333',
-    };
-    const selectStyle = {
-        width: '100%',
-        padding: '8px 12px',
-        fontSize: '14px',
-        border: '1px solid #ddd',
-        borderRadius: '4px',
-        backgroundColor: 'white',
-        cursor: 'pointer',
-        outline: 'none',
-        transition: 'border-color 0.2s',
-    };
-    const infoStyle = {
-        marginTop: '8px',
-        fontSize: '12px',
-        color: '#666',
-        lineHeight: '1.5',
-    };
-    if (configurations.length === 0) {
-        return (_jsx("div", { className: className, style: defaultStyle, children: _jsx("div", { style: { ...labelStyle, color: '#999' }, children: "No configurations available" }) }));
-    }
-    return (_jsxs("div", { className: className, style: defaultStyle, children: [_jsx("label", { style: labelStyle, htmlFor: "config-selector", children: label }), _jsx("select", { id: "config-selector", value: selectedConfig, onChange: handleChange, style: selectStyle, onMouseEnter: (e) => {
-                    e.currentTarget.style.borderColor = '#4A90E2';
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.borderColor = '#ddd';
-                }, children: configurations.map((config) => (_jsx("option", { value: config.name, children: config.config.metadata.name }, config.name))) }), selectedConfigData && showDescription && selectedConfigData.config.metadata.description && (_jsx("div", { style: infoStyle, children: _jsx("div", { children: selectedConfigData.config.metadata.description }) }))] }));
-};
-//# sourceMappingURL=ConfigurationSelector.js.map

package/dist/components/ConfigurationSelector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConfigurationSelector.js","sourceRoot":"","sources":["../../src/components/ConfigurationSelector.tsx"],"names":[],"mappings":";AA0BA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EAC1E,cAAc,EACd,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,eAAe,GAAG,KAAK,EACvB,KAAK,GAAG,qBAAqB,GAC9B,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,CAAC,KAA2C,EAAE,EAAE;QACnE,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,cAAc,CAAC,CAAC;IAEjF,MAAM,YAAY,GAAwB;QACxC,eAAe,EAAE,OAAO;QACxB,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,2BAA2B;QACtC,UAAU,EAAE,mEAAmE;QAC/E,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,MAAM;KACd,CAAC;IAEF,MAAM,WAAW,GAAwB;QACvC,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,gBAAgB;QACxB,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,OAAO;QACxB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,mBAAmB;KAChC,CAAC;IAEF,MAAM,SAAS,GAAwB;QACrC,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,KAAK;KAClB,CAAC;IAEF,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;QAC/B,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,YAC5C,cAAK,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,4CAAmC,GAC3E,CACP,CAAC;KACH;IAED,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,aAC5C,gBAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,iBAAiB,YAChD,KAAK,GACA,EAER,iBACE,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;oBAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;gBAChD,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;oBAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC;gBAC7C,CAAC,YAEA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,iBAA0B,KAAK,EAAE,MAAM,CAAC,IAAI,YACzC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,IADjB,MAAM,CAAC,IAAI,CAEf,CACV,CAAC,GACK,EAER,kBAAkB,IAAI,eAAe,IAAI,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,IAAI,CAC1F,cAAK,KAAK,EAAE,SAAS,YACnB,wBAAM,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,GAAO,GACvD,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}