@rip-lang/ui 0.4.2 → 0.4.4

package/browser/components/autocomplete.rip

@@ -124,7 +124,7 @@ export Autocomplete = component
         $open: open?!
         style: "position:fixed;margin:0;inset:auto"
         for item, idx in filteredItems
-          div role: "option", tabindex: "-1"
+          div role: "option", tabIndex: -1
             @click: (=> @selectIndex(idx))
             @mouseenter: (=> @_hlIdx = idx; @_updateHighlight())
             "#{if typeof item is 'string' then item else (item.label or item.name or String(item))}"

package/browser/components/carousel.rip

@@ -93,7 +93,7 @@ export Carousel = component
   onMouseleave: -> @_startAutoplay() if @autoplay
 
   render
-    div role: "region", aria-roledescription: "carousel", aria-label: @label, tabindex: "0"
+    div role: "region", aria-roledescription: "carousel", aria-label: @label, tabIndex: 0
       $orientation: @orientation
       @keydown: @onKeydown
       @mouseenter: @onMouseenter

package/browser/components/checkbox-group.rip

@@ -81,7 +81,7 @@ export CheckboxGroup = component
         slot
 
       for opt, idx in _options
-        button role: "checkbox", tabindex: "-1"
+        button role: "checkbox", tabIndex: -1
           aria-checked: opt.dataset.value in @value
           $checked: (opt.dataset.value in @value)?!
           $disabled: @disabled?!

package/browser/components/combobox.rip

@@ -140,7 +140,7 @@ export Combobox = component
         style: "position:fixed;margin:0;inset:auto"
         $open: open?!
         for item, idx in @items
-          div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
+          div role: "option", tabIndex: -1, id: "#{_listId}-#{idx}"
             $value: item
             $highlighted: (idx is highlightedIndex)?!
             @click: (=> @selectIndex(idx))

package/browser/components/context-menu.rip

@@ -79,7 +79,7 @@ export ContextMenu = component
         div ref: "_list", role: "menu", $open: true, @keydown: @_onKeydown
           style: "position:fixed;left:#{posX}px;top:#{posY}px;z-index:50"
           for item, idx in _menuItems
-            div role: "menuitem", tabindex: "-1"
+            div role: "menuitem", tabIndex: -1
               $highlighted: (idx is highlightedIndex)?!
               $disabled: item.dataset.disabled?!
               $value: item.dataset.item

package/browser/components/date-picker.rip

@@ -195,7 +195,7 @@ export DatePicker = component
           # Day grid
           . $days: true, role: "grid"
             for entry, dIdx in _daysInView
-              button role: "gridcell", tabindex: "-1"
+              button role: "gridcell", tabIndex: -1
                 $outside: entry.outside?!
                 $today: dpSameDay(entry.date, _today)?!
                 $selected: (if @range then (Array.isArray(@value) and (dpSameDay(entry.date, @value[0]) or dpSameDay(entry.date, @value[1]))) else dpSameDay(entry.date, @value))?!

package/browser/components/grid.rip

@@ -879,7 +879,7 @@ export Grid = component
       @_resizeObs.disconnect()
 
   render
-    div.grid-container ref: "_container", role: "grid", tabindex: "0",
+    div.grid-container ref: "_container", role: "grid", tabIndex: 0,
       $editing: editing?!,
       $selecting: selecting?!
       table.rip-grid

package/browser/components/menu.rip

@@ -139,7 +139,7 @@ export Menu = component
         @keydown: @onMenuKeydown
         for item, idx in items
           div role: item.getAttribute('role') or 'menuitem'
-            tabindex: "-1"
+            tabIndex: -1
             aria-checked: item.getAttribute('aria-checked')?!
             $highlighted: (idx is highlightedIndex)?!
             $disabled: item.dataset.disabled?!

package/browser/components/menubar.rip

@@ -129,7 +129,7 @@ export Menubar = component
         slot
 
       for menu in _menus
-        button role: "menuitem", tabindex: "0"
+        button role: "menuitem", tabIndex: 0
           "data-menu-trigger": menu.dataset.menu
           aria-haspopup: "menu"
           aria-expanded: activeMenu is menu.dataset.menu
@@ -143,7 +143,7 @@ export Menubar = component
             "data-menu-list": menu.dataset.menu
             @keydown: (e) => @_onMenuKeydown(e, menu.dataset.menu, @_menuItemsFor(menu))
             for item, idx in @_menuItemsFor(menu)
-              div role: "menuitem", tabindex: "-1"
+              div role: "menuitem", tabIndex: -1
                 $highlighted: (idx is highlightedIndex)?!
                 $value: item.dataset.item
                 @click: (=> @selectItem(menu.dataset.menu, item.dataset.item))

