npm - @maizzle/framework - Versions diffs - 6.0.0-rc.4 → 6.0.0-rc.6 - Mend

@maizzle/framework 6.0.0-rc.4 → 6.0.0-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/dist/build.mjs +3 -2
package/dist/build.mjs.map +1 -1
package/dist/components/Body.vue +42 -0
package/dist/components/Button.vue +65 -14
package/dist/components/CodeBlock.vue +75 -0
package/dist/components/CodeInline.vue +44 -0
package/dist/components/Column.vue +61 -0
package/dist/components/Container.vue +40 -0
package/dist/components/Head.vue +8 -0
package/dist/components/Html.vue +53 -0
package/dist/components/Image.vue +70 -0
package/dist/components/Overlap.vue +60 -0
package/dist/components/Preview.vue +20 -0
package/dist/components/Row.vue +80 -0
package/dist/components/Spacer.vue +50 -7
package/dist/composables/renderContext.d.mts +5 -0
package/dist/composables/renderContext.d.mts.map +1 -1
package/dist/composables/renderContext.mjs.map +1 -1
package/dist/composables/usePreviewText.d.mts +24 -0
package/dist/composables/usePreviewText.d.mts.map +1 -0
package/dist/composables/usePreviewText.mjs +29 -0
package/dist/composables/usePreviewText.mjs.map +1 -0
package/dist/index.d.mts +3 -2
package/dist/index.mjs +2 -1
package/dist/render/createRenderer.d.mts +1 -0
package/dist/render/createRenderer.d.mts.map +1 -1
package/dist/render/createRenderer.mjs +60 -1
package/dist/render/createRenderer.mjs.map +1 -1
package/dist/render/index.mjs +3 -2
package/dist/render/index.mjs.map +1 -1
package/dist/serve.d.mts.map +1 -1
package/dist/serve.mjs +31 -20
package/dist/serve.mjs.map +1 -1
package/dist/server/ui/pages/Preview.vue +11 -5
package/dist/transformers/entities.d.mts.map +1 -1
package/dist/transformers/entities.mjs +3 -0
package/dist/transformers/entities.mjs.map +1 -1
package/dist/transformers/filters/defaults.d.mts +6 -0
package/dist/transformers/filters/defaults.d.mts.map +1 -0
package/dist/transformers/filters/defaults.mjs +78 -0
package/dist/transformers/filters/defaults.mjs.map +1 -0
package/dist/transformers/filters/index.d.mts +22 -0
package/dist/transformers/filters/index.d.mts.map +1 -0
package/dist/transformers/filters/index.mjs +67 -0
package/dist/transformers/filters/index.mjs.map +1 -0
package/dist/transformers/index.d.mts +9 -8
package/dist/transformers/index.d.mts.map +1 -1
package/dist/transformers/index.mjs +15 -10
package/dist/transformers/index.mjs.map +1 -1
package/dist/transformers/tailwindcss.d.mts +6 -2
package/dist/transformers/tailwindcss.d.mts.map +1 -1
package/dist/transformers/tailwindcss.mjs +49 -21
package/dist/transformers/tailwindcss.mjs.map +1 -1
package/dist/types/config.d.mts +15 -1
package/dist/types/config.d.mts.map +1 -1
package/dist/types/index.d.mts +2 -2
package/dist/utils/ast/serializer.d.mts +3 -2
package/dist/utils/ast/serializer.d.mts.map +1 -1
package/dist/utils/ast/serializer.mjs +24 -0
package/dist/utils/ast/serializer.mjs.map +1 -1
package/package.json +1 -1

package/dist/build.mjs CHANGED Viewed

@@ -59,13 +59,14 @@ async function build(options = {}) {
 				html: rendered.html
 			});
 			const templateConfig = rendered.templateConfig;
-			if (templateConfig.useTransformers !== false) html = await runTransformers(html, templateConfig, absolutePath);
+			const doctype = rendered.doctype ?? templateConfig.doctype ?? "<!DOCTYPE html>";
+			if (templateConfig.useTransformers !== false) html = await runTransformers(html, templateConfig, absolutePath, doctype);
 			html = await events.fireAfterTransform({
 				config,
 				template,
 				html
 			});
-			html = `${rendered.doctype ?? templateConfig.doctype ?? "<!DOCTYPE html>"}\n${html}`;
+			html = `${doctype}\n${html}`;
 			const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase);
 			mkdirSync(dirname(outputFilePath), { recursive: true });
 			writeFileSync(outputFilePath, html);

