elevhyra 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 21be8707b702866408f2852f54a10933a7445815a508d79581256b26687e2db3
+  data.tar.gz: 9f1b4cf71d0905f9d905c776c62b45e2169a67d5f29d4d4374e4f6b3384fb1ec
+SHA512:
+  metadata.gz: f0905453498d4fd877649b7f86a4d53ffee53f17bdc0354932499ecf2194671b44aed3cff4e9579851884cb82b9d79ddf53b5343265f1aec0841d956ec2c228f
+  data.tar.gz: 2f42b3b933f19227204825caa035b8774857bff74e3db64d3e1c76ab3c178266448697c39367ed00b65fba7113a399f3b153a3fa3efec013e43864611fb361ac

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Elevhyra Demjhon Silver
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,78 @@
+# Elevhyra
+
+[![CI](https://github.com/demjhonsilver/elevhyra/actions/workflows/ci.yml/badge.svg)](https://github.com/demjhonsilver/elevhyra/actions/workflows/ci.yml)
+[![Gem Version](https://badge.fury.io/rb/elevhyra.svg)](https://badge.fury.io/rb/elevhyra)
+
+## Introduction
+
+Elevhyra is a reactive frontend framework inspired by Vue.js, purpose-built for Hyraft applications. It adds signals, routing, and real-time updates to your Ruby backend – enabling modern, reactive UIs without leaving the Hyraft ecosystem.
+
+## Tagline
+
+Elevhyra ( Elevating Hyraft )
+
+Elevhyra - Elevating Hyraft with reactive JavaScript
+
+# Elevhyra
+
+**Elevate your Hyraft applications with reactive JavaScript**
+
+Elevhyra is the reactive frontend framework designed specifically to 
+enhance Hyraft applications, adding signals, routing, and real-time 
+updates to your Ruby backend.
+
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| ⚡ **Signals** | Fine-grained reactive state management |
+| 🧭 **Routing** | Client-side routing with nested views and route guards |
+| 🔄 **Real-time Updates** | Automatic UI synchronization with backend changes |
+| 🧩 **Component System** | Reusable, composable UI components |
+| 🔌 **Hyraft Integration** | First-class support for hexagonal architecture |
+| 📦 **Zero Config** | Works out of the box with Hyraft applications |
+
+## Installation
+
+```bash
+gem install elevhyra
+```
+
+## Installation
+
+TODO: Replace `UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG` with your gem name right after releasing it to RubyGems.org. Please do not do it earlier due to security reasons. Alternatively, replace this section with instructions to install your gem from git if you don't plan to release to RubyGems.org.
+
+Install the gem and add to the application's Gemfile by executing:
+
+```bash
+bundle add UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+```
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+```bash
+gem install UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+```
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/demjhonsilver/elevhyra. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/demjhonsilver/elevhyra/blob/master/CODE_OF_CONDUCT.md).
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the Elevhyra project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/elevhyra/blob/master/CODE_OF_CONDUCT.md).

data/exe/elevhyra

@@ -0,0 +1,33 @@
+#!/usr/bin/env ruby
+
+require_relative "../lib/elevhyra"
+
+case ARGV.first
+when "version", "-v", "--version"
+  puts Elevhyra::VERSION
+when "info"
+  puts "Elevhyra Framework v#{Elevhyra::VERSION}"
+  puts "Status: Active"
+  puts "Type: JavaScript Framework (generated at runtime)"
+  puts "Size: #{Elevhyra.js_content.bytesize} bytes"
+  puts "Integration: Hyraft compatible"
+when "js"
+  # Output the generated JavaScript directly
+  print Elevhyra.js_content
+when "help", "-h", "--help"
+  puts "Elevhyra v#{Elevhyra::VERSION}"
+  puts ""
+  puts "Commands:"
+  puts "  version, -v, --version     Show version number"
+  puts "  info                       Show framework information"
+  puts "  js                         Output generated JavaScript to stdout"
+  puts "  help, -h, --help           Show this help message"
+  puts ""
+  puts "Examples:"
+  puts "  elevhyra info"
+  puts "  elevhyra js > elevhyra.js    # Save generated JS to file"
+  puts "  elevhyra version"
+else
+  puts "Elevhyra v#{Elevhyra::VERSION}"
+  puts "Run 'elevhyra help' for usage"
+end

data/lib/elevhyra/version.rb

@@ -0,0 +1,4 @@
+
+module Elevhyra
+  VERSION = "1.0.0"
+end

data/lib/elevhyra.rb

@@ -0,0 +1,829 @@
+require_relative "elevhyra/version"
+
+module Elevhyra
+  def self.js_content
+    @js_content ||= generate_js_content
+  end
+
+  def self.generate_js_content
+    <<~JAVASCRIPT
+// ============================================================================
+// ELEVHYRA FRAMEWORK v1.0 - ES2025 Modular Architecture
+// Auto-generated at runtime: #{Time.now}
+// ============================================================================
+
+// ============================================================================
+// CORE - Private Symbols (WeakMap-based private storage)
+// ============================================================================
+
+const _signals = new WeakMap()
+const _watchers = new WeakMap()
+const _value = new WeakMap()
+const _routes = new WeakMap()
+const _container = new WeakMap()
+const _params = new WeakMap()
+const _routeMap = new WeakMap()
+
+// ============================================================================
+// MODULE 1: DOM Helpers Module
+// ============================================================================
+
+const DOMHelpers = (() => {
+  const pickElement = (id) => document.getElementById(id)
+  const pickSelector = (selector) => document.querySelector(selector)
+  const pickSelectorAll = (selector) => document.querySelectorAll(selector)
+  
+  const setSelector = (selector, html) => {
+    const element = document.getElementById(selector) || document.querySelector(selector)
+    if (element) element.innerHTML = html
+  }
+  
+  const setEachSelector = (selector, html) => {
+    document.querySelectorAll(selector).forEach(el => el.innerHTML = html)
+  }
+  
+  const fixTrailingSlash = () => {
+    const path = globalThis.location.pathname
+    if (path !== '/' && path.endsWith('/')) {
+      const newPath = path.slice(0, -1) + globalThis.location.search + globalThis.location.hash
+      globalThis.location.replace(newPath)
+    }
+  }
+  
+  return {
+    pickElement, pickSelector, pickSelectorAll,
+    setSelector, setEachSelector, fixTrailingSlash
+  }
+})()
+
+// ============================================================================
+// MODULE 2: Signal System (Reactive State)
+// ============================================================================
+
+const SignalModule = (() => {
+  const signalStore = new Map()
+  const cacheStore = new Map()
+  
+  const sanitizeHtml = (str) => {
+    if (!str || typeof str !== 'string') return str
+    const div = document.createElement('div')
+    div.textContent = str
+    return div.innerHTML
+  }
+  
+  const updateDOM = (name, value, sanitize = true) => {
+    let cached = cacheStore.get(name)
+    
+    if (!cached) {
+      const elements = document.querySelectorAll(`[signal="${name}"]`)
+      const property = elements[0]?.getAttribute('property') || 'text'
+      cached = { elements, property }
+      cacheStore.set(name, cached)
+    }
+    
+    const { elements, property } = cached
+    const finalValue = (property === 'html' && sanitize) ? sanitizeHtml(value) : value
+    
+    for (let i = 0; i < elements.length; i++) {
+      if (property === 'text') elements[i].textContent = finalValue
+      else if (property === 'html') elements[i].innerHTML = finalValue
+      else if (property === 'value') elements[i].value = finalValue
+      else elements[i][property] = finalValue
+    }
+  }
+  
+  const createSignal = (name, initialValue = null) => {
+    if (signalStore.has(name)) return signalStore.get(name)
+    
+    let currentValue = initialValue
+    const watchers = new Set()
+    
+    updateDOM(name, initialValue, false)
+    
+    const signal = {
+      get value() { return currentValue },
+      
+      set value(newValue) {
+        if (Object.is(currentValue, newValue)) return
+        currentValue = newValue
+        updateDOM(name, newValue)
+        watchers.forEach(cb => { try { cb(newValue) } catch(e) { console.error(e) } })
+        if (globalThis.displayIf) globalThis.displayIf(document.body)
+      },
+      
+      watch: (callback) => {
+        watchers.add(callback)
+        return () => watchers.delete(callback)
+      },
+      
+      dispose: () => {
+        watchers.clear()
+        signalStore.delete(name)
+        cacheStore.delete(name)
+      }
+    }
+    
+    signalStore.set(name, signal)
+    return signal
+  }
+  
+  const getSignal = (name) => signalStore.get(name)
+  const getAllSignals = () => Array.from(signalStore.keys())
+  
+  return { Signal: createSignal, getSignal, getAllSignals }
+})()
+
+// ============================================================================
+// MODULE 3: Action System
+// ============================================================================
+
+const ActionModule = (() => {
+  const actionStore = new Map()
+  
+  const registerAction = (name, handlers) => {
+    actionStore.set(name, handlers)
+  }
+  
+  const setupActionListener = () => {
+    document.addEventListener('click', (event) => {
+      let element = event.target
+      while (element && element !== document.body) {
+        const actionAttr = element.getAttribute?.('action')
+        if (actionAttr) {
+          const dotIndex = actionAttr.indexOf('.')
+          if (dotIndex > -1) {
+            const signalName = actionAttr.slice(0, dotIndex)
+            const actionName = actionAttr.slice(dotIndex + 1)
+            const handler = actionStore.get(signalName)?.[actionName]
+            if (handler) handler()
+          }
+          return
+        }
+        element = element.parentElement
+      }
+    })
+  }
+  
+  return { Action: registerAction, setupActionListener }
+})()
+
+// ============================================================================
+// MODULE 4: Router System
+// ============================================================================
+
+const RouterModule = (() => {
+  let routerInstance = null
+  let currentPath = ''
+  let historyStack = []
+  let historyIndex = -1
+  let templateCache = new Map()
+  
+  class Router {
+    constructor(routes, { container } = {}) {
+      _routes.set(this, routes)
+      _container.set(this, typeof container === 'string' 
+        ? document.querySelector(container) || document.body 
+        : container || document.body)
+      _params.set(this, {})
+      _routeMap.set(this, new Map(routes.map(r => [r.path, r])))
+      
+      globalThis.addEventListener('popstate', () => this.#navigate(location.pathname, false))
+      this.#navigate(location.pathname, false)
+    }
+    
+    #matchRoute(path) {
+      const routes = _routes.get(this)
+      for (const route of routes) {
+        let pattern = route.path === '*' ? '.*' : route.path.replace(/:\\w+/g, '([^/]+)')
+        const match = path.match(new RegExp(`^${pattern}$`))
+        if (match) {
+          const paramNames = [...route.path.matchAll(/:\\w+/g)].map(m => m[0].slice(1))
+          const params = Object.fromEntries(paramNames.map((name, i) => [name, match[i + 1]]))
+          return { route, params }
+        }
+      }
+      return null
+    }
+    
+    #executeScripts(container) {
+      const scripts = container.querySelectorAll('script')
+      for (const oldScript of scripts) {
+        const newScript = document.createElement('script')
+        for (const attr of oldScript.attributes) {
+          newScript.setAttribute(attr.name, attr.value)
+        }
+        newScript.textContent = oldScript.textContent
+        oldScript.parentNode.replaceChild(newScript, oldScript)
+      }
+    }
+    
+    #reinitializeSignals() {
+      const signals = SignalModule.getAllSignals()
+      for (const name of signals) {
+        const signal = SignalModule.getSignal(name)
+        if (signal) {
+          const elements = document.querySelectorAll(`[signal="${name}"]`)
+          const property = elements[0]?.getAttribute('property') || 'text'
+          const value = signal.value
+          for (const el of elements) {
+            if (property === 'text') el.textContent = value
+            else if (property === 'html') el.innerHTML = value
+            else if (property === 'value') el.value = value
+            else el[property] = value
+          }
+        }
+      }
+    }
+    
+    #bindLinks(container) {
+      const links = container.querySelectorAll('.elev-link')
+      for (const link of links) {
+        if (link.hasAttribute('data-router-bound')) continue
+        link.setAttribute('data-router-bound', 'true')
+        link.addEventListener('click', (e) => {
+          e.preventDefault()
+          const href = link.getAttribute('href')
+          if (href && !href.startsWith('http') && href !== '#') this.go(href)
+        })
+      }
+    }
+    
+    #scanTemplates(container) {
+      container.querySelectorAll('[display]').forEach(el => {
+        const name = el.getAttribute('display')
+        if (name && !templateCache.has(name)) {
+          templateCache.set(name, el.innerHTML)
+          el.style.display = 'none'
+        }
+      })
+    }
+    
+    async #loadPage(route, params) {
+      _params.set(this, params)
+      try {
+        const res = await fetch(route.page)
+        const html = await res.text()
+        const container = _container.get(this)
+        container.innerHTML = html
+        this.#scanTemplates(container)
+        this.#executeScripts(container)
+        this.#reinitializeSignals()
+        this.#bindLinks(container)
+        if (globalThis.displayIf) globalThis.displayIf(container)
+        globalThis.dispatchEvent(new CustomEvent('route:change', { 
+          detail: { path: currentPath, params, route } 
+        }))
+      } catch (error) {
+        console.error('Failed to load page:', error)
+        _container.get(this).innerHTML = '<div class="alert alert-danger">Failed to load page</div>'
+      }
+    }
+    
+    async #navigate(path, addToHistory = true) {
+      if (path === currentPath) return
+      const match = this.#matchRoute(path)
+      if (!match) {
+        _container.get(this).innerHTML = '<div class="alert alert-danger">Page not found</div>'
+        return
+      }
+      currentPath = path
+      await this.#loadPage(match.route, match.params)
+      if (addToHistory) {
+        historyStack = [...historyStack.slice(0, historyIndex + 1), path]
+        historyIndex++
+        globalThis.history.pushState({}, '', path)
+      }
+    }
+    
+    go = (path) => path && this.#navigate(path, true)
+    back = () => historyIndex > 0 && this.#navigate(historyStack[--historyIndex], false)
+    forward = () => historyIndex < historyStack.length - 1 && this.#navigate(historyStack[++historyIndex], false)
+    reload = () => this.#navigate(currentPath, false)
+    get params() { return _params.get(this) }
+    get current() { return currentPath }
+  }
+  
+  const createRouter = (routes, options) => {
+    routerInstance = new Router(routes, options)
+    return routerInstance
+  }
+  
+  const getRouter = () => routerInstance
+  
+  const setupLinkHandler = () => {
+    document.addEventListener('click', (e) => {
+      const link = e.target.closest('.elev-link')
+      if (!link) return
+      const href = link.getAttribute('href')
+      if (!href || href.startsWith('http') || href === '#') return
+      e.preventDefault()
+      if (routerInstance) routerInstance.go(href)
+    })
+  }
+  
+  return { Router, createRouter, getRouter, setupLinkHandler, templateCache }
+})()
+
+// ============================================================================
+// MODULE 5: API Client
+// ============================================================================
+
+const APIModule = (() => {
+  class APIClient {
+    #baseURL
+    #headers
+    #interceptors = { request: [], response: [] }
+    
+    constructor(baseURL, options = {}) {
+      this.#baseURL = baseURL.replace(/\\/$/, '')
+      this.#headers = options.headers || { 'Content-Type': 'application/json' }
+    }
+    
+    useRequest(interceptor) { this.#interceptors.request.push(interceptor) }
+    useResponse(interceptor) { this.#interceptors.response.push(interceptor) }
+    
+    #buildURL(endpoint, params = {}) {
+      const url = new URL(endpoint, this.#baseURL)
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) url.searchParams.append(key, value)
+      })
+      return url.toString()
+    }
+    
+    async #request(method, endpoint, data = null, params = {}) {
+      const url = this.#buildURL(endpoint, params)
+      let options = { method: method.toUpperCase(), headers: { ...this.#headers } }
+      if (data && ['POST', 'PUT', 'PATCH'].includes(method.toUpperCase())) {
+        options.body = JSON.stringify(data)
+      }
+      for (const interceptor of this.#interceptors.request) {
+        options = interceptor(options) || options
+      }
+      try {
+        const response = await fetch(url, options)
+        let result = await response.json()
+        for (const interceptor of this.#interceptors.response) {
+          result = interceptor(result, response) || result
+        }
+        return { data: result, status: response.status, statusText: response.statusText, headers: response.headers }
+      } catch (error) {
+        throw new Error(`API Error: ${error.message}`)
+      }
+    }
+    
+    get = (endpoint, params) => this.#request('GET', endpoint, null, params)
+    post = (endpoint, data, params) => this.#request('POST', endpoint, data, params)
+    put = (endpoint, data, params) => this.#request('PUT', endpoint, data, params)
+    patch = (endpoint, data, params) => this.#request('PATCH', endpoint, data, params)
+    delete = (endpoint, params) => this.#request('DELETE', endpoint, null, params)
+    getById = (resource, id, params) => this.get(`/${resource}/${id}`, params)
+    create = (resource, data) => this.post(`/${resource}`, data)
+    update = (resource, id, data) => this.put(`/${resource}/${id}`, data)
+    patchUpdate = (resource, id, data) => this.patch(`/${resource}/${id}`, data)
+    remove = (resource, id) => this.delete(`/${resource}/${id}`)
+  }
+  
+  const createAPI = (baseURL, options) => new APIClient(baseURL, options)
+  return { APIClient, createAPI }
+})()
+
+// ============================================================================
+// MODULE 6: Template Displayer
+// ============================================================================
+
+const TemplateModule = (() => {
+  const getValueByPath = (obj, path) => 
+    path.split('.').reduce((current, key) => current?.[key], obj)
+  
+  const displayer = (templateId, data) => {
+    const templateCache = RouterModule.templateCache
+    let template = templateCache.get(templateId)
+    if (!template) {
+      const templateEl = document.querySelector(`[display="${templateId}"]`)
+      if (!templateEl) {
+        console.error(`Template "${templateId}" not found`)
+        return ''
+      }
+      templateEl.style.display = 'none'
+      template = templateEl.innerHTML
+      templateCache.set(templateId, template)
+    }
+    return template.replace(/\\$\\[([\\w.]+)\\]/g, (match, path) => {
+      const value = getValueByPath(data, path)
+      return value !== undefined ? value : match
+    })
+  }
+  
+  const initTemplates = () => {
+    document.querySelectorAll('[display]').forEach(el => el.style.display = 'none')
+  }
+  
+  return { displayer, initTemplates, getValueByPath }
+})()
+
+// ============================================================================
+// MODULE 7: URL/Path Helpers
+// ============================================================================
+
+const URLHelpers = (() => {
+  const getSegments = () => location.pathname.split('/').filter(s => s)
+  
+  const pickPathSegment = (index) => getSegments()[index] || null
+  const pickCurrentPathSegment = (offset = 0) => {
+    const segments = getSegments()
+    return segments[segments.length - 1 + offset] || null
+  }
+  const pickPathParams = () => getSegments()
+  const pickQueryParam = (param) => new URLSearchParams(location.search).get(param)
+  const pickAllQueryParams = () => Object.fromEntries(new URLSearchParams(location.search))
+  const pickPath = () => location.pathname
+  const pickPathMatches = (pattern) => {
+    const path = location.pathname
+    if (pattern.includes(':id')) {
+      const regex = new RegExp('^' + pattern.replace(':id', '\\\\d+') + '$')
+      return regex.test(path)
+    }
+    return path === pattern
+  }
+  const pickExtractId = (pattern) => {
+    if (pattern.includes(':id')) {
+      const regex = new RegExp('^' + pattern.replace(':id', '(\\\\d+)') + '$')
+      const match = location.pathname.match(regex)
+      return match?.[1] || null
+    }
+    return null
+  }
+  
+  return {
+    pickPathSegment, pickCurrentPathSegment, pickPathParams,
+    pickQueryParam, pickAllQueryParams, pickPath,
+    pickPathMatches, pickExtractId
+  }
+})()
+
+// ============================================================================
+// MODULE 8: Conditional Directives
+// ============================================================================
+
+const ConditionalModule = (() => {
+  const evaluateCondition = (condition) => {
+    if (!condition) return false
+    condition = condition.trim()
+    const directSignal = SignalModule.getSignal(condition)
+    if (directSignal !== undefined) {
+      const val = directSignal.value
+      if (typeof val === 'boolean') return val
+      if (typeof val === 'number') return val !== 0
+      if (typeof val === 'string') return val.length > 0 && val !== 'false'
+      if (Array.isArray(val)) return val.length > 0
+      if (typeof val === 'object') return val !== null && Object.keys(val).length > 0
+      return !!val
+    }
+    const lengthZeroMatch = condition.match(/(\w+)\.length\s*===\s*0/)
+    if (lengthZeroMatch) {
+      const signal = SignalModule.getSignal(lengthZeroMatch[1])
+      return signal?.value?.length === 0
+    }
+    const lengthPositiveMatch = condition.match(/(\w+)\.length\s*>\s*0/)
+    if (lengthPositiveMatch) {
+      const signal = SignalModule.getSignal(lengthPositiveMatch[1])
+      return signal?.value?.length > 0
+    }
+    const equalityMatch = condition.match(/(\w+)\s*===\s*(.+)/)
+    if (equalityMatch) {
+      const signalName = equalityMatch[1]
+      let rightValue = equalityMatch[2].trim()
+      const signal = SignalModule.getSignal(signalName)
+      if (signal) {
+        if (rightValue === 'true') rightValue = true
+        else if (rightValue === 'false') rightValue = false
+        else if (!isNaN(rightValue) && rightValue !== '') rightValue = parseFloat(rightValue)
+        else if (rightValue.startsWith('"') || rightValue.startsWith("'")) {
+          rightValue = rightValue.slice(1, -1)
+        }
+        return signal.value === rightValue
+      }
+    }
+    const signal = SignalModule.getSignal(condition)
+    if (signal) {
+      const val = signal.value
+      return Array.isArray(val) ? val.length > 0 : !!val
+    }
+    return false
+  }
+  
+  const displayIf = (container) => {
+    if (!container) return
+    const ifElements = container.querySelectorAll('[if]')
+    for (const ifEl of ifElements) {
+      const condition = ifEl.getAttribute('if')
+      const value = evaluateCondition(condition)
+      if (value) {
+        ifEl.style.display = ''
+        let next = ifEl.nextElementSibling
+        while (next?.hasAttribute && !next.hasAttribute('if')) {
+          if (next.hasAttribute('elseif') || next.hasAttribute('else')) {
+            next.style.display = 'none'
+          }
+          next = next.nextElementSibling
+        }
+      } else {
+        ifEl.style.display = 'none'
+        let next = ifEl.nextElementSibling
+        let found = false
+        while (next?.hasAttribute && !next.hasAttribute('if')) {
+          if (next.hasAttribute('elseif') && !found) {
+            const elseifCondition = next.getAttribute('elseif')
+            if (evaluateCondition(elseifCondition)) {
+              next.style.display = ''
+              found = true
+            } else {
+              next.style.display = 'none'
+            }
+          } else if (next.hasAttribute('else') && !found) {
+            next.style.display = ''
+            found = true
+          } else if (next.hasAttribute('elseif') || next.hasAttribute('else')) {
+            next.style.display = 'none'
+          }
+          next = next.nextElementSibling
+        }
+      }
+    }
+  }
+  
+  return { displayIf, evaluateCondition }
+})()
+
+// ============================================================================
+// MODULE 9: Event Bus (Publish/Subscribe)
+// ============================================================================
+
+const EventBusModule = (() => {
+  const events = new Map()
+  
+  const on = (eventName, callback) => {
+    if (!events.has(eventName)) events.set(eventName, new Set())
+    events.get(eventName).add(callback)
+    return () => events.get(eventName)?.delete(callback)
+  }
+  
+  const once = (eventName, callback) => {
+    const unsubscribe = on(eventName, (event) => {
+      callback(event)
+      unsubscribe()
+    })
+    return unsubscribe
+  }
+  
+  const off = (eventName, callback) => {
+    events.get(eventName)?.delete(callback)
+    if (events.get(eventName)?.size === 0) events.delete(eventName)
+  }
+  
+  const emit = (eventName, data = null) => {
+    const listeners = events.get(eventName)
+    if (!listeners) return false
+    const event = { name: eventName, data, timestamp: Date.now() }
+    for (const listener of listeners) {
+      try { listener(event) } catch(e) { console.error(e) }
+    }
+    return true
+  }
+  
+  const getEvents = () => [...events.keys()]
+  const listenerCount = (eventName) => events.get(eventName)?.size || 0
+  const clearEvents = () => events.clear()
+  
+  return { on, once, off, emit, getEvents, listenerCount, clearEvents }
+})()
+
+// ============================================================================
+// MODULE 10: Event Delegation System
+// ============================================================================
+
+const DelegationModule = (() => {
+  const delegations = new Map()
+  
+  const delegate = (selector, eventType, handler) => {
+    if (!delegations.has(selector)) delegations.set(selector, new Map())
+    const eventMap = delegations.get(selector)
+    if (!eventMap.has(eventType)) eventMap.set(eventType, new Set())
+    eventMap.get(eventType).add(handler)
+    return () => {
+      eventMap.get(eventType)?.delete(handler)
+      if (eventMap.get(eventType)?.size === 0) eventMap.delete(eventType)
+      if (eventMap.size === 0) delegations.delete(selector)
+    }
+  }
+  
+  const live = (eventType, selector, handler) => 
+    delegate(selector, eventType, (e, target) => handler(e, target))
+  
+  const handleDelegation = (event) => {
+    for (const [selector, eventMap] of delegations) {
+      const handlers = eventMap.get(event.type)
+      if (!handlers) continue
+      const target = event.target.closest(selector)
+      if (!target) continue
+      for (const handler of handlers) {
+        try { handler(event, target) } catch(e) { console.error(e) }
+      }
+    }
+  }
+  
+  const events = ['click', 'input', 'submit', 'change', 'keyup', 'keydown']
+  events.forEach(eventType => document.addEventListener(eventType, handleDelegation))
+  
+  const clearDelegations = () => delegations.clear()
+  const getDelegations = () => {
+    const result = {}
+    for (const [selector, eventMap] of delegations) {
+      result[selector] = {}
+      for (const [eventType, handlers] of eventMap) {
+        result[selector][eventType] = handlers.size
+      }
+    }
+    return result
+  }
+  
+  return { delegate, live, clearDelegations, getDelegations }
+})()
+
+// ============================================================================
+// MODULE 11: FromEvent (Signal from DOM Events)
+// ============================================================================
+
+const FromEventModule = (() => {
+  const fromEventSignals = new Map()
+  
+  const fromEvent = (target, eventType, signalName, transform = null) => {
+    if (fromEventSignals.has(signalName)) return fromEventSignals.get(signalName)
+    const element = typeof target === 'string' ? document.querySelector(target) : target
+    if (!element) {
+      console.error(`Element "${target}" not found`)
+      return null
+    }
+    const signal = SignalModule.Signal(signalName, null)
+    const handler = (event) => {
+      const value = transform ? transform(event) : event
+      signal.value = value
+    }
+    element.addEventListener(eventType, handler)
+    fromEventSignals.set(signalName, signal)
+    signal.dispose = () => {
+      element.removeEventListener(eventType, handler)
+      fromEventSignals.delete(signalName)
+    }
+    return signal
+  }
+  
+  return { fromEvent }
+})()
+
+// ============================================================================
+// MODULE 12: WaitFor (Promise-based event waiting)
+// ============================================================================
+
+const WaitForModule = (() => {
+  const waitForResolvers = new Map()
+  
+  const waitFor = (eventName, timeout = null) => {
+    return new Promise((resolve, reject) => {
+      let timeoutId = null
+      if (timeout !== null) {
+        timeoutId = setTimeout(() => {
+          cleanup()
+          reject(new Error(`Timeout waiting for "${eventName}" after ${timeout}ms`))
+        }, timeout)
+      }
+      const resolver = (data) => {
+        cleanup()
+        resolve(data)
+      }
+      const cleanup = () => {
+        if (timeoutId) clearTimeout(timeoutId)
+        waitForResolvers.get(eventName)?.delete(resolver)
+        if (waitForResolvers.get(eventName)?.size === 0) waitForResolvers.delete(eventName)
+      }
+      if (!waitForResolvers.has(eventName)) waitForResolvers.set(eventName, new Set())
+      waitForResolvers.get(eventName).add(resolver)
+    })
+  }
+  
+  const resolveWaitFor = (eventName, data = null) => {
+    const resolvers = waitForResolvers.get(eventName)
+    if (resolvers?.size) {
+      resolvers.forEach(resolver => resolver(data))
+      waitForResolvers.delete(eventName)
+      return true
+    }
+    return false
+  }
+  
+  return { waitFor, resolveWaitFor }
+})()
+
+// ============================================================================
+// MODULE 13: TempState (Auto-clearing reactive state)
+// ============================================================================
+
+const TempStateModule = (() => {
+  const TempState = (initialState) => {
+    let original = structuredClone(initialState)
+    let current = structuredClone(initialState)
+    let subscribers = new Set()
+    
+    const proxy = new Proxy(current, {
+      get(target, prop) {
+        const val = target[prop]
+        if (val && typeof val === 'object') return proxy
+        return val
+      },
+      set(target, prop, val) {
+        if (Object.is(target[prop], val)) return true
+        target[prop] = val
+        subscribers.forEach(cb => cb(prop, val))
+        return true
+      }
+    })
+    
+    return {
+      state: proxy,
+      subscribe: (cb) => { subscribers.add(cb); return () => subscribers.delete(cb) },
+      reset: () => { current = structuredClone(original); subscribers.forEach(cb => cb('*reset*', current)) },
+      get: (path) => path.split('.').reduce((obj, key) => obj?.[key], current),
+      set: (path, val) => {
+        const parts = path.split('.')
+        const last = parts.pop()
+        const target = parts.reduce((obj, key) => obj[key] || (obj[key] = {}), current)
+        target[last] = val
+        subscribers.forEach(cb => cb(path, val))
+      }
+    }
+  }
+  
+  return { TempState }
+})()
+
+// ============================================================================
+// MODULE 14: Public API (Facade Pattern) - COMPLETE
+// ============================================================================
+
+const Elevhyra = (() => {
+  DOMHelpers.fixTrailingSlash()
+  ActionModule.setupActionListener()
+  RouterModule.setupLinkHandler()
+  
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => TemplateModule.initTemplates())
+  } else {
+    TemplateModule.initTemplates()
+  }
+  
+  return {
+    ...DOMHelpers,
+    Signal: SignalModule.Signal,
+    Action: ActionModule.Action,
+    createRouter: RouterModule.createRouter,
+    getRouter: RouterModule.getRouter,
+    createAPI: APIModule.createAPI,
+    displayer: TemplateModule.displayer,
+    ...URLHelpers,
+    displayIf: ConditionalModule.displayIf,
+    tempState: TempStateModule.TempState,
+    ...EventBusModule,
+    ...DelegationModule,
+    fromEvent: FromEventModule.fromEvent,
+    waitFor: WaitForModule.waitFor,
+    resolveWaitFor: WaitForModule.resolveWaitFor
+  }
+})()
+
+globalThis.elev = Elevhyra
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = Elevhyra
+}
+    JAVASCRIPT
+  end
+
+  def self.register_with_hyraft
+    if defined?(Hyraft::Compiler::JavaScriptLibrary) && 
+       Hyraft::Compiler::JavaScriptLibrary.respond_to?(:register)
+      
+      Hyraft::Compiler::JavaScriptLibrary.register('elevhyra', js_content)
+      puts "\e[1;31mElevhyra activated!\e[0m"
+    end
+  end
+end
+
+if defined?(Hyraft)
+  Elevhyra.register_with_hyraft
+else
+  at_exit do
+    if defined?(Hyraft)
+      Elevhyra.register_with_hyraft
+    end
+  end
+end

metadata

@@ -0,0 +1,48 @@
+--- !ruby/object:Gem::Specification
+name: elevhyra
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Demjhon Silver
+bindir: exe
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies: []
+description: ElevHyra provides Signals, Actions, SPA Router, and API client for Hyraft
+  framework
+executables:
+- elevhyra
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- exe/elevhyra
+- lib/elevhyra.rb
+- lib/elevhyra/version.rb
+homepage: https://hyraft.com/elevhyra/docs
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://hyraft.com/elevhyra/docs
+  source_code_uri: https://github.com/hyraft/elevhyra
+  rubygems_mfa_required: 'true'
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 4.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.3
+specification_version: 4
+summary: Reactive JavaScript framework for Hyraft .hyr templates
+test_files: []