@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/Sankey/SankeyChart.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @file SankeyChart.tsx
+ * @output Root Sankey container — computes layout and provides context
+ * @position Parent component; all Sankey marks are children
+ *
+ * When columns × minColumnWidth exceeds the container, the chart
+ * scrolls horizontally rather than squishing columns together.
+ */
+import { type ReactNode } from 'react';
+import type { SankeyNodeDatum, SankeyLinkDatum, SankeyColumn } from './types';
+export interface SankeyChartProps {
+    /** Node definitions */
+    nodes: SankeyNodeDatum[];
+    /** Link definitions */
+    links: SankeyLinkDatum[];
+    /**
+     * Column definitions. Accepts either:
+     * - Simple: `string[][]` — arrays of node IDs per column
+     * - Rich: `SankeyColumnDef[]` — objects with `ids`, optional `label`
+     * - Mixed: any combination
+     *
+     * If omitted, columns are auto-detected via topological sort.
+     */
+    columns?: SankeyColumn[];
+    /** Chart height in px (default: 320) */
+    height?: number;
+    /** Node bar width in px (default: 20) */
+    nodeWidth?: number;
+    /** Vertical gap between sibling nodes (default: 14) */
+    nodeGap?: number;
+    /**
+     * Override all node bar colors with a single CSS color.
+     * Both SankeyNode and SankeyLabel read this from context
+     * so labels adapt their text color for contrast.
+     */
+    nodeColor?: string;
+    /**
+     * Minimum width per column in px (default: 160).
+     * When total min width exceeds the container, horizontal scrolling activates.
+     */
+    minColumnWidth?: number;
+    /** Chart contents */
+    children: ReactNode;
+}
+/**
+ * Root component for Sankey/flow diagrams.
+ *
+ * Computes layout from nodes + links, exposes positions via context.
+ * Width is responsive but enforces minColumnWidth — scrolls when needed.
+ *
+ * @example
+ * ```tsx
+ * <SankeyChart
+ *   nodes={nodes}
+ *   links={links}
+ *   columns={[
+ *     {ids: ['a', 'b'], label: 'Source'},
+ *     {ids: ['c', 'd'], label: 'Target'},
+ *   ]}
+ * >
+ *   <SankeyGrid />
+ *   <SankeyLink />
+ *   <SankeyNode />
+ *   <SankeyLabel />
+ * </SankeyChart>
+ * ```
+ */
+export declare function SankeyChart({ nodes, links, columns, height, nodeWidth, nodeGap, nodeColor, minColumnWidth, children, }: SankeyChartProps): import("react").JSX.Element;
+export declare namespace SankeyChart {
+    var displayName: string;
+}
+//# sourceMappingURL=SankeyChart.d.ts.map

package/dist/Sankey/SankeyChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+CD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,QAAQ,GACT,EAAE,gBAAgB,+BAkFlB;yBA5Fe,WAAW"}

package/dist/Sankey/SankeyChart.js

