@rip-lang/ui 0.3.67 → 0.4.2

package/email/dom.rip

@@ -0,0 +1,330 @@
+# ==============================================================================
+# DOM Shim — server-side DOM for rendering Rip components to email HTML
+# ==============================================================================
+
+# --- Node base class ---
+
+export class Node
+  constructor: ->
+    @parentNode = null
+    @childNodes = []
+    @_next = null
+    @_prev = null
+    @_innerHTML = null
+
+  appendChild: (child) ->
+    child.remove() if child.parentNode
+    if child instanceof Fragment
+      for c in [...child.childNodes]
+        @appendChild(c)
+      return child
+    last = @childNodes[@childNodes.length - 1]
+    last._next = child if last
+    child._prev = last or null
+    child._next = null
+    child.parentNode = this
+    @childNodes.push(child)
+    child
+
+  insertBefore: (child, ref) ->
+    return @appendChild(child) unless ref
+    child.remove() if child.parentNode
+    if child instanceof Fragment
+      kids = [...child.childNodes]
+      for c in kids
+        @insertBefore(c, ref)
+      return child
+    idx = @childNodes.indexOf(ref)
+    return @appendChild(child) if idx is -1
+    prev = ref._prev
+    prev._next = child if prev
+    child._prev = prev
+    child._next = ref
+    ref._prev = child
+    child.parentNode = this
+    @childNodes.splice(idx, 0, child)
+    child
+
+  removeChild: (child) ->
+    idx = @childNodes.indexOf(child)
+    return child if idx is -1
+    prev = child._prev
+    nxt = child._next
+    prev._next = nxt if prev
+    nxt._prev = prev if nxt
+    child._prev = null
+    child._next = null
+    child.parentNode = null
+    @childNodes.splice(idx, 1)
+    child
+
+  remove: ->
+    @parentNode?.removeChild(this)
+
+Object.defineProperty Node.prototype, 'nextSibling',
+  get: -> @_next
+  enumerable: true
+
+Object.defineProperty Node.prototype, 'previousSibling',
+  get: -> @_prev
+  enumerable: true
+
+Object.defineProperty Node.prototype, 'textContent',
+  get: ->
+    (@childNodes.map (c) ->
+      if c instanceof Text then c.data
+      else if c.textContent? then c.textContent
+      else ''
+    ).join('')
+  set: (val) ->
+    @childNodes = []
+    if val? and val isnt ''
+      t = Text.new(String(val))
+      t.parentNode = this
+      @childNodes.push(t)
+  enumerable: true
+
+# --- Element ---
+
+export class Element extends Node
+  constructor: (@tag) ->
+    super(@tag)
+    @attributes = new Map()
+    @style = {}
+
+  setAttribute: (key, val) ->
+    if key is 'style'
+      if typeof val is 'object' and val isnt null
+        Object.assign(@style, val)
+      else
+        @_parseStyleString(String(val))
+    else
+      @attributes.set(key, String(val))
+
+  removeAttribute: (key) -> @attributes.delete(key)
+
+  toggleAttribute: (key, force) ->
+    if force is undefined
+      if @attributes.has(key) then @attributes.delete(key) else @attributes.set(key, '')
+    else
+      if force then @attributes.set(key, '') else @attributes.delete(key)
+
+  addEventListener: -> undefined
+  removeEventListener: -> undefined
+  dispatchEvent: -> undefined
+
+  _parseStyleString: (str) ->
+    for raw in str.split(';')
+      s = raw.trim()
+      continue unless s
+      colon = s.indexOf(':')
+      continue if colon is -1
+      prop = s.slice(0, colon).trim()
+      val = s.slice(colon + 1).trim()
+      camel = prop.replace /-([a-z])/g, (_, c) -> c.toUpperCase()
+      @style[camel] = val
+
+Object.defineProperty Element.prototype, 'id',
+  get: -> @attributes.get('id') ?? ''
+  set: (v) -> @attributes.set('id', v)
+  enumerable: true
+
+Object.defineProperty Element.prototype, 'className',
+  get: -> @attributes.get('class') ?? ''
+  set: (v) -> if v then @attributes.set('class', v) else @attributes.delete('class')
+  enumerable: true
+
+Object.defineProperty Element.prototype, 'innerHTML',
+  get: -> @_innerHTML
+  set: (v) -> @_innerHTML = v
+  enumerable: true
+
+Object.defineProperty Element.prototype, 'innerText',
+  get: -> @textContent
+  set: (v) -> @textContent = v
+  enumerable: true
+
+Object.defineProperty Element.prototype, 'value',
+  get: -> @attributes.get('value')
+  set: (v) -> @attributes.set('value', v)
+  enumerable: true
+
+Object.defineProperty Element.prototype, 'checked',
+  get: -> @attributes.has('checked')
+  set: (v) -> if v then @attributes.set('checked', '') else @attributes.delete('checked')
+  enumerable: true
+
+# --- Text ---
+
+export class Text extends Node
+  constructor: (@data = '') ->
+    super(@data)
+
+# --- Comment ---
+
+export class Comment extends Node
+  constructor: (@data = '') ->
+    super(@data)
+
+# --- Fragment ---
+
+export class Fragment extends Node
+  constructor: (@_fragId = 0) ->
+    super(@_fragId)
+
+# --- Document ---
+
+export class Document
+  createElement: (tag) -> Element.new(tag)
+  createElementNS: (ns, tag) -> Element.new(tag)
+  createTextNode: (text) -> Text.new(String(text))
+  createComment: (text) -> Comment.new(String(text))
+  createDocumentFragment: -> Fragment.new()
+
+# ==============================================================================
+# Serializer
+# ==============================================================================
+
+VOID_TAGS =! new Set(%w[area base br col embed hr img input link meta source track wbr])
+
+escapeHtml = (str) ->
+  String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+
+escapeAttr = (str) ->
+  String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+
+_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(';')
+
+export serialize = (node) ->
+  if node instanceof Text
+    return escapeHtml(node.data)
+
+  if node instanceof Comment
+    d = node.data
+    return '' if d is '' or d is 'if' or d is 'for' or d is 'unknown'
+    return "<!--#{d}-->"
+
+  if node instanceof Fragment
+    return serializeChildren(node)
+
+  if node instanceof Element
+    return '' if node.tag is '__root'
+    tag = node.tag
+
+    if node._innerHTML?
+      attrs = _serializeAttrs(node)
+      return "<#{tag}#{attrs}>#{node._innerHTML}</#{tag}>"
+
+    attrs = _serializeAttrs(node)
+
+    if VOID_TAGS.has(tag)
+      return "<#{tag}#{attrs} />"
+
+    inner = serializeChildren(node)
+    return "<#{tag}#{attrs}>#{inner}</#{tag}>"
+
+  ''
+
+_serializeAttrs = (el) ->
+  parts = []
+
+  parts.push " id=\"#{escapeAttr(el.id)}\"" if el.attributes.has('id')
+
+  cls = el.attributes.get('class')
+  parts.push " class=\"#{escapeAttr(cls)}\"" if cls
+
+  styleStr = _styleToString(el.style)
+  parts.push " style=\"#{escapeAttr(styleStr)}\"" if styleStr
+
+  for [key, val] in el.attributes
+    continue if key is 'id' or key is 'class'
+    if val is ''
+      parts.push " #{key}"
+    else
+      parts.push " #{key}=\"#{escapeAttr(val)}\""
+
+  parts.join('')
+
+export serializeChildren = (node) ->
+  (node.childNodes.map (c) -> serialize(c)).join('')
+
+# ==============================================================================
+# Plain text
+# ==============================================================================
+
+BLOCK_TAGS =! new Set(%w[p div td li dt dd blockquote figcaption address])
+HEADING_TAGS =! new Set(%w[h1 h2 h3 h4 h5 h6])
+SKIP_TAGS =! new Set(%w[style script head])
+
+export toPlainText = (node) ->
+  lines = []
+  _walkText(node, lines)
+  lines.join('').replace(/\n{3,}/g, '\n\n').trim()
+
+_walkText = (node, lines) ->
+  if node instanceof Text
+    lines.push(node.data)
+    return
+
+  return if node instanceof Comment
+
+  if node instanceof Fragment
+    _walkText(c, lines) for c in node.childNodes
+    return
+
+  return unless node instanceof Element
+
+  tag = node.tag
+  return if SKIP_TAGS.has(tag)
+  return if node.attributes.get('data-skip-in-text') is 'true'
+  return if node._innerHTML?
+
+  if tag is 'br'
+    lines.push('\n')
+    return
+
+  if tag is 'hr'
+    lines.push('\n---\n')
+    return
+
+  if tag is 'img'
+    alt = node.attributes.get('alt')
+    lines.push(alt) if alt
+    return
+
+  if tag is 'a'
+    href = node.attributes.get('href')
+    text = _textContent(node)
+    if href and text and href isnt text
+      lines.push("#{text} (#{href})")
+    else
+      lines.push(text)
+    return
+
+  isHeading = HEADING_TAGS.has(tag)
+  isBlock = BLOCK_TAGS.has(tag) or isHeading
+
+  lines.push('\n\n') if isHeading
+  lines.push('\n') if isBlock and not isHeading
+
+  _walkText(c, lines) for c in node.childNodes
+
+  lines.push('\n\n') if isHeading
+  lines.push('\n') if isBlock and not isHeading
+
+_textContent = (node) ->
+  return node.data if node instanceof Text
+  return '' if node instanceof Comment
+  (node.childNodes.map (c) -> _textContent(c)).join('')

