@agimon-ai/po-web-components 0.0.0-alpha.35 → 0.0.0-alpha.37

package/dist/packages/core/po-web-components/src/lib/markdownMedia.d.mts

@@ -44,6 +44,10 @@ export declare function markdownMediaReview(host: WebPluginSlotProps | undefined
  *
  * A data URL rather than a blob URL: Chrome taints a canvas that draws a blob
  * SVG carrying `foreignObject` (mermaid's labels), which breaks capture.
+ *
+ * Parsed as HTML, not XML: mermaid's labels hold HTML such as `<br>`, which is
+ * not well-formed XML, and an image of it never decodes. Serializing the parsed
+ * element writes it back as valid XML.
  */
 export declare function svgImageUrl(markup: string): string;
 /**

package/dist/packages/core/po-web-components/src/lib/markdownMedia.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"markdownMedia.d.mts","names":[],"sources":["../../../../../../src/lib/markdownMedia.ts"],"mappings":";;;;;;;;;;;iBAUiB;EACf;EACA;EACA;;EAEA;;EAEA;;EAEA;;;YAIU,uBAAuB,OAAO,eAAe,sBAAsB;iBAS9D,sCAAsC;EACrD,OAAO;EACP;;iBAGe;EACf;EACA,OAAO,cAAc;;;qBAIV;;EAEI,QAAA,mBAAU;;;wBAQX,oBAAoB,MAAM,iCAAiC;;;;;;;;;wBAkB3D,YAAY;;;;;;wBAuBN,iBAAiB,aAAa,SAAS,cAAc"}
+{"version":3,"file":"markdownMedia.d.mts","names":[],"sources":["../../../../../../src/lib/markdownMedia.ts"],"mappings":";;;;;;;;;;;iBAUiB;EACf;EACA;EACA;;EAEA;;EAEA;;EAEA;;;YAIU,uBAAuB,OAAO,eAAe,sBAAsB;iBAS9D,sCAAsC;EACrD,OAAO;EACP;;iBAGe;EACf;EACA,OAAO,cAAc;;;qBAIV;;EAEI,QAAA,mBAAU;;;wBAQX,oBAAoB,MAAM,iCAAiC;;;;;;;;;;;;;wBAsB3D,YAAY;;;;;;wBAsBN,iBAAiB,aAAa,SAAS,cAAc"}

package/dist/packages/core/po-web-components/src/lib/markdownMedia.mjs

@@ -1,2 +1,2 @@
-import{createContext as e,createElement as t}from"react";const n=e(void 0),r={slot:`author.media-review`,parse:e=>{if(typeof e!=`object`||!e)return null;let t=e;return t.version===1&&typeof t.panel==`function`?t:null}};function i(e){let n=typeof e?.slotData==`function`?e.slotData(r)[0]?.data.panel:void 0;if(e!==void 0&&n!==void 0)return(r,i)=>t(n,{...e,media:r,onClose:i})}const a=/^\s*\d*\.?\d+(?:px)?\s*$/u;function o(e){let t=new DOMParser().parseFromString(e,`image/svg+xml`),n=t.documentElement;if(n.nodeName!==`svg`)return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`;let r=n.getAttribute(`width`),i=n.getAttribute(`height`),o=r!==null&&i!==null&&a.test(r)&&a.test(i),s=(n.getAttribute(`viewBox`)??``).trim().split(/[\s,]+/u).map(Number);return!o&&s.length===4&&s[2]>0&&s[3]>0&&(n.setAttribute(`width`,String(s[2])),n.setAttribute(`height`,String(s[3]))),`data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(t))}`}async function s(e,t){if(!e.startsWith(`blob:`))return e;let n=await(await fetch(e,t===void 0?{}:{signal:t})).blob();return n.type.startsWith(`image/svg+xml`)?o(await n.text()):e}export{n as MarkdownMediaContext,s as drawableImageUrl,i as markdownMediaReview,r as markdownMediaReviewSlot,o as svgImageUrl};
+import{createContext as e,createElement as t}from"react";const n=e(void 0),r={slot:`author.media-review`,parse:e=>{if(typeof e!=`object`||!e)return null;let t=e;return t.version===1&&typeof t.panel==`function`?t:null}};function i(e){let n=typeof e?.slotData==`function`?e.slotData(r)[0]?.data.panel:void 0;if(e!==void 0&&n!==void 0)return(r,i)=>t(n,{...e,media:r,onClose:i})}const a=/^\s*\d*\.?\d+(?:px)?\s*$/u;function o(e){let t=new DOMParser().parseFromString(e,`text/html`).querySelector(`svg`);if(t===null)return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`;let n=t.getAttribute(`width`),r=t.getAttribute(`height`),i=n!==null&&r!==null&&a.test(n)&&a.test(r),o=(t.getAttribute(`viewBox`)??``).trim().split(/[\s,]+/u).map(Number);return!i&&o.length===4&&o[2]>0&&o[3]>0&&(t.setAttribute(`width`,String(o[2])),t.setAttribute(`height`,String(o[3]))),`data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(t))}`}async function s(e,t){if(!e.startsWith(`blob:`))return e;let n=await(await fetch(e,t===void 0?{}:{signal:t})).blob();return n.type.startsWith(`image/svg+xml`)?o(await n.text()):e}export{n as MarkdownMediaContext,s as drawableImageUrl,i as markdownMediaReview,r as markdownMediaReviewSlot,o as svgImageUrl};
 //# sourceMappingURL=markdownMedia.mjs.map

package/dist/packages/core/po-web-components/src/lib/markdownMedia.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"markdownMedia.mjs","names":["MarkdownMediaContext","createContext","markdownMediaReviewSlot","input","value","markdownMediaReview","panel","host","createElement","close","ABSOLUTE_LENGTH","svgImageUrl","document","markup","svg","width","height","sized","box","drawableImageUrl","url","blob","signal"],"sources":["../../../../../../src/lib/markdownMedia.ts"],"sourcesContent":["import type { SlotDeclaration, WebPluginSlotProps } from '@agimon-ai/po-core/web';\nimport { createContext, createElement, type ComponentType, type ReactNode } from 'react';\n\n/**\n * A picture inside rendered Markdown that the person opened full screen.\n *\n * `url` is what the viewer draws: a blob URL from the host's image loader, a\n * remote URL, or a data URL for a mermaid diagram. The paths are provenance\n * for a reviewer, never read authority.\n */\nexport interface MarkdownMedia {\n  kind: 'image' | 'mermaid';\n  title: string;\n  url: string;\n  /** The file the image was read from, as the host addresses it. */\n  sourcePath?: string;\n  /** The Markdown document that embeds the picture, when it is a file. */\n  documentPath?: string;\n  /** The diagram text, for a mermaid fence. */\n  mermaidSource?: string;\n}\n\n/** Renders a review surface (annotate, comment, send) for opened media. */\nexport type MarkdownMediaReview = (media: MarkdownMedia, close: () => void) => ReactNode;\n\nexport interface MarkdownMediaContextValue {\n  open(media: Omit<MarkdownMedia, 'documentPath'>): void;\n}\n\n/** Set by Markdown; images and mermaid diagrams become openable only inside it. */\nexport const MarkdownMediaContext = createContext<MarkdownMediaContextValue | undefined>(undefined);\n\nexport interface MarkdownMediaReviewPanelProps extends WebPluginSlotProps {\n  media: MarkdownMedia;\n  onClose(): void;\n}\n\nexport interface MarkdownMediaReviewContribution {\n  version: 1;\n  panel: ComponentType<MarkdownMediaReviewPanelProps>;\n}\n\n/** Filled by the Author mode; any Markdown host reads it through `markdownMediaReview`. */\nexport const markdownMediaReviewSlot = {\n  slot: 'author.media-review',\n  parse: (input: unknown): MarkdownMediaReviewContribution | null => {\n    if (input === null || typeof input !== 'object') return null;\n    const value = input as Partial<MarkdownMediaReviewContribution>;\n    return value.version === 1 && typeof value.panel === 'function' ? (value as MarkdownMediaReviewContribution) : null;\n  },\n} satisfies SlotDeclaration<MarkdownMediaReviewContribution>;\n\n/** The installed review panel bound to a host's slot props, or undefined when none is installed. */\nexport function markdownMediaReview(host: WebPluginSlotProps | undefined): MarkdownMediaReview | undefined {\n  // Partial host props (stories, tests) carry no slot reader; they get the plain viewer.\n  const panel =\n    typeof host?.slotData === 'function' ? host.slotData(markdownMediaReviewSlot)[0]?.data.panel : undefined;\n  if (host === undefined || panel === undefined) return undefined;\n  return (media, close) => createElement(panel, { ...host, media, onClose: close });\n}\n\nconst ABSOLUTE_LENGTH = /^\\s*\\d*\\.?\\d+(?:px)?\\s*$/u;\n\n/**\n * SVG markup as an `<img>` source, sized from its viewBox when its own size is\n * relative. Mermaid writes `width=\"100%\"`, which leaves an image with no\n * intrinsic size, so it collapses in a shrink-to-fit frame.\n *\n * A data URL rather than a blob URL: Chrome taints a canvas that draws a blob\n * SVG carrying `foreignObject` (mermaid's labels), which breaks capture.\n */\nexport function svgImageUrl(markup: string): string {\n  const document = new DOMParser().parseFromString(markup, 'image/svg+xml');\n  const svg = document.documentElement;\n  if (svg.nodeName !== 'svg') return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;\n  const width = svg.getAttribute('width');\n  const height = svg.getAttribute('height');\n  const sized = width !== null && height !== null && ABSOLUTE_LENGTH.test(width) && ABSOLUTE_LENGTH.test(height);\n  const box = (svg.getAttribute('viewBox') ?? '')\n    .trim()\n    .split(/[\\s,]+/u)\n    .map(Number);\n  if (!sized && box.length === 4 && box[2]! > 0 && box[3]! > 0) {\n    svg.setAttribute('width', String(box[2]));\n    svg.setAttribute('height', String(box[3]));\n  }\n  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(document))}`;\n}\n\n/**\n * A URL a canvas can draw without being tainted. A blob URL that holds an SVG\n * is re-read and turned into a sized data URL (see `svgImageUrl`); anything\n * else is returned as is. Reading a local blob URL is not a network request.\n */\nexport async function drawableImageUrl(url: string, signal?: AbortSignal): Promise<string> {\n  if (!url.startsWith('blob:')) return url;\n  const blob = await (await fetch(url, signal === undefined ? {} : { signal })).blob();\n  return blob.type.startsWith('image/svg+xml') ? svgImageUrl(await blob.text()) : url;\n}\n"],"mappings":"yDA8BA,MAAaA,EAAuBC,EAAqD,IAAA,EAAS,EAarFC,EAA0B,CACrC,KAAM,sBACN,MAAQ,GAA2D,CACjE,GAAsB,OAAOC,GAAU,WAAnCA,EAA6C,OAAO,KACxD,IAAMC,EAAQD,EACd,OAAOC,EAAM,UAAY,GAAK,OAAOA,EAAM,OAAU,WAAcA,EAA4C,IACjH,CACF,EAGA,SAAgBC,EAAoB,EAAuE,CAEzG,IAAMC,EACJ,OAAOC,GAAM,UAAa,WAAaA,EAAK,SAASL,CAAuB,CAAC,CAAC,EAAE,EAAE,KAAK,MAAQ,IAAA,GACjG,GAAIK,IAAS,IAAA,IAAaD,IAAU,IAAA,GACpC,OAAQ,EAAO,IAAUE,EAAcF,EAAO,CAAE,GAAGC,EAAM,QAAO,QAASE,CAAM,CAAC,CAClF,CAEA,MAAMC,EAAkB,4BAUxB,SAAgBC,EAAY,EAAwB,CAClD,IAAMC,EAAW,IAAI,UAAU,CAAC,CAAC,gBAAgBC,EAAQ,eAAe,EAClEC,EAAMF,EAAS,gBACrB,GAAIE,EAAI,WAAa,MAAO,MAAO,oCAAoC,mBAAmBD,CAAM,IAChG,IAAME,EAAQD,EAAI,aAAa,OAAO,EAChCE,EAASF,EAAI,aAAa,QAAQ,EAClCG,EAAQF,IAAU,MAAQC,IAAW,MAAQN,EAAgB,KAAKK,CAAK,GAAKL,EAAgB,KAAKM,CAAM,EACvGE,GAAOJ,EAAI,aAAa,SAAS,GAAK,GAAA,CACzC,KAAK,CAAC,CACN,MAAM,SAAS,CAAC,CAChB,IAAI,MAAM,EAKb,MAJI,CAACG,GAASC,EAAI,SAAW,GAAKA,EAAI,GAAM,GAAKA,EAAI,GAAM,IACzDJ,EAAI,aAAa,QAAS,OAAOI,EAAI,EAAE,CAAC,EACxCJ,EAAI,aAAa,SAAU,OAAOI,EAAI,EAAE,CAAC,GAEpC,oCAAoC,mBAAmB,IAAI,cAAc,CAAC,CAAC,kBAAkBN,CAAQ,CAAC,GAC/G,CAOA,eAAsBO,EAAiB,EAAa,EAAuC,CACzF,GAAI,CAACC,EAAI,WAAW,OAAO,EAAG,OAAOA,EACrC,IAAMC,EAAO,MAAO,MAAM,MAAMD,EAAKE,IAAW,IAAA,GAAY,CAAC,EAAI,CAAE,QAAO,CAAC,EAAA,CAAG,KAAK,EACnF,OAAOD,EAAK,KAAK,WAAW,eAAe,EAAIV,EAAY,MAAMU,EAAK,KAAK,CAAC,EAAID,CAClF"}
+{"version":3,"file":"markdownMedia.mjs","names":["MarkdownMediaContext","createContext","markdownMediaReviewSlot","input","value","markdownMediaReview","panel","host","createElement","close","ABSOLUTE_LENGTH","svgImageUrl","svg","markup","width","height","sized","box","drawableImageUrl","url","blob","signal"],"sources":["../../../../../../src/lib/markdownMedia.ts"],"sourcesContent":["import type { SlotDeclaration, WebPluginSlotProps } from '@agimon-ai/po-core/web';\nimport { createContext, createElement, type ComponentType, type ReactNode } from 'react';\n\n/**\n * A picture inside rendered Markdown that the person opened full screen.\n *\n * `url` is what the viewer draws: a blob URL from the host's image loader, a\n * remote URL, or a data URL for a mermaid diagram. The paths are provenance\n * for a reviewer, never read authority.\n */\nexport interface MarkdownMedia {\n  kind: 'image' | 'mermaid';\n  title: string;\n  url: string;\n  /** The file the image was read from, as the host addresses it. */\n  sourcePath?: string;\n  /** The Markdown document that embeds the picture, when it is a file. */\n  documentPath?: string;\n  /** The diagram text, for a mermaid fence. */\n  mermaidSource?: string;\n}\n\n/** Renders a review surface (annotate, comment, send) for opened media. */\nexport type MarkdownMediaReview = (media: MarkdownMedia, close: () => void) => ReactNode;\n\nexport interface MarkdownMediaContextValue {\n  open(media: Omit<MarkdownMedia, 'documentPath'>): void;\n}\n\n/** Set by Markdown; images and mermaid diagrams become openable only inside it. */\nexport const MarkdownMediaContext = createContext<MarkdownMediaContextValue | undefined>(undefined);\n\nexport interface MarkdownMediaReviewPanelProps extends WebPluginSlotProps {\n  media: MarkdownMedia;\n  onClose(): void;\n}\n\nexport interface MarkdownMediaReviewContribution {\n  version: 1;\n  panel: ComponentType<MarkdownMediaReviewPanelProps>;\n}\n\n/** Filled by the Author mode; any Markdown host reads it through `markdownMediaReview`. */\nexport const markdownMediaReviewSlot = {\n  slot: 'author.media-review',\n  parse: (input: unknown): MarkdownMediaReviewContribution | null => {\n    if (input === null || typeof input !== 'object') return null;\n    const value = input as Partial<MarkdownMediaReviewContribution>;\n    return value.version === 1 && typeof value.panel === 'function' ? (value as MarkdownMediaReviewContribution) : null;\n  },\n} satisfies SlotDeclaration<MarkdownMediaReviewContribution>;\n\n/** The installed review panel bound to a host's slot props, or undefined when none is installed. */\nexport function markdownMediaReview(host: WebPluginSlotProps | undefined): MarkdownMediaReview | undefined {\n  // Partial host props (stories, tests) carry no slot reader; they get the plain viewer.\n  const panel =\n    typeof host?.slotData === 'function' ? host.slotData(markdownMediaReviewSlot)[0]?.data.panel : undefined;\n  if (host === undefined || panel === undefined) return undefined;\n  return (media, close) => createElement(panel, { ...host, media, onClose: close });\n}\n\nconst ABSOLUTE_LENGTH = /^\\s*\\d*\\.?\\d+(?:px)?\\s*$/u;\n\n/**\n * SVG markup as an `<img>` source, sized from its viewBox when its own size is\n * relative. Mermaid writes `width=\"100%\"`, which leaves an image with no\n * intrinsic size, so it collapses in a shrink-to-fit frame.\n *\n * A data URL rather than a blob URL: Chrome taints a canvas that draws a blob\n * SVG carrying `foreignObject` (mermaid's labels), which breaks capture.\n *\n * Parsed as HTML, not XML: mermaid's labels hold HTML such as `<br>`, which is\n * not well-formed XML, and an image of it never decodes. Serializing the parsed\n * element writes it back as valid XML.\n */\nexport function svgImageUrl(markup: string): string {\n  const svg = new DOMParser().parseFromString(markup, 'text/html').querySelector('svg');\n  if (svg === null) return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;\n  const width = svg.getAttribute('width');\n  const height = svg.getAttribute('height');\n  const sized = width !== null && height !== null && ABSOLUTE_LENGTH.test(width) && ABSOLUTE_LENGTH.test(height);\n  const box = (svg.getAttribute('viewBox') ?? '')\n    .trim()\n    .split(/[\\s,]+/u)\n    .map(Number);\n  if (!sized && box.length === 4 && box[2]! > 0 && box[3]! > 0) {\n    svg.setAttribute('width', String(box[2]));\n    svg.setAttribute('height', String(box[3]));\n  }\n  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;\n}\n\n/**\n * A URL a canvas can draw without being tainted. A blob URL that holds an SVG\n * is re-read and turned into a sized data URL (see `svgImageUrl`); anything\n * else is returned as is. Reading a local blob URL is not a network request.\n */\nexport async function drawableImageUrl(url: string, signal?: AbortSignal): Promise<string> {\n  if (!url.startsWith('blob:')) return url;\n  const blob = await (await fetch(url, signal === undefined ? {} : { signal })).blob();\n  return blob.type.startsWith('image/svg+xml') ? svgImageUrl(await blob.text()) : url;\n}\n"],"mappings":"yDA8BA,MAAaA,EAAuBC,EAAqD,IAAA,EAAS,EAarFC,EAA0B,CACrC,KAAM,sBACN,MAAQ,GAA2D,CACjE,GAAsB,OAAOC,GAAU,WAAnCA,EAA6C,OAAO,KACxD,IAAMC,EAAQD,EACd,OAAOC,EAAM,UAAY,GAAK,OAAOA,EAAM,OAAU,WAAcA,EAA4C,IACjH,CACF,EAGA,SAAgBC,EAAoB,EAAuE,CAEzG,IAAMC,EACJ,OAAOC,GAAM,UAAa,WAAaA,EAAK,SAASL,CAAuB,CAAC,CAAC,EAAE,EAAE,KAAK,MAAQ,IAAA,GACjG,GAAIK,IAAS,IAAA,IAAaD,IAAU,IAAA,GACpC,OAAQ,EAAO,IAAUE,EAAcF,EAAO,CAAE,GAAGC,EAAM,QAAO,QAASE,CAAM,CAAC,CAClF,CAEA,MAAMC,EAAkB,4BAcxB,SAAgBC,EAAY,EAAwB,CAClD,IAAMC,EAAM,IAAI,UAAU,CAAC,CAAC,gBAAgBC,EAAQ,WAAW,CAAC,CAAC,cAAc,KAAK,EACpF,GAAID,IAAQ,KAAM,MAAO,oCAAoC,mBAAmBC,CAAM,IACtF,IAAMC,EAAQF,EAAI,aAAa,OAAO,EAChCG,EAASH,EAAI,aAAa,QAAQ,EAClCI,EAAQF,IAAU,MAAQC,IAAW,MAAQL,EAAgB,KAAKI,CAAK,GAAKJ,EAAgB,KAAKK,CAAM,EACvGE,GAAOL,EAAI,aAAa,SAAS,GAAK,GAAA,CACzC,KAAK,CAAC,CACN,MAAM,SAAS,CAAC,CAChB,IAAI,MAAM,EAKb,MAJI,CAACI,GAASC,EAAI,SAAW,GAAKA,EAAI,GAAM,GAAKA,EAAI,GAAM,IACzDL,EAAI,aAAa,QAAS,OAAOK,EAAI,EAAE,CAAC,EACxCL,EAAI,aAAa,SAAU,OAAOK,EAAI,EAAE,CAAC,GAEpC,oCAAoC,mBAAmB,IAAI,cAAc,CAAC,CAAC,kBAAkBL,CAAG,CAAC,GAC1G,CAOA,eAAsBM,EAAiB,EAAa,EAAuC,CACzF,GAAI,CAACC,EAAI,WAAW,OAAO,EAAG,OAAOA,EACrC,IAAMC,EAAO,MAAO,MAAM,MAAMD,EAAKE,IAAW,IAAA,GAAY,CAAC,EAAI,CAAE,QAAO,CAAC,EAAA,CAAG,KAAK,EACnF,OAAOD,EAAK,KAAK,WAAW,eAAe,EAAIT,EAAY,MAAMS,EAAK,KAAK,CAAC,EAAID,CAClF"}

package/dist/src/lib/markdownMedia.cjs

@@ -1,2 +1,2 @@
-let e=require("react");const t=(0,e.createContext)(void 0),n={slot:`author.media-review`,parse:e=>{if(typeof e!=`object`||!e)return null;let t=e;return t.version===1&&typeof t.panel==`function`?t:null}};function r(t){let r=typeof t?.slotData==`function`?t.slotData(n)[0]?.data.panel:void 0;if(t!==void 0&&r!==void 0)return(n,i)=>(0,e.createElement)(r,{...t,media:n,onClose:i})}const i=/^\s*\d*\.?\d+(?:px)?\s*$/u;function a(e){let t=new DOMParser().parseFromString(e,`image/svg+xml`),n=t.documentElement;if(n.nodeName!==`svg`)return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`;let r=n.getAttribute(`width`),a=n.getAttribute(`height`),o=r!==null&&a!==null&&i.test(r)&&i.test(a),s=(n.getAttribute(`viewBox`)??``).trim().split(/[\s,]+/u).map(Number);return!o&&s.length===4&&s[2]>0&&s[3]>0&&(n.setAttribute(`width`,String(s[2])),n.setAttribute(`height`,String(s[3]))),`data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(t))}`}async function o(e,t){if(!e.startsWith(`blob:`))return e;let n=await(await fetch(e,t===void 0?{}:{signal:t})).blob();return n.type.startsWith(`image/svg+xml`)?a(await n.text()):e}exports.MarkdownMediaContext=t,exports.drawableImageUrl=o,exports.markdownMediaReview=r,exports.markdownMediaReviewSlot=n,exports.svgImageUrl=a;
+let e=require("react");const t=(0,e.createContext)(void 0),n={slot:`author.media-review`,parse:e=>{if(typeof e!=`object`||!e)return null;let t=e;return t.version===1&&typeof t.panel==`function`?t:null}};function r(t){let r=typeof t?.slotData==`function`?t.slotData(n)[0]?.data.panel:void 0;if(t!==void 0&&r!==void 0)return(n,i)=>(0,e.createElement)(r,{...t,media:n,onClose:i})}const i=/^\s*\d*\.?\d+(?:px)?\s*$/u;function a(e){let t=new DOMParser().parseFromString(e,`text/html`).querySelector(`svg`);if(t===null)return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`;let n=t.getAttribute(`width`),r=t.getAttribute(`height`),a=n!==null&&r!==null&&i.test(n)&&i.test(r),o=(t.getAttribute(`viewBox`)??``).trim().split(/[\s,]+/u).map(Number);return!a&&o.length===4&&o[2]>0&&o[3]>0&&(t.setAttribute(`width`,String(o[2])),t.setAttribute(`height`,String(o[3]))),`data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(t))}`}async function o(e,t){if(!e.startsWith(`blob:`))return e;let n=await(await fetch(e,t===void 0?{}:{signal:t})).blob();return n.type.startsWith(`image/svg+xml`)?a(await n.text()):e}exports.MarkdownMediaContext=t,exports.drawableImageUrl=o,exports.markdownMediaReview=r,exports.markdownMediaReviewSlot=n,exports.svgImageUrl=a;
 //# sourceMappingURL=markdownMedia.cjs.map

package/dist/src/lib/markdownMedia.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"markdownMedia.cjs","names":["createContext","createElement","react","MarkdownMediaContext","markdownMediaReviewSlot","input","value","markdownMediaReview","panel","host","close","ABSOLUTE_LENGTH","svgImageUrl","document","markup","svg","width","height","sized","box","drawableImageUrl","url","blob","signal"],"sources":["../../../src/lib/markdownMedia.ts"],"sourcesContent":["import type { SlotDeclaration, WebPluginSlotProps } from '@agimon-ai/po-core/web';\nimport { createContext, createElement, type ComponentType, type ReactNode } from 'react';\n\n/**\n * A picture inside rendered Markdown that the person opened full screen.\n *\n * `url` is what the viewer draws: a blob URL from the host's image loader, a\n * remote URL, or a data URL for a mermaid diagram. The paths are provenance\n * for a reviewer, never read authority.\n */\nexport interface MarkdownMedia {\n  kind: 'image' | 'mermaid';\n  title: string;\n  url: string;\n  /** The file the image was read from, as the host addresses it. */\n  sourcePath?: string;\n  /** The Markdown document that embeds the picture, when it is a file. */\n  documentPath?: string;\n  /** The diagram text, for a mermaid fence. */\n  mermaidSource?: string;\n}\n\n/** Renders a review surface (annotate, comment, send) for opened media. */\nexport type MarkdownMediaReview = (media: MarkdownMedia, close: () => void) => ReactNode;\n\nexport interface MarkdownMediaContextValue {\n  open(media: Omit<MarkdownMedia, 'documentPath'>): void;\n}\n\n/** Set by Markdown; images and mermaid diagrams become openable only inside it. */\nexport const MarkdownMediaContext = createContext<MarkdownMediaContextValue | undefined>(undefined);\n\nexport interface MarkdownMediaReviewPanelProps extends WebPluginSlotProps {\n  media: MarkdownMedia;\n  onClose(): void;\n}\n\nexport interface MarkdownMediaReviewContribution {\n  version: 1;\n  panel: ComponentType<MarkdownMediaReviewPanelProps>;\n}\n\n/** Filled by the Author mode; any Markdown host reads it through `markdownMediaReview`. */\nexport const markdownMediaReviewSlot = {\n  slot: 'author.media-review',\n  parse: (input: unknown): MarkdownMediaReviewContribution | null => {\n    if (input === null || typeof input !== 'object') return null;\n    const value = input as Partial<MarkdownMediaReviewContribution>;\n    return value.version === 1 && typeof value.panel === 'function' ? (value as MarkdownMediaReviewContribution) : null;\n  },\n} satisfies SlotDeclaration<MarkdownMediaReviewContribution>;\n\n/** The installed review panel bound to a host's slot props, or undefined when none is installed. */\nexport function markdownMediaReview(host: WebPluginSlotProps | undefined): MarkdownMediaReview | undefined {\n  // Partial host props (stories, tests) carry no slot reader; they get the plain viewer.\n  const panel =\n    typeof host?.slotData === 'function' ? host.slotData(markdownMediaReviewSlot)[0]?.data.panel : undefined;\n  if (host === undefined || panel === undefined) return undefined;\n  return (media, close) => createElement(panel, { ...host, media, onClose: close });\n}\n\nconst ABSOLUTE_LENGTH = /^\\s*\\d*\\.?\\d+(?:px)?\\s*$/u;\n\n/**\n * SVG markup as an `<img>` source, sized from its viewBox when its own size is\n * relative. Mermaid writes `width=\"100%\"`, which leaves an image with no\n * intrinsic size, so it collapses in a shrink-to-fit frame.\n *\n * A data URL rather than a blob URL: Chrome taints a canvas that draws a blob\n * SVG carrying `foreignObject` (mermaid's labels), which breaks capture.\n */\nexport function svgImageUrl(markup: string): string {\n  const document = new DOMParser().parseFromString(markup, 'image/svg+xml');\n  const svg = document.documentElement;\n  if (svg.nodeName !== 'svg') return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;\n  const width = svg.getAttribute('width');\n  const height = svg.getAttribute('height');\n  const sized = width !== null && height !== null && ABSOLUTE_LENGTH.test(width) && ABSOLUTE_LENGTH.test(height);\n  const box = (svg.getAttribute('viewBox') ?? '')\n    .trim()\n    .split(/[\\s,]+/u)\n    .map(Number);\n  if (!sized && box.length === 4 && box[2]! > 0 && box[3]! > 0) {\n    svg.setAttribute('width', String(box[2]));\n    svg.setAttribute('height', String(box[3]));\n  }\n  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(document))}`;\n}\n\n/**\n * A URL a canvas can draw without being tainted. A blob URL that holds an SVG\n * is re-read and turned into a sized data URL (see `svgImageUrl`); anything\n * else is returned as is. Reading a local blob URL is not a network request.\n */\nexport async function drawableImageUrl(url: string, signal?: AbortSignal): Promise<string> {\n  if (!url.startsWith('blob:')) return url;\n  const blob = await (await fetch(url, signal === undefined ? {} : { signal })).blob();\n  return blob.type.startsWith('image/svg+xml') ? svgImageUrl(await blob.text()) : url;\n}\n"],"mappings":"uBA8BA,MAAaG,GAAA,EAAuBH,EAAAA,cAAAA,CAAqD,IAAA,EAAS,EAarFI,EAA0B,CACrC,KAAM,sBACN,MAAQ,GAA2D,CACjE,GAAsB,OAAOC,GAAU,WAAnCA,EAA6C,OAAO,KACxD,IAAMC,EAAQD,EACd,OAAOC,EAAM,UAAY,GAAK,OAAOA,EAAM,OAAU,WAAcA,EAA4C,IACjH,CACF,EAGA,SAAgBC,EAAoB,EAAuE,CAEzG,IAAMC,EACJ,OAAOC,GAAM,UAAa,WAAaA,EAAK,SAASL,CAAuB,CAAC,CAAC,EAAE,EAAE,KAAK,MAAQ,IAAA,GACjG,GAAIK,IAAS,IAAA,IAAaD,IAAU,IAAA,GACpC,OAAQ,EAAO,KAAA,EAAUP,EAAAA,cAAAA,CAAcO,EAAO,CAAE,GAAGC,EAAM,QAAO,QAASC,CAAM,CAAC,CAClF,CAEA,MAAMC,EAAkB,4BAUxB,SAAgBC,EAAY,EAAwB,CAClD,IAAMC,EAAW,IAAI,UAAU,CAAC,CAAC,gBAAgBC,EAAQ,eAAe,EAClEC,EAAMF,EAAS,gBACrB,GAAIE,EAAI,WAAa,MAAO,MAAO,oCAAoC,mBAAmBD,CAAM,IAChG,IAAME,EAAQD,EAAI,aAAa,OAAO,EAChCE,EAASF,EAAI,aAAa,QAAQ,EAClCG,EAAQF,IAAU,MAAQC,IAAW,MAAQN,EAAgB,KAAKK,CAAK,GAAKL,EAAgB,KAAKM,CAAM,EACvGE,GAAOJ,EAAI,aAAa,SAAS,GAAK,GAAA,CACzC,KAAK,CAAC,CACN,MAAM,SAAS,CAAC,CAChB,IAAI,MAAM,EAKb,MAJI,CAACG,GAASC,EAAI,SAAW,GAAKA,EAAI,GAAM,GAAKA,EAAI,GAAM,IACzDJ,EAAI,aAAa,QAAS,OAAOI,EAAI,EAAE,CAAC,EACxCJ,EAAI,aAAa,SAAU,OAAOI,EAAI,EAAE,CAAC,GAEpC,oCAAoC,mBAAmB,IAAI,cAAc,CAAC,CAAC,kBAAkBN,CAAQ,CAAC,GAC/G,CAOA,eAAsBO,EAAiB,EAAa,EAAuC,CACzF,GAAI,CAACC,EAAI,WAAW,OAAO,EAAG,OAAOA,EACrC,IAAMC,EAAO,MAAO,MAAM,MAAMD,EAAKE,IAAW,IAAA,GAAY,CAAC,EAAI,CAAE,QAAO,CAAC,EAAA,CAAG,KAAK,EACnF,OAAOD,EAAK,KAAK,WAAW,eAAe,EAAIV,EAAY,MAAMU,EAAK,KAAK,CAAC,EAAID,CAClF"}
+{"version":3,"file":"markdownMedia.cjs","names":["createContext","createElement","react","MarkdownMediaContext","markdownMediaReviewSlot","input","value","markdownMediaReview","panel","host","close","ABSOLUTE_LENGTH","svgImageUrl","svg","markup","width","height","sized","box","drawableImageUrl","url","blob","signal"],"sources":["../../../src/lib/markdownMedia.ts"],"sourcesContent":["import type { SlotDeclaration, WebPluginSlotProps } from '@agimon-ai/po-core/web';\nimport { createContext, createElement, type ComponentType, type ReactNode } from 'react';\n\n/**\n * A picture inside rendered Markdown that the person opened full screen.\n *\n * `url` is what the viewer draws: a blob URL from the host's image loader, a\n * remote URL, or a data URL for a mermaid diagram. The paths are provenance\n * for a reviewer, never read authority.\n */\nexport interface MarkdownMedia {\n  kind: 'image' | 'mermaid';\n  title: string;\n  url: string;\n  /** The file the image was read from, as the host addresses it. */\n  sourcePath?: string;\n  /** The Markdown document that embeds the picture, when it is a file. */\n  documentPath?: string;\n  /** The diagram text, for a mermaid fence. */\n  mermaidSource?: string;\n}\n\n/** Renders a review surface (annotate, comment, send) for opened media. */\nexport type MarkdownMediaReview = (media: MarkdownMedia, close: () => void) => ReactNode;\n\nexport interface MarkdownMediaContextValue {\n  open(media: Omit<MarkdownMedia, 'documentPath'>): void;\n}\n\n/** Set by Markdown; images and mermaid diagrams become openable only inside it. */\nexport const MarkdownMediaContext = createContext<MarkdownMediaContextValue | undefined>(undefined);\n\nexport interface MarkdownMediaReviewPanelProps extends WebPluginSlotProps {\n  media: MarkdownMedia;\n  onClose(): void;\n}\n\nexport interface MarkdownMediaReviewContribution {\n  version: 1;\n  panel: ComponentType<MarkdownMediaReviewPanelProps>;\n}\n\n/** Filled by the Author mode; any Markdown host reads it through `markdownMediaReview`. */\nexport const markdownMediaReviewSlot = {\n  slot: 'author.media-review',\n  parse: (input: unknown): MarkdownMediaReviewContribution | null => {\n    if (input === null || typeof input !== 'object') return null;\n    const value = input as Partial<MarkdownMediaReviewContribution>;\n    return value.version === 1 && typeof value.panel === 'function' ? (value as MarkdownMediaReviewContribution) : null;\n  },\n} satisfies SlotDeclaration<MarkdownMediaReviewContribution>;\n\n/** The installed review panel bound to a host's slot props, or undefined when none is installed. */\nexport function markdownMediaReview(host: WebPluginSlotProps | undefined): MarkdownMediaReview | undefined {\n  // Partial host props (stories, tests) carry no slot reader; they get the plain viewer.\n  const panel =\n    typeof host?.slotData === 'function' ? host.slotData(markdownMediaReviewSlot)[0]?.data.panel : undefined;\n  if (host === undefined || panel === undefined) return undefined;\n  return (media, close) => createElement(panel, { ...host, media, onClose: close });\n}\n\nconst ABSOLUTE_LENGTH = /^\\s*\\d*\\.?\\d+(?:px)?\\s*$/u;\n\n/**\n * SVG markup as an `<img>` source, sized from its viewBox when its own size is\n * relative. Mermaid writes `width=\"100%\"`, which leaves an image with no\n * intrinsic size, so it collapses in a shrink-to-fit frame.\n *\n * A data URL rather than a blob URL: Chrome taints a canvas that draws a blob\n * SVG carrying `foreignObject` (mermaid's labels), which breaks capture.\n *\n * Parsed as HTML, not XML: mermaid's labels hold HTML such as `<br>`, which is\n * not well-formed XML, and an image of it never decodes. Serializing the parsed\n * element writes it back as valid XML.\n */\nexport function svgImageUrl(markup: string): string {\n  const svg = new DOMParser().parseFromString(markup, 'text/html').querySelector('svg');\n  if (svg === null) return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;\n  const width = svg.getAttribute('width');\n  const height = svg.getAttribute('height');\n  const sized = width !== null && height !== null && ABSOLUTE_LENGTH.test(width) && ABSOLUTE_LENGTH.test(height);\n  const box = (svg.getAttribute('viewBox') ?? '')\n    .trim()\n    .split(/[\\s,]+/u)\n    .map(Number);\n  if (!sized && box.length === 4 && box[2]! > 0 && box[3]! > 0) {\n    svg.setAttribute('width', String(box[2]));\n    svg.setAttribute('height', String(box[3]));\n  }\n  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;\n}\n\n/**\n * A URL a canvas can draw without being tainted. A blob URL that holds an SVG\n * is re-read and turned into a sized data URL (see `svgImageUrl`); anything\n * else is returned as is. Reading a local blob URL is not a network request.\n */\nexport async function drawableImageUrl(url: string, signal?: AbortSignal): Promise<string> {\n  if (!url.startsWith('blob:')) return url;\n  const blob = await (await fetch(url, signal === undefined ? {} : { signal })).blob();\n  return blob.type.startsWith('image/svg+xml') ? svgImageUrl(await blob.text()) : url;\n}\n"],"mappings":"uBA8BA,MAAaG,GAAA,EAAuBH,EAAAA,cAAAA,CAAqD,IAAA,EAAS,EAarFI,EAA0B,CACrC,KAAM,sBACN,MAAQ,GAA2D,CACjE,GAAsB,OAAOC,GAAU,WAAnCA,EAA6C,OAAO,KACxD,IAAMC,EAAQD,EACd,OAAOC,EAAM,UAAY,GAAK,OAAOA,EAAM,OAAU,WAAcA,EAA4C,IACjH,CACF,EAGA,SAAgBC,EAAoB,EAAuE,CAEzG,IAAMC,EACJ,OAAOC,GAAM,UAAa,WAAaA,EAAK,SAASL,CAAuB,CAAC,CAAC,EAAE,EAAE,KAAK,MAAQ,IAAA,GACjG,GAAIK,IAAS,IAAA,IAAaD,IAAU,IAAA,GACpC,OAAQ,EAAO,KAAA,EAAUP,EAAAA,cAAAA,CAAcO,EAAO,CAAE,GAAGC,EAAM,QAAO,QAASC,CAAM,CAAC,CAClF,CAEA,MAAMC,EAAkB,4BAcxB,SAAgBC,EAAY,EAAwB,CAClD,IAAMC,EAAM,IAAI,UAAU,CAAC,CAAC,gBAAgBC,EAAQ,WAAW,CAAC,CAAC,cAAc,KAAK,EACpF,GAAID,IAAQ,KAAM,MAAO,oCAAoC,mBAAmBC,CAAM,IACtF,IAAMC,EAAQF,EAAI,aAAa,OAAO,EAChCG,EAASH,EAAI,aAAa,QAAQ,EAClCI,EAAQF,IAAU,MAAQC,IAAW,MAAQL,EAAgB,KAAKI,CAAK,GAAKJ,EAAgB,KAAKK,CAAM,EACvGE,GAAOL,EAAI,aAAa,SAAS,GAAK,GAAA,CACzC,KAAK,CAAC,CACN,MAAM,SAAS,CAAC,CAChB,IAAI,MAAM,EAKb,MAJI,CAACI,GAASC,EAAI,SAAW,GAAKA,EAAI,GAAM,GAAKA,EAAI,GAAM,IACzDL,EAAI,aAAa,QAAS,OAAOK,EAAI,EAAE,CAAC,EACxCL,EAAI,aAAa,SAAU,OAAOK,EAAI,EAAE,CAAC,GAEpC,oCAAoC,mBAAmB,IAAI,cAAc,CAAC,CAAC,kBAAkBL,CAAG,CAAC,GAC1G,CAOA,eAAsBM,EAAiB,EAAa,EAAuC,CACzF,GAAI,CAACC,EAAI,WAAW,OAAO,EAAG,OAAOA,EACrC,IAAMC,EAAO,MAAO,MAAM,MAAMD,EAAKE,IAAW,IAAA,GAAY,CAAC,EAAI,CAAE,QAAO,CAAC,EAAA,CAAG,KAAK,EACnF,OAAOD,EAAK,KAAK,WAAW,eAAe,EAAIT,EAAY,MAAMS,EAAK,KAAK,CAAC,EAAID,CAClF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/po-web-components",
-  "version": "0.0.0-alpha.35",
+  "version": "0.0.0-alpha.37",
   "description": "Shared web components and theme tokens for the Po cockpit and its web plugins: shadcn-style primitives on Radix, tuned to the Po palette, with runtime theme configs.",
   "keywords": [
     "ai",
@@ -107,8 +107,8 @@
     "tailwind-merge": "3.7.0"
   },
   "devDependencies": {
-    "@agimon-ai/po-core": "0.0.0-alpha.35",
-    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.35",
+    "@agimon-ai/po-core": "0.0.0-alpha.37",
+    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.37",
     "@types/node": "26.6.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",