rip-lang 3.13.92 → 3.13.94

package/docs/ui/combobox.rip

@@ -1,155 +0,0 @@
-# Combobox — accessible headless combobox (input + filterable listbox)
-#
-# Keyboard: ArrowDown/Up to navigate, Enter to select, Escape to close,
-#           typing filters the list via the @filter callback.
-#
-# Exposes $open on the wrapper, $highlighted on options.
-# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
-#
-# Usage:
-#   Combobox query <=> searchText, items: fruits, @select: handleSelect, @filter: filterFn
-
-export Combobox = component
-  @query := ''
-  @items := []
-  @placeholder := 'Search...'
-  @disabled := false
-  @autoHighlight := true
-
-  open := false
-  highlightedIndex := -1
-  _listId =! "cb-#{Math.random().toString(36).slice(2, 8)}"
-
-  getItems: ->
-    return [] unless @_list
-    Array.from(@_list.querySelectorAll('[role="option"]'))
-
-  _scrollToItem: ->
-    @getItems()[highlightedIndex]?.scrollIntoView({ block: 'nearest' })
-
-  clear: ->
-    @query = ''
-    highlightedIndex = -1
-    @emit 'filter', ''
-
-  onInput: (e) ->
-    @query = e.target.value
-    open = true
-    highlightedIndex = if @autoHighlight and @items.length > 0 then 0 else -1
-    @emit 'filter', @query
-
-  onFocusin: -> @openMenu()
-
-  onFocusout: (e) ->
-    unless @_content?.contains(e.relatedTarget)
-      @close()
-
-  openMenu: ->
-    open = true
-    highlightedIndex = -1
-    setTimeout => @_position(), 0
-
-  close: ->
-    open = false
-    highlightedIndex = -1
-
-  _position: ->
-    return unless @_input and @_list
-    tr = @_input.getBoundingClientRect()
-    @_list.style.left = "#{tr.left}px"
-    @_list.style.top = "#{tr.bottom + 2}px"
-    @_list.style.minWidth = "#{tr.width}px"
-    fl = @_list.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_list.style.top = "#{tr.top - fl.height - 2}px"
-
-  isDisabled: (item) -> item?.hasAttribute?('data-disabled')
-
-  selectIndex: (idx) ->
-    item = @getItems()[idx]
-    return unless item
-    return if @isDisabled(item)
-    val = item.dataset.value ?? item.textContent.trim()
-    @query = val
-    @emit 'select', val
-    @close()
-    @_input?.blur()
-
-  _nextEnabled: (from, dir) ->
-    opts = @getItems()
-    len = opts.length
-    i = from
-    loop len
-      i = (i + dir) %% len
-      return i unless @isDisabled(opts[i])
-    from
-
-  _onKeydown: (e) ->
-    len = @getItems().length
-    switch e.key
-      when 'ArrowDown'
-        e.preventDefault()
-        @openMenu() unless open
-        highlightedIndex = @_nextEnabled(highlightedIndex, 1)
-        @_scrollToItem()
-      when 'ArrowUp'
-        e.preventDefault()
-        highlightedIndex = @_nextEnabled(highlightedIndex, -1)
-        @_scrollToItem()
-      when 'Enter'
-        e.preventDefault()
-        if highlightedIndex >= 0
-          @selectIndex(highlightedIndex)
-        else if len is 1
-          @selectIndex(0)
-      when 'Escape'
-        e.preventDefault()
-        if open then @close() else @query = ''
-      when 'Tab'
-        @close()
-
-  ~>
-    if open
-      onDown = (e) =>
-        root = @_content
-        unless root?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
-
-  render
-    . ref: "_content", $open: open?!
-
-      # Text input
-      . style: "position:relative;display:inline-flex;align-items:center"
-        input ref: "_input", role: "combobox"
-          type: "text"
-          autocomplete: "off"
-          aria-expanded: !!open
-          aria-haspopup: "listbox"
-          aria-autocomplete: "list"
-          aria-controls: if open then _listId else undefined
-          aria-activedescendant: if highlightedIndex >= 0 then "#{_listId}-#{highlightedIndex}" else undefined
-          $disabled: @disabled?!
-          disabled: @disabled
-          placeholder: @placeholder
-          value: @query
-          @keydown: @_onKeydown
-        if @query
-          button aria-label: "Clear", $clear: true, @click: @clear
-            "✕"
-
-      # Listbox — conditionally rendered (like Select)
-      if open and @items.length > 0
-        div ref: "_list", id: _listId, role: "listbox", $open: true
-          style: "position:fixed"
-          for item, idx in @items
-            div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
-              $value: item
-              $highlighted: (idx is highlightedIndex)?!
-              @click: (=> @selectIndex(idx))
-              @mouseenter: (=> highlightedIndex = idx)
-              "#{item}"
-      if open and @items.length is 0 and @query
-        div role: "status", aria-live: "polite", $empty: true
-          "No results"

