@rip-lang/ui 0.3.0 → 0.3.1

package/toast.rip

@@ -0,0 +1,88 @@
+# Toast — accessible headless toast notification system
+#
+# Managed toast system with stacking, timer pause on hover, and promise support.
+# Uses ARIA live region for screen reader announcements. Ships zero CSS.
+#
+# Usage:
+#   toasts := []
+#
+#   # Add a toast — reactive assignment is the API
+#   toasts = [...toasts, { message: "Saved!", type: "success" }]
+#
+#   # Dismiss — filter it out
+#   toasts = toasts.filter (t) -> t isnt target
+#
+#   # Clear all
+#   toasts = []
+#
+#   # In render block
+#   ToastViewport toasts <=> toasts
+
+export ToastViewport = component
+  @toasts := []
+  @placement := 'bottom-right'
+
+  onDismiss: (toast) ->
+    @toasts = @toasts.filter (t) -> t isnt toast
+    @emit 'dismiss', toast
+
+  render
+    div role: "region", aria-label: "Notifications", $placement: @placement
+      for toast in @toasts
+        Toast toast: toast, @dismiss: (e) => @onDismiss(e.detail)
+
+export Toast = component
+  @toast := {}
+
+  leaving := false
+  _timer := null
+  _remaining = 0
+  _started = 0
+
+  _startTimer: ->
+    dur = @toast.duration ?? 4000
+    return unless dur > 0
+    _remaining = dur
+    _started = Date.now()
+    _timer = setTimeout => @dismiss(), dur
+
+  _pauseTimer: ->
+    return unless _timer
+    clearTimeout _timer
+    _remaining -= Date.now() - _started
+    _timer = null
+
+  _resumeTimer: ->
+    return if _timer or _remaining <= 0
+    _started = Date.now()
+    _timer = setTimeout => @dismiss(), _remaining
+
+  mounted: -> @_startTimer()
+
+  beforeUnmount: ->
+    clearTimeout _timer if _timer
+
+  dismiss: ->
+    leaving = true
+    setTimeout =>
+      @emit 'dismiss', @toast
+    , 200
+
+  render
+    div role: (if @toast.type is 'error' then 'alert' else 'status'),
+      aria-live: (if @toast.type is 'error' then 'assertive' else 'polite'),
+      $type: @toast.type ?? 'info',
+      $leaving: leaving?!,
+      @mouseenter: @_pauseTimer,
+      @mouseleave: @_resumeTimer,
+      @focusin: @_pauseTimer,
+      @focusout: @_resumeTimer
+      .
+        if @toast.title
+          strong @toast.title
+        span @toast.message
+        if @toast.action
+          button @click: @toast.action.onClick
+            @toast.action.label or 'Action'
+        button aria-label: "Dismiss", @click: @dismiss
+          "✕"

package/toggle-group.rip

@@ -0,0 +1,78 @@
+# ToggleGroup — accessible headless toggle group
+#
+# A set of two-state buttons where one or more can be pressed.
+# Set @multiple to false for single-select (radio-like) behavior.
+# Ships zero CSS.
+#
+# Usage:
+#   ToggleGroup value <=> alignment
+#     div $value: "left", "Left"
+#     div $value: "center", "Center"
+#     div $value: "right", "Right"
+
+export ToggleGroup = component
+  @value := null
+  @disabled := false
+  @multiple := false
+  @orientation := 'horizontal'
+
+  _items ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-value]') or [])
+
+  _isPressed: (item) ->
+    val = item.dataset.value
+    if @multiple
+      Array.isArray(@value) and val in @value
+    else
+      val is @value
+
+  _toggle: (val) ->
+    return if @disabled
+    if @multiple
+      arr = if Array.isArray(@value) then [...@value] else []
+      if val in arr
+        arr = arr.filter (v) -> v isnt val
+      else
+        arr.push val
+      @value = arr
+    else
+      @value = if val is @value then null else val
+    @emit 'change', @value
+
+  onKeydown: (e) ->
+    opts = @_root?.querySelectorAll('[data-value]')
+    return unless opts?.length
+    focused = Array.from(opts).indexOf(document.activeElement)
+    return if focused < 0
+    len = opts.length
+    switch e.key
+      when 'ArrowRight', 'ArrowDown'
+        e.preventDefault()
+        opts[(focused + 1) %% len]?.focus()
+      when 'ArrowLeft', 'ArrowUp'
+        e.preventDefault()
+        opts[(focused - 1) %% len]?.focus()
+      when 'Home'
+        e.preventDefault()
+        opts[0]?.focus()
+      when 'End'
+        e.preventDefault()
+        opts[len - 1]?.focus()
+
+  render
+    div ref: "_root", role: "group", aria-orientation: @orientation
+      $orientation: @orientation
+      $disabled: @disabled?!
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      for item, idx in _items
+        button tabindex: (if idx is 0 then "0" else "-1")
+          aria-pressed: !!@_isPressed(item)
+          $pressed: @_isPressed(item)?!
+          $disabled: @disabled?!
+          $value: item.dataset.value
+          @click: (=> @_toggle(item.dataset.value))
+          item.textContent