package/email/email.rip

@@ -0,0 +1,10 @@
+# ==============================================================================
+# @rip-lang/ui/email — curated email components for Rip
+#
+# Usage:
+#   import { toHTML, Email, Head, Body, Container, Heading, Text, Button } from '@rip-lang/ui/email'
+#   html = toHTML(MyEmail, name: "Alice")
+# ==============================================================================
+
+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'

package/email/render.rip

@@ -0,0 +1,82 @@
+# ==============================================================================
+# Render — instantiate a Rip component and produce email HTML + plain text
+#
+# Usage:
+#   import { toHTML, toText, renderEmail } from '@rip-lang/ui/email'
+#
+#   html = toHTML(MyEmail, name: "Alice")
+#   text = toText(MyEmail, name: "Alice")
+#   { html, text } = renderEmail(MyEmail, name: "Alice")
+#
+# Notes:
+# - rendering is synchronous and swaps in a temporary global DOM shim
+# - do not add awaits or async work inside this render path
+# - custom Tailwind configs must be prepared ahead of time via
+#   `@rip-lang/ui/tailwind.prepareConfig(config)` before sync rendering
+# ==============================================================================
+
+import { Node, Document, serializeChildren, toPlainText } from './dom.rip'
+import { inlineEmailTree, takeEmailTailwindRoots, configKey } from '../tailwind/tailwind.rip'
+
+XHTML_DOCTYPE =! '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
+
+_resolveTailwindConfig = (entries = []) ->
+  configs = []
+  for entry in entries
+    continue unless entry?.config?
+    configs.push(entry.config)
+
+  return {} unless configs.length
+
+  first = configs[0]
+  firstKey = configKey(first)
+
+  for config, idx in configs
+    continue unless idx
+    continue if configKey(config) is firstKey
+    raise 'Tailwind: multiple different Tailwind configs were registered during one email render. Use a single shared config per render and call prepareConfig(config) before synchronous rendering.'
+
+  first
+
+_renderComponent = (ComponentClass, props = {}) ->
+  prevDoc  = globalThis.document
+  prevNode = globalThis.Node
+  prevSVG  = globalThis.SVGElement
+
+  doc = Document.new()
+  globalThis.document = doc
+  globalThis.Node = Node
+  globalThis.SVGElement = class SVGStub extends Node
+
+  try
+    root = doc.createElement('__root')
+    instance = ComponentClass.new(props)
+    el = instance._create()
+    root.appendChild(el)
+    instance._setup() if instance._setup
+    instance.mounted() if instance.mounted
+
+    entries = takeEmailTailwindRoots()
+    if entries.length
+      result = inlineEmailTree(root, _resolveTailwindConfig(entries))
+      warn "Tailwind: unsupported classes ignored: #{result.unsupported.join(' ')}" if result.unsupported?.length
+
+    root
+  finally
+    globalThis.document = prevDoc
+    globalThis.Node = prevNode
+    globalThis.SVGElement = prevSVG
+
+export renderEmail = (ComponentClass, props = {}) ->
+  root = _renderComponent(ComponentClass, props)
+  html = serializeChildren(root)
+  text = toPlainText(root)
+  { html: "#{XHTML_DOCTYPE}#{html}", text }
+
+export toHTML = (ComponentClass, props = {}) ->
+  root = _renderComponent(ComponentClass, props)
+  "#{XHTML_DOCTYPE}#{serializeChildren(root)}"
+
+export toText = (ComponentClass, props = {}) ->
+  root = _renderComponent(ComponentClass, props)
+  toPlainText(root)