package/docs/ui/context-menu.rip

@@ -1,105 +0,0 @@
-# ContextMenu — accessible headless right-click menu
-#
-# Opens on contextmenu event (right-click) over the trigger area.
-# Keyboard navigation matches Menu. Ships zero CSS.
-#
-# Usage:
-#   ContextMenu @select: handleAction
-#     div $trigger: true
-#       p "Right-click this area"
-#     div $item: "cut", "Cut"
-#     div $item: "copy", "Copy"
-#     div $item: "paste", "Paste"
-
-export ContextMenu = component
-  @disabled := false
-
-  open := false
-  highlightedIndex := -1
-  posX := 0
-  posY := 0
-
-  _menuItems ~=
-    return [] unless @_slot
-    Array.from(@_slot.querySelectorAll('[data-item]') or [])
-
-  _triggerEl ~=
-    return null unless @_slot
-    @_slot.querySelector('[data-trigger]')
-
-  _onContextMenu: (e) ->
-    return if @disabled
-    e.preventDefault()
-    posX = e.clientX
-    posY = e.clientY
-    open = true
-    highlightedIndex = 0
-    requestAnimationFrame =>
-      @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
-
-  close: ->
-    open = false
-    highlightedIndex = -1
-
-  selectIndex: (idx) ->
-    item = _menuItems[idx]
-    return unless item
-    return if item.dataset.disabled?
-    @emit 'select', item.dataset.item
-    @close()
-
-  _onKeydown: (e) ->
-    len = _menuItems.length
-    return unless len
-    switch e.key
-      when 'ArrowDown'
-        e.preventDefault()
-        highlightedIndex = (highlightedIndex + 1) %% len
-        @_list?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
-      when 'ArrowUp'
-        e.preventDefault()
-        highlightedIndex = (highlightedIndex - 1) %% len
-        @_list?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
-      when 'Home'
-        e.preventDefault()
-        highlightedIndex = 0
-        @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
-      when 'End'
-        e.preventDefault()
-        highlightedIndex = len - 1
-        @_list?.querySelectorAll('[role="menuitem"]')[len - 1]?.focus()
-      when 'Enter', ' '
-        e.preventDefault()
-        @selectIndex(highlightedIndex)
-      when 'Escape', 'Tab'
-        e.preventDefault() if e.key is 'Escape'
-        @close()
-
-  ~>
-    if open
-      onDown = (e) =>
-        unless @_list?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
-
-  render
-    . @contextmenu: @_onContextMenu
-
-      . ref: "_slot", style: "display:none"
-        slot
-
-      if _triggerEl
-        . innerHTML: _triggerEl.innerHTML
-
-      if open
-        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"
-              $highlighted: (idx is highlightedIndex)?!
-              $disabled: item.dataset.disabled?!
-              $value: item.dataset.item
-              @click: (=> @selectIndex(idx))
-              @mouseenter: (=> highlightedIndex = idx)
-              = item.textContent

package/docs/ui/date-picker.rip

