npm - dishui - Versions diffs - 0.0.47 → 0.0.49 - Mend

dishui 0.0.47 → 0.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/dist/components/pro/Flow/nodes/MediaContent.js CHANGED Viewed

@@ -1,175 +1,192 @@
-import V from "../../../Markdown/Markdown.js";
-import { streamAIChat as D } from "./aiClient.js";
-import { Model3DView as R } from "./Model3DView.js";
-import z, { useEffect as b, useMemo as T, useRef as N, useState as u } from "react";
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import A from "mermaid";
+import z from "../../../Markdown/Markdown.js";
+import { resolveThemeColor as A, resolveThemeColorCss as D } from "../utils/themeColor.js";
+import { streamAIChat as T } from "./aiClient.js";
+import { Model3DView as $ } from "./Model3DView.js";
+import H, { useEffect as v, useMemo as R, useRef as N, useState as f } from "react";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import V from "mermaid";
 import "katex/dist/katex.min.css";
-import H from "katex";
-var K = z.lazy(() => import("./DataNodeView.js").then((t) => ({ default: t.DataNodeView }))), I = !1;
-function L() {
-  I || (A.initialize({
+import K from "katex";
+var L = H.lazy(() => import("./DataNodeView.js").then((e) => ({ default: e.DataNodeView }))), I = !1;
+function _() {
+  I || (V.initialize({
     startOnLoad: !1,
     theme: "default",
     securityLevel: "loose",
     fontFamily: "inherit"
   }), I = !0);
 }
-function _({ content: t, color: r }) {
-  const [i, l] = u(""), [n, s] = u(null), f = N(`flow-mermaid-${Math.random().toString(36).slice(2)}`);
-  return b(() => {
-    let c = !1;
-    L();
-    const m = t.trim();
-    if (!m) {
-      l(""), s(null);
+function P({ content: e, color: r }) {
+  const [s, a] = f(""), [o, i] = f(null), u = N(`flow-mermaid-${Math.random().toString(36).slice(2)}`);
+  return v(() => {
+    let m = !1;
+    _();
+    const c = e.trim();
+    if (!c) {
+      a(""), i(null);
       return;
     }
-    return A.render(f.current, m).then(({ svg: d }) => {
-      c || (l(d), s(null));
+    return V.render(u.current, c).then(({ svg: d }) => {
+      m || (a(d), i(null));
     }).catch((d) => {
-      c || s(d?.message ?? "Mermaid error");
+      m || i(d?.message ?? "Mermaid error");
     }), () => {
-      c = !0;
+      m = !0;
     };
-  }, [t]), n ? /* @__PURE__ */ e("div", {
+  }, [e]), o ? /* @__PURE__ */ t("div", {
     className: "flow-media-error",
-    children: n
-  }) : /* @__PURE__ */ e("div", {
+    children: o
+  }) : /* @__PURE__ */ t("div", {
     className: "flow-media-mermaid",
     style: { color: r },
-    dangerouslySetInnerHTML: { __html: i }
+    dangerouslySetInnerHTML: { __html: s }
   });
 }
-function $({ content: t, color: r, fontSize: i }) {
-  const l = T(() => {
+function j({ content: e, color: r, fontSize: s }) {
+  const a = R(() => {
     try {
-      return H.renderToString(t.trim() || "\\;", {
+      return K.renderToString(e.trim() || "\\;", {
         displayMode: !0,
         throwOnError: !1
       });
-    } catch (n) {
-      return `<span class="flow-media-error">${n?.message ?? "KaTeX error"}</span>`;
+    } catch (o) {
+      return `<span class="flow-media-error">${o?.message ?? "KaTeX error"}</span>`;
     }
-  }, [t]);
-  return /* @__PURE__ */ e("div", {
+  }, [e]);
+  return /* @__PURE__ */ t("div", {
     className: "flow-media-math",
     style: {
       color: r,
-      fontSize: i
+      fontSize: s
     },
-    dangerouslySetInnerHTML: { __html: l }
+    dangerouslySetInnerHTML: { __html: a }
   });
 }
-function P({ content: t, interactive: r }) {
-  return /* @__PURE__ */ e("iframe", {
+function F({ content: e, interactive: r, color: s, fontSize: a }) {
+  const o = R(() => `<!doctype html><html><head><meta charset="utf-8"><style>
+      :root { color-scheme: light dark; }
+      html, body { margin: 0; background: transparent; }
+      body {
+        color: ${s ?? "#111827"};
+        font-size: ${a ?? 13}px;
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        line-height: 1.5;
+        padding: 0;
+      }
+      a { color: inherit; }
+    </style></head><body>${e}</body></html>`, [
+    e,
+    s,
+    a
+  ]);
+  return /* @__PURE__ */ t("iframe", {
     title: "html-media",
     className: "flow-media-iframe",
     style: { pointerEvents: r ? "auto" : "none" },
     sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
-    srcDoc: t
+    srcDoc: o
   });
 }
-function j({ content: t }) {
-  const r = t.trim();
-  return r ? /* @__PURE__ */ e("img", {
+function O({ content: e }) {
+  const r = e.trim();
+  return r ? /* @__PURE__ */ t("img", {
     className: "flow-media-image",
     src: r,
     alt: "",
     draggable: !1,
     referrerPolicy: "no-referrer"
-  }) : /* @__PURE__ */ e("div", {
+  }) : /* @__PURE__ */ t("div", {
     className: "flow-media-image-empty",
     children: "输入图片链接，或直接粘贴图片"
   });
 }
-function F({ node: t, config: r, interactive: i, color: l }) {
-  const [n, s] = u([]), [f, c] = u(""), [m, d] = u(!1), [M, S] = u(null), h = N(null), g = N(null);
-  b(() => {
-    g.current?.scrollTo({ top: g.current.scrollHeight });
-  }, [n, m]), b(() => () => h.current?.abort(), []);
-  const C = !!r?.gateway && !!r?.model && !m, k = async () => {
-    const a = f.trim();
-    if (!a || !r?.gateway) return;
-    S(null);
-    const p = [...n.filter((o) => !(o.role === "assistant" && o.content.trim() === "")), {
+function q({ node: e, config: r, interactive: s, color: a }) {
+  const [o, i] = f([]), [u, m] = f(""), [c, d] = f(!1), [C, M] = f(null), w = N(null), y = N(null);
+  v(() => {
+    y.current?.scrollTo({ top: y.current.scrollHeight });
+  }, [o, c]), v(() => () => w.current?.abort(), []);
+  const S = !!r?.gateway && !!r?.model && !c, k = async () => {
+    const l = u.trim();
+    if (!l || !r?.gateway) return;
+    M(null);
+    const p = [...o.filter((n) => !(n.role === "assistant" && n.content.trim() === "")), {
       role: "user",
-      content: a
+      content: l
     }];
-    s(p), c(""), d(!0);
-    const E = new AbortController();
-    h.current = E;
-    let x = "";
-    s((o) => [...o, {
+    i(p), m(""), d(!0);
+    const x = new AbortController();
+    w.current = x;
+    let E = "";
+    i((n) => [...n, {
       role: "assistant",
       content: ""
     }]);
     try {
-      for await (const o of D(r, p, E.signal))
-        x += o, s((w) => {
-          const y = w.slice();
-          return y[y.length - 1] = {
+      for await (const n of T(r, p, x.signal))
+        E += n, i((h) => {
+          const g = h.slice();
+          return g[g.length - 1] = {
             role: "assistant",
-            content: x
-          }, y;
+            content: E
+          }, g;
         });
-    } catch (o) {
-      o?.name !== "AbortError" && S(o?.message ?? "Request failed");
+    } catch (n) {
+      n?.name !== "AbortError" && M(n?.message ?? "Request failed");
     } finally {
-      s((o) => {
-        const w = o[o.length - 1];
-        return w && w.role === "assistant" && w.content.trim() === "" ? o.slice(0, -1) : o;
-      }), d(!1), h.current = null;
+      i((n) => {
+        const h = n[n.length - 1];
+        return h && h.role === "assistant" && h.content.trim() === "" ? n.slice(0, -1) : n;
+      }), d(!1), w.current = null;
     }
   };
-  return /* @__PURE__ */ v("div", {
+  return /* @__PURE__ */ b("div", {
     className: "flow-media-ai",
-    style: { color: l },
+    style: { color: a },
     children: [
-      /* @__PURE__ */ e("div", {
+      /* @__PURE__ */ t("div", {
         className: "flow-media-ai-header",
-        children: r?.model ? `AI · ${r.model}` : t.data.label || "AI"
+        children: r?.model ? `AI · ${r.model}` : e.data.label || "AI"
       }),
-      /* @__PURE__ */ v("div", {
+      /* @__PURE__ */ b("div", {
         className: "flow-media-ai-log",
-        ref: g,
+        ref: y,
         children: [
-          n.length === 0 && /* @__PURE__ */ e("div", {
+          o.length === 0 && /* @__PURE__ */ t("div", {
             className: "flow-media-ai-empty",
             children: r?.gateway ? "开始对话…" : "请在属性面板配置 AI 接口"
           }),
-          n.map((a, p) => /* @__PURE__ */ e("div", {
-            className: `flow-media-ai-msg flow-media-ai-msg--${a.role}`,
-            children: a.role === "assistant" ? /* @__PURE__ */ e(V, {
-              content: a.content || "…",
+          o.map((l, p) => /* @__PURE__ */ t("div", {
+            className: `flow-media-ai-msg flow-media-ai-msg--${l.role}`,
+            children: l.role === "assistant" ? /* @__PURE__ */ t(z, {
+              content: l.content || "…",
               enableMermaid: !1,
               enableMarkmap: !1
-            }) : /* @__PURE__ */ e("span", { children: a.content })
+            }) : /* @__PURE__ */ t("span", { children: l.content })
           }, p)),
-          M && /* @__PURE__ */ e("div", {
+          C && /* @__PURE__ */ t("div", {
             className: "flow-media-error",
-            children: M
+            children: C
           })
         ]
       }),
-      /* @__PURE__ */ v("div", {
+      /* @__PURE__ */ b("div", {
         className: "flow-media-ai-input",
-        style: { pointerEvents: i ? "auto" : "none" },
-        children: [/* @__PURE__ */ e("textarea", {
-          value: f,
+        style: { pointerEvents: s ? "auto" : "none" },
+        children: [/* @__PURE__ */ t("textarea", {
+          value: u,
           placeholder: "输入消息，Enter 发送",
-          onChange: (a) => c(a.target.value),
-          onKeyDown: (a) => {
-            a.key === "Enter" && !a.shiftKey && (a.preventDefault(), C && k());
+          onChange: (l) => m(l.target.value),
+          onKeyDown: (l) => {
+            l.key === "Enter" && !l.shiftKey && (l.preventDefault(), S && k());
           },
-          onPointerDown: (a) => a.stopPropagation()
-        }), m ? /* @__PURE__ */ e("button", {
+          onPointerDown: (l) => l.stopPropagation()
+        }), c ? /* @__PURE__ */ t("button", {
           type: "button",
-          onClick: () => h.current?.abort(),
+          onClick: () => w.current?.abort(),
           children: "停止"
-        }) : /* @__PURE__ */ e("button", {
+        }) : /* @__PURE__ */ t("button", {
           type: "button",
-          disabled: !C || !f.trim(),
+          disabled: !S || !u.trim(),
           onClick: k,
           children: "发送"
         })]
@@ -177,54 +194,56 @@ function F({ node: t, config: r, interactive: i, color: l }) {
     ]
   });
 }
-function W({ node: t, interactive: r }) {
-  const i = t.data.mediaKind ?? "markdown", l = t.data.mediaContent ?? "", n = t.data.labelColor ?? t.data.color;
-  switch (i) {
+function ee({ node: e, interactive: r }) {
+  const s = e.data.mediaKind ?? "markdown", a = e.data.mediaContent ?? "", o = D(e.data.labelColor ?? e.data.color, "#111827");
+  switch (s) {
     case "markdown":
-      return /* @__PURE__ */ e("div", {
+      return /* @__PURE__ */ t("div", {
         className: "flow-media-markdown",
         style: {
-          color: n,
-          fontSize: t.data.fontSize
+          color: o,
+          fontSize: e.data.fontSize
         },
-        children: /* @__PURE__ */ e(V, { content: l })
+        children: /* @__PURE__ */ t(z, { content: a })
       });
     case "html":
-      return /* @__PURE__ */ e(P, {
-        content: l,
-        interactive: r
+      return /* @__PURE__ */ t(F, {
+        content: a,
+        interactive: r,
+        color: A(e.data.labelColor ?? e.data.color, "#111827"),
+        fontSize: e.data.fontSize
       });
     case "mermaid":
-      return /* @__PURE__ */ e(_, {
-        content: l,
-        color: n
+      return /* @__PURE__ */ t(P, {
+        content: a,
+        color: o
       });
     case "math":
-      return /* @__PURE__ */ e($, {
-        content: l,
-        color: n,
-        fontSize: t.data.fontSize
+      return /* @__PURE__ */ t(j, {
+        content: a,
+        color: o,
+        fontSize: e.data.fontSize
       });
     case "image":
-      return /* @__PURE__ */ e(j, { content: l });
+      return /* @__PURE__ */ t(O, { content: a });
     case "model3d":
-      return /* @__PURE__ */ e(R, {
-        content: l,
-        format: t.data.modelFormat ?? "stl",
+      return /* @__PURE__ */ t($, {
+        content: a,
+        format: e.data.modelFormat ?? "stl",
         interactive: r
       });
     case "ai":
-      return /* @__PURE__ */ e(F, {
-        node: t,
-        config: t.data.aiConfig,
+      return /* @__PURE__ */ t(q, {
+        node: e,
+        config: e.data.aiConfig,
         interactive: r,
-        color: n
+        color: o
       });
     case "data":
-      return /* @__PURE__ */ e("div", {
+      return /* @__PURE__ */ t("div", {
         className: "flow-media-data",
         style: { pointerEvents: r ? "auto" : "none" },
-        children: /* @__PURE__ */ e(K, { config: t.data.dataConfig ?? {
+        children: /* @__PURE__ */ t(L, { config: e.data.dataConfig ?? {
           columns: [],
           rows: [],
           view: "table"
@@ -235,7 +254,7 @@ function W({ node: t, interactive: r }) {
   }
 }
 export {
-  W as MediaContent
+  ee as MediaContent
 };
 //# sourceMappingURL=MediaContent.js.map

package/dist/components/pro/Flow/nodes/MediaContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MediaContent.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaContent.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport katex from 'katex';\nimport mermaid from 'mermaid';\nimport Markdown from '../../../Markdown';\nimport type { FlowNode, FlowAIConfig } from '../types';\nimport { streamAIChat, type AIChatMessage } from './aiClient';\nimport 'katex/dist/katex.min.css';\nimport { Model3DView } from './Model3DView';\n\n// Data-node view pulls in DataTable + Chart; lazy-load so it only enters the\n// bundle when a data node actually renders.\nconst DataNodeView = React.lazy(() =>\n import('./DataNodeView').then((m) => ({ default: m.DataNodeView })),\n);\n\nlet mermaidReady = false;\nfunction ensureMermaid() {\n if (mermaidReady) return;\n mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose', fontFamily: 'inherit' });\n mermaidReady = true;\n}\n\n/** Renders a Mermaid diagram from source into an inline SVG. /\nfunction MermaidView({ content, color }: { content: string; color?: string }) {\n const [svg, setSvg] = useState('');\n const [error, setError] = useState<string \| null>(null);\n const idRef = useRef(`flow-mermaid-${Math.random().toString(36).slice(2)}`);\n\n useEffect(() => {\n let cancelled = false;\n ensureMermaid();\n const src = content.trim();\n if (!src) { setSvg(''); setError(null); return; }\n mermaid\n .render(idRef.current, src)\n .then(({ svg }) => { if (!cancelled) { setSvg(svg); setError(null); } })\n .catch((e) => { if (!cancelled) setError(e?.message ?? 'Mermaid error'); });\n return () => { cancelled = true; };\n }, [content]);\n\n if (error) return <div className=\"flow-media-error\">{error}</div>;\n return <div className=\"flow-media-mermaid\" style={{ color }} dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\n/* Renders a LaTeX formula (display mode) via KaTeX. /\nfunction MathView({ content, color, fontSize }: { content: string; color?: string; fontSize?: number }) {\n const html = useMemo(() => {\n try {\n return katex.renderToString(content.trim() \|\| '\\\\;', { displayMode: true, throwOnError: false });\n } catch (e: any) {\n return `<span class=\"flow-media-error\">${e?.message ?? 'KaTeX error'}</span>`;\n }\n }, [content]);\n return <div className=\"flow-media-math\" style={{ color, fontSize }} dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\n/* Renders raw HTML in a sandboxed iframe (isolated from the host document). /\nfunction HtmlView({ content, interactive }: { content: string; interactive: boolean }) {\n return (\n <iframe\n title=\"html-media\"\n className=\"flow-media-iframe\"\n style={{ pointerEvents: interactive ? 'auto' : 'none' }}\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\"\n srcDoc={content}\n />\n );\n}\n\nfunction ImageView({ content }: { content: string }) {\n const src = content.trim();\n if (!src) {\n return <div className=\"flow-media-image-empty\">输入图片链接，或直接粘贴图片</div>;\n }\n return (\n <img\n className=\"flow-media-image\"\n src={src}\n alt=\"\"\n draggable={false}\n referrerPolicy=\"no-referrer\"\n />\n );\n}\n\n/* Interactive AI chat backed by an OpenAI/Anthropic-compatible endpoint. /\nfunction AIView({ node, config, interactive, color }: { node: FlowNode; config?: FlowAIConfig; interactive: boolean; color?: string }) {\n const [messages, setMessages] = useState<AIChatMessage[]>([]);\n const [input, setInput] = useState('');\n const [streaming, setStreaming] = useState(false);\n const [error, setError] = useState<string \| null>(null);\n const abortRef = useRef<AbortController \| null>(null);\n const scrollRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n }, [messages, streaming]);\n\n useEffect(() => () => abortRef.current?.abort(), []);\n\n const canSend = !!config?.gateway && !!config?.model && !streaming;\n\n const send = async () => {\n const text = input.trim();\n if (!text \|\| !config?.gateway) return;\n setError(null);\n // Only keep non-empty assistant messages in history; an aborted/errored\n // request can leave an empty assistant placeholder behind, which the API\n // then rejects (\"assistant message must not be empty\").\n const history = messages.filter(\n (m) => !(m.role === 'assistant' && m.content.trim() === ''),\n );\n const next: AIChatMessage[] = [...history, { role: 'user', content: text }];\n setMessages(next);\n setInput('');\n setStreaming(true);\n const ac = new AbortController();\n abortRef.current = ac;\n let acc = '';\n setMessages((m) => [...m, { role: 'assistant', content: '' }]);\n try {\n for await (const delta of streamAIChat(config, next, ac.signal)) {\n acc += delta;\n setMessages((m) => {\n const copy = m.slice();\n copy[copy.length - 1] = { role: 'assistant', content: acc };\n return copy;\n });\n }\n } catch (e: any) {\n if (e?.name !== 'AbortError') setError(e?.message ?? 'Request failed');\n } finally {\n // Drop the trailing assistant placeholder if nothing streamed in.\n setMessages((m) => {\n const last = m[m.length - 1];\n if (last && last.role === 'assistant' && last.content.trim() === '') {\n return m.slice(0, -1);\n }\n return m;\n });\n setStreaming(false);\n abortRef.current = null;\n }\n };\n\n return (\n <div className=\"flow-media-ai\" style={{ color }}>\n <div className=\"flow-media-ai-header\">\n {config?.model ? `AI · ${config.model}` : (node.data.label \|\| 'AI')}\n </div>\n <div className=\"flow-media-ai-log\" ref={scrollRef}>\n {messages.length === 0 && (\n <div className=\"flow-media-ai-empty\">\n {config?.gateway ? '开始对话…' : '请在属性面板配置 AI 接口'}\n </div>\n )}\n {messages.map((m, i) => (\n <div key={i} className={`flow-media-ai-msg flow-media-ai-msg--${m.role}`}>\n {m.role === 'assistant'\n ? <Markdown content={m.content \|\| '…'} enableMermaid={false} enableMarkmap={false} />\n : <span>{m.content}</span>}\n </div>\n ))}\n {error && <div className=\"flow-media-error\">{error}</div>}\n </div>\n <div className=\"flow-media-ai-input\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n <textarea\n value={input}\n placeholder=\"输入消息，Enter 发送\"\n onChange={(e) => setInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSend) send(); }\n }}\n onPointerDown={(e) => e.stopPropagation()}\n />\n {streaming ? (\n <button type=\"button\" onClick={() => abortRef.current?.abort()}>停止</button>\n ) : (\n <button type=\"button\" disabled={!canSend \|\| !input.trim()} onClick={send}>发送</button>\n )}\n </div>\n </div>\n );\n}\n\n/* Dispatches to the correct renderer for the node's media kind. */\nexport function MediaContent({ node, interactive }: { node: FlowNode; interactive: boolean }) {\n const kind = node.data.mediaKind ?? 'markdown';\n const content = node.data.mediaContent ?? '';\n const textColor = node.data.labelColor ?? node.data.color;\n\n switch (kind) {\n case 'markdown':\n return (\n <div className=\"flow-media-markdown\" style={{ color: textColor, fontSize: node.data.fontSize }}>\n <Markdown content={content} />\n </div>\n );\n case 'html':\n return <HtmlView content={content} interactive={interactive} />;\n case 'mermaid':\n return <MermaidView content={content} color={textColor} />;\n case 'math':\n return <MathView content={content} color={textColor} fontSize={node.data.fontSize} />;\n case 'image':\n return <ImageView content={content} />;\n case 'model3d':\n return (\n <Model3DView\n content={content}\n format={node.data.modelFormat ?? 'stl'}\n interactive={interactive}\n />\n );\n case 'ai':\n return <AIView node={node} config={node.data.aiConfig} interactive={interactive} color={textColor} />;\n case 'data':\n return (\n <div className=\"flow-media-data\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n <DataNodeView config={node.data.dataConfig ?? { columns: [], rows: [], view: 'table' }} />\n </div>\n );\n default:\n return null;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"MediaContent.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaContent.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport katex from 'katex';\nimport mermaid from 'mermaid';\nimport Markdown from '../../../Markdown';\nimport type { FlowNode, FlowAIConfig } from '../types';\nimport { streamAIChat, type AIChatMessage } from './aiClient';\nimport { resolveThemeColorCss, resolveThemeColor } from '../utils/themeColor';\nimport 'katex/dist/katex.min.css';\nimport { Model3DView } from './Model3DView';\n\n// Data-node view pulls in DataTable + Chart; lazy-load so it only enters the\n// bundle when a data node actually renders.\nconst DataNodeView = React.lazy(() =>\n import('./DataNodeView').then((m) => ({ default: m.DataNodeView })),\n);\n\nlet mermaidReady = false;\nfunction ensureMermaid() {\n if (mermaidReady) return;\n mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose', fontFamily: 'inherit' });\n mermaidReady = true;\n}\n\n/** Renders a Mermaid diagram from source into an inline SVG. /\nfunction MermaidView({ content, color }: { content: string; color?: string }) {\n const [svg, setSvg] = useState('');\n const [error, setError] = useState<string \| null>(null);\n const idRef = useRef(`flow-mermaid-${Math.random().toString(36).slice(2)}`);\n\n useEffect(() => {\n let cancelled = false;\n ensureMermaid();\n const src = content.trim();\n if (!src) { setSvg(''); setError(null); return; }\n mermaid\n .render(idRef.current, src)\n .then(({ svg }) => { if (!cancelled) { setSvg(svg); setError(null); } })\n .catch((e) => { if (!cancelled) setError(e?.message ?? 'Mermaid error'); });\n return () => { cancelled = true; };\n }, [content]);\n\n if (error) return <div className=\"flow-media-error\">{error}</div>;\n return <div className=\"flow-media-mermaid\" style={{ color }} dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\n/* Renders a LaTeX formula (display mode) via KaTeX. /\nfunction MathView({ content, color, fontSize }: { content: string; color?: string; fontSize?: number }) {\n const html = useMemo(() => {\n try {\n return katex.renderToString(content.trim() \|\| '\\\\;', { displayMode: true, throwOnError: false });\n } catch (e: any) {\n return `<span class=\"flow-media-error\">${e?.message ?? 'KaTeX error'}</span>`;\n }\n }, [content]);\n return <div className=\"flow-media-math\" style={{ color, fontSize }} dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\n/* Renders raw HTML in a sandboxed iframe (isolated from the host document).\n * A base stylesheet is injected so the fragment inherits the node's themed\n * text color / font size and a transparent background, keeping it readable on\n * any theme without the author having to set colors. /\nfunction HtmlView({ content, interactive, color, fontSize }: { content: string; interactive: boolean; color?: string; fontSize?: number }) {\n const srcDoc = useMemo(() => {\n const base = `<!doctype html><html><head><meta charset=\"utf-8\"><style>\n :root { color-scheme: light dark; }\n html, body { margin: 0; background: transparent; }\n body {\n color: ${color ?? '#111827'};\n font-size: ${fontSize ?? 13}px;\n font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n line-height: 1.5;\n padding: 0;\n }\n a { color: inherit; }\n </style></head><body>${content}</body></html>`;\n return base;\n }, [content, color, fontSize]);\n return (\n <iframe\n title=\"html-media\"\n className=\"flow-media-iframe\"\n style={{ pointerEvents: interactive ? 'auto' : 'none' }}\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\"\n srcDoc={srcDoc}\n />\n );\n}\n\nfunction ImageView({ content }: { content: string }) {\n const src = content.trim();\n if (!src) {\n return <div className=\"flow-media-image-empty\">输入图片链接，或直接粘贴图片</div>;\n }\n return (\n <img\n className=\"flow-media-image\"\n src={src}\n alt=\"\"\n draggable={false}\n referrerPolicy=\"no-referrer\"\n />\n );\n}\n\n/* Interactive AI chat backed by an OpenAI/Anthropic-compatible endpoint. /\nfunction AIView({ node, config, interactive, color }: { node: FlowNode; config?: FlowAIConfig; interactive: boolean; color?: string }) {\n const [messages, setMessages] = useState<AIChatMessage[]>([]);\n const [input, setInput] = useState('');\n const [streaming, setStreaming] = useState(false);\n const [error, setError] = useState<string \| null>(null);\n const abortRef = useRef<AbortController \| null>(null);\n const scrollRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n }, [messages, streaming]);\n\n useEffect(() => () => abortRef.current?.abort(), []);\n\n const canSend = !!config?.gateway && !!config?.model && !streaming;\n\n const send = async () => {\n const text = input.trim();\n if (!text \|\| !config?.gateway) return;\n setError(null);\n // Only keep non-empty assistant messages in history; an aborted/errored\n // request can leave an empty assistant placeholder behind, which the API\n // then rejects (\"assistant message must not be empty\").\n const history = messages.filter(\n (m) => !(m.role === 'assistant' && m.content.trim() === ''),\n );\n const next: AIChatMessage[] = [...history, { role: 'user', content: text }];\n setMessages(next);\n setInput('');\n setStreaming(true);\n const ac = new AbortController();\n abortRef.current = ac;\n let acc = '';\n setMessages((m) => [...m, { role: 'assistant', content: '' }]);\n try {\n for await (const delta of streamAIChat(config, next, ac.signal)) {\n acc += delta;\n setMessages((m) => {\n const copy = m.slice();\n copy[copy.length - 1] = { role: 'assistant', content: acc };\n return copy;\n });\n }\n } catch (e: any) {\n if (e?.name !== 'AbortError') setError(e?.message ?? 'Request failed');\n } finally {\n // Drop the trailing assistant placeholder if nothing streamed in.\n setMessages((m) => {\n const last = m[m.length - 1];\n if (last && last.role === 'assistant' && last.content.trim() === '') {\n return m.slice(0, -1);\n }\n return m;\n });\n setStreaming(false);\n abortRef.current = null;\n }\n };\n\n return (\n <div className=\"flow-media-ai\" style={{ color }}>\n <div className=\"flow-media-ai-header\">\n {config?.model ? `AI · ${config.model}` : (node.data.label \|\| 'AI')}\n </div>\n <div className=\"flow-media-ai-log\" ref={scrollRef}>\n {messages.length === 0 && (\n <div className=\"flow-media-ai-empty\">\n {config?.gateway ? '开始对话…' : '请在属性面板配置 AI 接口'}\n </div>\n )}\n {messages.map((m, i) => (\n <div key={i} className={`flow-media-ai-msg flow-media-ai-msg--${m.role}`}>\n {m.role === 'assistant'\n ? <Markdown content={m.content \|\| '…'} enableMermaid={false} enableMarkmap={false} />\n : <span>{m.content}</span>}\n </div>\n ))}\n {error && <div className=\"flow-media-error\">{error}</div>}\n </div>\n <div className=\"flow-media-ai-input\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n <textarea\n value={input}\n placeholder=\"输入消息，Enter 发送\"\n onChange={(e) => setInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSend) send(); }\n }}\n onPointerDown={(e) => e.stopPropagation()}\n />\n {streaming ? (\n <button type=\"button\" onClick={() => abortRef.current?.abort()}>停止</button>\n ) : (\n <button type=\"button\" disabled={!canSend \|\| !input.trim()} onClick={send}>发送</button>\n )}\n </div>\n </div>\n );\n}\n\n/* Dispatches to the correct renderer for the node's media kind. */\nexport function MediaContent({ node, interactive }: { node: FlowNode; interactive: boolean }) {\n const kind = node.data.mediaKind ?? 'markdown';\n const content = node.data.mediaContent ?? '';\n const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n\n switch (kind) {\n case 'markdown':\n return (\n <div className=\"flow-media-markdown\" style={{ color: textColor, fontSize: node.data.fontSize }}>\n <Markdown content={content} />\n </div>\n );\n case 'html':\n // The iframe is an isolated document with no access to the parent's CSS\n // variables, so pass a concrete resolved color instead of a var().\n return (\n <HtmlView\n content={content}\n interactive={interactive}\n color={resolveThemeColor(node.data.labelColor ?? node.data.color, '#111827')}\n fontSize={node.data.fontSize}\n />\n );\n case 'mermaid':\n return <MermaidView content={content} color={textColor} />;\n case 'math':\n return <MathView content={content} color={textColor} fontSize={node.data.fontSize} />;\n case 'image':\n return <ImageView content={content} />;\n case 'model3d':\n return (\n <Model3DView\n content={content}\n format={node.data.modelFormat ?? 'stl'}\n interactive={interactive}\n />\n );\n case 'ai':\n return <AIView node={node} config={node.data.aiConfig} interactive={interactive} color={textColor} />;\n case 'data':\n return (\n <div className=\"flow-media-data\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n <DataNodeView config={node.data.dataConfig ?? { columns: [], rows: [], view: 'table' }} />\n </div>\n );\n default:\n return null;\n }\n}\n"],"mappings":"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"}

package/dist/components/pro/Flow/nodes/MediaOverlay.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { useFlowContext as u } from "../context/FlowContext.js";
-import { useFlowUI as v } from "../context/FlowUIContext.js";
-import s, { Suspense as g, useMemo as w } from "react";
+import { useFlowContext as w } from "../context/FlowContext.js";
+import { useFlowUI as y } from "../context/FlowUIContext.js";
+import { resolveThemeColorCss as s } from "../utils/themeColor.js";
+import i, { Suspense as C, useMemo as x } from "react";
 import { jsx as r } from "react/jsx-runtime";
-var y = s.lazy(() => import("./MediaContent.js").then((t) => ({ default: t.MediaContent }))), N = class extends s.Component {
+var N = i.lazy(() => import("./MediaContent.js").then((t) => ({ default: t.MediaContent }))), M = class extends i.Component {
   constructor(t) {
     super(t), this.state = { error: null };
   }
@@ -16,21 +17,21 @@ var y = s.lazy(() => import("./MediaContent.js").then((t) => ({ default: t.Media
     }) : this.props.children;
   }
 };
-function F() {
-  const { currentCanvas: t, selection: a } = u(), { viewport: n, isNodeDragging: l } = v(), i = w(() => t.nodes.filter((e) => e.type === "mediaNode"), [t.nodes]);
-  if (i.length === 0) return null;
-  const { x: d, y: c, zoom: o } = n;
+function D() {
+  const { currentCanvas: t, selection: n } = w(), { viewport: l, isNodeDragging: d } = y(), a = x(() => t.nodes.filter((e) => e.type === "mediaNode"), [t.nodes]);
+  if (a.length === 0) return null;
+  const { x: c, y: m, zoom: o } = l;
   return /* @__PURE__ */ r("div", {
     className: "flow-media-layer",
-    children: i.map((e) => {
-      const m = e.position.x * o + d, h = e.position.y * o + c, p = a.nodeIds.has(e.id) && !l;
+    children: a.map((e) => {
+      const p = e.position.x * o + c, f = e.position.y * o + m, h = n.nodeIds.has(e.id) && !d, u = e.data.fill === "transparent" ? "transparent" : s(e.data.fill, "transparent"), v = s(e.data.labelColor ?? e.data.color, "#111827");
       return /* @__PURE__ */ r("div", {
         className: "flow-media-node",
         "data-media-node": e.id,
         style: {
           position: "absolute",
-          left: m,
-          top: h,
+          left: p,
+          top: f,
           width: e.width,
           height: e.height,
           transform: `scale(${o})`,
@@ -39,15 +40,19 @@ function F() {
         },
         children: /* @__PURE__ */ r("div", {
           className: "flow-media-surface",
-          onWheel: (f) => f.stopPropagation(),
-          children: /* @__PURE__ */ r(g, {
+          onWheel: (g) => g.stopPropagation(),
+          style: {
+            background: u,
+            color: v
+          },
+          children: /* @__PURE__ */ r(C, {
             fallback: /* @__PURE__ */ r("div", {
               className: "flow-media-loading",
               children: "…"
             }),
-            children: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(y, {
+            children: /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(N, {
               node: e,
-              interactive: p
+              interactive: h
             }) })
           })
         })
@@ -56,7 +61,7 @@ function F() {
   });
 }
 export {
-  F as MediaOverlay
+  D as MediaOverlay
 };
 //# sourceMappingURL=MediaOverlay.js.map

package/dist/components/pro/Flow/nodes/MediaOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MediaOverlay.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaOverlay.tsx"],"sourcesContent":["import React, { useMemo, Suspense } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useFlowUI } from '../context/FlowUIContext';\n\n// Lazy-load the media renderers so the heavy optional deps they pull in\n// (react-markdown, mermaid, katex, markmap, …) are only fetched when a media\n// node actually needs to render. This keeps the base `dishui/flow` bundle\n// lightweight and avoids loading that stack for diagrams without media nodes.\nconst MediaContent = React.lazy(() =>\n import('./MediaContent').then((m) => ({ default: m.MediaContent })),\n);\n\n/** Isolates media render/load failures so one bad node never blanks the editor. /\nclass MediaErrorBoundary extends React.Component<\n { children: React.ReactNode },\n { error: Error \| null }\n> {\n constructor(props: { children: React.ReactNode }) {\n super(props);\n this.state = { error: null };\n }\n static getDerivedStateFromError(error: Error) {\n return { error };\n }\n render() {\n if (this.state.error) {\n return <div className=\"flow-media-error\">{this.state.error.message}</div>;\n }\n return this.props.children;\n }\n}\n\n/\n DOM overlay for media nodes. PixiJS draws the frame; this layer renders the\n * live content (markdown/html/mermaid/math/AI) on top, synced to the viewport\n * so it pans and zooms with the canvas.\n \n Event model: a media surface is `pointer-events: none` by default so the\n * canvas underneath can be clicked to select/drag the node's frame. The\n * surface only becomes interactive while its node is selected (so AI chat can\n * be typed into, HTML can be scrolled). This also stops an always-interactive\n * iframe/AI box from swallowing pointer gestures and leaving the drag stuck.\n /\nexport function MediaOverlay() {\n const { currentCanvas, selection } = useFlowContext();\n const { viewport, isNodeDragging } = useFlowUI();\n\n const mediaNodes = useMemo(\n () => currentCanvas.nodes.filter((n) => n.type === 'mediaNode'),\n [currentCanvas.nodes],\n );\n\n if (mediaNodes.length === 0) return null;\n\n const { x: vx, y: vy, zoom } = viewport;\n\n return (\n <div className=\"flow-media-layer\">\n {mediaNodes.map((node) => {\n // World → screen (CSS px, matching ViewportManager.worldToScreen).\n const left = node.position.x zoom + vx;\n const top = node.position.y * zoom + vy;\n // Interactive only while selected, so the canvas stays draggable.\n // Suppress entirely during a drag: an interactive iframe would swallow\n // the pointer and the canvas would never receive pointerup (stuck drag).\n const interactive = selection.nodeIds.has(node.id) && !isNodeDragging;\n return (\n <div\n key={node.id}\n className=\"flow-media-node\"\n data-media-node={node.id}\n style={{\n position: 'absolute',\n left,\n top,\n width: node.width,\n height: node.height,\n // Scale the fixed-size content box to match zoom without\n // reflowing text on every zoom step.\n transform: `scale(${zoom})`,\n transformOrigin: 'top left',\n // Below the frame's selection outline but above the canvas.\n pointerEvents: 'none',\n }}\n >\n <div\n className=\"flow-media-surface\"\n onWheel={(e) => e.stopPropagation()}\n >\n <Suspense fallback={<div className=\"flow-media-loading\">…</div>}>\n <MediaErrorBoundary>\n <MediaContent node={node} interactive={interactive} />\n </MediaErrorBoundary>\n </Suspense>\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n"],"mappings":"~~;;;;AAQA~~,IAAM,IAAe,EAAM,KAAA,MACzB,OAAO,mBAAA,EAAkB,KAAA,CAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,GAGM,IAAN,cAAiC,EAAM,UAGrC;AAAA,EACA,YAAY,GAAsC;AAChD,UAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;AAAA,EAC7B;AAAA,EACA,OAAO,yBAAyB,GAAc;AAC5C,WAAO,EAAE,OAAA,EAAM;AAAA,EACjB;AAAA,EACA,SAAS;AACP,WAAI,KAAK,MAAM,QACN,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,gBAAoB,KAAK,MAAM,MAAM;AAAA,IAAa,CAAA,IAEnE,KAAK,MAAM;AAAA,EACpB;AACF;AAaA,SAAgB,IAAe;AAC7B,QAAM,EAAE,eAAA,GAAe,WAAA,EAAA,IAAc,EAAe,GAC9C,EAAE,UAAA,GAAU,gBAAA,EAAA,IAAmB,EAAU,GAEzC,IAAa,EAAA,MACX,EAAc,MAAM,OAAA,CAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;AAEA,MAAI,EAAW,WAAW,EAAG,QAAO;AAEpC,QAAM,EAAE,GAAG,GAAI,GAAG,GAAI,MAAA,EAAA,IAAS;AAE/B,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cACZ,EAAW,IAAA,CAAK,MAAS;AAExB,YAAM,IAAO,EAAK,SAAS,IAAI,IAAO,GAChC,IAAM,EAAK,SAAS,IAAI,IAAO,GAI/B,IAAc,EAAU,QAAQ,IAAI,EAAK,EAAE,KAAK,CAAC;~~AACvD~~,aACE,gBAAA,EAAC,OAAD;AAAA,QAEE,WAAU;AAAA,QACV,mBAAiB,EAAK;AAAA,QACtB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAO,EAAK;AAAA,UACZ,QAAQ,EAAK;AAAA,UAGb,WAAW,SAAS,CAAA;AAAA,UACpB,iBAAiB;AAAA,UAEjB,eAAe;AAAA,QACjB;AAAA,kBAEA,gBAAA,EAAC,OAAD;AAAA,UACE,WAAU;AAAA,UACV,SAAA,CAAU,MAAM,EAAE,gBAAgB;AAAA,~~oBAElC~~,gBAAA,EAAC,GAAD;AAAA,YAAU,UAAU,gBAAA,EAAC,OAAD;AAAA,cAAK,WAAU;AAAA,wBAAqB;AAAA,YAAM,CAAA;AAAA,sBAC5D,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,cAAoB,MAAA;AAAA,cAAmB,aAAA;AAAA,YAAc,CAAA,EACnC,CAAA;AAAA,UACZ,CAAA;AAAA,QACP,CAAA;AAAA,MACF,~~GA3BE~~,EAAK,~~EA2BP~~;AAAA,IAET,CAAC;AAAA,EACE,CAAA;AAET"}
1	+ {"version":3,"file":"MediaOverlay.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaOverlay.tsx"],"sourcesContent":["import React, { useMemo, Suspense } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useFlowUI } from '../context/FlowUIContext';\nimport { resolveThemeColorCss } from '../utils/themeColor';\n\n// Lazy-load the media renderers so the heavy optional deps they pull in\n// (react-markdown, mermaid, katex, markmap, …) are only fetched when a media\n// node actually needs to render. This keeps the base `dishui/flow` bundle\n// lightweight and avoids loading that stack for diagrams without media nodes.\nconst MediaContent = React.lazy(() =>\n import('./MediaContent').then((m) => ({ default: m.MediaContent })),\n);\n\n/** Isolates media render/load failures so one bad node never blanks the editor. /\nclass MediaErrorBoundary extends React.Component<\n { children: React.ReactNode },\n { error: Error \| null }\n> {\n constructor(props: { children: React.ReactNode }) {\n super(props);\n this.state = { error: null };\n }\n static getDerivedStateFromError(error: Error) {\n return { error };\n }\n render() {\n if (this.state.error) {\n return <div className=\"flow-media-error\">{this.state.error.message}</div>;\n }\n return this.props.children;\n }\n}\n\n/\n DOM overlay for media nodes. PixiJS draws the frame; this layer renders the\n * live content (markdown/html/mermaid/math/AI) on top, synced to the viewport\n * so it pans and zooms with the canvas.\n \n Event model: a media surface is `pointer-events: none` by default so the\n * canvas underneath can be clicked to select/drag the node's frame. The\n * surface only becomes interactive while its node is selected (so AI chat can\n * be typed into, HTML can be scrolled). This also stops an always-interactive\n * iframe/AI box from swallowing pointer gestures and leaving the drag stuck.\n /\nexport function MediaOverlay() {\n const { currentCanvas, selection } = useFlowContext();\n const { viewport, isNodeDragging } = useFlowUI();\n\n const mediaNodes = useMemo(\n () => currentCanvas.nodes.filter((n) => n.type === 'mediaNode'),\n [currentCanvas.nodes],\n );\n\n if (mediaNodes.length === 0) return null;\n\n const { x: vx, y: vy, zoom } = viewport;\n\n return (\n <div className=\"flow-media-layer\">\n {mediaNodes.map((node) => {\n // World → screen (CSS px, matching ViewportManager.worldToScreen).\n const left = node.position.x zoom + vx;\n const top = node.position.y * zoom + vy;\n // Interactive only while selected, so the canvas stays draggable.\n // Suppress entirely during a drag: an interactive iframe would swallow\n // the pointer and the canvas would never receive pointerup (stuck drag).\n const interactive = selection.nodeIds.has(node.id) && !isNodeDragging;\n // Drive the overlay's background / text from the node's own color data.\n // Theme tokens (`theme:*`) resolve to CSS variables so the media content\n // follows theme switches natively; literal colors are used as-is. This\n // keeps html / ai / data (which render opaque content) in sync with the\n // fill/color chosen in the inspector, matching the PixiJS frame drawn\n // underneath. The border is owned by the Pixi frame (also what PNG/PDF\n // export captures), so we don't redraw it here.\n const fillCss = node.data.fill === 'transparent'\n ? 'transparent'\n : resolveThemeColorCss(node.data.fill, 'transparent');\n const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n return (\n <div\n key={node.id}\n className=\"flow-media-node\"\n data-media-node={node.id}\n style={{\n position: 'absolute',\n left,\n top,\n width: node.width,\n height: node.height,\n // Scale the fixed-size content box to match zoom without\n // reflowing text on every zoom step.\n transform: `scale(${zoom})`,\n transformOrigin: 'top left',\n // Below the frame's selection outline but above the canvas.\n pointerEvents: 'none',\n }}\n >\n <div\n className=\"flow-media-surface\"\n onWheel={(e) => e.stopPropagation()}\n style={{\n background: fillCss,\n color: textColor,\n }}\n >\n <Suspense fallback={<div className=\"flow-media-loading\">…</div>}>\n <MediaErrorBoundary>\n <MediaContent node={node} interactive={interactive} />\n </MediaErrorBoundary>\n </Suspense>\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n"],"mappings":";;;;;AASA,IAAM,IAAe,EAAM,KAAA,MACzB,OAAO,mBAAA,EAAkB,KAAA,CAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,GAGM,IAAN,cAAiC,EAAM,UAGrC;AAAA,EACA,YAAY,GAAsC;AAChD,UAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;AAAA,EAC7B;AAAA,EACA,OAAO,yBAAyB,GAAc;AAC5C,WAAO,EAAE,OAAA,EAAM;AAAA,EACjB;AAAA,EACA,SAAS;AACP,WAAI,KAAK,MAAM,QACN,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,gBAAoB,KAAK,MAAM,MAAM;AAAA,IAAa,CAAA,IAEnE,KAAK,MAAM;AAAA,EACpB;AACF;AAaA,SAAgB,IAAe;AAC7B,QAAM,EAAE,eAAA,GAAe,WAAA,EAAA,IAAc,EAAe,GAC9C,EAAE,UAAA,GAAU,gBAAA,EAAA,IAAmB,EAAU,GAEzC,IAAa,EAAA,MACX,EAAc,MAAM,OAAA,CAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;AAEA,MAAI,EAAW,WAAW,EAAG,QAAO;AAEpC,QAAM,EAAE,GAAG,GAAI,GAAG,GAAI,MAAA,EAAA,IAAS;AAE/B,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cACZ,EAAW,IAAA,CAAK,MAAS;AAExB,YAAM,IAAO,EAAK,SAAS,IAAI,IAAO,GAChC,IAAM,EAAK,SAAS,IAAI,IAAO,GAI/B,IAAc,EAAU,QAAQ,IAAI,EAAK,EAAE,KAAK,CAAC,GAQjD,IAAU,EAAK,KAAK,SAAS,gBAC/B,gBACA,EAAqB,EAAK,KAAK,MAAM,aAAa,GAChD,IAAY,EAAqB,EAAK,KAAK,cAAc,EAAK,KAAK,OAAO,SAAS;AACzF,aACE,gBAAA,EAAC,OAAD;AAAA,QAEE,WAAU;AAAA,QACV,mBAAiB,EAAK;AAAA,QACtB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAO,EAAK;AAAA,UACZ,QAAQ,EAAK;AAAA,UAGb,WAAW,SAAS,CAAA;AAAA,UACpB,iBAAiB;AAAA,UAEjB,eAAe;AAAA,QACjB;AAAA,kBAEA,gBAAA,EAAC,OAAD;AAAA,UACE,WAAU;AAAA,UACV,SAAA,CAAU,MAAM,EAAE,gBAAgB;AAAA,UAClC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,OAAO;AAAA,UACT;AAAA,oBAEA,gBAAA,EAAC,GAAD;AAAA,YAAU,UAAU,gBAAA,EAAC,OAAD;AAAA,cAAK,WAAU;AAAA,wBAAqB;AAAA,YAAM,CAAA;AAAA,sBAC5D,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,cAAoB,MAAA;AAAA,cAAmB,aAAA;AAAA,YAAc,CAAA,EACnC,CAAA;AAAA,UACZ,CAAA;AAAA,QACP,CAAA;AAAA,MACF,GA/BE,EAAK,EA+BP;AAAA,IAET,CAAC;AAAA,EACE,CAAA;AAET"}