@rip-lang/ui 0.3.67 → 0.4.1

package/email/benchmarks/benchmark.rip

@@ -0,0 +1,94 @@
+import { renderEmail, toHTML } from '../email.rip'
+import { prepareConfig } from '../../tailwind/tailwind.rip'
+import { PlainBenchEmail, TailwindBenchEmail, benchTailwindConfig } from './samples.rip'
+
+iterations = Number(process.argv[2] ?? 250)
+warmupIterations = Number(process.argv[3] ?? 40)
+
+percentile = (sortedValues, fraction) ->
+  return 0 unless sortedValues.length
+  index = Math.min(sortedValues.length - 1, Math.floor(sortedValues.length * fraction))
+  sortedValues[index]
+
+formatMs = (value) -> "#{value.toFixed(2)}ms"
+
+summarize = (name, samples) ->
+  sorted = [...samples]
+  sorted.sort (a, b) -> a - b
+
+  total = 0
+  total += value for value in sorted
+  average = total / sorted.length
+  ops = 1000 / average
+
+  {
+    name: name
+    average: average
+    p50: percentile(sorted, 0.5)
+    p95: percentile(sorted, 0.95)
+    min: sorted[0]
+    max: sorted[-1]
+    ops: ops
+  }
+
+runCase = (name, fn) ->
+  for idx in [0...warmupIterations]
+    fn()
+
+  samples = []
+  for idx in [0...iterations]
+    start = performance.now()
+    fn()
+    samples.push(performance.now() - start)
+
+  summarize(name, samples)
+
+await prepareConfig(benchTailwindConfig)
+
+cases = [
+  {
+    name: 'toHTML plain'
+    run: -> toHTML(PlainBenchEmail)
+  }
+  {
+    name: 'renderEmail plain'
+    run: -> renderEmail(PlainBenchEmail)
+  }
+  {
+    name: 'toHTML tailwind'
+    run: -> toHTML(TailwindBenchEmail)
+  }
+  {
+    name: 'renderEmail tailwind'
+    run: -> renderEmail(TailwindBenchEmail)
+  }
+  {
+    name: 'toHTML tailwind themed'
+    run: ->
+      toHTML TailwindBenchEmail,
+        config: benchTailwindConfig
+        buttonClass: 'rounded-md bg-brand px-4 py-3 text-sm font-semibold text-white'
+        linkClass: 'text-accent'
+  }
+  {
+    name: 'renderEmail tailwind themed'
+    run: ->
+      renderEmail TailwindBenchEmail,
+        config: benchTailwindConfig
+        buttonClass: 'rounded-md bg-brand px-4 py-3 text-sm font-semibold text-white'
+        linkClass: 'text-accent'
+  }
+]
+
+p "Rip email benchmark (#{iterations} iterations, #{warmupIterations} warmup)"
+for testCase in cases
+  result = runCase(testCase.name, testCase.run)
+  p [
+    result.name.padEnd(28)
+    "avg #{formatMs(result.average)}".padEnd(14)
+    "p50 #{formatMs(result.p50)}".padEnd(14)
+    "p95 #{formatMs(result.p95)}".padEnd(14)
+    "min #{formatMs(result.min)}".padEnd(14)
+    "max #{formatMs(result.max)}".padEnd(14)
+    "#{result.ops.toFixed(1)} ops/s"
+  ].join('  ')

package/email/benchmarks/samples.rip