@@ -1,214 +0,0 @@
-# DatePicker — accessible headless date picker with calendar
-#
-# A popover calendar for selecting a single date or a date range.
-# Set @range to true for range selection (value becomes [from, to]).
-# Keyboard: Arrow keys navigate days, Enter selects, Escape closes.
-# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
-#
-# Usage:
-#   DatePicker value <=> selectedDate, placeholder: "Pick a date"
-#   DatePicker value <=> dateRange, range: true
-
-dpFmt = (d) ->
-  return '' unless d
-  m = String(d.getMonth() + 1).padStart(2, '0')
-  day = String(d.getDate()).padStart(2, '0')
-  "#{m}/#{day}/#{d.getFullYear()}"
-
-dpParse = (str) ->
-  return null unless str?.length is 10
-  parts = str.split('/')
-  return null unless parts.length is 3
-  [m, d, y] = parts.map Number
-  return null if isNaN(m) or isNaN(d) or isNaN(y)
-  dt = new Date(y, m - 1, d)
-  return null if dt.getMonth() isnt m - 1
-  dt
-
-dpSameDay = (a, b) ->
-  return false unless a and b
-  a.getFullYear() is b.getFullYear() and a.getMonth() is b.getMonth() and a.getDate() is b.getDate()
-
-dpInRange = (day, from, to) ->
-  return false unless day and from and to
-  t = day.getTime()
-  lo = Math.min(from.getTime(), to.getTime())
-  hi = Math.max(from.getTime(), to.getTime())
-  t >= lo and t <= hi
-
-export DatePicker = component
-  @value := null
-  @placeholder := 'mm/dd/yyyy'
-  @disabled := false
-  @range := false
-  @firstDayOfWeek := 0
-
-  open := false
-  viewMonth := new Date()
-  _rangeStart := null
-  _hoveredDay := null
-  _inputText := ''
-  _id =! "dp-#{Math.random().toString(36).slice(2, 8)}"
-
-  _dayNames =! ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
-
-  _daysInView ~=
-    yr = viewMonth.getFullYear()
-    mo = viewMonth.getMonth()
-    firstOfMonth = new Date(yr, mo, 1)
-    startDay = firstOfMonth.getDay()
-    offset = (startDay - @firstDayOfWeek + 7) %% 7
-    daysInMonth = new Date(yr, mo + 1, 0).getDate()
-    prevMonthDays = new Date(yr, mo, 0).getDate()
-    dayList = []
-    for n in [0...offset]
-      dayList.push { date: new Date(yr, mo - 1, prevMonthDays - offset + n + 1), outside: true }
-    for n in [1..daysInMonth]
-      dayList.push { date: new Date(yr, mo, n), outside: false }
-    trailing = (7 - dayList.length %% 7) %% 7
-    for n in [1..trailing]
-      dayList.push { date: new Date(yr, mo + 1, n), outside: true }
-    dayList
-
-  _displayText ~=
-    if @range
-      if Array.isArray(@value) and @value[0]
-        from = dpFmt(@value[0])
-        to = if @value[1] then dpFmt(@value[1]) else '...'
-        "#{from} – #{to}"
-      else
-        @placeholder
-    else
-      if @value then dpFmt(@value) else @placeholder
-
-  _monthLabel ~=
-    viewMonth.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
-
-  _today =! new Date()
-
-  _prevMonth: ->
-    viewMonth = new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1)
-
-  _nextMonth: ->
-    viewMonth = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1)
-
-  _selectDay: (day) ->
-    return if @disabled
-    if @range
-      if _rangeStart and not dpSameDay(_rangeStart, day)
-        from = if _rangeStart < day then _rangeStart else day
-        to = if _rangeStart < day then day else _rangeStart
-        @value = [from, to]
-        _rangeStart = null
-        @emit 'change', @value
-        open = false
-      else
-        _rangeStart = day
-        @value = [day, null]
-    else
-      @value = day
-      @emit 'change', @value
-      open = false
-    _inputText = _displayText
-
-  _onInputChange: (e) ->
-    raw = e.target.value.replace(/[^\d\/]/g, '')
-    if raw.length <= 10
-      _inputText = raw
-    if raw.length is 10
-      dt = dpParse(raw)
-      if dt
-        @value = dt
-        viewMonth = new Date(dt.getFullYear(), dt.getMonth(), 1)
-        @emit 'change', @value
-
-  toggle: ->
-    return if @disabled
-    if open then @close() else @openPicker()
-
-  openPicker: ->
-    open = true
-    if @value and not @range
-      viewMonth = new Date(@value.getFullYear(), @value.getMonth(), 1)
-    else if @range and Array.isArray(@value) and @value[0]
-      viewMonth = new Date(@value[0].getFullYear(), @value[0].getMonth(), 1)
-    _inputText = _displayText
-    setTimeout => @_position(), 0
-
-  close: ->
-    open = false
-    _rangeStart = null
-    _hoveredDay = null
-
-  _position: ->
-    return unless @_trigger and @_cal
-    tr = @_trigger.getBoundingClientRect()
-    @_cal.style.position = 'fixed'
-    @_cal.style.left = "#{tr.left}px"
-    @_cal.style.top = "#{tr.bottom + 4}px"
-    fl = @_cal.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_cal.style.top = "#{tr.top - fl.height - 4}px"
-
-  _onKeydown: (e) ->
-    switch e.key
-      when 'Escape'
-        e.preventDefault()
-        @close()
-        @_trigger?.focus()
-      when 'Enter', ' '
-        e.preventDefault()
-        @toggle() unless open
-
-  ~>
-    if open
-      onDown = (e) =>
-        unless @_trigger?.contains(e.target) or @_cal?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
-
-  render
-    . $open: open?!, $disabled: @disabled?!, $range: @range?!
-
-      # Trigger
-      button ref: "_trigger", $trigger: true
-        aria-haspopup: "dialog"
-        aria-expanded: !!open
-        disabled: @disabled
-        @click: @toggle
-        @keydown: @_onKeydown
-        _displayText
-
-      # Calendar dropdown
-      if open
-        div ref: "_cal", role: "dialog", aria-label: "Date picker", $calendar: true
-          style: "position:fixed;z-index:50"
-
-          # Month navigation
-          . $header: true
-            button $prev: true, aria-label: "Previous month", @click: @_prevMonth
-              "‹"
-            span $month-label: true
-              _monthLabel
-            button $next: true, aria-label: "Next month", @click: @_nextMonth
-              "›"
-
-          # Day-of-week headers
-          . $weekdays: true
-            for dayName in _dayNames
-              span $weekday: true
-                dayName
-
-          # Day grid
-          . $days: true, role: "grid"
-            for entry, dIdx in _daysInView
-              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))?!
-                $in-range: (if @range then (if _rangeStart then dpInRange(entry.date, _rangeStart, _hoveredDay or _rangeStart) else if Array.isArray(@value) and @value[0] and @value[1] then dpInRange(entry.date, @value[0], @value[1]) else false) else false)?!
-                $range-start: (if @range and _rangeStart then dpSameDay(entry.date, _rangeStart) else false)?!
-                @click: (=> @_selectDay(entry.date))
-                @mouseenter: (=> _hoveredDay = entry.date)
-                entry.date.getDate()

