@dxos/ui-editor 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/extensions/scroller.ts

@@ -0,0 +1,233 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { log } from '@dxos/log';
+
+/**
+ * Parameters for the scroll to line effect.
+ */
+export type ScrollToProps = {
+  /**
+   * Zero-based line number; -1 for end of document.
+   * NOTE: view.state.doc.lineAt() uses 1-based line numbers.
+   */
+  line: number;
+
+  /**
+   * Additional offset from the target line in pixels.
+   * Positive values scroll past the line, negative values stop before it.
+   * @default 0
+   */
+  offset?: number;
+
+  /**
+   * Position of the target line in the viewport.
+   * - 'start': Line appears at the start (top) of the screen
+   * - 'end': Line appears at the end (bottom) of the screen
+   * @default 'start'
+   */
+  position?: 'start' | 'end';
+
+  /**
+   * Whether to use smooth scrolling.
+   * @default 'instant'
+   */
+  behavior?: ScrollBehavior;
+};
+
+/** Scroll to a specific line. */
+export const scrollerLineEffect = StateEffect.define<ScrollToProps>();
+
+/** Start/stop crawling the end of the document. */
+export const scrollerCrawlEffect = StateEffect.define<boolean>();
+
+/**
+ * Helper function to scroll to a specific line.
+ * This is a convenience function that can be used directly with an EditorView.
+ */
+export const scrollToLine = (view: EditorView, options: ScrollToProps) => {
+  view.dispatch({
+    effects: scrollerLineEffect.of(options),
+  });
+};
+
+export type ScrollerOptions = {
+  /** Threshold in px to trigger scroll from bottom. */
+  overScroll?: number;
+};
+
+/**
+ * Extension that provides smooth scrolling to specific lines in the editor.
+ */
+export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
+  // ViewPlugin to manage scroll animations.
+  const scrollPlugin = ViewPlugin.fromClass(
+    class ScrollerPlugin {
+      private readonly crawler: ReturnType<typeof createCrawler>;
+      constructor(private readonly view: EditorView) {
+        this.crawler = createCrawler(this.view);
+      }
+
+      // No-op.
+      destroy() {
+        this.crawler.cancel();
+      }
+
+      cancel() {
+        this.crawler.cancel();
+      }
+
+      crawl(start = false) {
+        if (start) {
+          this.crawler.scroll();
+        } else {
+          this.crawler.cancel();
+        }
+      }
+
+      scroll({ line, offset = 0, position, behavior = 'instant' }: ScrollToProps) {
+        const { scrollTop, scrollHeight, clientHeight } = this.view.scrollDOM;
+        const scrollerRect = this.view.scrollDOM.getBoundingClientRect();
+        const doc = this.view.state.doc;
+
+        let targetScrollTop = scrollHeight - clientHeight + offset;
+        if (line >= 0 && line <= doc.lines - 1) {
+          const lineStart = doc.line(line + 1).from;
+          const coords = this.view.coordsAtPos(lineStart);
+          if (coords) {
+            // Calculate target scroll position based on position option.
+            const currentScrollTop = scrollTop;
+            const maxScrollTop = scrollHeight - clientHeight;
+
+            if (position === 'end') {
+              // Position line at end (bottom) of viewport.
+              // Calculate how far down we need to scroll so the line's bottom aligns with viewport bottom.
+              targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + offset;
+            } else {
+              // Default: position line at start (top) of viewport.
+              targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + offset;
+            }
+
+            // Clamp to valid scroll range.
+            targetScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
+          }
+        }
+
+        // TODO(burdon): Smooth scrolling doesn't work when the document is being streamed into.
+        requestAnimationFrame(() => {
+          this.view.scrollDOM.scrollTo({ top: targetScrollTop }); //, behavior });
+        });
+      }
+    },
+  );
+
+  return [
+    scrollPlugin,
+
+    // Listen for effect.s
+    EditorView.updateListener.of((update) => {
+      update.transactions.forEach((transaction) => {
+        try {
+          const plugin = update.view.plugin(scrollPlugin);
+          if (plugin) {
+            for (const effect of transaction.effects) {
+              if (effect.is(scrollerCrawlEffect)) {
+                plugin.crawl(effect.value);
+              } else if (effect.is(scrollerLineEffect)) {
+                plugin.scroll(effect.value);
+              }
+            }
+          }
+        } catch (err) {
+          log.catch(err);
+        }
+      });
+    }),
+
+    // Styles.
+    EditorView.theme({
+      '.cm-content': {
+        paddingBottom: `${overScroll}px`,
+      },
+      '.cm-scroller': {
+        overflowAnchor: 'none',
+        paddingBottom: '0',
+      },
+      '.cm-scroller.cm-hide-scrollbar::-webkit-scrollbar': {
+        display: 'none',
+      },
+      '.cm-scroller::-webkit-scrollbar-thumb': {
+        background: 'transparent',
+        transition: 'background 0.15s',
+      },
+      '&:hover .cm-scroller::-webkit-scrollbar-thumb': {
+        background: 'var(--color-scrollbar-thumb)',
+      },
+      '.cm-scroll-button': {
+        position: 'absolute',
+        bottom: '0.5rem',
+        right: '1rem',
+      },
+    }),
+  ];
+};
+
+/**
+ * Creates a smooth crawler that follows the live bottom of a CodeMirror 6 EditorView.
+ *
+ * Each animation frame the step is:
+ *   step = clamp(|delta| * k, minStep, maxStep)  -- but never more than |delta|
+ *
+ * Capping at |delta| is critical: it prevents overshoot, which would otherwise cause
+ * oscillation when the proportional step (or minStep) exceeds the remaining distance.
+ * The crawler settles exactly at the target with no bounce.
+ *
+ * @param k Fraction of remaining distance moved each frame (0 < k < 1).
+ * @param minStep Min step size in px; prevents stalling on large distances.
+ * @param maxStep Max step size in px.
+ * @param targetDelta Snap-to-target threshold in px.
+ */
+export function createCrawler(view: EditorView, k = 0.3, maxStep = 2, targetDelta = 0.5) {
+  const el = view.scrollDOM;
+
+  let currentTop = 0; // Float-precision position; avoids browser integer-rounding of scrollTop.
+  let rafId: number | null = null;
+
+  function frame() {
+    // Recompute each frame so the animation chases a live-updating document's bottom.
+    const targetTop = el.scrollHeight - el.clientHeight;
+    const delta = targetTop - currentTop;
+    const absDelta = Math.abs(delta);
+    if (absDelta < targetDelta) {
+      el.scrollTop = targetTop;
+      currentTop = targetTop;
+      rafId = null;
+      return;
+    }
+
+    // Clamp step to [minStep, maxStep], then cap at absDelta to prevent overshoot.
+    const step = Math.sign(delta) * Math.min(absDelta, Math.max(1, Math.min(absDelta * k, maxStep)));
+    currentTop += step;
+    el.scrollTop = currentTop;
+    rafId = requestAnimationFrame(frame);
+  }
+
+  return {
+    scroll: () => {
+      if (rafId === null) {
+        currentTop = el.scrollTop;
+        rafId = requestAnimationFrame(frame);
+      }
+    },
+    cancel: () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    },
+  };
+}

