rip-lang 3.13.65 → 3.13.67

package/docs/ui/select.rip

@@ -0,0 +1,184 @@
+# Select — accessible headless select widget
+#
+# Keyboard: ArrowDown/Up to navigate, Enter/Space to select, Escape to close,
+#           Home/End for first/last, typeahead to jump by character.
+#
+# Exposes $open and $placeholder on button, $highlighted and $selected on options.
+# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
+#
+# Usage:
+#   Select value <=> selectedValue, @change: (=> handle(event.detail))
+#     option value: "a", "Option A"
+#     option value: "b", "Option B"
+
+export Select = component
+  @value := null
+  @placeholder := 'Select...'
+  @disabled := false
+
+  open := false
+  highlightedIndex := -1
+  typeaheadBuffer := ''
+  typeaheadTimer := null
+  _listId =! "sel-#{Math.random().toString(36).slice(2, 8)}"
+
+  getOpt: (o) -> o.dataset.value ?? o.value
+
+  options ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-value], option[value]') or [])
+
+  selectedLabel ~=
+    if @value?
+      el = options.find (o) -> @getOpt(o) is String(@value)
+      el?.textContent?.trim() or String(@value)
+    else
+      @placeholder
+
+  toggle: ->
+    return if @disabled
+    if open then @close() else @openMenu()
+
+  openMenu: ->
+    open = true
+    highlightedIndex = Math.max(0, options.findIndex (o) -> @getOpt(o) is String(@value))
+    requestAnimationFrame =>
+      @_position()
+      @_focusHighlighted()
+
+  close: ->
+    open = false
+    highlightedIndex = -1
+    @_trigger?.focus()
+
+  isDisabled: (opt) -> opt?.hasAttribute?('data-disabled') or opt?.disabled
+
+  selectIndex: (idx) ->
+    opt = options[idx]
+    return unless opt
+    return if @isDisabled(opt)
+    @value = @getOpt(opt)
+    @emit 'change', @value
+    @close()
+
+  onTriggerKeydown: (e) ->
+    return if @disabled
+    switch e.key
+      when 'ArrowDown', 'ArrowUp', 'Enter', ' '
+        e.preventDefault()
+        @openMenu()
+      when 'Escape'
+        e.preventDefault()
+        @close() if open
+
+  _nextEnabled: (from, dir) ->
+    len = options.length
+    i = from
+    loop len
+      i = (i + dir) %% len
+      return i unless @isDisabled(options[i])
+    from
+
+  onListKeydown: (e) ->
+    len = options.length
+    return unless len
+
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        highlightedIndex = @_nextEnabled(highlightedIndex, 1)
+        @_focusHighlighted()
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = @_nextEnabled(highlightedIndex, -1)
+        @_focusHighlighted()
+      when 'Home'
+        e.preventDefault()
+        highlightedIndex = 0
+        @_focusHighlighted()
+      when 'End'
+        e.preventDefault()
+        highlightedIndex = len - 1
+        @_focusHighlighted()
+      when 'Enter', ' '
+        e.preventDefault()
+        @selectIndex(highlightedIndex)
+      when 'Escape'
+        e.preventDefault()
+        @close()
+      when 'Tab'
+        @close()
+      else
+        if e.key.length is 1
+          @_typeahead(e.key)
+
+  _typeahead: (char) ->
+    clearTimeout typeaheadTimer if typeaheadTimer
+    typeaheadBuffer += char.toLowerCase()
+    typeaheadTimer = setTimeout (-> typeaheadBuffer = ''), 500
+    idx = options.findIndex (o) -> o.textContent.trim().toLowerCase().startsWith(typeaheadBuffer)
+    if idx >= 0
+      highlightedIndex = idx
+      @_focusHighlighted()
+
+  _focusHighlighted: ->
+    opt = options[highlightedIndex]
+    opt?.focus()
+
+  _position: ->
+    return unless @_trigger and @_list
+    tr = @_trigger.getBoundingClientRect()
+    @_list.style.position = 'fixed'
+    @_list.style.left = "#{tr.left}px"
+    @_list.style.top = "#{tr.bottom + 4}px"
+    @_list.style.minWidth = "#{tr.width}px"
+    fl = @_list.getBoundingClientRect()
+    if fl.bottom > window.innerHeight
+      @_list.style.top = "#{tr.top - fl.height - 4}px"
+    @_list.style.visibility = 'visible'
+
+  ~>
+    if open
+      onDown = (e) =>
+        unless @_trigger?.contains(e.target) or @_list?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    .
+
+      # Button
+      button ref: "_trigger", role: "combobox"
+        aria-expanded: !!open
+        aria-haspopup: "listbox"
+        aria-controls: open ? _listId : undefined
+        $open: open?!
+        $placeholder: (!@value)?!
+        $disabled: @disabled?!
+        disabled: @disabled
+        @click: @toggle
+        @keydown: @onTriggerKeydown
+        span selectedLabel
+
+      # Hidden slot for reading option definitions
+      . ref: "_slot", style: "display:none"
+        slot
+
+      # Dropdown listbox
+      if open
+        div ref: "_list", id: _listId, role: "listbox", style: "position:fixed;visibility:hidden"
+          $open: true
+          @keydown: @onListKeydown
+          for opt, idx in options
+            div role: "option"
+              tabindex: "-1"
+              $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))
+              @mouseenter: (=> highlightedIndex = idx)
+              = opt.textContent