@@ -0,0 +1,104 @@
+import { Email, Head, Body, Preview, Container, Section, Row, Column, Heading, Text, Link, Button, Divider, Tailwind } from '../email.rip'
+
+benchLinks = [
+  {
+    title: 'Deployment summary'
+    body: 'Builds are green, release notes are drafted, and the staging environment is ready for sign-off.'
+    href: 'https://example.com/deployments'
+  }
+  {
+    title: 'Customer feedback'
+    body: 'Three enterprise customers requested tighter audit logs and clearer seat-management flows.'
+    href: 'https://example.com/feedback'
+  }
+  {
+    title: 'Usage analytics'
+    body: 'Activation is up 8% week over week, with strong retention from trial accounts created this month.'
+    href: 'https://example.com/analytics'
+  }
+]
+
+export benchTailwindConfig =
+  theme:
+    extend:
+      colors:
+        brand: '#0f172a'
+        accent: '#0f766e'
+
+export PlainBenchEmail = component
+  @title:: string := 'Rip UI Weekly Digest'
+
+  render
+    Email
+      Head
+      Body style: 'background-color:#f8fafc;padding:24px'
+        Preview text: 'Rip UI weekly digest with product, customer, and delivery updates.'
+        Container style: 'background:#ffffff;padding:32px;border:1px solid #e2e8f0'
+          Heading as: 'h1', style: 'font-size:30px;line-height:36px;margin:0 0 16px;color:#0f172a'
+            = @title
+
+          Text style: 'color:#475569'
+            = 'A compact benchmark email that exercises the curated Rip email components without Tailwind.'
+
+          Divider style: 'margin:24px 0;border-top:1px solid #e2e8f0'
+
+          for entry, idx in benchLinks
+            Section style: "padding:20px;border:1px solid #e2e8f0;background:#ffffff;margin:0 0 #{if idx < benchLinks.length - 1 then '16px' else '0'}"
+              Row
+                Column style: 'width:70%'
+                  Heading as: 'h2', style: 'font-size:18px;line-height:24px;margin:0 0 8px;color:#111827'
+                    = entry.title
+                  Text style: 'margin:0;color:#475569'
+                    = entry.body
+                Column style: 'width:30%;text-align:right'
+                  Button href: entry.href, style: 'background:#0f172a;color:#ffffff;border-radius:8px;padding:12px 16px'
+                    = 'Open report'
+
+          Divider style: 'margin:24px 0;border-top:1px solid #e2e8f0'
+
+          Text style: 'margin:0;color:#64748b'
+            = 'Need more detail?'
+            = ' '
+            Link href: 'https://example.com/team', style: 'color:#0f766e'
+              = 'Visit the team dashboard'
+
+export TailwindBenchEmail = component
+  @title:: string := 'Rip UI Weekly Digest'
+  @config:: any := undefined
+  @buttonClass:: string := 'rounded-md bg-slate-900 px-4 py-3 text-sm font-semibold text-white'
+  @linkClass:: string := 'text-teal-700'
+
+  render
+    Email
+      Head
+      Tailwind config: @config
+        Body class: 'bg-slate-50 px-6 py-8'
+          Preview text: 'Rip UI weekly digest with product, customer, and delivery updates.'
+          Container class: 'mx-auto max-w-2xl border border-slate-200 bg-white p-8'
+            Heading as: 'h1', class: 'm-0 text-3xl font-semibold tracking-tight text-slate-900'
+              = @title
+
+            Text class: 'my-4 text-sm leading-6 text-slate-600'
+              = 'A compact benchmark email that exercises the Rip Tailwind inliner and themed email path.'
+
+            Divider class: 'my-6 border-slate-200'
+
+            for entry, idx in benchLinks
+              Section class: "rounded-lg border border-slate-200 bg-white p-5 #{if idx < benchLinks.length - 1 then 'mb-4' else ''}"
+                Row
+                  Column class: 'w-[70%]'
+                    Heading as: 'h2', class: 'm-0 text-lg font-semibold text-slate-900'
+                      = entry.title
+                    Text class: 'mb-0 mt-2 text-sm leading-6 text-slate-600'
+                      = entry.body
+                  Column class: 'w-[30%] text-right'
+                    Button href: entry.href, class: @buttonClass
+                      = 'Open report'
+
+            Divider class: 'my-6 border-slate-200'
+
+            Text class: 'm-0 text-sm text-slate-500'
+              = 'Need more detail?'
+              = ' '
+              Link href: 'https://example.com/team', class: @linkClass
+                = 'Visit the team dashboard'

package/email/compat.rip

