rip-lang 3.13.64 → 3.13.66

package/docs/ui/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/docs/ui/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", style: "position:fixed"
+          $open: true
+          $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.64",
+  "version": "3.13.66",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",
@@ -33,6 +33,7 @@
   "scripts": {
     "build": "bun scripts/build.js",
     "bump": "bun scripts/bump.js",
+    "gallery": "bun scripts/gallery.js",
     "parser": "bun src/grammar/solar.rip -o src/parser.js src/grammar/grammar.rip",
     "serve": "bun scripts/serve.js",
     "test": "bun test/runner.js",

package/src/compiler.js

@@ -1072,7 +1072,7 @@ export class CodeGenerator {
   generateReturn(head, rest, context, sexpr) {
     if (rest.length === 0) return 'return';
     let [expr] = rest;
-    if (this.sideEffectOnly) return 'return';
+    if (this.sideEffectOnly && !(this.is(expr, '->') || this.is(expr, '=>'))) return 'return';
 
     if (this.is(expr, 'if')) {
       let [, condition, body, ...elseParts] = expr;

package/src/components.js

@@ -489,7 +489,19 @@ export function installComponentSupport(CodeGenerator, Lexer) {
         }
 
         if (isTemplateElement) {
-          let isClassOrIdTail = tag === 'PROPERTY' && i > 0 && (tokens[i - 1][0] === '.' || tokens[i - 1][0] === '#');
+          let isClassOrIdTail = false;
+          if (tag === 'PROPERTY' && i > 0 && tokens[i - 1][0] === '.') {
+            // Trace backward through the .PROPERTY chain to find its root —
+            // only a CSS class tail if the chain starts from a line-starting template tag
+            let j = i;
+            while (j >= 2 && tokens[j - 1][0] === '.' && tokens[j - 2][0] === 'PROPERTY') j -= 2;
+            if (j >= 2 && tokens[j - 1][0] === '.' && tokens[j - 2][0] === 'IDENTIFIER' && isTemplateTag(tokens[j - 2][1])) {
+              let before = j >= 3 ? tokens[j - 3][0] : null;
+              if (!before || before === 'INDENT' || before === 'OUTDENT' || before === 'TERMINATOR' || before === 'RENDER') {
+                isClassOrIdTail = true;
+              }
+            }
+          }
           let isBareTag = isClsxCallEnd || (tag === 'IDENTIFIER' && isTemplateTag(token[1])) || isClassOrIdTail;
 
           if (isBareTag) {
@@ -1349,7 +1361,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       }
 
       // Regular attribute
-      if (typeof key === 'string') {
+      if (typeof key === 'string' || key instanceof String) {
         // Strip quotes from string keys (e.g., "data-slot" → data-slot)
         if (key.startsWith('"') && key.endsWith('"')) {
           key = key.slice(1, -1);
@@ -1442,7 +1454,11 @@ export function installComponentSupport(CodeGenerator, Lexer) {
             this._pushEffect(`${elVar}.setAttribute('${key}', ${valueCode});`);
           }
         } else {
-          this._createLines.push(`${elVar}.setAttribute('${key}', ${valueCode});`);
+          if (Array.isArray(value) && value[0] === 'presence') {
+            this._createLines.push(`{ const __v = ${valueCode}; if (__v != null) ${elVar}.setAttribute('${key}', __v); }`);
+          } else {
+            this._createLines.push(`${elVar}.setAttribute('${key}', ${valueCode});`);
+          }
         }
       }
     }
@@ -1889,6 +1905,14 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       return true;
     }
 
+    // Method call on component: [['.', 'this', method], ...args]
+    // Methods may read reactive state internally — treat as reactive so the
+    // call gets wrapped in __effect and re-runs when dependencies change.
+    if (Array.isArray(sexpr[0]) && sexpr[0][0] === '.' && sexpr[0][1] === 'this') {
+      const name = _str(sexpr[0][2]);
+      if (name && this.componentMembers?.has(name)) return true;
+    }
+
     for (const child of sexpr) {
       if (this.hasReactiveDeps(child)) return true;
     }