markdown-flow-ui 0.1.82 → 0.1.83-beta.0

package/dist/components/ContentRender/SandboxApp.js

@@ -0,0 +1,181 @@
+import { j as v } from "../../_virtual/jsx-runtime.js";
+import { useRef as n, useState as E, useEffect as S } from "react";
+import X from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+const re = ({
+  html: u,
+  loadingText: W,
+  styleLoadingText: q,
+  scriptLoadingText: z,
+  fullScreenButtonText: H,
+  resetToken: f = 0
+}) => {
+  const A = n(null), C = n(null), [V, I] = E(!0), [_, w] = E(!1), [O, b] = E(!1), [Q, k] = E(!1), R = n([]), F = n([]), N = n(0), T = n(0), p = n(null), d = n(null), m = n(!1), h = n(!1), L = n(!1), j = n(f), J = 200, o = (e) => {
+    e.current && (clearTimeout(e.current), e.current = null);
+  }, M = (e, s, c, g) => {
+    const i = performance.now() - c.current, x = Math.max(0, J - i);
+    o(s), s.current = window.setTimeout(() => {
+      e(!1), g?.(), s.current = null;
+    }, x);
+  };
+  S(() => {
+    const e = () => {
+      k(!!document.fullscreenElement);
+    };
+    return document.addEventListener("fullscreenchange", e), () => {
+      document.removeEventListener("fullscreenchange", e);
+    };
+  }, []), S(() => {
+    const e = C.current?.ownerDocument;
+    if (!e) return;
+    const s = "sandbox-spinner-style";
+    let c = e.getElementById(s);
+    c || (c = e.createElement("style"), c.id = s, c.textContent = "@keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }", e.head?.appendChild(c));
+  }, []), S(() => {
+    f !== j.current && (L.current = !1, j.current = f), o(p), o(d), m.current = !1, h.current = !1;
+    const e = C.current;
+    if (!e) return;
+    const s = e.ownerDocument, c = s?.body;
+    if (!c) return;
+    R.current.forEach((t) => t.remove()), R.current = [], F.current.forEach((t) => t.remove()), F.current = [];
+    const g = L.current;
+    I(!g), w(!1), b(!1), e.innerHTML = "";
+    const i = document.createElement("div");
+    i.innerHTML = u;
+    const x = (u.match(/<script[\s>]/gi) || []).length, K = (u.match(/<\/script>/gi) || []).length, P = x > 0 && x === K, l = [];
+    Array.from(i.querySelectorAll("style, script")).forEach((t) => {
+      if (t.tagName.toLowerCase() === "style") {
+        const r = s.createElement("style");
+        r.textContent = t.textContent || "", Array.from(t.attributes).forEach((a) => {
+          r.setAttribute(a.name, a.value);
+        }), l.push(r);
+      } else {
+        const r = s.createElement("script");
+        Array.from(t.attributes).forEach((a) => {
+          r.setAttribute(a.name, a.value);
+        }), r.textContent = t.textContent || "", l.push(r);
+      }
+      t.remove();
+    });
+    const D = l.some(
+      (t) => t.tagName.toLowerCase() === "style"
+    ), B = l.some(
+      (t) => t.tagName.toLowerCase() === "script"
+    );
+    D && (m.current = !0, N.current = performance.now(), o(p), w(!0)), B && (h.current = !0, T.current = performance.now(), o(d), b(!0));
+    const G = !!i.firstElementChild;
+    I(!G && !g), G && (L.current = !0);
+    const U = Array.from(i.childNodes);
+    e.append(...U), l.forEach((t) => {
+      if (t.tagName.toLowerCase() === "style") {
+        s.head?.appendChild(t), R.current.push(t);
+        return;
+      }
+      if (P) {
+        const r = t, a = r.textContent || "";
+        if (!r.src)
+          try {
+            new Function(a);
+          } catch {
+            r.remove();
+            return;
+          }
+        try {
+          c.appendChild(r), F.current.push(r);
+        } catch {
+          r.remove();
+        }
+      } else
+        t.remove();
+    }), requestAnimationFrame(() => {
+      D && M(
+        w,
+        p,
+        N,
+        () => {
+          m.current = !1;
+        }
+      ), B && M(
+        b,
+        d,
+        T,
+        () => {
+          h.current = !1;
+        }
+      );
+    });
+  }, [u, f]), S(
+    () => () => {
+      o(p), o(d);
+    },
+    []
+  );
+  const y = O || h.current ? z || "Building scripts cache..." : _ || m.current ? q || "Building styles..." : V ? W || "Loading..." : null;
+  return console.log(
+    "fullScreenButtonText",
+    H,
+    Q,
+    () => {
+      const e = A.current;
+      if (e) {
+        if (!document.fullscreenElement) {
+          e.requestFullscreen?.().catch(() => {
+          });
+          return;
+        }
+        document.exitFullscreen?.();
+      }
+    }
+  ), /* @__PURE__ */ v.jsxs(
+    "div",
+    {
+      ref: A,
+      style: { position: "relative", minHeight: 120 },
+      "aria-busy": !!y,
+      children: [
+        /* @__PURE__ */ v.jsx(
+          "div",
+          {
+            ref: C,
+            style: {
+              pointerEvents: y ? "none" : void 0
+            }
+          }
+        ),
+        y && /* @__PURE__ */ v.jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(51, 51, 51, 0.80)",
+              color: "#ffffff",
+              fontSize: 16,
+              fontWeight: 700,
+              gap: 10,
+              pointerEvents: "auto",
+              zIndex: 20
+            },
+            children: [
+              /* @__PURE__ */ v.jsx(
+                X,
+                {
+                  "aria-hidden": !0,
+                  size: 20,
+                  style: { animation: "sandbox-spin 1s linear infinite" }
+                }
+              ),
+              y
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  re as default
+};
+//# sourceMappingURL=SandboxApp.js.map

package/dist/components/ContentRender/SandboxApp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SandboxApp.js","sources":["../../../src/components/ContentRender/SandboxApp.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nexport interface SandboxAppProps {\n  html: string;\n  loadingText?: string;\n  styleLoadingText?: string;\n  scriptLoadingText?: string;\n  fullScreenButtonText?: string;\n  resetToken?: number;\n}\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({\n  html,\n  loadingText,\n  styleLoadingText,\n  scriptLoadingText,\n  fullScreenButtonText,\n  resetToken = 0,\n}) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isWaitingFirstDiv, setIsWaitingFirstDiv] = useState(true);\n  const [isGeneratingStyles, setIsGeneratingStyles] = useState(false);\n  const [isGeneratingScripts, setIsGeneratingScripts] = useState(false);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n  const appendedStylesRef = useRef<HTMLStyleElement[]>([]);\n  const appendedScriptsRef = useRef<HTMLScriptElement[]>([]);\n  const styleStartRef = useRef(0);\n  const scriptStartRef = useRef(0);\n  const styleTimerRef = useRef<number | null>(null);\n  const scriptTimerRef = useRef<number | null>(null);\n  const hasStylesRef = useRef(false);\n  const hasScriptsRef = useRef(false);\n  const hasRenderedContentRef = useRef(false);\n  const prevResetTokenRef = useRef(resetToken);\n  const MIN_LOADING_MS = 200;\n\n  const clearTimer = (timerRef: React.MutableRefObject<number | null>) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  const settleStateWithMinimumDelay = (\n    setter: React.Dispatch<React.SetStateAction<boolean>>,\n    timerRef: React.MutableRefObject<number | null>,\n    startRef: React.MutableRefObject<number>,\n    onDone?: () => void\n  ) => {\n    const elapsed = performance.now() - startRef.current;\n    const delay = Math.max(0, MIN_LOADING_MS - elapsed);\n    clearTimer(timerRef);\n    timerRef.current = window.setTimeout(() => {\n      setter(false);\n      onDone?.();\n      timerRef.current = null;\n    }, delay);\n  };\n\n  useEffect(() => {\n    const onFullscreenChange = () => {\n      setIsFullscreen(!!document.fullscreenElement);\n    };\n    document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n    return () => {\n      document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n    };\n  }, []);\n\n  useEffect(() => {\n    const doc = containerRef.current?.ownerDocument;\n    if (!doc) return;\n    const styleId = \"sandbox-spinner-style\";\n    let styleEl = doc.getElementById(styleId) as HTMLStyleElement | null;\n    if (!styleEl) {\n      styleEl = doc.createElement(\"style\");\n      styleEl.id = styleId;\n      styleEl.textContent =\n        \"@keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }\";\n      doc.head?.appendChild(styleEl);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (resetToken !== prevResetTokenRef.current) {\n      hasRenderedContentRef.current = false;\n      prevResetTokenRef.current = resetToken;\n    }\n    clearTimer(styleTimerRef);\n    clearTimer(scriptTimerRef);\n    hasStylesRef.current = false;\n    hasScriptsRef.current = false;\n\n    const container = containerRef.current;\n    if (!container) return;\n    const doc = container.ownerDocument;\n    const body = doc?.body;\n    if (!body) return;\n\n    appendedStylesRef.current.forEach((node) => node.remove());\n    appendedStylesRef.current = [];\n    appendedScriptsRef.current.forEach((node) => node.remove());\n    appendedScriptsRef.current = [];\n\n    const hasRenderedBefore = hasRenderedContentRef.current;\n    setIsWaitingFirstDiv(!hasRenderedBefore);\n    setIsGeneratingStyles(false);\n    setIsGeneratingScripts(false);\n    container.innerHTML = \"\";\n    const wrapper = document.createElement(\"div\");\n    wrapper.innerHTML = html;\n\n    const openScriptCount = (html.match(/<script[\\s>]/gi) || []).length;\n    const closeScriptCount = (html.match(/<\\/script>/gi) || []).length;\n    const shouldExecuteScripts =\n      openScriptCount > 0 && openScriptCount === closeScriptCount;\n\n    const resourceQueue: HTMLElement[] = [];\n\n    Array.from(wrapper.querySelectorAll(\"style, script\")).forEach((node) => {\n      if (node.tagName.toLowerCase() === \"style\") {\n        const cloned = doc.createElement(\"style\");\n        cloned.textContent = node.textContent || \"\";\n        Array.from(node.attributes).forEach((attr) => {\n          cloned.setAttribute(attr.name, attr.value);\n        });\n        resourceQueue.push(cloned);\n      } else {\n        const replacement = doc.createElement(\"script\");\n        Array.from(node.attributes).forEach((attr) => {\n          replacement.setAttribute(attr.name, attr.value);\n        });\n        replacement.textContent = node.textContent || \"\";\n        resourceQueue.push(replacement);\n      }\n      node.remove();\n    });\n\n    const hasStyles = resourceQueue.some(\n      (node) => node.tagName.toLowerCase() === \"style\"\n    );\n    const hasScripts = resourceQueue.some(\n      (node) => node.tagName.toLowerCase() === \"script\"\n    );\n    if (hasStyles) {\n      hasStylesRef.current = true;\n      styleStartRef.current = performance.now();\n      clearTimer(styleTimerRef);\n      setIsGeneratingStyles(true);\n    }\n    if (hasScripts) {\n      hasScriptsRef.current = true;\n      scriptStartRef.current = performance.now();\n      clearTimer(scriptTimerRef);\n      setIsGeneratingScripts(true);\n    }\n\n    const hasFirstElement = !!wrapper.firstElementChild;\n    setIsWaitingFirstDiv(!hasFirstElement && !hasRenderedBefore);\n    if (hasFirstElement) {\n      hasRenderedContentRef.current = true;\n    }\n\n    const contentNodes = Array.from(wrapper.childNodes);\n    container.append(...contentNodes);\n\n    resourceQueue.forEach((node) => {\n      if (node.tagName.toLowerCase() === \"style\") {\n        doc.head?.appendChild(node);\n        appendedStylesRef.current.push(node as HTMLStyleElement);\n        return;\n      }\n\n      if (shouldExecuteScripts) {\n        const scriptNode = node as HTMLScriptElement;\n        const scriptText = scriptNode.textContent || \"\";\n        const shouldValidate = !scriptNode.src;\n\n        if (shouldValidate) {\n          try {\n            // Validate script is syntactically complete before executing\n\n            new Function(scriptText);\n          } catch {\n            scriptNode.remove();\n            return;\n          }\n        }\n\n        try {\n          body.appendChild(scriptNode);\n          appendedScriptsRef.current.push(scriptNode);\n        } catch {\n          scriptNode.remove();\n        }\n      } else {\n        // Defer execution until all script tags are fully received\n        node.remove();\n      }\n    });\n    requestAnimationFrame(() => {\n      if (hasStyles) {\n        settleStateWithMinimumDelay(\n          setIsGeneratingStyles,\n          styleTimerRef,\n          styleStartRef,\n          () => {\n            hasStylesRef.current = false;\n          }\n        );\n      }\n      if (hasScripts) {\n        settleStateWithMinimumDelay(\n          setIsGeneratingScripts,\n          scriptTimerRef,\n          scriptStartRef,\n          () => {\n            hasScriptsRef.current = false;\n          }\n        );\n      }\n    });\n  }, [html, resetToken]);\n\n  useEffect(\n    () => () => {\n      clearTimer(styleTimerRef);\n      clearTimer(scriptTimerRef);\n    },\n    []\n  );\n\n  const overlayMessage = (() => {\n    if (isGeneratingScripts || hasScriptsRef.current)\n      return scriptLoadingText || \"Building scripts cache...\";\n    if (isGeneratingStyles || hasStylesRef.current)\n      return styleLoadingText || \"Building styles...\";\n    if (isWaitingFirstDiv) return loadingText || \"Loading...\";\n    return null;\n  })();\n\n  const handleToggleFullscreen = () => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    if (!document.fullscreenElement) {\n      wrapper.requestFullscreen?.().catch(() => {});\n      return;\n    }\n    document.exitFullscreen?.();\n  };\n\n  console.log(\n    \"fullScreenButtonText\",\n    fullScreenButtonText,\n    isFullscreen,\n    handleToggleFullscreen\n  );\n\n  return (\n    <div\n      ref={wrapperRef}\n      style={{ position: \"relative\", minHeight: 120 }}\n      aria-busy={!!overlayMessage}\n    >\n      <div\n        ref={containerRef}\n        style={{\n          pointerEvents: overlayMessage ? \"none\" : undefined,\n        }}\n      />\n      {/* <button\n        type=\"button\"\n        onClick={handleToggleFullscreen}\n        style={{\n          position: \"absolute\",\n          top: 8,\n          right: 8,\n          zIndex: 30,\n          padding: \"6px 10px\",\n          borderRadius: 6,\n          border: \"1px solid #cbd5e1\",\n          background: \"#ffffffcc\",\n          color: \"#0f172a\",\n          fontSize: 12,\n          fontWeight: 600,\n          cursor: \"pointer\",\n          boxShadow: \"0 4px 10px rgba(15, 23, 42, 0.08)\",\n        }}\n      >\n        {isFullscreen\n          ? fullScreenButtonText || \"Exit Fullscreen\"\n          : fullScreenButtonText || \"Fullscreen\"}\n      </button> */}\n      {overlayMessage && (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            background: \"rgba(51, 51, 51, 0.80)\",\n            color: \"#ffffff\",\n            fontSize: 16,\n            fontWeight: 700,\n            gap: 10,\n            pointerEvents: \"auto\",\n            zIndex: 20,\n          }}\n        >\n          <Loader2\n            aria-hidden\n            size={20}\n            style={{ animation: \"sandbox-spin 1s linear infinite\" }}\n          />\n          {overlayMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default SandboxApp;\n"],"names":["SandboxApp","html","loadingText","styleLoadingText","scriptLoadingText","fullScreenButtonText","resetToken","wrapperRef","useRef","containerRef","isWaitingFirstDiv","setIsWaitingFirstDiv","useState","isGeneratingStyles","setIsGeneratingStyles","isGeneratingScripts","setIsGeneratingScripts","isFullscreen","setIsFullscreen","appendedStylesRef","appendedScriptsRef","styleStartRef","scriptStartRef","styleTimerRef","scriptTimerRef","hasStylesRef","hasScriptsRef","hasRenderedContentRef","prevResetTokenRef","MIN_LOADING_MS","clearTimer","timerRef","settleStateWithMinimumDelay","setter","startRef","onDone","elapsed","delay","useEffect","onFullscreenChange","doc","styleId","styleEl","container","body","node","hasRenderedBefore","wrapper","openScriptCount","closeScriptCount","shouldExecuteScripts","resourceQueue","cloned","attr","replacement","hasStyles","hasScripts","hasFirstElement","contentNodes","scriptNode","scriptText","overlayMessage","jsxs","jsx","Loader2"],"mappings":"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"}

package/dist/components/ContentRender/index.d.ts

@@ -1,5 +1,10 @@
 import { default as ContentRender } from './ContentRender';
 export default ContentRender;
+export { default as IframeSandbox } from './IframeSandbox';
+export type { IframeSandboxProps } from './IframeSandbox';
+export type { SandboxAppProps } from './SandboxApp';
+export type { RenderSegment } from './utils/split-content';
+export { splitContentSegments } from './utils/split-content';
 export { default as ContentRender } from './ContentRender';
 export { default as MarkdownFlowInput } from './MarkdownFlowInput';
 export { default as useTypewriter } from './useTypewriter';

package/dist/components/ContentRender/index.js

@@ -1,7 +1,8 @@
 import o from "./ContentRender.js";
 import "../../_virtual/jsx-runtime.js";
-import "../ui/inputGroup/input-group.js";
 import "react";
+import "react-dom/client";
+import "../ui/inputGroup/input-group.js";
 export {
   o as ContentRender,
   o as default

package/dist/components/ContentRender/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/ContentRender/utils/split-content.d.ts

@@ -0,0 +1,8 @@
+export type RenderSegment = {
+    type: "markdown";
+    value: string;
+} | {
+    type: "sandbox";
+    value: string;
+};
+export declare const splitContentSegments: (raw: string) => RenderSegment[];

package/dist/components/ContentRender/utils/split-content.js

@@ -0,0 +1,35 @@
+const m = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\s>]/i, h = [
+  /<svg[\s\S]*?<\/svg>/i,
+  /<img\b[^>]*?>/i,
+  /```mermaid[\s\S]*?```/i,
+  /```[a-zA-Z0-9]+[\s\S]*?```/i
+], d = /<\/[a-z][^>]*>\s*\n(?=[^\s<])/gi, u = (e, n) => {
+  let s = e.length, t;
+  for (d.lastIndex = 0; t = d.exec(e); )
+    if (!(t.index <= n)) {
+      s = t.index + t[0].length;
+      break;
+    }
+  return s;
+}, x = (e) => {
+  let n = null;
+  return h.forEach((s) => {
+    const t = s.exec(e);
+    if (!t || typeof t.index != "number") return;
+    const i = t.index, c = t.index + t[0].length;
+    (!n || i < n.start) && (n = { start: i, end: c });
+  }), n;
+}, f = (e) => {
+  const n = e.search(m), s = x(e);
+  if (n === -1 && !s)
+    return [{ type: "markdown", value: e }];
+  const t = !!s && (n === -1 || s.start < n), i = t ? s.start : n, c = t ? s.end : u(e, i), o = [], l = e.slice(0, i), r = e.slice(i, c), a = e.slice(c);
+  return l.trim() && o.push({ type: "markdown", value: l }), o.push({
+    type: t ? "markdown" : "sandbox",
+    value: r
+  }), a.trim() && o.push(...f(a)), console.log("segments", o), o;
+};
+export {
+  f as splitContentSegments
+};
+//# sourceMappingURL=split-content.js.map

package/dist/components/ContentRender/utils/split-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-content.js","sources":["../../../../src/components/ContentRender/utils/split-content.ts"],"sourcesContent":["export type RenderSegment =\n  | { type: \"markdown\"; value: string }\n  | { type: \"sandbox\"; value: string };\n\nconst SANDBOX_START_PATTERN =\n  /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\\s>]/i;\n\nconst INLINE_SANDBOX_PATTERNS: RegExp[] = [\n  /<svg[\\s\\S]*?<\\/svg>/i,\n  /<img\\b[^>]*?>/i,\n  /```mermaid[\\s\\S]*?```/i,\n  /```[a-zA-Z0-9]+[\\s\\S]*?```/i,\n];\n\nconst closingBoundary = /<\\/[a-z][^>]*>\\s*\\n(?=[^\\s<])/gi;\n\ntype MatchResult = { start: number; end: number };\n\nconst findHtmlBlockEnd = (raw: string, startIndex: number) => {\n  let blockEnd = raw.length;\n  let match: RegExpExecArray | null;\n  closingBoundary.lastIndex = 0;\n\n  while ((match = closingBoundary.exec(raw))) {\n    if (match.index <= startIndex) continue;\n    blockEnd = match.index + match[0].length;\n    break;\n  }\n\n  return blockEnd;\n};\n\nconst findInlineSandboxMatch = (raw: string): MatchResult | null => {\n  let earliest: MatchResult | null = null;\n\n  INLINE_SANDBOX_PATTERNS.forEach((pattern) => {\n    const match = pattern.exec(raw);\n    if (!match || typeof match.index !== \"number\") return;\n    const start = match.index;\n    const end = match.index + match[0].length;\n\n    if (!earliest || start < earliest.start) {\n      earliest = { start, end };\n    }\n  });\n\n  return earliest;\n};\n\n// Split incoming markdown content into markdown and sandbox HTML segments\nexport const splitContentSegments = (raw: string): RenderSegment[] => {\n  const sandboxStartIndex = raw.search(SANDBOX_START_PATTERN);\n  const inlineMatch = findInlineSandboxMatch(raw);\n\n  if (sandboxStartIndex === -1 && !inlineMatch) {\n    return [{ type: \"markdown\", value: raw }];\n  }\n\n  const shouldUseInline =\n    !!inlineMatch &&\n    (sandboxStartIndex === -1 || inlineMatch.start < sandboxStartIndex);\n\n  const startIndex = shouldUseInline ? inlineMatch!.start : sandboxStartIndex;\n  const blockEnd = shouldUseInline\n    ? inlineMatch!.end\n    : findHtmlBlockEnd(raw, startIndex);\n\n  const segments: RenderSegment[] = [];\n  const before = raw.slice(0, startIndex);\n  const htmlBlock = raw.slice(startIndex, blockEnd);\n  const after = raw.slice(blockEnd);\n\n  if (before.trim()) {\n    segments.push({ type: \"markdown\", value: before });\n  }\n\n  segments.push({\n    type: shouldUseInline ? \"markdown\" : \"sandbox\",\n    value: htmlBlock,\n  });\n\n  if (after.trim()) {\n    segments.push(...splitContentSegments(after));\n  }\n  console.log(\"segments\", segments);\n  return segments;\n};\n"],"names":["SANDBOX_START_PATTERN","INLINE_SANDBOX_PATTERNS","closingBoundary","findHtmlBlockEnd","raw","startIndex","blockEnd","match","findInlineSandboxMatch","earliest","pattern","start","end","splitContentSegments","sandboxStartIndex","inlineMatch","shouldUseInline","segments","before","htmlBlock","after"],"mappings":"AAIA,MAAMA,IACJ,sGAEIC,IAAoC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAkB,mCAIlBC,IAAmB,CAACC,GAAaC,MAAuB;AAC5D,MAAIC,IAAWF,EAAI,QACfG;AAGJ,OAFAL,EAAgB,YAAY,GAEpBK,IAAQL,EAAgB,KAAKE,CAAG;AACtC,QAAI,EAAAG,EAAM,SAASF,IACnB;AAAA,MAAAC,IAAWC,EAAM,QAAQA,EAAM,CAAC,EAAE;AAClC;AAAA;AAGF,SAAOD;AACT,GAEME,IAAyB,CAACJ,MAAoC;AAClE,MAAIK,IAA+B;AAEnC,SAAAR,EAAwB,QAAQ,CAACS,MAAY;AAC3C,UAAMH,IAAQG,EAAQ,KAAKN,CAAG;AAC9B,QAAI,CAACG,KAAS,OAAOA,EAAM,SAAU,SAAU;AAC/C,UAAMI,IAAQJ,EAAM,OACdK,IAAML,EAAM,QAAQA,EAAM,CAAC,EAAE;AAEnC,KAAI,CAACE,KAAYE,IAAQF,EAAS,WAChCA,IAAW,EAAE,OAAAE,GAAO,KAAAC,EAAA;AAAA,EAExB,CAAC,GAEMH;AACT,GAGaI,IAAuB,CAACT,MAAiC;AACpE,QAAMU,IAAoBV,EAAI,OAAOJ,CAAqB,GACpDe,IAAcP,EAAuBJ,CAAG;AAE9C,MAAIU,MAAsB,MAAM,CAACC;AAC/B,WAAO,CAAC,EAAE,MAAM,YAAY,OAAOX,GAAK;AAG1C,QAAMY,IACJ,CAAC,CAACD,MACDD,MAAsB,MAAMC,EAAY,QAAQD,IAE7CT,IAAaW,IAAkBD,EAAa,QAAQD,GACpDR,IAAWU,IACbD,EAAa,MACbZ,EAAiBC,GAAKC,CAAU,GAE9BY,IAA4B,CAAA,GAC5BC,IAASd,EAAI,MAAM,GAAGC,CAAU,GAChCc,IAAYf,EAAI,MAAMC,GAAYC,CAAQ,GAC1Cc,IAAQhB,EAAI,MAAME,CAAQ;AAEhC,SAAIY,EAAO,UACTD,EAAS,KAAK,EAAE,MAAM,YAAY,OAAOC,GAAQ,GAGnDD,EAAS,KAAK;AAAA,IACZ,MAAMD,IAAkB,aAAa;AAAA,IACrC,OAAOG;AAAA,EAAA,CACR,GAEGC,EAAM,UACRH,EAAS,KAAK,GAAGJ,EAAqBO,CAAK,CAAC,GAE9C,QAAQ,IAAI,YAAYH,CAAQ,GACzBA;AACT;"}

package/dist/components/MarkdownFlow/MarkdownFlow.js

@@ -1,9 +1,10 @@
 import { j as o } from "../../_virtual/jsx-runtime.js";
 import B from "../ContentRender/ContentRender.js";
-import "../ui/inputGroup/input-group.js";
 import "react";
+import "react-dom/client";
+import "../ui/inputGroup/input-group.js";
 /* empty css                 */
-const b = ({
+const h = ({
   initialContentList: a = [],
   customRenderBar: d,
   onSend: n,
@@ -42,6 +43,6 @@ const b = ({
   );
 }) });
 export {
-  b as default
+  h as default
 };
 //# sourceMappingURL=MarkdownFlow.js.map

package/dist/components/MarkdownFlow/MarkdownFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownFlow.js","sources":["../../../src/components/MarkdownFlow/MarkdownFlow.tsx"],"sourcesContent":["import React from \"react\";\nimport ContentRender from \"../ContentRender\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./markdownFlow.css\";\n\nexport interface MarkdownFlowProps {\n  initialContentList?: {\n    content: string;\n    isFinished?: boolean;\n    defaultInputText?: string;\n    defaultButtonText?: string;\n    defaultSelectedValues?: string[];\n    readonly?: boolean;\n    customRenderBar?: CustomRenderBarProps;\n    onClickCustomButtonAfterContent?: () => void;\n    dynamicInteractionFormat?: string;\n  }[];\n  customRenderBar?: CustomRenderBarProps;\n  onSend?: (content: OnSendContentParams) => void;\n  typingSpeed?: number;\n  enableTypewriter?: boolean;\n  onBlockComplete?: (blockIndex: number) => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text for code blocks\n  copyButtonText?: string;\n  // Copied state text for code blocks\n  copiedButtonText?: string;\n  beforeSend?: (content: OnSendContentParams) => boolean;\n}\n\nconst MarkdownFlow: React.FC<MarkdownFlowProps> = ({\n  initialContentList = [],\n  customRenderBar,\n  onSend: onSendProp,\n  typingSpeed: typingSpeedProp,\n  enableTypewriter = false,\n  onBlockComplete,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  beforeSend: beforeSendProp,\n}) => {\n  return (\n    <div className=\"markdown-flow\">\n      {initialContentList.map((contentInfo, index) => {\n        const isFinished = contentInfo.isFinished ?? false;\n        const enableTypewriterForBlock = !isFinished && enableTypewriter;\n        const onSend = isFinished ? undefined : onSendProp;\n        const typingSpeed = isFinished ? undefined : typingSpeedProp;\n        const beforeSend = beforeSendProp ?? (() => true);\n        return (\n          <ContentRender\n            key={index}\n            content={contentInfo.content}\n            defaultInputText={contentInfo.defaultInputText}\n            defaultButtonText={contentInfo.defaultButtonText}\n            defaultSelectedValues={contentInfo.defaultSelectedValues}\n            readonly={contentInfo.readonly}\n            enableTypewriter={enableTypewriterForBlock}\n            customRenderBar={contentInfo.customRenderBar || customRenderBar}\n            onSend={onSend}\n            beforeSend={beforeSend}\n            onClickCustomButtonAfterContent={\n              contentInfo.onClickCustomButtonAfterContent\n            }\n            typingSpeed={typingSpeed}\n            confirmButtonText={confirmButtonText}\n            copyButtonText={copyButtonText}\n            copiedButtonText={copiedButtonText}\n            dynamicInteractionFormat={contentInfo.dynamicInteractionFormat}\n            onTypeFinished={() => {\n              onBlockComplete?.(index);\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MarkdownFlow;\n"],"names":["MarkdownFlow","initialContentList","customRenderBar","onSendProp","typingSpeedProp","enableTypewriter","onBlockComplete","confirmButtonText","copyButtonText","copiedButtonText","beforeSendProp","jsx","contentInfo","index","isFinished","enableTypewriterForBlock","onSend","typingSpeed","beforeSend","ContentRender"],"mappings":";;;;;AA+BA,MAAMA,IAA4C,CAAC;AAAA,EACjD,oBAAAC,IAAqB,CAAA;AAAA,EACrB,iBAAAC;AAAA,EACA,QAAQC;AAAA,EACR,aAAaC;AAAA,EACb,kBAAAC,IAAmB;AAAA,EACnB,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAYC;AACd,MAEIC,gBAAAA,MAAC,SAAI,WAAU,iBACZ,YAAmB,IAAI,CAACC,GAAaC,MAAU;AAC9C,QAAMC,IAAaF,EAAY,cAAc,IACvCG,IAA2B,CAACD,KAAcT,GAC1CW,IAASF,IAAa,SAAYX,GAClCc,IAAcH,IAAa,SAAYV,GACvCc,IAAaR,MAAmB,MAAM;AAC5C,SACEC,gBAAAA,EAAAA;AAAAA,IAACQ;AAAA,IAAA;AAAA,MAEC,SAASP,EAAY;AAAA,MACrB,kBAAkBA,EAAY;AAAA,MAC9B,mBAAmBA,EAAY;AAAA,MAC/B,uBAAuBA,EAAY;AAAA,MACnC,UAAUA,EAAY;AAAA,MACtB,kBAAkBG;AAAA,MAClB,iBAAiBH,EAAY,mBAAmBV;AAAA,MAChD,QAAAc;AAAA,MACA,YAAAE;AAAA,MACA,iCACEN,EAAY;AAAA,MAEd,aAAAK;AAAA,MACA,mBAAAV;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,0BAA0BG,EAAY;AAAA,MACtC,gBAAgB,MAAM;AACpB,QAAAN,IAAkBO,CAAK;AAAA,MACzB;AAAA,IAAA;AAAA,IApBKA;AAAA,EAAA;AAuBX,CAAC,EAAA,CACH;"}
+{"version":3,"file":"MarkdownFlow.js","sources":["../../../src/components/MarkdownFlow/MarkdownFlow.tsx"],"sourcesContent":["import React from \"react\";\nimport ContentRender from \"../ContentRender\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./markdownFlow.css\";\n\nexport interface MarkdownFlowProps {\n  initialContentList?: {\n    content: string;\n    isFinished?: boolean;\n    defaultInputText?: string;\n    defaultButtonText?: string;\n    defaultSelectedValues?: string[];\n    readonly?: boolean;\n    customRenderBar?: CustomRenderBarProps;\n    onClickCustomButtonAfterContent?: () => void;\n    dynamicInteractionFormat?: string;\n  }[];\n  customRenderBar?: CustomRenderBarProps;\n  onSend?: (content: OnSendContentParams) => void;\n  typingSpeed?: number;\n  enableTypewriter?: boolean;\n  onBlockComplete?: (blockIndex: number) => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text for code blocks\n  copyButtonText?: string;\n  // Copied state text for code blocks\n  copiedButtonText?: string;\n  beforeSend?: (content: OnSendContentParams) => boolean;\n}\n\nconst MarkdownFlow: React.FC<MarkdownFlowProps> = ({\n  initialContentList = [],\n  customRenderBar,\n  onSend: onSendProp,\n  typingSpeed: typingSpeedProp,\n  enableTypewriter = false,\n  onBlockComplete,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  beforeSend: beforeSendProp,\n}) => {\n  return (\n    <div className=\"markdown-flow\">\n      {initialContentList.map((contentInfo, index) => {\n        const isFinished = contentInfo.isFinished ?? false;\n        const enableTypewriterForBlock = !isFinished && enableTypewriter;\n        const onSend = isFinished ? undefined : onSendProp;\n        const typingSpeed = isFinished ? undefined : typingSpeedProp;\n        const beforeSend = beforeSendProp ?? (() => true);\n        return (\n          <ContentRender\n            key={index}\n            content={contentInfo.content}\n            defaultInputText={contentInfo.defaultInputText}\n            defaultButtonText={contentInfo.defaultButtonText}\n            defaultSelectedValues={contentInfo.defaultSelectedValues}\n            readonly={contentInfo.readonly}\n            enableTypewriter={enableTypewriterForBlock}\n            customRenderBar={contentInfo.customRenderBar || customRenderBar}\n            onSend={onSend}\n            beforeSend={beforeSend}\n            onClickCustomButtonAfterContent={\n              contentInfo.onClickCustomButtonAfterContent\n            }\n            typingSpeed={typingSpeed}\n            confirmButtonText={confirmButtonText}\n            copyButtonText={copyButtonText}\n            copiedButtonText={copiedButtonText}\n            dynamicInteractionFormat={contentInfo.dynamicInteractionFormat}\n            onTypeFinished={() => {\n              onBlockComplete?.(index);\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MarkdownFlow;\n"],"names":["MarkdownFlow","initialContentList","customRenderBar","onSendProp","typingSpeedProp","enableTypewriter","onBlockComplete","confirmButtonText","copyButtonText","copiedButtonText","beforeSendProp","jsx","contentInfo","index","isFinished","enableTypewriterForBlock","onSend","typingSpeed","beforeSend","ContentRender"],"mappings":";;;;;;AA+BA,MAAMA,IAA4C,CAAC;AAAA,EACjD,oBAAAC,IAAqB,CAAA;AAAA,EACrB,iBAAAC;AAAA,EACA,QAAQC;AAAA,EACR,aAAaC;AAAA,EACb,kBAAAC,IAAmB;AAAA,EACnB,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAYC;AACd,MAEIC,gBAAAA,MAAC,SAAI,WAAU,iBACZ,YAAmB,IAAI,CAACC,GAAaC,MAAU;AAC9C,QAAMC,IAAaF,EAAY,cAAc,IACvCG,IAA2B,CAACD,KAAcT,GAC1CW,IAASF,IAAa,SAAYX,GAClCc,IAAcH,IAAa,SAAYV,GACvCc,IAAaR,MAAmB,MAAM;AAC5C,SACEC,gBAAAA,EAAAA;AAAAA,IAACQ;AAAA,IAAA;AAAA,MAEC,SAASP,EAAY;AAAA,MACrB,kBAAkBA,EAAY;AAAA,MAC9B,mBAAmBA,EAAY;AAAA,MAC/B,uBAAuBA,EAAY;AAAA,MACnC,UAAUA,EAAY;AAAA,MACtB,kBAAkBG;AAAA,MAClB,iBAAiBH,EAAY,mBAAmBV;AAAA,MAChD,QAAAc;AAAA,MACA,YAAAE;AAAA,MACA,iCACEN,EAAY;AAAA,MAEd,aAAAK;AAAA,MACA,mBAAAV;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,0BAA0BG,EAAY;AAAA,MACtC,gBAAgB,MAAM;AACpB,QAAAN,IAAkBO,CAAK;AAAA,MACzB;AAAA,IAAA;AAAA,IApBKA;AAAA,EAAA;AAuBX,CAAC,EAAA,CACH;"}

