@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/code-diff-C2vuR6Ti.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const langJson = require('@codemirror/lang-json');
+const language = require('@codemirror/language');
+const merge = require('@codemirror/merge');
+const state = require('@codemirror/state');
+const view = require('@codemirror/view');
+const highlight = require('@lezer/highlight');
+const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
+const React = require('react');
+const themeProvider = require('./theme-provider-aO5-jZVp.cjs');
+
+const diffOverrides = view.EditorView.theme({
+  "&.cm-editor .cm-changedLine": {
+    backgroundColor: "transparent",
+    backgroundImage: "none",
+    borderLeft: "none"
+  },
+  "&.cm-editor .cm-changedText": {
+    backgroundImage: "none",
+    backgroundColor: "#880000",
+    padding: "1px 5px",
+    display: "inline-block",
+    borderRadius: "4px"
+  },
+  "&.cm-editor .cm-changedText, &.cm-editor .cm-changedText *": {
+    color: "white"
+  },
+  "&.cm-editor .cm-line": {
+    lineHeight: "1.5",
+    opacity: "0.5"
+  },
+  "&.cm-editor .cm-line.cm-changedLine": {
+    opacity: "1"
+  },
+  "&.cm-editor .cm-gutters": {
+    display: "none"
+  }
+});
+function buildDiffDarkTheme() {
+  return codemirrorThemeDracula.draculaInit({
+    settings: {
+      fontFamily: "var(--font-mono)",
+      fontSize: "0.8125rem",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "#939393",
+      background: "transparent"
+    },
+    styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
+  });
+}
+function buildDiffLightTheme() {
+  const editorTheme = view.EditorView.theme({
+    "&": {
+      backgroundColor: "transparent",
+      color: "var(--neutral6)",
+      fontSize: "0.8125rem"
+    },
+    "&.cm-editor .cm-scroller": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      color: "var(--neutral2)",
+      borderRight: "none"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent"
+    }
+  });
+  const highlightStyle = language.HighlightStyle.define([
+    { tag: [highlight.tags.comment, highlight.tags.bracket], color: "var(--neutral2)" },
+    { tag: [highlight.tags.string, highlight.tags.meta, highlight.tags.regexp], color: "var(--accent1)" },
+    { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: "var(--accent6)" },
+    { tag: [highlight.tags.keyword, highlight.tags.operator, highlight.tags.tagName], color: "var(--accent2)" },
+    { tag: [highlight.tags.function(highlight.tags.propertyName), highlight.tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [highlight.tags.definition(highlight.tags.variableName), highlight.tags.function(highlight.tags.variableName), highlight.tags.className, highlight.tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [highlight.tags.variableName, highlight.tags.number], color: "var(--accent5)" },
+    { tag: [highlight.tags.name, highlight.tags.quote], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, language.syntaxHighlighting(highlightStyle)];
+}
+function CodeDiff({ codeA, codeB }) {
+  const containerRef = React.useRef(null);
+  const viewRef = React.useRef(null);
+  const isDark = themeProvider.useTheme().resolvedTheme === "dark";
+  const theme = React.useMemo(() => isDark ? buildDiffDarkTheme() : buildDiffLightTheme(), [isDark]);
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    if (viewRef.current) {
+      viewRef.current.destroy();
+    }
+    const extensions = [langJson.json(), theme, diffOverrides, view.EditorView.lineWrapping, state.EditorState.readOnly.of(true)];
+    const mergeView = new merge.MergeView({
+      parent: containerRef.current,
+      a: {
+        doc: codeA,
+        extensions
+      },
+      b: {
+        doc: codeB,
+        extensions
+      },
+      collapseUnchanged: { margin: 3, minSize: 4 }
+    });
+    viewRef.current = mergeView;
+    return () => {
+      mergeView.destroy();
+      viewRef.current = null;
+    };
+  }, [codeA, codeB, theme]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-auto rounded-xl border dark:border-white/10 border-border1 dark:bg-black/20 bg-surface3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-0 h-full w-px dark:bg-white/10 bg-border1 z-10" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "[&_.cm-mergeViewEditor]:flex-1 [&_.cm-editor]:bg-transparent [&_.cm-editor]:p-6 [&_.cm-gutters]:bg-transparent"
+      }
+    )
+  ] });
+}
+
+exports.CodeDiff = CodeDiff;
+//# sourceMappingURL=code-diff-C2vuR6Ti.cjs.map