package/toggle.rip

@@ -0,0 +1,24 @@
+# Toggle — accessible headless toggle button
+#
+# Stateful button that toggles pressed state on click.
+# Ships zero CSS.
+#
+# Usage:
+#   Toggle pressed <=> isBold
+#     "Bold"
+
+export Toggle = component
+  @pressed := false
+  @disabled := false
+
+  onClick: ->
+    return if @disabled
+    @pressed = not @pressed
+    @emit 'change', @pressed
+
+  render
+    button aria-pressed: !!@pressed
+      aria-disabled: @disabled?!
+      $pressed: @pressed?!
+      $disabled: @disabled?!
+      slot

package/toolbar.rip

@@ -0,0 +1,46 @@
+# Toolbar — accessible headless toolbar
+#
+# Groups interactive controls with roving tabindex keyboard navigation.
+# Arrow keys move focus between focusable children. Ships zero CSS.
+#
+# Usage:
+#   Toolbar
+#     Button @click: save, "Save"
+#     Button @click: undo, "Undo"
+#     Separator orientation: "vertical"
+#     Toggle pressed <=> isBold, "Bold"
+
+export Toolbar = component
+  @orientation := 'horizontal'
+  @label := ''
+
+  _getFocusable: ->
+    return [] unless @_root
+    Array.from(@_root.querySelectorAll('button, [tabindex], input, select, textarea')).filter (el) ->
+      not el.disabled and el.offsetParent isnt null
+
+  onKeydown: (e) ->
+    els = @_getFocusable()
+    return unless els.length
+    focused = els.indexOf(document.activeElement)
+    return if focused < 0
+    len = els.length
+    horiz = @orientation is 'horizontal'
+    switch e.key
+      when (if horiz then 'ArrowRight' else 'ArrowDown')
+        e.preventDefault()
+        els[(focused + 1) %% len]?.focus()
+      when (if horiz then 'ArrowLeft' else 'ArrowUp')
+        e.preventDefault()
+        els[(focused - 1) %% len]?.focus()
+      when 'Home'
+        e.preventDefault()
+        els[0]?.focus()
+      when 'End'
+        e.preventDefault()
+        els[len - 1]?.focus()
+
+  render
+    div role: "toolbar", aria-label: @label or undefined, aria-orientation: @orientation
+      $orientation: @orientation
+      slot

package/tooltip.rip

