rip-lang 3.13.71 → 3.13.73

package/docs/ui/input-group.rip

@@ -0,0 +1,28 @@
+# InputGroup — accessible headless input with prefix/suffix
+#
+# Wraps a form control with optional prefix and suffix elements.
+# Use $prefix and $suffix on children to mark addon positions.
+# Tracks child input focus for styling. Ships zero CSS.
+#
+# Usage:
+#   InputGroup
+#     span $prefix: true, "$"
+#     Input value <=> amount, type: "number"
+#   InputGroup
+#     Input value <=> search, placeholder: "Search..."
+#     button $suffix: true, @click: doSearch, "Go"
+
+export InputGroup = component
+  @disabled := false
+
+  focused := false
+
+  mounted: ->
+    ctrl = @_root?.querySelector('input, select, textarea')
+    return unless ctrl
+    ctrl.addEventListener 'focusin', => focused = true
+    ctrl.addEventListener 'focusout', => focused = false
+
+  render
+    div ref: "_root", $disabled: @disabled?!, $focused: focused?!
+      slot

package/docs/ui/label.rip

@@ -0,0 +1,16 @@
+# Label — accessible headless form label
+#
+# Standalone label element that associates with a form control via @for.
+# Companions Field but works independently. Ships zero CSS.
+#
+# Usage:
+#   Label for: "email-input", "Email address"
+#   Label required: true, "Username"
+
+export Label = component
+  @for := null
+  @required := false
+
+  render
+    label for: @for?!, $required: @required?!
+      slot

package/docs/ui/native-select.rip

@@ -0,0 +1,32 @@
+# NativeSelect — accessible headless native select wrapper
+#
+# Wraps a native <select> element with state tracking via data attributes.
+# Use when the browser's built-in dropdown is preferred. Ships zero CSS.
+#
+# Usage:
+#   NativeSelect value <=> role, @change: handleChange
+#     option value: "", "Choose a role..."
+#     option value: "admin", "Admin"
+#     option value: "user", "User"
+
+export NativeSelect = component
+  @value := ''
+  @disabled := false
+  @required := false
+
+  focused := false
+
+  onChange: (e) ->
+    @value = e.target.value
+    @emit 'change', @value
+
+  render
+    select value: @value, disabled: @disabled, required: @required
+      aria-disabled: @disabled?!
+      aria-required: @required?!
+      $disabled: @disabled?!
+      $focused: focused?!
+      @change: @onChange
+      @focusin: (=> focused = true)
+      @focusout: (=> focused = false)
+      slot

package/docs/ui/pagination.rip

