@wireweave/markdown-plugin 1.0.0

package/dist/marked.js

@@ -0,0 +1,99 @@
+// src/index.ts
+import {
+  parse,
+  render,
+  renderToSvg,
+  resolveViewport,
+  wrapInPreviewContainer
+} from "@wireweave/core";
+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">${escapeHtml(error.message)}</pre>`;
+  const codeHtml = `<pre class="wireframe-source"><code>${escapeHtml(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 escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+
+// src/marked.ts
+function markedWireframe(options = {}) {
+  return {
+    renderer: {
+      code(token) {
+        if (token.lang === "wireframe" || token.lang === "wf") {
+          return renderWireframe(token.text, options);
+        }
+        return false;
+      }
+    }
+  };
+}
+export {
+  markedWireframe
+};
+//# sourceMappingURL=marked.js.map

package/dist/marked.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/marked.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 * 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"],"mappings":";AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA6CP,IAAM,iBAAmD;AAAA,EACvD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA;AAAA,EAChB,UAAU;AACZ;AAKO,SAAS,gBACd,MACA,UAAkC,CAAC,GAC3B;AACR,QAAM,OAAO,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAE7C,MAAI;AACF,UAAM,MAAM,MAAM,IAAI;AAEtB,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK,QAAQ;AACX,cAAM,EAAE,MAAM,IAAI,IAAI,OAAO,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC;AACvD,eAAO;AAAA,wBACS,KAAK,cAAc;AAAA,qBACtB,GAAG;AAAA,cACV,IAAI;AAAA;AAAA,UAER,KAAK;AAAA,MACT;AAAA,MAEA,KAAK,gBAAgB;AACnB,cAAM,EAAE,MAAM,IAAI,IAAI,OAAO,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC;AACvD,cAAM,YAAY,IAAI,SAAS,CAAC;AAChC,cAAM,WAAW,gBAAgB,WAAW,UAAU,WAAW,MAAM;AAEvE,cAAM,cAAc,uBAAuB,MAAM,UAAU;AAAA,UACzD,UAAU,KAAK,UAAU;AAAA,UACzB,gBAAgB,KAAK,iBAAiB,IAAI,KAAK,iBAAiB;AAAA,QAClE,CAAC;AAED,eAAO;AAAA,wBACS,KAAK,cAAc;AAAA,qBACtB,GAAG;AAAA,cACV,WAAW;AAAA;AAAA,UAEf,KAAK;AAAA,MACT;AAAA,MAEA,KAAK,OAAO;AACV,cAAM,EAAE,IAAI,IAAI,YAAY,GAAG;AAC/B,eAAO,eAAe,KAAK,cAAc,KAAK,GAAG;AAAA,MACnD;AAAA,MAEA,KAAK;AAAA,MACL,SAAS;AACP,cAAM,EAAE,IAAI,IAAI,YAAY,GAAG;AAE/B,cAAM,SACJ,OAAO,WAAW,cACd,OAAO,KAAK,GAAG,EAAE,SAAS,QAAQ,IAClC,KAAK,GAAG;AACd,eAAO;AAAA,wBACS,KAAK,cAAc;AAAA,kDACO,MAAM;AAAA;AAAA,UAE9C,KAAK;AAAA,MACT;AAAA,IACF;AAAA,EACF,SAAS,OAAO;AACd,WAAO,YAAY,MAAM,OAAgB,IAAI;AAAA,EAC/C;AACF;AAEA,SAAS,YACP,MACA,OACA,SACQ;AACR,QAAM,YAAY,gCAAgC,WAAW,MAAM,OAAO,CAAC;AAC3E,QAAM,WAAW,uCAAuC,WAAW,IAAI,CAAC;AAExE,UAAQ,QAAQ,eAAe;AAAA,IAC7B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO,eAAe,QAAQ,cAAc,+BAA+B,SAAS,GAAG,QAAQ;AAAA,EACnG;AACF;AAEA,SAAS,WAAW,MAAsB;AACxC,SAAO,KACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,QAAQ,EACtB,QAAQ,MAAM,QAAQ;AAC3B;;;AC1IO,SAAS,gBACd,UAAkC,CAAC,GAClB;AACjB,SAAO;AAAA,IACL,UAAU;AAAA,MACR,KAAK,OAAoC;AACvC,YAAI,MAAM,SAAS,eAAe,MAAM,SAAS,MAAM;AACrD,iBAAO,gBAAgB,MAAM,MAAM,OAAO;AAAA,QAC5C;AACA,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/remarkable.cjs

@@ -0,0 +1,126 @@
+"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/remarkable.ts
+var remarkable_exports = {};
+__export(remarkable_exports, {
+  remarkableWireframe: () => remarkableWireframe
+});
+module.exports = __toCommonJS(remarkable_exports);
+
+// src/index.ts
+var import_core = require("@wireweave/core");
+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">${escapeHtml(error.message)}</pre>`;
+  const codeHtml = `<pre class="wireframe-source"><code>${escapeHtml(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 escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+
+// src/remarkable.ts
+function escapeHtml2(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-${escapeHtml2(lang)}"` : "";
+      return `<pre><code${langClass}>${escapeHtml2(token.content)}</code></pre>
+`;
+    };
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  remarkableWireframe
+});
+//# sourceMappingURL=remarkable.cjs.map