@@ -0,0 +1,162 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file SankeyChart.tsx
+ * @output Root Sankey container — computes layout and provides context
+ * @position Parent component; all Sankey marks are children
+ *
+ * When columns × minColumnWidth exceeds the container, the chart
+ * scrolls horizontally rather than squishing columns together.
+ */
+
+import { useMemo, useRef, useState, useLayoutEffect } from 'react';
+import { SankeyProvider } from "./SankeyContext.js";
+import { computeLayout } from "./layout.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Resolve column count from raw column input or auto-detect from graph */
+function resolveColumnCount(columns, nodes, links) {
+  if (columns) {
+    return columns.length;
+  }
+  // Quick topological column count
+  const inDegree = new Map();
+  const outEdges = new Map();
+  nodes.forEach(n => {
+    inDegree.set(n.id, 0);
+    outEdges.set(n.id, []);
+  });
+  links.forEach(l => {
+    inDegree.set(l.target, (inDegree.get(l.target) || 0) + 1);
+    outEdges.get(l.source)?.push(l.target);
+  });
+  const colMap = new Map();
+  const queue = [];
+  nodes.forEach(n => {
+    if (inDegree.get(n.id) === 0) {
+      queue.push(n.id);
+      colMap.set(n.id, 0);
+    }
+  });
+  while (queue.length) {
+    const id = queue.shift();
+    if (id == null) {
+      break;
+    }
+    const col = colMap.get(id) ?? 0;
+    for (const tgt of outEdges.get(id) || []) {
+      colMap.set(tgt, Math.max(colMap.get(tgt) || 0, col + 1));
+      inDegree.set(tgt, (inDegree.get(tgt) || 0) - 1);
+      if (inDegree.get(tgt) === 0) {
+        queue.push(tgt);
+      }
+    }
+  }
+  return Math.max(...Array.from(colMap.values()), 0) + 1;
+}
+
+/**
+ * Root component for Sankey/flow diagrams.
+ *
+ * Computes layout from nodes + links, exposes positions via context.
+ * Width is responsive but enforces minColumnWidth — scrolls when needed.
+ *
+ * @example
+ * ```tsx
+ * <SankeyChart
+ *   nodes={nodes}
+ *   links={links}
+ *   columns={[
+ *     {ids: ['a', 'b'], label: 'Source'},
+ *     {ids: ['c', 'd'], label: 'Target'},
+ *   ]}
+ * >
+ *   <SankeyGrid />
+ *   <SankeyLink />
+ *   <SankeyNode />
+ *   <SankeyLabel />
+ * </SankeyChart>
+ * ```
+ */
+export function SankeyChart({
+  nodes,
+  links,
+  columns,
+  height = 320,
+  nodeWidth = 20,
+  nodeGap = 14,
+  nodeColor,
+  minColumnWidth = 160,
+  children
+}) {
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) {
+      return;
+    }
+    const ro = new ResizeObserver(entries => {
+      const w = entries[0]?.contentRect.width ?? 0;
+      setContainerWidth(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const colCount = useMemo(() => resolveColumnCount(columns, nodes, links), [columns, nodes, links]);
+  const minWidth = colCount * minColumnWidth;
+  const chartWidth = Math.max(containerWidth, minWidth);
+  const needsScroll = containerWidth > 0 && chartWidth > containerWidth;
+  const layout = useMemo(() => {
+    if (containerWidth === 0) {
+      return null;
+    }
+    return computeLayout(nodes, links, {
+      width: chartWidth,
+      height,
+      nodeWidth,
+      nodeGap,
+      columns
+    });
+  }, [nodes, links, chartWidth, height, nodeWidth, nodeGap, columns, containerWidth]);
+  const ctx = useMemo(() => {
+    if (!layout) {
+      return null;
+    }
+    return {
+      nodes: layout.nodes,
+      links: layout.links,
+      columns: layout.columns,
+      width: chartWidth,
+      height,
+      valueScale: layout.valueScale,
+      maxValue: layout.maxValue,
+      nodeWidth,
+      nodeColor
+    };
+  }, [layout, chartWidth, height, nodeWidth, nodeColor]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    style: {
+      width: '100%'
+    },
+    children: ctx && /*#__PURE__*/_jsx("div", {
+      style: needsScroll ? {
+        overflowX: 'auto',
+        overflowY: 'hidden'
+      } : undefined,
+      children: /*#__PURE__*/_jsx("svg", {
+        width: chartWidth,
+        height: height,
+        style: {
+          overflow: 'visible',
+          display: 'block'
+        },
+        children: /*#__PURE__*/_jsx(SankeyProvider, {
+          value: ctx,
+          children: children
+        })
+      })
+    })
+  });
+}
+SankeyChart.displayName = 'SankeyChart';

package/dist/Sankey/SankeyContext.d.ts

@@ -0,0 +1,5 @@
+import type { SankeyContext } from './types';
+export declare const SankeyProvider: import("react").Provider<SankeyContext | null>;
+/** Access the sankey context. Throws if used outside <SankeyChart>. */
+export declare function useSankey(): SankeyContext;
+//# sourceMappingURL=SankeyContext.d.ts.map

package/dist/Sankey/SankeyContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyContext.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyContext.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,cAAc,gDAAqB,CAAC;AAEjD,uEAAuE;AACvE,wBAAgB,SAAS,IAAI,aAAa,CAMzC"}

package/dist/Sankey/SankeyContext.js

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file SankeyContext.ts
+ * @output React context for sharing Sankey layout between components
+ * @position Consumed by SankeyChart (provider) and all child components (consumers)
+ */
+
+import { createContext, useContext } from 'react';
+const SankeyCtx = /*#__PURE__*/createContext(null);
+export const SankeyProvider = SankeyCtx.Provider;
+
+/** Access the sankey context. Throws if used outside <SankeyChart>. */
+export function useSankey() {
+  const ctx = useContext(SankeyCtx);
+  if (!ctx) {
+    throw new Error('Sankey components must be used inside <SankeyChart>');
+  }
+  return ctx;
+}

package/dist/Sankey/SankeyGrid.d.ts

@@ -0,0 +1,20 @@
+export interface SankeyGridProps {
+    /** Dash pattern (default: "4 4") */
+    dashArray?: string;
+    /** Stroke color (default: theme border) */
+    color?: string;
+    /** Opacity (default: 0.3) */
+    opacity?: number;
+    /** Show column header labels if defined (default: true) */
+    showHeaders?: boolean;
+}
+/**
+ * Vertical grid lines at each column position, with optional column headers.
+ *
+ * Place before SankeyLink so grid renders behind ribbons.
+ */
+export declare function SankeyGrid({ dashArray, color, opacity, showHeaders, }: SankeyGridProps): import("react").JSX.Element;
+export declare namespace SankeyGrid {
+    var displayName: string;
+}
+//# sourceMappingURL=SankeyGrid.d.ts.map

package/dist/Sankey/SankeyGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyGrid.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyGrid.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAiB,EACjB,KAAK,EACL,OAAa,EACb,WAAkB,GACnB,EAAE,eAAe,+BAmCjB;yBAxCe,UAAU"}

package/dist/Sankey/SankeyGrid.js

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file SankeyGrid.tsx
+ * @output Dashed vertical lines at each column + optional column headers
+ * @position Visual layer — structural guide behind the flow ribbons
+ */
+
+import { useSankey } from "./SankeyContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Vertical grid lines at each column position, with optional column headers.
+ *
+ * Place before SankeyLink so grid renders behind ribbons.
+ */
+export function SankeyGrid({
+  dashArray = '4 4',
+  color,
+  opacity = 0.3,
+  showHeaders = true
+}) {
+  const {
+    columns,
+    height,
+    nodeWidth
+  } = useSankey();
+  return /*#__PURE__*/_jsx("g", {
+    children: columns.map((col, i) => /*#__PURE__*/_jsxs("g", {
+      children: [/*#__PURE__*/_jsx("line", {
+        x1: col.x + nodeWidth / 2,
+        x2: col.x + nodeWidth / 2,
+        y1: 0,
+        y2: height,
+        stroke: color || 'var(--color-border, #d0d0d8)',
+        strokeOpacity: opacity,
+        strokeDasharray: dashArray,
+        strokeWidth: 1
+      }), showHeaders && col.label && /*#__PURE__*/_jsx("text", {
+        x: col.x + nodeWidth / 2,
+        y: height - 2,
+        textAnchor: "middle",
+        style: {
+          font: '500 10px/1 system-ui',
+          fill: 'var(--color-text-secondary, #6e6e80)',
+          textTransform: 'uppercase',
+          letterSpacing: '0.04em'
+        },
+        children: col.label
+      })]
+    }, i))
+  });
+}
+SankeyGrid.displayName = 'SankeyGrid';

package/dist/Sankey/SankeyLabel.d.ts

@@ -0,0 +1,11 @@
+export interface SankeyLabelProps {
+    /** Show percentage below the node (default: true) */
+    showPercent?: boolean;
+    /** Format function for the value (default: compact notation) */
+    formatValue?: (value: number) => string;
+}
+export declare function SankeyLabel({ showPercent, formatValue, }: SankeyLabelProps): import("react").JSX.Element;
+export declare namespace SankeyLabel {
+    var displayName: string;
+}
+//# sourceMappingURL=SankeyLabel.d.ts.map

package/dist/Sankey/SankeyLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyLabel.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyLabel.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAsCD,wBAAgB,WAAW,CAAC,EAC1B,WAAkB,EAClB,WAA2B,GAC5B,EAAE,gBAAgB,+BA6ClB;yBAhDe,WAAW"}

package/dist/Sankey/SankeyLabel.js

@@ -0,0 +1,179 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file SankeyLabel.tsx
+ * @output Renders node labels — rotated on bar or beside it based on fit
+ * @position Visual layer — adapts placement for readability at every scale
+ *
+ * Two strategies based on available space:
+ * - Tall nodes: rotated -90° text directly on the bar (no background)
+ * - Short nodes: horizontal label beside the bar with surface pill
+ *
+ * Last-column labels anchor to the left to avoid clipping at the chart edge.
+ * Text on bars uses --color-on-dark/--color-on-light from MediaTheme.
+ */
+
+import { useSankey } from "./SankeyContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function defaultFormat(value) {
+  if (value >= 10000) {
+    return Math.round(value / 1000) + 'k';
+  }
+  if (value >= 1000) {
+    return (value / 1000).toFixed(1) + 'k';
+  }
+  return value.toLocaleString();
+}
+
+/**
+ * On-surface text color. When a CSS color override is active, parse its
+ * perceived lightness. For oklch tuples, use the L channel directly.
+ */
+function onSurfaceColor(color, cssOverride) {
+  if (cssOverride) {
+    // Quick heuristic: if the override looks dark, use on-dark
+    // Check for common dark patterns (#1, #0, rgb(0-80,...), black, etc.)
+    const c = cssOverride.toLowerCase().trim();
+    const isDark = c === 'black' || /^#[0-3]/.test(c) || /^#.[0-3]/.test(c) || /^rgb\(\s*[0-7]\d?\s*,/.test(c);
+    return isDark ? 'var(--color-on-dark, #fff)' : 'var(--color-on-light, #000)';
+  }
+  return color[0] < 0.6 ? 'var(--color-on-dark, #fff)' : 'var(--color-on-light, #000)';
+}
+export function SankeyLabel({
+  showPercent = true,
+  formatValue = defaultFormat
+}) {
+  const {
+    nodes,
+    columns,
+    maxValue,
+    height,
+    nodeWidth,
+    nodeColor
+  } = useSankey();
+  const lastColumn = columns.length - 1;
+  return /*#__PURE__*/_jsx("g", {
+    children: nodes.map(node => {
+      const pct = node.value / maxValue * 100;
+      const pctStr = pct >= 10 ? Math.round(pct) + '%' : pct.toFixed(1) + '%';
+      const formatted = formatValue(node.value);
+      const text = `${node.label} = ${formatted}`;
+      const textWidth = text.length * 6.5;
+      const fitsRotated = node.height >= textWidth + 8;
+      if (fitsRotated) {
+        return /*#__PURE__*/_jsx(RotatedLabel, {
+          node: node,
+          nodeWidth: nodeWidth,
+          nodeColor: nodeColor,
+          text: text,
+          pctStr: pctStr,
+          showPercent: showPercent,
+          height: height
+        }, node.id);
+      }
+      return /*#__PURE__*/_jsx(BesideLabel, {
+        node: node,
+        nodeWidth: nodeWidth,
+        text: text,
+        pctStr: pctStr,
+        showPercent: showPercent,
+        height: height,
+        isLastColumn: node.column === lastColumn
+      }, node.id);
+    })
+  });
+}
+
+/** Tall bars: rotated text directly on the bar, no background */
+function RotatedLabel({
+  node,
+  nodeWidth,
+  nodeColor,
+  text,
+  pctStr,
+  showPercent,
+  height
+}) {
+  const cx = node.x + nodeWidth / 2;
+  const cy = node.y + node.height / 2;
+  return /*#__PURE__*/_jsxs("g", {
+    children: [/*#__PURE__*/_jsx("g", {
+      transform: `translate(${cx}, ${cy}) rotate(-90)`,
+      children: /*#__PURE__*/_jsx("text", {
+        x: 0,
+        y: 0,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        style: {
+          font: '600 10px/1 system-ui',
+          fill: onSurfaceColor(node.color, nodeColor),
+          letterSpacing: '-0.01em'
+        },
+        children: text
+      })
+    }), showPercent && node.column > 0 && /*#__PURE__*/_jsx("text", {
+      x: cx,
+      y: Math.min(height - 2, node.y + node.height + 12),
+      textAnchor: "middle",
+      style: {
+        font: '500 9px/1 system-ui',
+        fill: 'var(--color-text-tertiary, #8e8ea0)'
+      },
+      children: pctStr
+    })]
+  });
+}
+
+/**
+ * Short bars: label beside the node with surface pill.
+ * Last column labels go to the left to avoid clipping.
+ */
+function BesideLabel({
+  node,
+  nodeWidth,
+  text,
+  pctStr,
+  showPercent,
+  height,
+  isLastColumn
+}) {
+  const cx = node.x + nodeWidth / 2;
+  const cy = node.y + node.height / 2;
+  const pillW = text.length * 6 + 10;
+  const pillH = 16;
+  const labelX = isLastColumn ? node.x - 6 : node.x + nodeWidth + 6;
+  const pillX = isLastColumn ? labelX - pillW + 4 : labelX - 4;
+  const textAnchor = isLastColumn ? 'end' : 'start';
+  return /*#__PURE__*/_jsxs("g", {
+    children: [/*#__PURE__*/_jsx("rect", {
+      x: pillX,
+      y: cy - pillH / 2,
+      width: pillW,
+      height: pillH,
+      rx: 3,
+      fill: "var(--color-background-surface, #fff)",
+      fillOpacity: 0.9
+    }), /*#__PURE__*/_jsx("text", {
+      x: labelX,
+      y: cy,
+      textAnchor: textAnchor,
+      dominantBaseline: "central",
+      style: {
+        font: '600 10px/1 system-ui',
+        fill: 'var(--color-text-primary, #1c1c1e)',
+        letterSpacing: '-0.01em'
+      },
+      children: text
+    }), showPercent && node.column > 0 && /*#__PURE__*/_jsx("text", {
+      x: cx,
+      y: Math.min(height - 2, node.y + node.height + 12),
+      textAnchor: "middle",
+      style: {
+        font: '500 9px/1 system-ui',
+        fill: 'var(--color-text-tertiary, #8e8ea0)'
+      },
+      children: pctStr
+    })]
+  });
+}
+SankeyLabel.displayName = 'SankeyLabel';