package/docs/ui/dialog.rip

@@ -1,107 +0,0 @@
-# Dialog — accessible headless modal dialog
-#
-# Traps focus, locks scroll, dismisses on Escape or click outside.
-# Restores focus to the previously focused element on close.
-# Auto-wires aria-labelledby (first h1-h6) and aria-describedby (first p).
-#
-# Exposes $open on the backdrop. Ships zero CSS.
-#
-# Usage:
-#   Dialog open <=> showDialog, @close: handleClose
-#     h2 "Title"
-#     p "Content"
-#     button @click: (=> showDialog = false), "Close"
-
-dialogStack = []
-
-export Dialog = component
-  @open := false
-  @dismissable := true
-  @initialFocus := null
-
-  _prevFocus = null
-  _cleanupTrap = null
-  _scrollY = 0
-  _id =! "dlg-#{Math.random().toString(36).slice(2, 8)}"
-
-  _wireAria: ->
-    panel = @_panel
-    return unless panel
-    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
-    if heading
-      heading.id ?= "#{_id}-title"
-      panel.setAttribute 'aria-labelledby', heading.id
-    desc = panel.querySelector('p')
-    if desc
-      desc.id ?= "#{_id}-desc"
-      panel.setAttribute 'aria-describedby', desc.id
-
-  ~>
-    if @open
-      _prevFocus = document.activeElement
-      _scrollY = window.scrollY
-      dialogStack.push this
-      document.body.style.position = 'fixed'
-      document.body.style.top = "-#{_scrollY}px"
-      document.body.style.width = '100%'
-
-      setTimeout =>
-        panel = @_panel
-        if panel
-          @_wireAria()
-          if @initialFocus
-            target = if typeof @initialFocus is 'string' then panel.querySelector(@initialFocus) else @initialFocus
-            target?.focus()
-          else
-            focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
-            focusable[0]?.focus()
-          _cleanupTrap = (e) ->
-            return unless e.key is 'Tab'
-            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
-            return unless list.length
-            first = list[0]
-            last = list[list.length - 1]
-            if e.shiftKey
-              if document.activeElement is first then (e.preventDefault(); last.focus())
-            else
-              if document.activeElement is last then (e.preventDefault(); first.focus())
-          panel.addEventListener 'keydown', _cleanupTrap
-      , 0
-
-      return ->
-        idx = dialogStack.indexOf this
-        dialogStack.splice(idx, 1) if idx >= 0
-        document.body.style.position = '' unless dialogStack.length
-        document.body.style.top = '' unless dialogStack.length
-        document.body.style.width = '' unless dialogStack.length
-        window.scrollTo 0, _scrollY unless dialogStack.length
-        _prevFocus?.focus()
-    else
-      idx = dialogStack.indexOf this
-      dialogStack.splice(idx, 1) if idx >= 0
-      unless dialogStack.length
-        document.body.style.position = ''
-        document.body.style.top = ''
-        document.body.style.width = ''
-        window.scrollTo 0, _scrollY
-      _prevFocus?.focus()
-
-  close: ->
-    @open = false
-    @emit 'close'
-
-  onKeydown: (e) ->
-    if e.key is 'Escape' and dialogStack[dialogStack.length - 1] is this
-      e.preventDefault()
-      @close() if @dismissable
-
-  onBackdropClick: (e) ->
-    @close() if e.target is e.currentTarget and @dismissable
-
-  render
-    if @open
-      div ref: "_backdrop", $open: true,
-        @click: @onBackdropClick,
-        @keydown: @onKeydown
-        div ref: "_panel", role: "dialog", aria-modal: "true", tabindex: "-1"
-          slot

