@mathwiz/ui-components 0.1.9 → 0.1.10

package/dist/index.mjs

@@ -15956,11 +15956,9 @@ var renderToString = function(t, r) {
     return renderError(o, t, s);
   }
 };
-const loadKaTeXCSS = () => {
-  typeof window < "u" && Promise.resolve({              }).catch((e) => {
-    console.warn("KaTeX CSS loading failed in Storybook environment:", e);
-  });
-}, EquationRender = React__default.memo(
+const loadKaTeXCSS = () => typeof window < "u" ? Promise.resolve({              }).catch((e) => {
+  console.warn("KaTeX CSS loading failed in Storybook environment:", e);
+}) : Promise.resolve(), EquationRender = React__default.memo(
   ({
     parts: e = [],
     children: t = null,
@@ -15969,36 +15967,41 @@ const loadKaTeXCSS = () => {
     displayMode: n = !1,
     className: o = ""
   }) => {
-    if (useEffect(() => {
-      loadKaTeXCSS();
-    }, []), e.length === 0)
-      return null;
-    const a = useMemo(() => e.map((u, d) => {
+    const [a, l] = useState(!1);
+    useEffect(() => {
+      loadKaTeXCSS().then(() => {
+        l(!0);
+      });
+    }, []);
+    const h = useMemo(() => e.length === 0 ? [] : a ? e.map((f, p) => {
       try {
-        return renderToString(u, {
+        return renderToString(f, {
           displayMode: n,
           throwOnError: !1,
           errorColor: "#ff0000"
         });
-      } catch (f) {
-        return console.error(`KaTeX rendering error in part ${d}:`, f), '<span style="color: red;">KaTeX Error</span>';
+      } catch (m) {
+        return console.error(`KaTeX rendering error in part ${p}:`, m), '<span style="color: red;">KaTeX Error</span>';
       }
-    }), [e, n]), l = n ? "div" : "span", h = React__default.Children.toArray(t), c = [];
-    return a.forEach((u, d) => {
-      c.push(
+    }) : e.map((f) => f), [e, n, a]);
+    if (e.length === 0)
+      return null;
+    const c = n ? "div" : "span", u = React__default.Children.toArray(t), d = [];
+    return h.forEach((f, p) => {
+      d.push(
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "span",
           {
-            dangerouslySetInnerHTML: { __html: u },
+            dangerouslySetInnerHTML: { __html: f },
             style: { display: "inline-block" }
           },
-          `part-${d}`
+          `part-${p}`
         )
-      ), d < h.length && d < e.length - 1 && c.push(
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { display: "inline-block" }, children: h[d] }, `slot-${d}`)
+      ), p < u.length && p < e.length - 1 && d.push(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { display: "inline-block" }, children: u[p] }, `slot-${p}`)
       );
     }), /* @__PURE__ */ jsxRuntimeExports.jsx(
-      l,
+      c,
       {
         className: `equation-render ${o}`.trim(),
         style: {
@@ -16009,11 +16012,11 @@ const loadKaTeXCSS = () => {
           gap: "0.3em",
           ...n ? { justifyContent: "center", margin: "1em 0" } : {}
         },
-        children: c
+        children: d
       }
     );
   }
-), renderContentBlock = (e) => e.type === "formula" ? React__default.createElement(EquationRender, {
+), parseTemplate = (e, t, r) => e.replace(/{correctAnswer}/g, t.join(", ")).replace(/{userAnswer}/g, r.join(", ")), renderContentBlock = (e) => e.type === "formula" ? React__default.createElement(EquationRender, {
   key: e.content,
   parts: [e.content],
   children: null,
@@ -16030,7 +16033,150 @@ const loadKaTeXCSS = () => {
     className: "content-block",
     key: r
   }, renderContentBlock(t))
-), Banner = ({
+), parseTemplateWithFormulas = (e) => {
+  const t = [];
+  let r = 0;
+  const s = /\$\$?[^$]+\$\$?/g;
+  let n;
+  for (; (n = s.exec(e)) !== null; ) {
+    const o = n.index, a = n.index + n[0].length;
+    if (o > r) {
+      const c = e.substring(r, o);
+      c.trim() && t.push({
+        type: "text",
+        content: c
+      });
+    }
+    const h = n[0].replace(/^\$\$?/, "").replace(/\$\$?$/, "");
+    t.push({
+      type: "formula",
+      content: h
+    }), r = a;
+  }
+  if (r < e.length) {
+    const o = e.substring(r);
+    o.trim() && t.push({
+      type: "text",
+      content: o
+    });
+  }
+  return t;
+}, renderTemplateWithFormulas = (e, t, r) => {
+  const s = parseTemplate(e, t, r), n = parseTemplateWithFormulas(s);
+  return renderContentBlocks(n);
+}, renderExplanationStep = (e) => {
+  const { type: t, content: r, style: s = {} } = e, n = {
+    marginBottom: "8px",
+    lineHeight: "1.6",
+    ...s
+  };
+  switch (t) {
+    case "instruction":
+      return React__default.createElement("div", {
+        key: e.id,
+        style: {
+          ...n,
+          fontWeight: "bold",
+          color: "#4a6cf7"
+        }
+      }, r);
+    case "formula":
+      const o = r.includes("\\\\") || r.includes("\\downarrow") || r.includes("\\quad");
+      return React__default.createElement(EquationRender, {
+        key: e.id,
+        parts: [r],
+        children: null,
+        displayMode: o,
+        fontSize: "1.1em",
+        color: "#333333"
+      });
+    case "conclusion":
+      return React__default.createElement("div", {
+        key: e.id,
+        style: {
+          ...n,
+          fontWeight: "bold",
+          color: "#22c55e",
+          borderLeft: "3px solid #22c55e",
+          paddingLeft: "12px"
+        }
+      }, r);
+    case "image":
+      return React__default.createElement("div", {
+        key: e.id,
+        style: n
+      }, React__default.createElement("img", {
+        src: r,
+        alt: "解题步骤",
+        style: {
+          maxWidth: "100%",
+          height: "auto",
+          borderRadius: "4px"
+        }
+      }));
+    case "table":
+      return React__default.createElement("div", {
+        key: e.id,
+        style: n
+      }, React__default.createElement("div", {
+        style: {
+          border: "1px solid #e0e0e0",
+          borderRadius: "4px",
+          padding: "8px",
+          backgroundColor: "#f8f9fa"
+        }
+      }, r));
+    default:
+      return React__default.createElement("div", {
+        key: e.id,
+        style: n
+      }, r);
+  }
+}, renderReviewStep = (e, t, r) => {
+  const { type: s, content: n, style: o = {} } = e, a = {
+    marginBottom: "8px",
+    lineHeight: "1.6",
+    ...o
+  };
+  switch (s) {
+    case "instruction":
+      return React__default.createElement("div", {
+        key: e.id,
+        style: {
+          ...a,
+          fontWeight: "bold",
+          color: "#4ade80"
+        }
+      }, n);
+    case "formula":
+      const l = n.includes("\\\\") || n.includes("\\downarrow") || n.includes("\\quad");
+      return React__default.createElement(EquationRender, {
+        key: e.id,
+        parts: [n],
+        children: null,
+        displayMode: l,
+        fontSize: "1.1em",
+        color: "#333333"
+      });
+    case "conclusion":
+      const h = parseTemplate(n, r, t);
+      return React__default.createElement("div", {
+        key: e.id,
+        style: {
+          ...a,
+          fontWeight: "bold",
+          color: "#4ade80",
+          borderLeft: "3px solid #4ade80",
+          paddingLeft: "12px"
+        }
+      }, h);
+    default:
+      return React__default.createElement("div", {
+        key: e.id,
+        style: a
+      }, n);
+  }
+}, renderExplanationSteps = (e) => e.map(renderExplanationStep), renderReviewSteps = (e, t, r) => e.map((s) => renderReviewStep(s, t, r)), Banner = ({
   scene: e,
   position: t = "header",
   size: r = "medium",
@@ -16174,7 +16320,7 @@ const loadKaTeXCSS = () => {
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: r, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: s, children: t }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: n, children: e.map((a) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: o, children: a.content }, a.id)) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: n, children: renderExplanationSteps(e).map((a, l) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: o, children: a }, e[l].id)) })
   ] });
 }, ReviewContent = ({
   reviewContent: e,
@@ -16211,8 +16357,12 @@ const loadKaTeXCSS = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: s, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: n, children: "复习内容" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: o, children: [
-      e.reviewTemplate && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: a, children: e.reviewTemplate.replace(/{correctAnswer}/g, r.join(", ")).replace(/{userAnswer}/g, t.join(", ")) }),
-      e.reviewExplanation && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: l, children: e.reviewExplanation.map((c) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: h, children: c.content }, c.id)) })
+      e.reviewTemplate && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: a, children: renderTemplateWithFormulas(
+        e.reviewTemplate,
+        r,
+        t
+      ) }),
+      e.reviewExplanation && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: l, children: renderReviewSteps(e.reviewExplanation, t, r).map((c, u) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: h, children: c }, e.reviewExplanation[u].id)) })
     ] })
   ] });
 }, LoadingState = ({ type: e = "skeleton" }) => {
@@ -16288,30 +16438,31 @@ const loadKaTeXCSS = () => {
   onNext: t,
   onRetry: r,
   onAnswerChange: s,
-  onHintToggle: n
+  onHintToggle: n,
+  value: o
 }) => {
-  const { problemData: o, scene: a, submissionResult: l, config: h } = useMathCardContext();
-  if (!o)
+  const { problemData: a, scene: l, submissionResult: h, config: c } = useMathCardContext();
+  if (!a)
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorState, { error: "No problem data provided" });
-  const c = () => {
+  const u = () => {
     e && e();
-  }, u = () => {
-    t && t(o.problemId);
   }, d = () => {
-    r && r(o.problemId);
-  }, f = (g) => {
-    s && s(g, o.problemType);
-  }, p = {
-    background: h?.theme === "dark" ? "#1a1a1a" : "#ffffff",
+    t && t(a.problemId);
+  }, f = () => {
+    r && r(a.problemId);
+  }, p = (b) => {
+    s && s(b, a.problemType);
+  }, m = {
+    background: c?.theme === "dark" ? "#1a1a1a" : "#ffffff",
     borderRadius: "8px",
     boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
     fontFamily: "'Arial', sans-serif",
     fontSize: "14px",
     overflow: "hidden",
-    color: h?.theme === "dark" ? "#ffffff" : "#333333",
+    color: c?.theme === "dark" ? "#ffffff" : "#333333",
     width: "100%",
     maxWidth: "800px"
-  }, m = {
+  }, g = {
     padding: "20px",
     borderTop: "1px solid #e0e0e0",
     display: "flex",
@@ -16320,64 +16471,65 @@ const loadKaTeXCSS = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      style: p,
+      style: m,
       "data-testid": "math-card",
-      "data-theme": h?.theme,
+      "data-theme": c?.theme,
       children: [
-        h?.showBanner !== !1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        c?.showBanner !== !1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Banner,
           {
-            scene: a,
-            position: h?.bannerPosition,
-            size: h?.bannerSize,
-            color: h?.bannerCustomStyle?.color,
-            bgColor: h?.bannerCustomStyle?.bgColor
+            scene: l,
+            position: c?.bannerPosition,
+            size: c?.bannerSize,
+            color: c?.bannerCustomStyle?.color,
+            bgColor: c?.bannerCustomStyle?.bgColor
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Question,
           {
-            question: o.question,
-            problemType: o.problemType
+            question: a.question,
+            problemType: a.problemType
           }
         ),
-        a === "question" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        l === "question" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             AnswerInput,
             {
-              problemType: o.problemType,
-              options: o.answer.options,
-              onChange: f,
-              placeholder: h?.inputPlaceholder
+              problemType: a.problemType,
+              options: a.answer.options,
+              value: o,
+              onChange: p,
+              placeholder: c?.inputPlaceholder
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: m, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: g, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             SubmitButton,
             {
-              onClick: c,
+              onClick: u,
               disabled: !e,
-              children: h?.submitButtonText || "提交答案"
+              children: c?.submitButtonText || "提交答案"
             }
           ) })
         ] }),
