@ox-content/vite-plugin 0.0.1-alpha.0 → 0.3.0-alpha.11

package/dist/tabs2.js

@@ -0,0 +1,177 @@
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeStringify from "rehype-stringify";
+
+//#region src/plugins/tabs.ts
+/**
+* Tabs Plugin - Pure CSS implementation
+*
+* Transforms <Tabs>/<Tab> components into accessible HTML
+* with CSS :has() based tab switching (no JavaScript required).
+*/
+let tabGroupCounter = 0;
+/**
+* Get element attribute value.
+*/
+function getAttribute(el, name) {
+	const value = el.properties?.[name];
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) return value.join(" ");
+}
+/**
+* Parse Tab elements from Tabs children.
+*/
+function parseTabChildren(children) {
+	const tabs = [];
+	for (const child of children) {
+		if (child.type !== "element") continue;
+		if (child.tagName.toLowerCase() === "tab") {
+			const label = getAttribute(child, "label") || `Tab ${tabs.length + 1}`;
+			tabs.push({
+				label,
+				content: child.children.filter((c) => c.type === "element" || c.type === "text")
+			});
+		}
+	}
+	return tabs;
+}
+/**
+* Create the HTML structure for tabs.
+*/
+function createTabsElement(tabs, groupId) {
+	const children = [];
+	const headerChildren = [];
+	tabs.forEach((tab, index) => {
+		const inputId = `ox-tab-${groupId}-${index}`;
+		headerChildren.push({
+			type: "element",
+			tagName: "input",
+			properties: {
+				type: "radio",
+				name: `ox-tabs-${groupId}`,
+				id: inputId,
+				checked: index === 0 ? true : void 0
+			},
+			children: []
+		});
+		headerChildren.push({
+			type: "element",
+			tagName: "label",
+			properties: { htmlFor: inputId },
+			children: [{
+				type: "text",
+				value: tab.label
+			}]
+		});
+	});
+	children.push({
+		type: "element",
+		tagName: "div",
+		properties: { className: ["ox-tabs-header"] },
+		children: headerChildren
+	});
+	tabs.forEach((tab, index) => {
+		children.push({
+			type: "element",
+			tagName: "div",
+			properties: {
+				className: ["ox-tab-panel"],
+				"data-tab": String(index)
+			},
+			children: tab.content
+		});
+	});
+	return {
+		type: "element",
+		tagName: "div",
+		properties: {
+			className: ["ox-tabs"],
+			"data-group": groupId
+		},
+		children
+	};
+}
+/**
+* Create fallback HTML using <details> elements.
+*/
+function createFallbackElement(tabs) {
+	const children = [];
+	tabs.forEach((tab, index) => {
+		children.push({
+			type: "element",
+			tagName: "details",
+			properties: { open: index === 0 ? true : void 0 },
+			children: [{
+				type: "element",
+				tagName: "summary",
+				properties: {},
+				children: [{
+					type: "text",
+					value: tab.label
+				}]
+			}, {
+				type: "element",
+				tagName: "div",
+				properties: { className: ["ox-tabs-fallback-content"] },
+				children: tab.content
+			}]
+		});
+	});
+	return {
+		type: "element",
+		tagName: "noscript",
+		properties: {},
+		children: [{
+			type: "element",
+			tagName: "div",
+			properties: { className: ["ox-tabs-fallback"] },
+			children
+		}]
+	};
+}
+/**
+* Rehype plugin to transform Tabs components.
+*/
+function rehypeTabs() {
+	return (tree) => {
+		const visit = (node) => {
+			if ("children" in node) for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				if (child.type === "element") if (child.tagName.toLowerCase() === "tabs") {
+					const tabs = parseTabChildren(child.children);
+					if (tabs.length > 0) {
+						const wrapper = {
+							type: "element",
+							tagName: "div",
+							properties: { className: ["ox-tabs-container"] },
+							children: [createTabsElement(tabs, String(tabGroupCounter++)), createFallbackElement(tabs)]
+						};
+						node.children[i] = wrapper;
+					}
+				} else visit(child);
+			}
+		};
+		visit(tree);
+	};
+}
+/**
+* Transform Tabs components in HTML.
+*/
+async function transformTabs(html) {
+	const result = await unified().use(rehypeParse, { fragment: true }).use(rehypeTabs).use(rehypeStringify).process(html);
+	return String(result);
+}
+/**
+* Generate dynamic CSS for :has() based tab switching.
+* This is needed because :has() selectors need unique IDs.
+*/
+function generateTabsCSS(groupCount) {
+	if (groupCount === 0) return "";
+	let css = "/* Dynamic Tabs CSS */\n";
+	for (let g = 0; g < groupCount; g++) for (let t = 0; t < 8; t++) css += `.ox-tabs[data-group="${g}"]:has(#ox-tab-${g}-${t}:checked) .ox-tab-panel[data-tab="${t}"] { display: block; }\n`;
+	return css;
+}
+
+//#endregion
+export { transformTabs as n, generateTabsCSS as t };
+//# sourceMappingURL=tabs2.js.map