package/dist/Sankey/SankeyLink.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Link color mode:
+ * - `'gradient'` — even transition from source to target color
+ * - `'source'` — each link uses its source node's color
+ * - `'target'` — each link uses its target node's color
+ * - `{gradient: number}` — biased gradient (0–1). 0.2 = source-leaned, 0.8 = target-leaned
+ * - `string` — any CSS color for flat uniform fill
+ */
+export type SankeyLinkColor = 'gradient' | 'source' | 'target' | {
+    gradient: number;
+} | (string & {});
+export interface SankeyLinkProps {
+    /** Link coloring mode (default: 'gradient') */
+    color?: SankeyLinkColor;
+    /** Opacity of the link fills (default: 0.7) */
+    opacity?: number;
+    /** Bezier tension — 0 is straight, 1 is maximum curve (default: 0.5) */
+    tension?: number;
+}
+/**
+ * Renders all link ribbons in the Sankey chart.
+ *
+ * Place before SankeyNode so nodes render on top.
+ */
+export declare function SankeyLink({ color, opacity, tension, }: SankeyLinkProps): import("react").JSX.Element;
+export declare namespace SankeyLink {
+    var displayName: string;
+}
+//# sourceMappingURL=SankeyLink.d.ts.map

package/dist/Sankey/SankeyLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyLink.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyLink.tsx"],"names":[],"mappings":"AAcA;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,QAAQ,GACR,QAAQ,GACR;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,GAClB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA4BD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAkB,EAClB,OAAa,EACb,OAAa,GACd,EAAE,eAAe,+BAoDjB;yBAxDe,UAAU"}