@cloudvoyant/helix 0.15.0 → 0.16.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+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 __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -77,6 +87,11 @@ __export(index_exports, {
   hstackBase: () => hstackBase,
   inputVariants: () => inputVariants,
   itemVariants: () => itemVariants,
+  mermaidLoadingBase: () => mermaidLoadingBase,
+  mermaidRootBase: () => mermaidRootBase,
+  mermaidSourceBase: () => mermaidSourceBase,
+  mermaidSvgAspectRatio: () => mermaidSvgAspectRatio,
+  mermaidSvgBase: () => mermaidSvgBase,
   nativeSelectIconBase: () => nativeSelectIconBase,
   nativeSelectVariants: () => nativeSelectVariants,
   nativeSelectWrapperBase: () => nativeSelectWrapperBase,
@@ -128,6 +143,8 @@ __export(index_exports, {
   popoverIndicatorBase: () => popoverIndicatorBase,
   popoverPositionerBase: () => popoverPositionerBase,
   popoverTitleBase: () => popoverTitleBase,
+  renderMermaidSource: () => renderMermaidSource,
+  resolveMermaidThemeVariables: () => resolveMermaidThemeVariables,
   rowBase: () => rowBase,
   scrollContentBase: () => scrollContentBase,
   scrollCornerBase: () => scrollCornerBase,
@@ -939,6 +956,67 @@ var tagsInputItemTextBase = "truncate";
 var tagsInputItemInputBase = "w-16 border-0 bg-transparent text-xs outline-none";
 var tagsInputItemDeleteTriggerBase = "flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0";
 var tagsInputClearTriggerBase = "ms-auto flex shrink-0 items-center justify-center self-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0";
+
+// src/mermaid.ts
+var mermaidRootBase = "not-prose my-4 overflow-x-auto";
+var mermaidSourceBase = "w-full overflow-x-auto bg-muted p-4 font-mono text-sm whitespace-pre";
+var mermaidSvgBase = "flex w-full items-center justify-center [&>svg]:max-w-full";
+var mermaidLoadingBase = "flex min-h-40 w-full items-center justify-center gap-3";
+var mermaidThemeVariableTokens = {
+  primaryColor: "--card",
+  primaryTextColor: "--foreground",
+  primaryBorderColor: "--border",
+  lineColor: "--muted-foreground",
+  secondaryColor: "--muted",
+  tertiaryColor: "--accent",
+  background: "--background",
+  mainBkg: "--card",
+  nodeBorder: "--border"
+};
+var scratchCtx;
+function normalizeMermaidColor(value) {
+  scratchCtx ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  if (!scratchCtx) return value;
+  scratchCtx.fillStyle = "rgb(1 2 3)";
+  scratchCtx.fillStyle = value;
+  scratchCtx.clearRect(0, 0, 1, 1);
+  scratchCtx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = scratchCtx.getImageData(0, 0, 1, 1).data;
+  if (r === 1 && g === 2 && b === 3 && a === 255) return value;
+  if (a === 255) return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+  return `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`;
+}
+function resolveMermaidThemeVariables() {
+  const styles = getComputedStyle(document.documentElement);
+  const themeVariables = {};
+  for (const [key, token] of Object.entries(mermaidThemeVariableTokens)) {
+    const value = styles.getPropertyValue(token).trim();
+    if (value) themeVariables[key] = normalizeMermaidColor(value);
+  }
+  return themeVariables;
+}
+var mermaidSeq = 0;
+function mermaidSvgAspectRatio(svg) {
+  const match = /viewBox="\s*[-\d.]+\s+[-\d.]+\s+([-\d.]+)\s+([-\d.]+)"/.exec(svg);
+  if (!match) return void 0;
+  const width = Number(match[1]);
+  const height = Number(match[2]);
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return void 0;
+  return `${width} / ${height}`;
+}
+async function renderMermaidSource(code) {
+  const mermaid = (await import("mermaid")).default;
+  const dark = document.documentElement.classList.contains("dark");
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: "strict",
+    suppressErrorRendering: true,
+    theme: dark ? "dark" : "default",
+    themeVariables: resolveMermaidThemeVariables()
+  });
+  const { svg } = await mermaid.render(`helix-mmd-${Date.now()}-${mermaidSeq++}`, code);
+  return svg;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SIDEBAR_KEYBOARD_SHORTCUT,
@@ -998,6 +1076,11 @@ var tagsInputClearTriggerBase = "ms-auto flex shrink-0 items-center justify-cent
   hstackBase,
   inputVariants,
   itemVariants,
+  mermaidLoadingBase,
+  mermaidRootBase,
+  mermaidSourceBase,
+  mermaidSvgAspectRatio,
+  mermaidSvgBase,
   nativeSelectIconBase,
   nativeSelectVariants,
   nativeSelectWrapperBase,
@@ -1049,6 +1132,8 @@ var tagsInputClearTriggerBase = "ms-auto flex shrink-0 items-center justify-cent
   popoverIndicatorBase,
   popoverPositionerBase,
   popoverTitleBase,
+  renderMermaidSource,
+  resolveMermaidThemeVariables,
   rowBase,
   scrollContentBase,
   scrollCornerBase,

package/dist/index.d.cts

@@ -388,4 +388,51 @@ interface TagsInputProps {
     className?: string;
 }
 
-export { type BadgeProps, type BadgeVariants, type ButtonProps, type ButtonVariants, type CardCoverProps, type CardProps, type CardVariants, type CheckboxProps, type CheckboxVariants, type ComboboxItemVariants, type ComboboxProps, type InputProps, type InputVariants, type ItemProps, type ItemVariants, type NativeSelectVariants, type NavbarDensity, type NavbarMenuDensity, type NavbarMenuVariant, type NavbarVariant, type NumberInputProps, type PageGutterContentVariants, type PageGutterVariants, type PageVariants, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, type SelectItemData, type SelectProps, type SidebarContextProps, type SidebarMenuButtonVariants, type SwitchProps, type SwitchVariants, THEMES, THEME_NAMES, type TabsIndicatorVariants, type TabsListVariants, type TagsInputProps, type TextareaProps, type ThemeMeta, type ToggleButtonProps, type ToggleButtonVariants, badgeVariants, buttonVariants, cardBodyBase, cardCoverVariants, cardDescriptionBase, cardFooterBase, cardHeaderBase, cardTitleBase, cardVariants, centerBase, checkboxGroupBase, checkboxIndicatorBase, checkboxLabelBase, checkboxVariants, cn, colBase, comboboxClearTriggerBase, comboboxContentBase, comboboxControlBase, comboboxEmptyBase, comboboxInputBase, comboboxItemGroupLabelBase, comboboxItemIndicatorBase, comboboxItemVariants, comboboxListBase, comboboxPositionerBase, comboboxTriggerBase, containerBase, dialogBackdropBase, dialogCloseTriggerBase, dialogContentBase, dialogDescriptionBase, dialogFooterBase, dialogFooterStickyBase, dialogFullscreenContentBase, dialogHeaderBase, dialogHeaderStickyBase, dialogPositionerBase, dialogTitleBase, fieldErrorBase, fieldHelperBase, fieldLabelBase, fieldRequiredIndicatorBase, fieldRootBase, fieldsetErrorBase, fieldsetHelperBase, fieldsetLegendBase, fieldsetRootBase, hstackBase, inputVariants, itemVariants, nativeSelectIconBase, nativeSelectVariants, nativeSelectWrapperBase, navbarActionsBase, navbarActivationAreaBase, navbarBrandBase, navbarContainerBase, navbarDensityVariants, navbarMenuBase, navbarMenuContentBase, navbarMenuIndicatorBase, navbarMenuItemBase, navbarMenuLinkBase, navbarMenuListBase, navbarMenuPlacementVariants, navbarMenuRootBase, navbarMenuTriggerStyle, navbarMenuViewportBase, navbarMenuViewportPositionerBase, navbarMobileActionsBase, navbarMobileBase, navbarMobileContentBase, navbarMobileHeaderBase, navbarMobileMenuBase, navbarMobileMenuContentBase, navbarMobileMenuTriggerBase, navbarShrunkBase, navbarTriggerVariants, navbarVariants, numberInputControlBase, numberInputInputBase, numberInputRootBase, numberInputTriggerBase, pageContentBase, pageFooterBase, pageGutterAreaBase, pageGutterContentVariants, pageGutterVariants, pageSectionBase, pageVariants, paginationEllipsisBase, paginationItemBase, paginationRootBase, paginationTriggerBase, popoverArrowBase, popoverCloseTriggerBase, popoverContentBase, popoverDescriptionBase, popoverIndicatorBase, popoverPositionerBase, popoverTitleBase, rowBase, scrollContentBase, scrollCornerBase, scrollRootBase, scrollScrollbarBase, scrollThumbBase, scrollViewportBase, selectClearTriggerBase, selectContentBase, selectIndicatorBase, selectItemBase, selectItemGroupLabelBase, selectItemIndicatorBase, selectItemTextBase, selectPositionerBase, selectTriggerBase, selectValueBase, sidebarMenuButtonVariants, sidebarStyles, splitterPanelBase, splitterResizeTriggerBase, splitterResizeTriggerIndicatorBase, splitterResizeTriggerSeparatorBase, splitterRootBase, stackBase, switchControlBase, switchLabelBase, switchThumbBase, switchVariants, tabsContentBase, tabsIndicatorBase, tabsIndicatorVariants, tabsListBase, tabsListVariants, tabsRootBase, tabsTriggerBase, tagsInputClearTriggerBase, tagsInputControlBase, tagsInputInputBase, tagsInputItemBase, tagsInputItemDeleteTriggerBase, tagsInputItemInputBase, tagsInputItemTextBase, tagsInputRootBase, textareaBase, toggleButtonVariants, tooltipArrowBase, tooltipContentBase, tooltipPositionerBase, vstackBase, windowBodyBase, windowCloseTriggerBase, windowContentBase, windowControlBase, windowDragTriggerBase, windowHeaderBase, windowPositionerBase, windowResizeTriggerBase, windowStageTriggerBase, windowTitleBase };
+/** Root container: escapes prose margins, keeps wide diagrams scrollable. Height is driven by
+ *  the diagram's own content (the SVG's natural size, or the prerendered `viewBox` `aspect-ratio`
+ *  layered via inline style) — never a fixed minimum, so a short diagram is not left sitting in a
+ *  taller empty container. */
+declare const mermaidRootBase = "not-prose my-4 overflow-x-auto";
+/** Placeholder `<pre>` showing the raw diagram source until (or instead of) rendering.
+ *  No border or rounded corners — it must look identical to the rendered SVG. */
+declare const mermaidSourceBase = "w-full overflow-x-auto bg-muted p-4 font-mono text-sm whitespace-pre";
+/** Wrapper around the rendered SVG: centered both axes, scaled down to the container width. */
+declare const mermaidSvgBase = "flex w-full items-center justify-center [&>svg]:max-w-full";
+/** Loading state shown while the client-side mermaid render is in flight: a centered spinner +
+ *  label. Chrome-free so it matches the rendered SVG. Reserves a minimum footprint (`min-h-40`)
+ *  so the swap doesn't collapse the layout for short diagrams; the rendered SVG takes its natural
+ *  height (root has no fixed minimum). */
+declare const mermaidLoadingBase = "flex min-h-40 w-full items-center justify-center gap-3";
+/** Props shared by the React and Svelte Mermaid wrappers; framework wrappers intersect
+ *  these with their host element's HTML attributes. */
+interface MermaidProps {
+    /** Mermaid diagram source. */
+    code: string;
+    /** Pre-rendered SVG markup. When provided the component renders it immediately and never
+     *  imports `mermaid` client-side — the server-side rendering path. The SVG should carry a
+     *  `viewBox` so its aspect ratio can be reserved (no layout shift). */
+    svg?: string;
+    /** Extra classes for the root container. */
+    className?: string;
+}
+/** Resolves mermaid `themeVariables` from the shadcn CSS custom properties currently set
+ *  on `<html>` (so the active color mode and any brand-theme overrides are picked up).
+ *  Tokens that are undefined are omitted, leaving mermaid's own theme defaults in place. */
+declare function resolveMermaidThemeVariables(): Record<string, string>;
+/** Extracts the width/height ratio from an SVG `viewBox` (e.g. `0 0 800 450` → `800 / 450`).
+ *  Used to reserve the diagram's aspect ratio on the root container so the client-rendered
+ *  SVG swap never shifts the layout. Returns `undefined` when the SVG has no parseable viewBox. */
+declare function mermaidSvgAspectRatio(svg: string): string | undefined;
+/**
+ * Dynamically import mermaid and render `code` to an SVG string. The import stays
+ * client-only and lazy, so mermaid never enters the SSR/initial bundle.
+ *
+ * Diagrams render with `securityLevel: 'strict'` (mermaid sanitizes the output with
+ * DOMPurify and strips click bindings, so untrusted sources cannot execute scripts) and
+ * `suppressErrorRendering: true` (without it, mermaid appends a "Syntax error in text"
+ * SVG to `document.body` on every failed render). The render-id counter is module-scoped
+ * so concurrent renders from any number of components never collide.
+ */
+declare function renderMermaidSource(code: string): Promise<string>;
+
+export { type BadgeProps, type BadgeVariants, type ButtonProps, type ButtonVariants, type CardCoverProps, type CardProps, type CardVariants, type CheckboxProps, type CheckboxVariants, type ComboboxItemVariants, type ComboboxProps, type InputProps, type InputVariants, type ItemProps, type ItemVariants, type MermaidProps, type NativeSelectVariants, type NavbarDensity, type NavbarMenuDensity, type NavbarMenuVariant, type NavbarVariant, type NumberInputProps, type PageGutterContentVariants, type PageGutterVariants, type PageVariants, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, type SelectItemData, type SelectProps, type SidebarContextProps, type SidebarMenuButtonVariants, type SwitchProps, type SwitchVariants, THEMES, THEME_NAMES, type TabsIndicatorVariants, type TabsListVariants, type TagsInputProps, type TextareaProps, type ThemeMeta, type ToggleButtonProps, type ToggleButtonVariants, badgeVariants, buttonVariants, cardBodyBase, cardCoverVariants, cardDescriptionBase, cardFooterBase, cardHeaderBase, cardTitleBase, cardVariants, centerBase, checkboxGroupBase, checkboxIndicatorBase, checkboxLabelBase, checkboxVariants, cn, colBase, comboboxClearTriggerBase, comboboxContentBase, comboboxControlBase, comboboxEmptyBase, comboboxInputBase, comboboxItemGroupLabelBase, comboboxItemIndicatorBase, comboboxItemVariants, comboboxListBase, comboboxPositionerBase, comboboxTriggerBase, containerBase, dialogBackdropBase, dialogCloseTriggerBase, dialogContentBase, dialogDescriptionBase, dialogFooterBase, dialogFooterStickyBase, dialogFullscreenContentBase, dialogHeaderBase, dialogHeaderStickyBase, dialogPositionerBase, dialogTitleBase, fieldErrorBase, fieldHelperBase, fieldLabelBase, fieldRequiredIndicatorBase, fieldRootBase, fieldsetErrorBase, fieldsetHelperBase, fieldsetLegendBase, fieldsetRootBase, hstackBase, inputVariants, itemVariants, mermaidLoadingBase, mermaidRootBase, mermaidSourceBase, mermaidSvgAspectRatio, mermaidSvgBase, nativeSelectIconBase, nativeSelectVariants, nativeSelectWrapperBase, navbarActionsBase, navbarActivationAreaBase, navbarBrandBase, navbarContainerBase, navbarDensityVariants, navbarMenuBase, navbarMenuContentBase, navbarMenuIndicatorBase, navbarMenuItemBase, navbarMenuLinkBase, navbarMenuListBase, navbarMenuPlacementVariants, navbarMenuRootBase, navbarMenuTriggerStyle, navbarMenuViewportBase, navbarMenuViewportPositionerBase, navbarMobileActionsBase, navbarMobileBase, navbarMobileContentBase, navbarMobileHeaderBase, navbarMobileMenuBase, navbarMobileMenuContentBase, navbarMobileMenuTriggerBase, navbarShrunkBase, navbarTriggerVariants, navbarVariants, numberInputControlBase, numberInputInputBase, numberInputRootBase, numberInputTriggerBase, pageContentBase, pageFooterBase, pageGutterAreaBase, pageGutterContentVariants, pageGutterVariants, pageSectionBase, pageVariants, paginationEllipsisBase, paginationItemBase, paginationRootBase, paginationTriggerBase, popoverArrowBase, popoverCloseTriggerBase, popoverContentBase, popoverDescriptionBase, popoverIndicatorBase, popoverPositionerBase, popoverTitleBase, renderMermaidSource, resolveMermaidThemeVariables, rowBase, scrollContentBase, scrollCornerBase, scrollRootBase, scrollScrollbarBase, scrollThumbBase, scrollViewportBase, selectClearTriggerBase, selectContentBase, selectIndicatorBase, selectItemBase, selectItemGroupLabelBase, selectItemIndicatorBase, selectItemTextBase, selectPositionerBase, selectTriggerBase, selectValueBase, sidebarMenuButtonVariants, sidebarStyles, splitterPanelBase, splitterResizeTriggerBase, splitterResizeTriggerIndicatorBase, splitterResizeTriggerSeparatorBase, splitterRootBase, stackBase, switchControlBase, switchLabelBase, switchThumbBase, switchVariants, tabsContentBase, tabsIndicatorBase, tabsIndicatorVariants, tabsListBase, tabsListVariants, tabsRootBase, tabsTriggerBase, tagsInputClearTriggerBase, tagsInputControlBase, tagsInputInputBase, tagsInputItemBase, tagsInputItemDeleteTriggerBase, tagsInputItemInputBase, tagsInputItemTextBase, tagsInputRootBase, textareaBase, toggleButtonVariants, tooltipArrowBase, tooltipContentBase, tooltipPositionerBase, vstackBase, windowBodyBase, windowCloseTriggerBase, windowContentBase, windowControlBase, windowDragTriggerBase, windowHeaderBase, windowPositionerBase, windowResizeTriggerBase, windowStageTriggerBase, windowTitleBase };

package/dist/index.d.ts

@@ -388,4 +388,51 @@ interface TagsInputProps {
     className?: string;
 }
 
-export { type BadgeProps, type BadgeVariants, type ButtonProps, type ButtonVariants, type CardCoverProps, type CardProps, type CardVariants, type CheckboxProps, type CheckboxVariants, type ComboboxItemVariants, type ComboboxProps, type InputProps, type InputVariants, type ItemProps, type ItemVariants, type NativeSelectVariants, type NavbarDensity, type NavbarMenuDensity, type NavbarMenuVariant, type NavbarVariant, type NumberInputProps, type PageGutterContentVariants, type PageGutterVariants, type PageVariants, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, type SelectItemData, type SelectProps, type SidebarContextProps, type SidebarMenuButtonVariants, type SwitchProps, type SwitchVariants, THEMES, THEME_NAMES, type TabsIndicatorVariants, type TabsListVariants, type TagsInputProps, type TextareaProps, type ThemeMeta, type ToggleButtonProps, type ToggleButtonVariants, badgeVariants, buttonVariants, cardBodyBase, cardCoverVariants, cardDescriptionBase, cardFooterBase, cardHeaderBase, cardTitleBase, cardVariants, centerBase, checkboxGroupBase, checkboxIndicatorBase, checkboxLabelBase, checkboxVariants, cn, colBase, comboboxClearTriggerBase, comboboxContentBase, comboboxControlBase, comboboxEmptyBase, comboboxInputBase, comboboxItemGroupLabelBase, comboboxItemIndicatorBase, comboboxItemVariants, comboboxListBase, comboboxPositionerBase, comboboxTriggerBase, containerBase, dialogBackdropBase, dialogCloseTriggerBase, dialogContentBase, dialogDescriptionBase, dialogFooterBase, dialogFooterStickyBase, dialogFullscreenContentBase, dialogHeaderBase, dialogHeaderStickyBase, dialogPositionerBase, dialogTitleBase, fieldErrorBase, fieldHelperBase, fieldLabelBase, fieldRequiredIndicatorBase, fieldRootBase, fieldsetErrorBase, fieldsetHelperBase, fieldsetLegendBase, fieldsetRootBase, hstackBase, inputVariants, itemVariants, nativeSelectIconBase, nativeSelectVariants, nativeSelectWrapperBase, navbarActionsBase, navbarActivationAreaBase, navbarBrandBase, navbarContainerBase, navbarDensityVariants, navbarMenuBase, navbarMenuContentBase, navbarMenuIndicatorBase, navbarMenuItemBase, navbarMenuLinkBase, navbarMenuListBase, navbarMenuPlacementVariants, navbarMenuRootBase, navbarMenuTriggerStyle, navbarMenuViewportBase, navbarMenuViewportPositionerBase, navbarMobileActionsBase, navbarMobileBase, navbarMobileContentBase, navbarMobileHeaderBase, navbarMobileMenuBase, navbarMobileMenuContentBase, navbarMobileMenuTriggerBase, navbarShrunkBase, navbarTriggerVariants, navbarVariants, numberInputControlBase, numberInputInputBase, numberInputRootBase, numberInputTriggerBase, pageContentBase, pageFooterBase, pageGutterAreaBase, pageGutterContentVariants, pageGutterVariants, pageSectionBase, pageVariants, paginationEllipsisBase, paginationItemBase, paginationRootBase, paginationTriggerBase, popoverArrowBase, popoverCloseTriggerBase, popoverContentBase, popoverDescriptionBase, popoverIndicatorBase, popoverPositionerBase, popoverTitleBase, rowBase, scrollContentBase, scrollCornerBase, scrollRootBase, scrollScrollbarBase, scrollThumbBase, scrollViewportBase, selectClearTriggerBase, selectContentBase, selectIndicatorBase, selectItemBase, selectItemGroupLabelBase, selectItemIndicatorBase, selectItemTextBase, selectPositionerBase, selectTriggerBase, selectValueBase, sidebarMenuButtonVariants, sidebarStyles, splitterPanelBase, splitterResizeTriggerBase, splitterResizeTriggerIndicatorBase, splitterResizeTriggerSeparatorBase, splitterRootBase, stackBase, switchControlBase, switchLabelBase, switchThumbBase, switchVariants, tabsContentBase, tabsIndicatorBase, tabsIndicatorVariants, tabsListBase, tabsListVariants, tabsRootBase, tabsTriggerBase, tagsInputClearTriggerBase, tagsInputControlBase, tagsInputInputBase, tagsInputItemBase, tagsInputItemDeleteTriggerBase, tagsInputItemInputBase, tagsInputItemTextBase, tagsInputRootBase, textareaBase, toggleButtonVariants, tooltipArrowBase, tooltipContentBase, tooltipPositionerBase, vstackBase, windowBodyBase, windowCloseTriggerBase, windowContentBase, windowControlBase, windowDragTriggerBase, windowHeaderBase, windowPositionerBase, windowResizeTriggerBase, windowStageTriggerBase, windowTitleBase };
+/** Root container: escapes prose margins, keeps wide diagrams scrollable. Height is driven by
+ *  the diagram's own content (the SVG's natural size, or the prerendered `viewBox` `aspect-ratio`
+ *  layered via inline style) — never a fixed minimum, so a short diagram is not left sitting in a
+ *  taller empty container. */
+declare const mermaidRootBase = "not-prose my-4 overflow-x-auto";
+/** Placeholder `<pre>` showing the raw diagram source until (or instead of) rendering.
+ *  No border or rounded corners — it must look identical to the rendered SVG. */
+declare const mermaidSourceBase = "w-full overflow-x-auto bg-muted p-4 font-mono text-sm whitespace-pre";
+/** Wrapper around the rendered SVG: centered both axes, scaled down to the container width. */
+declare const mermaidSvgBase = "flex w-full items-center justify-center [&>svg]:max-w-full";
+/** Loading state shown while the client-side mermaid render is in flight: a centered spinner +
+ *  label. Chrome-free so it matches the rendered SVG. Reserves a minimum footprint (`min-h-40`)
+ *  so the swap doesn't collapse the layout for short diagrams; the rendered SVG takes its natural
+ *  height (root has no fixed minimum). */
+declare const mermaidLoadingBase = "flex min-h-40 w-full items-center justify-center gap-3";
+/** Props shared by the React and Svelte Mermaid wrappers; framework wrappers intersect
+ *  these with their host element's HTML attributes. */
+interface MermaidProps {
+    /** Mermaid diagram source. */
+    code: string;
+    /** Pre-rendered SVG markup. When provided the component renders it immediately and never
+     *  imports `mermaid` client-side — the server-side rendering path. The SVG should carry a
+     *  `viewBox` so its aspect ratio can be reserved (no layout shift). */
+    svg?: string;
+    /** Extra classes for the root container. */
+    className?: string;
+}
+/** Resolves mermaid `themeVariables` from the shadcn CSS custom properties currently set
+ *  on `<html>` (so the active color mode and any brand-theme overrides are picked up).
+ *  Tokens that are undefined are omitted, leaving mermaid's own theme defaults in place. */
+declare function resolveMermaidThemeVariables(): Record<string, string>;
+/** Extracts the width/height ratio from an SVG `viewBox` (e.g. `0 0 800 450` → `800 / 450`).
+ *  Used to reserve the diagram's aspect ratio on the root container so the client-rendered
+ *  SVG swap never shifts the layout. Returns `undefined` when the SVG has no parseable viewBox. */
+declare function mermaidSvgAspectRatio(svg: string): string | undefined;
+/**
+ * Dynamically import mermaid and render `code` to an SVG string. The import stays
+ * client-only and lazy, so mermaid never enters the SSR/initial bundle.
+ *
+ * Diagrams render with `securityLevel: 'strict'` (mermaid sanitizes the output with
+ * DOMPurify and strips click bindings, so untrusted sources cannot execute scripts) and
+ * `suppressErrorRendering: true` (without it, mermaid appends a "Syntax error in text"
+ * SVG to `document.body` on every failed render). The render-id counter is module-scoped
+ * so concurrent renders from any number of components never collide.
+ */
+declare function renderMermaidSource(code: string): Promise<string>;
+
+export { type BadgeProps, type BadgeVariants, type ButtonProps, type ButtonVariants, type CardCoverProps, type CardProps, type CardVariants, type CheckboxProps, type CheckboxVariants, type ComboboxItemVariants, type ComboboxProps, type InputProps, type InputVariants, type ItemProps, type ItemVariants, type MermaidProps, type NativeSelectVariants, type NavbarDensity, type NavbarMenuDensity, type NavbarMenuVariant, type NavbarVariant, type NumberInputProps, type PageGutterContentVariants, type PageGutterVariants, type PageVariants, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, type SelectItemData, type SelectProps, type SidebarContextProps, type SidebarMenuButtonVariants, type SwitchProps, type SwitchVariants, THEMES, THEME_NAMES, type TabsIndicatorVariants, type TabsListVariants, type TagsInputProps, type TextareaProps, type ThemeMeta, type ToggleButtonProps, type ToggleButtonVariants, badgeVariants, buttonVariants, cardBodyBase, cardCoverVariants, cardDescriptionBase, cardFooterBase, cardHeaderBase, cardTitleBase, cardVariants, centerBase, checkboxGroupBase, checkboxIndicatorBase, checkboxLabelBase, checkboxVariants, cn, colBase, comboboxClearTriggerBase, comboboxContentBase, comboboxControlBase, comboboxEmptyBase, comboboxInputBase, comboboxItemGroupLabelBase, comboboxItemIndicatorBase, comboboxItemVariants, comboboxListBase, comboboxPositionerBase, comboboxTriggerBase, containerBase, dialogBackdropBase, dialogCloseTriggerBase, dialogContentBase, dialogDescriptionBase, dialogFooterBase, dialogFooterStickyBase, dialogFullscreenContentBase, dialogHeaderBase, dialogHeaderStickyBase, dialogPositionerBase, dialogTitleBase, fieldErrorBase, fieldHelperBase, fieldLabelBase, fieldRequiredIndicatorBase, fieldRootBase, fieldsetErrorBase, fieldsetHelperBase, fieldsetLegendBase, fieldsetRootBase, hstackBase, inputVariants, itemVariants, mermaidLoadingBase, mermaidRootBase, mermaidSourceBase, mermaidSvgAspectRatio, mermaidSvgBase, nativeSelectIconBase, nativeSelectVariants, nativeSelectWrapperBase, navbarActionsBase, navbarActivationAreaBase, navbarBrandBase, navbarContainerBase, navbarDensityVariants, navbarMenuBase, navbarMenuContentBase, navbarMenuIndicatorBase, navbarMenuItemBase, navbarMenuLinkBase, navbarMenuListBase, navbarMenuPlacementVariants, navbarMenuRootBase, navbarMenuTriggerStyle, navbarMenuViewportBase, navbarMenuViewportPositionerBase, navbarMobileActionsBase, navbarMobileBase, navbarMobileContentBase, navbarMobileHeaderBase, navbarMobileMenuBase, navbarMobileMenuContentBase, navbarMobileMenuTriggerBase, navbarShrunkBase, navbarTriggerVariants, navbarVariants, numberInputControlBase, numberInputInputBase, numberInputRootBase, numberInputTriggerBase, pageContentBase, pageFooterBase, pageGutterAreaBase, pageGutterContentVariants, pageGutterVariants, pageSectionBase, pageVariants, paginationEllipsisBase, paginationItemBase, paginationRootBase, paginationTriggerBase, popoverArrowBase, popoverCloseTriggerBase, popoverContentBase, popoverDescriptionBase, popoverIndicatorBase, popoverPositionerBase, popoverTitleBase, renderMermaidSource, resolveMermaidThemeVariables, rowBase, scrollContentBase, scrollCornerBase, scrollRootBase, scrollScrollbarBase, scrollThumbBase, scrollViewportBase, selectClearTriggerBase, selectContentBase, selectIndicatorBase, selectItemBase, selectItemGroupLabelBase, selectItemIndicatorBase, selectItemTextBase, selectPositionerBase, selectTriggerBase, selectValueBase, sidebarMenuButtonVariants, sidebarStyles, splitterPanelBase, splitterResizeTriggerBase, splitterResizeTriggerIndicatorBase, splitterResizeTriggerSeparatorBase, splitterRootBase, stackBase, switchControlBase, switchLabelBase, switchThumbBase, switchVariants, tabsContentBase, tabsIndicatorBase, tabsIndicatorVariants, tabsListBase, tabsListVariants, tabsRootBase, tabsTriggerBase, tagsInputClearTriggerBase, tagsInputControlBase, tagsInputInputBase, tagsInputItemBase, tagsInputItemDeleteTriggerBase, tagsInputItemInputBase, tagsInputItemTextBase, tagsInputRootBase, textareaBase, toggleButtonVariants, tooltipArrowBase, tooltipContentBase, tooltipPositionerBase, vstackBase, windowBodyBase, windowCloseTriggerBase, windowContentBase, windowControlBase, windowDragTriggerBase, windowHeaderBase, windowPositionerBase, windowResizeTriggerBase, windowStageTriggerBase, windowTitleBase };

package/dist/index.js

@@ -746,6 +746,67 @@ var tagsInputItemTextBase = "truncate";
 var tagsInputItemInputBase = "w-16 border-0 bg-transparent text-xs outline-none";
 var tagsInputItemDeleteTriggerBase = "flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0";
 var tagsInputClearTriggerBase = "ms-auto flex shrink-0 items-center justify-center self-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0";
+
+// src/mermaid.ts
+var mermaidRootBase = "not-prose my-4 overflow-x-auto";
+var mermaidSourceBase = "w-full overflow-x-auto bg-muted p-4 font-mono text-sm whitespace-pre";
+var mermaidSvgBase = "flex w-full items-center justify-center [&>svg]:max-w-full";
+var mermaidLoadingBase = "flex min-h-40 w-full items-center justify-center gap-3";
+var mermaidThemeVariableTokens = {
+  primaryColor: "--card",
+  primaryTextColor: "--foreground",
+  primaryBorderColor: "--border",
+  lineColor: "--muted-foreground",
+  secondaryColor: "--muted",
+  tertiaryColor: "--accent",
+  background: "--background",
+  mainBkg: "--card",
+  nodeBorder: "--border"
+};
+var scratchCtx;
+function normalizeMermaidColor(value) {
+  scratchCtx ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  if (!scratchCtx) return value;
+  scratchCtx.fillStyle = "rgb(1 2 3)";
+  scratchCtx.fillStyle = value;
+  scratchCtx.clearRect(0, 0, 1, 1);
+  scratchCtx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = scratchCtx.getImageData(0, 0, 1, 1).data;
+  if (r === 1 && g === 2 && b === 3 && a === 255) return value;
+  if (a === 255) return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+  return `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`;
+}
+function resolveMermaidThemeVariables() {
+  const styles = getComputedStyle(document.documentElement);
+  const themeVariables = {};
+  for (const [key, token] of Object.entries(mermaidThemeVariableTokens)) {
+    const value = styles.getPropertyValue(token).trim();
+    if (value) themeVariables[key] = normalizeMermaidColor(value);
+  }
+  return themeVariables;
+}
+var mermaidSeq = 0;
+function mermaidSvgAspectRatio(svg) {
+  const match = /viewBox="\s*[-\d.]+\s+[-\d.]+\s+([-\d.]+)\s+([-\d.]+)"/.exec(svg);
+  if (!match) return void 0;
+  const width = Number(match[1]);
+  const height = Number(match[2]);
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return void 0;
+  return `${width} / ${height}`;
+}
+async function renderMermaidSource(code) {
+  const mermaid = (await import("mermaid")).default;
+  const dark = document.documentElement.classList.contains("dark");
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: "strict",
+    suppressErrorRendering: true,
+    theme: dark ? "dark" : "default",
+    themeVariables: resolveMermaidThemeVariables()
+  });
+  const { svg } = await mermaid.render(`helix-mmd-${Date.now()}-${mermaidSeq++}`, code);
+  return svg;
+}
 export {
   SIDEBAR_KEYBOARD_SHORTCUT,
   SIDEBAR_WIDTH,
@@ -804,6 +865,11 @@ export {
   hstackBase,
   inputVariants,
   itemVariants,
+  mermaidLoadingBase,
+  mermaidRootBase,
+  mermaidSourceBase,
+  mermaidSvgAspectRatio,
+  mermaidSvgBase,
   nativeSelectIconBase,
   nativeSelectVariants,
   nativeSelectWrapperBase,
@@ -855,6 +921,8 @@ export {
   popoverIndicatorBase,
   popoverPositionerBase,
   popoverTitleBase,
+  renderMermaidSource,
+  resolveMermaidThemeVariables,
   rowBase,
   scrollContentBase,
   scrollCornerBase,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudvoyant/helix",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "helix shared component interfaces, cva variants, and theme",
   "license": "MIT",
   "type": "module",
@@ -33,8 +33,17 @@
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0"
   },
+  "peerDependencies": {
+    "mermaid": "^11.16.0"
+  },
+  "peerDependenciesMeta": {
+    "mermaid": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^22.0.0",
+    "mermaid": "^11.16.0",
     "vitest": "^2.0.0"
   },
   "scripts": {