rip-lang 3.13.119 → 3.13.121

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:: string := ""
+  @striped:: boolean := false
+
+  render
+    div $striped: @striped?!
+      table
+        if @caption
+          caption @caption
+        slot

package/docs/ui/tabs.rip

@@ -0,0 +1,113 @@
+# 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:: any := null
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @activation:: "automatic" | "manual" := "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
+    move = (nextId) =>
+      return unless nextId
+      tabs.find((t) -> t.dataset.tab is nextId)?.focus()
+      @select(nextId) if @activation is 'automatic'
+    ARIA.rovingNav e, {
+      next:   => move(@_nextEnabled(ids, idx,              1))
+      prev:   => move(@_nextEnabled(ids, idx,             -1))
+      first:  => move(@_nextEnabled(ids, ids.length - 1,   1))
+      last:   => move(@_nextEnabled(ids, 0,               -1))
+      select: => @select(ids[idx]) if @activation is 'manual'
+    }, @orientation
+
+  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/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:: string := ""
+  @placeholder:: string := ""
+  @disabled:: boolean := false
+  @required:: boolean := false
+  @rows:: number := 3
+  @autoResize:: boolean := 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/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:: any[] := []
+  @placement:: "top-left" | "top-right" | "bottom-left" | "bottom-right" := "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:: Record<string, any> := {}
+
+  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,71 @@
+# 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:: any := null
+  @disabled:: boolean := false
+  @multiple:: boolean := false
+  @orientation:: "horizontal" | "vertical" := "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
+    ARIA.rovingNav e, {
+      next:  => opts[(focused + 1) %% len]?.focus()
+      prev:  => opts[(focused - 1) %% len]?.focus()
+      first: => opts[0]?.focus()
+      last:  => opts[len - 1]?.focus()
+    }, 'both'
+
+  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:: boolean := false
+  @disabled:: boolean := 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/docs/ui/toolbar.rip

@@ -0,0 +1,38 @@
+# 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" | "vertical" := "horizontal"
+  @label:: string := ""
+
+  _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
+    ARIA.rovingNav e, {
+      next:  => els[(focused + 1) %% len]?.focus()
+      prev:  => els[(focused - 1) %% len]?.focus()
+      first: => els[0]?.focus()
+      last:  => els[len - 1]?.focus()
+    }, @orientation
+
+  render
+    div role: "toolbar", aria-label: @label or undefined, aria-orientation: @orientation
+      $orientation: @orientation
+      slot

package/docs/ui/tooltip.rip

@@ -0,0 +1,85 @@
+# Tooltip — accessible headless tooltip with delay and positioning
+#
+# Shows on hover/focus with configurable delay. Uses aria-describedby and
+# native `popover="hint"` for top-layer behavior.
+# 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:: string := ""
+  @placement:: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right" := "top"
+  @delay:: number := 300
+  @offset:: number := 6
+  @hoverable:: boolean := false
+
+  open := false
+  entering := false
+  exiting := false
+  _showTimer := null
+  _hideTimer := null
+  _id =! "tip-#{Math.random().toString(36).slice(2, 8)}"
+
+  _applyPlacement: ->
+    [side, align] = @placement.split('-')
+    align ??= 'center'
+    ARIA.position @_trigger, @_tip, placement: "#{side} #{align}", offset: @offset
+
+  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
+      , 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
+
+  beforeUnmount: ->
+    clearTimeout _showTimer if _showTimer
+    clearTimeout _hideTimer if _hideTimer
+
+  ~>
+    if @_tip
+      @_tip.setAttribute 'popover', 'hint'
+      @_applyPlacement()
+      if open then @_tip.setAttribute('data-open', '') else @_tip.removeAttribute('data-open')
+      ARIA.bindPopover open, (=> @_tip), ((isOpen) => open = isOpen), (=> @_trigger)
+
+  render
+    .
+      div ref: "_trigger"
+        aria-describedby: open ? _id : undefined
+        @mouseenter: @show
+        @mouseleave: @hide
+        @focusin: @show
+        @focusout: @hide
+        slot
+
+      div ref: "_tip", id: _id, role: "tooltip", style: "position:fixed;margin:0;inset:auto"
+        $open: open?!
+        $entering: entering?!
+        $exiting: exiting?!
+        $placement: @placement
+        @mouseenter: (=> @_cancelHide() if @hoverable)
+        @mouseleave: (=> @hide() if @hoverable)
+        @text

