RubyGems - funicular - Versions diffs - 0.0.1 → 0.2.0 - Mend

funicular 0.0.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +79 -0
data/README.md +66 -20
data/Rakefile +103 -2
data/demo/keymap_editor.html +582 -0
data/demo/test_cable.html +179 -0
data/demo/test_chartjs.html +235 -0
data/demo/test_component.html +201 -0
data/demo/test_diff_patch.html +146 -0
data/demo/test_error_boundary.html +284 -0
data/demo/test_router.html +257 -0
data/demo/test_vdom.html +100 -0
data/demo/tic-tac-toe.html +201 -0
data/docs/architecture.md +118 -0
data/exe/funicular +32 -0
data/lib/funicular/assets/funicular.css +23 -0
data/lib/funicular/assets/funicular.rb +21 -0
data/lib/funicular/assets/funicular_debug.css +73 -0
data/lib/funicular/assets/funicular_debug.js +183 -0
data/lib/funicular/commands/routes.rb +69 -0
data/lib/funicular/compiler.rb +143 -0
data/lib/funicular/configuration.rb +76 -0
data/lib/funicular/helpers/picoruby_helper.rb +112 -0
data/lib/funicular/middleware.rb +123 -0
data/lib/funicular/plugin.rb +147 -0
data/lib/funicular/railtie.rb +26 -0
data/lib/funicular/route_parser.rb +137 -0
data/lib/funicular/schema.rb +167 -0
data/lib/funicular/ssr/runtime.rb +101 -0
data/lib/funicular/ssr.rb +51 -0
data/lib/funicular/testing/node_runner.mjs +293 -0
data/lib/funicular/testing/node_runner.rb +190 -0
data/lib/funicular/testing.rb +22 -0
data/lib/funicular/vendor/picorbc/VERSION +1 -0
data/lib/funicular/vendor/picorbc/picorbc.js +5283 -0
data/lib/funicular/vendor/picorbc/picorbc.wasm +0 -0
data/lib/funicular/vendor/picoruby/VERSION +1 -0
data/lib/funicular/vendor/picoruby/debug/init.iife.js +130 -0
data/lib/funicular/vendor/picoruby/debug/picoruby.js +6423 -0
data/lib/funicular/vendor/picoruby/debug/picoruby.wasm +0 -0
data/lib/funicular/vendor/picoruby/dist/init.iife.js +130 -0
data/lib/funicular/vendor/picoruby/dist/picoruby.js +2 -0
data/lib/funicular/vendor/picoruby/dist/picoruby.wasm +0 -0
data/lib/funicular/vendor/picoruby-test-node/VERSION +1 -0
data/lib/funicular/vendor/picoruby-test-node/picoruby.js +6885 -0
data/lib/funicular/vendor/picoruby-test-node/picoruby.wasm +0 -0
data/lib/funicular/vendor/picoruby-test-node/picoruby.wasm.map +1 -0
data/lib/funicular/version.rb +1 -1
data/lib/funicular.rb +32 -1
data/lib/generators/funicular/chat/chat_generator.rb +104 -0
data/lib/generators/funicular/chat/templates/application_cable_channel.rb.tt +4 -0
data/lib/generators/funicular/chat/templates/application_cable_connection.rb.tt +4 -0
data/lib/generators/funicular/chat/templates/create_funicular_chat_messages.rb.tt +10 -0
data/lib/generators/funicular/chat/templates/funicular_chat.css.tt +141 -0
data/lib/generators/funicular/chat/templates/funicular_chat_channel.rb.tt +5 -0
data/lib/generators/funicular/chat/templates/funicular_chat_component.rb.tt +135 -0
data/lib/generators/funicular/chat/templates/funicular_chat_component_picotest.rb.tt +64 -0
data/lib/generators/funicular/chat/templates/funicular_chat_controller.rb.tt +4 -0
data/lib/generators/funicular/chat/templates/funicular_chat_message.rb.tt +13 -0
data/lib/generators/funicular/chat/templates/funicular_chat_messages_controller.rb.tt +23 -0
data/lib/generators/funicular/chat/templates/initializer.rb.tt +4 -0
data/lib/generators/funicular/chat/templates/show.html.erb.tt +6 -0
data/lib/tasks/funicular.rake +218 -0
data/minitest/fixtures/funicular_app/components/greeting_component.rb +16 -0
data/minitest/fixtures/funicular_app/initializer.rb +5 -0
data/minitest/funicular_test.rb +13 -0
data/minitest/hydration_test.rb +87 -0
data/minitest/plugin_test.rb +51 -0
data/minitest/schema_test.rb +106 -0
data/minitest/ssr_test.rb +94 -0
data/minitest/test_helper.rb +7 -0
data/minitest/validations_test.rb +183 -0
data/mrbgem.rake +16 -0
data/mrblib/0_validations.rb +206 -0
data/mrblib/1_validators.rb +180 -0
data/mrblib/cable.rb +432 -0
data/mrblib/component.rb +1050 -0
data/mrblib/debug.rb +208 -0
data/mrblib/differ.rb +254 -0
data/mrblib/environment_inquirer.rb +34 -0
data/mrblib/error_boundary.rb +125 -0
data/mrblib/file_upload.rb +192 -0
data/mrblib/form_builder.rb +300 -0
data/mrblib/funicular.rb +245 -0
data/mrblib/html_serializer.rb +121 -0
data/mrblib/http.rb +183 -0
data/mrblib/model.rb +196 -0
data/mrblib/patcher.rb +269 -0
data/mrblib/router.rb +266 -0
data/mrblib/store.rb +304 -0
data/mrblib/store_collection.rb +171 -0
data/mrblib/store_singleton.rb +79 -0
data/mrblib/styles.rb +83 -0
data/mrblib/vdom.rb +273 -0
data/sig/cable.rbs +66 -0
data/sig/component.rbs +149 -0
data/sig/debug.rbs +28 -0
data/sig/differ.rbs +18 -0
data/sig/environment_iquirer.rbs +10 -0
data/sig/error_boundary.rbs +14 -0
data/sig/file_upload.rbs +18 -0
data/sig/form_builder.rbs +29 -0
data/sig/funicular.rbs +24 -1
data/sig/html_serializer.rbs +20 -0
data/sig/http.rbs +37 -0
data/sig/model.rbs +28 -0
data/sig/patcher.rbs +18 -0
data/sig/router.rbs +44 -0
data/sig/store.rbs +89 -0
data/sig/store_collection.rbs +43 -0
data/sig/store_singleton.rbs +19 -0
data/sig/styles.rbs +25 -0
data/sig/validations.rbs +103 -0
data/sig/vdom.rbs +59 -0
metadata +154 -8