package/dist/code-diff-C2vuR6Ti.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-diff-C2vuR6Ti.cjs","sources":["../src/ds/components/CodeDiff/code-diff.tsx"],"sourcesContent":["'use client';\n\nimport { json } from '@codemirror/lang-json';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { MergeView } from '@codemirror/merge';\nimport type { Extension } from '@codemirror/state';\nimport { EditorState } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport { tags as t } from '@lezer/highlight';\nimport { draculaInit } from '@uiw/codemirror-theme-dracula';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useTheme } from '@/ds/components/ThemeProvider';\n\nconst diffOverrides = EditorView.theme({\n  '&.cm-editor .cm-changedLine': {\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    borderLeft: 'none',\n  },\n  '&.cm-editor .cm-changedText': {\n    backgroundImage: 'none',\n    backgroundColor: '#880000',\n    padding: '1px 5px',\n    display: 'inline-block',\n    borderRadius: '4px',\n  },\n  '&.cm-editor .cm-changedText, &.cm-editor .cm-changedText *': {\n    color: 'white',\n  },\n  '&.cm-editor .cm-line': {\n    lineHeight: '1.5',\n    opacity: '0.5',\n  },\n  '&.cm-editor .cm-line.cm-changedLine': {\n    opacity: '1',\n  },\n  '&.cm-editor .cm-gutters': {\n    display: 'none',\n  },\n});\n\nexport interface CodeDiffProps {\n  codeA: string;\n  codeB: string;\n}\n\nfunction buildDiffDarkTheme(): Extension {\n  return draculaInit({\n    settings: {\n      fontFamily: 'var(--font-mono)',\n      fontSize: '0.8125rem',\n      lineHighlight: 'transparent',\n      gutterBackground: 'transparent',\n      gutterForeground: '#939393',\n      background: 'transparent',\n    },\n    styles: [{ tag: [t.className, t.propertyName] }],\n  });\n}\n\nfunction buildDiffLightTheme(): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral6)',\n      fontSize: '0.8125rem',\n    },\n    '&.cm-editor .cm-scroller': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-gutters': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral2)',\n      borderRight: 'none',\n    },\n    '.cm-content': {\n      color: 'var(--neutral6)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n    },\n  });\n\n  const highlightStyle = HighlightStyle.define([\n    { tag: [t.comment, t.bracket], color: 'var(--neutral2)' },\n    { tag: [t.string, t.meta, t.regexp], color: 'var(--accent1)' },\n    { tag: [t.atom, t.bool, t.special(t.variableName)], color: 'var(--accent6)' },\n    { tag: [t.keyword, t.operator, t.tagName], color: 'var(--accent2)' },\n    { tag: [t.function(t.propertyName), t.propertyName], color: 'var(--accent5)' },\n    {\n      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],\n      color: 'var(--accent3)',\n    },\n    { tag: [t.variableName, t.number], color: 'var(--accent5)' },\n    { tag: [t.name, t.quote], color: 'var(--accent1)' },\n  ]);\n\n  return [editorTheme, syntaxHighlighting(highlightStyle)];\n}\n\nexport function CodeDiff({ codeA, codeB }: CodeDiffProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const viewRef = useRef<MergeView | null>(null);\n  const isDark = useTheme().resolvedTheme === 'dark';\n  const theme = useMemo(() => (isDark ? buildDiffDarkTheme() : buildDiffLightTheme()), [isDark]);\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    // Clean up previous instance\n    if (viewRef.current) {\n      viewRef.current.destroy();\n    }\n\n    const extensions = [json(), theme, diffOverrides, EditorView.lineWrapping, EditorState.readOnly.of(true)];\n\n    const mergeView = new MergeView({\n      parent: containerRef.current,\n      a: {\n        doc: codeA,\n        extensions,\n      },\n      b: {\n        doc: codeB,\n        extensions,\n      },\n      collapseUnchanged: { margin: 3, minSize: 4 },\n    });\n\n    viewRef.current = mergeView;\n\n    return () => {\n      mergeView.destroy();\n      viewRef.current = null;\n    };\n  }, [codeA, codeB, theme]);\n\n  return (\n    <div className=\"relative overflow-auto rounded-xl border dark:border-white/10 border-border1 dark:bg-black/20 bg-surface3\">\n      <div className=\"absolute left-1/2 top-0 h-full w-px dark:bg-white/10 bg-border1 z-10\" />\n      <div\n        ref={containerRef}\n        className=\"[&_.cm-mergeViewEditor]:flex-1 [&_.cm-editor]:bg-transparent [&_.cm-editor]:p-6 [&_.cm-gutters]:bg-transparent\"\n      />\n    </div>\n  );\n}\n"],"names":["EditorView","draculaInit","t","HighlightStyle","syntaxHighlighting","useRef","useTheme","useMemo","useEffect","json","EditorState","MergeView","jsxs","jsx"],"mappings":"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"}

package/dist/code-diff-lktH1err.js

@@ -0,0 +1,134 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { json } from '@codemirror/lang-json';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { MergeView } from '@codemirror/merge';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+import { draculaInit } from '@uiw/codemirror-theme-dracula';
+import { useRef, useMemo, useEffect } from 'react';
+import { u as useTheme } from './theme-provider-C9ih9jSS.js';
+
+const diffOverrides = EditorView.theme({
+  "&.cm-editor .cm-changedLine": {
+    backgroundColor: "transparent",
+    backgroundImage: "none",
+    borderLeft: "none"
+  },
+  "&.cm-editor .cm-changedText": {
+    backgroundImage: "none",
+    backgroundColor: "#880000",
+    padding: "1px 5px",
+    display: "inline-block",
+    borderRadius: "4px"
+  },
+  "&.cm-editor .cm-changedText, &.cm-editor .cm-changedText *": {
+    color: "white"
+  },
+  "&.cm-editor .cm-line": {
+    lineHeight: "1.5",
+    opacity: "0.5"
+  },
+  "&.cm-editor .cm-line.cm-changedLine": {
+    opacity: "1"
+  },
+  "&.cm-editor .cm-gutters": {
+    display: "none"
+  }
+});
+function buildDiffDarkTheme() {
+  return draculaInit({
+    settings: {
+      fontFamily: "var(--font-mono)",
+      fontSize: "0.8125rem",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "#939393",
+      background: "transparent"
+    },
+    styles: [{ tag: [tags.className, tags.propertyName] }]
+  });
+}
+function buildDiffLightTheme() {
+  const editorTheme = EditorView.theme({
+    "&": {
+      backgroundColor: "transparent",
+      color: "var(--neutral6)",
+      fontSize: "0.8125rem"
+    },
+    "&.cm-editor .cm-scroller": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      color: "var(--neutral2)",
+      borderRight: "none"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent"
+    }
+  });
+  const highlightStyle = HighlightStyle.define([
+    { tag: [tags.comment, tags.bracket], color: "var(--neutral2)" },
+    { tag: [tags.string, tags.meta, tags.regexp], color: "var(--accent1)" },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "var(--accent6)" },
+    { tag: [tags.keyword, tags.operator, tags.tagName], color: "var(--accent2)" },
+    { tag: [tags.function(tags.propertyName), tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [tags.definition(tags.variableName), tags.function(tags.variableName), tags.className, tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [tags.variableName, tags.number], color: "var(--accent5)" },
+    { tag: [tags.name, tags.quote], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, syntaxHighlighting(highlightStyle)];
+}
+function CodeDiff({ codeA, codeB }) {
+  const containerRef = useRef(null);
+  const viewRef = useRef(null);
+  const isDark = useTheme().resolvedTheme === "dark";
+  const theme = useMemo(() => isDark ? buildDiffDarkTheme() : buildDiffLightTheme(), [isDark]);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (viewRef.current) {
+      viewRef.current.destroy();
+    }
+    const extensions = [json(), theme, diffOverrides, EditorView.lineWrapping, EditorState.readOnly.of(true)];
+    const mergeView = new MergeView({
+      parent: containerRef.current,
+      a: {
+        doc: codeA,
+        extensions
+      },
+      b: {
+        doc: codeB,
+        extensions
+      },
+      collapseUnchanged: { margin: 3, minSize: 4 }
+    });
+    viewRef.current = mergeView;
+    return () => {
+      mergeView.destroy();
+      viewRef.current = null;
+    };
+  }, [codeA, codeB, theme]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative overflow-auto rounded-xl border dark:border-white/10 border-border1 dark:bg-black/20 bg-surface3", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-0 h-full w-px dark:bg-white/10 bg-border1 z-10" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "[&_.cm-mergeViewEditor]:flex-1 [&_.cm-editor]:bg-transparent [&_.cm-editor]:p-6 [&_.cm-gutters]:bg-transparent"
+      }
+    )
+  ] });
+}
+
+export { CodeDiff as C };
+//# sourceMappingURL=code-diff-lktH1err.js.map