package/dist/tabs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs2.js","names":[],"sources":["../src/plugins/tabs.ts"],"sourcesContent":["/**\n * Tabs Plugin - Pure CSS implementation\n *\n * Transforms <Tabs>/<Tab> components into accessible HTML\n * with CSS :has() based tab switching (no JavaScript required).\n */\n\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeStringify from \"rehype-stringify\";\nimport type { Root, Element, Text } from \"hast\";\n\nlet tabGroupCounter = 0;\n\n/**\n * Reset tab group counter (for testing).\n */\nexport function resetTabGroupCounter(): void {\n  tabGroupCounter = 0;\n}\n\n/**\n * Extract text content from a hast node.\n */\nfunction getTextContent(node: Element | Root): string {\n  let text = \"\";\n  if (\"children\" in node) {\n    for (const child of node.children) {\n      if (child.type === \"text\") {\n        text += (child as Text).value;\n      } else if (child.type === \"element\") {\n        text += getTextContent(child as Element);\n      }\n    }\n  }\n  return text;\n}\n\n/**\n * Get element attribute value.\n */\nfunction getAttribute(el: Element, name: string): string | undefined {\n  const value = el.properties?.[name];\n  if (typeof value === \"string\") return value;\n  if (Array.isArray(value)) return value.join(\" \");\n  return undefined;\n}\n\ninterface TabData {\n  label: string;\n  content: Element[];\n}\n\n/**\n * Parse Tab elements from Tabs children.\n */\nfunction parseTabChildren(children: Element[\"children\"]): TabData[] {\n  const tabs: TabData[] = [];\n\n  for (const child of children) {\n    if (child.type !== \"element\") continue;\n\n    // Handle <Tab label=\"...\">\n    if (child.tagName.toLowerCase() === \"tab\") {\n      const label = getAttribute(child, \"label\") || `Tab ${tabs.length + 1}`;\n      tabs.push({\n        label,\n        content: child.children.filter((c): c is Element => c.type === \"element\" || c.type === \"text\") as Element[],\n      });\n    }\n  }\n\n  return tabs;\n}\n\n/**\n * Create the HTML structure for tabs.\n */\nfunction createTabsElement(tabs: TabData[], groupId: string): Element {\n  const children: Element[\"children\"] = [];\n\n  // Create header with radio inputs and labels\n  const headerChildren: Element[\"children\"] = [];\n\n  tabs.forEach((tab, index) => {\n    const inputId = `ox-tab-${groupId}-${index}`;\n\n    // Radio input\n    headerChildren.push({\n      type: \"element\",\n      tagName: \"input\",\n      properties: {\n        type: \"radio\",\n        name: `ox-tabs-${groupId}`,\n        id: inputId,\n        checked: index === 0 ? true : undefined,\n      },\n      children: [],\n    });\n\n    // Label\n    headerChildren.push({\n      type: \"element\",\n      tagName: \"label\",\n      properties: {\n        htmlFor: inputId,\n      },\n      children: [{ type: \"text\", value: tab.label }],\n    });\n  });\n\n  // Tabs header\n  children.push({\n    type: \"element\",\n    tagName: \"div\",\n    properties: { className: [\"ox-tabs-header\"] },\n    children: headerChildren,\n  });\n\n  // Tab panels\n  tabs.forEach((tab, index) => {\n    children.push({\n      type: \"element\",\n      tagName: \"div\",\n      properties: {\n        className: [\"ox-tab-panel\"],\n        \"data-tab\": String(index),\n      },\n      children: tab.content,\n    });\n  });\n\n  return {\n    type: \"element\",\n    tagName: \"div\",\n    properties: {\n      className: [\"ox-tabs\"],\n      \"data-group\": groupId,\n    },\n    children,\n  };\n}\n\n/**\n * Create fallback HTML using <details> elements.\n */\nfunction createFallbackElement(tabs: TabData[]): Element {\n  const children: Element[\"children\"] = [];\n\n  tabs.forEach((tab, index) => {\n    children.push({\n      type: \"element\",\n      tagName: \"details\",\n      properties: {\n        open: index === 0 ? true : undefined,\n      },\n      children: [\n        {\n          type: \"element\",\n          tagName: \"summary\",\n          properties: {},\n          children: [{ type: \"text\", value: tab.label }],\n        },\n        {\n          type: \"element\",\n          tagName: \"div\",\n          properties: { className: [\"ox-tabs-fallback-content\"] },\n          children: tab.content,\n        },\n      ],\n    });\n  });\n\n  return {\n    type: \"element\",\n    tagName: \"noscript\",\n    properties: {},\n    children: [\n      {\n        type: \"element\",\n        tagName: \"div\",\n        properties: { className: [\"ox-tabs-fallback\"] },\n        children,\n      },\n    ],\n  };\n}\n\n/**\n * Rehype plugin to transform Tabs components.\n */\nfunction rehypeTabs() {\n  return (tree: Root) => {\n    const visit = (node: Root | Element) => {\n      if (\"children\" in node) {\n        for (let i = 0; i < node.children.length; i++) {\n          const child = node.children[i];\n\n          if (child.type === \"element\") {\n            // Check for <Tabs> component\n            if (child.tagName.toLowerCase() === \"tabs\") {\n              const tabs = parseTabChildren(child.children);\n\n              if (tabs.length > 0) {\n                const groupId = String(tabGroupCounter++);\n                const tabsElement = createTabsElement(tabs, groupId);\n                const fallbackElement = createFallbackElement(tabs);\n\n                // Replace <Tabs> with new structure\n                // Keep main tabs and add noscript fallback\n                const wrapper: Element = {\n                  type: \"element\",\n                  tagName: \"div\",\n                  properties: { className: [\"ox-tabs-container\"] },\n                  children: [tabsElement, fallbackElement],\n                };\n\n                node.children[i] = wrapper;\n              }\n            } else {\n              visit(child);\n            }\n          }\n        }\n      }\n    };\n\n    visit(tree);\n  };\n}\n\n/**\n * Transform Tabs components in HTML.\n */\nexport async function transformTabs(html: string): Promise<string> {\n  const result = await unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeTabs)\n    .use(rehypeStringify)\n    .process(html);\n\n  return String(result);\n}\n\n/**\n * Generate dynamic CSS for :has() based tab switching.\n * This is needed because :has() selectors need unique IDs.\n */\nexport function generateTabsCSS(groupCount: number): string {\n  if (groupCount === 0) return \"\";\n\n  let css = \"/* Dynamic Tabs CSS */\\n\";\n\n  for (let g = 0; g < groupCount; g++) {\n    for (let t = 0; t < 8; t++) {\n      css += `.ox-tabs[data-group=\"${g}\"]:has(#ox-tab-${g}-${t}:checked) .ox-tab-panel[data-tab=\"${t}\"] { display: block; }\\n`;\n    }\n  }\n\n  return css;\n}\n"],"mappings":"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"}