data/demo/test_vdom.html ADDED Viewed

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Test VDOM - PicoRuby Funicular</title>
+  <link rel="stylesheet" href="../test.css">
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>VDOM Test Suite</h1>
+  <div id="test-results"></div>
+  <div id="container"></div>
+  <script type="text/ruby">
+    require 'js'
+    require 'funicular'
+    doc = JS.document
+    results = doc.getElementById('test-results')
+    container = doc.getElementById('container')
+    def test_case(name, &block)
+      doc = JS.document
+      results = doc.getElementById('test-results')
+      div = doc.createElement('div')
+      div.className = 'test-case'
+      begin
+        block.call
+        div.className = 'test-case pass'
+        div.textContent = "PASS: #{name}"
+      rescue => e
+        div.className = 'test-case fail'
+        div.textContent = "FAIL: #{name} - #{e.message}"
+      end
+      results.appendChild(div)
+    end
+    test_case("Create Element VNode") do
+      vnode = Funicular::VDOM.create_element('div', { id: 'test' }, 'Hello')
+      raise "Element creation failed" unless vnode.is_a?(Funicular::VDOM::Element)
+      raise "Tag mismatch" unless vnode.tag == 'div'
+      raise "Props mismatch" unless vnode.props[:id] == 'test'
+    end
+    test_case("Create Text VNode") do
+      vnode = Funicular::VDOM.create_text('Hello World')
+      raise "Text creation failed" unless vnode.is_a?(Funicular::VDOM::Text)
+      raise "Content mismatch" unless vnode.content == 'Hello World'
+    end
+    test_case("Render simple element") do
+      container = doc.getElementById('container')
+      vnode = Funicular::VDOM.create_element('p', {}, 'Test paragraph')
+      Funicular::VDOM.render(vnode, container)
+      raise "Rendering failed" unless container.children.length.to_i > 0
+    end
+    test_case("Render element with attributes") do
+      container = doc.getElementById('container')
+      vnode = Funicular::VDOM.create_element('div', { id: 'test-id', class: 'test-class' })
+      Funicular::VDOM.render(vnode, container)
+      child = container.children[0]
+      raise "Attribute not set" unless child && child[:id].to_s == 'test-id'
+    end
+    test_case("Render nested elements") do
+      container = doc.getElementById('container')
+      vnode = Funicular::VDOM.create_element(
+        'div',
+        {},
+        Funicular::VDOM.create_element('h2', {}, 'Title'),
+        Funicular::VDOM.create_element('p', {}, 'Content')
+      )
+      Funicular::VDOM.render(vnode, container)
+      child = container.children[0]
+      raise "Nested rendering failed" unless child && child[:children].length.to_i == 2
+    end
+    test_case("Render text nodes") do
+      container = doc.getElementById('container')
+      vnode = Funicular::VDOM.create_element(
+        'p',
+        {},
+        Funicular::VDOM.create_text('Plain text')
+      )
+      Funicular::VDOM.render(vnode, container)
+      child = container.children[0]
+      raise "Text rendering failed" unless child && child[:textContent].to_s == 'Plain text'
+    end
+    summary = doc.createElement('h2')
+    summary.textContent = 'All tests completed!'
+    summary.style = 'color: green; margin-top: 20px;'
+    results.appendChild(summary)
+  </script>
+  <script src="../init.iife.js"></script>
+</body>
+</html>

