@maizzle/framework 6.0.0-rc.9 → 6.0.1

package/dist/components/Vml.vue

@@ -7,7 +7,56 @@ export default {
   name: 'Vml',
   props: {
     /**
-     * Width of the VML rectangle.
+     * VML shape to render.
+     *
+     * - `rect` (default) — rectangle
+     * - `roundrect` — rectangle with rounded corners (`arcsize`)
+     * - `oval` — ellipse fitted to width/height
+     * - `line` — straight line between `from` and `to`
+     *
+     * @default 'rect'
+     */
+    shape: {
+      type: String as PropType<'rect' | 'roundrect' | 'oval' | 'line'>,
+      default: 'rect',
+      validator: (v: string) => ['rect', 'roundrect', 'oval', 'line'].includes(v),
+    },
+    /**
+     * Corner radius for `roundrect`, as a fraction of the shorter side.
+     *
+     * Range 0–1. Ignored for other shapes.
+     *
+     * @example '0.1'
+     */
+    arcsize: {
+      type: [String, Number],
+    },
+    /**
+     * Start coordinate for `shape="line"` as `"x,y"`.
+     *
+     * Required when `shape="line"`. Ignored otherwise.
+     *
+     * @example '0,0'
+     * @example '10pt,10pt'
+     */
+    from: {
+      type: String,
+      validator: (v: string) => /^[\d.]+(px|pt|%|em|rem)?,[\d.]+(px|pt|%|em|rem)?$/.test(v.replace(/\s/g, '')),
+    },
+    /**
+     * End coordinate for `shape="line"` as `"x,y"`.
+     *
+     * Required when `shape="line"`. Ignored otherwise.
+     *
+     * @example '600,0'
+     * @example '100%,0'
+     */
+    to: {
+      type: String,
+      validator: (v: string) => /^[\d.]+(px|pt|%|em|rem)?,[\d.]+(px|pt|%|em|rem)?$/.test(v.replace(/\s/g, '')),
+    },
+    /**
+     * Width of the shape. Ignored for `line`.
      *
      * Accepts a number (treated as pixels) or a string with units.
      *
@@ -15,86 +64,127 @@ export default {
      */
     width: {
       type: [String, Number],
-      default: '600px'
+      default: '600px',
     },
     /**
-     * Height of the VML rectangle.
+     * Height of the shape. Ignored for `line`.
      *
-     * Accepts a number (treated as pixels) or a string with units.
-     * When not set, the rectangle auto-sizes to fit its content.
+     * When not set, the shape auto-sizes to fit its content.
      */
     height: {
       type: [String, Number],
-      default: null
+      default: null,
     },
     /**
-     * VML fill type that controls how the background image is rendered.
+     * VML fill type.
      *
-     * - `frame` — scale to fill the rectangle (default)
-     * - `tile` — repeat the image to fill the rectangle
+     * - `solid` — solid color fill (default in VML when omitted)
+     * - `gradient` — linear gradient
+     * - `gradientradial` — radial gradient
+     * - `tile` — repeat image to fill
      * - `pattern` — tile at original size
-     * - `solid` — solid color fill, no image
-     * - `gradient` — linear gradient fill
-     * - `gradientradial` — radial gradient fill
+     * - `frame` — scale image to fill
      *
-     * @default 'frame'
+     * Only emitted on `<v:fill>` when set.
      */
     type: {
       type: String as PropType<'solid' | 'gradient' | 'gradientradial' | 'tile' | 'pattern' | 'frame'>,
-      default: 'frame'
     },
     /**
-     * Comma-separated dimensions for the fill image.
+     * URL of a fill image.
+     *
+     * When set, a `<v:fill>` child is emitted with this `src`.
+     */
+    src: {
+      type: String,
+    },
+    /**
+     * Primary fill color on `<v:fill>` (start color for gradients).
+     *
+     * @example '#3b82f6'
+     */
+    color: {
+      type: String,
+    },
+    /**
+     * Secondary fill color for gradient fills.
      *
-     * Controls the rendered size of the background image.
+     * @example '#1d4ed8'
+     */
+    color2: {
+      type: String,
+    },
+    /**
+     * Gradient direction in degrees (0–360).
+     *
+     * @example 90
+     */
+    angle: {
+      type: [String, Number],
+    },
+    /**
+     * Gradient midpoint (0–100, percentage of distance from start).
+     *
+     * @example 50
+     */
+    focus: {
+      type: [String, Number],
+    },
+    /**
+     * Radial gradient focus size as `"x,y"` fractions.
+     *
+     * @example '0,0'
+     */
+    focussize: {
+      type: String,
+      validator: (v: string) => /^-?[\d.]+,-?[\d.]+$/.test(v.replace(/\s/g, '')),
+    },
+    /**
+     * Radial gradient focus position as `"x,y"` fractions.
+     *
+     * @example '0.5,0.5'
+     */
+    focusposition: {
+      type: String,
+      validator: (v: string) => /^-?[\d.]+,-?[\d.]+$/.test(v.replace(/\s/g, '')),
+    },
+    /**
+     * Comma-separated dimensions for the fill image.
      *
      * @example '300px,200px'
      */
     sizes: {
       type: String,
-      validator: (v: string) => /^[\d.]+(px|%|em|rem)?(,[\d.]+(px|%|em|rem)?)+$/.test(v.replace(/\s/g, ''))
+      validator: (v: string) => /^[\d.]+(px|%|em|rem)?(,[\d.]+(px|%|em|rem)?)+$/.test(v.replace(/\s/g, '')),
     },
     /**
      * Fill origin offset as comma-separated fractional values.
      *
-     * Controls where the fill image anchors relative to the shape.
-     * Values are fractions of the shape's dimensions, where `0,0` is
-     * center and `-0.5,-0.5` is the top-left corner.
-     *
      * Overridden by `backgroundPosition` if both are set.
      *
-     * @example '0,0'
      * @example '-0.5,-0.5'
      */
     origin: {
       type: String,
-      validator: (v: string) => /^-?[\d.]+(,-?[\d.]+)+$/.test(v.replace(/\s/g, ''))
+      validator: (v: string) => /^-?[\d.]+(,-?[\d.]+)+$/.test(v.replace(/\s/g, '')),
     },
     /**
      * Fill position offset as comma-separated fractional values.
      *
-     * Controls where the fill image is positioned within the shape.
-     * Values are fractions of the shape's dimensions, where `0,0` is
-     * center and `0.5,0.5` is the bottom-right corner.
-     *
      * Overridden by `backgroundPosition` if both are set.
      *
-     * @example '0,0'
      * @example '0.5,0.5'
      */
     position: {
       type: String,
-      validator: (v: string) => /^-?[\d.]+(,-?[\d.]+)+$/.test(v.replace(/\s/g, ''))
+      validator: (v: string) => /^-?[\d.]+(,-?[\d.]+)+$/.test(v.replace(/\s/g, '')),
     },
     /**
-     * Background image position as `vertical,horizontal`.
-     *
-     * First value is the vertical axis: `top`, `center`, or `bottom`.
-     * Second value is the horizontal axis: `left`, `center`, or `right`.
+     * Convenience for image positioning. Maps to VML `origin` / `position`.
      *
-     * Convenience prop that maps to VML `origin` and `position` attributes.
+     * First value is vertical (`top` | `center` | `bottom`).
+     * Second value is horizontal (`left` | `center` | `right`).
      *
-     * @example 'top,left'
      * @example 'center,center'
      */
     backgroundPosition: {
@@ -103,81 +193,63 @@ export default {
         | 'center,left' | 'center,center' | 'center,right'
         | 'bottom,left' | 'bottom,center' | 'bottom,right'
       >,
-      validator: (v: string) => /^(top|center|bottom),(left|center|right)$/.test(v.replace(/\s/g, ''))
+      validator: (v: string) => /^(top|center|bottom),(left|center|right)$/.test(v.replace(/\s/g, '')),
     },
     /**
      * Aspect ratio constraint for the fill image.
      *
-     * - `atleast` — image is at least as large as the shape
-     * - `atmost` — image is at most as large as the shape
+     * - `atleast` — image at least as large as the shape
+     * - `atmost` — image at most as large as the shape
      */
     aspect: {
       type: String as PropType<'atleast' | 'atmost'>,
     },
-    /**
-     * Fill color used for `solid` and `gradient` fill types.
-     *
-     * @example '#ffffff'
-     */
-    color: String,
     /**
      * Text box inset (padding) as `top,right,bottom,left`.
      *
-     * Controls the inner spacing of the `v:textbox` element.
-     *
      * @default '0,0,0,0'
      */
     inset: {
       type: String,
-      default: '0,0,0,0'
+      default: '0,0,0,0',
     },
     /**
-     * Whether the VML rectangle has a visible border.
+     * Whether the shape has a visible border.
      *
-     * @default false
+     * @default false (true for `shape="line"`)
      */
     stroke: {
       type: [Boolean, String],
-      default: false
+      default: null,
     },
     /**
-     * Border color for the VML rectangle.
-     *
-     * Setting this also enables `stroke` automatically.
+     * Border color. Setting this enables `stroke` automatically.
      *
      * @example '#000000'
      */
-    strokecolor: String,
+    strokecolor: {
+      type: String,
+    },
     /**
-     * Whether the VML rectangle has a fill.
+     * Whether the shape has a fill.
      *
-     * @default true
+     * @default true (false for `shape="line"`)
      */
     fill: {
       type: [Boolean, String],
-      default: true
+      default: null,
     },
     /**
-     * Background color of the VML rectangle.
+     * Fallback fill color on the shape element itself.
      *
-     * Used as a fallback when the background image cannot be loaded.
+     * Rendered when no `<v:fill>` child is emitted or the fill image
+     * cannot be loaded.
      *
-     * @default 'none'
      * @example '#3b82f6'
      */
     fillcolor: {
       type: String,
-      default: 'none'
     },
-    /**
-     * URL of the background image.
-     *
-     * @default 'https://via.placeholder.com/600x400'
-     */
-    src: {
-      type: String,
-      default: 'https://via.placeholder.com/600x400'
-    }
   },
   setup(props, { slots }) {
     const backgroundPositionMap: Record<string, string> = {
@@ -195,47 +267,88 @@ export default {
     const resolvedOrigin = computed(() => props.origin ?? (props.backgroundPosition ? backgroundPositionMap[props.backgroundPosition.replace(/\s/g, '')] : undefined))
     const resolvedPosition = computed(() => props.position ?? (props.backgroundPosition ? backgroundPositionMap[props.backgroundPosition.replace(/\s/g, '')] : undefined))
 
+    const hasFillChild = computed(() => {
+      return props.type !== undefined
+        || props.src !== undefined
+        || props.color !== undefined
+        || props.color2 !== undefined
+        || props.angle !== undefined
+        || props.focus !== undefined
+        || props.focussize !== undefined
+        || props.focusposition !== undefined
+        || props.sizes !== undefined
+        || props.aspect !== undefined
+        || resolvedOrigin.value !== undefined
+        || resolvedPosition.value !== undefined
+    })
+
     const before = computed(() => {
-      const width = normalizeToPixels(props.width)
+      const isLine = props.shape === 'line'
+      const element = `v:${props.shape}`
 
       const toBool = (v: boolean | string) => v === true || v === 'true' ? 'true' : 'false'
 
-      const rectAttrs = [
-        `fill="${props.fillcolor ? 'true' : toBool(props.fill)}"`,
-        `stroke="${props.strokecolor ? 'true' : toBool(props.stroke)}"`,
-        `style="width: ${width};${props.height ? ` height: ${normalizeToPixels(props.height)};` : ''}"`,
+      const defaultFill = isLine ? false : true
+      const defaultStroke = isLine ? true : false
+      const fillResolved = props.fill === null ? defaultFill : props.fill
+      const strokeResolved = props.stroke === null ? defaultStroke : props.stroke
+
+      const styleParts: string[] = []
+      if (!isLine) {
+        styleParts.push(`width: ${normalizeToPixels(props.width)}`)
+        if (props.height) styleParts.push(`height: ${normalizeToPixels(props.height)}`)
+      }
+
+      const shapeAttrs = [
+        `fill="${props.fillcolor ? 'true' : toBool(fillResolved)}"`,
+        `stroke="${props.strokecolor ? 'true' : toBool(strokeResolved)}"`,
+        styleParts.length ? `style="${styleParts.join('; ')};"` : '',
         props.strokecolor ? `strokecolor="${props.strokecolor}"` : '',
-        props.fillcolor ? `fillcolor="${props.fillcolor}"` : ''
+        props.fillcolor ? `fillcolor="${props.fillcolor}"` : '',
+        props.shape === 'roundrect' && props.arcsize !== undefined ? `arcsize="${props.arcsize}"` : '',
+        isLine && props.from ? `from="${props.from}"` : '',
+        isLine && props.to ? `to="${props.to}"` : '',
       ].filter(Boolean).join(' ')
 
-      const fillAttrs = [
-        `type="${props.type}"`,
-        `src="${props.src}"`,
-        props.sizes ? `sizes="${props.sizes}"` : '',
-        props.aspect ? `aspect="${props.aspect}"` : '',
-        resolvedOrigin.value ? `origin="${resolvedOrigin.value}"` : '',
-        resolvedPosition.value ? `position="${resolvedPosition.value}"` : '',
-        props.color ? `color="${props.color}"` : ''
-      ].filter(Boolean).join(' ')
+      const fillAttrs = hasFillChild.value
+        ? [
+            props.type ? `type="${props.type}"` : '',
+            props.src ? `src="${props.src}"` : '',
+            props.color ? `color="${props.color}"` : '',
+            props.color2 ? `color2="${props.color2}"` : '',
+            props.angle !== undefined ? `angle="${props.angle}"` : '',
+            props.focus !== undefined ? `focus="${props.focus}"` : '',
+            props.focussize ? `focussize="${props.focussize}"` : '',
+            props.focusposition ? `focusposition="${props.focusposition}"` : '',
+            props.sizes ? `sizes="${props.sizes}"` : '',
+            props.aspect ? `aspect="${props.aspect}"` : '',
+            resolvedOrigin.value ? `origin="${resolvedOrigin.value}"` : '',
+            resolvedPosition.value ? `position="${resolvedPosition.value}"` : '',
+          ].filter(Boolean).join(' ')
+        : ''
 
-      return [
+      const lines = [
         `<!--[if mso]>`,
-        `<v:rect xmlns:v="urn:schemas-microsoft-com:vml" ${rectAttrs}>`,
-        `<v:fill ${fillAttrs} />`,
-        `<v:textbox inset="${props.inset}" style="mso-fit-shape-to-text: true">`,
-        `<div><![endif]-->`
-      ].join('')
+        `<${element} xmlns:v="urn:schemas-microsoft-com:vml" ${shapeAttrs}>`,
+      ]
+      if (hasFillChild.value) {
+        lines.push(`<v:fill ${fillAttrs} />`)
+      }
+      lines.push(`<v:textbox inset="${props.inset}" style="mso-fit-shape-to-text: true">`)
+      lines.push(`<div><![endif]-->`)
+      return lines.join('')
     })
 
     const after = computed(() => {
-      return `<!--[if mso]></div></v:textbox></v:rect><![endif]-->`
+      const element = `v:${props.shape}`
+      return `<!--[if mso]></div></v:textbox></${element}><![endif]-->`
     })
 
     return () => [
       createStaticVNode(before.value, 1),
       slots.default?.(),
-      createStaticVNode(after.value, 1)
+      createStaticVNode(after.value, 1),
     ]
-  }
+  },
 }
 </script>

package/dist/components/utils.d.ts

@@ -0,0 +1,53 @@
+//#region src/components/utils.d.ts
+declare function normalizeToPixels(value: string | number): string;
+/**
+ * Module-scoped sequential ID generator. Used by components to mint
+ * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.
+ *
+ * Must live here (not inside `<script setup>`) because Vue compiles
+ * `<script setup>` into the component's `setup()` function — any
+ * `let counter = 0` there resets per instance, causing id collisions.
+ */
+declare function nextId(prefix: string): string;
+declare function hasWidthUtility(classStr: string): boolean;
+declare function hasWidthInStyle(styleStr: string): boolean;
+declare function hasHeightUtility(classStr: string): boolean;
+declare function hasHeightInStyle(styleStr: string): boolean;
+/**
+ * Shared prop for components that emit MSO/VML fallback markup. The
+ * `null` default acts as the "unset" sentinel — `useOutlookFallback`
+ * treats `null` as inherit-from-ancestor (root default `true`),
+ * letting users override per-component without losing inheritance.
+ */
+declare const outlookFallbackProp: {
+  readonly type: BooleanConstructor;
+  readonly default: null;
+};
+/**
+ * Default utility classes for a code-block `<pre>`. `whitespace-pre!` is
+ * forced important so Gmail's stylesheet can't reset it to `normal`, and
+ * `m-0` strips the browser's default `<pre>` margins so it isn't spaced
+ * away from its wrapper.
+ */
+declare function codeBlockPreClass(bg: string): string;
+/**
+ * Build the email-safe table wrapper around highlighted code. Shared by the
+ * `<CodeBlock>` component and the Markdown fenced/indented code-block
+ * rules so both render identical markup: a full-width table whose
+ * cell carries the theme background, wrapping a `<pre>` styled
+ * with utility classes (not Shiki's raw inline styles).
+ */
+declare function buildCodeBlock(codeContent: string, bg: string, options?: {
+  preClass?: string;
+  tdClass?: string;
+  styleAttr?: string;
+}): string;
+/**
+ * Re-wrap a Shiki (or plain markdown-it) `<pre><code>` block as a CodeBlock,
+ * pulling the inner code and the theme background out of the highlighted
+ * HTML. Falls back to a white background for unhighlighted blocks.
+ */
+declare function shikiToCodeBlock(highlighted: string): string;
+//#endregion
+export { buildCodeBlock, codeBlockPreClass, hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp, shikiToCodeBlock };
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../src/components/utils.ts"],"mappings":";iBAAgB,iBAAA,CAAkB,KAAsB;AAAxD;;;;AAAwD;AAiBxD;;;AAjBA,iBAiBgB,MAAA,CAAO,MAAc;AAAA,iBAKrB,eAAA,CAAgB,QAAgB;AAAA,iBAQhC,eAAA,CAAgB,QAAgB;AAAA,iBAIhC,gBAAA,CAAiB,QAAgB;AAAA,iBAQjC,gBAAA,CAAiB,QAAgB;;AApBD;AAQhD;;;;cAsBa,mBAAA;EAAA,eAGH,kBAAA;EAAA;;;AArBuC;AAQjD;;;;iBAqBgB,iBAAA,CAAkB,EAAU;AAX5C;;;;;;;AAAA,iBAsBgB,cAAA,CACd,WAAA,UACA,EAAA,UACA,OAAA;EAAW,QAAA;EAAmB,OAAA;EAAkB,SAAA;AAAA;;AAdN;AAW5C;;;iBAoBgB,gBAAA,CAAiB,WAAmB"}

package/dist/components/utils.js

@@ -0,0 +1,80 @@
+//#region src/components/utils.ts
+function normalizeToPixels(value) {
+	if (typeof value === "number" || Number.isFinite(Number(value))) return `${value}px`;
+	return value;
+}
+const counters = {};
+/**
+* Module-scoped sequential ID generator. Used by components to mint
+* unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.
+*
+* Must live here (not inside `<script setup>`) because Vue compiles
+* `<script setup>` into the component's `setup()` function — any
+* `let counter = 0` there resets per instance, causing id collisions.
+*/
+function nextId(prefix) {
+	counters[prefix] = (counters[prefix] ?? 0) + 1;
+	return `${prefix}${counters[prefix]}`;
+}
+function hasWidthUtility(classStr) {
+	return classStr.split(/\s+/).some((c) => {
+		const clean = (c.split(":").pop() ?? "").replace(/^!/, "");
+		return /^(w-|max-w-|min-w-)/.test(clean);
+	});
+}
+function hasWidthInStyle(styleStr) {
+	return /(?:^|;\s*)(?:max-width|width)\s*:/i.test(styleStr);
+}
+function hasHeightUtility(classStr) {
+	return classStr.split(/\s+/).some((c) => {
+		const clean = (c.split(":").pop() ?? "").replace(/^!/, "");
+		return /^(h-|max-h-|min-h-)/.test(clean);
+	});
+}
+function hasHeightInStyle(styleStr) {
+	return /(?:^|;\s*)(?:max-height|height)\s*:/i.test(styleStr);
+}
+/**
+* Shared prop for components that emit MSO/VML fallback markup. The
+* `null` default acts as the "unset" sentinel — `useOutlookFallback`
+* treats `null` as inherit-from-ancestor (root default `true`),
+* letting users override per-component without losing inheritance.
+*/
+const outlookFallbackProp = {
+	type: Boolean,
+	default: null
+};
+/**
+* Default utility classes for a code-block `<pre>`. `whitespace-pre!` is
+* forced important so Gmail's stylesheet can't reset it to `normal`, and
+* `m-0` strips the browser's default `<pre>` margins so it isn't spaced
+* away from its wrapper.
+*/
+function codeBlockPreClass(bg) {
+	return `font-mono bg-[${bg}] p-4 m-0 overflow-auto whitespace-pre! [word-wrap:normal] [word-break:normal] [word-spacing:normal]`;
+}
+/**
+* Build the email-safe table wrapper around highlighted code. Shared by the
+* `<CodeBlock>` component and the Markdown fenced/indented code-block
+* rules so both render identical markup: a full-width table whose
+* cell carries the theme background, wrapping a `<pre>` styled
+* with utility classes (not Shiki's raw inline styles).
+*/
+function buildCodeBlock(codeContent, bg, options = {}) {
+	const preClass = options.preClass ?? codeBlockPreClass(bg);
+	return `<table class="w-full"><tr><td class="${options.tdClass ?? `bg-[${bg}] max-w-0 mso-padding-alt-4`}"><pre class="${preClass}"${options.styleAttr ?? ""} data-juice-important><code>${codeContent}</code></pre></td></tr></table>`;
+}
+/**
+* Re-wrap a Shiki (or plain markdown-it) `<pre><code>` block as a CodeBlock,
+* pulling the inner code and the theme background out of the highlighted
+* HTML. Falls back to a white background for unhighlighted blocks.
+*/
+function shikiToCodeBlock(highlighted) {
+	const trimmed = highlighted.trim();
+	const bg = (trimmed.match(/^<pre[^>]*>/)?.[0] ?? "").match(/background-color:\s*(#[0-9a-fA-F]+)/)?.[1] ?? "#fff";
+	return buildCodeBlock(trimmed.replace(/^<pre[^>]*><code[^>]*>/, "").replace(/<\/code><\/pre>$/, ""), bg);
+}
+//#endregion
+export { buildCodeBlock, codeBlockPreClass, hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp, shikiToCodeBlock };
+
+//# sourceMappingURL=utils.js.map

package/dist/components/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/components/utils.ts"],"sourcesContent":["export function normalizeToPixels(value: string | number): string {\n  if (typeof value === 'number' || Number.isFinite(Number(value))) {\n    return `${value}px`\n  }\n  return value\n}\n\nconst counters: Record<string, number> = {}\n\n/**\n * Module-scoped sequential ID generator. Used by components to mint\n * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.\n *\n * Must live here (not inside `<script setup>`) because Vue compiles\n * `<script setup>` into the component's `setup()` function — any\n * `let counter = 0` there resets per instance, causing id collisions.\n */\nexport function nextId(prefix: string): string {\n  counters[prefix] = (counters[prefix] ?? 0) + 1\n  return `${prefix}${counters[prefix]}`\n}\n\nexport function hasWidthUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(w-|max-w-|min-w-)/.test(clean)\n  })\n}\n\nexport function hasWidthInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-width|width)\\s*:/i.test(styleStr)\n}\n\nexport function hasHeightUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(h-|max-h-|min-h-)/.test(clean)\n  })\n}\n\nexport function hasHeightInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-height|height)\\s*:/i.test(styleStr)\n}\n\n/**\n * Shared prop for components that emit MSO/VML fallback markup. The\n * `null` default acts as the \"unset\" sentinel — `useOutlookFallback`\n * treats `null` as inherit-from-ancestor (root default `true`),\n * letting users override per-component without losing inheritance.\n */\nexport const outlookFallbackProp = {\n  type: Boolean,\n  default: null,\n} as const\n\n/**\n * Default utility classes for a code-block `<pre>`. `whitespace-pre!` is\n * forced important so Gmail's stylesheet can't reset it to `normal`, and\n * `m-0` strips the browser's default `<pre>` margins so it isn't spaced\n * away from its wrapper.\n */\nexport function codeBlockPreClass(bg: string): string {\n  return `font-mono bg-[${bg}] p-4 m-0 overflow-auto whitespace-pre! [word-wrap:normal] [word-break:normal] [word-spacing:normal]`\n}\n\n/**\n * Build the email-safe table wrapper around highlighted code. Shared by the\n * `<CodeBlock>` component and the Markdown fenced/indented code-block\n * rules so both render identical markup: a full-width table whose\n * cell carries the theme background, wrapping a `<pre>` styled\n * with utility classes (not Shiki's raw inline styles).\n */\nexport function buildCodeBlock(\n  codeContent: string,\n  bg: string,\n  options: { preClass?: string; tdClass?: string; styleAttr?: string } = {},\n): string {\n  const preClass = options.preClass ?? codeBlockPreClass(bg)\n  const tdClass = options.tdClass ?? `bg-[${bg}] max-w-0 mso-padding-alt-4`\n  const styleAttr = options.styleAttr ?? ''\n\n  // `data-juice-important` tells the CSS inliner to keep `!important` on this\n  // element's inlined declarations (e.g. `white-space: pre !important`), which\n  // it strips by default. Juice removes the attribute from the output.\n  return `<table class=\"w-full\"><tr><td class=\"${tdClass}\"><pre class=\"${preClass}\"${styleAttr} data-juice-important><code>${codeContent}</code></pre></td></tr></table>`\n}\n\n/**\n * Re-wrap a Shiki (or plain markdown-it) `<pre><code>` block as a CodeBlock,\n * pulling the inner code and the theme background out of the highlighted\n * HTML. Falls back to a white background for unhighlighted blocks.\n */\nexport function shikiToCodeBlock(highlighted: string): string {\n  const trimmed = highlighted.trim()\n  // Read the background only from the opening <pre> tag's style, never from\n  // the code body — otherwise a `background-color:` inside the snippet (e.g. a\n  // CSS example, or any unhighlighted block) would hijack the wrapper color.\n  const preTag = trimmed.match(/^<pre[^>]*>/)?.[0] ?? ''\n  const bg = preTag.match(/background-color:\\s*(#[0-9a-fA-F]+)/)?.[1] ?? '#fff'\n  const codeContent = trimmed\n    .replace(/^<pre[^>]*><code[^>]*>/, '')\n    .replace(/<\\/code><\\/pre>$/, '')\n\n  return buildCodeBlock(codeContent, bg)\n}\n\n"],"mappings":";AAAA,SAAgB,kBAAkB,OAAgC;CAChE,IAAI,OAAO,UAAU,YAAY,OAAO,SAAS,OAAO,KAAK,CAAC,GAC5D,OAAO,GAAG,MAAM;CAElB,OAAO;AACT;AAEA,MAAM,WAAmC,CAAC;;;;;;;;;AAU1C,SAAgB,OAAO,QAAwB;CAC7C,SAAS,WAAW,SAAS,WAAW,KAAK;CAC7C,OAAO,GAAG,SAAS,SAAS;AAC9B;AAEA,SAAgB,gBAAgB,UAA2B;CACzD,OAAO,SAAS,MAAM,KAAK,CAAC,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,KAAK,GAAA,CAChB,QAAQ,MAAM,EAAE;EACtC,OAAO,sBAAsB,KAAK,KAAK;CACzC,CAAC;AACH;AAEA,SAAgB,gBAAgB,UAA2B;CACzD,OAAO,qCAAqC,KAAK,QAAQ;AAC3D;AAEA,SAAgB,iBAAiB,UAA2B;CAC1D,OAAO,SAAS,MAAM,KAAK,CAAC,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,KAAK,GAAA,CAChB,QAAQ,MAAM,EAAE;EACtC,OAAO,sBAAsB,KAAK,KAAK;CACzC,CAAC;AACH;AAEA,SAAgB,iBAAiB,UAA2B;CAC1D,OAAO,uCAAuC,KAAK,QAAQ;AAC7D;;;;;;;AAQA,MAAa,sBAAsB;CACjC,MAAM;CACN,SAAS;AACX;;;;;;;AAQA,SAAgB,kBAAkB,IAAoB;CACpD,OAAO,iBAAiB,GAAG;AAC7B;;;;;;;;AASA,SAAgB,eACd,aACA,IACA,UAAuE,CAAC,GAChE;CACR,MAAM,WAAW,QAAQ,YAAY,kBAAkB,EAAE;CAOzD,OAAO,wCANS,QAAQ,WAAW,OAAO,GAAG,6BAMU,gBAAgB,SAAS,GAL9D,QAAQ,aAAa,GAKsD,8BAA8B,YAAY;AACzI;;;;;;AAOA,SAAgB,iBAAiB,aAA6B;CAC5D,MAAM,UAAU,YAAY,KAAK;CAKjC,MAAM,MADS,QAAQ,MAAM,aAAa,CAAC,GAAG,MAAM,GAAA,CAClC,MAAM,qCAAqC,CAAC,GAAG,MAAM;CAKvE,OAAO,eAJa,QACjB,QAAQ,0BAA0B,EAAE,CAAC,CACrC,QAAQ,oBAAoB,EAEC,GAAG,EAAE;AACvC"}