@soroush.tech/markdown 0.1.0

package/dist/Mermaid-DqP2Q0bt.cjs

@@ -0,0 +1,236 @@
+const require_CodeBlock = require("./CodeBlock-Cymx1ZAY.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_design_system_Button = require("@soroush.tech/design-system/Button");
+let _soroush_tech_design_system_Flex = require("@soroush.tech/design-system/Flex");
+let _soroush_tech_design_system_Icon = require("@soroush.tech/design-system/Icon");
+let _soroush_tech_design_system_theme = require("@soroush.tech/design-system/theme");
+let _soroush_tech_design_system_View = require("@soroush.tech/design-system/View");
+let _soroush_tech_design_system_Grid = require("@soroush.tech/design-system/Grid");
+let _soroush_tech_design_system_Modal = require("@soroush.tech/design-system/Modal");
+//#region src/Mermaid/DiagramViewer.tsx
+const MIN_SCALE = .2;
+const MAX_SCALE = 5;
+const ZOOM_STEP = .2;
+const PAN_STEP = 48;
+const MIN_HEIGHT = 180;
+const MAX_HEIGHT = 640;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* Wraps a rendered mermaid diagram in a zoom/pan viewport with a themed control cluster
+* (bottom-right: a pan d-pad around a reset, plus zoom in/out) and an expand control
+* (top-right) that opens the diagram in a fullscreen dialog. Drag-to-pan and wheel-to-zoom
+* work too. Only the diagram layer clips; the controls sit above it, so a short diagram never
+* hides them. Everything is a CSS transform — no dependency.
+*/
+function DiagramViewer({ svg, expandable = true, fill = false }) {
+	const [scale, setScale] = (0, react.useState)(1);
+	const [offset, setOffset] = (0, react.useState)({
+		x: 0,
+		y: 0
+	});
+	const [dragging, setDragging] = (0, react.useState)(false);
+	const [fullscreen, setFullscreen] = (0, react.useState)(false);
+	const [naturalHeight, setNaturalHeight] = (0, react.useState)(0);
+	const dragOrigin = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		setNaturalHeight(contentRef.current.offsetHeight);
+	}, [svg]);
+	const zoomBy = (delta) => setScale((current) => clamp(current + delta, MIN_SCALE, MAX_SCALE));
+	const panBy = (dx, dy) => setOffset((current) => ({
+		x: current.x + dx,
+		y: current.y + dy
+	}));
+	const reset = () => {
+		setScale(1);
+		setOffset({
+			x: 0,
+			y: 0
+		});
+	};
+	const closeFullscreen = () => setFullscreen(false);
+	const onWheel = (event) => {
+		event.preventDefault();
+		zoomBy(event.deltaY < 0 ? ZOOM_STEP : -.2);
+	};
+	const onMouseDown = (event) => {
+		dragOrigin.current = {
+			x: event.clientX - offset.x,
+			y: event.clientY - offset.y
+		};
+		setDragging(true);
+	};
+	const onMouseMove = (event) => {
+		if (!dragOrigin.current) return;
+		setOffset({
+			x: event.clientX - dragOrigin.current.x,
+			y: event.clientY - dragOrigin.current.y
+		});
+	};
+	const endDrag = () => {
+		dragOrigin.current = null;
+		setDragging(false);
+	};
+	const control = (label, icon, onClick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Button.Button, {
+		type: "button",
+		variant: "outlined",
+		shape: "rounded",
+		size: "sm",
+		"aria-label": label,
+		onClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Icon.Icon, {
+			name: icon,
+			size: "1.1rem"
+		})
+	}, label);
+	const inlineHeight = Math.max(MIN_HEIGHT, clamp(naturalHeight, MIN_HEIGHT, MAX_HEIGHT) * scale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_soroush_tech_design_system_View.View, {
+		my: fill ? 0 : 2,
+		position: "relative",
+		maxWidth: "100%",
+		borderRadius: "md",
+		height: fill ? "100%" : void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Flex.Flex, {
+				onWheel: fill ? onWheel : void 0,
+				onMouseDown,
+				onMouseMove,
+				onMouseUp: endDrag,
+				onMouseLeave: endDrag,
+				overflow: "hidden",
+				borderRadius: "md",
+				alignItems: "center",
+				justifyContent: "center",
+				height: fill ? "100%" : `${inlineHeight}px`,
+				style: {
+					cursor: dragging ? "grabbing" : "grab",
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_View.View, {
+					ref: contentRef,
+					"data-testid": "diagram-transform",
+					style: {
+						transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+						transformOrigin: "center",
+						transition: dragging ? "none" : "transform 0.12s ease-out"
+					},
+					dangerouslySetInnerHTML: { __html: svg }
+				})
+			}),
+			expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_View.View, {
+				position: "absolute",
+				top: 1,
+				right: 1,
+				zIndex: 1,
+				children: control("Expand diagram", "fullscreen", () => setFullscreen(true))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_soroush_tech_design_system_Grid.Grid, {
+				position: "absolute",
+				bottom: 1,
+				right: 1,
+				zIndex: 1,
+				gridTemplateColumns: "repeat(3, auto)",
+				gap: .5,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": true }),
+					control("Pan up", "expand_less", () => panBy(0, -48)),
+					control("Zoom in", "zoom_in", () => zoomBy(ZOOM_STEP)),
+					control("Pan left", "chevron_left", () => panBy(-48, 0)),
+					control("Reset view", "refresh", reset),
+					control("Pan right", "chevron_right", () => panBy(PAN_STEP, 0)),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": true }),
+					control("Pan down", "expand_more", () => panBy(0, PAN_STEP)),
+					control("Zoom out", "zoom_out", () => zoomBy(-.2))
+				]
+			})
+		]
+	}), expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Modal.Modal, {
+		isOpen: fullscreen,
+		onClose: closeFullscreen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_soroush_tech_design_system_Flex.Flex, {
+			bg: "paper",
+			role: "dialog",
+			"aria-label": "Diagram fullscreen",
+			position: "fixed",
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0,
+			p: 2,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_View.View, {
+				position: "absolute",
+				top: 2,
+				right: 2,
+				zIndex: 1,
+				children: control("Close", "close", closeFullscreen)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Flex.Flex, {
+				flex: 1,
+				minHeight: 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiagramViewer, {
+					svg,
+					expandable: false,
+					fill: true
+				})
+			})]
+		})
+	})] });
+}
+//#endregion
+//#region src/Mermaid/Mermaid.tsx
+async function toSvg(id, chart, theme) {
+	const { default: mermaid } = await import("mermaid");
+	mermaid.initialize({
+		startOnLoad: false,
+		securityLevel: "strict",
+		suppressErrorRendering: true,
+		theme: theme.colorScheme === "dark" ? "dark" : "default",
+		themeVariables: {
+			darkMode: theme.colorScheme === "dark",
+			background: theme.background.paper,
+			fontFamily: theme.fonts.body,
+			mainBkg: theme.background.primary,
+			...theme.mermaid
+		}
+	});
+	const { svg } = await mermaid.render(id, chart);
+	return svg;
+}
+/**
+* Renders a mermaid diagram. Until the client renders the SVG — and if the source is
+* invalid — it falls back to the diagram source in a `CodeBlock`, so server output and
+* no-JS readers still show something useful and hydration stays stable.
+*/
+function Mermaid({ chart, diagram }) {
+	const theme = (0, _soroush_tech_design_system_theme.useTheme)();
+	const id = `mermaid-${(0, react.useId)().replace(/[^a-zA-Z0-9-]/g, "")}`;
+	const [svg, setSvg] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		let active = true;
+		toSvg(id, chart, theme).then((rendered) => {
+			if (active) setSvg(rendered);
+		}).catch(() => {
+			if (active) setSvg(null);
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		chart,
+		id,
+		theme
+	]);
+	if (svg) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiagramViewer, {
+		svg,
+		...diagram
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeBlock.CodeBlock, { children: chart });
+}
+//#endregion
+Object.defineProperty(exports, "Mermaid", {
+	enumerable: true,
+	get: function() {
+		return Mermaid;
+	}
+});

