themed-markdown 0.1.39 → 0.1.40

package/dist/index.mjs

@@ -1448,7 +1448,7 @@ import { MoveRight } from "lucide-react";
 import React5, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 
 // industryMarkdown/components/IndustryMermaidDiagram.tsx
-import { ZoomIn, ZoomOut, RotateCcw } from "lucide-react";
+import { ZoomIn, ZoomOut, RotateCcw, Expand } from "lucide-react";
 import React4, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 var getMermaidSync = () => {
   if (typeof window !== "undefined") {
@@ -1466,7 +1466,8 @@ function IndustryMermaidDiagram({
   onCopyError,
   onError,
   rootMargin = "200px",
-  isModalMode = false
+  isModalMode = false,
+  isFullSlide = false
 }) {
   const theme2 = themeOverride || theme;
   const [errorDetails, setErrorDetails] = useState3(null);
@@ -1474,7 +1475,9 @@ function IndustryMermaidDiagram({
   const [hasRendered, setHasRendered] = useState3(false);
   const [containerElement, setContainerElement] = useState3(null);
   const [zoomLevel, setZoomLevel] = useState3(1);
+  const [showFullSlide, setShowFullSlide] = useState3(false);
   const observerRef = useRef(null);
+  const wrapperRef = useRef(null);
   const containerRef = React4.useCallback((node) => {
     setContainerElement(node);
     if (observerRef.current) {
@@ -1558,7 +1561,13 @@ function IndustryMermaidDiagram({
           svgElement.style.height = "auto";
           svgElement.style.display = "block";
           svgElement.style.margin = "0 auto";
-          if (isModalMode) {
+          if (isFullSlide) {
+            svgElement.style.width = "100%";
+            svgElement.style.height = "100%";
+            svgElement.style.maxWidth = "100%";
+            svgElement.style.maxHeight = "100%";
+            svgElement.style.objectFit = "contain";
+          } else if (isModalMode) {
             svgElement.style.width = "auto";
             svgElement.style.height = "auto";
             const viewBox = svgElement.getAttribute("viewBox");
@@ -1609,15 +1618,15 @@ function IndustryMermaidDiagram({
       }
     };
     renderDiagram();
-  }, [hasRendered, code, id, theme2, containerElement, onError, isModalMode]);
+  }, [hasRendered, code, id, theme2, containerElement, onError, isModalMode, isFullSlide]);
   useEffect2(() => {
-    if (!containerElement || !hasRendered)
+    if (!hasRendered || !containerElement)
       return;
     const svgElement = containerElement.querySelector("svg");
     if (svgElement) {
       if (zoomLevel !== 1) {
         svgElement.style.transform = `scale(${zoomLevel})`;
-        svgElement.style.transformOrigin = "top center";
+        svgElement.style.transformOrigin = "center center";
         const containerRect = containerElement.getBoundingClientRect();
         const svgRect = svgElement.getBoundingClientRect();
         if (svgRect.width < containerRect.width) {
@@ -1627,14 +1636,14 @@ function IndustryMermaidDiagram({
         svgElement.style.transform = "";
         svgElement.style.transformOrigin = "";
         svgElement.style.margin = "0 auto";
-        if (!isModalMode) {
+        if (!isModalMode && !isFullSlide) {
           svgElement.style.maxHeight = "360px";
           svgElement.style.width = "auto";
           svgElement.style.maxWidth = "none";
         }
       }
     }
-  }, [zoomLevel, containerElement, hasRendered, isModalMode]);
+  }, [zoomLevel, containerElement, hasRendered, isModalMode, isFullSlide]);
   useEffect2(() => {
     if (errorDetails && onCopyError) {
       const handleKeyDown = (e) => {
@@ -1651,7 +1660,24 @@ function IndustryMermaidDiagram({
     }
     return;
   }, [errorDetails, onCopyError, containerElement]);
-  const containerStyle = isModalMode ? {
+  const containerStyle = isFullSlide ? {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: 0,
+    padding: theme2.space[4],
+    margin: 0,
+    overflow: "auto"
+  } : isModalMode ? {
     position: "relative",
     width: "fit-content",
     height: "fit-content",
@@ -1682,16 +1708,37 @@ function IndustryMermaidDiagram({
     fontSize: theme2.fontSizes[2],
     fontFamily: theme2.fonts.body
   };
-  return isModalMode ? /* @__PURE__ */ React4.createElement("div", {
-    ref: containerRef,
-    style: containerStyle,
-    className: "mermaid-container"
-  }, !hasRendered && /* @__PURE__ */ React4.createElement("div", {
-    style: placeholderStyle
-  }, /* @__PURE__ */ React4.createElement("div", null, "\uD83D\uDCCA Mermaid Diagram"), /* @__PURE__ */ React4.createElement("div", {
-    style: { fontSize: theme2.fontSizes[1], marginTop: theme2.space[2], opacity: 0.7 }
-  }, "Loading..."))) : /* @__PURE__ */ React4.createElement("div", {
-    style: { position: "relative" }
+  if (isModalMode || isFullSlide) {
+    return /* @__PURE__ */ React4.createElement("div", {
+      ref: containerRef,
+      style: containerStyle,
+      className: "mermaid-container"
+    }, !hasRendered && /* @__PURE__ */ React4.createElement("div", {
+      style: placeholderStyle
+    }, /* @__PURE__ */ React4.createElement("div", null, "\uD83D\uDCCA Mermaid Diagram"), /* @__PURE__ */ React4.createElement("div", {
+      style: { fontSize: theme2.fontSizes[1], marginTop: theme2.space[2], opacity: 0.7 }
+    }, "Loading...")));
+  }
+  const wrapperStyle = showFullSlide && !isFullSlide && !isModalMode ? {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: theme2.colors.background,
+    zIndex: 1000,
+    display: "flex",
+    flexDirection: "column",
+    padding: theme2.space[4]
+  } : {
+    position: "relative"
+  };
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref: wrapperRef,
+    style: wrapperStyle,
+    onClick: showFullSlide ? () => setShowFullSlide(false) : undefined
+  }, /* @__PURE__ */ React4.createElement("div", {
+    style: { position: "relative", width: "100%", height: showFullSlide ? "100%" : "auto" }
   }, hasRendered && /* @__PURE__ */ React4.createElement("div", {
     style: {
       position: "absolute",
@@ -1701,7 +1748,44 @@ function IndustryMermaidDiagram({
       display: "flex",
       gap: theme2.space[1]
     }
-  }, /* @__PURE__ */ React4.createElement("button", {
+  }, showFullSlide ? /* @__PURE__ */ React4.createElement("button", {
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowFullSlide(false);
+    },
+    style: {
+      padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
+      backgroundColor: theme2.colors.background,
+      color: theme2.colors.text,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.radii[1],
+      fontSize: theme2.fontSizes[1],
+      fontWeight: theme2.fontWeights.medium,
+      cursor: "pointer",
+      fontFamily: theme2.fonts.body
+    }
+  }, "Close") : /* @__PURE__ */ React4.createElement("button", {
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowFullSlide(true);
+    },
+    style: {
+      padding: theme2.space[1],
+      backgroundColor: theme2.colors.backgroundSecondary,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.radii[1],
+      color: theme2.colors.text,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "28px",
+      height: "28px"
+    },
+    title: "Expand to full slide"
+  }, /* @__PURE__ */ React4.createElement(Expand, {
+    size: 14
+  })), /* @__PURE__ */ React4.createElement("button", {
     onClick: () => setZoomLevel(Math.min(3, zoomLevel + 0.25)),
     disabled: zoomLevel >= 3,
     style: {
@@ -1762,14 +1846,31 @@ function IndustryMermaidDiagram({
   }, /* @__PURE__ */ React4.createElement(RotateCcw, {
     size: 14
   }))), /* @__PURE__ */ React4.createElement("div", {
+    style: showFullSlide ? {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "auto"
+    } : {},
+    onClick: (e) => e.stopPropagation()
+  }, /* @__PURE__ */ React4.createElement("div", {
     ref: containerRef,
-    style: containerStyle,
+    style: showFullSlide ? {
+      ...containerStyle,
+      maxHeight: "90%",
+      maxWidth: "90%",
+      margin: "auto",
+      border: "none",
+      backgroundColor: "transparent"
+    } : containerStyle,
     className: "mermaid-container"
   }, !hasRendered && /* @__PURE__ */ React4.createElement("div", {
     style: placeholderStyle
   }, /* @__PURE__ */ React4.createElement("div", null, "\uD83D\uDCCA Mermaid Diagram"), /* @__PURE__ */ React4.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

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SlidePresentation } from './SlidePresentation';
+declare const meta: Meta<typeof SlidePresentation>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ExpandableDiagrams: Story;
+export declare const MixedContent: Story;
+//# sourceMappingURL=FullSlideMermaid.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullSlideMermaid.stories.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/FullSlideMermaid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAexC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4LnC,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+E1B,CAAC"}

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

@@ -14,7 +14,8 @@ interface IndustryMermaidDiagramProps {
     onError?: (hasError: boolean) => void;
     rootMargin?: string;
     isModalMode?: boolean;
+    isFullSlide?: boolean;
 }
-export declare function IndustryMermaidDiagram({ code, id, theme: themeOverride, onCopyError, onError, rootMargin, isModalMode, }: IndustryMermaidDiagramProps): React.JSX.Element;
+export declare function IndustryMermaidDiagram({ code, id, theme: themeOverride, onCopyError, onError, rootMargin, isModalMode, isFullSlide, }: 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;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,qBAyX7B"}
+{"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;IACtB,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,EACnB,WAAmB,GACpB,EAAE,2BAA2B,qBAwe7B"}

package/package.json

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