package/docs/ui/separator.rip

@@ -0,0 +1,17 @@
+# Separator — accessible headless visual divider
+#
+# Decorative or semantic separator between content sections.
+# Ships zero CSS.
+#
+# Usage:
+#   Separator
+#   Separator orientation: "vertical"
+
+export Separator = component
+  @orientation := 'horizontal'
+  @decorative := true
+
+  render
+    div role: (if @decorative then 'none' else 'separator')
+      aria-orientation: (if @orientation is 'vertical' then 'vertical' else undefined)
+      $orientation: @orientation

package/docs/ui/slider.rip

@@ -0,0 +1,165 @@
+# Slider — accessible headless range slider
+#
+# Supports single and range (multi-thumb) modes, pointer drag with capture,
+# keyboard stepping, and CSS custom properties for thumb/indicator positioning.
+# Ships zero CSS.
+#
+# Usage:
+#   Slider value <=> volume
+#   Slider value <=> volume, min: 0, max: 100, step: 5
+#   Slider value <=> range, min: 0, max: 100   (pass array for range mode)
+
+export Slider = component
+  @value := 0
+  @min := 0
+  @max := 100
+  @step := 1
+  @largeStep := 10
+  @orientation := 'horizontal'
+  @disabled := false
+  @name := null
+  @valueText := null
+
+  dragging := false
+  activeThumb := -1
+  _thumbOffset = 0
+  _id =! "sld-#{Math.random().toString(36).slice(2, 8)}"
+
+  isRange ~= Array.isArray(@value)
+  values  ~= if isRange then @value else [@value]
+  horiz   ~= @orientation is 'horizontal'
+
+  _clamp: (v) -> Math.min(@max, Math.max(@min, v))
+
+  _roundToStep: (v) ->
+    rounded = Math.round((v - @min) / @step) * @step + @min
+    precision = String(@step).split('.')[1]?.length or 0
+    parseFloat rounded.toFixed(precision)
+
+  _percentOf: (v) -> ((@_clamp(v) - @min) / (@max - @min)) * 100
+
+  _valueFromPointer: (e) ->
+    rect = @_track.getBoundingClientRect()
+    if horiz
+      ratio = (e.clientX - _thumbOffset - rect.left) / rect.width
+    else
+      ratio = 1 - (e.clientY - _thumbOffset - rect.top) / rect.height
+    ratio = Math.max(0, Math.min(1, ratio))
+    @_roundToStep(@min + ratio * (@max - @min))
+
+  _closestThumb: (e) ->
+    return 0 unless isRange
+    rect = @_track.getBoundingClientRect()
+    pos = if horiz then (e.clientX - rect.left) / rect.width else 1 - (e.clientY - rect.top) / rect.height
+    best = 0
+    bestDist = Infinity
+    for v, i in values
+      pct = @_percentOf(v) / 100
+      dist = Math.abs(pos - pct)
+      if dist < bestDist
+        bestDist = dist
+        best = i
+    best
+
+  _setValue: (idx, val) ->
+    val = @_clamp(@_roundToStep(val))
+    if isRange
+      arr = [...values]
+      arr[idx] = val
+      arr.sort (a, b) -> a - b
+      @value = arr
+    else
+      @value = val
+    @emit 'input', @value
+
+  _commitValue: ->
+    @emit 'change', @value
+
+  _onPointerDown: (e) ->
+    return if @disabled or e.button isnt 0
+    e.preventDefault()
+    idx = @_closestThumb(e)
+    activeThumb = idx
+    dragging = true
+
+    thumb = @_track.querySelectorAll('[data-thumb]')[idx]
+    if thumb
+      tr = thumb.getBoundingClientRect()
+      if horiz
+        _thumbOffset = e.clientX - (tr.left + tr.width / 2)
+      else
+        _thumbOffset = e.clientY - (tr.top + tr.height / 2)
+    else
+      _thumbOffset = 0
+
+    newVal = @_valueFromPointer(e)
+    @_setValue idx, newVal
+
+    @_track.setPointerCapture e.pointerId
+
+  _onPointerMove: (e) ->
+    return unless dragging
+    newVal = @_valueFromPointer(e)
+    @_setValue activeThumb, newVal
+
+  _onPointerUp: (e) ->
+    return unless dragging
+    dragging = false
+    activeThumb = -1
+    _thumbOffset = 0
+    @_track.releasePointerCapture e.pointerId
+    @_commitValue()
+
+  _onKeydown: (e, idx) ->
+    s = if e.shiftKey then @largeStep else @step
+    v = values[idx]
+    newVal = switch e.key
+      when 'ArrowRight', 'ArrowUp' then v + s
+      when 'ArrowLeft', 'ArrowDown' then v - s
+      when 'PageUp' then v + @largeStep
+      when 'PageDown' then v - @largeStep
+      when 'Home' then @min
+      when 'End' then @max
+      else null
+    if newVal?
+      e.preventDefault()
+      @_setValue idx, newVal
+      @_commitValue()
+
+  render
+    div role: "group", $orientation: @orientation, $disabled: @disabled?!, $dragging: dragging?!
+      style: "--slider-min: #{@min}; --slider-max: #{@max}"
+
+      # Track
+      div ref: "_track", $track: true
+        style: "position:relative"
+        @pointerdown: @_onPointerDown
+        @pointermove: @_onPointerMove
+        @pointerup: @_onPointerUp
+
+        # Indicator (filled portion)
+        if isRange
+          div $indicator: true
+            style: "position:absolute; #{if horiz then 'left' else 'bottom'}: #{@_percentOf(values[0])}%; #{if horiz then 'width' else 'height'}: #{@_percentOf(values[1]) - @_percentOf(values[0])}%"
+        else
+          div $indicator: true
+            style: "position:absolute; #{if horiz then 'left: 0; width' else 'bottom: 0; height'}: #{@_percentOf(values[0])}%"
+
+        # Thumbs
+        for val, idx in values
+          div $thumb: true, $active: (idx is activeThumb)?!
+            style: "position:absolute; #{if horiz then 'left' else 'bottom'}: #{@_percentOf(val)}%; z-index: #{if idx is activeThumb then 2 else 1}"
+            @keydown: (e) => @_onKeydown(e, idx)
+            input type: "range", style: "position:absolute;opacity:0;width:0;height:0;pointer-events:none"
+              id: "#{_id}-thumb-#{idx}"
+              name: @name?!
+              min: @min, max: @max, step: @step
+              value: val
+              aria-valuenow: val
+              aria-valuemin: @min
+              aria-valuemax: @max
+              aria-valuetext: if @valueText then @valueText(val, idx) else undefined
+              aria-orientation: @orientation
+              aria-disabled: @disabled?!
+
+      slot