@@ -0,0 +1,129 @@
+# ==============================================================================
+# Compat — email-specific helper functions
+#
+# Ported from React Email's utility files, rewritten as idiomatic Rip.
+# Zero dependencies.
+# ==============================================================================
+
+# --- Unit conversion ---
+
+export pxToPt = (px) ->
+  return undefined unless typeof px is 'number' and not Number.isNaN(px)
+  px * 3 / 4
+
+export convertToPx = (value) ->
+  return 0 unless value?
+  return value if typeof value is 'number'
+  str = String(value)
+  if str =~ /^([\d.]+)(px|em|rem|%)$/
+    num = parseFloat(_[1])
+    switch _[2]
+      when 'px' then num
+      when 'em', 'rem' then num * 16
+      when '%' then num / 100 * 600
+      else num
+  else 0
+
+# --- Padding parser ---
+
+styleToObject = (style) ->
+  return {} unless style?
+  return style if typeof style is 'object'
+
+  result = {}
+  for raw in String(style).split(';')
+    s = raw.trim()
+    continue unless s
+    idx = s.indexOf(':')
+    continue if idx is -1
+    key = s.slice(0, idx).trim()
+    val = s.slice(idx + 1).trim()
+    camel = key.replace /-([a-z])/g, (_, c) -> c.toUpperCase()
+    result[camel] = val
+  result
+
+parsePaddingValue = (value) ->
+  base = { paddingTop: undefined, paddingRight: undefined, paddingBottom: undefined, paddingLeft: undefined }
+  return base unless value?
+
+  if typeof value is 'number'
+    return { paddingTop: value, paddingRight: value, paddingBottom: value, paddingLeft: value }
+
+  vals = String(value).trim().split(/\s+/)
+  switch vals.length
+    when 1 then { paddingTop: vals[0], paddingRight: vals[0], paddingBottom: vals[0], paddingLeft: vals[0] }
+    when 2 then { paddingTop: vals[0], paddingRight: vals[1], paddingBottom: vals[0], paddingLeft: vals[1] }
+    when 3 then { paddingTop: vals[0], paddingRight: vals[1], paddingBottom: vals[2], paddingLeft: vals[1] }
+    when 4 then { paddingTop: vals[0], paddingRight: vals[1], paddingBottom: vals[2], paddingLeft: vals[3] }
+    else base
+
+export parsePadding = (style = {}) ->
+  style = styleToObject(style)
+  pt = undefined
+  pr = undefined
+  pb = undefined
+  pl = undefined
+
+  for key, val of style
+    if key is 'padding'
+      parsed = parsePaddingValue(val)
+      pt = parsed.paddingTop
+      pr = parsed.paddingRight
+      pb = parsed.paddingBottom
+      pl = parsed.paddingLeft
+    else if key is 'paddingTop'    then pt = val
+    else if key is 'paddingRight'  then pr = val
+    else if key is 'paddingBottom' then pb = val
+    else if key is 'paddingLeft'   then pl = val
+
+  paddingTop:    if pt? then convertToPx(pt) else undefined
+  paddingRight:  if pr? then convertToPx(pr) else undefined
+  paddingBottom: if pb? then convertToPx(pb) else undefined
+  paddingLeft:   if pl? then convertToPx(pl) else undefined
+
+# --- MSO button padding ---
+
+MAX_FONT_WIDTH =! 5
+
+export computeMsoPadding = (expectedWidth) ->
+  return [0, 0] if expectedWidth is 0
+  spaceCount = 0
+  fontWidth = -> if spaceCount > 0 then expectedWidth / spaceCount / 2 else Infinity
+  spaceCount++ while fontWidth() > MAX_FONT_WIDTH
+  [fontWidth(), spaceCount]
+
+# --- Preview text padding ---
+
+WHITESPACE_CHARS =! '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF'
+PREVIEW_MAX_LENGTH =! 150
+
+export previewPadding = (text, maxLen = PREVIEW_MAX_LENGTH) ->
+  remaining = maxLen - text.length
+  return '' if remaining <= 0
+  WHITESPACE_CHARS.repeat(remaining)
+
+# --- Style object to CSS string ---
+
+export styleToString = (obj) ->
+  parts = []
+  for key, val of obj
+    continue unless val?
+    kebab = key.replace /[A-Z]/g, (m) -> "-#{m.toLowerCase()}"
+    parts.push "#{kebab}:#{val}"
+  parts.join(';')
+
+# --- MSO conditional wrapper ---
+
+export msoConditional = (html) ->
+  "<!--[if mso]>#{html}<![endif]-->"
+
+# --- MSO button HTML ---
+
+export msoButtonHtml = (paddingLeft, paddingRight, paddingBottom) ->
+  [plFontWidth, plSpaceCount] = computeMsoPadding(paddingLeft ?? 0)
+  [prFontWidth, prSpaceCount] = computeMsoPadding(paddingRight ?? 0)
+  textRaise = pxToPt((paddingBottom ?? 0) * 2) ?? 0
+
+  left = "<!--[if mso]><i style=\"mso-font-width:#{plFontWidth * 100}%;mso-text-raise:#{textRaise}\" hidden>#{'&#8202;'.repeat(plSpaceCount)}</i><![endif]-->"
+  right = "<!--[if mso]><i style=\"mso-font-width:#{prFontWidth * 100}%\" hidden>#{'&#8202;'.repeat(prSpaceCount)}&#8203;</i><![endif]-->"
+  { left, right }