package/dist/build.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"build.mjs","names":[],"sources":["../src/build.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, basename, relative, join } from 'node:path'\nimport { glob } from 'tinyglobby'\nimport ora from 'ora'\nimport { resolveConfig } from './config/index.ts'\nimport { EventManager } from './events/index.ts'\nimport { runTransformers } from './transformers/index.ts'\nimport { createRenderer } from './render/createRenderer.ts'\nimport { createPlaintext } from './plaintext.ts'\nimport type { MaizzleConfig } from './types/index.ts'\n\nexport interface BuildOptions {\n config?: Partial<MaizzleConfig> \| string\n}\n\nexport interface BuildResult {\n files: string[]\n config: MaizzleConfig\n}\n\n/*\n Build all SFC email templates to HTML files.\n \n Creates a single Renderer instance, then loops through each template\n * calling render → transformers → write to disk.\n /\nexport async function build(options: BuildOptions = {}): Promise<BuildResult> {\n const start = Date.now()\n const spinner = ora('Building templates...').start()\n\n const config = await resolveConfig(options.config)\n\n const events = new EventManager()\n events.registerConfig(config)\n await events.fireBeforeCreate({ config })\n\n const outputPath = resolve(config.output?.path ?? 'dist')\n const outputExtension = config.output?.extension ?? 'html'\n\n const contentPatterns = config.content ?? ['emails//.vue']\n const contentBase = computeContentBase(contentPatterns)\n const templateFiles = await glob(contentPatterns)\n\n if (templateFiles.length === 0) {\n spinner.succeed('No templates found')\n return { files: [], config }\n }\n\n // Clear the output directory before writing fresh output\n if (existsSync(outputPath)) {\n rmSync(outputPath, { recursive: true, force: true })\n }\n\n const renderer = await createRenderer({ markdown: config.markdown, root: config.root, componentDirs: [config.components?.source ?? []].flat() })\n const outputFiles: string[] = []\n\n try {\n for (const templatePath of templateFiles) {\n const absolutePath = resolve(templatePath)\n let template = readFileSync(absolutePath, 'utf-8')\n\n template = await events.fireBeforeRender({ config, template })\n\n const rendered = await renderer.render(absolutePath, config)\n\n let html = await events.fireAfterRender({ config, template, html: rendered.html })\n\n // Use the per-template merged config (from defineConfig() in the SFC) so that\n // template-level overrides like css.safe: false are respected by transformers.\n const templateConfig = rendered.templateConfig\n\n if (templateConfig.useTransformers !== false) {\n html = await runTransformers(html, templateConfig, absolutePath)\n }\n\n html = await events.fireAfterTransform({ config, template, html })\n\n ~~const doctype = rendered.doctype ?? templateConfig.doctype ?? '<!DOCTYPE~~ html~~>'\n html~~ = `${doctype}\\n${html}`\n\n const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase)\n mkdirSync(dirname(outputFilePath), { recursive: true })\n writeFileSync(outputFilePath, html)\n outputFiles.push(outputFilePath)\n\n // Generate plaintext version if configured\n const globalPlaintext = templateConfig.plaintext\n const sfcPlaintext = rendered.plaintext\n\n if (globalPlaintext \|\| sfcPlaintext) {\n const stripOptions = typeof globalPlaintext === 'object' ? globalPlaintext : {}\n const plaintext = createPlaintext(html, stripOptions)\n const ptExtension = sfcPlaintext?.extension ?? 'txt'\n\n let ptOutputPath: string\n\n if (sfcPlaintext?.destination) {\n const name = basename(templatePath).replace(/\\.(vue\|md)$/, '')\n ptOutputPath = join(resolve(sfcPlaintext.destination), `${name}.${ptExtension}`)\n } else if (typeof globalPlaintext === 'string') {\n ptOutputPath = resolveOutputPath(templatePath, resolve(globalPlaintext), ptExtension, contentBase)\n } else {\n ptOutputPath = resolveOutputPath(templatePath, outputPath, ptExtension, contentBase)\n }\n\n mkdirSync(dirname(ptOutputPath), { recursive: true })\n writeFileSync(ptOutputPath, plaintext)\n }\n\n // Register SFC event handlers that were collected during render\n for (const { name, handler } of rendered.sfcEventHandlers) {\n events.on(name, handler)\n }\n\n events.clearSfcHandlers()\n }\n\n await copyStatic(config, outputPath)\n await events.fireAfterBuild({ files: outputFiles, config })\n } finally {\n await renderer.close()\n }\n\n const duration = ((Date.now() - start) / 1000).toFixed(2)\n const count = outputFiles.length\n spinner.stopAndPersist({\n symbol: '✅',\n text: `Built ${count} template${count !== 1 ? 's' : ''} in ${duration}s`,\n })\n\n return { files: outputFiles, config }\n}\n\n/*\n Extract the static (non-glob) prefix from content patterns.\n \n For example, `['/abs/path/emails/*\\/.vue']` → `'/abs/path/emails'`\n \n This is used to strip the content base from template paths\n * so the output preserves only the subdirectory structure.\n /\nfunction computeContentBase(patterns: string[]): string {\n // Use the first non-negated pattern\n const pattern = patterns.find(p => !p.startsWith('!')) ?? patterns[0]\n\n // Split on first glob character ( { ? [) and take the directory part\n const staticPart = pattern.split(/[{?[]/)[0]\n\n // Ensure we have a clean directory path (not a partial segment)\n return resolve(staticPart.endsWith('/') ? staticPart : dirname(staticPart))\n}\n\nfunction resolveOutputPath(templatePath: string, outputDir: string, extension: string, contentBase: string): string {\n const name = basename(templatePath).replace(/\\.(vue\|md)$/, '')\n const absTemplate = resolve(templatePath)\n const rel = relative(contentBase, dirname(absTemplate))\n\n return join(outputDir, rel, `${name}.${extension}`)\n}\n\nasync function copyStatic(config: MaizzleConfig, outputPath: string): Promise<void> {\n const sources = config.static?.source ?? ['public//.']\n const destination = config.static?.destination ?? 'public'\n\n const files = await glob(sources)\n\n for (const file of files) {\n const destPath = join(outputPath, destination, relative(dirname(sources[0]).replace(/\\.*$/, ''), file))\n const destDir = dirname(destPath)\n\n if (!existsSync(destDir)) {\n mkdirSync(destDir, { recursive: true })\n }\n\n cpSync(file, destPath)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,eAAsB,MAAM,UAAwB,EAAE,EAAwB;CAC5E,MAAM,QAAQ,KAAK,KAAK;CACxB,MAAM,UAAU,IAAI,wBAAwB,CAAC,OAAO;CAEpD,MAAM,SAAS,MAAM,cAAc,QAAQ,OAAO;CAElD,MAAM,SAAS,IAAI,cAAc;AACjC,QAAO,eAAe,OAAO;AAC7B,OAAM,OAAO,iBAAiB,EAAE,QAAQ,CAAC;CAEzC,MAAM,aAAa,QAAQ,OAAO,QAAQ,QAAQ,OAAO;CACzD,MAAM,kBAAkB,OAAO,QAAQ,aAAa;CAEpD,MAAM,kBAAkB,OAAO,WAAW,CAAC,kBAAkB;CAC7D,MAAM,cAAc,mBAAmB,gBAAgB;CACvD,MAAM,gBAAgB,MAAM,KAAK,gBAAgB;AAEjD,KAAI,cAAc,WAAW,GAAG;AAC9B,UAAQ,QAAQ,qBAAqB;AACrC,SAAO;GAAE,OAAO,EAAE;GAAE;GAAQ;;AAI9B,KAAI,WAAW,WAAW,CACxB,QAAO,YAAY;EAAE,WAAW;EAAM,OAAO;EAAM,CAAC;CAGtD,MAAM,WAAW,MAAM,eAAe;EAAE,UAAU,OAAO;EAAU,MAAM,OAAO;EAAM,eAAe,CAAC,OAAO,YAAY,UAAU,EAAE,CAAC,CAAC,MAAM;EAAE,CAAC;CAChJ,MAAM,cAAwB,EAAE;AAEhC,KAAI;AACF,OAAK,MAAM,gBAAgB,eAAe;GACxC,MAAM,eAAe,QAAQ,aAAa;GAC1C,IAAI,WAAW,aAAa,cAAc,QAAQ;AAElD,cAAW,MAAM,OAAO,iBAAiB;IAAE;IAAQ;IAAU,CAAC;GAE9D,MAAM,WAAW,MAAM,SAAS,OAAO,cAAc,OAAO;GAE5D,IAAI,OAAO,MAAM,OAAO,gBAAgB;IAAE;IAAQ;IAAU,MAAM,SAAS;IAAM,CAAC;GAIlF,MAAM,iBAAiB,SAAS;~~AAEhC~~,OAAI,eAAe,oBAAoB,MACrC,QAAO,MAAM,gBAAgB,MAAM,gBAAgB,~~aAAa~~;~~AAGlE~~,UAAO,MAAM,OAAO,mBAAmB;IAAE;IAAQ;IAAU;IAAM,CAAC;~~AAGlE~~,UAAO,~~GADS~~,~~SAAS~~,~~WAAW,eAAe,WAAW,kBAC5C,~~IAAI;GAEtB,MAAM,iBAAiB,kBAAkB,cAAc,YAAY,iBAAiB,YAAY;AAChG,aAAU,QAAQ,eAAe,EAAE,EAAE,WAAW,MAAM,CAAC;AACvD,iBAAc,gBAAgB,KAAK;AACnC,eAAY,KAAK,eAAe;GAGhC,MAAM,kBAAkB,eAAe;GACvC,MAAM,eAAe,SAAS;AAE9B,OAAI,mBAAmB,cAAc;IAEnC,MAAM,YAAY,gBAAgB,MADb,OAAO,oBAAoB,WAAW,kBAAkB,EAAE,CAC1B;IACrD,MAAM,cAAc,cAAc,aAAa;IAE/C,IAAI;AAEJ,QAAI,cAAc,aAAa;KAC7B,MAAM,OAAO,SAAS,aAAa,CAAC,QAAQ,eAAe,GAAG;AAC9D,oBAAe,KAAK,QAAQ,aAAa,YAAY,EAAE,GAAG,KAAK,GAAG,cAAc;eACvE,OAAO,oBAAoB,SACpC,gBAAe,kBAAkB,cAAc,QAAQ,gBAAgB,EAAE,aAAa,YAAY;QAElG,gBAAe,kBAAkB,cAAc,YAAY,aAAa,YAAY;AAGtF,cAAU,QAAQ,aAAa,EAAE,EAAE,WAAW,MAAM,CAAC;AACrD,kBAAc,cAAc,UAAU;;AAIxC,QAAK,MAAM,EAAE,MAAM,aAAa,SAAS,iBACvC,QAAO,GAAG,MAAM,QAAQ;AAG1B,UAAO,kBAAkB;;AAG3B,QAAM,WAAW,QAAQ,WAAW;AACpC,QAAM,OAAO,eAAe;GAAE,OAAO;GAAa;GAAQ,CAAC;WACnD;AACR,QAAM,SAAS,OAAO;;CAGxB,MAAM,aAAa,KAAK,KAAK,GAAG,SAAS,KAAM,QAAQ,EAAE;CACzD,MAAM,QAAQ,YAAY;AAC1B,SAAQ,eAAe;EACrB,QAAQ;EACR,MAAM,SAAS,MAAM,WAAW,UAAU,IAAI,MAAM,GAAG,MAAM,SAAS;EACvE,CAAC;AAEF,QAAO;EAAE,OAAO;EAAa;EAAQ;;;;;;;;;;AAWvC,SAAS,mBAAmB,UAA4B;CAKtD,MAAM,cAHU,SAAS,MAAK,MAAK,CAAC,EAAE,WAAW,IAAI,CAAC,IAAI,SAAS,IAGxC,MAAM,SAAS,CAAC;AAG3C,QAAO,QAAQ,WAAW,SAAS,IAAI,GAAG,aAAa,QAAQ,WAAW,CAAC;;AAG7E,SAAS,kBAAkB,cAAsB,WAAmB,WAAmB,aAA6B;CAClH,MAAM,OAAO,SAAS,aAAa,CAAC,QAAQ,eAAe,GAAG;AAI9D,QAAO,KAAK,WAFA,SAAS,aAAa,QADd,QAAQ,aAAa,CACa,CAAC,EAE3B,GAAG,KAAK,GAAG,YAAY;;AAGrD,eAAe,WAAW,QAAuB,YAAmC;CAClF,MAAM,UAAU,OAAO,QAAQ,UAAU,CAAC,gBAAgB;CAC1D,MAAM,cAAc,OAAO,QAAQ,eAAe;CAElD,MAAM,QAAQ,MAAM,KAAK,QAAQ;AAEjC,MAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,WAAW,KAAK,YAAY,aAAa,SAAS,QAAQ,QAAQ,GAAG,CAAC,QAAQ,SAAS,GAAG,EAAE,KAAK,CAAC;EACxG,MAAM,UAAU,QAAQ,SAAS;AAEjC,MAAI,CAAC,WAAW,QAAQ,CACtB,WAAU,SAAS,EAAE,WAAW,MAAM,CAAC;AAGzC,SAAO,MAAM,SAAS"}
1	+ {"version":3,"file":"build.mjs","names":[],"sources":["../src/build.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, basename, relative, join } from 'node:path'\nimport { glob } from 'tinyglobby'\nimport ora from 'ora'\nimport { resolveConfig } from './config/index.ts'\nimport { EventManager } from './events/index.ts'\nimport { runTransformers } from './transformers/index.ts'\nimport { createRenderer } from './render/createRenderer.ts'\nimport { createPlaintext } from './plaintext.ts'\nimport type { MaizzleConfig } from './types/index.ts'\n\nexport interface BuildOptions {\n config?: Partial<MaizzleConfig> \| string\n}\n\nexport interface BuildResult {\n files: string[]\n config: MaizzleConfig\n}\n\n/*\n Build all SFC email templates to HTML files.\n \n Creates a single Renderer instance, then loops through each template\n * calling render → transformers → write to disk.\n /\nexport async function build(options: BuildOptions = {}): Promise<BuildResult> {\n const start = Date.now()\n const spinner = ora('Building templates...').start()\n\n const config = await resolveConfig(options.config)\n\n const events = new EventManager()\n events.registerConfig(config)\n await events.fireBeforeCreate({ config })\n\n const outputPath = resolve(config.output?.path ?? 'dist')\n const outputExtension = config.output?.extension ?? 'html'\n\n const contentPatterns = config.content ?? ['emails//.vue']\n const contentBase = computeContentBase(contentPatterns)\n const templateFiles = await glob(contentPatterns)\n\n if (templateFiles.length === 0) {\n spinner.succeed('No templates found')\n return { files: [], config }\n }\n\n // Clear the output directory before writing fresh output\n if (existsSync(outputPath)) {\n rmSync(outputPath, { recursive: true, force: true })\n }\n\n const renderer = await createRenderer({ markdown: config.markdown, root: config.root, componentDirs: [config.components?.source ?? []].flat() })\n const outputFiles: string[] = []\n\n try {\n for (const templatePath of templateFiles) {\n const absolutePath = resolve(templatePath)\n let template = readFileSync(absolutePath, 'utf-8')\n\n template = await events.fireBeforeRender({ config, template })\n\n const rendered = await renderer.render(absolutePath, config)\n\n let html = await events.fireAfterRender({ config, template, html: rendered.html })\n\n // Use the per-template merged config (from defineConfig() in the SFC) so that\n // template-level overrides like css.safe: false are respected by transformers.\n const templateConfig = rendered.templateConfig\n\n const doctype = rendered.doctype ?? templateConfig.doctype ?? '<!DOCTYPE html>'\n\n if (templateConfig.useTransformers !== false) {\n html = await runTransformers(html, templateConfig, absolutePath, doctype)\n }\n\n html = await events.fireAfterTransform({ config, template, html })\n html = `${doctype}\\n${html}`\n\n const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase)\n mkdirSync(dirname(outputFilePath), { recursive: true })\n writeFileSync(outputFilePath, html)\n outputFiles.push(outputFilePath)\n\n // Generate plaintext version if configured\n const globalPlaintext = templateConfig.plaintext\n const sfcPlaintext = rendered.plaintext\n\n if (globalPlaintext \|\| sfcPlaintext) {\n const stripOptions = typeof globalPlaintext === 'object' ? globalPlaintext : {}\n const plaintext = createPlaintext(html, stripOptions)\n const ptExtension = sfcPlaintext?.extension ?? 'txt'\n\n let ptOutputPath: string\n\n if (sfcPlaintext?.destination) {\n const name = basename(templatePath).replace(/\\.(vue\|md)$/, '')\n ptOutputPath = join(resolve(sfcPlaintext.destination), `${name}.${ptExtension}`)\n } else if (typeof globalPlaintext === 'string') {\n ptOutputPath = resolveOutputPath(templatePath, resolve(globalPlaintext), ptExtension, contentBase)\n } else {\n ptOutputPath = resolveOutputPath(templatePath, outputPath, ptExtension, contentBase)\n }\n\n mkdirSync(dirname(ptOutputPath), { recursive: true })\n writeFileSync(ptOutputPath, plaintext)\n }\n\n // Register SFC event handlers that were collected during render\n for (const { name, handler } of rendered.sfcEventHandlers) {\n events.on(name, handler)\n }\n\n events.clearSfcHandlers()\n }\n\n await copyStatic(config, outputPath)\n await events.fireAfterBuild({ files: outputFiles, config })\n } finally {\n await renderer.close()\n }\n\n const duration = ((Date.now() - start) / 1000).toFixed(2)\n const count = outputFiles.length\n spinner.stopAndPersist({\n symbol: '✅',\n text: `Built ${count} template${count !== 1 ? 's' : ''} in ${duration}s`,\n })\n\n return { files: outputFiles, config }\n}\n\n/*\n Extract the static (non-glob) prefix from content patterns.\n \n For example, `['/abs/path/emails/*\\/.vue']` → `'/abs/path/emails'`\n \n This is used to strip the content base from template paths\n * so the output preserves only the subdirectory structure.\n /\nfunction computeContentBase(patterns: string[]): string {\n // Use the first non-negated pattern\n const pattern = patterns.find(p => !p.startsWith('!')) ?? patterns[0]\n\n // Split on first glob character ( { ? [) and take the directory part\n const staticPart = pattern.split(/[{?[]/)[0]\n\n // Ensure we have a clean directory path (not a partial segment)\n return resolve(staticPart.endsWith('/') ? staticPart : dirname(staticPart))\n}\n\nfunction resolveOutputPath(templatePath: string, outputDir: string, extension: string, contentBase: string): string {\n const name = basename(templatePath).replace(/\\.(vue\|md)$/, '')\n const absTemplate = resolve(templatePath)\n const rel = relative(contentBase, dirname(absTemplate))\n\n return join(outputDir, rel, `${name}.${extension}`)\n}\n\nasync function copyStatic(config: MaizzleConfig, outputPath: string): Promise<void> {\n const sources = config.static?.source ?? ['public//.']\n const destination = config.static?.destination ?? 'public'\n\n const files = await glob(sources)\n\n for (const file of files) {\n const destPath = join(outputPath, destination, relative(dirname(sources[0]).replace(/\\.*$/, ''), file))\n const destDir = dirname(destPath)\n\n if (!existsSync(destDir)) {\n mkdirSync(destDir, { recursive: true })\n }\n\n cpSync(file, destPath)\n }\n}\n"],"mappings":"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"}

