themed-markdown 0.1.6 → 0.1.8

package/dist/index.js

@@ -527,10 +527,11 @@ function IndustryHtmlModal({ isOpen, onClose, htmlContent, theme: theme2 }) {
 }
 
 // industryMarkdown/components/IndustryLazyMermaidDiagram.tsx
-var import_lucide_react = require("lucide-react");
+var import_lucide_react2 = require("lucide-react");
 var import_react4 = __toESM(require("react"));
 
 // industryMarkdown/components/IndustryMermaidDiagram.tsx
+var import_lucide_react = require("lucide-react");
 var import_react3 = __toESM(require("react"));
 var getMermaidSync = () => {
   if (typeof window !== "undefined") {
@@ -548,14 +549,14 @@ function IndustryMermaidDiagram({
   onCopyError,
   onError,
   rootMargin = "200px",
-  isModalMode = false,
-  fitMode = "height"
+  isModalMode = false
 }) {
   const theme2 = themeOverride || theme;
   const [errorDetails, setErrorDetails] = import_react3.useState(null);
   const [isIntersecting, setIsIntersecting] = import_react3.useState(false);
   const [hasRendered, setHasRendered] = import_react3.useState(false);
   const [containerElement, setContainerElement] = import_react3.useState(null);
+  const [zoomLevel, setZoomLevel] = import_react3.useState(1);
   const observerRef = import_react3.useRef(null);
   const containerRef = import_react3.default.useCallback((node) => {
     setContainerElement(node);
@@ -596,27 +597,29 @@ function IndustryMermaidDiagram({
       if (!mermaid || !containerElement)
         return;
       try {
+        const diagramBackground = theme2.colors.backgroundSecondary || theme2.colors.muted || theme2.colors.background;
+        const nodeBackground = theme2.colors.backgroundTertiary || theme2.colors.backgroundSecondary || theme2.colors.primary + "22";
         mermaid.initialize({
           startOnLoad: false,
           theme: "base",
           themeVariables: {
-            primaryColor: "#1e1e1e",
-            primaryTextColor: "#e0e0e0",
-            primaryBorderColor: "#444",
-            lineColor: "#666",
-            secondaryColor: "#2a2a2a",
-            tertiaryColor: "#333",
-            background: "#1e1e1e",
-            mainBkg: "#1e1e1e",
-            secondBkg: "#2a2a2a",
-            tertiaryBkg: "#333",
-            secondaryBorderColor: "#555",
-            tertiaryBorderColor: "#666",
-            textColor: "#e0e0e0",
-            labelTextColor: "#e0e0e0",
-            altBackground: "#252525",
-            errorBkgColor: "#552222",
-            errorTextColor: "#ff6666"
+            primaryColor: nodeBackground,
+            primaryTextColor: theme2.colors.text,
+            primaryBorderColor: theme2.colors.border,
+            lineColor: theme2.colors.border,
+            secondaryColor: theme2.colors.secondary + "44",
+            tertiaryColor: theme2.colors.accent + "44",
+            background: diagramBackground,
+            mainBkg: nodeBackground,
+            secondBkg: theme2.colors.backgroundSecondary || theme2.colors.muted,
+            tertiaryBkg: theme2.colors.backgroundTertiary || theme2.colors.accent + "22",
+            secondaryBorderColor: theme2.colors.border,
+            tertiaryBorderColor: theme2.colors.accent,
+            textColor: theme2.colors.text,
+            labelTextColor: theme2.colors.text,
+            altBackground: theme2.colors.muted,
+            errorBkgColor: theme2.colors.error + "33",
+            errorTextColor: theme2.colors.error
           },
           securityLevel: "loose",
           logLevel: "error"
@@ -632,8 +635,8 @@ function IndustryMermaidDiagram({
         });
         const svgElement = graphDiv.querySelector("svg");
         if (svgElement) {
-          svgElement.style.maxWidth = "100%";
-          svgElement.style.maxHeight = "80vh";
+          svgElement.style.maxWidth = "none";
+          svgElement.style.maxHeight = "none";
           svgElement.style.width = "auto";
           svgElement.style.height = "auto";
           svgElement.style.display = "block";
@@ -641,12 +644,10 @@ function IndustryMermaidDiagram({
           if (isModalMode) {
             svgElement.style.width = "100%";
             svgElement.style.height = "auto";
-          } else if (fitMode === "width") {
-            svgElement.style.width = "100%";
-            svgElement.style.maxHeight = "none";
-          } else if (fitMode === "height") {
-            svgElement.style.maxHeight = "60vh";
+          } else {
+            svgElement.style.maxHeight = "360px";
             svgElement.style.width = "auto";
+            svgElement.style.maxWidth = "100%";
           }
         } else {
           console.warn("No SVG element found after mermaid render");
@@ -683,7 +684,29 @@ function IndustryMermaidDiagram({
       }
     };
     renderDiagram();
-  }, [hasRendered, code, id, theme2, containerElement, onError, fitMode, isModalMode]);
+  }, [hasRendered, code, id, theme2, containerElement, onError, isModalMode]);
+  import_react3.useEffect(() => {
+    if (!containerElement || !hasRendered)
+      return;
+    const svgElement = containerElement.querySelector("svg");
+    if (svgElement) {
+      if (zoomLevel !== 1) {
+        const originalWidth = svgElement.scrollWidth || svgElement.clientWidth;
+        const originalHeight = svgElement.scrollHeight || svgElement.clientHeight;
+        svgElement.style.transform = `scale(${zoomLevel})`;
+        svgElement.style.transformOrigin = "top left";
+        svgElement.style.width = `${originalWidth * zoomLevel}px`;
+        svgElement.style.height = `${originalHeight * zoomLevel}px`;
+      } else {
+        svgElement.style.transform = "";
+        svgElement.style.transformOrigin = "";
+        svgElement.style.width = "auto";
+        svgElement.style.height = "auto";
+        svgElement.style.maxHeight = "360px";
+        svgElement.style.maxWidth = "100%";
+      }
+    }
+  }, [zoomLevel, containerElement, hasRendered]);
   import_react3.useEffect(() => {
     if (errorDetails && onCopyError) {
       const handleKeyDown = (e) => {
@@ -704,12 +727,14 @@ function IndustryMermaidDiagram({
     position: "relative",
     width: "100%",
     minHeight: "200px",
+    maxHeight: "400px",
     display: "block",
     backgroundColor: hasRendered ? "transparent" : theme2.colors.backgroundSecondary,
-    border: hasRendered ? "none" : `1px solid ${theme2.colors.border}`,
+    border: hasRendered ? `1px solid ${theme2.colors.border}` : `1px solid ${theme2.colors.border}`,
     borderRadius: theme2.radii[2],
-    padding: hasRendered ? 0 : theme2.space[4],
-    margin: `${theme2.space[4]}px 0`
+    padding: hasRendered ? theme2.space[3] : theme2.space[4],
+    margin: `${theme2.space[4]}px 0`,
+    overflow: hasRendered ? "auto" : "visible"
   };
   const placeholderStyle = {
     textAlign: "center",
@@ -718,6 +743,77 @@ function IndustryMermaidDiagram({
     fontFamily: theme2.fonts.body
   };
   return /* @__PURE__ */ import_react3.default.createElement("div", {
+    style: { position: "relative" }
+  }, hasRendered && !isModalMode && /* @__PURE__ */ import_react3.default.createElement("div", {
+    style: {
+      position: "absolute",
+      top: theme2.space[2],
+      right: theme2.space[2],
+      zIndex: 10,
+      display: "flex",
+      gap: theme2.space[1]
+    }
+  }, /* @__PURE__ */ import_react3.default.createElement("button", {
+    onClick: () => setZoomLevel(Math.min(3, zoomLevel + 0.25)),
+    disabled: zoomLevel >= 3,
+    style: {
+      padding: theme2.space[1],
+      backgroundColor: theme2.colors.backgroundSecondary,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.radii[1],
+      color: theme2.colors.text,
+      cursor: zoomLevel >= 3 ? "not-allowed" : "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "28px",
+      height: "28px",
+      opacity: zoomLevel >= 3 ? 0.5 : 1
+    },
+    title: "Zoom In"
+  }, /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ZoomIn, {
+    size: 14
+  })), /* @__PURE__ */ import_react3.default.createElement("button", {
+    onClick: () => setZoomLevel(Math.max(0.5, zoomLevel - 0.25)),
+    disabled: zoomLevel <= 0.5,
+    style: {
+      padding: theme2.space[1],
+      backgroundColor: theme2.colors.backgroundSecondary,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.radii[1],
+      color: theme2.colors.text,
+      cursor: zoomLevel <= 0.5 ? "not-allowed" : "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "28px",
+      height: "28px",
+      opacity: zoomLevel <= 0.5 ? 0.5 : 1
+    },
+    title: "Zoom Out"
+  }, /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ZoomOut, {
+    size: 14
+  })), /* @__PURE__ */ import_react3.default.createElement("button", {
+    onClick: () => setZoomLevel(1),
+    disabled: zoomLevel === 1,
+    style: {
+      padding: theme2.space[1],
+      backgroundColor: theme2.colors.backgroundSecondary,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.radii[1],
+      color: theme2.colors.text,
+      cursor: zoomLevel === 1 ? "not-allowed" : "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "28px",
+      height: "28px",
+      opacity: zoomLevel === 1 ? 0.5 : 1
+    },
+    title: "Reset Zoom"
+  }, /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.RotateCcw, {
+    size: 14
+  }))), /* @__PURE__ */ import_react3.default.createElement("div", {
     ref: containerRef,
     style: containerStyle,
     className: "mermaid-container"
@@ -725,7 +821,7 @@ function IndustryMermaidDiagram({
     style: placeholderStyle
   }, /* @__PURE__ */ import_react3.default.createElement("div", null, "\uD83D\uDCCA Mermaid Diagram"), /* @__PURE__ */ import_react3.default.createElement("div", {
     style: { fontSize: theme2.fontSizes[1], marginTop: theme2.space[2], opacity: 0.7 }
-  }, isIntersecting ? "Loading..." : "Scroll to view")));
+  }, isIntersecting ? "Loading..." : "Scroll to view"))));
 }
 
 // industryMarkdown/components/IndustryLazyMermaidDiagram.tsx
@@ -735,8 +831,7 @@ function IndustryLazyMermaidDiagram({
   onCopyError,
   rootMargin = "200px",
   onShowInPanel,
-  theme: theme2 = theme,
-  fitMode = "height"
+  theme: theme2 = theme
 }) {
   const [isIntersecting, setIsIntersecting] = import_react4.useState(false);
   const [hasRendered, setHasRendered] = import_react4.useState(false);
@@ -847,14 +942,14 @@ function IndustryLazyMermaidDiagram({
       e.currentTarget.style.backgroundColor = theme2.colors.background;
     },
     title: "Show in diagram panel"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_lucide_react.MoveRight, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_lucide_react2.MoveRight, {
     size: 14
   })), hasRendered ? /* @__PURE__ */ import_react4.default.createElement(IndustryMermaidDiagram, {
     code,
     id,
     onCopyError,
     onError: setHasError,
-    fitMode
+    theme: theme2
   }) : /* @__PURE__ */ import_react4.default.createElement("div", {
     style: getPlaceholderStyle()
   }, /* @__PURE__ */ import_react4.default.createElement("div", {
@@ -865,7 +960,7 @@ function IndustryLazyMermaidDiagram({
 }
 
 // industryMarkdown/components/IndustryMarkdownComponents.tsx
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var import_react7 = __toESM(require("react"));
 
 // industryMarkdown/utils/bashCommandParser.ts
@@ -1018,7 +1113,7 @@ function transformImageUrl(src, repositoryInfo) {
 }
 
 // industryMarkdown/components/IndustryBashCommandDropdown.tsx
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var import_react6 = __toESM(require("react"));
 var IndustryBashCommandDropdown = ({
   commands,
@@ -1118,9 +1213,9 @@ var IndustryBashCommandDropdown = ({
     }
   }, isRunning ? /* @__PURE__ */ import_react6.default.createElement("span", {
     style: { fontSize: theme2.fontSizes[1] }
-  }, "...") : /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_lucide_react2.Play, {
+  }, "...") : /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_lucide_react3.Play, {
     size: 14
-  }), "Run", /* @__PURE__ */ import_react6.default.createElement(import_lucide_react2.ChevronDown, {
+  }), "Run", /* @__PURE__ */ import_react6.default.createElement(import_lucide_react3.ChevronDown, {
     size: 14
   }))), isOpen && /* @__PURE__ */ import_react6.default.createElement("div", {
     style: dropdownStyle
@@ -1177,7 +1272,7 @@ var IndustryBashCommandDropdown = ({
     }
   }, isRunning ? /* @__PURE__ */ import_react6.default.createElement("span", {
     style: { fontSize: theme2.fontSizes[1] }
-  }, "...") : /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_lucide_react2.Play, {
+  }, "...") : /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_lucide_react3.Play, {
     size: 14
   }), "Run")));
 };
@@ -1595,9 +1690,9 @@ var createIndustryMarkdownComponents = ({
             transition: "all 0.15s ease-in-out"
           },
           title: copied ? "Copied!" : "Copy code to clipboard"
-        }, copied ? /* @__PURE__ */ import_react7.default.createElement(import_lucide_react3.Check, {
+        }, copied ? /* @__PURE__ */ import_react7.default.createElement(import_lucide_react4.Check, {
           size: 14
-        }) : /* @__PURE__ */ import_react7.default.createElement(import_lucide_react3.Copy, {
+        }) : /* @__PURE__ */ import_react7.default.createElement(import_lucide_react4.Copy, {
           size: 14
         }), copied ? "Copied!" : "Copy"), isExecutable && /* @__PURE__ */ import_react7.default.createElement(IndustryBashCommandDropdown, {
           commands: bashCommands,
@@ -1632,7 +1727,7 @@ var createIndustryMarkdownComponents = ({
             gap: `${theme2.space[1]}px`
           },
           title: "Render HTML in modal"
-        }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react3.Monitor, {
+        }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react4.Monitor, {
           size: 14
         }), "Render HTML"), isPrompt && openPlaceholderModal && hasPlaceholders && /* @__PURE__ */ import_react7.default.createElement("button", {
           onClick: (e) => {
@@ -1652,7 +1747,7 @@ var createIndustryMarkdownComponents = ({
             gap: `${theme2.space[1]}px`
           },
           title: "Fill placeholders and copy"
-        }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react3.FileText, {
+        }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react4.FileText, {
           size: 14
         }), "Fill & Copy (", placeholders.length, ")"))), isPrompt ? /* @__PURE__ */ import_react7.default.createElement("div", {
           style: {
@@ -2743,7 +2838,7 @@ var IndustryMarkdownSlide = import_react11.default.memo(function IndustryMarkdow
   }));
 });
 // industryMarkdown/components/SlidePresentation.tsx
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 var import_react12 = __toESM(require("react"));
 var SlidePresentation = ({
   slides,
@@ -2864,7 +2959,7 @@ var SlidePresentation = ({
     onMouseOut: (e) => {
       e.currentTarget.style.backgroundColor = "transparent";
     }
-  }, /* @__PURE__ */ import_react12.default.createElement(import_lucide_react4.ChevronLeft, {
+  }, /* @__PURE__ */ import_react12.default.createElement(import_lucide_react5.ChevronLeft, {
     size: 16
   }), "Previous"), showSlideCounter && /* @__PURE__ */ import_react12.default.createElement("div", {
     style: {
@@ -2924,9 +3019,9 @@ var SlidePresentation = ({
       e.currentTarget.style.backgroundColor = "transparent";
     },
     title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen"
-  }, isFullscreen ? /* @__PURE__ */ import_react12.default.createElement(import_lucide_react4.Minimize2, {
+  }, isFullscreen ? /* @__PURE__ */ import_react12.default.createElement(import_lucide_react5.Minimize2, {
     size: 16
-  }) : /* @__PURE__ */ import_react12.default.createElement(import_lucide_react4.Maximize2, {
+  }) : /* @__PURE__ */ import_react12.default.createElement(import_lucide_react5.Maximize2, {
     size: 16
   })), /* @__PURE__ */ import_react12.default.createElement("button", {
     onClick: goToNextSlide,
@@ -2954,7 +3049,7 @@ var SlidePresentation = ({
     onMouseOut: (e) => {
       e.currentTarget.style.backgroundColor = "transparent";
     }
-  }, "Next", /* @__PURE__ */ import_react12.default.createElement(import_lucide_react4.ChevronRight, {
+  }, "Next", /* @__PURE__ */ import_react12.default.createElement(import_lucide_react5.ChevronRight, {
     size: 16
   })))), /* @__PURE__ */ import_react12.default.createElement("div", {
     style: {
@@ -3174,7 +3269,7 @@ var DocumentView = ({
   })))));
 };
 // industryMarkdown/components/IndustryEditableMarkdownSlide.tsx
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_react14 = __toESM(require("react"));
 var IndustryEditableMarkdownSlide = ({
   content,
@@ -3285,7 +3380,7 @@ var IndustryEditableMarkdownSlide = ({
         fontSize: theme2.fontSizes[1],
         color: theme2.colors.textSecondary
       }
-    }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react5.Pencil, {
+    }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react6.Pencil, {
       size: 16
     }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Editing Mode"), autoSaveDelay && /* @__PURE__ */ import_react14.default.createElement("span", null, "(Auto-save enabled)")), /* @__PURE__ */ import_react14.default.createElement("div", {
       style: {
@@ -3308,7 +3403,7 @@ var IndustryEditableMarkdownSlide = ({
         cursor: isSaving ? "not-allowed" : "pointer",
         opacity: isSaving ? 0.7 : 1
       }
-    }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react5.Save, {
+    }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react6.Save, {
       size: 14
     }), isSaving ? "Saving..." : "Save"), /* @__PURE__ */ import_react14.default.createElement("button", {
       onClick: handleCancel,
@@ -3324,7 +3419,7 @@ var IndustryEditableMarkdownSlide = ({
         fontSize: theme2.fontSizes[1],
         cursor: "pointer"
       }
-    }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react5.X, {
+    }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react6.X, {
       size: 14
     }), "Cancel"))), /* @__PURE__ */ import_react14.default.createElement("div", {
       style: {
@@ -3378,7 +3473,7 @@ var IndustryEditableMarkdownSlide = ({
     },
     onMouseEnter: (e) => e.currentTarget.style.opacity = "1",
     onMouseLeave: (e) => e.currentTarget.style.opacity = "0.8"
-  }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react5.Pencil, {
+  }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react6.Pencil, {
     size: 14
   }), "Edit"), /* @__PURE__ */ import_react14.default.createElement(IndustryMarkdownSlide, {
     ...slideProps,

package/dist/index.mjs

@@ -449,6 +449,7 @@ import { MoveRight } from "lucide-react";
 import React4, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 
 // industryMarkdown/components/IndustryMermaidDiagram.tsx
+import { ZoomIn, ZoomOut, RotateCcw } from "lucide-react";
 import React3, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 var getMermaidSync = () => {
   if (typeof window !== "undefined") {
@@ -466,14 +467,14 @@ function IndustryMermaidDiagram({
   onCopyError,
   onError,
   rootMargin = "200px",
-  isModalMode = false,
-  fitMode = "height"
+  isModalMode = false
 }) {
   const theme2 = themeOverride || theme;
   const [errorDetails, setErrorDetails] = useState3(null);
   const [isIntersecting, setIsIntersecting] = useState3(false);
   const [hasRendered, setHasRendered] = useState3(false);
   const [containerElement, setContainerElement] = useState3(null);
+  const [zoomLevel, setZoomLevel] = useState3(1);
   const observerRef = useRef(null);
   const containerRef = React3.useCallback((node) => {
     setContainerElement(node);
@@ -514,27 +515,29 @@ function IndustryMermaidDiagram({
       if (!mermaid || !containerElement)
         return;
       try {
+        const diagramBackground = theme2.colors.backgroundSecondary || theme2.colors.muted || theme2.colors.background;
+        const nodeBackground = theme2.colors.backgroundTertiary || theme2.colors.backgroundSecondary || theme2.colors.primary + "22";
         mermaid.initialize({
           startOnLoad: false,
           theme: "base",
           themeVariables: {
-            primaryColor: "#1e1e1e",
-            primaryTextColor: "#e0e0e0",
-            primaryBorderColor: "#444",
-            lineColor: "#666",
-            secondaryColor: "#2a2a2a",
-            tertiaryColor: "#333",
-            background: "#1e1e1e",
-            mainBkg: "#1e1e1e",
-            secondBkg: "#2a2a2a",
-            tertiaryBkg: "#333",
-            secondaryBorderColor: "#555",
-            tertiaryBorderColor: "#666",
-            textColor: "#e0e0e0",
-            labelTextColor: "#e0e0e0",
-            altBackground: "#252525",
-            errorBkgColor: "#552222",
-            errorTextColor: "#ff6666"
+            primaryColor: nodeBackground,
+            primaryTextColor: theme2.colors.text,
+            primaryBorderColor: theme2.colors.border,
+            lineColor: theme2.colors.border,
+            secondaryColor: theme2.colors.secondary + "44",
+            tertiaryColor: theme2.colors.accent + "44",
+            background: diagramBackground,
+            mainBkg: nodeBackground,
+            secondBkg: theme2.colors.backgroundSecondary || theme2.colors.muted,
+            tertiaryBkg: theme2.colors.backgroundTertiary || theme2.colors.accent + "22",
+            secondaryBorderColor: theme2.colors.border,
+            tertiaryBorderColor: theme2.colors.accent,
+            textColor: theme2.colors.text,
+            labelTextColor: theme2.colors.text,
+            altBackground: theme2.colors.muted,
+            errorBkgColor: theme2.colors.error + "33",
+            errorTextColor: theme2.colors.error
           },
           securityLevel: "loose",
           logLevel: "error"
@@ -550,8 +553,8 @@ function IndustryMermaidDiagram({
         });
         const svgElement = graphDiv.querySelector("svg");
         if (svgElement) {
-          svgElement.style.maxWidth = "100%";
-          svgElement.style.maxHeight = "80vh";
+          svgElement.style.maxWidth = "none";
+          svgElement.style.maxHeight = "none";
           svgElement.style.width = "auto";
           svgElement.style.height = "auto";
           svgElement.style.display = "block";
@@ -559,12 +562,10 @@ function IndustryMermaidDiagram({
           if (isModalMode) {
             svgElement.style.width = "100%";
             svgElement.style.height = "auto";
-          } else if (fitMode === "width") {
-            svgElement.style.width = "100%";
-            svgElement.style.maxHeight = "none";
-          } else if (fitMode === "height") {
-            svgElement.style.maxHeight = "60vh";
+          } else {
+            svgElement.style.maxHeight = "360px";
             svgElement.style.width = "auto";
+            svgElement.style.maxWidth = "100%";
           }
         } else {
           console.warn("No SVG element found after mermaid render");
@@ -601,7 +602,29 @@ function IndustryMermaidDiagram({
       }
     };
     renderDiagram();
-  }, [hasRendered, code, id, theme2, containerElement, onError, fitMode, isModalMode]);
+  }, [hasRendered, code, id, theme2, containerElement, onError, isModalMode]);
+  useEffect2(() => {
+    if (!containerElement || !hasRendered)
+      return;
+    const svgElement = containerElement.querySelector("svg");
+    if (svgElement) {
+      if (zoomLevel !== 1) {
+        const originalWidth = svgElement.scrollWidth || svgElement.clientWidth;
+        const originalHeight = svgElement.scrollHeight || svgElement.clientHeight;
+        svgElement.style.transform = `scale(${zoomLevel})`;
+        svgElement.style.transformOrigin = "top left";
+        svgElement.style.width = `${originalWidth * zoomLevel}px`;
+        svgElement.style.height = `${originalHeight * zoomLevel}px`;
+      } else {
+        svgElement.style.transform = "";
+        svgElement.style.transformOrigin = "";
+        svgElement.style.width = "auto";
+        svgElement.style.height = "auto";
+        svgElement.style.maxHeight = "360px";
+        svgElement.style.maxWidth = "100%";
+      }
+    }
+  }, [zoomLevel, containerElement, hasRendered]);
   useEffect2(() => {
     if (errorDetails && onCopyError) {
       const handleKeyDown = (e) => {
@@ -622,12 +645,14 @@ function IndustryMermaidDiagram({
     position: "relative",
     width: "100%",
     minHeight: "200px",
+    maxHeight: "400px",
     display: "block",
     backgroundColor: hasRendered ? "transparent" : theme2.colors.backgroundSecondary,
-    border: hasRendered ? "none" : `1px solid ${theme2.colors.border}`,
+    border: hasRendered ? `1px solid ${theme2.colors.border}` : `1px solid ${theme2.colors.border}`,
     borderRadius: theme2.radii[2],
-    padding: hasRendered ? 0 : theme2.space[4],
-    margin: `${theme2.space[4]}px 0`
+    padding: hasRendered ? theme2.space[3] : theme2.space[4],
+    margin: `${theme2.space[4]}px 0`,
+    overflow: hasRendered ? "auto" : "visible"
   };
   const placeholderStyle = {
     textAlign: "center",
@@ -636,6 +661,77 @@ function IndustryMermaidDiagram({
     fontFamily: theme2.fonts.body
   };
   return /* @__PURE__ */ React3.createElement("div", {
+    style: { position: "relative" }
+  }, hasRendered && !isModalMode && /* @__PURE__ */ React3.createElement("div", {
+    style: {
+      position: "absolute",
+      top: theme2.space[2],
+      right: theme2.space[2],
+      zIndex: 10,
+      display: "flex",
+      gap: theme2.space[1]
+    }
+  }, /* @__PURE__ */ React3.createElement("button", {
+    onClick: () => setZoomLevel(Math.min(3, zoomLevel + 0.25)),
+    disabled: zoomLevel >= 3,
+    style: {
+      padding: theme2.space[1],
+      backgroundColor: theme2.colors.backgroundSecondary,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.radii[1],
+      color: theme2.colors.text,
+      cursor: zoomLevel >= 3 ? "not-allowed" : "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "28px",
+      height: "28px",
+      opacity: zoomLevel >= 3 ? 0.5 : 1
+    },
+    title: "Zoom In"
+  }, /* @__PURE__ */ React3.createElement(ZoomIn, {
+    size: 14
+  })), /* @__PURE__ */ React3.createElement("button", {
+    onClick: () => setZoomLevel(Math.max(0.5, zoomLevel - 0.25)),
+    disabled: zoomLevel <= 0.5,
+    style: {
+      padding: theme2.space[1],
+      backgroundColor: theme2.colors.backgroundSecondary,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.radii[1],
+      color: theme2.colors.text,
+      cursor: zoomLevel <= 0.5 ? "not-allowed" : "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "28px",
+      height: "28px",
+      opacity: zoomLevel <= 0.5 ? 0.5 : 1
+    },
+    title: "Zoom Out"
+  }, /* @__PURE__ */ React3.createElement(ZoomOut, {
+    size: 14
+  })), /* @__PURE__ */ React3.createElement("button", {
+    onClick: () => setZoomLevel(1),
+    disabled: zoomLevel === 1,
+    style: {
+      padding: theme2.space[1],
+      backgroundColor: theme2.colors.backgroundSecondary,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.radii[1],
+      color: theme2.colors.text,
+      cursor: zoomLevel === 1 ? "not-allowed" : "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "28px",
+      height: "28px",
+      opacity: zoomLevel === 1 ? 0.5 : 1
+    },
+    title: "Reset Zoom"
+  }, /* @__PURE__ */ React3.createElement(RotateCcw, {
+    size: 14
+  }))), /* @__PURE__ */ React3.createElement("div", {
     ref: containerRef,
     style: containerStyle,
     className: "mermaid-container"
@@ -643,7 +739,7 @@ function IndustryMermaidDiagram({
     style: placeholderStyle
   }, /* @__PURE__ */ React3.createElement("div", null, "\uD83D\uDCCA Mermaid Diagram"), /* @__PURE__ */ React3.createElement("div", {
     style: { fontSize: theme2.fontSizes[1], marginTop: theme2.space[2], opacity: 0.7 }
-  }, isIntersecting ? "Loading..." : "Scroll to view")));
+  }, isIntersecting ? "Loading..." : "Scroll to view"))));
 }
 
 // industryMarkdown/components/IndustryLazyMermaidDiagram.tsx
@@ -653,8 +749,7 @@ function IndustryLazyMermaidDiagram({
   onCopyError,
   rootMargin = "200px",
   onShowInPanel,
-  theme: theme2 = theme,
-  fitMode = "height"
+  theme: theme2 = theme
 }) {
   const [isIntersecting, setIsIntersecting] = useState4(false);
   const [hasRendered, setHasRendered] = useState4(false);
@@ -772,7 +867,7 @@ function IndustryLazyMermaidDiagram({
     id,
     onCopyError,
     onError: setHasError,
-    fitMode
+    theme: theme2
   }) : /* @__PURE__ */ React4.createElement("div", {
     style: getPlaceholderStyle()
   }, /* @__PURE__ */ React4.createElement("div", {

package/dist/industryMarkdown/components/IndustryLazyMermaidDiagram.d.ts

@@ -7,8 +7,7 @@ interface IndustryLazyMermaidDiagramProps {
     rootMargin?: string;
     onShowInPanel?: (code: string, title?: string) => void;
     theme?: Theme;
-    fitMode?: 'height' | 'width';
 }
-export declare function IndustryLazyMermaidDiagram({ code, id, onCopyError, rootMargin, onShowInPanel, theme, fitMode, }: IndustryLazyMermaidDiagramProps): React.JSX.Element;
+export declare function IndustryLazyMermaidDiagram({ code, id, onCopyError, rootMargin, onShowInPanel, theme, }: IndustryLazyMermaidDiagramProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=IndustryLazyMermaidDiagram.d.ts.map

package/dist/industryMarkdown/components/IndustryLazyMermaidDiagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IndustryLazyMermaidDiagram.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryLazyMermaidDiagram.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAyB,MAAM,qBAAqB,CAAC;AAInE,UAAU,+BAA+B;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B;AAED,wBAAgB,0BAA0B,CAAC,EACzC,IAAI,EACJ,EAAE,EACF,WAAW,EACX,UAAoB,EACpB,aAAa,EACb,KAAoB,EACpB,OAAkB,GACnB,EAAE,+BAA+B,qBA2JjC"}
+{"version":3,"file":"IndustryLazyMermaidDiagram.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryLazyMermaidDiagram.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAyB,MAAM,qBAAqB,CAAC;AAInE,UAAU,+BAA+B;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,wBAAgB,0BAA0B,CAAC,EACzC,IAAI,EACJ,EAAE,EACF,WAAW,EACX,UAAoB,EACpB,aAAa,EACb,KAAoB,GACrB,EAAE,+BAA+B,qBA2JjC"}

package/dist/industryMarkdown/components/IndustryMarkdownSlide.stories.d.ts

@@ -13,4 +13,5 @@ export declare const WithTable: Story;
 export declare const LongContent: Story;
 export declare const WithASCIITable: Story;
 export declare const WithResizeObserver: Story;
+export declare const MermaidFontScaling: Story;
 //# sourceMappingURL=IndustryMarkdownSlide.stories.d.ts.map

package/dist/industryMarkdown/components/IndustryMarkdownSlide.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IndustryMarkdownSlide.stories.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryMarkdownSlide.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAe5C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA8DzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA2BjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA+BpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8BhC,CAAC"}
+{"version":3,"file":"IndustryMarkdownSlide.stories.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryMarkdownSlide.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAe5C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkEzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA2BjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA+BpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8BhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAwFhC,CAAC"}

package/dist/industryMarkdown/components/IndustryMermaidDiagram.d.ts

@@ -14,8 +14,7 @@ interface IndustryMermaidDiagramProps {
     onError?: (hasError: boolean) => void;
     rootMargin?: string;
     isModalMode?: boolean;
-    fitMode?: 'height' | 'width';
 }
-export declare function IndustryMermaidDiagram({ code, id, theme: themeOverride, onCopyError, onError, rootMargin, isModalMode, fitMode, }: IndustryMermaidDiagramProps): React.JSX.Element;
+export declare function IndustryMermaidDiagram({ code, id, theme: themeOverride, onCopyError, onError, rootMargin, isModalMode, }: IndustryMermaidDiagramProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=IndustryMermaidDiagram.d.ts.map

package/dist/industryMarkdown/components/IndustryMermaidDiagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IndustryMermaidDiagram.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryMermaidDiagram.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAyB,MAAM,qBAAqB,CAAC;AAEnE,UAAU,2BAA2B;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B;AAmBD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,EAAE,EACF,KAAK,EAAE,aAAa,EACpB,WAAW,EACX,OAAO,EACP,UAAoB,EACpB,WAAmB,EACnB,OAAkB,GACnB,EAAE,2BAA2B,qBA6N7B"}
+{"version":3,"file":"IndustryMermaidDiagram.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryMermaidDiagram.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAyB,MAAM,qBAAqB,CAAC;AAEnE,UAAU,2BAA2B;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmBD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,EAAE,EACF,KAAK,EAAE,aAAa,EACpB,WAAW,EACX,OAAO,EACP,UAAoB,EACpB,WAAmB,GACpB,EAAE,2BAA2B,qBA4U7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "themed-markdown",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Industry-themed markdown renderer with presentation capabilities",
   "main": "dist/index.js",
   "module": "dist/index.mjs",