package/browser/components/multi-select.rip

@@ -191,7 +191,7 @@ export MultiSelect = component
         aria-multiselectable: "true"
         style: "position:fixed;margin:0;inset:auto"
         for item, idx in filtered
-          div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
+          div role: "option", tabIndex: -1, id: "#{_listId}-#{idx}"
             $value: @_val(item)
             $selected: @_isSelected(item)?!
             $highlighted: (idx is highlightedIndex)?!

package/browser/components/nav-menu.rip

@@ -98,12 +98,12 @@ export NavigationMenu = component
 
       for navItem, nIdx in _navItems
         if navItem.dataset.link?
-          a $nav-link: true, href: navItem.getAttribute('href') or '#', tabindex: "0"
+          a $nav-link: true, href: navItem.getAttribute('href') or '#', tabIndex: 0
             @keydown: @_onKeydown
             = navItem.textContent
         else if navItem.dataset.trigger?
           . style: "display:inline-block;position:relative"
-            button $nav-trigger: navItem.dataset.trigger, tabindex: "0"
+            button $nav-trigger: navItem.dataset.trigger, tabIndex: 0
               aria-expanded: activePanel is navItem.dataset.trigger
               $open: (activePanel is navItem.dataset.trigger)?!
               @click: (=> if activePanel is navItem.dataset.trigger then @_closePanel() else @_openPanel(navItem.dataset.trigger))
@@ -118,7 +118,7 @@ export NavigationMenu = component
                 @mouseenter: (=> @_cancelClose())
                 @mouseleave: (=> @_scheduleClose())
                 for link, lIdx in Array.from(navItem.querySelectorAll('a, [data-link]'))
-                  a href: link.getAttribute('href') or '#', tabindex: "0"
+                  a href: link.getAttribute('href') or '#', tabIndex: 0
                     @keydown: (e) =>
                       if e.key is 'Escape'
                         @_closePanel()

package/browser/components/number-field.rip

@@ -136,7 +136,7 @@ export NumberField = component
 
   render
     div role: "group", $disabled: @disabled?!, $readonly: @readOnly?!
-      button aria-label: "Decrease", tabindex: "-1"
+      button aria-label: "Decrease", tabIndex: -1
         $decrement: true
         aria-controls: _id
         disabled: @disabled or (@min? and @value <= @min)
@@ -155,7 +155,7 @@ export NumberField = component
         @keydown: @_onKeydown
         @blur: @_onBlur
 
-      button aria-label: "Increase", tabindex: "-1"
+      button aria-label: "Increase", tabIndex: -1
         $increment: true
         aria-controls: _id
         disabled: @disabled or (@max? and @value >= @max)

package/browser/components/select.rip

@@ -26,6 +26,7 @@ export Select = component
   typeaheadBuffer := ''
   typeaheadTimer := null
   suppressTriggerClick := false
+  suppressOptionClick := false
   _ready := false
   _popupGuard =! ARIA.popupGuard()
   _listId =! "sel-#{Math.random().toString(36).slice(2, 8)}"
@@ -94,6 +95,22 @@ export Select = component
     e.preventDefault()
     if open then @close(false, true) else @openMenu()
 
+  onOptionPointerup: (e:: any) ->
+    return unless open
+    return unless e.button is 0
+    return unless e.pointerType in ['mouse', 'pen']
+    idx = Number(e.currentTarget.dataset.idx)
+    suppressOptionClick = true
+    @selectIndex(idx)
+
+  onOptionClick: (e:: any) ->
+    idx = Number(e.currentTarget.dataset.idx)
+    if suppressOptionClick
+      suppressOptionClick = false
+      e.preventDefault()
+      return
+    @selectIndex(idx)
+
   _nextEnabled: (from, dir) ->
     len = options.length
     i = from
@@ -175,13 +192,15 @@ export Select = component
         @keydown: @onListKeydown
         for opt, idx in options
           div role: "option"
-            tabindex: "-1"
+            tabIndex: -1
+            data-idx: idx
             $value: @getOpt(opt)
             $highlighted: (idx is highlightedIndex)?!
             $selected: (@getOpt(opt) is String(@value))?!
             $disabled: @isDisabled(opt)?!
             aria-selected: @getOpt(opt) is String(@value)
             aria-disabled: @isDisabled(opt)?!
-            @click: (=> @selectIndex(idx))
+            @pointerup: @onOptionPointerup
+            @click: @onOptionClick
             @mouseenter: (=> highlightedIndex = idx)
             = opt.textContent