package/dist/components/Body.vue ADDED Viewed

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+import type { PropType } from 'vue'
+export default {
+  name: 'Body',
+  inheritAttrs: false,
+  props: {
+    xmlLang: {
+      type: String,
+      default: 'en'
+    },
+    dir: {
+      type: String as PropType<'ltr' | 'rtl'>,
+      default: 'ltr'
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const extraAttrs = Object.entries(attrs)
+        .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+        .join(' ')
+      const parts = [
+        `xml:lang="${props.xmlLang}"`,
+        `dir="${props.dir}"`,
+        'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
+      ]
+      if (extraAttrs) {
+        parts.push(extraAttrs)
+      }
+      return [
+        createStaticVNode(`<body ${parts.join(' ')}>`, 1),
+        slots.default?.(),
+        createStaticVNode('</body>', 1),
+      ]
+    }
+  }
+}
+</script>

package/dist/components/Button.vue CHANGED Viewed

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
+import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import Outlook from './Outlook.vue'
@@ -10,42 +11,92 @@ const attrs = useAttrs()
 const props = defineProps({
   /** The URL the button links to. */
   href: String,
-  type: {
-    type: String,
-    default: 'solid'
+  /**
+   * The button style variant.
+   * - `solid` — filled background (default)
+   * - `outline` — transparent background with a border
+   * - `ghost` — transparent background, no border
+   * - `link` — plain anchor with no button chrome
+   * @default 'solid'
+   */
+  variant: {
+    type: String as PropType<'solid' | 'outline' | 'ghost' | 'link'>,
+    default: 'solid' as const
   },
+  /**
+   * Horizontal alignment of the button wrapper.
+   * Accepts `'left'`, `'center'`, or `'right'`.
+   * @default null
+   */
   align: {
-    type: String,
+    type: String as PropType<'left' | 'center' | 'right' | null>,
     default: null
   },
+  /**
+   * Background color for `solid` and `outline` variants.
+   * Also used as the text color for `outline` and `ghost` variants when `color` is not set.
+   * @default '#4338ca'
+   */
   bgColor: {
     type: String,
     default: '#4338ca'
   },
+  /**
+   * Explicit text color. When omitted, `solid` buttons use `#fffffe`
+   * and all other variants fall back to `bgColor`.
+   * @default null
+   */
   color: {
     type: String,
     default: null
   },
+  /**
+   * `mso-text-raise` value applied to the inner `<span>` elements.
+   * Controls vertical text alignment inside the button in old Outlook.
+   * @default '16px'
+   */
   msoPt: {
     type: String,
     default: '16px'
   },
+  /**
+   * `mso-text-raise` value applied to the spacer `<i>` element rendered for Outlook.
+   * Adjusts the bottom spacing that old Outlook uses to simulate padding.
+   * @default '31px'
+   */
   msoPb: {
     type: String,
     default: '31px'
   },
+  /**
+   * URL or path to an icon image displayed alongside the button label.
+   * @default null
+   */
   icon: {
     type: String,
     default: null
   },
+  /**
+   * Width of the icon image in pixels.
+   * @default 12
+   */
   iconWidth: {
     type: [String, Number],
     default: 12
   },
+  /**
+   * Side on which the icon is placed relative to the button label.
+   * Accepts `'left'` or `'right'`.
+   * @default 'right'
+   */
   iconPosition: {
-    type: String,
-    default: 'right'
+    type: String as PropType<'left' | 'right'>,
+    default: 'right' as const
   },
+  /**
+   * Additional CSS classes applied to the icon `<img>` element.
+   * @default ''
+   */
   iconClass: {
     type: String,
     default: ''
@@ -54,20 +105,20 @@ const props = defineProps({
 const parsedIconWidth = computed(() => parseInt(String(props.iconWidth), 10))
-const alignClass = computed(() => ({
+const alignClass = computed(() => props.align ? ({
   left: 'text-left',
   center: 'text-center',
   right: 'text-right',
-})[props.align] || '')
+})[props.align] || '' : '')
 const textColor = computed(() => {
   if (props.color) return props.color
-  return props.type === 'solid' ? '#fffffe' : props.bgColor
+  return props.variant === 'solid' ? '#fffffe' : props.bgColor
 })
 const styles = computed(() => {
-  if (props.type === 'link') {
+  if (props.variant === 'link') {
     return [
       'text-decoration: none;',
       `color: ${textColor.value};`,
@@ -84,12 +135,12 @@ const styles = computed(() => {
     `color: ${textColor.value};`,
   ]
-  if (props.type === 'outline') {
+  if (props.variant === 'outline') {
     base.push(
       'background-color: transparent;',
       `border: 1px solid ${props.bgColor};`,
     )
-  } else if (props.type === 'ghost') {
+  } else if (props.variant === 'ghost') {
     base.push('background-color: transparent;')
   } else {
     base.push(`background-color: ${props.bgColor};`)
@@ -98,10 +149,10 @@ const styles = computed(() => {
   return base.join('')
 })
-const isLink = computed(() => props.type === 'link')
+const isLink = computed(() => props.variant === 'link')
 const defaultClasses = computed(() => {
-  if (props.type === 'ghost') return 'hover:bg-indigo-50'
+  if (props.variant === 'ghost') return 'hover:bg-indigo-50'
   return ''
 })

package/dist/components/CodeBlock.vue ADDED Viewed

@@ -0,0 +1,75 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+import { codeToHtml, getSingletonHighlighter } from 'shiki'
+export default {
+  props: {
+    /** The code to highlight. */
+    code: {
+      type: String,
+      default: ''
+    },
+    /** Base64-encoded code, set by the Vite transform for slot content. */
+    encodedCode: {
+      type: String,
+      default: ''
+    },
+    /** The language for syntax highlighting. @default 'html' */
+    lang: {
+      type: String,
+      default: 'html'
+    },
+    /** The shiki theme to use. @default 'github-light' */
+    theme: {
+      type: String,
+      default: 'github-light'
+    },
+    /** CSS class for the wrapping table cell. @default 'max-w-0 mso-padding-alt-6' */
+    tdClass: {
+      type: String,
+      default: 'max-w-0 mso-padding-alt-6'
+    }
+  },
+  inheritAttrs: false,
+  async setup(props, { slots, attrs }) {
+    // Prefer encodedCode (from Vite transform) → code prop → slot text
+    let source = props.encodedCode
+      ? Buffer.from(props.encodedCode, 'base64').toString('utf-8')
+      : props.code
+    if (!source) {
+      const slotContent = slots.default?.()
+      source = slotContent
+        ?.map((vnode: any) => (typeof vnode.children === 'string' ? vnode.children : ''))
+        .join('') ?? ''
+    }
+    source = source.trim()
+    if (!source) {
+      return () => createStaticVNode('', 0)
+    }
+    const highlighted = await codeToHtml(source, {
+      lang: props.lang,
+      theme: props.theme,
+    })
+    const hl = await getSingletonHighlighter({ themes: [props.theme], langs: [] })
+    const bg = hl.getTheme(props.theme).bg
+    // Shiki outputs <pre><code>...</code></pre>, extract the inner content
+    const codeContent = highlighted
+      .replace(/^<pre[^>]*><code>/, '')
+      .replace(/<\/code><\/pre>$/, '')
+    const classes = ['font-mono', attrs.class].filter(Boolean).join(' ')
+    const baseStyles = `background-color:${bg};padding:24px;overflow:auto;white-space:pre;word-wrap:normal;word-break:normal;word-spacing:normal`
+    const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
+    const html = `<table class="w-full"><tr><td class="${props.tdClass}"><pre class="${classes}" style="${styles}"><code>${codeContent}</code></pre></td></tr></table>`
+    return () => createStaticVNode(html, 1)
+  }
+}
+</script>

package/dist/components/CodeInline.vue ADDED Viewed

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+export default {
+  inheritAttrs: false,
+  props: {
+    /** The inline code text. */
+    code: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, { slots, attrs }) {
+    let source = props.code
+    if (!source) {
+      const slotContent = slots.default?.()
+      source = slotContent
+        ?.map((vnode: any) => (typeof vnode.children === 'string' ? vnode.children : ''))
+        .join('') ?? ''
+    }
+    source = source.trim()
+    if (!source) {
+      return () => createStaticVNode('', 0)
+    }
+    const classes = attrs.class ? ` class="${attrs.class}"` : ''
+    const baseStyles = 'white-space:normal;border-radius:6px;border:1px solid #d1d5db;background-color:#f3f4f6;padding:2px 6px;font-size:11px;color:inherit'
+    const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
+    const escaped = source
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+    const html = `<code${classes} style="${styles}">${escaped}</code>`
+    return () => createStaticVNode(html, 1)
+  }
+}
+</script>

package/dist/components/Column.vue ADDED Viewed

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, createStaticVNode, inject, useAttrs } from 'vue'
+import type { ComputedRef } from 'vue'
+import { normalizeToPixels } from './utils.ts'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const props = defineProps({
+  /** Override the auto-computed min-width. */
+  width: {
+    type: [String, Number],
+    default: null
+  }
+})
+const injectedMinWidth = inject<ComputedRef<string> | null>('columnMinWidth', null)
+const containerWidth = inject<ComputedRef<string | number> | null>('containerWidth', null)
+const injectedMsoWidth = inject<ComputedRef<string> | null>('columnMsoWidth', null)
+const minWidth = computed(() => {
+  if (props.width) return normalizeToPixels(props.width)
+  if (injectedMinWidth?.value) return injectedMinWidth.value
+  // Fallback: divide container width by 2 if available
+  if (containerWidth?.value) {
+    const val = containerWidth.value
+    if (typeof val === 'number') return `${val / 2}px`
+    const num = Number.parseFloat(val)
+    const unit = val.replace(String(num), '') || 'px'
+    return `${num / 2}${unit}`
+  }
+  return '18.75em'
+})
+const msoWidth = computed(() => injectedMsoWidth?.value ?? '50%')
+const styles = computed(() => {
+  return `display: inline-block; min-width: ${minWidth.value}; font-size: 16px; vertical-align: top;`
+})
+const MsoBefore = () => createStaticVNode(
+  `<!--[if mso]><td width="${msoWidth.value}" style="vertical-align:top"><![endif]-->`,
+  1
+)
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td><![endif]-->',
+  1
+)
+</script>
+<template>
+  <MsoBefore />
+  <div v-bind="attrs" :style="styles">
+    <slot />
+  </div>
+  <MsoAfter />
+</template>

package/dist/components/Container.vue ADDED Viewed

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, provide, createStaticVNode, useAttrs } from 'vue'
+import { normalizeToPixels } from './utils.ts'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const props = defineProps({
+  /** Max width of the container. */
+  width: {
+    type: [String, Number],
+    default: '37.5em'
+  }
+})
+provide('containerWidth', computed(() => props.width))
+const styles = computed(() => {
+  return `max-width: ${normalizeToPixels(props.width)}; margin: 0 auto;`
+})
+const MsoBefore = () => createStaticVNode(
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width:${normalizeToPixels(props.width)}" align="center"><tr><td><![endif]-->`,
+  1
+)
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td></tr></table><![endif]-->',
+  1
+)
+</script>
+<template>
+  <MsoBefore />
+  <div v-bind="attrs" :style="styles">
+    <slot />
+  </div>
+  <MsoAfter />
+</template>

package/dist/components/Head.vue ADDED Viewed

@@ -0,0 +1,8 @@
+<template>
+  <head>
+    <meta charset="utf-8">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <slot />
+  </head>
+</template>

package/dist/components/Html.vue ADDED Viewed

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+import type { PropType } from 'vue'
+export default {
+  name: 'Html',
+  inheritAttrs: false,
+  props: {
+    lang: {
+      type: String,
+      default: 'en'
+    },
+    dir: {
+      type: String as PropType<'ltr' | 'rtl'>,
+      default: 'ltr'
+    },
+    xmlns: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const extraAttrs = Object.entries(attrs)
+        .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+        .join(' ')
+      const parts = [
+        `lang="${props.lang}"`,
+        `dir="${props.dir}"`,
+      ]
+      if (props.xmlns) {
+        parts.push(
+          `xmlns="${props.xmlns}"`,
+          'xmlns:v="urn:schemas-microsoft-com:vml"',
+          'xmlns:o="urn:schemas-microsoft-com:office:office"',
+        )
+      }
+      if (extraAttrs) {
+        parts.push(extraAttrs)
+      }
+      return [
+        createStaticVNode(`<html ${parts.join(' ')}>`, 1),
+        slots.default?.(),
+        createStaticVNode('</html>', 1),
+      ]
+    }
+  }
+}
+</script>

package/dist/components/Image.vue ADDED Viewed

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const props = defineProps({
+  /** The image source URL. When reducedMotionSrc is used, this becomes the static fallback. */
+  src: {
+    type: String,
+    required: true
+  },
+  /** Alt text for the image. */
+  alt: {
+    type: String,
+    default: ''
+  },
+  /** Image source for dark mode. */
+  darkSrc: {
+    type: String,
+    default: null
+  },
+  /** The width of the image, rendered without units. */
+  width: {
+    type: [String, Number],
+    required: true
+  },
+  /** Animated image source, shown when user has no reduced motion preference. */
+  reducedMotionSrc: {
+    type: String,
+    default: null
+  }
+})
+function mimeFromExtension(src: string): string {
+  const ext = src.split('.').pop()?.toLowerCase() ?? ''
+  const types: Record<string, string> = {
+    apng: 'image/apng',
+    avif: 'image/avif',
+    gif: 'image/gif',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    jfif: 'image/jpeg',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp',
+  }
+  return types[ext] ?? ''
+}
+const reducedMotionType = computed(() => mimeFromExtension(props.reducedMotionSrc ?? ''))
+const imgWidth = computed(() => Number.parseInt(String(props.width), 10))
+const usePicture = computed(() => props.darkSrc || props.reducedMotionSrc)
+const imgStyle = 'max-width: 100%; vertical-align: middle;'
+</script>
+<template>
+  <picture v-if="usePicture">
+    <source v-if="darkSrc" :srcset="darkSrc" media="(prefers-color-scheme: dark)">
+    <source v-if="reducedMotionSrc" :srcset="reducedMotionSrc" :type="reducedMotionType || undefined" media="(prefers-reduced-motion: no-preference)">
+    <img v-bind="attrs" :src="src" :alt="alt" :width="imgWidth" :style="imgStyle">
+  </picture>
+  <img v-else v-bind="attrs" :src="src" :alt="alt" :width="imgWidth" :style="imgStyle">
+</template>