package/dist/remarkable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/remarkable.ts","../src/index.ts"],"sourcesContent":["/**\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","/**\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"],"mappings":"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","names":["escapeHtml"]}

package/dist/remarkable.d.cts

@@ -0,0 +1,3 @@
+export { r as remarkableWireframe } from './markdown-it.cjs';
+import 'markdown-it';
+import 'marked';

package/dist/remarkable.d.ts

@@ -0,0 +1,3 @@
+export { r as remarkableWireframe } from './markdown-it.js';
+import 'markdown-it';
+import 'marked';

package/dist/remarkable.js

@@ -0,0 +1,105 @@
+// src/index.ts
+import {
+  parse,
+  render,
+  renderToSvg,
+  resolveViewport,
+  wrapInPreviewContainer
+} from "@wireweave/core";
+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">${escapeHtml(error.message)}</pre>`;
+  const codeHtml = `<pre class="wireframe-source"><code>${escapeHtml(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 escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+
+// src/remarkable.ts
+function escapeHtml2(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-${escapeHtml2(lang)}"` : "";
+      return `<pre><code${langClass}>${escapeHtml2(token.content)}</code></pre>
+`;
+    };
+  };
+}
+export {
+  remarkableWireframe
+};
+//# sourceMappingURL=remarkable.js.map

package/dist/remarkable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.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 * 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/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@wireweave/markdown-plugin",
+  "version": "1.0.0",
+  "description": "Markdown plugins for wireweave",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./markdown-it": {
+      "types": "./dist/markdown-it.d.ts",
+      "import": "./dist/markdown-it.js",
+      "require": "./dist/markdown-it.cjs"
+    },
+    "./marked": {
+      "types": "./dist/marked.d.ts",
+      "import": "./dist/marked.js",
+      "require": "./dist/marked.cjs"
+    },
+    "./remarkable": {
+      "types": "./dist/remarkable.d.ts",
+      "import": "./dist/remarkable.js",
+      "require": "./dist/remarkable.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "markdown-it": ">=12.0.0",
+    "marked": ">=4.0.0",
+    "remarkable": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "markdown-it": {
+      "optional": true
+    },
+    "marked": {
+      "optional": true
+    },
+    "remarkable": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@wireweave/core": "1.1.0-beta.0"
+  },
+  "devDependencies": {
+    "@release-it/conventional-changelog": "^10.0.4",
+    "@types/markdown-it": "^14.1.2",
+    "markdown-it": "^14.1.0",
+    "marked": "^15.0.6",
+    "release-it": "^19.2.3",
+    "remarkable": "^2.0.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^3.1.1"
+  },
+  "keywords": [
+    "wireframe",
+    "markdown",
+    "plugin",
+    "markdown-it",
+    "marked",
+    "remarkable"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wireweave/markdown-plugin.git"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "release": "release-it"
+  }
+}

package/src/index.ts

@@ -0,0 +1,163 @@
+/**
+ * @wireweave/markdown-plugin
+ *
+ * Markdown plugins for wireweave
+ */
+
+import {
+  parse,
+  render,
+  renderToSvg,
+  resolveViewport,
+  wrapInPreviewContainer,
+} from '@wireweave/core';
+
+export interface WireframePluginOptions {
+  /**
+   * Output format
+   * - 'html': HTML/CSS rendering (inline styles)
+   * - 'html-preview': HTML with preview container (supports scaling)
+   * - 'svg': SVG image
+   * - 'svg-img': base64 encoded img tag
+   */
+  format?: 'html' | 'html-preview' | 'svg' | 'svg-img';
+
+  /**
+   * Theme for rendering
+   * - 'light': Light theme
+   * - 'dark': Dark theme
+   */
+  theme?: 'light' | 'dark';
+
+  /**
+   * Container class for wrapping SVG/HTML
+   */
+  containerClass?: string;
+
+  /**
+   * Error handling mode
+   * - 'code': Show original code
+   * - 'error': Show error message
+   * - 'both': Show both
+   */
+  errorHandling?: 'code' | 'error' | 'both';
+
+  /**
+   * Container width for preview scaling (in pixels)
+   * When set, the wireframe will be scaled to fit this width
+   */
+  containerWidth?: number;
+
+  /**
+   * Maximum scale factor (default: 1)
+   * Prevents the preview from being scaled up beyond this value
+   */
+  maxScale?: number;
+}
+
+const defaultOptions: Required<WireframePluginOptions> = {
+  format: 'svg-img',
+  theme: 'light',
+  containerClass: 'wireframe-container',
+  errorHandling: 'both',
+  containerWidth: 0, // 0 means no scaling
+  maxScale: 1,
+};
+
+/**
+ * Render wireframe code to output format
+ */
+export function renderWireframe(
+  code: string,
+  options: WireframePluginOptions = {}
+): string {
+  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 : undefined,
+        });
+
+        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);
+        // Use btoa for browser compatibility, Buffer for Node.js
+        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 as Error, opts);
+  }
+}
+
+function renderError(
+  code: string,
+  error: Error,
+  options: Required<WireframePluginOptions>
+): string {
+  const errorHtml = `<pre class="wireframe-error">${escapeHtml(error.message)}</pre>`;
+  const codeHtml = `<pre class="wireframe-source"><code>${escapeHtml(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 escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+export { markdownItWireframe } from './markdown-it';
+export { markedWireframe } from './marked';
+export { remarkableWireframe } from './remarkable';