themed-markdown 0.1.51 → 0.1.53

package/dist/index.mjs

@@ -1,3 +1,11 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // node_modules/@a24z/industry-theme/dist/esm/index.js
 import React, { createContext, useContext, useState, useEffect } from "react";
 import React2 from "react";
@@ -1440,6 +1448,28 @@ import React6, { useEffect as useEffect3, useRef as useRef2, useState as useStat
 // industryMarkdown/components/IndustryMermaidDiagram.tsx
 import { Expand, Copy, Check } from "lucide-react";
 import React5, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+
+// industryMarkdown/utils/platformDetection.ts
+function isReactNative() {
+  return typeof navigator !== "undefined" && navigator.product === "ReactNative";
+}
+function isWeb() {
+  return typeof window !== "undefined" && typeof document !== "undefined" && !isReactNative();
+}
+function hasDOMSupport() {
+  return isWeb();
+}
+function hasReactDOMSupport() {
+  if (!isWeb())
+    return false;
+  try {
+    return typeof document !== "undefined" && typeof document.body !== "undefined";
+  } catch {
+    return false;
+  }
+}
+
+// industryMarkdown/components/IndustryMermaidDiagram.tsx
 var getMermaidSync = () => {
   if (typeof window !== "undefined") {
     const mermaid = window.mermaid;
@@ -1461,6 +1491,42 @@ function IndustryMermaidDiagram({
   onExpandClick
 }) {
   const theme2 = themeOverride ?? theme;
+  if (!hasDOMSupport()) {
+    return /* @__PURE__ */ React5.createElement("div", {
+      style: {
+        padding: theme2.space[4],
+        backgroundColor: theme2.colors.backgroundSecondary,
+        border: `2px solid ${theme2.colors.warning || theme2.colors.primary}`,
+        borderRadius: theme2.radii[2],
+        margin: `${theme2.space[4]}px 0`
+      }
+    }, /* @__PURE__ */ React5.createElement("div", {
+      style: {
+        color: theme2.colors.warning || theme2.colors.text,
+        fontFamily: theme2.fonts.body,
+        fontSize: theme2.fontSizes[2],
+        marginBottom: theme2.space[2],
+        fontWeight: theme2.fontWeights.bold
+      }
+    }, "⚠️ Mermaid diagrams not supported"), /* @__PURE__ */ React5.createElement("div", {
+      style: {
+        color: theme2.colors.textSecondary || theme2.colors.text,
+        fontFamily: theme2.fonts.body,
+        fontSize: theme2.fontSizes[1],
+        opacity: 0.8,
+        marginBottom: theme2.space[2]
+      }
+    }, "Mermaid diagrams require browser DOM APIs and are only available in web environments."), /* @__PURE__ */ React5.createElement("div", {
+      style: {
+        color: theme2.colors.textTertiary || theme2.colors.textSecondary,
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[0],
+        opacity: 0.6,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word"
+      }
+    }, "Diagram code: ", code.substring(0, 100), code.length > 100 ? "..." : ""));
+  }
   const [errorDetails, setErrorDetails] = useState3(null);
   const [isIntersecting, setIsIntersecting] = useState3(false);
   const [hasRendered, setHasRendered] = useState3(false);
@@ -1540,7 +1606,8 @@ function IndustryMermaidDiagram({
         });
         containerElement.innerHTML = "";
         const elementId = `mermaid-${id}-${Date.now()}`;
-        const { bindFunctions } = await mermaid.render(elementId, code, containerElement);
+        const { svg, bindFunctions } = await mermaid.render(elementId, code);
+        containerElement.innerHTML = svg;
         if (bindFunctions) {
           bindFunctions(containerElement);
         }
@@ -2746,7 +2813,6 @@ var createIndustryMarkdownComponents = ({
 
 // industryMarkdown/components/IndustryMermaidModal.tsx
 import React11, { useEffect as useEffect6, useRef as useRef6 } from "react";
-import ReactDOM from "react-dom";
 
 // industryMarkdown/components/IndustryZoomableMermaidDiagram.tsx
 import React10, { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
@@ -2928,6 +2994,14 @@ function IndustryZoomableMermaidDiagram({
 }
 
 // industryMarkdown/components/IndustryMermaidModal.tsx
+var ReactDOM = null;
+if (hasReactDOMSupport()) {
+  try {
+    ReactDOM = __require("react-dom");
+  } catch (error) {
+    console.warn("ReactDOM is not available. Modal features will be disabled.");
+  }
+}
 function IndustryMermaidModal({
   isOpen,
   onClose,
@@ -2956,6 +3030,32 @@ function IndustryMermaidModal({
   if (!isOpen) {
     return null;
   }
+  if (!ReactDOM || !hasReactDOMSupport()) {
+    return /* @__PURE__ */ React11.createElement("div", {
+      style: {
+        padding: theme2.space[4],
+        backgroundColor: theme2.colors.background,
+        border: `2px solid ${theme2.colors.warning || theme2.colors.primary}`,
+        borderRadius: theme2.radii[2],
+        margin: theme2.space[4]
+      }
+    }, /* @__PURE__ */ React11.createElement("div", {
+      style: {
+        color: theme2.colors.warning || theme2.colors.text,
+        fontFamily: theme2.fonts.body,
+        fontSize: theme2.fontSizes[2],
+        marginBottom: theme2.space[2],
+        fontWeight: theme2.fontWeights.bold
+      }
+    }, "⚠️ Mermaid diagrams are not supported in React Native"), /* @__PURE__ */ React11.createElement("div", {
+      style: {
+        color: theme2.colors.textSecondary || theme2.colors.text,
+        fontFamily: theme2.fonts.body,
+        fontSize: theme2.fontSizes[1],
+        opacity: 0.8
+      }
+    }, "Mermaid diagrams require browser DOM APIs and are only available in web environments. Consider using a WebView component or alternative visualization library for React Native."));
+  }
   const modalContent = /* @__PURE__ */ React11.createElement("div", {
     onClick: handleBackdropClick,
     style: {
@@ -3033,6 +3133,8 @@ function IndustryMermaidModal({
     code: mermaidCode,
     theme: theme2
   }))));
+  if (!ReactDOM)
+    return null;
   return ReactDOM.createPortal(modalContent, document.body);
 }
 

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,EAAE,KAAK,EAAyB,MAAM,sBAAsB,CAAC;AAEpE,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,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;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAwBD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,EAAE,EACF,KAAK,EAAE,aAAa,EACpB,WAAW,EACX,OAAO,EACP,UAAoB,EACpB,WAAmB,EACnB,WAAmB,EACnB,aAAa,GACd,EAAE,2BAA2B,qBAyc7B"}
+{"version":3,"file":"IndustryMermaidDiagram.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryMermaidDiagram.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,EAAyB,MAAM,sBAAsB,CAAC;AAEpE,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,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;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAwBD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,EAAE,EACF,KAAK,EAAE,aAAa,EACpB,WAAW,EACX,OAAO,EACP,UAAoB,EACpB,WAAmB,EACnB,WAAmB,EACnB,aAAa,GACd,EAAE,2BAA2B,qBA6f7B"}

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

@@ -6,6 +6,6 @@ interface IndustryMermaidModalProps {
     mermaidCode: string;
     theme: Theme;
 }
-export declare function IndustryMermaidModal({ isOpen, onClose, mermaidCode, theme, }: IndustryMermaidModalProps): React.ReactPortal | null;
+export declare function IndustryMermaidModal({ isOpen, onClose, mermaidCode, theme, }: IndustryMermaidModalProps): React.JSX.Element | null;
 export {};
 //# sourceMappingURL=IndustryMermaidModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IndustryMermaidModal.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryMermaidModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,UAAU,yBAAyB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,OAAO,EACP,WAAW,EACX,KAAK,GACN,EAAE,yBAAyB,4BAoH3B"}
+{"version":3,"file":"IndustryMermaidModal.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/components/IndustryMermaidModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,UAAU,yBAAyB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,OAAO,EACP,WAAW,EACX,KAAK,GACN,EAAE,yBAAyB,4BA8J3B"}

package/dist/industryMarkdown/utils/platformDetection.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Platform detection utilities for handling web vs React Native environments
+ */
+/**
+ * Detects if the code is running in a React Native environment
+ */
+export declare function isReactNative(): boolean;
+/**
+ * Detects if the code is running in a web browser environment
+ */
+export declare function isWeb(): boolean;
+/**
+ * Checks if DOM-dependent features are available
+ */
+export declare function hasDOMSupport(): boolean;
+/**
+ * Checks if ReactDOM features like portals are available
+ */
+export declare function hasReactDOMSupport(): boolean;
+//# sourceMappingURL=platformDetection.d.ts.map

package/dist/industryMarkdown/utils/platformDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platformDetection.d.ts","sourceRoot":"","sources":["../../../industryMarkdown/utils/platformDetection.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,wBAAgB,aAAa,IAAI,OAAO,CAKvC;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,OAAO,CAM/B;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,OAAO,CAEvC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAW5C"}

package/package.json

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