@@ -0,0 +1,123 @@
+# Pagination — accessible headless page navigation
+#
+# Renders page buttons with prev/next and ellipsis gaps.
+# Ships zero CSS.
+#
+# Usage:
+#   Pagination page <=> currentPage, total: 100, perPage: 10
+#   Pagination page <=> currentPage, total: 500, perPage: 20, siblingCount: 2
+
+export Pagination = component
+  @page := 1
+  @total := 0
+  @perPage := 10
+  @siblingCount := 1
+
+  totalPages ~= Math.max(1, Math.ceil(@total / @perPage))
+  _ready := false
+
+  _range: (start, fin) ->
+    len = fin - start + 1
+    Array.from {length: len}, (_, i) -> start + i
+
+  visiblePages ~=
+    tp = totalPages
+    sibs = @siblingCount
+    current = @page
+
+    totalNumbers = sibs * 2 + 5
+    return @_range(1, tp) if tp <= totalNumbers
+
+    leftSib  = Math.max(current - sibs, 1)
+    rightSib = Math.min(current + sibs, tp)
+
+    showLeftDots  = leftSib > 2
+    showRightDots = rightSib < tp - 1
+
+    if not showLeftDots and showRightDots
+      leftCount = 3 + 2 * sibs
+      leftRange = @_range(1, leftCount)
+      return [...leftRange, -1, tp]
+
+    if showLeftDots and not showRightDots
+      rightCount = 3 + 2 * sibs
+      rightRange = @_range(tp - rightCount + 1, tp)
+      return [1, -2, ...rightRange]
+
+    midRange = @_range(leftSib, rightSib)
+    [1, -2, ...midRange, -1, tp]
+
+  goto: (pg) ->
+    pg = Math.max(1, Math.min(pg, totalPages))
+    return if pg is @page
+    @page = pg
+    @emit 'change', @page
+
+  onKeydown: (e) ->
+    switch e.key
+      when 'ArrowLeft'
+        e.preventDefault()
+        @goto(@page - 1)
+      when 'ArrowRight'
+        e.preventDefault()
+        @goto(@page + 1)
+      when 'Home'
+        e.preventDefault()
+        @goto(1)
+      when 'End'
+        e.preventDefault()
+        @goto(totalPages)
+
+  mounted: ->
+    _ready = true
+
+  _prevPages = null
+
+  _rebuild: (inner) ->
+    frag = document.createDocumentFragment()
+    for pg in visiblePages
+      if pg < 0
+        el = document.createElement 'span'
+        el.setAttribute 'data-ellipsis', ''
+        el.textContent = '...'
+      else
+        el = document.createElement 'button'
+        el.setAttribute 'aria-label', "Page #{pg}"
+        el.setAttribute 'data-page', ''
+        el.textContent = "#{pg}"
+        el.addEventListener 'click', => @goto(pg)
+      frag.appendChild el
+    inner.replaceChildren frag
+    _prevPages = visiblePages.join ','
+
+  _syncActive: (inner) ->
+    for btn in inner.querySelectorAll('[data-page]')
+      pg = parseInt btn.textContent
+      if pg is @page
+        btn.setAttribute 'aria-current', 'page'
+        btn.setAttribute 'data-active', ''
+      else
+        btn.removeAttribute 'aria-current'
+        btn.removeAttribute 'data-active'
+
+  ~>
+    return unless _ready
+    inner = @_nav?.querySelector('[data-pages]')
+    return unless inner
+
+    key = visiblePages.join ','
+    if key isnt _prevPages
+      @_rebuild inner
+    @_syncActive inner
+
+  render
+    nav ref: "_nav", aria-label: "Pagination", @keydown: @onKeydown
+      button $prev: true, aria-label: "Previous page"
+        disabled: @page <= 1
+        $disabled: (@page <= 1)?!
+        @click: (=> @goto(@page - 1))
+      . $pages: true
+      button $next: true, aria-label: "Next page"
+        disabled: @page >= totalPages
+        $disabled: (@page >= totalPages)?!
+        @click: (=> @goto(@page + 1))

package/docs/ui/resizable.rip