package/dist/youtube.cjs

@@ -0,0 +1,4 @@
+const require_chunk = require('./chunk.cjs');
+const require_youtube = require('./youtube2.cjs');
+
+exports.transformYouTube = require_youtube.transformYouTube;

package/dist/youtube.js

@@ -0,0 +1,3 @@
+import { n as transformYouTube, t as extractVideoId } from "./youtube2.js";
+
+export { transformYouTube };

package/dist/youtube2.cjs

@@ -0,0 +1,127 @@
+const require_chunk = require('./chunk.cjs');
+let unified = require("unified");
+let rehype_parse = require("rehype-parse");
+rehype_parse = require_chunk.__toESM(rehype_parse);
+let rehype_stringify = require("rehype-stringify");
+rehype_stringify = require_chunk.__toESM(rehype_stringify);
+
+//#region src/plugins/youtube.ts
+/**
+* YouTube Plugin - Privacy-enhanced iframe embedding
+*
+* Transforms <YouTube> components into responsive iframe embeds
+* using youtube-nocookie.com for enhanced privacy.
+*/
+const defaultOptions = {
+	privacyEnhanced: true,
+	aspectRatio: "16/9",
+	allowFullscreen: true,
+	lazyLoad: true
+};
+/**
+* Get element attribute value.
+*/
+function getAttribute(el, name) {
+	const value = el.properties?.[name];
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) return value.join(" ");
+}
+/**
+* Extract YouTube video ID from various URL formats.
+*/
+function extractVideoId(input) {
+	if (/^[a-zA-Z0-9_-]{11}$/.test(input)) return input;
+	for (const pattern of [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/)([a-zA-Z0-9_-]{11})/, /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/]) {
+		const match = input.match(pattern);
+		if (match) return match[1];
+	}
+	return null;
+}
+/**
+* Build YouTube embed URL with parameters.
+*/
+function buildEmbedUrl(videoId, options, params) {
+	const domain = options.privacyEnhanced ? "www.youtube-nocookie.com" : "www.youtube.com";
+	const url = new URL(`https://${domain}/embed/${videoId}`);
+	if (params) for (const [key, value] of Object.entries(params)) url.searchParams.set(key, value);
+	return url.toString();
+}
+/**
+* Create YouTube embed element.
+*/
+function createYouTubeElement(videoId, options, title, start) {
+	const params = {};
+	if (start) params.start = start;
+	const iframe = {
+		type: "element",
+		tagName: "iframe",
+		properties: {
+			src: buildEmbedUrl(videoId, options, params),
+			title: title || `YouTube video ${videoId}`,
+			allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+			referrerpolicy: "strict-origin-when-cross-origin",
+			allowfullscreen: options.allowFullscreen || void 0,
+			loading: options.lazyLoad ? "lazy" : void 0
+		},
+		children: []
+	};
+	return {
+		type: "element",
+		tagName: "div",
+		properties: {
+			className: ["ox-youtube"],
+			style: `aspect-ratio: ${options.aspectRatio};`
+		},
+		children: [iframe]
+	};
+}
+/**
+* Rehype plugin to transform YouTube components.
+*/
+function rehypeYouTube(options) {
+	return (tree) => {
+		const visit = (node) => {
+			if ("children" in node) for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				if (child.type === "element") if (child.tagName.toLowerCase() === "youtube") {
+					const id = getAttribute(child, "id");
+					const url = getAttribute(child, "url");
+					const title = getAttribute(child, "title");
+					const start = getAttribute(child, "start");
+					const videoId = id ? extractVideoId(id) : url ? extractVideoId(url) : null;
+					if (videoId) {
+						const youtubeElement = createYouTubeElement(videoId, options, title, start);
+						node.children[i] = youtubeElement;
+					}
+				} else visit(child);
+			}
+		};
+		visit(tree);
+	};
+}
+/**
+* Transform YouTube components in HTML.
+*/
+async function transformYouTube(html, options) {
+	const mergedOptions = {
+		...defaultOptions,
+		...options
+	};
+	const result = await (0, unified.unified)().use(rehype_parse.default, { fragment: true }).use(rehypeYouTube, mergedOptions).use(rehype_stringify.default).process(html);
+	return String(result);
+}
+
+//#endregion
+Object.defineProperty(exports, 'extractVideoId', {
+  enumerable: true,
+  get: function () {
+    return extractVideoId;
+  }
+});
+Object.defineProperty(exports, 'transformYouTube', {
+  enumerable: true,
+  get: function () {
+    return transformYouTube;
+  }
+});
+//# sourceMappingURL=youtube2.cjs.map