package/browser/components/toggle-group.rip

@@ -93,7 +93,7 @@ export ToggleGroup = component
         slot
 
       for item, idx in _items
-        button tabindex: "-1"
+        button tabIndex: -1
           aria-pressed: !!@_isPressed(item)
           $pressed: @_isPressed(item)?!
           $disabled: @disabled?!

package/email/README.md

@@ -53,3 +53,18 @@ Tailwind config: theme
 ```
 
 Use one shared Tailwind config per rendered email tree.
+
+## Runnable examples
+
+From `packages/ui/email`:
+
+```bash
+../../../bin/rip example-1.rip > example-1.html
+../../../bin/rip example-2.rip > example-2.html
+```
+
+- `example-1.rip` shows the plain curated-component workflow.
+- `example-2.rip` shows a richer newsletter layout using the most email-safe current path: curated components plus inline styles.
+- Both runnable examples load Inter from Google Fonts through the curated `Font` component's `google: 'Inter'` mode.
+
+For now, the curated component path is the best choice for emails you want to send broadly across clients. The Tailwind path is promising, but it is still better treated as an advanced or experimental workflow until more email-client hardening is done.

package/email/components.rip

@@ -55,29 +55,40 @@ export Font = component
   @fallbackFontFamily:: string | string[] := "Arial"
   @fontStyle:: string := "normal"
   @fontWeight:: number := 400
+  @google:: string := ""
+  @display:: string := "swap"
   @webFontUrl:: string := ""
   @webFontFormat:: string := "woff2"
 
+  _family ~= @google or @fontFamily
+  _googleFamily ~= encodeURIComponent(_family).replace(/%20/g, '+')
+  _googleSpec ~= if @fontStyle is 'italic'
+    "#{_googleFamily}:ital,wght@1,#{@fontWeight}"
+  else
+    "#{_googleFamily}:wght@#{@fontWeight}"
+  _googleUrl ~= if @google then "https://fonts.googleapis.com/css2?family=#{_googleSpec}&display=#{@display}" else ''
   _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(', ')
+  _fontRule ~= "* { font-family: '#{_family}', #{_fallbackStr}; }"
 
-  _css ~= """
+  _css ~= if @webFontUrl
+    """
     @font-face {
-      font-family: '#{@fontFamily}';
+      font-family: '#{_family}';
       font-style: #{@fontStyle};
       font-weight: #{@fontWeight};
       mso-font-alt: '#{_msoAlt}';
       #{_src}
     }
-    * {
-      font-family: '#{@fontFamily}', #{_fallbackStr};
-    }
+    #{_fontRule}
     """
+  else
+    ("@import url('#{_googleUrl}');\n" if _googleUrl else '') + _fontRule
 
   render
-    if @fontFamily
+    if _family
       style innerHTML: _css
 
 # ==============================================================================

package/email/email.rip

@@ -7,4 +7,8 @@
 # ==============================================================================
 
 export { toHTML, toText, renderEmail } from './render.rip'
-export { Email, Head, Body, Preview, Font, Container, Section, Row, Column, Heading, Text, Link, Image, Divider, Button, Markdown, CodeBlock, CodeInline, Tailwind } from './components.rip'
+export {
+  Email, Head, Body, Preview, Font,
+  Container, Section, Row, Column, Heading, Text, Link, Image, Divider, Button,
+  Markdown, CodeBlock, CodeInline, Tailwind
+} from './components.rip'

package/email/example-1.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html data-part="Email" lang="en" dir="ltr"><head data-part="Head"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta name="x-apple-disable-message-reformatting" /><style>@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  mso-font-alt: 'Arial, sans-serif';
+  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
+}
+* {
+  font-family: 'Inter', Arial, sans-serif;
+}</style><style>@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  mso-font-alt: 'Arial, sans-serif';
+  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
+}
+* {
+  font-family: 'Inter', Arial, sans-serif;
+}</style></head><body data-part="Body"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td style="background:#f6f9fc;padding:24px;font-family:'Inter',Arial,sans-serif"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-part="Preview" data-skip-in-text="true">Welcome to Rip, Alice!<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table style="max-width:37.5em;background:#ffffff;padding:32px;border:1px solid #e5e7eb" data-part="Container" align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr style="width:100%"><td><h1 style="font-size:28px;line-height:32px;margin:0 0 16px;color:#111827">Welcome, Alice</h1><p style="font-size:16px;line-height:24px;margin:16px 0;color:#4b5563" data-part="Text">Your account is ready. Click below to sign in.</p><a style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background:#111827;color:#ffffff;padding:12px 18px;border-radius:8px" data-part="Button" href="https://example.com/login" target="_blank"><span><!--[if mso]><i style="mso-font-width:450%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px">Sign in</span><span><!--[if mso]><i style="mso-font-width:450%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a><hr style="width:100%;border:none;border-top:1px solid #e5e7eb;margin:24px 0" data-part="Divider" /><p style="font-size:14px;line-height:22px;margin:16px 0;color:#6b7280" data-part="Text">If the button does not work, copy and paste this link: <a style="color:#0f766e;text-decoration:none" data-part="Link" href="https://example.com/login" target="_blank">https://example.com/login</a></p></td></tr></tbody></table></td></tr></tbody></table></body></html>

package/email/example-1.rip

@@ -0,0 +1,41 @@
+#
+# Example 1 — minimal curated email rendered to real HTML.
+#
+# Run from packages/ui/email:
+#   ../../../bin/rip example-1.rip > example-1.html
+#
+import { renderEmail, Email, Head, Body, Preview, Font, Container, Heading, Text, Button, Divider, Link } from './email.rip'
+
+export WelcomeEmail = component
+  @name:: string := "friend"
+  @loginUrl:: string := "https://example.com/login"
+
+  render
+    Email lang: 'en'
+      Head
+        Font google: 'Inter', fallbackFontFamily: 'Arial, sans-serif', fontWeight: 400
+        Font google: 'Inter', fallbackFontFamily: 'Arial, sans-serif', fontWeight: 700
+      Body style: "background:#f6f9fc;padding:24px;font-family:'Inter',Arial,sans-serif"
+        Preview text: "Welcome to Rip, #{@name}!"
+        Container style: 'background:#ffffff;padding:32px;border:1px solid #e5e7eb'
+          Heading as: 'h1', style: 'font-size:28px;line-height:32px;margin:0 0 16px;color:#111827'
+            "Welcome, #{@name}"
+
+          Text style: 'font-size:16px;line-height:24px;color:#4b5563'
+            "Your account is ready. Click below to sign in."
+
+          Button href: @loginUrl, style: 'background:#111827;color:#ffffff;padding:12px 18px;border-radius:8px'
+            'Sign in'
+
+          Divider style: 'margin:24px 0;border-top:1px solid #e5e7eb'
+
+          Text style: 'font-size:14px;line-height:22px;color:#6b7280'
+            = 'If the button does not work, copy and paste this link: '
+            Link href: @loginUrl, style: 'color:#0f766e'
+              = @loginUrl
+
+result = renderEmail WelcomeEmail,
+  name: 'Alice'
+  loginUrl: 'https://example.com/login'
+
+p result.html

package/email/example-2.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html data-part="Email" lang="en" dir="ltr"><head data-part="Head"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta name="x-apple-disable-message-reformatting" /><style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
+* { font-family: 'Inter', Arial, sans-serif; }</style><style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
+* { font-family: 'Inter', Arial, sans-serif; }</style></head><body data-part="Body"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td style="background:#f8fafc;padding:24px;font-family:'Inter',Arial,sans-serif"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-part="Preview" data-skip-in-text="true">Weekly product digest for Alice<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table style="max-width:37.5em;background:#ffffff;padding:32px;border:1px solid #e2e8f0" data-part="Container" align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr style="width:100%"><td><h1 style="font-size:30px;line-height:36px;margin:0 0 12px;color:#0f172a">Weekly digest</h1><p style="font-size:16px;line-height:24px;margin:16px 0;color:#475569" data-part="Text">Hi Alice, here are the product and customer updates worth reading this week.</p><hr style="width:100%;border:none;border-top:1px solid #e2e8f0;margin:24px 0" data-part="Divider" /><table style="padding:16px 0" data-part="Section" align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><h2 style="font-size:20px;line-height:28px;margin:0 0 8px;color:#111827">Activation is up 8%</h2><p style="font-size:15px;line-height:24px;margin:0;color:#475569" data-part="Text">Trial users are reaching their first successful workflow faster after the onboarding simplification.</p></td></tr></tbody></table><table style="padding:16px 0" data-part="Section" align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><h2 style="font-size:20px;line-height:28px;margin:0 0 8px;color:#111827">Search is much faster</h2><p style="font-size:15px;line-height:24px;margin:0;color:#475569" data-part="Text">The new query path reduced median lookup time and removed several long-tail slow requests.</p></td></tr></tbody></table><hr style="width:100%;border:none;border-top:1px solid #e2e8f0;margin:24px 0" data-part="Divider" /><table style="width:100%" data-part="Row" align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr style="width:100%"><td style="width:70%;vertical-align:top" data-part="Column"><p style="font-size:14px;line-height:22px;margin:0;color:#64748b" data-part="Text">Open the dashboard for the full breakdown and action items.</p></td><td style="width:30%;text-align:right;vertical-align:top" data-part="Column"><a style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background:#0f172a;color:#ffffff;padding:12px 16px;border-radius:8px" data-part="Button" href="https://example.com/dashboard" target="_blank"><span><!--[if mso]><i style="mso-font-width:400%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px">Open dashboard</span><span><!--[if mso]><i style="mso-font-width:400%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="font-size:13px;line-height:20px;margin:24px 0 0;color:#64748b" data-part="Text">Need help? Visit <a style="color:#0f766e;text-decoration:none" data-part="Link" href="https://example.com/help" target="_blank">the support center</a>.</p></td></tr></tbody></table></td></tr></tbody></table></body></html>

package/email/example-2.rip

@@ -0,0 +1,68 @@
+#
+# Example 2 — richer newsletter-style email using the safest current path:
+# curated email components + inline styles.
+#
+# Run from packages/ui/email:
+#   ../../../bin/rip example-2.rip > example-2.html
+#
+import { renderEmail, Email, Head, Body, Preview, Font, Container, Section, Row, Column, Heading, Text, Button, Divider, Link } from './email.rip'
+
+updates = [
+  {
+    title: 'Activation is up 8%'
+    body: 'Trial users are reaching their first successful workflow faster after the onboarding simplification.'
+  }
+  {
+    title: 'Search is much faster'
+    body: 'The new query path reduced median lookup time and removed several long-tail slow requests.'
+  }
+]
+
+export WeeklyDigestEmail = component
+  @dashboardUrl:: string := "https://example.com/dashboard"
+  @name:: string := "Alice"
+
+  render
+    Email lang: 'en'
+      Head
+        Font google: 'Inter', fallbackFontFamily: 'Arial, sans-serif', fontWeight: 400
+        Font google: 'Inter', fallbackFontFamily: 'Arial, sans-serif', fontWeight: 700
+      Body style: "background:#f8fafc;padding:24px;font-family:'Inter',Arial,sans-serif"
+        Preview text: "Weekly product digest for #{@name}"
+        Container style: 'background:#ffffff;padding:32px;border:1px solid #e2e8f0'
+          Heading as: 'h1', style: 'font-size:30px;line-height:36px;margin:0 0 12px;color:#0f172a'
+            "Weekly digest"
+
+          Text style: 'font-size:16px;line-height:24px;color:#475569'
+            "Hi #{@name}, here are the product and customer updates worth reading this week."
+
+          Divider style: 'margin:24px 0;border-top:1px solid #e2e8f0'
+
+          for update in updates
+            Section style: 'padding:16px 0'
+              Heading as: 'h2', style: 'font-size:20px;line-height:28px;margin:0 0 8px;color:#111827'
+                = update.title
+              Text style: 'font-size:15px;line-height:24px;color:#475569;margin:0'
+                = update.body
+
+          Divider style: 'margin:24px 0;border-top:1px solid #e2e8f0'
+
+          Row style: 'width:100%'
+            Column style: 'width:70%;vertical-align:top'
+              Text style: 'font-size:14px;line-height:22px;color:#64748b;margin:0'
+                'Open the dashboard for the full breakdown and action items.'
+            Column style: 'width:30%;text-align:right;vertical-align:top'
+              Button href: @dashboardUrl, style: 'background:#0f172a;color:#ffffff;padding:12px 16px;border-radius:8px'
+                'Open dashboard'
+
+          Text style: 'font-size:13px;line-height:20px;color:#64748b;margin:24px 0 0'
+            = 'Need help? Visit '
+            Link href: 'https://example.com/help', style: 'color:#0f766e'
+              'the support center'
+            = '.'
+
+result = renderEmail WeeklyDigestEmail,
+  dashboardUrl: 'https://example.com/dashboard'
+  name: 'Alice'
+
+p result.html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "description": "Unified UI system for Rip — browser widgets, email components, and Tailwind integration",
   "exports": {
@@ -22,13 +22,13 @@
     "ui.rip"
   ],
   "dependencies": {
-    "rip-lang": ">=3.13.122",
+    "rip-lang": ">=3.13.124",
     "tailwindcss": "^4",
     "css-tree": "^3"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.11.1",
-    "@rip-lang/server": "1.3.116",
+    "@rip-lang/server": "1.3.118",
     "playwright": "1.58.2"
   },
   "scripts": {