data/demo/tic-tac-toe.html ADDED Viewed

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Tic-Tac-Toe - Funicular</title>
+</head>
+<body>
+  <div><a href="../index.html">Back</a></div>
+  <h1>Tic-Tac-Toe (Funicular)</h1>
+  <div id="app"></div>
+  <p>This app is ported from the ReactJS Tic-Tac-Toe tutorial: <a href="https://react.dev/learn/tutorial-tic-tac-toe" target="_blank">https://react.dev/learn/tutorial-tic-tac-toe</a></p>
+  <script type="text/ruby">
+    def calculate_winner(squares)
+      lines = [
+        [0, 1, 2],
+        [3, 4, 5],
+        [6, 7, 8],
+        [0, 3, 6],
+        [1, 4, 7],
+        [2, 5, 8],
+        [0, 4, 8],
+        [2, 4, 6],
+      ]
+      lines.each do |line|
+        a, b, c = line
+        if squares[a] && squares[a] == squares[b] && squares[a] == squares[c]
+          return squares[a]
+        end
+      end
+      nil
+    end
+    class Square < Funicular::Component
+      def handle_click(event)
+        event.preventDefault
+        on_click = props[:on_click]
+        on_click.call if on_click
+      end
+      def render
+        button(class: 'square', onclick: :handle_click) do
+          props[:value] || ''
+        end
+      end
+    end
+    class Board < Funicular::Component
+      def handle_click(i)
+        -> {
+          squares = props[:squares]
+          return if calculate_winner(squares) || squares[i]
+          on_play = props[:on_play]
+          on_play.call(i) if on_play
+        }
+      end
+      def render
+        squares = props[:squares]
+        x_is_next = props[:x_is_next]
+        winner = calculate_winner(squares)
+        status = if winner
+          "Winner: #{winner}"
+        else
+          "Next player: #{x_is_next ? 'X' : 'O'}"
+        end
+        div do
+          div(class: 'status') { status }
+          div(class: 'board-row') do
+            component(Square, value: squares[0], on_click: handle_click(0))
+            component(Square, value: squares[1], on_click: handle_click(1))
+            component(Square, value: squares[2], on_click: handle_click(2))
+          end
+          div(class: 'board-row') do
+            component(Square, value: squares[3], on_click: handle_click(3))
+            component(Square, value: squares[4], on_click: handle_click(4))
+            component(Square, value: squares[5], on_click: handle_click(5))
+          end
+          div(class: 'board-row') do
+            component(Square, value: squares[6], on_click: handle_click(6))
+            component(Square, value: squares[7], on_click: handle_click(7))
+            component(Square, value: squares[8], on_click: handle_click(8))
+          end
+        end
+      end
+    end
+    class Game < Funicular::Component
+      def initialize_state
+        {
+          history: [Array.new(9, nil)],
+          current_move: 0
+        }
+      end
+      def handle_play(i)
+        history = state.history
+        current_move = state.current_move
+        current_squares = history[current_move].dup
+        current_squares[i] = (current_move % 2 == 0) ? 'X' : 'O'
+        next_history = history[0..current_move] + [current_squares]
+        patch(
+          history: next_history,
+          current_move: next_history.length - 1
+        )
+      end
+      def jump_to(move)
+        -> {
+          patch(current_move: move)
+        }
+      end
+      def render
+        history = state.history
+        current_move = state.current_move
+        x_is_next = (current_move % 2 == 0)
+        current_squares = history[current_move]
+        div(class: 'game') do
+          div(class: 'game-board') do
+            component(Board,
+              x_is_next: x_is_next,
+              squares: current_squares,
+              on_play: ->(i) { handle_play(i) }
+            )
+          end
+          div(class: 'game-info') do
+            ol do
+              history.each_with_index do |_squares, move|
+                description = if move > 0
+                  "Go to move ##{move}"
+                else
+                  'Go to game start'
+                end
+                li(key: move) do
+                  button(onclick: jump_to(move)) { description }
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+    puts "Starting Tic-Tac-Toe..."
+    Funicular.start(Game, container: 'app')
+    puts "Game started!"
+  </script>
+  <script src="../init.iife.js"></script>
+</body>
+<style>
+* {
+  box-sizing: border-box;
+}
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+.game-info {
+  margin-left: 20px;
+}
+</style>
+</html>