package/package.json

@@ -1,51 +1,41 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.3.67",
-  "author": "Steve Shreeve <steve.shreeve@gmail.com>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/shreeve/rip-lang.git",
-    "directory": "packages/ui"
-  },
-  "bugs": {
-    "url": "https://github.com/shreeve/rip-lang/issues"
+  "version": "0.4.2",
+  "type": "module",
+  "description": "Unified UI system for Rip — browser widgets, email components, and Tailwind integration",
+  "exports": {
+    ".": "./ui.rip",
+    "./browser": "./browser/browser.rip",
+    "./browser/*": "./browser/components/*.rip",
+    "./email": "./email/email.rip",
+    "./email/*": "./email/*.rip",
+    "./shared": "./shared/styles.rip",
+    "./tailwind": "./tailwind/tailwind.rip"
   },
-  "description": "Headless, accessible UI components written in Rip — zero CSS, zero dependencies",
   "files": [
-    "components/",
-    "README.md"
+    "browser/",
+    "email/",
+    "shared/",
+    "tailwind/",
+    "README.md",
+    "AGENTS.md",
+    "ui.rip"
   ],
-  "homepage": "https://github.com/shreeve/rip-lang/tree/main/packages/ui#readme",
-  "keywords": [
-    "ui",
-    "headless",
-    "accessible",
-    "components",
-    "widgets",
-    "aria",
-    "wai-aria",
-    "select",
-    "dialog",
-    "grid",
-    "combobox",
-    "tabs",
-    "rip",
-    "rip-lang"
-  ],
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "test:e2e": "bunx playwright test -c playwright.config.mjs",
-    "test:e2e:chromium": "bunx playwright test -c playwright.config.mjs --project=chromium",
-    "test:e2e:headed": "bunx playwright test -c playwright.config.mjs --headed --project=chromium",
-    "test:e2e:axe": "UI_AXE=1 bunx playwright test -c playwright.config.mjs --project=chromium"
-  },
   "dependencies": {
-    "rip-lang": ">=3.13.120"
+    "rip-lang": ">=3.13.122",
+    "tailwindcss": "^4",
+    "css-tree": "^3"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.11.1",
-    "@rip-lang/server": "1.3.109",
+    "@rip-lang/server": "1.3.116",
     "playwright": "1.58.2"
+  },
+  "scripts": {
+    "bench:email": "../../bin/rip email/benchmarks/benchmark.rip",
+    "test:e2e": "bunx playwright test -c browser/playwright.config.mjs",
+    "test:e2e:chromium": "bunx playwright test -c browser/playwright.config.mjs --project=chromium",
+    "test:e2e:headed": "bunx playwright test -c browser/playwright.config.mjs --headed --project=chromium",
+    "test:e2e:axe": "UI_AXE=1 bunx playwright test -c browser/playwright.config.mjs --project=chromium"
   }
 }