package/dist/Mermaid.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Mermaid = require("./Mermaid-DqP2Q0bt.cjs");
+exports.Mermaid = require_Mermaid.Mermaid;

package/dist/Mermaid.d.cts

@@ -0,0 +1,2 @@
+import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-BO0LyUUG.cjs";
+export { DiagramProps, Mermaid, MermaidProps };

package/dist/Mermaid.d.mts

@@ -0,0 +1,2 @@
+import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-BO0LyUUG.mjs";
+export { DiagramProps, Mermaid, MermaidProps };

package/dist/Mermaid.mjs

@@ -0,0 +1,2 @@
+import { t as Mermaid } from "./Mermaid-BclI9A7e.mjs";
+export { Mermaid };

package/dist/Preview-BVT70uXa.cjs

@@ -0,0 +1,276 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+const require_CodeBlock = require("./CodeBlock-Cymx1ZAY.cjs");
+const require_Mermaid = require("./Mermaid-DqP2Q0bt.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_design_system_Typography = require("@soroush.tech/design-system/Typography");
+let _soroush_tech_design_system = require("@soroush.tech/design-system");
+let react_markdown = require("react-markdown");
+react_markdown = __toESM(react_markdown, 1);
+let remark_gfm = require("remark-gfm");
+remark_gfm = __toESM(remark_gfm, 1);
+let rehype_highlight = require("rehype-highlight");
+rehype_highlight = __toESM(rehype_highlight, 1);
+let _soroush_tech_design_system_Quote = require("@soroush.tech/design-system/Quote");
+let _soroush_tech_design_system_Checkbox = require("@soroush.tech/design-system/Checkbox");
+let _soroush_tech_design_system_Image = require("@soroush.tech/design-system/Image");
+let _soroush_tech_design_system_Link = require("@soroush.tech/design-system/Link");
+let _soroush_tech_design_system_Table = require("@soroush.tech/design-system/Table");
+let _soroush_tech_design_system_View = require("@soroush.tech/design-system/View");
+function mermaidSource(children) {
+	return (Array.isArray(children) ? children.join("") : String(children ?? "")).replace(/\n$/, "");
+}
+function isMermaidBlock(children) {
+	if (!(0, react.isValidElement)(children)) return false;
+	const { className } = children.props;
+	return typeof className === "string" && className.includes("language-mermaid");
+}
+//#endregion
+//#region src/Preview/Preview.tsx
+const remarkPlugins = [remark_gfm.default];
+const rehypePlugins = [[rehype_highlight.default, { ignoreMissing: true }]];
+const PreviewRoot = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_View.View, {
+	name: "MarkdownPreview",
+	label: "MarkdownPreview"
+})({
+	minWidth: 0,
+	maxWidth: "100%",
+	overflowWrap: "break-word"
+});
+const EMPTY_SLOT_PROPS = {};
+const SlotPropsContext = (0, react.createContext)(EMPTY_SLOT_PROPS);
+function slotted(render) {
+	function Slotted(props) {
+		return render((0, react.useContext)(SlotPropsContext), props);
+	}
+	return Slotted;
+}
+const components = {
+	h1: slotted(({ h1 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		mt: 2,
+		variant: "h1",
+		color: "primary",
+		gutterBottom: true,
+		...h1,
+		children
+	})),
+	h2: slotted(({ h2 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		mt: 2,
+		variant: "h2",
+		color: "primary",
+		gutterBottom: true,
+		...h2,
+		children
+	})),
+	h3: slotted(({ h3 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		mt: 2,
+		variant: "h3",
+		color: "primary",
+		gutterBottom: true,
+		...h3,
+		children
+	})),
+	h4: slotted(({ h4 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		mt: 2,
+		variant: "h4",
+		gutterBottom: true,
+		...h4,
+		children
+	})),
+	h5: slotted(({ h5 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		mt: 2,
+		variant: "h5",
+		gutterBottom: true,
+		...h5,
+		children
+	})),
+	h6: slotted(({ h6 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		mt: 2,
+		variant: "h6",
+		gutterBottom: true,
+		...h6,
+		children
+	})),
+	p: slotted(({ p }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		variant: "body1",
+		color: "secondary",
+		mb: 2,
+		lineHeight: "relaxed",
+		...p,
+		children
+	})),
+	a: slotted(({ a }, { href, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Link.Link, {
+		href,
+		underline: "hover",
+		...a,
+		children
+	})),
+	strong: slotted(({ strong }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		as: "strong",
+		variant: "inherit",
+		fontWeight: "extraBold",
+		...strong,
+		children
+	})),
+	em: slotted(({ em }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		as: "em",
+		variant: "inherit",
+		fontStyle: "italic",
+		...em,
+		children
+	})),
+	ul: slotted(({ ul }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_View.View, {
+		as: "ul",
+		pl: 3,
+		mb: 2,
+		...ul,
+		children
+	})),
+	ol: slotted(({ ol }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_View.View, {
+		as: "ol",
+		pl: 3,
+		mb: 2,
+		...ol,
+		children
+	})),
+	li: slotted(({ li }, { children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		as: "li",
+		color: "secondary",
+		lineHeight: "base",
+		variant: "body1",
+		gutterBottom: true,
+		style: className?.includes("task-list-item") ? { listStyleType: "none" } : void 0,
+		...li,
+		children
+	})),
+	input: slotted(({ input }, { checked }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Checkbox.Checkbox, {
+		checked: Boolean(checked),
+		disabled: true,
+		color: "primary",
+		size: "sm",
+		"aria-label": "Task item",
+		mr: 1,
+		...input
+	})),
+	blockquote: slotted(({ blockquote }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Quote.Quote, {
+		as: "blockquote",
+		pl: 3,
+		py: 1,
+		my: 2,
+		...blockquote,
+		children
+	})),
+	code: slotted(({ code, mermaid }, { className, children }) => {
+		const classes = className ?? "";
+		if (classes.includes("language-mermaid")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Mermaid.Mermaid, {
+			chart: mermaidSource(children),
+			...mermaid
+		});
+		const isBlock = classes.includes("language-");
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+			as: "code",
+			color: "initial",
+			variant: "inherit",
+			fontFamily: "mono",
+			display: isBlock ? "block" : "inline",
+			bg: isBlock ? "transparent" : "paper",
+			px: isBlock ? 0 : 1,
+			borderRadius: "sm",
+			...code,
+			children
+		});
+	}),
+	pre: slotted(({ pre }, { children }) => isMermaidBlock(children) ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeBlock.CodeBlock, {
+		...pre,
+		children
+	})),
+	table: slotted(({ table }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Table.TableContainer, {
+		my: 2,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Table.Table, {
+			bg: "terminal",
+			borderRadius: "md",
+			...table,
+			children
+		})
+	})),
+	thead: slotted(({ thead }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Table.TableHead, {
+		bg: "grid",
+		color: "primary",
+		...thead,
+		children
+	})),
+	tbody: slotted(({ tbody }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Table.TableBody, {
+		...tbody,
+		children
+	})),
+	tr: slotted(({ tr }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Table.TableRow, {
+		isHoverable: true,
+		...tr,
+		children
+	})),
+	th: slotted(({ th }, { children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Table.TableCell, {
+		style,
+		...th,
+		children
+	})),
+	td: slotted(({ td }, { children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Table.TableCell, {
+		style,
+		...td,
+		children
+	})),
+	hr: slotted(({ hr }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_View.View, {
+		as: "hr",
+		my: 2,
+		height: "1px",
+		bg: "grid",
+		width: "100%",
+		border: "none",
+		...hr
+	})),
+	img: slotted(({ img }, { src, alt }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Image.Image, {
+		src,
+		alt,
+		maxWidth: "100%",
+		...img
+	}))
+};
+/** Renders a markdown string with every element mapped to a design-system primitive. */
+function Preview({ children, slotProps }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotPropsContext.Provider, {
+		value: slotProps ?? EMPTY_SLOT_PROPS,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+			components,
+			remarkPlugins,
+			rehypePlugins,
+			children
+		})
+	}) });
+}
+//#endregion
+Object.defineProperty(exports, "Preview", {
+	enumerable: true,
+	get: function() {
+		return Preview;
+	}
+});