@@ -0,0 +1,123 @@
+# Resizable — accessible headless resizable panels
+#
+# Container with draggable handles between panels for resizing.
+# Panel sizes are stored as percentages and exposed via CSS
+# custom properties. Place [data-handle] elements between [data-panel]
+# elements. Ships zero CSS.
+#
+# Usage:
+#   Resizable
+#     div $panel: true
+#       p "Left panel"
+#     div $handle: true
+#     div $panel: true
+#       p "Right panel"
+#
+#   Resizable orientation: "vertical", minSize: 20
+#     div $panel: true, "Top"
+#     div $handle: true
+#     div $panel: true, "Bottom"
+
+export Resizable = component
+  @orientation := 'horizontal'
+  @minSize := 10
+  @maxSize := 90
+
+  _ready := false
+  _dragging = null
+  _startPos = 0
+  _startSizes = []
+  sizes := []
+
+  _panels: ->
+    return [] unless @_root
+    Array.from(@_root.querySelectorAll(':scope > [data-panel]') or [])
+
+  _handles: ->
+    return [] unless @_root
+    Array.from(@_root.querySelectorAll(':scope > [data-handle]') or [])
+
+  mounted: ->
+    _ready = true
+    panels = @_panels()
+    count = panels.length
+    if count and not sizes.length
+      even = 100 / count
+      sizes = Array.from {length: count}, -> even
+
+    @_handles().forEach (handle, idx) =>
+      handle.setAttribute 'role', 'separator'
+      handle.setAttribute 'tabindex', '0'
+      handle.addEventListener 'pointerdown', (e) => @_onPointerDown(idx, e)
+      handle.addEventListener 'keydown', (e) => @_onKeydown(idx, e)
+
+  _getPos: (e) ->
+    if @orientation is 'horizontal' then e.clientX else e.clientY
+
+  _getContainerSize: ->
+    rect = @_root?.getBoundingClientRect()
+    return 0 unless rect
+    if @orientation is 'horizontal' then rect.width else rect.height
+
+  _onPointerDown: (handleIdx, e) ->
+    e.preventDefault()
+    _dragging = handleIdx
+    _startPos = @_getPos(e)
+    _startSizes = [...sizes]
+    e.target.setPointerCapture(e.pointerId)
+    e.target.toggleAttribute 'data-dragging', true
+
+  _onPointerMove: (e) ->
+    return unless _dragging?
+    total = @_getContainerSize()
+    return unless total
+    delta = @_getPos(e) - _startPos
+    pctDelta = (delta / total) * 100
+    @_applyResize(_dragging, _startSizes[_dragging] + pctDelta, _startSizes[_dragging + 1] - pctDelta)
+
+  _onPointerUp: (e) ->
+    return unless _dragging?
+    handle = @_handles()[_dragging]
+    handle?.removeAttribute 'data-dragging'
+    _dragging = null
+    @emit 'resize', sizes
+
+  _applyResize: (idx, newLeft, newRight) ->
+    newLeft  = Math.max(@minSize, Math.min(@maxSize, newLeft))
+    newRight = Math.max(@minSize, Math.min(@maxSize, newRight))
+    combined = sizes[idx] + sizes[idx + 1]
+    newRight = combined - newLeft
+    return if newRight < @minSize or newRight > @maxSize
+    updated = [...sizes]
+    updated[idx] = newLeft
+    updated[idx + 1] = newRight
+    sizes = updated
+
+  _onKeydown: (handleIdx, e) ->
+    step = 10
+    horiz = @orientation is 'horizontal'
+    delta = switch e.key
+      when (if horiz then 'ArrowRight' else 'ArrowDown') then step
+      when (if horiz then 'ArrowLeft' else 'ArrowUp') then -step
+      else null
+    return unless delta?
+    e.preventDefault()
+    @_applyResize(handleIdx, sizes[handleIdx] + delta, sizes[handleIdx + 1] - delta)
+    @emit 'resize', sizes
+
+  ~>
+    return unless _ready
+    @_panels().forEach (el, idx) =>
+      pct = sizes[idx] or 0
+      el.style.setProperty '--panel-size', "#{pct}%"
+      el.style.flexBasis = "#{pct}%"
+    @_handles().forEach (handle, idx) =>
+      handle.setAttribute 'aria-valuenow', Math.round(sizes[idx] or 0)
+      handle.setAttribute 'aria-orientation', @orientation
+
+  render
+    div ref: "_root", $orientation: @orientation
+      @pointermove: @_onPointerMove
+      @pointerup: @_onPointerUp
+      style: "display:flex; flex-direction:#{if @orientation is 'horizontal' then 'row' else 'column'}"
+      slot

package/docs/ui/skeleton.rip

@@ -0,0 +1,22 @@
+# Skeleton — accessible headless loading placeholder
+#
+# Placeholder element shown while content is loading.
+# Exposes dimensions as CSS custom properties for styling.
+# Ships zero CSS.
+#
+# Usage:
+#   Skeleton
+#   Skeleton width: "200px", height: "1em"
+#   Skeleton circle: true, width: "48px"
+
+export Skeleton = component
+  @width := null
+  @height := null
+  @circle := false
+  @label := 'Loading'
+
+  render
+    div role: "status", aria-busy: "true", aria-label: @label
+      style: "--skeleton-width: #{@width or 'auto'}; --skeleton-height: #{@height or 'auto'}"
+      $circle: @circle?!
+      slot