data/docs/architecture.md ADDED Viewed

@@ -0,0 +1,118 @@
+# Architecture (contributor guide)
+This document is for people working **on** Funicular itself. User-facing
+documentation -- how to build apps with Funicular -- lives at
+[picoruby.org/wasm](https://picoruby.org/funicular-getting-started).
+Funicular is a unidirectional, Virtual DOM-based SPA framework for
+PicoRuby.wasm. State flows down to the DOM; events flow up through `patch()` to
+update state and trigger a re-render. There is no global store, no auto-tracking
+reactivity, and no separate build tool -- compilation rides on the Rails asset
+pipeline.
+## Two sides of one repository
+Funicular ships as two cooperating pieces (plus a Chrome extension):
+- **PicoGem `picoruby-funicular`** (`mrblib/`) -- the runtime that executes in
+  the browser under PicoRuby.wasm. This is the framework proper.
+- **CRubyGem `funicular`** (`lib/`) -- the Rails integration: the compiler
+  wrapper, middleware, railtie, view helpers, and the server-side rendering
+  runtime.
+The same `mrblib/` code also runs under CRuby during SSR (see below), so it must
+stay free of browser-only calls on any server code path
+(`Funicular.server?` is true there).
+## `mrblib/` runtime: responsibilities
+| File(s)                                          | Responsibility                                                            |
+|--------------------------------------------------|---------------------------------------------------------------------------|
+| `funicular.rb`                                   | Top-level module: `start`, `router`, `server?`, `debug_color` export      |
+| `component.rb`                                   | `Funicular::Component` base: state, props, lifecycle, suspense, refs, styles |
+| `vdom.rb`                                         | Virtual DOM nodes and the element-factory DSL (`div`, `button`, ...)      |
+| `differ.rb`                                       | `Differ.diff(old, new)` -- minimal patch set, key-based list reconciliation |
+| `patcher.rb`                                      | `Patcher.apply(dom, patches)` -- apply patches to the real DOM            |
+| `html_serializer.rb`                             | `VDOM::HTMLSerializer` -- VDOM to HTML string (used by SSR)               |
+| `router.rb`                                       | Client-side router, route DSL, `RouteHelpers` generation, History API     |
+| `model.rb`                                        | Object-REST Mapper (`all`/`find`/`create`/`update`/`destroy`)            |
+| `http.rb`                                         | Low-level fetch wrapper, CSRF, IndexedDB response cache                    |
+| `cable.rb`                                        | ActionCable-compatible consumer/subscription client                       |
+| `store.rb`, `store_singleton.rb`, `store_collection.rb` | IndexedDB-backed stores, scope API, `subscribes_to`, event dispatch |
+| `form_builder.rb`                                | `form_for` and field helpers with inline error rendering                  |
+| `0_validations.rb`, `1_validators.rb`            | ActiveModel-style validators and `errors`                                 |
+| `styles.rb`                                       | CSS-in-Ruby `styles` DSL and the `s` helper                              |
+| `error_boundary.rb`                              | `ErrorBoundary` component                                                 |
+| `file_upload.rb`                                 | File / FormData upload helper                                              |
+| `debug.rb`                                        | Development-only component/error registry for the DevTools extension      |
+| `environment_inquirer.rb`                        | Environment detection (`server?`, `development?`)                         |
+The render cycle: a state change calls `patch()`, which rebuilds the component's
+VDOM, diffs it against the previous VDOM with `Differ`, and applies the result
+with `Patcher`. Event handlers are native DOM listeners, re-bound on each render.
+## `lib/` Rails integration
+- `compiler.rb` -- runs the vendored `picorbc` (WebAssembly, via Node.js) to
+  compile `app/funicular/**/*.rb` (models, then stores, then components, then
+  initializers) into a single `app/assets/builds/app.mrb`. `-g` is added in
+  development for debug symbols.
+- `middleware.rb` -- development only; watches `app/funicular/` and recompiles on
+  change, then invalidates the Propshaft asset cache.
+- `railtie.rb` -- inserts the middleware, exposes view helpers, loads the rake
+  tasks.
+- `helpers/picoruby_helper.rb` -- `picoruby_include_tag`,
+  `funicular_app_container`, `funicular_state_tag`.
+- `configuration.rb` -- per-environment runtime source selection
+  (`:local_debug` / `:local_dist` / `:cdn`).
+- `ssr.rb`, `ssr/runtime.rb` -- load the `mrblib/` runtime into the Rails process
+  and render a route's VDOM to HTML, injecting state for client hydration.
+- `schema.rb` -- introspect an ActiveRecord model's `validators_on` and emit
+  client-side validators inline with the schema.
+## Vendored artifacts
+`rake copy_wasm` (run by `rake build`) copies the PicoRuby.wasm runtime and the
+`picorbc` compiler from the sibling `mrbgems/picoruby-wasm/npm/` directory into
+`lib/funicular/vendor/`:
+- `vendor/picoruby/dist/` -- production runtime build
+- `vendor/picoruby/debug/` -- development runtime build (debug symbols)
+- `vendor/picorbc/` -- the mruby compiler (run through Node.js)
+Because `copy_wasm` reads sibling directories inside the picoruby repository, it
+only works from within that checkout -- see Development below.
+## Server-side rendering, briefly
+For SSR the `mrblib/` framework is loaded into the Rails process under CRuby.
+`Funicular::SSR.render(path:, state:)` resolves the path against the routes in
+`app/funicular/initializer.rb`, builds the component's VDOM, and serializes it
+with `HTMLSerializer`. The state is also embedded as `window.__FUNICULAR_STATE__`
+so the browser can hydrate the markup rather than rebuild it. Keep `render`
+deterministic and free of browser-only calls so the same code is safe on both
+sides.
+## Development
+This repository is a submodule of
+[picoruby/picoruby](https://github.com/picoruby/picoruby). Do not check it out
+standalone; clone the parent and work from there:
+```console
+git clone --recurse-submodules https://github.com/picoruby/picoruby.git
+cd picoruby/mrbgems/picoruby-funicular
+```
+The CRubyGem side (`lib/`, `funicular.gemspec`) can be developed and tested
+independently inside that directory, but `rake copy_wasm` relies on sibling
+directories within the picoruby repository and fails from a standalone checkout.
+PicoGem dependencies are declared in `mrbgem.rake` (picoruby-wasm,
+picoruby-indexeddb, picoruby-json, and the mruby `*-ext` gems).
+## Testing
+- CRubyGem (Rails integration): `rake test` in this repository.
+- PicoGem runtime: `rake test:gems:picoruby[picoruby-funicular]` in the parent
+  picoruby repository, where `mrbgems/picoruby-funicular` exists as a submodule.

data/exe/funicular ADDED Viewed

@@ -0,0 +1,32 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+require "bundler/setup"
+require "funicular"
+command = ARGV[0]
+case command
+when "routes"
+  require_relative "../lib/funicular/commands/routes"
+  Funicular::Commands::Routes.new.execute
+when "version", "-v", "--version"
+  puts Funicular::VERSION
+when "help", "-h", "--help", nil
+  puts <<~HELP
+    Funicular CLI
+    Usage:
+      funicular routes         Show all Funicular routes
+      funicular version        Show Funicular version
+      funicular help           Show this help message
+    Options:
+      -h, --help              Show help
+      -v, --version           Show version
+  HELP
+else
+  puts "Unknown command: #{command}"
+  puts "Run 'funicular help' for usage"
+  exit 1
+end

data/lib/funicular/assets/funicular.css ADDED Viewed

@@ -0,0 +1,23 @@
+/* Funicular base styles.
+ *
+ * Injected into the page by picoruby_include_tag so that class names emitted
+ * from inside the gem (which the host app's CSS pipeline never sees -- e.g.
+ * Tailwind only scans the app's own sources) still render. Keep this minimal
+ * and namespaced under .funicular-* so it cannot clash with app styles.
+ *
+ * Apps that prefer their own utilities can override per form via
+ * form_for(..., field_error_class: "...", error_class: "..."). */
+.funicular-field-error {
+  border-color: #ef4444 !important; /* red-500, wins over a base border color */
+  background-color: #fef2f2;        /* red-50 */
+  box-shadow: 0 0 0 1px #ef4444;
+}
+.funicular-error {
+  margin-top: 0.25rem;
+  color: #dc2626;                   /* red-600 */
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}

data/lib/funicular/assets/funicular.rb ADDED Viewed

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+# Exclude app/funicular from autoloading (PicoRuby.wasm code, not for CRuby)
+Rails.autoloaders.main.ignore(Rails.root.join("app/funicular"))
+# Choose where picoruby_include_tag loads PicoRuby.wasm from, per environment.
+#
+# Available sources:
+#   :local_debug - public/picoruby/debug/init.iife.js (debug build, larger, with symbols)
+#   :local_dist  - public/picoruby/dist/init.iife.js  (production build, smaller)
+#   :cdn         - https://cdn.jsdelivr.net/npm/@picoruby/wasm-wasi@<version>/dist/init.iife.js
+#
+# Defaults:
+#   development -> :local_debug
+#   test        -> :local_debug
+#   production  -> :local_dist
+#
+# Funicular.configure do |config|
+#   config.production_source = :cdn
+#   # config.cdn_version = "4.0.0"  # defaults to the version vendored in the gem
+# end

data/lib/funicular/assets/funicular_debug.css ADDED Viewed

@@ -0,0 +1,73 @@
+/* Funicular Component Highlighter - Development Mode Only */
+/* Highlights components with data-component attributes for easier debugging */
+.funicular-debug-highlight {
+  outline: 2px solid var(--funicular-highlight-color, #00ff00) !important;
+  outline-offset: -2px !important;
+  position: relative !important;
+  box-shadow: inset 0 0 0 2px rgba(0, 255, 0, 0.2) !important;
+}
+.funicular-debug-indicator {
+  position: absolute !important;
+  bottom: 0 !important;
+  right: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  border-style: solid !important;
+  border-width: 0 0 14px 14px !important;
+  border-color: transparent transparent var(--funicular-highlight-color, #00ff00) transparent !important;
+  pointer-events: auto !important;
+  z-index: 999999 !important;
+  cursor: help !important;
+}
+.funicular-debug-indicator::before {
+  content: attr(data-tooltip) !important;
+  position: absolute !important;
+  bottom: -14px !important;
+  right: 0 !important;
+  background-color: rgba(0, 0, 0, 0.95) !important;
+  color: white !important;
+  padding: 6px 10px !important;
+  border-radius: 4px !important;
+  border: 1px solid var(--funicular-highlight-color, #00ff00) !important;
+  font-size: 13px !important;
+  font-family: 'Courier New', monospace !important;
+  white-space: nowrap !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  transform: translateY(8px) !important;
+  transition: opacity 0.2s, transform 0.2s !important;
+  z-index: 1000000 !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
+}
+.funicular-debug-indicator:hover::before {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+/* PicoRuby DevTools Selected Component Highlight */
+.picoruby-devtools-selected {
+  position: relative !important;
+}
+.picoruby-devtools-selected::after {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  background-color: rgba(0, 122, 204, 0.1) !important;
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 10px,
+    rgba(0, 122, 204, 0.15) 10px,
+    rgba(0, 122, 204, 0.15) 20px
+  ) !important;
+  pointer-events: none !important;
+  z-index: 999998 !important;
+}