@incremark/svelte 0.2.3

package/dist/components/IncremarkCode.svelte

@@ -0,0 +1,275 @@
+<!--
+  @file IncremarkCode.svelte - 代码块组件
+  @description 渲染 Markdown 代码块，支持 Shiki 代码高亮和 Mermaid 图表渲染
+-->
+
+<script lang="ts">
+  import type { Code } from 'mdast'
+  import { onMount, onDestroy } from 'svelte'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 代码节点 */
+    node: Code
+    /** Shiki 主题，默认 github-dark */
+    theme?: string
+    /** 是否禁用代码高亮 */
+    disableHighlight?: boolean
+    /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
+    mermaidDelay?: number
+  }
+
+  let {
+    node,
+    theme = 'github-dark',
+    disableHighlight = false,
+    mermaidDelay = 500
+  }: Props = $props()
+
+  // 状态
+  let copied = $state(false)
+  let highlightedHtml = $state('')
+  let isHighlighting = $state(false)
+  let highlightError = $state(false)
+
+  // Mermaid 支持
+  let mermaidSvg = $state('')
+  let mermaidError = $state('')
+  let mermaidLoading = $state(false)
+  let mermaidRef: any = null
+  let mermaidTimer: ReturnType<typeof setTimeout> | null = null
+  // 视图模式：'preview' | 'source'
+  let mermaidViewMode = $state<'preview' | 'source'>('preview')
+
+  // 缓存 highlighter
+  let highlighterRef: any = null
+  const loadedLanguages = new Set<string>()
+  const loadedThemes = new Set<string>()
+
+  /**
+   * 计算属性
+   */
+  const language = $derived(node.lang || 'text')
+  const code = $derived(node.value)
+  const isMermaid = $derived(language === 'mermaid')
+
+  /**
+   * 切换 Mermaid 视图模式
+   */
+  function toggleMermaidView() {
+    mermaidViewMode = mermaidViewMode === 'preview' ? 'source' : 'preview'
+  }
+
+  /**
+   * Mermaid 渲染（带防抖动）
+   */
+  function scheduleRenderMermaid() {
+    if (!isMermaid || !code) return
+
+    // 清除之前的定时器
+    if (mermaidTimer) {
+      clearTimeout(mermaidTimer)
+    }
+
+    // 显示加载状态
+    mermaidLoading = true
+
+    // 防抖动延迟渲染
+    mermaidTimer = setTimeout(() => {
+      doRenderMermaid()
+    }, mermaidDelay)
+  }
+
+  /**
+   * 执行 Mermaid 渲染
+   */
+  async function doRenderMermaid() {
+    if (!code) return
+
+    mermaidError = ''
+
+    try {
+      // 动态导入 mermaid
+      if (!mermaidRef) {
+        // @ts-ignore - mermaid 是可选依赖
+        const mermaidModule = await import('mermaid')
+        mermaidRef = mermaidModule.default
+        mermaidRef.initialize({
+          startOnLoad: false,
+          theme: 'dark',
+          securityLevel: 'loose'
+        })
+      }
+
+      const mermaid = mermaidRef
+      const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`
+
+      const { svg } = await mermaid.render(id, code)
+      mermaidSvg = svg
+    } catch (e: any) {
+      // 不显示错误，可能是代码还不完整
+      mermaidError = ''
+      mermaidSvg = ''
+    } finally {
+      mermaidLoading = false
+    }
+  }
+
+  /**
+   * 动态加载 shiki 并高亮
+   */
+  async function highlight() {
+    if (isMermaid) {
+      scheduleRenderMermaid()
+      return
+    }
+
+    if (!code || disableHighlight) {
+      highlightedHtml = ''
+      return
+    }
+
+    isHighlighting = true
+    highlightError = false
+
+    try {
+      // 动态导入 shiki
+      if (!highlighterRef) {
+        const { createHighlighter } = await import('shiki')
+        highlighterRef = await createHighlighter({
+          themes: [theme as any],
+          langs: []
+        })
+        loadedThemes.add(theme)
+      }
+
+      const highlighter = highlighterRef
+      const lang = language
+
+      // 按需加载语言
+      if (!loadedLanguages.has(lang) && lang !== 'text') {
+        try {
+          await highlighter.loadLanguage(lang)
+          loadedLanguages.add(lang)
+        } catch {
+          // 语言不支持，标记但不阻止
+        }
+      }
+
+      // 按需加载主题
+      if (!loadedThemes.has(theme)) {
+        try {
+          await highlighter.loadTheme(theme)
+          loadedThemes.add(theme)
+        } catch {
+          // 主题不支持
+        }
+      }
+
+      const html = highlighter.codeToHtml(code, {
+        lang: loadedLanguages.has(lang) ? lang : 'text',
+        theme: loadedThemes.has(theme) ? theme : 'github-dark'
+      })
+      highlightedHtml = html
+    } catch (e) {
+      // Shiki 不可用或加载失败
+      highlightError = true
+      highlightedHtml = ''
+    } finally {
+      isHighlighting = false
+    }
+  }
+
+  /**
+   * 复制代码
+   */
+  async function copyCode() {
+    try {
+      await navigator.clipboard.writeText(code)
+      copied = true
+      setTimeout(() => {
+        copied = false
+      }, 2000)
+    } catch {
+      // 复制失败静默处理
+    }
+  }
+
+  // 监听代码变化，重新高亮/渲染
+  $effect(() => {
+    highlight()
+  })
+
+  // 清理
+  onDestroy(() => {
+    if (mermaidTimer) {
+      clearTimeout(mermaidTimer)
+    }
+  })
+</script>
+
+<!-- Mermaid 图表 -->
+{#if isMermaid}
+  <div class="incremark-mermaid">
+    <div class="mermaid-header">
+      <span class="language">MERMAID</span>
+      <div class="mermaid-actions">
+        <button 
+          class="code-btn" 
+          onclick={toggleMermaidView} 
+          type="button"
+          disabled={!mermaidSvg}
+        >
+          {mermaidViewMode === 'preview' ? '源码' : '预览'}
+        </button>
+        <button class="code-btn" onclick={copyCode} type="button">
+          {copied ? '✓ 已复制' : '复制'}
+        </button>
+      </div>
+    </div>
+    <div class="mermaid-content">
+      <!-- 加载中 -->
+      {#if mermaidLoading && !mermaidSvg}
+        <pre class="mermaid-source-code">{code}</pre>
+      <!-- 源码模式 -->
+      {:else if mermaidViewMode === 'source'}
+        <pre class="mermaid-source-code">{code}</pre>
+      <!-- 预览模式 -->
+      {:else if mermaidSvg}
+        {@html mermaidSvg}
+      <!-- 无法渲染时显示源码 -->
+      {:else}
+        <pre class="mermaid-source-code">{code}</pre>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <!-- 普通代码块 -->
+  <div class="incremark-code">
+    <div class="code-header">
+      <span class="language">{language}</span>
+      <button class="code-btn" onclick={copyCode} type="button">
+        {copied ? '✓ 已复制' : '复制'}
+      </button>
+    </div>
+    <div class="code-content">
+      <!-- 正在加载高亮 -->
+      {#if isHighlighting && !highlightedHtml}
+        <div class="code-loading">
+          <pre><code>{code}</code></pre>
+        </div>
+      <!-- 高亮后的代码 -->
+      {:else if highlightedHtml}
+        <div class="shiki-wrapper">
+          {@html highlightedHtml}
+        </div>
+      <!-- 回退：无高亮 -->
+      {:else}
+        <pre class="code-fallback"><code>{code}</code></pre>
+      {/if}
+    </div>
+  </div>
+{/if}
+

package/dist/components/IncremarkCode.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Code } from 'mdast';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 代码节点 */
+    node: Code;
+    /** Shiki 主题，默认 github-dark */
+    theme?: string;
+    /** 是否禁用代码高亮 */
+    disableHighlight?: boolean;
+    /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
+    mermaidDelay?: number;
+}
+declare const IncremarkCode: import("svelte").Component<Props, {}, "">;
+type IncremarkCode = ReturnType<typeof IncremarkCode>;
+export default IncremarkCode;
+//# sourceMappingURL=IncremarkCode.svelte.d.ts.map

package/dist/components/IncremarkCode.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkCode.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAI/B;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAkQH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/IncremarkDefault.svelte

@@ -0,0 +1,24 @@
+<!--
+  @file IncremarkDefault.svelte - 默认组件
+  @description 用于显示未实现的节点类型（降级处理）
+-->
+
+<script lang="ts">
+  import type { RootContent } from 'mdast'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 节点 */
+    node: RootContent
+  }
+
+  let { node }: Props = $props()
+</script>
+
+<div class="incremark-default">
+  <span class="type-badge">{node.type}</span>
+  <pre>{JSON.stringify(node, null, 2)}</pre>
+</div>
+

package/dist/components/IncremarkDefault.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { RootContent } from 'mdast';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 节点 */
+    node: RootContent;
+}
+declare const IncremarkDefault: import("svelte").Component<Props, {}, "">;
+type IncremarkDefault = ReturnType<typeof IncremarkDefault>;
+export default IncremarkDefault;
+//# sourceMappingURL=IncremarkDefault.svelte.d.ts.map

package/dist/components/IncremarkDefault.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkDefault.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkDefault.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvC;;GAEG;AACH,UAAU,KAAK;IACb,SAAS;IACT,IAAI,EAAE,WAAW,CAAA;CAClB;AAkBH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/IncremarkFootnotes.svelte

@@ -0,0 +1,84 @@
+<!--
+  @file IncremarkFootnotes.svelte - 脚注列表组件
+  @description 在文档底部渲染所有脚注定义，按引用出现的顺序排列
+-->
+
+<script lang="ts">
+  import type { Readable } from 'svelte/store'
+  import type { FootnoteDefinition, RootContent } from 'mdast'
+  import { getDefinitionsContext } from '../context/definitionsContext'
+  import IncremarkRenderer from './IncremarkRenderer.svelte'
+
+  // 从 context 获取数据
+  let definations: Readable<Record<string, any>> | null = null
+  let footnoteDefinitions: Readable<Record<string, FootnoteDefinition>> | null = null
+  let footnoteReferenceOrder: Readable<string[]> | null = null
+
+  try {
+    const context = getDefinitionsContext()
+    definations = context.definations
+    footnoteDefinitions = context.footnoteDefinitions
+    footnoteReferenceOrder = context.footnoteReferenceOrder
+  } catch {
+    // Context 不存在
+  }
+
+  /**
+   * 按引用顺序排列的脚注列表
+   * 只显示已有定义的脚注
+   */
+  const orderedFootnotes = $derived.by(() => {
+    if (!footnoteReferenceOrder || !footnoteDefinitions) {
+      return []
+    }
+    const order = $footnoteReferenceOrder
+    const definitions = $footnoteDefinitions
+    return order
+      .map(identifier => ({
+        identifier,
+        definition: definitions[identifier]
+      }))
+      .filter(item => item.definition !== undefined)
+  })
+
+  /**
+   * 是否有脚注需要显示
+   */
+  const hasFootnotes = $derived(orderedFootnotes.length > 0)
+</script>
+
+{#if hasFootnotes}
+  <section class="incremark-footnotes">
+    <hr class="incremark-footnotes-divider" />
+    <ol class="incremark-footnotes-list">
+      {#each orderedFootnotes as item, index (item.identifier)}
+        <li
+          id="fn-{item.identifier}"
+          class="incremark-footnote-item"
+        >
+          <div class="incremark-footnote-content">
+            <!-- 脚注序号 -->
+            <span class="incremark-footnote-number">{index + 1}.</span>
+            
+            <!-- 脚注内容 -->
+            <div class="incremark-footnote-body">
+              {#each item.definition.children as child, childIndex (childIndex)}
+                <IncremarkRenderer node={child as RootContent} />
+              {/each}
+            </div>
+          </div>
+          
+          <!-- 返回链接 -->
+          <a 
+            href="#fnref-{item.identifier}" 
+            class="incremark-footnote-backref"
+            aria-label="返回引用位置"
+          >
+            ↩
+          </a>
+        </li>
+      {/each}
+    </ol>
+  </section>
+{/if}
+

package/dist/components/IncremarkFootnotes.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const IncremarkFootnotes: import("svelte").Component<Record<string, never>, {}, "">;
+type IncremarkFootnotes = ReturnType<typeof IncremarkFootnotes>;
+export default IncremarkFootnotes;
+//# sourceMappingURL=IncremarkFootnotes.svelte.d.ts.map

package/dist/components/IncremarkFootnotes.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkFootnotes.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkFootnotes.svelte.ts"],"names":[],"mappings":"AAqFA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/IncremarkHeading.svelte

@@ -0,0 +1,35 @@
+<!--
+  @file IncremarkHeading.svelte - 标题组件
+  @description 渲染 Markdown 标题节点（h1-h6）
+-->
+
+<script lang="ts">
+  import type { Heading } from 'mdast'
+  import IncremarkInline from './IncremarkInline.svelte'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 标题节点 */
+    node: Heading
+  }
+
+  let { node }: Props = $props()
+
+  /**
+   * 根据 depth 计算标签名
+   * depth 范围：1-6，对应 h1-h6
+   */
+  const tag = $derived(`h${node.depth}`)
+
+  /**
+   * CSS 类名
+   */
+  const className = $derived(`incremark-heading h${node.depth}`)
+</script>
+
+<svelte:element this={tag} class={className}>
+  <IncremarkInline nodes={node.children} />
+</svelte:element>
+

package/dist/components/IncremarkHeading.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Heading } from 'mdast';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 标题节点 */
+    node: Heading;
+}
+declare const IncremarkHeading: import("svelte").Component<Props, {}, "">;
+type IncremarkHeading = ReturnType<typeof IncremarkHeading>;
+export default IncremarkHeading;
+//# sourceMappingURL=IncremarkHeading.svelte.d.ts.map

package/dist/components/IncremarkHeading.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkHeading.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkHeading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAIlC;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,OAAO,CAAA;CACd;AA6BH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/IncremarkHtmlElement.svelte

@@ -0,0 +1,138 @@
+<!--
+  @file IncremarkHtmlElement.svelte - HTML 元素组件
+  @description 渲染结构化的 HTML 元素节点
+-->
+
+<script lang="ts">
+  import type { RootContent, PhrasingContent } from 'mdast'
+  import IncremarkInline from './IncremarkInline.svelte'
+  import IncremarkHtmlElement from './IncremarkHtmlElement.svelte'
+
+  /**
+   * HtmlElementNode 类型定义（与 @incremark/core 中的定义一致）
+   */
+  interface HtmlElementNode {
+    type: 'htmlElement'
+    tagName: string
+    attrs: Record<string, string>
+    children: RootContent[]
+    data?: {
+      rawHtml?: string
+      parsed?: boolean
+      originalType?: string
+    }
+  }
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** HTML 元素节点 */
+    node: HtmlElementNode
+  }
+
+  let { node }: Props = $props()
+
+  /**
+   * 判断是否是行内元素
+   */
+  function isInlineElement(tagName: string): boolean {
+    const inlineElements = [
+      'a', 'abbr', 'acronym', 'b', 'bdo', 'big', 'br', 'button', 'cite', 
+      'code', 'dfn', 'em', 'i', 'img', 'input', 'kbd', 'label', 'map', 
+      'object', 'output', 'q', 'samp', 'script', 'select', 'small', 
+      'span', 'strong', 'sub', 'sup', 'textarea', 'time', 'tt', 'var'
+    ]
+    return inlineElements.includes(tagName.toLowerCase())
+  }
+
+  /**
+   * 判断是否是自闭合元素
+   */
+  function isVoidElement(tagName: string): boolean {
+    const voidElements = [
+      'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 
+      'link', 'meta', 'param', 'source', 'track', 'wbr'
+    ]
+    return voidElements.includes(tagName.toLowerCase())
+  }
+
+  /**
+   * 判断子节点是否都是行内内容
+   */
+  function hasOnlyInlineChildren(children: RootContent[]): boolean {
+    if (!children || children.length === 0) return true
+    
+    return children.every(child => {
+      const type = child.type
+      // 常见的行内类型
+      const inlineTypes = ['text', 'strong', 'emphasis', 'inlineCode', 'link', 'image', 'break', 'html', 'htmlElement']
+      if (inlineTypes.includes(type)) {
+        // 如果是 htmlElement，检查是否是行内元素
+        if (type === 'htmlElement') {
+          return isInlineElement((child as unknown as HtmlElementNode).tagName)
+        }
+        return true
+      }
+      return false
+    })
+  }
+
+  /**
+   * 将属性对象转换为 HTML 属性对象（过滤危险属性）
+   */
+  function getAttrs(attrs: Record<string, string>): Record<string, string> {
+    // 过滤掉可能有问题的属性
+    const result: Record<string, string> = {}
+    for (const [key, value] of Object.entries(attrs)) {
+      // 跳过事件属性（已在解析时过滤，这里双重保险）
+      if (key.startsWith('on')) continue
+      result[key] = value
+    }
+    return result
+  }
+
+  /**
+   * 计算属性
+   */
+  const attrs = $derived(getAttrs(node.attrs))
+  const className = $derived(`incremark-html-element incremark-${node.tagName}`)
+  const isVoid = $derived(isVoidElement(node.tagName))
+  const hasOnlyInline = $derived(hasOnlyInlineChildren(node.children))
+</script>
+
+<svelte:element 
+  this={node.tagName} 
+  {...attrs}
+  class={className}
+>
+  {#if !isVoid}
+    <!-- 如果子节点都是行内内容，使用 IncremarkInline -->
+    {#if hasOnlyInline}
+      <IncremarkInline nodes={node.children as PhrasingContent[]} />
+    {:else}
+      <!-- 否则递归渲染每个子节点 -->
+      {#each node.children as child, idx (idx)}
+        <!-- 如果子节点是 htmlElement，递归 -->
+        {#if child.type === 'htmlElement'}
+          <IncremarkHtmlElement node={child as unknown as HtmlElementNode} />
+        <!-- 如果是文本节点 -->
+        {:else if child.type === 'text'}
+          {(child as any).value}
+        <!-- 其他类型尝试用 IncremarkInline -->
+        {:else if ['strong', 'emphasis', 'inlineCode', 'link', 'image', 'break'].includes(child.type)}
+          <IncremarkInline nodes={[child as PhrasingContent]} />
+        <!-- 段落等块级元素 -->
+        {:else if child.type === 'paragraph'}
+          <p>
+            <IncremarkInline nodes={((child as any).children as PhrasingContent[])} />
+          </p>
+        <!-- 其他未知类型，显示原始 -->
+        {:else}
+          <div class="incremark-unknown-child">{child.type}</div>
+        {/if}
+      {/each}
+    {/if}
+  {/if}
+</svelte:element>
+

package/dist/components/IncremarkHtmlElement.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { RootContent } from 'mdast';
+import IncremarkHtmlElement from './IncremarkHtmlElement.svelte';
+/**
+ * HtmlElementNode 类型定义（与 @incremark/core 中的定义一致）
+ */
+interface HtmlElementNode {
+    type: 'htmlElement';
+    tagName: string;
+    attrs: Record<string, string>;
+    children: RootContent[];
+    data?: {
+        rawHtml?: string;
+        parsed?: boolean;
+        originalType?: string;
+    };
+}
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** HTML 元素节点 */
+    node: HtmlElementNode;
+}
+declare const IncremarkHtmlElement: import("svelte").Component<Props, {}, "">;
+type IncremarkHtmlElement = ReturnType<typeof IncremarkHtmlElement>;
+export default IncremarkHtmlElement;
+//# sourceMappingURL=IncremarkHtmlElement.svelte.d.ts.map

package/dist/components/IncremarkHtmlElement.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkHtmlElement.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkHtmlElement.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAmB,MAAM,OAAO,CAAA;AAEzD,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AAG/D;;GAEG;AACH,UAAU,eAAe;IACvB,IAAI,EAAE,aAAa,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7B,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,IAAI,CAAC,EAAE;QACL,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED;;GAEG;AACH,UAAU,KAAK;IACb,gBAAgB;IAChB,IAAI,EAAE,eAAe,CAAA;CACtB;AAkHH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}