package/docs/ui/tabs.rip

@@ -0,0 +1,124 @@
+# Tabs — accessible headless tab widget
+#
+# Keyboard: ArrowLeft/Right (horizontal) or ArrowUp/Down (vertical) to navigate,
+# Home/End for first/last. Manages focus via roving tabindex.
+# Exposes $active on tabs and panels. Ships zero CSS.
+#
+# Props:
+#   active       — currently active tab id (two-way bindable)
+#   orientation  — 'horizontal' (default) or 'vertical'
+#   activation   — 'automatic' (default, selects on focus) or 'manual' (Enter/Space to select)
+#
+# Usage:
+#   Tabs active <=> currentTab
+#     div $tab: "one", "Tab One"
+#     div $tab: "two", "Tab Two"
+#     div $panel: "one"
+#       p "Content for tab one"
+#     div $panel: "two"
+#       p "Content for tab two"
+
+export Tabs = component
+  @active      := null
+  @orientation := 'horizontal'
+  @activation  := 'automatic'
+  _ready       := false
+  _id =! "tabs-#{Math.random().toString(36).slice(2, 8)}"
+  activationDirection := 'none'
+
+  tabs ~=
+    return [] unless _ready
+    Array.from(@_content?.querySelectorAll('[data-tab]') or [])
+
+  panels ~=
+    return [] unless _ready
+    Array.from(@_content?.querySelectorAll('[data-panel]') or [])
+
+  mounted: ->
+    _ready = true
+    unless @active
+      @active = tabs[0]?.dataset.tab
+
+  ~>
+    return unless _ready
+    tabs.forEach (el) -> el.hidden = true
+    panels.forEach (el) =>
+      id = el.dataset.panel
+      isActive = id is @active
+      el.id = "#{_id}-panel-#{id}"
+      el.setAttribute 'role', 'tabpanel'
+      el.setAttribute 'aria-labelledby', "#{_id}-tab-#{id}"
+      el.toggleAttribute 'hidden', not isActive
+      el.toggleAttribute 'data-active', isActive
+
+  _isDisabled: (el) -> el?.hasAttribute('data-disabled')
+
+  select: (id) ->
+    prev = @active
+    horiz = @orientation is 'horizontal'
+    if prev and id isnt prev
+      oldTab = tabs.find (t) -> t.dataset.tab is prev
+      newTab = tabs.find (t) -> t.dataset.tab is id
+      if oldTab and newTab
+        oldRect = oldTab.getBoundingClientRect()
+        newRect = newTab.getBoundingClientRect()
+        activationDirection = if horiz
+          if newRect.left > oldRect.left then 'right' else 'left'
+        else
+          if newRect.top > oldRect.top then 'down' else 'up'
+    @active = id
+    @emit 'change', id
+
+  _nextEnabled: (ids, from, dir) ->
+    len = ids.length
+    i = from
+    loop len
+      i = (i + dir) %% len
+      tab = tabs.find (t) -> t.dataset.tab is ids[i]
+      return ids[i] unless @_isDisabled(tab)
+    ids[from]
+
+  onKeydown: (e) ->
+    ids = tabs.map (t) -> t.dataset.tab
+    idx = ids.indexOf @active
+    return if idx is -1
+
+    horiz = @orientation is 'horizontal'
+    prevKey = if horiz then 'ArrowLeft' else 'ArrowUp'
+    nextKey = if horiz then 'ArrowRight' else 'ArrowDown'
+
+    next = switch e.key
+      when nextKey then @_nextEnabled(ids, idx, 1)
+      when prevKey then @_nextEnabled(ids, idx, -1)
+      when 'Home'  then @_nextEnabled(ids, ids.length - 1, 1)
+      when 'End'   then @_nextEnabled(ids, 0, -1)
+      when 'Enter', ' '
+        if @activation is 'manual'
+          e.preventDefault()
+          @select(ids[idx])
+        null
+      else null
+
+    if next
+      e.preventDefault()
+      tab = tabs.find (t) -> t.dataset.tab is next
+      tab?.focus()
+      @select(next) if @activation is 'automatic'
+
+  render
+    .
+      div role: "tablist", aria-orientation: @orientation, data-activation-direction: activationDirection, @keydown: @onKeydown
+        for tab in tabs
+          button role: "tab"
+            id: "#{_id}-tab-#{tab.dataset.tab}"
+            aria-selected: tab.dataset.tab is @active
+            aria-controls: "#{_id}-panel-#{tab.dataset.tab}"
+            aria-disabled: @_isDisabled(tab)?!
+            tabindex: if @_isDisabled(tab) then '-1' else (tab.dataset.tab is @active ? '0' : '-1')
+            $active: (tab.dataset.tab is @active)?!
+            $disabled: @_isDisabled(tab)?!
+            @click: (=> @select(tab.dataset.tab) unless @_isDisabled(tab))
+            = tab.textContent
+
+      . ref: "_content"
+        slot

package/docs/ui/toast.rip

@@ -0,0 +1,87 @@
+# 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
+
+  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/docs/ui/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/docs/ui/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