@wireweave/markdown-plugin 1.0.0

package/README.md

@@ -0,0 +1,273 @@
+<p align="center">
+  <img src="logo.svg" width="128" height="128" alt="Wireweave Markdown">
+</p>
+
+<h1 align="center">@wireweave/markdown-plugin</h1>
+
+<p align="center">Markdown plugins to embed Wireweave diagrams in your documentation</p>
+
+## Installation
+
+```bash
+npm install @wireweave/markdown-plugin
+# or
+pnpm add @wireweave/markdown-plugin
+# or
+yarn add @wireweave/markdown-plugin
+```
+
+## Supported Libraries
+
+- **markdown-it** - Most popular Markdown parser
+- **marked** - Fast Markdown compiler
+- **remarkable** - Markdown parser with CommonMark support
+
+## Quick Start
+
+### markdown-it
+
+```typescript
+import MarkdownIt from 'markdown-it';
+import { markdownItWireframe } from '@wireweave/markdown-plugin';
+
+const md = new MarkdownIt();
+md.use(markdownItWireframe, {
+  format: 'svg-img',  // or 'html', 'svg'
+});
+
+const html = md.render(`
+# My Documentation
+
+\`\`\`wireframe
+page {
+  card p=4 {
+    title "Login"
+    input "Email" type=email
+    input "Password" type=password
+    button "Sign In" primary
+  }
+}
+\`\`\`
+`);
+```
+
+### marked
+
+```typescript
+import { marked } from 'marked';
+import { markedWireframe } from '@wireweave/markdown-plugin';
+
+marked.use(markedWireframe({
+  format: 'svg-img',
+}));
+
+const html = marked.parse(`
+# Documentation
+
+\`\`\`wireframe
+page { button "Click me" primary }
+\`\`\`
+`);
+```
+
+### remarkable
+
+```typescript
+import { Remarkable } from 'remarkable';
+import { remarkableWireframe } from '@wireweave/markdown-plugin';
+
+const md = new Remarkable();
+remarkableWireframe(md, {
+  format: 'svg-img',
+});
+
+const html = md.render(`
+\`\`\`wireframe
+page { card { text "Hello" } }
+\`\`\`
+`);
+```
+
+## Options
+
+All plugins accept the same options:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `format` | `'html' \| 'svg' \| 'svg-img'` | `'svg-img'` | Output format |
+| `containerClass` | `string` | `'wireframe-container'` | CSS class for wrapper div |
+| `errorHandling` | `'code' \| 'error' \| 'both'` | `'both'` | How to handle parse errors |
+
+### Output Formats
+
+- **`svg-img`** (default): Base64-encoded SVG in an `<img>` tag. Best for compatibility.
+- **`svg`**: Inline SVG. Allows CSS styling but may conflict with page styles.
+- **`html`**: Full HTML/CSS rendering. Interactive but may conflict with page styles.
+
+### Error Handling
+
+- **`both`** (default): Shows both error message and original code
+- **`error`**: Shows only the error message
+- **`code`**: Shows only the original code
+
+## Standalone Rendering
+
+You can also use the `renderWireframe` function directly:
+
+```typescript
+import { renderWireframe } from '@wireweave/markdown-plugin';
+
+const html = renderWireframe(`
+  page { button "Click" primary }
+`, {
+  format: 'svg',
+  containerClass: 'my-wireframe',
+});
+```
+
+## Styling
+
+Add CSS to style the wireframe containers:
+
+```css
+.wireframe-container {
+  margin: 1rem 0;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.wireframe-container img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.wireframe-error {
+  color: #d32f2f;
+  background: #ffebee;
+  padding: 1rem;
+  margin: 0;
+}
+
+.wireframe-source {
+  background: #f5f5f5;
+  padding: 1rem;
+  margin: 0;
+  overflow-x: auto;
+}
+```
+
+## Integration Examples
+
+### VitePress / VuePress
+
+```typescript
+// .vitepress/config.ts
+import { markdownItWireframe } from '@wireweave/markdown-plugin';
+
+export default {
+  markdown: {
+    config: (md) => {
+      md.use(markdownItWireframe);
+    },
+  },
+};
+```
+
+### Docusaurus
+
+```javascript
+// docusaurus.config.js
+const { markdownItWireframe } = require('@wireweave/markdown-plugin');
+
+module.exports = {
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          remarkPlugins: [],
+          rehypePlugins: [],
+        },
+      },
+    ],
+  ],
+  // For markdown-it based setup
+};
+```
+
+### Astro
+
+```typescript
+// astro.config.mjs
+import { markdownItWireframe } from '@wireweave/markdown-plugin';
+
+export default {
+  markdown: {
+    remarkPlugins: [],
+    rehypePlugins: [],
+    // For markdown-it integration
+  },
+};
+```
+
+## API Reference
+
+### `markdownItWireframe(md, options?)`
+
+Plugin for markdown-it.
+
+```typescript
+import type MarkdownIt from 'markdown-it';
+import type { WireframePluginOptions } from '@wireweave/markdown-plugin';
+
+function markdownItWireframe(
+  md: MarkdownIt,
+  options?: WireframePluginOptions
+): void;
+```
+
+### `markedWireframe(options?)`
+
+Extension for marked.
+
+```typescript
+import type { MarkedExtension } from 'marked';
+import type { WireframePluginOptions } from '@wireweave/markdown-plugin';
+
+function markedWireframe(
+  options?: WireframePluginOptions
+): MarkedExtension;
+```
+
+### `remarkableWireframe(md, options?)`
+
+Plugin for remarkable.
+
+```typescript
+import type { Remarkable } from 'remarkable';
+import type { WireframePluginOptions } from '@wireweave/markdown-plugin';
+
+function remarkableWireframe(
+  md: Remarkable,
+  options?: WireframePluginOptions
+): void;
+```
+
+### `renderWireframe(code, options?)`
+
+Standalone render function.
+
+```typescript
+import type { WireframePluginOptions } from '@wireweave/markdown-plugin';
+
+function renderWireframe(
+  code: string,
+  options?: WireframePluginOptions
+): string;
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,162 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  markdownItWireframe: () => markdownItWireframe,
+  markedWireframe: () => markedWireframe,
+  remarkableWireframe: () => remarkableWireframe,
+  renderWireframe: () => renderWireframe
+});
+module.exports = __toCommonJS(src_exports);
+var import_core = require("@wireweave/core");
+
+// src/markdown-it.ts
+function markdownItWireframe(md, options = {}) {
+  const defaultFence = md.renderer.rules.fence;
+  md.renderer.rules.fence = (tokens, idx, opts, env, self) => {
+    const token = tokens[idx];
+    const info = token.info.trim();
+    if (info === "wireframe" || info === "wf") {
+      return renderWireframe(token.content, options);
+    }
+    if (defaultFence) {
+      return defaultFence(tokens, idx, opts, env, self);
+    }
+    return `<pre><code class="language-${info}">${md.utils.escapeHtml(token.content)}</code></pre>`;
+  };
+}
+
+// src/marked.ts
+function markedWireframe(options = {}) {
+  return {
+    renderer: {
+      code(token) {
+        if (token.lang === "wireframe" || token.lang === "wf") {
+          return renderWireframe(token.text, options);
+        }
+        return false;
+      }
+    }
+  };
+}
+
+// src/remarkable.ts
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function remarkableWireframe(options = {}) {
+  return (md) => {
+    const rules = md.renderer.rules;
+    rules.fence = (tokens, idx, _opts, _env) => {
+      const token = tokens[idx];
+      const lang = token.params || "";
+      if (lang === "wireframe" || lang === "wf") {
+        return renderWireframe(token.content, options);
+      }
+      const langClass = lang ? ` class="language-${escapeHtml(lang)}"` : "";
+      return `<pre><code${langClass}>${escapeHtml(token.content)}</code></pre>
+`;
+    };
+  };
+}
+
+// src/index.ts
+var defaultOptions = {
+  format: "svg-img",
+  theme: "light",
+  containerClass: "wireframe-container",
+  errorHandling: "both",
+  containerWidth: 0,
+  // 0 means no scaling
+  maxScale: 1
+};
+function renderWireframe(code, options = {}) {
+  const opts = { ...defaultOptions, ...options };
+  try {
+    const doc = (0, import_core.parse)(code);
+    switch (opts.format) {
+      case "html": {
+        const { html, css } = (0, import_core.render)(doc, { theme: opts.theme });
+        return `
+          <div class="${opts.containerClass}">
+            <style>${css}</style>
+            ${html}
+          </div>
+        `.trim();
+      }
+      case "html-preview": {
+        const { html, css } = (0, import_core.render)(doc, { theme: opts.theme });
+        const firstPage = doc.children[0];
+        const viewport = (0, import_core.resolveViewport)(firstPage?.viewport, firstPage?.device);
+        const previewHtml = (0, import_core.wrapInPreviewContainer)(html, viewport, {
+          darkMode: opts.theme === "dark",
+          containerWidth: opts.containerWidth > 0 ? opts.containerWidth : void 0
+        });
+        return `
+          <div class="${opts.containerClass}">
+            <style>${css}</style>
+            ${previewHtml}
+          </div>
+        `.trim();
+      }
+      case "svg": {
+        const { svg } = (0, import_core.renderToSvg)(doc);
+        return `<div class="${opts.containerClass}">${svg}</div>`;
+      }
+      case "svg-img":
+      default: {
+        const { svg } = (0, import_core.renderToSvg)(doc);
+        const base64 = typeof Buffer !== "undefined" ? Buffer.from(svg).toString("base64") : btoa(svg);
+        return `
+          <div class="${opts.containerClass}">
+            <img src="data:image/svg+xml;base64,${base64}" alt="Wireframe" />
+          </div>
+        `.trim();
+      }
+    }
+  } catch (error) {
+    return renderError(code, error, opts);
+  }
+}
+function renderError(code, error, options) {
+  const errorHtml = `<pre class="wireframe-error">${escapeHtml2(error.message)}</pre>`;
+  const codeHtml = `<pre class="wireframe-source"><code>${escapeHtml2(code)}</code></pre>`;
+  switch (options.errorHandling) {
+    case "code":
+      return codeHtml;
+    case "error":
+      return errorHtml;
+    case "both":
+    default:
+      return `<div class="${options.containerClass} wireframe-error-container">${errorHtml}${codeHtml}</div>`;
+  }
+}
+function escapeHtml2(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  markdownItWireframe,
+  markedWireframe,
+  remarkableWireframe,
+  renderWireframe
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/markdown-it.ts","../src/marked.ts","../src/remarkable.ts"],"sourcesContent":["/**\n * @wireweave/markdown-plugin\n *\n * Markdown plugins for wireweave\n */\n\nimport {\n  parse,\n  render,\n  renderToSvg,\n  resolveViewport,\n  wrapInPreviewContainer,\n} from '@wireweave/core';\n\nexport interface WireframePluginOptions {\n  /**\n   * Output format\n   * - 'html': HTML/CSS rendering (inline styles)\n   * - 'html-preview': HTML with preview container (supports scaling)\n   * - 'svg': SVG image\n   * - 'svg-img': base64 encoded img tag\n   */\n  format?: 'html' | 'html-preview' | 'svg' | 'svg-img';\n\n  /**\n   * Theme for rendering\n   * - 'light': Light theme\n   * - 'dark': Dark theme\n   */\n  theme?: 'light' | 'dark';\n\n  /**\n   * Container class for wrapping SVG/HTML\n   */\n  containerClass?: string;\n\n  /**\n   * Error handling mode\n   * - 'code': Show original code\n   * - 'error': Show error message\n   * - 'both': Show both\n   */\n  errorHandling?: 'code' | 'error' | 'both';\n\n  /**\n   * Container width for preview scaling (in pixels)\n   * When set, the wireframe will be scaled to fit this width\n   */\n  containerWidth?: number;\n\n  /**\n   * Maximum scale factor (default: 1)\n   * Prevents the preview from being scaled up beyond this value\n   */\n  maxScale?: number;\n}\n\nconst defaultOptions: Required<WireframePluginOptions> = {\n  format: 'svg-img',\n  theme: 'light',\n  containerClass: 'wireframe-container',\n  errorHandling: 'both',\n  containerWidth: 0, // 0 means no scaling\n  maxScale: 1,\n};\n\n/**\n * Render wireframe code to output format\n */\nexport function renderWireframe(\n  code: string,\n  options: WireframePluginOptions = {}\n): string {\n  const opts = { ...defaultOptions, ...options };\n\n  try {\n    const doc = parse(code);\n\n    switch (opts.format) {\n      case 'html': {\n        const { html, css } = render(doc, { theme: opts.theme });\n        return `\n          <div class=\"${opts.containerClass}\">\n            <style>${css}</style>\n            ${html}\n          </div>\n        `.trim();\n      }\n\n      case 'html-preview': {\n        const { html, css } = render(doc, { theme: opts.theme });\n        const firstPage = doc.children[0];\n        const viewport = resolveViewport(firstPage?.viewport, firstPage?.device);\n\n        const previewHtml = wrapInPreviewContainer(html, viewport, {\n          darkMode: opts.theme === 'dark',\n          containerWidth: opts.containerWidth > 0 ? opts.containerWidth : undefined,\n        });\n\n        return `\n          <div class=\"${opts.containerClass}\">\n            <style>${css}</style>\n            ${previewHtml}\n          </div>\n        `.trim();\n      }\n\n      case 'svg': {\n        const { svg } = renderToSvg(doc);\n        return `<div class=\"${opts.containerClass}\">${svg}</div>`;\n      }\n\n      case 'svg-img':\n      default: {\n        const { svg } = renderToSvg(doc);\n        // Use btoa for browser compatibility, Buffer for Node.js\n        const base64 =\n          typeof Buffer !== 'undefined'\n            ? Buffer.from(svg).toString('base64')\n            : btoa(svg);\n        return `\n          <div class=\"${opts.containerClass}\">\n            <img src=\"data:image/svg+xml;base64,${base64}\" alt=\"Wireframe\" />\n          </div>\n        `.trim();\n      }\n    }\n  } catch (error) {\n    return renderError(code, error as Error, opts);\n  }\n}\n\nfunction renderError(\n  code: string,\n  error: Error,\n  options: Required<WireframePluginOptions>\n): string {\n  const errorHtml = `<pre class=\"wireframe-error\">${escapeHtml(error.message)}</pre>`;\n  const codeHtml = `<pre class=\"wireframe-source\"><code>${escapeHtml(code)}</code></pre>`;\n\n  switch (options.errorHandling) {\n    case 'code':\n      return codeHtml;\n    case 'error':\n      return errorHtml;\n    case 'both':\n    default:\n      return `<div class=\"${options.containerClass} wireframe-error-container\">${errorHtml}${codeHtml}</div>`;\n  }\n}\n\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#039;');\n}\n\nexport { markdownItWireframe } from './markdown-it';\nexport { markedWireframe } from './marked';\nexport { remarkableWireframe } from './remarkable';\n","/**\n * markdown-it plugin for wireweave\n */\n\nimport type MarkdownIt from 'markdown-it';\nimport { renderWireframe, WireframePluginOptions } from './index';\n\n/**\n * markdown-it plugin\n *\n * @example\n * ```typescript\n * import MarkdownIt from 'markdown-it';\n * import { markdownItWireframe } from '@wireweave/markdown-plugin/markdown-it';\n *\n * const md = new MarkdownIt();\n * md.use(markdownItWireframe, { format: 'svg' });\n *\n * const html = md.render('```wireframe\\npage { text \"Hello\" }\\n```');\n * ```\n */\nexport function markdownItWireframe(\n  md: MarkdownIt,\n  options: WireframePluginOptions = {}\n): void {\n  const defaultFence = md.renderer.rules.fence;\n\n  md.renderer.rules.fence = (tokens, idx, opts, env, self) => {\n    const token = tokens[idx];\n    const info = token.info.trim();\n\n    if (info === 'wireframe' || info === 'wf') {\n      return renderWireframe(token.content, options);\n    }\n\n    // Use default renderer for other code blocks\n    if (defaultFence) {\n      return defaultFence(tokens, idx, opts, env, self);\n    }\n\n    return `<pre><code class=\"language-${info}\">${md.utils.escapeHtml(token.content)}</code></pre>`;\n  };\n}\n","/**\n * marked extension for wireweave\n */\n\nimport type { MarkedExtension, Tokens } from 'marked';\nimport { renderWireframe, WireframePluginOptions } from './index';\n\n/**\n * marked extension\n *\n * @example\n * ```typescript\n * import { marked } from 'marked';\n * import { markedWireframe } from '@wireweave/markdown-plugin/marked';\n *\n * marked.use(markedWireframe({ format: 'svg' }));\n *\n * const html = marked.parse('```wireframe\\npage { text \"Hello\" }\\n```');\n * ```\n */\nexport function markedWireframe(\n  options: WireframePluginOptions = {}\n): MarkedExtension {\n  return {\n    renderer: {\n      code(token: Tokens.Code): string | false {\n        if (token.lang === 'wireframe' || token.lang === 'wf') {\n          return renderWireframe(token.text, options);\n        }\n        return false; // Use default renderer\n      },\n    },\n  };\n}\n","/**\n * remarkable plugin for wireweave\n */\n\nimport { renderWireframe, WireframePluginOptions } from './index';\n\n// Type declarations for remarkable (no @types/remarkable available)\ninterface RemarkableToken {\n  type: string;\n  params: string;\n  content: string;\n}\n\ninterface RemarkableRenderer {\n  rules: {\n    fence: (\n      tokens: RemarkableToken[],\n      idx: number,\n      options: Record<string, unknown>,\n      env: Record<string, unknown>\n    ) => string;\n  };\n}\n\ninterface RemarkableUtils {\n  escapeHtml: (text: string) => string;\n}\n\ninterface Remarkable {\n  renderer: RemarkableRenderer;\n  utils: RemarkableUtils;\n}\n\n/**\n * remarkable plugin\n *\n * @example\n * ```typescript\n * import { Remarkable } from 'remarkable';\n * import { remarkableWireframe } from '@wireweave/markdown-plugin/remarkable';\n *\n * const md = new Remarkable();\n * md.use(remarkableWireframe({ format: 'svg' }));\n *\n * const html = md.render('```wireframe\\npage { text \"Hello\" }\\n```');\n * ```\n */\n/**\n * Escape HTML entities\n */\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;');\n}\n\nexport function remarkableWireframe(\n  options: WireframePluginOptions = {}\n): (md: Remarkable) => void {\n  return (md: Remarkable) => {\n    const rules = md.renderer.rules;\n\n    // Override fence rule completely\n    rules.fence = (\n      tokens: RemarkableToken[],\n      idx: number,\n      _opts: Record<string, unknown>,\n      _env: Record<string, unknown>\n    ): string => {\n      const token = tokens[idx];\n      const lang = token.params || '';\n\n      if (lang === 'wireframe' || lang === 'wf') {\n        return renderWireframe(token.content, options);\n      }\n\n      // Render other code blocks with syntax highlighting class\n      const langClass = lang ? ` class=\"language-${escapeHtml(lang)}\"` : '';\n      return `<pre><code${langClass}>${escapeHtml(token.content)}</code></pre>\\n`;\n    };\n  };\n}\n"],"mappings":"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","names":["escapeHtml"]}

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+export { W as WireframePluginOptions, markdownItWireframe, m as markedWireframe, r as remarkableWireframe, a as renderWireframe } from './markdown-it.cjs';
+import 'markdown-it';
+import 'marked';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { W as WireframePluginOptions, markdownItWireframe, m as markedWireframe, r as remarkableWireframe, a as renderWireframe } from './markdown-it.js';
+import 'markdown-it';
+import 'marked';

package/dist/index.js

@@ -0,0 +1,140 @@
+// src/index.ts
+import {
+  parse,
+  render,
+  renderToSvg,
+  resolveViewport,
+  wrapInPreviewContainer
+} from "@wireweave/core";
+
+// src/markdown-it.ts
+function markdownItWireframe(md, options = {}) {
+  const defaultFence = md.renderer.rules.fence;
+  md.renderer.rules.fence = (tokens, idx, opts, env, self) => {
+    const token = tokens[idx];
+    const info = token.info.trim();
+    if (info === "wireframe" || info === "wf") {
+      return renderWireframe(token.content, options);
+    }
+    if (defaultFence) {
+      return defaultFence(tokens, idx, opts, env, self);
+    }
+    return `<pre><code class="language-${info}">${md.utils.escapeHtml(token.content)}</code></pre>`;
+  };
+}
+
+// src/marked.ts
+function markedWireframe(options = {}) {
+  return {
+    renderer: {
+      code(token) {
+        if (token.lang === "wireframe" || token.lang === "wf") {
+          return renderWireframe(token.text, options);
+        }
+        return false;
+      }
+    }
+  };
+}
+
+// src/remarkable.ts
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function remarkableWireframe(options = {}) {
+  return (md) => {
+    const rules = md.renderer.rules;
+    rules.fence = (tokens, idx, _opts, _env) => {
+      const token = tokens[idx];
+      const lang = token.params || "";
+      if (lang === "wireframe" || lang === "wf") {
+        return renderWireframe(token.content, options);
+      }
+      const langClass = lang ? ` class="language-${escapeHtml(lang)}"` : "";
+      return `<pre><code${langClass}>${escapeHtml(token.content)}</code></pre>
+`;
+    };
+  };
+}
+
+// src/index.ts
+var defaultOptions = {
+  format: "svg-img",
+  theme: "light",
+  containerClass: "wireframe-container",
+  errorHandling: "both",
+  containerWidth: 0,
+  // 0 means no scaling
+  maxScale: 1
+};
+function renderWireframe(code, options = {}) {
+  const opts = { ...defaultOptions, ...options };
+  try {
+    const doc = parse(code);
+    switch (opts.format) {
+      case "html": {
+        const { html, css } = render(doc, { theme: opts.theme });
+        return `
+          <div class="${opts.containerClass}">
+            <style>${css}</style>
+            ${html}
+          </div>
+        `.trim();
+      }
+      case "html-preview": {
+        const { html, css } = render(doc, { theme: opts.theme });
+        const firstPage = doc.children[0];
+        const viewport = resolveViewport(firstPage?.viewport, firstPage?.device);
+        const previewHtml = wrapInPreviewContainer(html, viewport, {
+          darkMode: opts.theme === "dark",
+          containerWidth: opts.containerWidth > 0 ? opts.containerWidth : void 0
+        });
+        return `
+          <div class="${opts.containerClass}">
+            <style>${css}</style>
+            ${previewHtml}
+          </div>
+        `.trim();
+      }
+      case "svg": {
+        const { svg } = renderToSvg(doc);
+        return `<div class="${opts.containerClass}">${svg}</div>`;
+      }
+      case "svg-img":
+      default: {
+        const { svg } = renderToSvg(doc);
+        const base64 = typeof Buffer !== "undefined" ? Buffer.from(svg).toString("base64") : btoa(svg);
+        return `
+          <div class="${opts.containerClass}">
+            <img src="data:image/svg+xml;base64,${base64}" alt="Wireframe" />
+          </div>
+        `.trim();
+      }
+    }
+  } catch (error) {
+    return renderError(code, error, opts);
+  }
+}
+function renderError(code, error, options) {
+  const errorHtml = `<pre class="wireframe-error">${escapeHtml2(error.message)}</pre>`;
+  const codeHtml = `<pre class="wireframe-source"><code>${escapeHtml2(code)}</code></pre>`;
+  switch (options.errorHandling) {
+    case "code":
+      return codeHtml;
+    case "error":
+      return errorHtml;
+    case "both":
+    default:
+      return `<div class="${options.containerClass} wireframe-error-container">${errorHtml}${codeHtml}</div>`;
+  }
+}
+function escapeHtml2(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+export {
+  markdownItWireframe,
+  markedWireframe,
+  remarkableWireframe,
+  renderWireframe
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/markdown-it.ts","../src/marked.ts","../src/remarkable.ts"],"sourcesContent":["/**\n * @wireweave/markdown-plugin\n *\n * Markdown plugins for wireweave\n */\n\nimport {\n  parse,\n  render,\n  renderToSvg,\n  resolveViewport,\n  wrapInPreviewContainer,\n} from '@wireweave/core';\n\nexport interface WireframePluginOptions {\n  /**\n   * Output format\n   * - 'html': HTML/CSS rendering (inline styles)\n   * - 'html-preview': HTML with preview container (supports scaling)\n   * - 'svg': SVG image\n   * - 'svg-img': base64 encoded img tag\n   */\n  format?: 'html' | 'html-preview' | 'svg' | 'svg-img';\n\n  /**\n   * Theme for rendering\n   * - 'light': Light theme\n   * - 'dark': Dark theme\n   */\n  theme?: 'light' | 'dark';\n\n  /**\n   * Container class for wrapping SVG/HTML\n   */\n  containerClass?: string;\n\n  /**\n   * Error handling mode\n   * - 'code': Show original code\n   * - 'error': Show error message\n   * - 'both': Show both\n   */\n  errorHandling?: 'code' | 'error' | 'both';\n\n  /**\n   * Container width for preview scaling (in pixels)\n   * When set, the wireframe will be scaled to fit this width\n   */\n  containerWidth?: number;\n\n  /**\n   * Maximum scale factor (default: 1)\n   * Prevents the preview from being scaled up beyond this value\n   */\n  maxScale?: number;\n}\n\nconst defaultOptions: Required<WireframePluginOptions> = {\n  format: 'svg-img',\n  theme: 'light',\n  containerClass: 'wireframe-container',\n  errorHandling: 'both',\n  containerWidth: 0, // 0 means no scaling\n  maxScale: 1,\n};\n\n/**\n * Render wireframe code to output format\n */\nexport function renderWireframe(\n  code: string,\n  options: WireframePluginOptions = {}\n): string {\n  const opts = { ...defaultOptions, ...options };\n\n  try {\n    const doc = parse(code);\n\n    switch (opts.format) {\n      case 'html': {\n        const { html, css } = render(doc, { theme: opts.theme });\n        return `\n          <div class=\"${opts.containerClass}\">\n            <style>${css}</style>\n            ${html}\n          </div>\n        `.trim();\n      }\n\n      case 'html-preview': {\n        const { html, css } = render(doc, { theme: opts.theme });\n        const firstPage = doc.children[0];\n        const viewport = resolveViewport(firstPage?.viewport, firstPage?.device);\n\n        const previewHtml = wrapInPreviewContainer(html, viewport, {\n          darkMode: opts.theme === 'dark',\n          containerWidth: opts.containerWidth > 0 ? opts.containerWidth : undefined,\n        });\n\n        return `\n          <div class=\"${opts.containerClass}\">\n            <style>${css}</style>\n            ${previewHtml}\n          </div>\n        `.trim();\n      }\n\n      case 'svg': {\n        const { svg } = renderToSvg(doc);\n        return `<div class=\"${opts.containerClass}\">${svg}</div>`;\n      }\n\n      case 'svg-img':\n      default: {\n        const { svg } = renderToSvg(doc);\n        // Use btoa for browser compatibility, Buffer for Node.js\n        const base64 =\n          typeof Buffer !== 'undefined'\n            ? Buffer.from(svg).toString('base64')\n            : btoa(svg);\n        return `\n          <div class=\"${opts.containerClass}\">\n            <img src=\"data:image/svg+xml;base64,${base64}\" alt=\"Wireframe\" />\n          </div>\n        `.trim();\n      }\n    }\n  } catch (error) {\n    return renderError(code, error as Error, opts);\n  }\n}\n\nfunction renderError(\n  code: string,\n  error: Error,\n  options: Required<WireframePluginOptions>\n): string {\n  const errorHtml = `<pre class=\"wireframe-error\">${escapeHtml(error.message)}</pre>`;\n  const codeHtml = `<pre class=\"wireframe-source\"><code>${escapeHtml(code)}</code></pre>`;\n\n  switch (options.errorHandling) {\n    case 'code':\n      return codeHtml;\n    case 'error':\n      return errorHtml;\n    case 'both':\n    default:\n      return `<div class=\"${options.containerClass} wireframe-error-container\">${errorHtml}${codeHtml}</div>`;\n  }\n}\n\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#039;');\n}\n\nexport { markdownItWireframe } from './markdown-it';\nexport { markedWireframe } from './marked';\nexport { remarkableWireframe } from './remarkable';\n","/**\n * markdown-it plugin for wireweave\n */\n\nimport type MarkdownIt from 'markdown-it';\nimport { renderWireframe, WireframePluginOptions } from './index';\n\n/**\n * markdown-it plugin\n *\n * @example\n * ```typescript\n * import MarkdownIt from 'markdown-it';\n * import { markdownItWireframe } from '@wireweave/markdown-plugin/markdown-it';\n *\n * const md = new MarkdownIt();\n * md.use(markdownItWireframe, { format: 'svg' });\n *\n * const html = md.render('```wireframe\\npage { text \"Hello\" }\\n```');\n * ```\n */\nexport function markdownItWireframe(\n  md: MarkdownIt,\n  options: WireframePluginOptions = {}\n): void {\n  const defaultFence = md.renderer.rules.fence;\n\n  md.renderer.rules.fence = (tokens, idx, opts, env, self) => {\n    const token = tokens[idx];\n    const info = token.info.trim();\n\n    if (info === 'wireframe' || info === 'wf') {\n      return renderWireframe(token.content, options);\n    }\n\n    // Use default renderer for other code blocks\n    if (defaultFence) {\n      return defaultFence(tokens, idx, opts, env, self);\n    }\n\n    return `<pre><code class=\"language-${info}\">${md.utils.escapeHtml(token.content)}</code></pre>`;\n  };\n}\n","/**\n * marked extension for wireweave\n */\n\nimport type { MarkedExtension, Tokens } from 'marked';\nimport { renderWireframe, WireframePluginOptions } from './index';\n\n/**\n * marked extension\n *\n * @example\n * ```typescript\n * import { marked } from 'marked';\n * import { markedWireframe } from '@wireweave/markdown-plugin/marked';\n *\n * marked.use(markedWireframe({ format: 'svg' }));\n *\n * const html = marked.parse('```wireframe\\npage { text \"Hello\" }\\n```');\n * ```\n */\nexport function markedWireframe(\n  options: WireframePluginOptions = {}\n): MarkedExtension {\n  return {\n    renderer: {\n      code(token: Tokens.Code): string | false {\n        if (token.lang === 'wireframe' || token.lang === 'wf') {\n          return renderWireframe(token.text, options);\n        }\n        return false; // Use default renderer\n      },\n    },\n  };\n}\n","/**\n * remarkable plugin for wireweave\n */\n\nimport { renderWireframe, WireframePluginOptions } from './index';\n\n// Type declarations for remarkable (no @types/remarkable available)\ninterface RemarkableToken {\n  type: string;\n  params: string;\n  content: string;\n}\n\ninterface RemarkableRenderer {\n  rules: {\n    fence: (\n      tokens: RemarkableToken[],\n      idx: number,\n      options: Record<string, unknown>,\n      env: Record<string, unknown>\n    ) => string;\n  };\n}\n\ninterface RemarkableUtils {\n  escapeHtml: (text: string) => string;\n}\n\ninterface Remarkable {\n  renderer: RemarkableRenderer;\n  utils: RemarkableUtils;\n}\n\n/**\n * remarkable plugin\n *\n * @example\n * ```typescript\n * import { Remarkable } from 'remarkable';\n * import { remarkableWireframe } from '@wireweave/markdown-plugin/remarkable';\n *\n * const md = new Remarkable();\n * md.use(remarkableWireframe({ format: 'svg' }));\n *\n * const html = md.render('```wireframe\\npage { text \"Hello\" }\\n```');\n * ```\n */\n/**\n * Escape HTML entities\n */\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;');\n}\n\nexport function remarkableWireframe(\n  options: WireframePluginOptions = {}\n): (md: Remarkable) => void {\n  return (md: Remarkable) => {\n    const rules = md.renderer.rules;\n\n    // Override fence rule completely\n    rules.fence = (\n      tokens: RemarkableToken[],\n      idx: number,\n      _opts: Record<string, unknown>,\n      _env: Record<string, unknown>\n    ): string => {\n      const token = tokens[idx];\n      const lang = token.params || '';\n\n      if (lang === 'wireframe' || lang === 'wf') {\n        return renderWireframe(token.content, options);\n      }\n\n      // Render other code blocks with syntax highlighting class\n      const langClass = lang ? ` class=\"language-${escapeHtml(lang)}\"` : '';\n      return `<pre><code${langClass}>${escapeHtml(token.content)}</code></pre>\\n`;\n    };\n  };\n}\n"],"mappings":"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","names":["escapeHtml"]}