@cloudvoyant/helix-svelte 0.15.0 → 0.16.0

package/dist/Mermaid.svelte

@@ -0,0 +1,92 @@
+<!-- libs/helix-svelte/src/Mermaid.svelte -->
+<!-- Closely based on: diffbook Mermaid (packages/diffbook-ui/src/components/Mermaid.tsx placeholder +
+     apps/book/src/components/article-body.tsx client renderer), mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    mermaidRootBase,
+    mermaidSourceBase,
+    mermaidSvgBase,
+    mermaidLoadingBase,
+    renderMermaidSource,
+    mermaidSvgAspectRatio,
+    cn,
+  } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    /** 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. */
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { code, svg = undefined, class: className = '', ...rest }: Props = $props();
+
+  type Status = 'loading' | 'done' | 'error';
+  let status = $state<Status>(svg !== undefined ? 'done' : 'loading');
+  let rendered = $state<string | null>(svg ?? null);
+
+  $effect(() => {
+    if (svg !== undefined) return; // prerendered — nothing to load client-side
+    let cancelled = false;
+    status = 'loading';
+    rendered = null;
+    renderMermaidSource(code)
+      .then((markup) => {
+        if (!cancelled) {
+          rendered = markup;
+          status = 'done';
+        }
+      })
+      .catch(() => {
+        if (!cancelled) status = 'error';
+      });
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  const aspectRatio = $derived(rendered !== null ? mermaidSvgAspectRatio(rendered) : undefined);
+  const classes = $derived(cn(mermaidRootBase, className));
+  // Svelte style is a string; append aspect-ratio last so the diagram's ratio wins over
+  // any caller style and the swap never shifts layout (matches the React wrapper).
+  const styles = $derived(
+    aspectRatio !== undefined
+      ? `${rest.style ? `${rest.style.trim().replace(/;?\s*$/, '')};` : ''}aspect-ratio: ${aspectRatio};`
+      : rest.style,
+  );
+</script>
+
+<Ark
+  as="div"
+  {...rest}
+  data-mermaid-code={JSON.stringify(code)}
+  data-mermaid-src={rendered !== null ? code : undefined}
+  data-mermaid-state={status}
+  style={styles}
+  class={classes}
+>
+  {#if rendered !== null}
+    <div class={mermaidSvgBase}>{@html rendered}</div>
+  {:else if status === 'error'}
+    <pre class={mermaidSourceBase}>{code}</pre>
+  {:else}
+    <div class={mermaidLoadingBase} role="status" aria-label="Rendering diagram" data-mermaid-loading>
+      <span
+        aria-hidden="true"
+        class="h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-muted-foreground/25 border-t-muted-foreground"></span>
+      <span class="text-sm text-muted-foreground">Rendering diagram</span>
+    </div>
+    <noscript>
+      <!-- Only active with JS disabled: hide the loading spinner, which can never resolve,
+           and show the raw source instead. -->
+      <style>[data-mermaid-loading]{display:none}</style>
+      <pre class={mermaidSourceBase}>{code}</pre>
+    </noscript>
+  {/if}
+</Ark>

package/dist/Mermaid.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    /** 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. */
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Mermaid: import("svelte").Component<Props, {}, "">;
+type Mermaid = ReturnType<typeof Mermaid>;
+export default Mermaid;

package/dist/index.d.ts

@@ -39,3 +39,4 @@ export * from './switch';
 export * from './select';
 export * from './combobox';
 export * from './tags-input';
+export { default as Mermaid } from './Mermaid.svelte';

package/dist/index.js

@@ -40,3 +40,4 @@ export * from './switch';
 export * from './select';
 export * from './combobox';
 export * from './tags-input';
+export { default as Mermaid } from './Mermaid.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudvoyant/helix-svelte",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "helix Svelte UI components",
   "license": "MIT",
   "type": "module",
@@ -23,15 +23,22 @@
     "access": "public"
   },
   "peerDependencies": {
-    "svelte": "^5.56.9"
+    "svelte": "^5.56.9",
+    "mermaid": "^11.16.0"
+  },
+  "peerDependenciesMeta": {
+    "mermaid": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@ark-ui/svelte": "^5.23.1",
-    "@cloudvoyant/helix": "0.15.0"
+    "@cloudvoyant/helix": "0.16.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "mermaid": "^11.16.0",
     "prettier-plugin-svelte": "^4.1.1",
     "svelte": "^5.56.9",
     "svelte-check": "^4.7.6",