@@ -0,0 +1,115 @@
+# Tooltip — accessible headless tooltip with delay and positioning
+#
+# Shows on hover/focus with configurable delay. Uses aria-describedby.
+# Exposes $open, $entering, $exiting. Ships zero CSS.
+#
+# Usage:
+#   Tooltip text: "Helpful info", placement: "top"
+#     button "Hover me"
+
+lastCloseTime = 0
+GROUP_TIMEOUT = 400
+
+export Tooltip = component
+  @text := ''
+  @placement := 'top'
+  @delay := 300
+  @offset := 6
+  @hoverable := false
+
+  open := false
+  entering := false
+  exiting := false
+  _showTimer := null
+  _hideTimer := null
+  _id =! "tip-#{Math.random().toString(36).slice(2, 8)}"
+
+  show: ->
+    clearTimeout _hideTimer if _hideTimer
+    delay = if (Date.now() - lastCloseTime) < GROUP_TIMEOUT then 0 else @delay
+    _showTimer = setTimeout =>
+      open = true
+      entering = true
+      setTimeout =>
+        entering = false
+        @_position()
+      , 0
+    , delay
+
+  hide: ->
+    clearTimeout _showTimer if _showTimer
+    exiting = true
+    _hideTimer = setTimeout =>
+      open = false
+      exiting = false
+      lastCloseTime = Date.now()
+    , 150
+
+  _cancelHide: ->
+    clearTimeout _hideTimer if _hideTimer
+    exiting = false
+
+  _position: ->
+    return unless @_trigger and @_tip
+    tr = @_trigger.getBoundingClientRect()
+    fl = @_tip.getBoundingClientRect()
+    [side, align] = @placement.split('-')
+    align ?= 'center'
+    gap = @offset
+
+    x = switch side
+      when 'bottom', 'top'
+        switch align
+          when 'start' then tr.left
+          when 'end' then tr.right - fl.width
+          else tr.left + (tr.width - fl.width) / 2
+      when 'right' then tr.right + gap
+      when 'left' then tr.left - fl.width - gap
+
+    y = switch side
+      when 'bottom' then tr.bottom + gap
+      when 'top' then tr.top - fl.height - gap
+      when 'left', 'right'
+        switch align
+          when 'start' then tr.top
+          when 'end' then tr.bottom - fl.height
+          else tr.top + (tr.height - fl.height) / 2
+
+    if side is 'bottom' and y + fl.height > window.innerHeight
+      y = tr.top - fl.height - gap
+    if side is 'top' and y < 0
+      y = tr.bottom + gap
+    if side is 'right' and x + fl.width > window.innerWidth
+      x = tr.left - fl.width - gap
+    if side is 'left' and x < 0
+      x = tr.right + gap
+
+    x = Math.max(4, Math.min(x, window.innerWidth - fl.width - 4))
+
+    @_tip.style.position = 'fixed'
+    @_tip.style.left = "#{x}px"
+    @_tip.style.top = "#{y}px"
+
+  beforeUnmount: ->
+    clearTimeout _showTimer if _showTimer
+    clearTimeout _hideTimer if _hideTimer
+
+  render
+    .
+      div ref: "_trigger"
+        aria-describedby: open ? _id : undefined
+        @mouseenter: @show
+        @mouseleave: @hide
+        @focusin: @show
+        @focusout: @hide
+        slot
+
+      if open
+        div ref: "_tip", id: _id, role: "tooltip"
+          $open: true
+          $entering: entering?!
+          $exiting: exiting?!
+          $placement: @placement
+          @mouseenter: (=> @_cancelHide() if @hoverable)
+          @mouseleave: (=> @hide() if @hoverable)
+          @text

package/serve.rip