package/dist/youtube2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube2.cjs","names":["rehypeParse","rehypeStringify"],"sources":["../src/plugins/youtube.ts"],"sourcesContent":["/**\n * YouTube Plugin - Privacy-enhanced iframe embedding\n *\n * Transforms <YouTube> components into responsive iframe embeds\n * using youtube-nocookie.com for enhanced privacy.\n */\n\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeStringify from \"rehype-stringify\";\nimport type { Root, Element, Properties } from \"hast\";\n\nexport interface YouTubeOptions {\n  /** Use privacy-enhanced mode (youtube-nocookie.com). Default: true */\n  privacyEnhanced?: boolean;\n  /** Default aspect ratio. Default: \"16/9\" */\n  aspectRatio?: string;\n  /** Allow fullscreen. Default: true */\n  allowFullscreen?: boolean;\n  /** Lazy load iframe. Default: true */\n  lazyLoad?: boolean;\n}\n\nconst defaultOptions: Required<YouTubeOptions> = {\n  privacyEnhanced: true,\n  aspectRatio: \"16/9\",\n  allowFullscreen: true,\n  lazyLoad: true,\n};\n\n/**\n * Get element attribute value.\n */\nfunction getAttribute(el: Element, name: string): string | undefined {\n  const value = el.properties?.[name];\n  if (typeof value === \"string\") return value;\n  if (Array.isArray(value)) return value.join(\" \");\n  return undefined;\n}\n\n/**\n * Extract YouTube video ID from various URL formats.\n */\nexport function extractVideoId(input: string): string | null {\n  // Already a video ID (11 characters, alphanumeric + _ -)\n  if (/^[a-zA-Z0-9_-]{11}$/.test(input)) {\n    return input;\n  }\n\n  // Full URL patterns\n  const patterns = [\n    /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/|youtube\\.com\\/v\\/)([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/shorts\\/([a-zA-Z0-9_-]{11})/,\n  ];\n\n  for (const pattern of patterns) {\n    const match = input.match(pattern);\n    if (match) return match[1];\n  }\n\n  return null;\n}\n\n/**\n * Build YouTube embed URL with parameters.\n */\nfunction buildEmbedUrl(videoId: string, options: Required<YouTubeOptions>, params?: Record<string, string>): string {\n  const domain = options.privacyEnhanced ? \"www.youtube-nocookie.com\" : \"www.youtube.com\";\n  const url = new URL(`https://${domain}/embed/${videoId}`);\n\n  // Add any custom parameters\n  if (params) {\n    for (const [key, value] of Object.entries(params)) {\n      url.searchParams.set(key, value);\n    }\n  }\n\n  return url.toString();\n}\n\n/**\n * Create YouTube embed element.\n */\nfunction createYouTubeElement(\n  videoId: string,\n  options: Required<YouTubeOptions>,\n  title?: string,\n  start?: string,\n): Element {\n  const params: Record<string, string> = {};\n  if (start) {\n    params.start = start;\n  }\n\n  const embedUrl = buildEmbedUrl(videoId, options, params);\n\n  const iframeProps: Properties = {\n    src: embedUrl,\n    title: title || `YouTube video ${videoId}`,\n    allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n    referrerpolicy: \"strict-origin-when-cross-origin\",\n    allowfullscreen: options.allowFullscreen || undefined,\n    loading: options.lazyLoad ? \"lazy\" : undefined,\n  };\n\n  const iframe: Element = {\n    type: \"element\",\n    tagName: \"iframe\",\n    properties: iframeProps,\n    children: [],\n  };\n\n  return {\n    type: \"element\",\n    tagName: \"div\",\n    properties: {\n      className: [\"ox-youtube\"],\n      style: `aspect-ratio: ${options.aspectRatio};`,\n    },\n    children: [iframe],\n  };\n}\n\n/**\n * Rehype plugin to transform YouTube components.\n */\nfunction rehypeYouTube(options: Required<YouTubeOptions>) {\n  return (tree: Root) => {\n    const visit = (node: Root | Element) => {\n      if (\"children\" in node) {\n        for (let i = 0; i < node.children.length; i++) {\n          const child = node.children[i];\n\n          if (child.type === \"element\") {\n            // Check for <YouTube> component\n            if (child.tagName.toLowerCase() === \"youtube\") {\n              const id = getAttribute(child, \"id\");\n              const url = getAttribute(child, \"url\");\n              const title = getAttribute(child, \"title\");\n              const start = getAttribute(child, \"start\");\n\n              // Extract video ID from id or url attribute\n              const videoId = id ? extractVideoId(id) : url ? extractVideoId(url) : null;\n\n              if (videoId) {\n                const youtubeElement = createYouTubeElement(videoId, options, title, start);\n                node.children[i] = youtubeElement;\n              }\n            } else {\n              visit(child);\n            }\n          }\n        }\n      }\n    };\n\n    visit(tree);\n  };\n}\n\n/**\n * Transform YouTube components in HTML.\n */\nexport async function transformYouTube(html: string, options?: YouTubeOptions): Promise<string> {\n  const mergedOptions = { ...defaultOptions, ...options };\n\n  const result = await unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeYouTube, mergedOptions)\n    .use(rehypeStringify)\n    .process(html);\n\n  return String(result);\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,iBAA2C;CAC/C,iBAAiB;CACjB,aAAa;CACb,iBAAiB;CACjB,UAAU;CACX;;;;AAKD,SAAS,aAAa,IAAa,MAAkC;CACnE,MAAM,QAAQ,GAAG,aAAa;AAC9B,KAAI,OAAO,UAAU,SAAU,QAAO;AACtC,KAAI,MAAM,QAAQ,MAAM,CAAE,QAAO,MAAM,KAAK,IAAI;;;;;AAOlD,SAAgB,eAAe,OAA8B;AAE3D,KAAI,sBAAsB,KAAK,MAAM,CACnC,QAAO;AAST,MAAK,MAAM,WALM,CACf,sGACA,4CACD,EAE+B;EAC9B,MAAM,QAAQ,MAAM,MAAM,QAAQ;AAClC,MAAI,MAAO,QAAO,MAAM;;AAG1B,QAAO;;;;;AAMT,SAAS,cAAc,SAAiB,SAAmC,QAAyC;CAClH,MAAM,SAAS,QAAQ,kBAAkB,6BAA6B;CACtE,MAAM,MAAM,IAAI,IAAI,WAAW,OAAO,SAAS,UAAU;AAGzD,KAAI,OACF,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAC/C,KAAI,aAAa,IAAI,KAAK,MAAM;AAIpC,QAAO,IAAI,UAAU;;;;;AAMvB,SAAS,qBACP,SACA,SACA,OACA,OACS;CACT,MAAM,SAAiC,EAAE;AACzC,KAAI,MACF,QAAO,QAAQ;CAcjB,MAAM,SAAkB;EACtB,MAAM;EACN,SAAS;EACT,YAZ8B;GAC9B,KAHe,cAAc,SAAS,SAAS,OAAO;GAItD,OAAO,SAAS,iBAAiB;GACjC,OAAO;GACP,gBAAgB;GAChB,iBAAiB,QAAQ,mBAAmB;GAC5C,SAAS,QAAQ,WAAW,SAAS;GACtC;EAMC,UAAU,EAAE;EACb;AAED,QAAO;EACL,MAAM;EACN,SAAS;EACT,YAAY;GACV,WAAW,CAAC,aAAa;GACzB,OAAO,iBAAiB,QAAQ,YAAY;GAC7C;EACD,UAAU,CAAC,OAAO;EACnB;;;;;AAMH,SAAS,cAAc,SAAmC;AACxD,SAAQ,SAAe;EACrB,MAAM,SAAS,SAAyB;AACtC,OAAI,cAAc,KAChB,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,SAAS,QAAQ,KAAK;IAC7C,MAAM,QAAQ,KAAK,SAAS;AAE5B,QAAI,MAAM,SAAS,UAEjB,KAAI,MAAM,QAAQ,aAAa,KAAK,WAAW;KAC7C,MAAM,KAAK,aAAa,OAAO,KAAK;KACpC,MAAM,MAAM,aAAa,OAAO,MAAM;KACtC,MAAM,QAAQ,aAAa,OAAO,QAAQ;KAC1C,MAAM,QAAQ,aAAa,OAAO,QAAQ;KAG1C,MAAM,UAAU,KAAK,eAAe,GAAG,GAAG,MAAM,eAAe,IAAI,GAAG;AAEtE,SAAI,SAAS;MACX,MAAM,iBAAiB,qBAAqB,SAAS,SAAS,OAAO,MAAM;AAC3E,WAAK,SAAS,KAAK;;UAGrB,OAAM,MAAM;;;AAOtB,QAAM,KAAK;;;;;;AAOf,eAAsB,iBAAiB,MAAc,SAA2C;CAC9F,MAAM,gBAAgB;EAAE,GAAG;EAAgB,GAAG;EAAS;CAEvD,MAAM,SAAS,4BAAe,CAC3B,IAAIA,sBAAa,EAAE,UAAU,MAAM,CAAC,CACpC,IAAI,eAAe,cAAc,CACjC,IAAIC,yBAAgB,CACpB,QAAQ,KAAK;AAEhB,QAAO,OAAO,OAAO"}