package/docs/ui/spinner.rip

@@ -0,0 +1,17 @@
+# Spinner — accessible headless loading indicator
+#
+# Announces loading state to screen readers via role="status".
+# Exposes size as a CSS custom property for styling.
+# Ships zero CSS.
+#
+# Usage:
+#   Spinner
+#   Spinner label: "Saving...", size: "24px"
+
+export Spinner = component
+  @label := 'Loading'
+  @size := null
+
+  render
+    div role: "status", aria-label: @label
+      style: if @size then "--spinner-size: #{@size}" else undefined

package/docs/ui/table.rip

@@ -0,0 +1,27 @@
+# Table — accessible headless semantic table wrapper
+#
+# Lightweight wrapper for HTML tables with optional caption and
+# striped rows. For data-heavy tables with virtual scrolling, use Grid.
+# Ships zero CSS.
+#
+# Usage:
+#   Table caption: "Team members", striped: true
+#     thead
+#       tr
+#         th "Name"
+#         th "Role"
+#     tbody
+#       tr
+#         td "Alice"
+#         td "Engineer"
+
+export Table = component
+  @caption := ''
+  @striped := false
+
+  render
+    div $striped: @striped?!
+      table
+        if @caption
+          caption @caption
+        slot

package/docs/ui/textarea.rip

@@ -0,0 +1,48 @@
+# Textarea — accessible headless auto-resizing text area
+#
+# Tracks focus, validation, and disabled state via data attributes.
+# Optional auto-resize adjusts height to fit content. Ships zero CSS.
+#
+# Usage:
+#   Textarea value <=> bio, placeholder: "Tell us about yourself"
+#   Textarea value <=> notes, autoResize: true, rows: 3
+
+export Textarea = component
+  @value := ''
+  @placeholder := ''
+  @disabled := false
+  @required := false
+  @rows := 3
+  @autoResize := false
+
+  focused := false
+  touched := false
+
+  onInput: (e) ->
+    @value = e.target.value
+    @_resize(e.target) if @autoResize
+
+  onFocus: -> focused = true
+  onBlur: ->
+    focused = false
+    touched = true
+
+  _resize: (el) ->
+    el.style.height = 'auto'
+    el.style.height = "#{el.scrollHeight}px"
+
+  mounted: ->
+    @_resize(@_root) if @autoResize and @value
+
+  render
+    textarea ref: "_root", value: @value, placeholder: @placeholder, rows: @rows
+      disabled: @disabled
+      required: @required
+      aria-disabled: @disabled?!
+      aria-required: @required?!
+      $disabled: @disabled?!
+      $focused: focused?!
+      $touched: touched?!
+      @input: @onInput
+      @focusin: @onFocus
+      @focusout: @onBlur

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.13.71",
+  "version": "3.13.73",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",

package/src/browser.js

@@ -119,6 +119,29 @@ async function processRipScripts() {
       await ui.launch('', opts);
     }
   }
+
+  // Step 6: data-reload enables SSE hot-reload from dev server
+  if (runtimeTag?.hasAttribute('data-reload')) {
+    let ready = false;
+    const es = new EventSource('/watch');
+    es.addEventListener('connected', () => {
+      if (ready) location.reload();
+      ready = true;
+    });
+    es.addEventListener('reload', (e) => {
+      if (e.data === 'styles') {
+        const t = Date.now();
+        document.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
+          if (new URL(l.href).origin !== location.origin) return;
+          const url = new URL(l.href);
+          url.searchParams.set('_r', t);
+          l.href = url.toString();
+        });
+      } else {
+        location.reload();
+      }
+    });
+  }
 }
 
 export { processRipScripts };