@@ -1,140 +0,0 @@
-# ==============================================================================
-# @rip-lang/ui/serve — Rip UI Server Middleware
-# ==============================================================================
-#
-# Serves the Rip UI runtime, auto-generated app bundles, and optional
-# SSE hot-reload.
-#
-# Usage:
-#   import { ripUI } from '@rip-lang/ui/serve'
-#   use ripUI app: '/demo', dir: dir, title: 'My App'
-#
-# Options:
-#   app:        string  — URL mount point (default: '')
-#   dir:        string  — app directory on disk (default: '.')
-#   components: string  — components subdirectory name (default: 'components')
-#   watch:      boolean — enable SSE hot-reload endpoint (default: false)
-#   debounce:   number  — ms to batch filesystem events (default: 250)
-#   state:      object  — initial app state passed via bundle
-#   title:      string  — document title
-#
-# ==============================================================================
-
-import { get } from '@rip-lang/api'
-import { watch as fsWatch } from 'node:fs'
-
-export ripUI = (opts = {}) ->
-  prefix        = opts.app or ''
-  appDir        = opts.dir or '.'
-  componentsDir = opts.components or "#{appDir}/components"
-  enableWatch   = opts.watch or false
-  debounceMs    = opts.debounce or 250
-  appState      = opts.state or null
-  appTitle      = opts.title or null
-  uiDir         = import.meta.dir
-
-  # Resolve compiler (rip.browser.js)
-  compilerPath = null
-  try
-    compilerPath = Bun.fileURLToPath(import.meta.resolve('rip-lang/docs/dist/rip.browser.js'))
-  catch
-    compilerPath = "#{uiDir}/../../docs/dist/rip.browser.js"
-
-  # ----------------------------------------------------------------------------
-  # Route: /rip/* — framework files (compiler + ui.rip), registered once
-  # ----------------------------------------------------------------------------
-
-  unless ripUI._registered
-    get "/rip/browser.js", (c) -> c.send compilerPath, 'application/javascript'
-    get "/rip/ui.rip", (c) -> c.send "#{uiDir}/ui.rip", 'text/plain; charset=UTF-8'
-    ripUI._registered = true
-
-  # ----------------------------------------------------------------------------
-  # Route: {prefix}/components/* — individual .rip component files (for hot-reload)
-  # Route: {prefix}/bundle  — app bundle (components + data as JSON)
-  # Route: {prefix}/watch   — SSE hot-reload stream
-  # ----------------------------------------------------------------------------
-
-  get "#{prefix}/components/*", (c) ->
-    name = c.req.path.slice("#{prefix}/components/".length)
-    c.send "#{componentsDir}/#{name}", 'text/plain; charset=UTF-8'
-
-  bundleCache = null
-  bundleDirty = true
-
-  # Invalidate bundle cache when components change
-  if enableWatch
-    fsWatch componentsDir, { recursive: true }, (event, filename) ->
-      bundleDirty = true if filename?.endsWith('.rip')
-
-  get "#{prefix}/bundle", (c) ->
-    if bundleDirty or not bundleCache
-      glob = new Bun.Glob("**/*.rip")
-      components = {}
-      paths = Array.from(glob.scanSync(componentsDir))
-      for path in paths
-        components["components/#{path}"] = Bun.file("#{componentsDir}/#{path}").text!
-
-      data = {}
-      data.title = appTitle if appTitle
-      data.watch = enableWatch
-      if appState
-        data[k] = v for k, v of appState
-
-      bundleCache = JSON.stringify({ components, data })
-      bundleDirty = false
-
-    new Response bundleCache, headers: { 'Content-Type': 'application/json' }
-
-  if enableWatch
-    get "#{prefix}/watch", (c) ->
-      encoder = new TextEncoder()
-      pending = new Set()
-      timer    = null
-      watcher  = null
-      heartbeat = null
-
-      cleanup = ->
-        watcher?.close()
-        clearTimeout(timer) if timer
-        clearInterval(heartbeat) if heartbeat
-        watcher = heartbeat = timer = null
-
-      new Response new ReadableStream(
-        start: (controller) ->
-          send = (event, data) ->
-            try
-              controller.enqueue encoder.encode("event: #{event}\ndata: #{JSON.stringify(data)}\n\n")
-            catch
-              cleanup()
-
-          send 'connected', { time: Date.now() }
-
-          heartbeat = setInterval ->
-            try
-              controller.enqueue encoder.encode(": heartbeat\n\n")
-            catch
-              cleanup()
-          , 5000
-
-          flush = ->
-            paths = Array.from(pending)
-            pending.clear()
-            timer = null
-            send('changed', { paths }) if paths.length > 0
-
-          watcher = fsWatch componentsDir, { recursive: true }, (event, filename) ->
-            return unless filename?.endsWith('.rip')
-            pending.add "components/#{filename}"
-            clearTimeout(timer) if timer
-            timer = setTimeout(flush, debounceMs)
-
-        cancel: -> cleanup()
-      ),
-        headers:
-          'Content-Type': 'text/event-stream'
-          'Cache-Control': 'no-cache'
-          'Connection': 'keep-alive'
-
-  # Return pass-through middleware
-  (c, next) -> next!()