package/docs/ui/drawer.rip

@@ -1,79 +0,0 @@
-# Drawer — accessible headless slide-out panel
-#
-# A Dialog variant that slides from an edge of the screen.
-# Supports dismiss on escape, click-outside, and optional swipe-to-close.
-# Ships zero CSS.
-#
-# Usage:
-#   Drawer open <=> showDrawer, side: "right"
-#     h2 "Settings"
-#     p "Panel content here"
-
-export Drawer = component
-  @open := false
-  @side := 'right'
-  @dismissable := true
-
-  _prevFocus = null
-  _scrollY = 0
-  _id =! "drw-#{Math.random().toString(36).slice(2, 8)}"
-
-  _wireAria: ->
-    panel = @_panel
-    return unless panel
-    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
-    if heading
-      heading.id ?= "#{_id}-title"
-      panel.setAttribute 'aria-labelledby', heading.id
-    desc = panel.querySelector('p')
-    if desc
-      desc.id ?= "#{_id}-desc"
-      panel.setAttribute 'aria-describedby', desc.id
-
-  ~>
-    if @open
-      _prevFocus = document.activeElement
-      document.body.style.overflow = 'hidden'
-
-      setTimeout =>
-        panel = @_panel
-        if panel
-          @_wireAria()
-          focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
-          focusable[0]?.focus()
-          @_trapHandler = (e) ->
-            return unless e.key is 'Tab'
-            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
-            return unless list.length
-            first = list[0]
-            last = list[list.length - 1]
-            if e.shiftKey
-              if document.activeElement is first then (e.preventDefault(); last.focus())
-            else
-              if document.activeElement is last then (e.preventDefault(); first.focus())
-          panel.addEventListener 'keydown', @_trapHandler
-      , 0
-    else
-      document.body.style.overflow = ''
-      _prevFocus?.focus()
-
-  close: ->
-    @open = false
-    @emit 'close'
-
-  onKeydown: (e) ->
-    if e.key is 'Escape' and @dismissable
-      e.preventDefault()
-      @close()
-
-  onBackdropClick: (e) ->
-    @close() if e.target is e.currentTarget and @dismissable
-
-  render
-    if @open
-      div ref: "_backdrop", $open: true, $side: @side
-        @click: @onBackdropClick
-        @keydown: @onKeydown
-        div ref: "_panel", role: "dialog", aria-modal: "true", tabindex: "-1"
-          $side: @side
-          slot