package/dist/youtube2.js

@@ -0,0 +1,113 @@
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeStringify from "rehype-stringify";
+
+//#region src/plugins/youtube.ts
+/**
+* YouTube Plugin - Privacy-enhanced iframe embedding
+*
+* Transforms <YouTube> components into responsive iframe embeds
+* using youtube-nocookie.com for enhanced privacy.
+*/
+const defaultOptions = {
+	privacyEnhanced: true,
+	aspectRatio: "16/9",
+	allowFullscreen: true,
+	lazyLoad: true
+};
+/**
+* Get element attribute value.
+*/
+function getAttribute(el, name) {
+	const value = el.properties?.[name];
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) return value.join(" ");
+}
+/**
+* Extract YouTube video ID from various URL formats.
+*/
+function extractVideoId(input) {
+	if (/^[a-zA-Z0-9_-]{11}$/.test(input)) return input;
+	for (const pattern of [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/)([a-zA-Z0-9_-]{11})/, /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/]) {
+		const match = input.match(pattern);
+		if (match) return match[1];
+	}
+	return null;
+}
+/**
+* Build YouTube embed URL with parameters.
+*/
+function buildEmbedUrl(videoId, options, params) {
+	const domain = options.privacyEnhanced ? "www.youtube-nocookie.com" : "www.youtube.com";
+	const url = new URL(`https://${domain}/embed/${videoId}`);
+	if (params) for (const [key, value] of Object.entries(params)) url.searchParams.set(key, value);
+	return url.toString();
+}
+/**
+* Create YouTube embed element.
+*/
+function createYouTubeElement(videoId, options, title, start) {
+	const params = {};
+	if (start) params.start = start;
+	const iframe = {
+		type: "element",
+		tagName: "iframe",
+		properties: {
+			src: buildEmbedUrl(videoId, options, params),
+			title: title || `YouTube video ${videoId}`,
+			allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+			referrerpolicy: "strict-origin-when-cross-origin",
+			allowfullscreen: options.allowFullscreen || void 0,
+			loading: options.lazyLoad ? "lazy" : void 0
+		},
+		children: []
+	};
+	return {
+		type: "element",
+		tagName: "div",
+		properties: {
+			className: ["ox-youtube"],
+			style: `aspect-ratio: ${options.aspectRatio};`
+		},
+		children: [iframe]
+	};
+}
+/**
+* Rehype plugin to transform YouTube components.
+*/
+function rehypeYouTube(options) {
+	return (tree) => {
+		const visit = (node) => {
+			if ("children" in node) for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				if (child.type === "element") if (child.tagName.toLowerCase() === "youtube") {
+					const id = getAttribute(child, "id");
+					const url = getAttribute(child, "url");
+					const title = getAttribute(child, "title");
+					const start = getAttribute(child, "start");
+					const videoId = id ? extractVideoId(id) : url ? extractVideoId(url) : null;
+					if (videoId) {
+						const youtubeElement = createYouTubeElement(videoId, options, title, start);
+						node.children[i] = youtubeElement;
+					}
+				} else visit(child);
+			}
+		};
+		visit(tree);
+	};
+}
+/**
+* Transform YouTube components in HTML.
+*/
+async function transformYouTube(html, options) {
+	const mergedOptions = {
+		...defaultOptions,
+		...options
+	};
+	const result = await unified().use(rehypeParse, { fragment: true }).use(rehypeYouTube, mergedOptions).use(rehypeStringify).process(html);
+	return String(result);
+}
+
+//#endregion
+export { transformYouTube as n, extractVideoId as t };
+//# sourceMappingURL=youtube2.js.map