package/src/extensions/selection.ts

@@ -31,7 +31,7 @@ export type EditorStateStore = {
   getState: (id: string) => EditorSelectionState | undefined;
 };
 
-const stateRestoreAnnotation = 'dxos.org/cm/state-restore';
+const stateRestoreAnnotation = 'org.dxos.cm.state-restore';
 
 export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
   return {

package/src/extensions/tags/streamer.ts

@@ -17,7 +17,7 @@ export type StreamerOptions = {
 };
 
 /**
- * Extension that adds a blinking cursor widget at the end of the document.
+ * Extension that animates streaming content.
  */
 export const streamer = (options: StreamerOptions = {}): Extension => {
   return [
@@ -114,7 +114,7 @@ class CursorWidget extends WidgetType {
  */
 const fadeIn = (options: { removalDelay?: number } = {}): Extension => {
   const FADE_IN_DURATION = 1_000; // ms.
-  const DEFAULT_REMOVAL_DELAY = 5_000; // ms.
+  const DEFAULT_REMOVAL_DELAY = 3_000; // ms.
   const removalDelay = options.removalDelay ?? DEFAULT_REMOVAL_DELAY;
 
   // Effect to remove a specific decoration by range.

package/src/extensions/tags/xml-tags.ts

@@ -21,7 +21,7 @@ import { log } from '@dxos/log';
 
 import { type Range } from '../../types';
 import { decorationSetToArray } from '../../util';
-import { scrollToLineEffect } from '../scrolling';
+import { scrollerLineEffect } from '../scroller';
 
 import { nodeToJson } from './xml-util';
 
@@ -268,7 +268,7 @@ const createNavigationEffectPlugin = (
           const line = view.state.doc.lineAt(widget?.from ?? 0);
           view.dispatch({
             selection: { anchor: line.from, head: line.from },
-            effects: scrollToLineEffect.of({ line: line.number, options: { offset: -16 } }),
+            effects: scrollerLineEffect.of({ line: line.number - 1, offset: -16 }),
           });
 
           continue;
@@ -294,13 +294,13 @@ const createNavigationEffectPlugin = (
             const line = view.state.doc.lineAt(widget?.from);
             view.dispatch({
               selection: { anchor: line.to, head: line.to },
-              effects: scrollToLineEffect.of({ line: line.number, options: { offset: -16 } }),
+              effects: scrollerLineEffect.of({ line: line.number - 1, offset: -16 }),
             });
           } else {
             const line = view.state.doc.lineAt(view.state.doc.length);
             view.dispatch({
               selection: { anchor: line.to, head: line.to },
-              effects: scrollToLineEffect.of({ line: line.number, options: { position: 'end' } }),
+              effects: scrollerLineEffect.of({ line: line.number - 1, position: 'end' }),
             });
           }
 
@@ -359,6 +359,9 @@ const createWidgetDecorationsField = (registry: XmlWidgetRegistry = {}, notifier
       // Check for reset effect.
       for (const effect of tr.effects) {
         if (effect.is(xmlTagResetEffect)) {
+          if (tr.docChanged) {
+            return buildDecorations(tr.state, { from: 0, to: tr.state.doc.length }, registry, notifier);
+          }
           return { from: 0, decorations: Decoration.none };
         }
       }

package/src/styles/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './markdown';
 export * from './theme';
-export * from './tokens';

package/src/styles/theme.ts

@@ -5,7 +5,60 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
-import { fontBody, fontMono } from './tokens';
+import { mx } from '@dxos/ui-theme';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+// https://tailwindcss.com/docs/font-weight
+const headings: Record<HeadingLevel, { className: string; fontSize: string; lineHeight: string }> = {
+  1: {
+    className: 'text-3xl',
+    fontSize: 'var(--text-3xl)',
+    lineHeight: 'var(--text-4xl--line-height)',
+  },
+  2: {
+    className: 'text-2xl',
+    fontSize: 'var(--text-2xl)',
+    lineHeight: 'var(--text-3xl--line-height)',
+  },
+  3: {
+    className: 'text-xl',
+    fontSize: 'var(--text-xl)',
+    lineHeight: 'var(--text-2xl--line-height)',
+  },
+  4: {
+    className: 'text-lg',
+    fontSize: 'var(--text-lg)',
+    lineHeight: 'var(--text-xl--line-height)',
+  },
+  5: {
+    className: 'text-base',
+    fontSize: 'var(--text-base)',
+    lineHeight: 'var(--text-lg--line-height)',
+  },
+  6: {
+    className: 'text-base',
+    fontSize: 'var(--text-base)',
+    lineHeight: 'var(--text-base--line-height)',
+  },
+};
+
+// Font families matching --font-body and --font-mono in theme.css.
+export const fontBody = '"Inter Variable", ui-sans-serif, system-ui, sans-serif';
+export const fontMono = '"JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace';
+
+export const markdownTheme = {
+  code: 'font-mono! cm-code-inline',
+  codeMark: 'font-mono! cm-code-mark',
+  mark: 'font-mono!',
+  heading: (level: HeadingLevel) => ({
+    className: mx(headings[level].className, 'font-light text-(--color-cm-heading-number)'),
+    color: 'var(--color-cm-heading) !important',
+    lineHeight: headings[level].lineHeight,
+    fontSize: headings[level].fontSize,
+    fontWeight: '100 !important',
+  }),
+};
 
 /**
  * Global base theme.
@@ -43,6 +96,9 @@ import { fontBody, fontMono } from './tokens';
  * </div>
  */
 export const baseTheme = EditorView.baseTheme({
+  /**
+   * Outer frame.
+   */
   '&': {},
   '&.cm-focused': {
     outline: 'none',
@@ -52,7 +108,18 @@ export const baseTheme = EditorView.baseTheme({
    * Scroller
    */
   '.cm-scroller': {
-    overflowY: 'auto',
+    overflowAnchor: 'none',
+  },
+  '.cm-scroller::-webkit-scrollbar': {
+    width: '8px',
+  },
+  '.cm-scroller::-webkit-scrollbar-track': {},
+  '.cm-scroller::-webkit-scrollbar-thumb': {
+    background: 'transparent',
+    transition: 'background 0.15s',
+  },
+  '&:hover .cm-scroller::-webkit-scrollbar-thumb': {
+    background: 'var(--color-scrollbar-thumb)',
   },
 
   /**
@@ -61,7 +128,6 @@ export const baseTheme = EditorView.baseTheme({
    */
   '.cm-content': {
     padding: 'unset',
-    lineHeight: '24px',
     color: 'unset',
   },
 
@@ -76,8 +142,8 @@ export const baseTheme = EditorView.baseTheme({
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers': {
     paddingRight: '4px',
-    borderRight: '1px solid var(--dx-subduedSeparator)',
-    color: 'var(--dx-subduedText)',
+    borderRight: '1px solid var(--color-subdued-separator)',
+    color: 'var(--color-subdued)',
   },
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
     minWidth: '40px',
@@ -86,7 +152,7 @@ export const baseTheme = EditorView.baseTheme({
    * Height is set to match the corresponding line (which may have wrapped).
    */
   '.cm-gutterElement': {
-    lineHeight: '24px',
+    lineHeight: 1.5,
     fontSize: '12px',
   },
 
@@ -94,31 +160,38 @@ export const baseTheme = EditorView.baseTheme({
    * Line.
    */
   '.cm-line': {
-    lineHeight: '24px',
+    lineHeight: 1.5,
     paddingInline: 0,
   },
+  /**
+   * Force all inline children to inherit line-height to prevent monospace font metrics
+   * (JetBrains Mono ascent/descent) from inflating the line box beyond 24px.
+   */
+  '.cm-line *': {
+    lineHeight: 'inherit',
+  },
   '.cm-activeLine': {
-    background: 'var(--dx-cmActiveLine)',
+    background: 'var(--color-cm-active-line)',
   },
 
   /**
    * Cursor (layer).
    */
   '.cm-cursor, .cm-dropCursor': {
-    borderLeft: '2px solid var(--dx-cmCursor)',
+    borderLeft: '2px solid var(--color-cm-cursor)',
   },
   '.cm-placeholder': {
-    color: 'var(--dx-placeholder)',
+    color: 'var(--color-placeholder)',
   },
 
   /**
    * Selection (layer).
    */
   '.cm-selectionBackground': {
-    background: 'var(--dx-cmSelection)',
+    background: 'var(--color-cm-selection)',
   },
   '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: 'var(--dx-cmFocusedSelection)',
+    background: 'var(--color-cm-focused-selection)',
   },
 
   /**
@@ -129,8 +202,8 @@ export const baseTheme = EditorView.baseTheme({
     margin: '0 -3px',
     padding: '3px',
     borderRadius: '3px',
-    background: 'var(--dx-cmHighlightSurface)',
-    color: 'var(--dx-cmHighlight)',
+    background: 'var(--color-cm-highlight-surface)',
+    color: 'var(--color-cm-highlight)',
   },
   '.cm-searchMatch-selected': {
     textDecoration: 'underline',
@@ -142,21 +215,30 @@ export const baseTheme = EditorView.baseTheme({
   '.cm-link': {
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
-    textDecorationColor: 'var(--dx-separator)',
+    textDecorationColor: 'var(--color-separator)',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
   },
   '.cm-link > span': {
-    color: 'var(--dx-accentText)',
+    color: 'var(--color-accent-text)',
+  },
+  '.cm-link > span:hover': {
+    color: 'var(--color-accent-text-hover)',
   },
 
   /**
    * Tooltip.
    */
   '.cm-tooltip': {
-    background: 'var(--dx-baseSurface)',
+    background: 'var(--color-modal-surface)',
   },
   '.cm-tooltip-below': {},
+  '.cm-tooltip-hover': {
+    background: 'var(--color-modal-surface)',
+    border: '1px solid var(--color-separator)',
+    borderRadius: '4px',
+    overflow: 'hidden',
+  },
 
   /**
    * Autocomplete.
@@ -165,7 +247,7 @@ export const baseTheme = EditorView.baseTheme({
   '.cm-tooltip.cm-tooltip-autocomplete': {
     marginTop: '6px',
     marginLeft: '-10px',
-    border: '2px solid var(--dx-separator)',
+    border: '2px solid var(--color-separator)',
     borderRadius: '4px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
@@ -175,12 +257,12 @@ export const baseTheme = EditorView.baseTheme({
     padding: '4px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-    background: 'var(--dx-activeSurface)',
-    color: 'var(--dx-activeSurfaceText)',
+    background: 'var(--color-active-surface)',
+    color: 'var(--color-base-surface-text)',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
-    color: 'var(--dx-hoverSurfaceText)',
+    color: 'var(--color-base-surface-text)',
   },
 
   /**
@@ -190,17 +272,17 @@ export const baseTheme = EditorView.baseTheme({
     width: '360px !important',
     margin: '-10px 1px 0 1px',
     padding: '8px !important',
-    borderColor: 'var(--dx-separator)',
+    borderColor: 'var(--color-separator)',
   },
   '.cm-completionIcon': {
     display: 'none',
   },
   '.cm-completionLabel': {
-    color: 'var(--dx-description)',
+    color: 'var(--color-description)',
     padding: '0 4px',
   },
   '.cm-completionMatchedText': {
-    color: 'var(--dx-baseText)',
+    color: 'var(--color-base-surface-text)',
     textDecoration: 'none !important',
   },
 
@@ -225,7 +307,7 @@ export const baseTheme = EditorView.baseTheme({
     backgroundColor: 'var(--surface-bg)',
   },
   '.cm-panel input, .cm-panel button, .cm-panel label': {
-    color: 'var(--dx-subdued)',
+    color: 'var(--color-subdued)',
     fontSize: '14px',
     all: 'unset',
     margin: '3px !important',
@@ -233,10 +315,10 @@ export const baseTheme = EditorView.baseTheme({
     outline: '1px solid transparent',
   },
   '.cm-panel input, .cm-panel button': {
-    backgroundColor: 'var(--dx-inputSurface)',
+    backgroundColor: 'var(--color-input-surface)',
   },
   '.cm-panel input:focus, .cm-panel button:focus': {
-    outline: '1px solid var(--dx-neutralFocusIndicator)',
+    outline: '1px solid var(--color-neutral-focus-indicator)',
   },
   '.cm-panel label': {
     display: 'inline-flex',
@@ -249,26 +331,27 @@ export const baseTheme = EditorView.baseTheme({
     height: '8px',
     marginRight: '6px !important',
     padding: '2px !important',
-    color: 'var(--dx-neutralFocusIndicator)',
+    color: 'var(--color-neutral-focus-indicator)',
   },
   '.cm-panel button': {
     '&:hover': {
-      backgroundColor: 'var(--dx-accentSurfaceHover) !important',
+      // TODO(burdon): Replace with layer and @apply bg-accent-surface-hover
+      backgroundColor: 'var(--color-accent-surface-hover) !important',
     },
     '&:active': {
-      backgroundColor: 'var(--dx-accentSurfaceHover)',
+      backgroundColor: 'var(--color-accent-surface-hover)',
     },
   },
   '.cm-panel.cm-search': {
     padding: '4px',
-    borderTop: '1px solid var(--dx-separator)',
+    borderTop: '1px solid var(--color-separator)',
   },
 });
 
 export const editorGutter: Extension = EditorView.theme({
   '.cm-gutters': {
     // NOTE: Non-transparent background required to cover content if scrolling horizontally.
-    background: 'var(--dx-baseSurface) !important',
+    background: 'var(--color-base-surface) !important',
     paddingRight: '1rem',
   },
 });
@@ -279,10 +362,9 @@ export type FontOptions = {
 
 export const createFontTheme = ({ monospace }: FontOptions = {}) =>
   EditorView.theme({
-    // Set metrics on the scroller (this is often what CM uses for layout).
+    // Main content.
     '.cm-scroller': {
       fontFamily: monospace ? fontMono : fontBody,
-      fontSize: '16px',
     },
 
     // Maintain defaults for UI components.

package/src/util/cursor.ts

@@ -26,7 +26,7 @@ export const overlap = (a: Range, b: Range): boolean => a.from <= b.to && a.to >
  *  while positive - with the next one.
  */
 export interface CursorConverter {
-  toCursor(position: number, assoc?: -1 | 1 | undefined): string;
+  toCursor(position: number, assoc?: -1 | 1): string;
   fromCursor(cursor: string): number;
 }
 

package/dist/types/src/extensions/autoscroll.d.ts

@@ -1,20 +0,0 @@
-import { EditorView } from '@codemirror/view';
-export declare const scrollToBottomEffect: import("@codemirror/state").StateEffectType<ScrollBehavior | undefined>;
-export type AutoScrollOptions = {
-    /** Auto-scroll when reaches the bottom. */
-    autoScroll?: boolean;
-    /** Threshold in px to trigger scroll from bottom. */
-    threshold?: number;
-    /** Throttle time in ms. */
-    throttleDelay?: number;
-    /** Callback when auto-scrolling. */
-    onAutoScroll?: (props: {
-        view: EditorView;
-        distanceFromBottom: number;
-    }) => boolean | void;
-};
-/**
- * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
- */
-export declare const autoScroll: ({ autoScroll, threshold, throttleDelay, onAutoScroll, }?: Partial<AutoScrollOptions>) => import("@codemirror/state").Extension[];
-//# sourceMappingURL=autoscroll.d.ts.map

package/dist/types/src/extensions/autoscroll.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"autoscroll.d.ts","sourceRoot":"","sources":["../../../../src/extensions/autoscroll.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAc,MAAM,kBAAkB,CAAC;AAQ1D,eAAO,MAAM,oBAAoB,yEAAmD,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,UAAU,CAAC;QAAC,kBAAkB,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,GAAG,IAAI,CAAC;CAC5F,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,UAAU,GAAI,0DAKxB,OAAO,CAAC,iBAAiB,CAAM,4CAiIjC,CAAC"}