package/dist/code-diff-lktH1err.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-diff-lktH1err.js","sources":["../src/ds/components/CodeDiff/code-diff.tsx"],"sourcesContent":["'use client';\n\nimport { json } from '@codemirror/lang-json';\nimport { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { MergeView } from '@codemirror/merge';\nimport type { Extension } from '@codemirror/state';\nimport { EditorState } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport { tags as t } from '@lezer/highlight';\nimport { draculaInit } from '@uiw/codemirror-theme-dracula';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useTheme } from '@/ds/components/ThemeProvider';\n\nconst diffOverrides = EditorView.theme({\n  '&.cm-editor .cm-changedLine': {\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    borderLeft: 'none',\n  },\n  '&.cm-editor .cm-changedText': {\n    backgroundImage: 'none',\n    backgroundColor: '#880000',\n    padding: '1px 5px',\n    display: 'inline-block',\n    borderRadius: '4px',\n  },\n  '&.cm-editor .cm-changedText, &.cm-editor .cm-changedText *': {\n    color: 'white',\n  },\n  '&.cm-editor .cm-line': {\n    lineHeight: '1.5',\n    opacity: '0.5',\n  },\n  '&.cm-editor .cm-line.cm-changedLine': {\n    opacity: '1',\n  },\n  '&.cm-editor .cm-gutters': {\n    display: 'none',\n  },\n});\n\nexport interface CodeDiffProps {\n  codeA: string;\n  codeB: string;\n}\n\nfunction buildDiffDarkTheme(): Extension {\n  return draculaInit({\n    settings: {\n      fontFamily: 'var(--font-mono)',\n      fontSize: '0.8125rem',\n      lineHighlight: 'transparent',\n      gutterBackground: 'transparent',\n      gutterForeground: '#939393',\n      background: 'transparent',\n    },\n    styles: [{ tag: [t.className, t.propertyName] }],\n  });\n}\n\nfunction buildDiffLightTheme(): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral6)',\n      fontSize: '0.8125rem',\n    },\n    '&.cm-editor .cm-scroller': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-gutters': {\n      backgroundColor: 'transparent',\n      color: 'var(--neutral2)',\n      borderRight: 'none',\n    },\n    '.cm-content': {\n      color: 'var(--neutral6)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n    },\n  });\n\n  const highlightStyle = HighlightStyle.define([\n    { tag: [t.comment, t.bracket], color: 'var(--neutral2)' },\n    { tag: [t.string, t.meta, t.regexp], color: 'var(--accent1)' },\n    { tag: [t.atom, t.bool, t.special(t.variableName)], color: 'var(--accent6)' },\n    { tag: [t.keyword, t.operator, t.tagName], color: 'var(--accent2)' },\n    { tag: [t.function(t.propertyName), t.propertyName], color: 'var(--accent5)' },\n    {\n      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],\n      color: 'var(--accent3)',\n    },\n    { tag: [t.variableName, t.number], color: 'var(--accent5)' },\n    { tag: [t.name, t.quote], color: 'var(--accent1)' },\n  ]);\n\n  return [editorTheme, syntaxHighlighting(highlightStyle)];\n}\n\nexport function CodeDiff({ codeA, codeB }: CodeDiffProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const viewRef = useRef<MergeView | null>(null);\n  const isDark = useTheme().resolvedTheme === 'dark';\n  const theme = useMemo(() => (isDark ? buildDiffDarkTheme() : buildDiffLightTheme()), [isDark]);\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    // Clean up previous instance\n    if (viewRef.current) {\n      viewRef.current.destroy();\n    }\n\n    const extensions = [json(), theme, diffOverrides, EditorView.lineWrapping, EditorState.readOnly.of(true)];\n\n    const mergeView = new MergeView({\n      parent: containerRef.current,\n      a: {\n        doc: codeA,\n        extensions,\n      },\n      b: {\n        doc: codeB,\n        extensions,\n      },\n      collapseUnchanged: { margin: 3, minSize: 4 },\n    });\n\n    viewRef.current = mergeView;\n\n    return () => {\n      mergeView.destroy();\n      viewRef.current = null;\n    };\n  }, [codeA, codeB, theme]);\n\n  return (\n    <div className=\"relative overflow-auto rounded-xl border dark:border-white/10 border-border1 dark:bg-black/20 bg-surface3\">\n      <div className=\"absolute left-1/2 top-0 h-full w-px dark:bg-white/10 bg-border1 z-10\" />\n      <div\n        ref={containerRef}\n        className=\"[&_.cm-mergeViewEditor]:flex-1 [&_.cm-editor]:bg-transparent [&_.cm-editor]:p-6 [&_.cm-gutters]:bg-transparent\"\n      />\n    </div>\n  );\n}\n"],"names":["t"],"mappings":";;;;;;;;;;;AAaA,MAAM,aAAA,GAAgB,WAAW,KAAA,CAAM;AAAA,EACrC,6BAAA,EAA+B;AAAA,IAC7B,eAAA,EAAiB,aAAA;AAAA,IACjB,eAAA,EAAiB,MAAA;AAAA,IACjB,UAAA,EAAY;AAAA,GACd;AAAA,EACA,6BAAA,EAA+B;AAAA,IAC7B,eAAA,EAAiB,MAAA;AAAA,IACjB,eAAA,EAAiB,SAAA;AAAA,IACjB,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,cAAA;AAAA,IACT,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,4DAAA,EAA8D;AAAA,IAC5D,KAAA,EAAO;AAAA,GACT;AAAA,EACA,sBAAA,EAAwB;AAAA,IACtB,UAAA,EAAY,KAAA;AAAA,IACZ,OAAA,EAAS;AAAA,GACX;AAAA,EACA,qCAAA,EAAuC;AAAA,IACrC,OAAA,EAAS;AAAA,GACX;AAAA,EACA,yBAAA,EAA2B;AAAA,IACzB,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAOD,SAAS,kBAAA,GAAgC;AACvC,EAAA,OAAO,WAAA,CAAY;AAAA,IACjB,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,kBAAA;AAAA,MACZ,QAAA,EAAU,WAAA;AAAA,MACV,aAAA,EAAe,aAAA;AAAA,MACf,gBAAA,EAAkB,aAAA;AAAA,MAClB,gBAAA,EAAkB,SAAA;AAAA,MAClB,UAAA,EAAY;AAAA,KACd;AAAA,IACA,MAAA,EAAQ,CAAC,EAAE,GAAA,EAAK,CAACA,KAAE,SAAA,EAAWA,IAAA,CAAE,YAAY,CAAA,EAAG;AAAA,GAChD,CAAA;AACH;AAEA,SAAS,mBAAA,GAAiC;AACxC,EAAA,MAAM,WAAA,GAAc,WAAW,KAAA,CAAM;AAAA,IACnC,GAAA,EAAK;AAAA,MACH,eAAA,EAAiB,aAAA;AAAA,MACjB,KAAA,EAAO,iBAAA;AAAA,MACP,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,0BAAA,EAA4B;AAAA,MAC1B,UAAA,EAAY;AAAA,KACd;AAAA,IACA,aAAA,EAAe;AAAA,MACb,eAAA,EAAiB,aAAA;AAAA,MACjB,KAAA,EAAO,iBAAA;AAAA,MACP,WAAA,EAAa;AAAA,KACf;AAAA,IACA,aAAA,EAAe;AAAA,MACb,KAAA,EAAO;AAAA,KACT;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,sBAAA,EAAwB;AAAA,MACtB,eAAA,EAAiB;AAAA;AACnB,GACD,CAAA;AAED,EAAA,MAAM,cAAA,GAAiB,eAAe,MAAA,CAAO;AAAA,IAC3C,EAAE,KAAK,CAACA,IAAA,CAAE,SAASA,IAAA,CAAE,OAAO,CAAA,EAAG,KAAA,EAAO,iBAAA,EAAkB;AAAA,IACxD,EAAE,GAAA,EAAK,CAACA,IAAA,CAAE,MAAA,EAAQA,IAAA,CAAE,IAAA,EAAMA,IAAA,CAAE,MAAM,CAAA,EAAG,KAAA,EAAO,gBAAA,EAAiB;AAAA,IAC7D,EAAE,GAAA,EAAK,CAACA,IAAA,CAAE,MAAMA,IAAA,CAAE,IAAA,EAAMA,IAAA,CAAE,OAAA,CAAQA,IAAA,CAAE,YAAY,CAAC,CAAA,EAAG,OAAO,gBAAA,EAAiB;AAAA,IAC5E,EAAE,GAAA,EAAK,CAACA,IAAA,CAAE,OAAA,EAASA,IAAA,CAAE,QAAA,EAAUA,IAAA,CAAE,OAAO,CAAA,EAAG,KAAA,EAAO,gBAAA,EAAiB;AAAA,IACnE,EAAE,GAAA,EAAK,CAACA,IAAA,CAAE,QAAA,CAASA,IAAA,CAAE,YAAY,CAAA,EAAGA,IAAA,CAAE,YAAY,CAAA,EAAG,KAAA,EAAO,gBAAA,EAAiB;AAAA,IAC7E;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,UAAA,CAAWA,KAAE,YAAY,CAAA,EAAGA,IAAA,CAAE,QAAA,CAASA,KAAE,YAAY,CAAA,EAAGA,IAAA,CAAE,SAAA,EAAWA,KAAE,aAAa,CAAA;AAAA,MAC5F,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAE,KAAK,CAACA,IAAA,CAAE,cAAcA,IAAA,CAAE,MAAM,CAAA,EAAG,KAAA,EAAO,gBAAA,EAAiB;AAAA,IAC3D,EAAE,KAAK,CAACA,IAAA,CAAE,MAAMA,IAAA,CAAE,KAAK,CAAA,EAAG,KAAA,EAAO,gBAAA;AAAiB,GACnD,CAAA;AAED,EAAA,OAAO,CAAC,WAAA,EAAa,kBAAA,CAAmB,cAAc,CAAC,CAAA;AACzD;AAEO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,KAAA,EAAM,EAAkB;AACxD,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,OAAA,GAAU,OAAyB,IAAI,CAAA;AAC7C,EAAA,MAAM,MAAA,GAAS,QAAA,EAAS,CAAE,aAAA,KAAkB,MAAA;AAC5C,EAAA,MAAM,KAAA,GAAQ,OAAA,CAAQ,MAAO,MAAA,GAAS,kBAAA,KAAuB,mBAAA,EAAoB,EAAI,CAAC,MAAM,CAAC,CAAA;AAE7F,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AAG3B,IAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,MAAA,OAAA,CAAQ,QAAQ,OAAA,EAAQ;AAAA,IAC1B;AAEA,IAAA,MAAM,UAAA,GAAa,CAAC,IAAA,EAAK,EAAG,KAAA,EAAO,aAAA,EAAe,UAAA,CAAW,YAAA,EAAc,WAAA,CAAY,QAAA,CAAS,EAAA,CAAG,IAAI,CAAC,CAAA;AAExG,IAAA,MAAM,SAAA,GAAY,IAAI,SAAA,CAAU;AAAA,MAC9B,QAAQ,YAAA,CAAa,OAAA;AAAA,MACrB,CAAA,EAAG;AAAA,QACD,GAAA,EAAK,KAAA;AAAA,QACL;AAAA,OACF;AAAA,MACA,CAAA,EAAG;AAAA,QACD,GAAA,EAAK,KAAA;AAAA,QACL;AAAA,OACF;AAAA,MACA,iBAAA,EAAmB,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA;AAAE,KAC5C,CAAA;AAED,IAAA,OAAA,CAAQ,OAAA,GAAU,SAAA;AAElB,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAA,EAAQ;AAClB,MAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,IACpB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,KAAA,EAAO,KAAK,CAAC,CAAA;AAExB,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2GAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,sEAAA,EAAuE,CAAA;AAAA,oBACtF,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,YAAA;AAAA,QACL,SAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ;;;;"}