package/dist/youtube2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube2.js","names":[],"sources":["../src/plugins/youtube.ts"],"sourcesContent":["/**\n * YouTube Plugin - Privacy-enhanced iframe embedding\n *\n * Transforms <YouTube> components into responsive iframe embeds\n * using youtube-nocookie.com for enhanced privacy.\n */\n\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeStringify from \"rehype-stringify\";\nimport type { Root, Element, Properties } from \"hast\";\n\nexport interface YouTubeOptions {\n  /** Use privacy-enhanced mode (youtube-nocookie.com). Default: true */\n  privacyEnhanced?: boolean;\n  /** Default aspect ratio. Default: \"16/9\" */\n  aspectRatio?: string;\n  /** Allow fullscreen. Default: true */\n  allowFullscreen?: boolean;\n  /** Lazy load iframe. Default: true */\n  lazyLoad?: boolean;\n}\n\nconst defaultOptions: Required<YouTubeOptions> = {\n  privacyEnhanced: true,\n  aspectRatio: \"16/9\",\n  allowFullscreen: true,\n  lazyLoad: true,\n};\n\n/**\n * Get element attribute value.\n */\nfunction getAttribute(el: Element, name: string): string | undefined {\n  const value = el.properties?.[name];\n  if (typeof value === \"string\") return value;\n  if (Array.isArray(value)) return value.join(\" \");\n  return undefined;\n}\n\n/**\n * Extract YouTube video ID from various URL formats.\n */\nexport function extractVideoId(input: string): string | null {\n  // Already a video ID (11 characters, alphanumeric + _ -)\n  if (/^[a-zA-Z0-9_-]{11}$/.test(input)) {\n    return input;\n  }\n\n  // Full URL patterns\n  const patterns = [\n    /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/|youtube\\.com\\/v\\/)([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/shorts\\/([a-zA-Z0-9_-]{11})/,\n  ];\n\n  for (const pattern of patterns) {\n    const match = input.match(pattern);\n    if (match) return match[1];\n  }\n\n  return null;\n}\n\n/**\n * Build YouTube embed URL with parameters.\n */\nfunction buildEmbedUrl(videoId: string, options: Required<YouTubeOptions>, params?: Record<string, string>): string {\n  const domain = options.privacyEnhanced ? \"www.youtube-nocookie.com\" : \"www.youtube.com\";\n  const url = new URL(`https://${domain}/embed/${videoId}`);\n\n  // Add any custom parameters\n  if (params) {\n    for (const [key, value] of Object.entries(params)) {\n      url.searchParams.set(key, value);\n    }\n  }\n\n  return url.toString();\n}\n\n/**\n * Create YouTube embed element.\n */\nfunction createYouTubeElement(\n  videoId: string,\n  options: Required<YouTubeOptions>,\n  title?: string,\n  start?: string,\n): Element {\n  const params: Record<string, string> = {};\n  if (start) {\n    params.start = start;\n  }\n\n  const embedUrl = buildEmbedUrl(videoId, options, params);\n\n  const iframeProps: Properties = {\n    src: embedUrl,\n    title: title || `YouTube video ${videoId}`,\n    allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n    referrerpolicy: \"strict-origin-when-cross-origin\",\n    allowfullscreen: options.allowFullscreen || undefined,\n    loading: options.lazyLoad ? \"lazy\" : undefined,\n  };\n\n  const iframe: Element = {\n    type: \"element\",\n    tagName: \"iframe\",\n    properties: iframeProps,\n    children: [],\n  };\n\n  return {\n    type: \"element\",\n    tagName: \"div\",\n    properties: {\n      className: [\"ox-youtube\"],\n      style: `aspect-ratio: ${options.aspectRatio};`,\n    },\n    children: [iframe],\n  };\n}\n\n/**\n * Rehype plugin to transform YouTube components.\n */\nfunction rehypeYouTube(options: Required<YouTubeOptions>) {\n  return (tree: Root) => {\n    const visit = (node: Root | Element) => {\n      if (\"children\" in node) {\n        for (let i = 0; i < node.children.length; i++) {\n          const child = node.children[i];\n\n          if (child.type === \"element\") {\n            // Check for <YouTube> component\n            if (child.tagName.toLowerCase() === \"youtube\") {\n              const id = getAttribute(child, \"id\");\n              const url = getAttribute(child, \"url\");\n              const title = getAttribute(child, \"title\");\n              const start = getAttribute(child, \"start\");\n\n              // Extract video ID from id or url attribute\n              const videoId = id ? extractVideoId(id) : url ? extractVideoId(url) : null;\n\n              if (videoId) {\n                const youtubeElement = createYouTubeElement(videoId, options, title, start);\n                node.children[i] = youtubeElement;\n              }\n            } else {\n              visit(child);\n            }\n          }\n        }\n      }\n    };\n\n    visit(tree);\n  };\n}\n\n/**\n * Transform YouTube components in HTML.\n */\nexport async function transformYouTube(html: string, options?: YouTubeOptions): Promise<string> {\n  const mergedOptions = { ...defaultOptions, ...options };\n\n  const result = await unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeYouTube, mergedOptions)\n    .use(rehypeStringify)\n    .process(html);\n\n  return String(result);\n}\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,iBAA2C;CAC/C,iBAAiB;CACjB,aAAa;CACb,iBAAiB;CACjB,UAAU;CACX;;;;AAKD,SAAS,aAAa,IAAa,MAAkC;CACnE,MAAM,QAAQ,GAAG,aAAa;AAC9B,KAAI,OAAO,UAAU,SAAU,QAAO;AACtC,KAAI,MAAM,QAAQ,MAAM,CAAE,QAAO,MAAM,KAAK,IAAI;;;;;AAOlD,SAAgB,eAAe,OAA8B;AAE3D,KAAI,sBAAsB,KAAK,MAAM,CACnC,QAAO;AAST,MAAK,MAAM,WALM,CACf,sGACA,4CACD,EAE+B;EAC9B,MAAM,QAAQ,MAAM,MAAM,QAAQ;AAClC,MAAI,MAAO,QAAO,MAAM;;AAG1B,QAAO;;;;;AAMT,SAAS,cAAc,SAAiB,SAAmC,QAAyC;CAClH,MAAM,SAAS,QAAQ,kBAAkB,6BAA6B;CACtE,MAAM,MAAM,IAAI,IAAI,WAAW,OAAO,SAAS,UAAU;AAGzD,KAAI,OACF,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAC/C,KAAI,aAAa,IAAI,KAAK,MAAM;AAIpC,QAAO,IAAI,UAAU;;;;;AAMvB,SAAS,qBACP,SACA,SACA,OACA,OACS;CACT,MAAM,SAAiC,EAAE;AACzC,KAAI,MACF,QAAO,QAAQ;CAcjB,MAAM,SAAkB;EACtB,MAAM;EACN,SAAS;EACT,YAZ8B;GAC9B,KAHe,cAAc,SAAS,SAAS,OAAO;GAItD,OAAO,SAAS,iBAAiB;GACjC,OAAO;GACP,gBAAgB;GAChB,iBAAiB,QAAQ,mBAAmB;GAC5C,SAAS,QAAQ,WAAW,SAAS;GACtC;EAMC,UAAU,EAAE;EACb;AAED,QAAO;EACL,MAAM;EACN,SAAS;EACT,YAAY;GACV,WAAW,CAAC,aAAa;GACzB,OAAO,iBAAiB,QAAQ,YAAY;GAC7C;EACD,UAAU,CAAC,OAAO;EACnB;;;;;AAMH,SAAS,cAAc,SAAmC;AACxD,SAAQ,SAAe;EACrB,MAAM,SAAS,SAAyB;AACtC,OAAI,cAAc,KAChB,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,SAAS,QAAQ,KAAK;IAC7C,MAAM,QAAQ,KAAK,SAAS;AAE5B,QAAI,MAAM,SAAS,UAEjB,KAAI,MAAM,QAAQ,aAAa,KAAK,WAAW;KAC7C,MAAM,KAAK,aAAa,OAAO,KAAK;KACpC,MAAM,MAAM,aAAa,OAAO,MAAM;KACtC,MAAM,QAAQ,aAAa,OAAO,QAAQ;KAC1C,MAAM,QAAQ,aAAa,OAAO,QAAQ;KAG1C,MAAM,UAAU,KAAK,eAAe,GAAG,GAAG,MAAM,eAAe,IAAI,GAAG;AAEtE,SAAI,SAAS;MACX,MAAM,iBAAiB,qBAAqB,SAAS,SAAS,OAAO,MAAM;AAC3E,WAAK,SAAS,KAAK;;UAGrB,OAAM,MAAM;;;AAOtB,QAAM,KAAK;;;;;;AAOf,eAAsB,iBAAiB,MAAc,SAA2C;CAC9F,MAAM,gBAAgB;EAAE,GAAG;EAAgB,GAAG;EAAS;CAEvD,MAAM,SAAS,MAAM,SAAS,CAC3B,IAAI,aAAa,EAAE,UAAU,MAAM,CAAC,CACpC,IAAI,eAAe,cAAc,CACjC,IAAI,gBAAgB,CACpB,QAAQ,KAAK;AAEhB,QAAO,OAAO,OAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ox-content/vite-plugin",
-  "version": "0.0.1-alpha.0",
+  "version": "0.3.0-alpha.11",
   "description": "Vite plugin for Ox Content - High-performance Markdown processing with Environment API",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,29 +14,27 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
-    "vite": "catalog:"
+    "vite": "^8.0.0-beta.0"
   },
   "dependencies": {
-    "@ox-content/napi": "workspace:*",
+    "@mermaid-js/mermaid-cli": "^11.12.0",
+    "puppeteer": "^23.0.0",
     "glob": "^11.0.0",
-    "unified": "^11.0.5",
     "rehype-parse": "^9.0.1",
     "rehype-stringify": "^10.0.1",
     "shiki": "^1.24.0",
-    "mermaid": "^11.4.0"
+    "unified": "^11.0.5",
+    "@ox-content/napi": "0.3.0-alpha.11"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
-    "@types/node": "catalog:",
-    "tsup": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:"
+    "@types/node": "^22.0.0",
+    "@typescript/native-preview": "^7.0.0-dev.20250601",
+    "tsdown": "^0.12.0",
+    "typescript": "^5.7.0",
+    "vite": "^8.0.0-beta.0",
+    "yaml": "^2.8.2"
   },
   "keywords": [
     "vite",
@@ -55,5 +53,10 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsgo --noEmit"
   }
-}
+}