package/shared/README.md

@@ -0,0 +1,3 @@
+# @rip-lang/ui/shared
+
+Cross-domain style and utility helpers shared by browser and email domains.

package/shared/styles.rip

@@ -0,0 +1,17 @@
+# Shared style helpers for @rip-lang/ui
+
+export joinStyles = (...styles) ->
+  (s for s in styles when s).join(';')
+
+export withMargin = (opts = {}) ->
+  parts = []
+  parts.push("margin:#{opts.m}") if opts.m?
+  parts.push("margin-left:#{opts.mx}") if opts.mx?
+  parts.push("margin-right:#{opts.mx}") if opts.mx?
+  parts.push("margin-top:#{opts.my}") if opts.my?
+  parts.push("margin-bottom:#{opts.my}") if opts.my?
+  parts.push("margin-top:#{opts.mt}") if opts.mt?
+  parts.push("margin-right:#{opts.mr}") if opts.mr?
+  parts.push("margin-bottom:#{opts.mb}") if opts.mb?
+  parts.push("margin-left:#{opts.ml}") if opts.ml?
+  parts.join(';')

package/tailwind/AGENTS.md

@@ -0,0 +1,3 @@
+# Tailwind Domain Guide
+
+All Tailwind-specific logic lives here. Browser and email domains consume this API but must not import `tailwindcss` or `css-tree` directly.

package/tailwind/README.md