package/dist/components/ui/inputGroup/textarea.js

@@ -1,7 +1,7 @@
 import { j as i } from "../../../_virtual/jsx-runtime.js";
 import * as d from "react";
 import n from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/TextArea.js";
-import "../../../_virtual/index4.js";
+import "../../../_virtual/index3.js";
 import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-resize-observer@1.4.3_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-resize-observer/es/index.js";
 import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useLayoutEffect.js";
 import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/raf.js";

package/dist/index.js

@@ -1,14 +1,18 @@
-import { default as d } from "./components/MarkdownFlowEditor/MarkdownFlowEditor.js";
-import { default as p } from "./components/MarkdownFlow/MarkdownFlow.js";
+import { default as f } from "./components/MarkdownFlowEditor/MarkdownFlowEditor.js";
+import { default as m } from "./components/MarkdownFlow/MarkdownFlow.js";
 import "./_virtual/jsx-runtime.js";
 import "react";
 /* empty css                                         */
-import { default as m } from "./components/ContentRender/ContentRender.js";
-import { default as w } from "./components/ContentRender/MarkdownFlowInput.js";
+import { default as p } from "./components/ContentRender/ContentRender.js";
+import { default as s } from "./components/ContentRender/IframeSandbox.js";
+import { splitContentSegments as u } from "./components/ContentRender/utils/split-content.js";
+import { default as i } from "./components/ContentRender/MarkdownFlowInput.js";
 export {
-  m as ContentRender,
-  p as MarkdownFlow,
-  d as MarkdownFlowEditor,
-  w as MarkdownFlowInput
+  p as ContentRender,
+  s as IframeSandbox,
+  m as MarkdownFlow,
+  f as MarkdownFlowEditor,
+  i as MarkdownFlowInput,
+  u as splitContentSegments
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/markdown-flow-ui-lib.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-space-x-reverse:0}}}@layer theme{:root,:host{--font-sans:"PingFang SC",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-border:var(--border);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:#e2e8f0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 2px var(--color-primary)}@supports (color:color-mix(in lab, red, red)){:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary)10%,transparent)}}.font-mono{font-feature-settings:"liga" 0,"clig" 0,"calt" 0}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-\[50\%\]{top:50%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.left-3{left:calc(var(--spacing)*3)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-50{z-index:50}.order-first{order:-9999}.order-last{order:9999}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-4{margin-block:calc(var(--spacing)*4)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-\[9px\]{margin-top:9px}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-\[2px\]{margin-bottom:2px}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-48{height:calc(var(--spacing)*48)}.h-auto{height:auto}.h-full{height:100%}.max-h-\[300px\]{max-height:300px}.min-h-\[32px\]{min-height:32px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-24{width:calc(var(--spacing)*24)}.w-72{width:calc(var(--spacing)*72)}.w-\[360px\]{width:360px}.w-\[1024px\]{width:1024px}.w-auto{width:auto}.w-full{width:100%}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[300px\]{min-width:300px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.cursor-wait{cursor:wait}.resize{resize:both}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.auto-rows-min{grid-auto-rows:min-content}.grid-rows-\[20px_1fr_20px\]{grid-template-rows:20px 1fr 20px}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-16{gap:calc(var(--spacing)*16)}.gap-\[24px\]{gap:24px}.gap-\[32px\]{gap:32px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}.gap-x-6{column-gap:calc(var(--spacing)*6)}.gap-y-\[9px\]{row-gap:9px}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#e5e5e5\]{border-color:#e5e5e5}.border-black\/\[\.08\]{border-color:#00000014}@supports (color:color-mix(in lab, red, red)){.border-black\/\[\.08\]{border-color:color-mix(in oklab,var(--color-black)8%,transparent)}}.border-blue-600{border-color:var(--color-blue-600)}.border-border{border-color:var(--color-border)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-muted{border-color:var(--color-muted)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-transparent{border-color:#0000}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab, red, red)){.border-white\/40{border-color:color-mix(in oklab,var(--color-white)40%,transparent)}}.bg-\[\#111\]{background-color:#111}.bg-\[\#D7D7D7\]{background-color:#d7d7d7}.bg-accent{background-color:var(--color-accent)}.bg-background,.bg-background\/80{background-color:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab,var(--color-background)80%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/\[\.05\]{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.bg-black\/\[\.05\]{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-foreground{background-color:var(--color-foreground)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-muted\/10{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/10{background-color:color-mix(in oklab,var(--color-muted)10%,transparent)}}.bg-muted\/40{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab,var(--color-muted)40%,transparent)}}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.fill-\[\#111\]{fill:#111}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing)*0)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-0{padding-right:calc(var(--spacing)*0)}.pr-3{padding-right:calc(var(--spacing)*3)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-\[family-name\:var\(--font-geist-mono\)\]{font-family:var(--font-geist-mono)}.font-\[family-name\:var\(--font-geist-sans\)\]{font-family:var(--font-geist-sans)}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/6{font-size:var(--text-sm);line-height:calc(var(--spacing)*6)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[16px\]{font-size:16px}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#0A0A0A\]{color:#0a0a0a}.text-background{color:var(--color-background)}.text-foreground{color:var(--color-foreground)}.text-gray-500{color:var(--color-gray-500)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-neutral-900{color:var(--color-neutral-900)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab,var(--color-white)70%,transparent)}}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.italic{font-style:italic}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.05\)\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has(>input) *){padding-top:calc(var(--spacing)*2.5)}.group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has(>input) *){padding-bottom:calc(var(--spacing)*2.5)}.group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled=true] *){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary)}.selection\:bg-primary::selection{background-color:var(--color-primary)}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--color-foreground)}.placeholder\:text-\[rgba\(99\,114\,128\,1\)\]::placeholder{color:#637280}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-\[\#383838\]:hover{background-color:#383838}.hover\:bg-\[\#f2f2f2\]:hover{background-color:#f2f2f2}.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.has-\[\>button\]\:mr-\[-0\.45rem\]:has(>button){margin-right:-.45rem}.has-\[\>button\]\:ml-\[-0\.45rem\]:has(>button){margin-left:-.45rem}.has-\[\>kbd\]\:mr-\[-0\.35rem\]:has(>kbd){margin-right:-.35rem}.has-\[\>kbd\]\:ml-\[-0\.35rem\]:has(>kbd){margin-left:-.35rem}.has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--spacing)*0)}.has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--spacing)*2)}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--color-accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--color-muted-foreground)}@media (min-width:40rem){.sm\:h-12{height:calc(var(--spacing)*12)}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius-lg)}.sm\:p-20{padding:calc(var(--spacing)*20)}.sm\:px-5{padding-inline:calc(var(--spacing)*5)}.sm\:text-left{text-align:left}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media (min-width:48rem){.md\:w-\[158px\]{width:158px}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (prefers-color-scheme:dark){.dark\:border-white\/\[\.145\]{border-color:#ffffff25}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[\.145\]{border-color:color-mix(in oklab,var(--color-white)14.5%,transparent)}}.dark\:bg-transparent{background-color:#0000}.dark\:bg-white\/\[\.06\]{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/\[\.06\]{background-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.dark\:invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.dark\:hover\:bg-\[\#1a1a1a\]:hover{background-color:#1a1a1a}.dark\:hover\:bg-\[\#ccc\]:hover{background-color:#ccc}.dark\:hover\:bg-accent\/50:hover{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--color-accent)50%,transparent)}}}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--spacing)*3)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--spacing)*3)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}.has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--spacing)*3)}.has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--spacing)*3)}.has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has(>[data-align=inline-end])>input{padding-right:calc(var(--spacing)*2)}.has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has(>[data-align=inline-start])>input{padding-left:calc(var(--spacing)*2)}.\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5>svg:not([class*=size-]){width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4>svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.bg-border{background-color:#e2e8f0!important}.section-subtitle{color:#64748bb3;font-size:.75rem;line-height:1}.title-subtitle-container{align-content:flex-start;align-items:baseline;gap:.2rem .4rem;line-height:1.3}.section-title-main{font-size:1.125rem;font-weight:700}.section-title-form{font-size:1rem;font-weight:600;line-height:1.25}}#storybook-root{width:100%}:root{--background:#fff;--foreground:#171717;--primary:#0f63ee;--primary-foreground:#fff;--border:#e2e8f0;--muted:#f8fafc;--muted-foreground:#64748b;--accent:#f5f5f5;--accent-foreground:#0f172a}body{background:var(--background);color:var(--foreground);font-family:PingFang SC,Microsoft YaHei,Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-space-x-reverse:0}}}@layer theme{:root,:host{--font-sans:"PingFang SC",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-border:var(--border);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:#e2e8f0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 2px var(--color-primary)}@supports (color:color-mix(in lab, red, red)){:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary)10%,transparent)}}.font-mono{font-feature-settings:"liga" 0,"clig" 0,"calt" 0}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-\[50\%\]{top:50%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.left-3{left:calc(var(--spacing)*3)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-50{z-index:50}.order-first{order:-9999}.order-last{order:9999}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-4{margin-block:calc(var(--spacing)*4)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-\[9px\]{margin-top:9px}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-\[2px\]{margin-bottom:2px}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-48{height:calc(var(--spacing)*48)}.h-auto{height:auto}.h-full{height:100%}.max-h-\[300px\]{max-height:300px}.min-h-\[32px\]{min-height:32px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-24{width:calc(var(--spacing)*24)}.w-72{width:calc(var(--spacing)*72)}.w-\[360px\]{width:360px}.w-\[1024px\]{width:1024px}.w-auto{width:auto}.w-full{width:100%}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[300px\]{min-width:300px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.cursor-wait{cursor:wait}.resize{resize:both}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.auto-rows-min{grid-auto-rows:min-content}.grid-rows-\[20px_1fr_20px\]{grid-template-rows:20px 1fr 20px}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-16{gap:calc(var(--spacing)*16)}.gap-\[24px\]{gap:24px}.gap-\[32px\]{gap:32px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}.gap-x-6{column-gap:calc(var(--spacing)*6)}.gap-y-\[9px\]{row-gap:9px}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#e5e5e5\]{border-color:#e5e5e5}.border-black\/\[\.08\]{border-color:#00000014}@supports (color:color-mix(in lab, red, red)){.border-black\/\[\.08\]{border-color:color-mix(in oklab,var(--color-black)8%,transparent)}}.border-blue-600{border-color:var(--color-blue-600)}.border-border{border-color:var(--color-border)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-muted{border-color:var(--color-muted)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-transparent{border-color:#0000}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab, red, red)){.border-white\/40{border-color:color-mix(in oklab,var(--color-white)40%,transparent)}}.bg-\[\#111\]{background-color:#111}.bg-\[\#D7D7D7\]{background-color:#d7d7d7}.bg-accent{background-color:var(--color-accent)}.bg-background,.bg-background\/80{background-color:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab,var(--color-background)80%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/\[\.05\]{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.bg-black\/\[\.05\]{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-foreground{background-color:var(--color-foreground)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-muted\/10{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/10{background-color:color-mix(in oklab,var(--color-muted)10%,transparent)}}.bg-muted\/40{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab,var(--color-muted)40%,transparent)}}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.fill-\[\#111\]{fill:#111}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing)*0)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-0{padding-right:calc(var(--spacing)*0)}.pr-3{padding-right:calc(var(--spacing)*3)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-\[family-name\:var\(--font-geist-mono\)\]{font-family:var(--font-geist-mono)}.font-\[family-name\:var\(--font-geist-sans\)\]{font-family:var(--font-geist-sans)}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/6{font-size:var(--text-sm);line-height:calc(var(--spacing)*6)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[16px\]{font-size:16px}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#0A0A0A\]{color:#0a0a0a}.text-background{color:var(--color-background)}.text-foreground{color:var(--color-foreground)}.text-gray-500{color:var(--color-gray-500)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-neutral-900{color:var(--color-neutral-900)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab,var(--color-white)70%,transparent)}}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.italic{font-style:italic}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.05\)\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has(>input) *){padding-top:calc(var(--spacing)*2.5)}.group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has(>input) *){padding-bottom:calc(var(--spacing)*2.5)}.group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled=true] *){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary)}.selection\:bg-primary::selection{background-color:var(--color-primary)}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--color-foreground)}.placeholder\:text-\[rgba\(99\,114\,128\,1\)\]::placeholder{color:#637280}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-\[\#383838\]:hover{background-color:#383838}.hover\:bg-\[\#f2f2f2\]:hover{background-color:#f2f2f2}.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.has-\[\>button\]\:mr-\[-0\.45rem\]:has(>button){margin-right:-.45rem}.has-\[\>button\]\:ml-\[-0\.45rem\]:has(>button){margin-left:-.45rem}.has-\[\>kbd\]\:mr-\[-0\.35rem\]:has(>kbd){margin-right:-.35rem}.has-\[\>kbd\]\:ml-\[-0\.35rem\]:has(>kbd){margin-left:-.35rem}.has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--spacing)*0)}.has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--spacing)*2)}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--color-accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--color-muted-foreground)}@media (min-width:40rem){.sm\:h-12{height:calc(var(--spacing)*12)}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius-lg)}.sm\:p-20{padding:calc(var(--spacing)*20)}.sm\:px-5{padding-inline:calc(var(--spacing)*5)}.sm\:text-left{text-align:left}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media (min-width:48rem){.md\:w-\[158px\]{width:158px}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (prefers-color-scheme:dark){.dark\:border-white\/\[\.145\]{border-color:#ffffff25}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[\.145\]{border-color:color-mix(in oklab,var(--color-white)14.5%,transparent)}}.dark\:bg-transparent{background-color:#0000}.dark\:bg-white\/\[\.06\]{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/\[\.06\]{background-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.dark\:invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.dark\:hover\:bg-\[\#1a1a1a\]:hover{background-color:#1a1a1a}.dark\:hover\:bg-\[\#ccc\]:hover{background-color:#ccc}.dark\:hover\:bg-accent\/50:hover{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--color-accent)50%,transparent)}}}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--spacing)*3)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--spacing)*3)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}.has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--spacing)*3)}.has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--spacing)*3)}.has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has(>[data-align=inline-end])>input{padding-right:calc(var(--spacing)*2)}.has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has(>[data-align=inline-start])>input{padding-left:calc(var(--spacing)*2)}.\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5>svg:not([class*=size-]){width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4>svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.bg-border{background-color:#e2e8f0!important}.section-subtitle{color:#64748bb3;font-size:.75rem;line-height:1}.title-subtitle-container{align-content:flex-start;align-items:baseline;gap:.2rem .4rem;line-height:1.3}.section-title-main{font-size:1.125rem;font-weight:700}.section-title-form{font-size:1rem;font-weight:600;line-height:1.25}}#storybook-root{width:100%}:root{--background:#fff;--foreground:#171717;--primary:#0f63ee;--primary-foreground:#fff;--border:#e2e8f0;--muted:#f8fafc;--muted-foreground:#64748b;--accent:#f5f5f5;--accent-foreground:#0f172a}body{background:var(--background);color:var(--foreground);font-family:PingFang SC,Microsoft YaHei,Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}

package/dist/renderer.d.ts

@@ -1,8 +1,12 @@
 import { default as MarkdownFlow } from './components/MarkdownFlow';
 import { default as ContentRender } from './components/ContentRender';
 import { default as MarkdownFlowInput, MarkdownFlowInputProps } from './components/ContentRender/MarkdownFlowInput';
+import { default as IframeSandbox, IframeSandboxProps } from './components/ContentRender/IframeSandbox';
+import { RenderSegment, splitContentSegments } from './components/ContentRender/utils/split-content';
 import { MarkdownFlowProps } from './components/MarkdownFlow/MarkdownFlow';
 import { ContentRenderProps } from './components/ContentRender/ContentRender';
 import { OnSendContentParams, CustomRenderBarProps } from './components/types';
-export { MarkdownFlow, ContentRender, MarkdownFlowInput };
-export type { OnSendContentParams, CustomRenderBarProps, MarkdownFlowProps, ContentRenderProps, MarkdownFlowInputProps, };
+import { SandboxAppProps } from './components/ContentRender/SandboxApp';
+export default ContentRender;
+export { MarkdownFlow, ContentRender, MarkdownFlowInput, IframeSandbox, splitContentSegments, };
+export type { OnSendContentParams, CustomRenderBarProps, MarkdownFlowProps, ContentRenderProps, MarkdownFlowInputProps, IframeSandboxProps, SandboxAppProps, RenderSegment, };

package/dist/renderer.js

@@ -1,12 +1,17 @@
-import { default as p } from "./components/MarkdownFlow/MarkdownFlow.js";
+import { default as f } from "./components/MarkdownFlow/MarkdownFlow.js";
 import "./_virtual/jsx-runtime.js";
 import "react";
 /* empty css                                         */
-import { default as f } from "./components/ContentRender/ContentRender.js";
-import { default as n } from "./components/ContentRender/MarkdownFlowInput.js";
+import a from "./components/ContentRender/ContentRender.js";
+import { default as d } from "./components/ContentRender/IframeSandbox.js";
+import { splitContentSegments as s } from "./components/ContentRender/utils/split-content.js";
+import { default as i } from "./components/ContentRender/MarkdownFlowInput.js";
 export {
-  f as ContentRender,
-  p as MarkdownFlow,
-  n as MarkdownFlowInput
+  a as ContentRender,
+  d as IframeSandbox,
+  f as MarkdownFlow,
+  i as MarkdownFlowInput,
+  a as default,
+  s as splitContentSegments
 };
 //# sourceMappingURL=renderer.js.map

package/dist/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"renderer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/package.json

@@ -149,7 +149,7 @@
     "storybook": "storybook dev -p 6006",
     "test": "echo \"No tests specified\" && exit 0"
   },
-  "version": "0.1.82",
+  "version": "0.1.83-beta.0",
   "type": "module",
   "exports": {
     ".": {