package/email/components.rip

@@ -0,0 +1,371 @@
+# ==============================================================================
+# Rip Email — curated PascalCase component catalog
+#
+# Each component uses native lowercase HTML tags internally via Rip render
+# blocks. The public API is uniform PascalCase.
+# ==============================================================================
+
+import { previewPadding, computeMsoPadding, pxToPt, parsePadding } from './compat.rip'
+import { joinStyles, withMargin } from '../shared/styles.rip'
+import { registerEmailTailwindRoot } from '../tailwind/tailwind.rip'
+
+# ==============================================================================
+# Document
+# ==============================================================================
+
+export Email = component
+  @class:: string := ""
+  @lang:: string := "en"
+  @dir:: "ltr" | "rtl" := "ltr"
+  render
+    html class: @class, lang: @lang, dir: @dir
+      slot
+
+export Head = component
+  @class:: string := ""
+  render
+    head class: @class
+      meta content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"
+      meta name: "x-apple-disable-message-reformatting"
+      slot
+
+export Body = component
+  @class:: string := ""
+  @style:: string := ""
+  render
+    body class: @class
+      table align: "center", width: "100%", border: "0", cellPadding: "0", cellSpacing: "0", role: "presentation"
+        tbody
+          tr
+            td style: @style
+              slot
+
+export Preview = component
+  @class:: string := ""
+  @text:: string := ""
+  _padding ~= previewPadding(@text)
+  render
+    div class: @class, style: "display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0", "data-skip-in-text": "true"
+      = @text
+      div
+        = _padding
+
+export Font = component
+  @fontFamily:: string := ""
+  @fallbackFontFamily:: string | string[] := "Arial"
+  @fontStyle:: string := "normal"
+  @fontWeight:: number := 400
+  @webFontUrl:: string := ""
+  @webFontFormat:: string := "woff2"
+
+  _src ~= if @webFontUrl then "src: url(#{@webFontUrl}) format('#{@webFontFormat}');" else ''
+  _fallback:: string[] ~= if kind(@fallbackFontFamily) is 'array' then Array.from(@fallbackFontFamily) else [@fallbackFontFamily]
+  _msoAlt ~= _fallback[0]
+  _fallbackStr:: string ~= _fallback.join(', ')
+
+  _css ~= """
+    @font-face {
+      font-family: '#{@fontFamily}';
+      font-style: #{@fontStyle};
+      font-weight: #{@fontWeight};
+      mso-font-alt: '#{_msoAlt}';
+      #{_src}
+    }
+    * {
+      font-family: '#{@fontFamily}', #{_fallbackStr};
+    }
+    """
+
+  render
+    if @fontFamily
+      style innerHTML: _css
+
+# ==============================================================================
+# Layout
+# ==============================================================================
+
+export Container = component
+  @class:: string := ""
+  @style:: string := ""
+  _style ~= joinStyles("max-width:37.5em", @style)
+  render
+    table class: @class, align: "center", width: "100%", border: "0", cellPadding: "0", cellSpacing: "0", role: "presentation", style: _style
+      tbody
+        tr style: "width:100%"
+          td
+            slot
+
+export Section = component
+  @class:: string := ""
+  @style:: string := ""
+  render
+    table class: @class, align: "center", width: "100%", border: "0", cellPadding: "0", cellSpacing: "0", role: "presentation", style: @style
+      tbody
+        tr
+          td
+            slot
+
+export Row = component
+  @class:: string := ""
+  @style:: string := ""
+  render
+    table class: @class, align: "center", width: "100%", border: "0", cellPadding: "0", cellSpacing: "0", role: "presentation", style: @style
+      tbody
+        tr style: "width:100%"
+          slot
+
+export Column = component
+  @class:: string := ""
+  @style:: string := ""
+  render
+    td class: @class, style: @style
+      slot
+
+# ==============================================================================
+# Content
+# ==============================================================================
+
+export Heading = component
+  @as:: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" := "h1"
+  @class:: string := ""
+  @style:: string := ""
+  @m:: string | undefined := undefined
+  @mx:: string | undefined := undefined
+  @my:: string | undefined := undefined
+  @mt:: string | undefined := undefined
+  @mr:: string | undefined := undefined
+  @mb:: string | undefined := undefined
+  @ml:: string | undefined := undefined
+  _marginStyle ~= withMargin {
+    m:  @m
+    mx: @mx
+    my: @my
+    mt: @mt
+    mr: @mr
+    mb: @mb
+    ml: @ml
+  }
+  _style ~= joinStyles(_marginStyle, @style)
+  render
+    switch @as
+      when 'h1' then h1 class: @class, style: _style, slot
+      when 'h2' then h2 class: @class, style: _style, slot
+      when 'h3' then h3 class: @class, style: _style, slot
+      when 'h4' then h4 class: @class, style: _style, slot
+      when 'h5' then h5 class: @class, style: _style, slot
+      when 'h6' then h6 class: @class, style: _style, slot
+      else h1 class: @class, style: _style, slot
+
+export Text = component
+  @class:: string := ""
+  @style:: string := ""
+  _style ~= joinStyles("font-size:14px;line-height:24px;margin:16px 0", @style)
+  render
+    p class: @class, style: _style
+      slot
+
+export Link = component
+  @class:: string := ""
+  @href:: string := ""
+  @target:: string := "_blank"
+  @style:: string := ""
+  _style ~= joinStyles("color:#067df7;text-decoration:none", @style)
+  render
+    a class: @class, href: @href, target: @target, style: _style
+      slot
+
+export Image = component
+  @class:: string := ""
+  @src:: string := ""
+  @alt:: string := ""
+  @width:: number | undefined := undefined
+  @height:: number | undefined := undefined
+  @style:: string := ""
+  _style ~= joinStyles("display:block;outline:none;border:none;text-decoration:none", @style)
+  render
+    img class: @class, src: @src, alt: @alt, width: @width, height: @height, style: _style
+
+export Divider = component
+  @class:: string := ""
+  @style:: string := ""
+  _style ~= joinStyles("width:100%;border:none;border-top:1px solid #eaeaea", @style)
+  render
+    hr class: @class, style: _style
+
+export Button = component
+  @class:: string := ""
+  @href:: string := ""
+  @target:: string := "_blank"
+  @style:: string := ""
+
+  _padding ~= parsePadding(@style)
+  _y ~= (_padding.paddingTop ?? 0) + (_padding.paddingBottom ?? 0)
+  _textRaise ~= pxToPt(_y) ?? 0
+  _plResult ~= computeMsoPadding(_padding.paddingLeft ?? 0)
+  _prResult ~= computeMsoPadding(_padding.paddingRight ?? 0)
+  _msoLeft ~= "<!--[if mso]><i style=\"mso-font-width:#{_plResult[0] * 100}%;mso-text-raise:#{_textRaise}\" hidden>#{'&#8202;'.repeat(_plResult[1])}</i><![endif]-->"
+  _msoRight ~= "<!--[if mso]><i style=\"mso-font-width:#{_prResult[0] * 100}%\" hidden>#{'&#8202;'.repeat(_prResult[1])}&#8203;</i><![endif]-->"
+
+  _linkStyle ~= joinStyles("line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px", @style)
+
+  render
+    a class: @class, href: @href, target: @target, style: _linkStyle
+      span innerHTML: _msoLeft
+      span style: "max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px"
+        slot
+      span innerHTML: _msoRight
+
+# ==============================================================================
+# Rich content
+# ==============================================================================
+
+_escapeHtml = (text:: string) ->
+  String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+
+_escapeAttr = (text:: string) ->
+  String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+
+_safeHref = (href:: string) ->
+  value = String(href or '').trim()
+  return '' unless value
+
+  lower = value.toLowerCase()
+  return value if lower.startsWith('http://')
+  return value if lower.startsWith('https://')
+  return value if lower.startsWith('mailto:')
+  return value if lower.startsWith('tel:')
+  return value if lower.startsWith('/')
+  return value if lower.startsWith('#')
+  '#'
+
+_inlineFormat = (text:: string) ->
+  escaped = _escapeHtml(text)
+
+  escaped
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/_(.+?)_/g, '<em>$1</em>')
+    .replace(/`(.+?)`/g, '<code>$1</code>')
+    .replace /\[(.+?)\]\((.+?)\)/g, (_, label, href) ->
+      safeHref = _escapeAttr(_safeHref(href))
+      "<a href=\"#{safeHref}\" target=\"_blank\">#{label}</a>"
+
+_parseMarkdown = (src:: string) ->
+  return '' unless src
+  lines = src.split('\n')
+  out = []
+  inList = null
+
+  for line in lines
+    stripped = line.trim()
+
+    if stripped is ''
+      if inList
+        out.push("</#{inList}>")
+        inList = null
+      continue
+
+    if stripped[0] is '#'
+      level = 0
+      level++ while stripped[level] is '#' and level < 6
+      text = stripped.slice(level).trim()
+      out.push("<h#{level}>#{_inlineFormat(text)}</h#{level}>")
+      continue
+
+    if (stripped[0] is '-' or stripped[0] is '*') and stripped[1] is ' '
+      unless inList is 'ul'
+        out.push("</#{inList}>") if inList
+        out.push('<ul>')
+        inList = 'ul'
+      out.push("<li>#{_inlineFormat(stripped.slice(2))}</li>")
+      continue
+
+    if stripped =~ /^\d+\.\s+(.*)/
+      unless inList is 'ol'
+        out.push("</#{inList}>") if inList
+        out.push('<ol>')
+        inList = 'ol'
+      out.push("<li>#{_inlineFormat(_[1])}</li>")
+      continue
+
+    if stripped is '---' or stripped is '***' or stripped is '___'
+      out.push('<hr />')
+      continue
+
+    if stripped[0] is '>'
+      out.push("<blockquote>#{_inlineFormat(stripped.slice(1).trim())}</blockquote>")
+      continue
+
+    out.push("<p>#{_inlineFormat(stripped)}</p>")
+
+  out.push("</#{inList}>") if inList
+  out.join('\n')
+
+export Markdown = component
+  @class:: string := ""
+  @text:: string := ""
+  @style:: string := ""
+  _html ~= _parseMarkdown(@text)
+  render
+    # Raw HTML from markdown input is escaped; only this curated subset renders as tags.
+    div class: @class, style: @style, innerHTML: _html
+
+export CodeBlock = component
+  @class:: string := ""
+  @code:: string := ""
+  @lineNumbers:: boolean := false
+  @style:: string := ""
+  _baseStyle =! "background:#f4f4f4;padding:16px;border-radius:4px;font-family:monospace;font-size:13px;overflow-x:auto;white-space:pre"
+  _style ~= "#{_baseStyle};#{@style}"
+
+  _html ~=
+    lines = @code.split('\n')
+    result = []
+    for line, i in lines
+      escaped = line
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+      if @lineNumbers
+        num = "<span style=\"display:inline-block;width:2em;color:#999;user-select:none\">#{i + 1}</span>"
+        result.push("#{num}#{escaped}")
+      else
+        result.push(escaped)
+    result.join('\n')
+
+  render
+    pre class: @class, style: _style
+      code innerHTML: _html
+
+export CodeInline = component
+  @class:: string := ""
+  @style:: string := ""
+  _codeStyle ~= "background:#f4f4f4;padding:2px 4px;border-radius:3px;font-family:monospace;font-size:0.9em;#{@style}"
+  _orangeCss =! '''
+    meta ~ .cino { display: none !important; opacity: 0 !important; }
+    meta ~ .cio { display: block !important; }
+    '''
+  render
+    style innerHTML: _orangeCss
+    code class: joinStyles(@class, "cino"), style: _codeStyle
+      slot
+    span class: joinStyles(@class, "cio"), style: "display:none;#{_codeStyle}"
+      slot
+
+# ==============================================================================
+# Styling
+# ==============================================================================
+
+export Tailwind = component
+  @config:: any := undefined
+  mounted: ->
+    registerEmailTailwindRoot(this, @config)
+  render
+    slot