@@ -0,0 +1,27 @@
+# @rip-lang/ui/tailwind
+
+Real Tailwind integration for the unified UI package.
+
+Exports:
+- `compile(classes, config?)`
+- `prepareConfig(config?)`
+- `inlineEmailTree(rootNode, config?)`
+- `generateBrowserCss(classes, config?)`
+
+This is the only domain that talks directly to `tailwindcss` and `css-tree`.
+
+## Prepared configs
+
+The default config works out of the box. Custom configs need a one-time async preparation step before they can be used from the synchronous unified-ui render path:
+
+```coffee
+import { prepareConfig } from '@rip-lang/ui/tailwind'
+
+await prepareConfig
+  theme:
+    extend:
+      colors:
+        brand: '#0f172a'
+```
+
+After preparation, pass the same config to `compile()`, `generateBrowserCss()`, or the email `Tailwind` component.

package/tailwind/engine.js

@@ -0,0 +1,107 @@
+import { compile as twCompile } from 'tailwindcss'
+import { parse } from 'css-tree'
+import { readFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const tailwindDir = dirname(fileURLToPath(import.meta.resolve('tailwindcss/package.json')))
+const tailwindCss = {
+  'tailwindcss': readFileSync(join(tailwindDir, 'index.css'), 'utf8'),
+  'tailwindcss/preflight.css': readFileSync(join(tailwindDir, 'preflight.css'), 'utf8'),
+  'tailwindcss/theme.css': readFileSync(join(tailwindDir, 'theme.css'), 'utf8'),
+  'tailwindcss/utilities.css': readFileSync(join(tailwindDir, 'utilities.css'), 'utf8'),
+}
+
+function baseCssForConfig(config = {}) {
+  const baseCss = `
+@layer theme, base, components, utilities;
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@config;
+`
+  return { baseCss, config }
+}
+
+async function createCompiler(config = {}) {
+  const { baseCss } = baseCssForConfig(config)
+  return twCompile(baseCss, {
+    async loadModule(id, base, resourceHint) {
+      if (resourceHint === 'config') return { path: id, base, module: config }
+      throw new Error(`Unsupported Tailwind resource hint: ${resourceHint}`)
+    },
+    polyfills: 0,
+    async loadStylesheet(id, base) {
+      const content = tailwindCss[id]
+      if (!content) throw new Error(`Unsupported Tailwind stylesheet: ${id}`)
+      return { base, path: id, content }
+    },
+  })
+}
+
+function stableSerialize(value, seen = new WeakSet()) {
+  if (value === null) return 'null'
+
+  const kind = typeof value
+  if (kind === 'string') return JSON.stringify(value)
+  if (kind === 'number' || kind === 'boolean' || kind === 'bigint') return String(value)
+  if (kind === 'undefined') return 'undefined'
+  if (kind === 'symbol') return value.toString()
+  if (kind === 'function') return `[Function:${value.toString()}]`
+
+  if (Array.isArray(value)) {
+    return `[${value.map((entry) => stableSerialize(entry, seen)).join(',')}]`
+  }
+
+  if (kind === 'object') {
+    if (seen.has(value)) return '[Circular]'
+    seen.add(value)
+
+    const entries = Object.keys(value)
+      .sort()
+      .map((key) => `${JSON.stringify(key)}:${stableSerialize(value[key], seen)}`)
+
+    seen.delete(value)
+    return `{${entries.join(',')}}`
+  }
+
+  return String(value)
+}
+
+export function configCacheKey(config = {}) {
+  return stableSerialize(config)
+}
+
+const compilerCache = new Map()
+const compilerPromises = new Map()
+const defaultCompiler = await createCompiler({})
+compilerCache.set(configCacheKey({}), defaultCompiler)
+
+export async function prepareConfig(config = {}) {
+  const key = configCacheKey(config)
+  if (compilerCache.has(key)) return compilerCache.get(key)
+  if (compilerPromises.has(key)) return compilerPromises.get(key)
+
+  const promise = createCompiler(config).then((compiler) => {
+    compilerCache.set(key, compiler)
+    compilerPromises.delete(key)
+    return compiler
+  })
+
+  compilerPromises.set(key, promise)
+  return promise
+}
+
+export function compile(classes = [], config = {}) {
+  const key = configCacheKey(config)
+  const compiler = compilerCache.get(key)
+
+  if (!compiler) {
+    throw new Error(
+      'Tailwind config is not prepared for synchronous compile(). Call await prepareConfig(config) before rendering themed email or browser CSS in the synchronous unified-ui path.',
+    )
+  }
+
+  const css = compiler.build(classes)
+  return { css, styleSheet: parse(css), rulesPerClass: new Map() }
+}