-        a === "solve" && o.explanation && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        l === "solve" && a.explanation && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Explanation,
           {
-            steps: o.explanation,
+            steps: a.explanation,
             title: "官方解析"
           }
         ),
-        a === "review" && l && o.reviewContent && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        l === "review" && h && a.reviewContent && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ReviewContent,
           {
-            reviewContent: o.reviewContent,
-            userAnswer: l.userAnswer,
-            correctAnswer: o.answer.correctAnswer
+            reviewContent: a.reviewContent,
+            userAnswer: h.userAnswer,
+            correctAnswer: a.answer.correctAnswer
           }
         ),
-        (a === "solve" || a === "review") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: m, children: [
-          t && /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { onClick: u, children: h?.nextButtonText || "下一题" }),
-          r && /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { onClick: d, children: h?.retryButtonText || "重新作答" })
+        (l === "solve" || l === "review") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: g, children: [
+          t && /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { onClick: d, children: c?.nextButtonText || "下一题" }),
+          r && /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { onClick: f, children: c?.retryButtonText || "重新作答" })
         ] })
       ]
     }
@@ -16395,7 +16547,8 @@ const loadKaTeXCSS = () => {
   onRetry: c,
   onErrorRetry: u,
   onAnswerChange: d,
-  onHintToggle: f
+  onHintToggle: f,
+  value: p
 }) => {
   if (s)
     return /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingState, { type: "skeleton" });
@@ -16409,20 +16562,22 @@ const loadKaTeXCSS = () => {
     );
   if (!e)
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorState, { error: "No problem data provided" });
-  const p = {
+  const m = {
     problemData: e,
     scene: t,
     submissionResult: r,
-    config: o
+    config: o,
+    value: p
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(MathCardContext.Provider, { value: p, children: a || /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(MathCardContext.Provider, { value: m, children: a || /* @__PURE__ */ jsxRuntimeExports.jsx(
     DefaultLayout,
     {
       onSubmit: l,
       onNext: h,
       onRetry: c,
       onAnswerChange: d,
-      onHintToggle: f
+      onHintToggle: f,
+      value: p
     }
   ) });
 };
@@ -69610,6 +69765,7 @@ const MathGraph = (e) => {
             submissionResult: f[x],
             loading: c,
             error: u ? I(u) : void 0,
+            value: p[x],
             onAnswerChange: E,
             onSubmit: P,
             onNext: () => $(s),