package/package.json

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

package/src/compiler.js

@@ -341,17 +341,27 @@ export class CodeGenerator {
   // Collect identifier anchors from sub-expression nodes with .loc.
   collectSubExprs(node, result) {
     if (!Array.isArray(node)) return;
+    // If node[0] is not a string-like head (e.g. array-of-arrays like the cases
+    // list in a switch), recurse into ALL children including index 0.
+    let head = node[0];
+    if (Array.isArray(head) || (head != null && typeof head !== 'string' && !(head instanceof String))) {
+      for (let i = 0; i < node.length; i++) {
+        if (Array.isArray(node[i])) this.collectSubExprs(node[i], result);
+      }
+      return;
+    }
     if (node.loc) {
-      let head = str(node[0]);
+      head = str(head);
       let ident = null;
+      // Property access: anchor is the property name (check BEFORE operators
+      // because the operator regex also matches '.' via ^\.\.?$)
+      if (head === '.') {
+        if (typeof node[2] === 'string') ident = node[2];
+      }
       // Operators/keywords: anchor is the subject at index 1
-      if (typeof head === 'string' && /^[=+\-*/%<>!&|?~^]|^\.\.?$|^def$|^class$|^state$|^computed$|^readonly$|^for-/.test(head)) {
+      else if (typeof head === 'string' && /^[=+\-*/%<>!&|?~^]|^\.\.?$|^def$|^class$|^state$|^computed$|^readonly$|^for-/.test(head)) {
         if (typeof node[1] === 'string' && /^[a-zA-Z_$]/.test(node[1])) ident = node[1];
       }
-      // Property access: anchor is the property name
-      else if (head === '.') {
-        if (typeof node[2] === 'string') ident = node[2];
-      }
       // Function call (head is identifier)
       else if (typeof head === 'string' && /^[a-zA-Z_$]/.test(head)) {
         ident = head;
@@ -396,6 +406,7 @@ export class CodeGenerator {
       return;
     }
     if (head === 'component') return;  // Component body has its own scope
+    if (head === 'enum') return;       // Enum members are not top-level variables
 
     if (CodeGenerator.ASSIGNMENT_OPS.has(head)) {
       let [target, value] = rest;
@@ -2122,17 +2133,18 @@ export class CodeGenerator {
       return importExpr;
     }
     if (this.options.skipImports) return '';
+    if (rest.length === 3) {
+      let [def, named, source] = rest;
+      let fixedSource = this.addJsExtensionAndAssertions(source);
+      if (named[0] === '*' && named.length === 2) return `import ${def}, * as ${named[1]} from ${fixedSource}`;
+      let names = named.map(i => Array.isArray(i) && i.length === 2 ? `${i[0]} as ${i[1]}` : i).join(', ');
+      return `import ${def}, { ${names} } from ${fixedSource}`;
+    }
     let [specifier, source] = rest;
     let fixedSource = this.addJsExtensionAndAssertions(source);
     if (typeof specifier === 'string') return `import ${specifier} from ${fixedSource}`;
     if (Array.isArray(specifier)) {
       if (specifier[0] === '*' && specifier.length === 2) return `import * as ${specifier[1]} from ${fixedSource}`;
-      if (typeof specifier[0] === 'string' && Array.isArray(specifier[1])) {
-        let def = specifier[0], second = specifier[1];
-        if (second[0] === '*' && second.length === 2) return `import ${def}, * as ${second[1]} from ${fixedSource}`;
-        let names = (Array.isArray(second) ? second : [second]).map(i => Array.isArray(i) && i.length === 2 ? `${i[0]} as ${i[1]}` : i).join(', ');
-        return `import ${def}, { ${names} } from ${fixedSource}`;
-      }
       let names = specifier.map(i => Array.isArray(i) && i.length === 2 ? `${i[0]} as ${i[1]}` : i).join(', ');
       return `import { ${names} } from ${fixedSource}`;
     }