fuik 0.11.0 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b15633f53ffe1c5c7dad94fb1d5151a8c2bce010318854cc50a4e3afbe48c828
-  data.tar.gz: 0ba925e04a5271e77a8a8ed4c80bbda7a4a00a5d9d87c6b3b304104519988a29
+  metadata.gz: 7e63ae360a189d38134db206274a5733ad73ea37ae2b338686c952df7ac3c109
+  data.tar.gz: c59410136f9c4143690b96b496c3e83fdf0419d806cc308a5ab4e73c1c1b21fb
 SHA512:
-  metadata.gz: 5c7c0c9ee432bd0702969c6238c0ceea4200da1370350a4d88337f14252bc6f4bce0990a0c80e49dd862de9f25459c4cd1a1f5b914e41de1b021e0ba3b21c255
-  data.tar.gz: 93e200fcc81563e5f6a9699067c6543c4e4b26af42f1504dff84aa0a2e59ce89efe2fb2a571dde5fd2bc298bded45b2c9b332d44c1deb79fea22ce4f0130248b
+  metadata.gz: 07d53ebe3d570ec39d8e2b669492433972789437100dd811b795e5abad902e5d921fc93cf6714c3fef5f5a484cbcdedab04280becea9ec02fb2e65e762517beb
+  data.tar.gz: 604fb6bc76e23853ca980b1f25861eab8ee45bfd2f0d66182d805db8b133fe411d35e485b44042937114236a040e5deb9563f248a703f245cedcc86d58b40cdc

data/README.md

@@ -6,7 +6,6 @@ Fuik (Dutch for fish trap) is a Rails engine that catches and stores webhooks fr
 
 <img alt="Fuik admin interface" src="https://raw.githubusercontent.com/Rails-Designer/fuik/HEAD/.github/docs/webhooks-index.jpg" style="max-width: 100%;">
 
-
 **Sponsored By [Rails Designer](https://railsdesigner.com/)**
 
 <a href="https://railsdesigner.com/" target="_blank">
@@ -58,7 +57,17 @@ Visit `/webhooks` to see all received webhooks. Click any event to view all the
 
 <img alt="Fuik event detail interface" src="https://raw.githubusercontent.com/Rails-Designer/fuik/HEAD/.github/docs/event-detail.jpg" style="max-width: 100%;">
 
-⚠️ The `/webhooks` path is by default not protected. Easiest is to set `Fuik::Engine.config.events_controller_parent` to a controller that requires authentication.
+⚠️ The `/webhooks` path is by default not protected. Set `Fuik.configuration.events_controller_parent` to a controller that requires authentication.
+
+
+### Dashboard features
+
+* **Copy payload as JSON**: click a button, payload is in your clipboard
+* **Download payload as JSON file**: keep it for testing, debugging or throw it at your LLM agent, bot or colleague
+* **Add `.json` to any URL**: get the raw payload without the UI
+* **`GET /events.json`**: index as JSON with filter support
+* **Click any key to get the Ruby accessor path**: click any key and get, e.g. `payload["line_items"][0]["product_id"]` (say what? 🤯)
+
 
 
 ### Add business logic
@@ -124,64 +133,192 @@ end
 If `Provider::Base.verify!` exists, Fuik calls it automatically. Invalid signatures return 401 without storing the webhook.
 
 
+### Configuration
+
+Configure Fuik in `config/initializers/fuik.rb`:
+```ruby
+Fuik.configure do |config|
+  # config.events_controller_parent = "AdministrationController"
+  # config.providers_allowed = %w[stripe github postmark]
+end
+```
+
+
+### Custom job class
+
+Webhook events are processed asynchronously by `Fuik::WebhookProcessingJob`. When processing raises, the event is marked as `failed` so you can retry it from the dashboard.
+
+Define a custom job class, then configure Fuik to use it:
+```ruby
+# app/jobs/webhook_processing_job.rb
+class WebhookProcessingJob < ApplicationJob
+  queue_as :webhooks
+
+  retry_on MyApp::WebhookError, attempts: 5
+  discard_on ActiveJob::DeserializationError
+
+  def perform(event_class_name, webhook_event)
+    event_class_name.safe_constantize.new(webhook_event).process!
+  end
+end
+```
+
+```ruby
+# config/initializers/fuik.rb
+Fuik.configure do |config|
+  config.webhook_processing_job_class = "WebhookProcessingJob"
+end
+```
+
+The `perform` method receives two arguments:
+- `event_class_name`: a string like `"Stripe::CheckoutSessionCompleted"` that resolves to your event class
+- `webhook_event`: the `Fuik::WebhookEvent` record with the payload, headers and status
+
+
+### Testing event classes
+
+Unit test your `process!` methods without a database using the built-in test helper:
+```ruby
+# test/test_helper.rb
+require "fuik/test_helpers"
+
+class ActiveSupport::TestCase
+  include Fuik::TestHelpers
+end
+```
+
+```ruby
+# test/webhooks/stripe/checkout_session_completed_test.rb
+module Stripe
+  class CheckoutSessionCompletedTest < ActiveSupport::TestCase
+    test "processes a completed checkout" do
+      event = build_webhook_event(
+        provider: "stripe",
+        event_type: "checkout.session.completed",
+        payload: { "client_reference_id" => "user_123" }
+      )
+
+      CheckoutSessionCompleted.new(event).process!
+
+      assert_equal "processed", event.status
+    end
+
+    test "fails when customer is not found" do
+      event = build_webhook_event(
+        provider: "stripe",
+        event_type: "checkout.session.completed",
+        payload: {}
+      )
+
+      CheckoutSessionCompleted.new(event).process!
+
+      assert_equal "failed", event.status
+      assert_equal "Customer not found", event.error
+    end
+  end
+end
+```
+
+Your `process!` calls `@webhook_event.processed!` on success and `@webhook_event.failed!(error)` on failure:
+```ruby
+module Stripe
+  class CheckoutSessionCompleted < Base
+    def process!
+      user = User.find_by(id: payload.client_reference_id)
+
+      if user.present?
+        user.activate_subscription!
+
+        @webhook_event.processed!
+      else
+        @webhook_event.failed!("Customer not found")
+      end
+    end
+  end
+end
+```
+
+
 ### Provider allowlist
 
 By default:
 - **Development/test**: all providers are allowed
 - **Production/staging**: only providers in `app/webhooks/` are allowed
 
-Configure with `Fuik::Engine.config.providers_allowed`:
+Configure with `Fuik.configuration.providers_allowed`:
 ```ruby
 # Allow all (including production)
-Fuik::Engine.config.providers_allowed = :all
+Fuik.configuration.providers_allowed = :all
 
 # Explicit allowlist (overrides directory scan)
-Fuik::Engine.config.providers_allowed = %w[stripe github shopify]
+Fuik.configuration.providers_allowed = %w[stripe github postmark]
 ```
 
 Unknown providers return `404 Not Found`.
 
 
-### Pre-packaged providers
-
-Fuik includes ready-to-use [templates for common providers](https://github.com/Rails-Designer/fuik/tree/main/lib/generators/fuik/provider/templates).
-
-
 ### Event type & ID lookup
 
 Fuik automatically extracts event types and IDs from common locations:
 
 **Event Type:**
-1. provider config (if exists);
+1. provider Base class (if configured);
 2. common headers (`X-Github-Event`, `X-Event-Type`, etc.);
 3. payload (`type`, `event`, `event_type`);
 4. falls back to `"unknown"`.
 
 **Event ID:**
-1. provider config (if exists);
+1. provider Base class (if configured);
 2. common headers (`X-GitHub-Delivery`, `X-Event-Id`, etc.);
 3. payload (`id`).
 4. falls back to MD5 hash of request body.
 
 
-#### Custom lookup via config
+#### Custom lookup
 
-Create `app/webhooks/provider_name/config.yml`:
-```yaml
-event_type:
-  source: header
-  key: X-Custom-Event
+Define `event_type` and/or `event_id` on your provider's Base class if Fuik can't find them on its own:
+```ruby
+module CustomProvider
+  class Base < Fuik::Event
+    event_type header: "X-Custom-Event"
+    event_id header: "X-Custom-Id"
+  end
+end
+```
 
-event_id:
-  source: payload
-  key: custom_id
+You can also read from the payload body or use a static value:
+```ruby
+event_type payload: "event_type"  # payload["event_type"]
+event_type payload: "data.type"  # nested via dot-notation (payload["data"]["type"])
+event_type "always_this_value"  # static/literal
+
+event_id payload: "id"
+```
+
+
+### Pre-packaged providers
+
+Fuik includes ready-to-use [templates for common providers](https://github.com/Rails-Designer/fuik/tree/main/lib/generators/fuik/provider/templates).
+
+
+## Monitoring
+
+Fuik publishes lifecycle events via `ActiveSupport::Notifications`. Subscribe to track webhook activity:
+```ruby
+ActiveSupport::Notifications.subscribe("webhook_received.fuik") do |event|
+  Rails.logger.info("[Fuik] Received #{event.payload[:provider]}:#{event.payload[:event_type]}")
+end
 ```
 
-The options for `event_type`'s source are:
+Available events:
 
-- header
-- payload
-- static; for cases when no event type is present in header or payload
+| Event | When it fires |
+|---|---|
+| `webhook_received.fuik` | Event record created |
+| `webhook_processed.fuik` | `process!` completed |
+| `webhook_failed.fuik` | `process!` raised |
+| `webhook_signature_invalid.fuik` | Signature verification failed (401) |
+| `webhook_receive_error.fuik` | Unexpected error during receive (500) |
 
 
 ## Add your custom provider

data/app/assets/javascript/attractivejs-0.12.0.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Attractive=e()}(this,(function(){"use strict";class t{static enabled=!1;static prefix="🧲 ";static log(...t){this.enabled&&console.log(this.prefix,...t)}static warn(...t){this.enabled&&console.warn(this.prefix,...t)}static error(...t){this.enabled&&console.error(this.prefix,...t)}static throw(t){throw new Error(`${this.prefix}${t}`)}}class e{#t;constructor(e){t.log("Events with actions:",Object.keys(e)),this.#t=e}process(t,{on:e,using:s}){e&&this.#e(e.dataset.action).some((r=>!1===this.#s(r,{for:t,on:e,using:s})))}#e(t){return t.split(" ").filter((t=>t))}#s(e,{for:s,on:r,using:i}){if(t.log("Process action for",s.type,"on",r,"…"),e.includes(":")){const[t,r]=e.split(":");if(s.type!==r)return;e=t}else if(e.includes("->")){const[t,r]=e.split("->");if((t.includes("@")?t.split("@")[1]:t)!==s.type)return;e=r}else if(s.type!==i)return;return t.log("…","processed action for",s.type,"on",r),this.#r(e,{on:r,for:s})}#r(e,{on:s,for:r}){t.log("Execute action",e,"on",s,"…");const i=e.split("#"),[n,a,o]=i,c=this.#t[n]?n:a??e;if("function"!=typeof this.#t[c])return;const l=this.#t[n]?i.slice(1).join("#"):o??null,u=this.#t[c](s,{value:l,target:s.dataset.target,targets:s.dataset.targets});return!1===u&&r&&r.preventDefault(),t.log("…","executed action",e,"on",s),u}}var s=new class{identify({by:t}){return t.split(" ").filter((t=>t.includes("->"))).map((t=>t.split("->")[0]))}getDefault({from:t}){const e=t.tagName.toLowerCase(),s="input"===e,r=s?t.type||"text":null;return s?this.#i.input[r]||this.#i.input.default:this.#i[e]||this.#i.default}#i={a:"click",button:"click",input:{checkbox:"change",radio:"change",submit:"click",button:"click",reset:"click",default:"input"},select:"change",textarea:"input",form:"submit",default:"click"}};class r{#n;#a;#o;constructor(t,e=null){this.#n=t,this.#a=e}start(t){if(window.MutationObserver)return this.#o=new MutationObserver((e=>{const s=new Set,r=new Set;e.forEach((e=>this.#c(e,{for:t,elements:{added:s,removed:r}}))),s.forEach((t=>this.#n(t))),this.#a&&r.forEach((t=>this.#a(t)))})),this.#o.observe(document.documentElement,{childList:!0,subtree:!0}),this}stop(){return this.#o&&this.#o.disconnect(),this}#c(t,{for:e,elements:{added:s,removed:r}}){"childList"===t.type&&(t.addedNodes.forEach((t=>{this.#l(t,{for:e,and:s})})),t.removedNodes.forEach((t=>{this.#l(t,{for:e,and:r})})))}#l(t,{for:e,and:s}){t.nodeType===Node.ELEMENT_NODE&&(t.matches&&t.matches(e)&&s.add(t),t.querySelectorAll&&t.querySelectorAll(e).forEach((t=>s.add(t))))}}var i=new class{#u={mounted:(t,e)=>{e()},now:(t,e)=>{e()},whenVisible:(t,e)=>{const s=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(e(),s.disconnect())}))}));s.observe(t)}};setup({for:t,on:e,trigger:s}){const r=this.#u[t];return!!r&&(r(e,s),!0)}};class n{constructor(t,e={}){if(!t)throw new Error("Current element is required");this.currentElement=t,this.target=e.target,this.targetsSelector=e.targets,this.options=e}get targets(){if(this.targetsSelector)return Array.from(document.querySelectorAll(this.targetsSelector));if(this.target){const t=document.getElementById(this.target);return t?[t]:[]}return[this.currentElement]}cycledValue(t,e){const s=Array.isArray(e)?e:e.split(",").map((t=>t.trim())),r=s.indexOf(t);return s[(r+1)%s.length]}}class a extends n{constructor(t,e={}){super(t,e);const[s,r]=e.value.split("=");this.attribute=s,this.value=r}toggle(){this.attribute&&this.targets.forEach((t=>t.hasAttribute(this.attribute)?t.removeAttribute(this.attribute):t.setAttribute(this.attribute,this.value||"")))}cycle(){this.value&&this.targets.forEach((t=>this.#h(t)))}add(){this.attribute&&this.targets.forEach((t=>t.setAttribute(this.attribute,this.value||"")))}remove(){this.attribute&&this.targets.forEach((t=>t.removeAttribute(this.attribute)))}#h(t){const e=this.cycledValue(t.getAttribute(this.attribute),this.value);t.setAttribute(this.attribute,e)}}const o=t=>(e,s={})=>new a(e,s)[t]();var c={toggleAttribute:o("toggle"),cycleAttribute:o("cycle"),addAttribute:o("add"),removeAttribute:o("remove")};const l=t=>t?.split(",").map((t=>t.trim())).filter(Boolean)??[];class u extends n{constructor(t,e={}){super(t,e),this.value=l(e.value)}toggle(){this.value&&this.targets.forEach((t=>this.#d({forEach:t})))}cycle(){this.value&&0!==this.value.length&&this.targets.forEach((t=>this.#f(t)))}add(){this.value&&this.targets.forEach((t=>t.classList.add(...this.value)))}remove(){this.value&&this.targets.forEach((t=>t.classList.remove(...this.value)))}#d({forEach:t}){this.value.forEach((e=>t.classList.toggle(e)))}#f(t){const e=this.value.find((e=>t.classList.contains(e)))||"",s=this.cycledValue(e,this.value);t.classList.remove(...this.value),t.classList.add(s)}}const h=t=>(e,s={})=>new u(e,s)[t]();var d={toggleClass:h("toggle"),cycleClass:h("cycle"),addClass:h("add"),removeClass:h("remove")};let f;const g=(t,e)=>{clearTimeout(f),f=setTimeout(t,e)};class v extends n{constructor(t,e={}){super(t,e),this.value=e.value}async copy(){const t=this.value||(this.targets[0]?.value??this.targets[0]?.textContent);if(void 0!==t)try{await navigator.clipboard.writeText(t),this.#g(!0)}catch(t){this.#g(!1)}}#g(t){const e=parseInt(this.currentElement.dataset.copyDelay);this.targets.forEach((e=>e.setAttribute(this.#v,t))),e&&g((()=>this.targets.forEach((t=>t.removeAttribute(this.#v)))),e)}get#v(){return"data-copy-success"}}var m,p={copy:(m="copy",(t,e={})=>new v(t,e)[m]())};class b extends n{confirm(){const t=this.currentElement.dataset.confirmMessage||"Are you sure?",e=window.confirm(t);return this.#g(e),e}#g(t){this.currentElement.setAttribute("data-confirm-success",t);const e=this.currentElement.dataset.confirmDuration;e&&g((()=>this.currentElement.removeAttribute("data-confirm-success")),parseInt(e))}}var E={confirm:(t=>(e,s={})=>new b(e,s)[t]())("confirm")};class w extends n{constructor(t,e={}){super(t,e);const[s,r]=e.value.split("=");this.attribute=s,this.value=r}toggle(){this.attribute&&this.targets.forEach((t=>{this.attribute in t.dataset?delete t.dataset[this.attribute]:t.dataset[this.attribute]=this.value||""}))}cycle(){this.value&&this.targets.forEach((t=>this.#m(t)))}add(){this.attribute&&this.targets.forEach((t=>{t.dataset[this.attribute]=this.value||""}))}remove(){this.attribute&&this.targets.forEach((t=>delete t.dataset[this.attribute]))}#m(t){const e=this.cycledValue(t.dataset[this.attribute],this.value);t.dataset[this.attribute]=e}}const y=t=>(e,s={})=>new w(e,s)[t]();var A={toggleDataAttribute:y("toggle"),cycleDataAttribute:y("cycle"),addDataAttribute:y("add"),removeDataAttribute:y("remove")};class L extends n{open(){this.targets.forEach((t=>t instanceof HTMLDialogElement&&t.show()))}openModal(){this.targets.forEach((t=>t instanceof HTMLDialogElement&&t.showModal()))}close(){this.targets.forEach((t=>t instanceof HTMLDialogElement&&t.close()))}}const T=t=>(e,s={})=>{new L(e,s)[t]()};var x={open:T("open"),openModal:T("openModal"),close:T("close")};class M extends n{add(){const t=this.targets[0];if(!t)return;const e=this.currentElement.dataset.addSource;if(!e)return;const s=document.querySelector(e);if(!s)return;const r=this.#p(s),i=this.currentElement.dataset.addAt||"beforeend";t.insertAdjacentElement(i,r)}remove(){const t=parseInt(this.currentElement.dataset.removeDelay),e=()=>{this.targets.forEach((t=>t.remove()))};t?setTimeout(e,t):e()}#p(t){return"TEMPLATE"===t.tagName?t.content.cloneNode(!0).firstElementChild:t.cloneNode(!0)}}const S=t=>(e,s={})=>new M(e,s)[t]();var k={add:S("add"),remove:S("remove")};class N extends n{requestSubmit(){const t=parseInt(this.currentElement.dataset.submitDelay)||0,e=()=>this.targets.forEach((t=>t instanceof HTMLFormElement&&t.requestSubmit()));t?g(e,t):e()}reset(){this.targets.forEach((t=>t instanceof HTMLFormElement&&t.reset()))}}const F=t=>(e,s={})=>{new N(e,s)[t]()};var D={submit:F("requestSubmit"),reset:F("reset")};class q extends n{constructor(t,e={}){super(t,e),this.classNames=l(e.value),this.justOnce="intersect-once"===e.actionName}start(){if(0===this.classNames.length)return;const t=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting?this.#b(t,e.target):this.#E()}))}));t.observe(this.currentElement)}#b(t,e){this.targets.forEach((t=>t.classList.add(...this.classNames))),this.justOnce&&t.unobserve(e)}#E(){this.justOnce||this.targets.forEach((t=>t.classList.remove(...this.classNames)))}}const C=t=>(e,s={})=>new q(e,{...s,actionName:t}).start();var O={"intersect-once":C("intersect-once"),"intersect-toggle":C("intersect-toggle")};class I extends n{reload(){this.targets.forEach((t=>{this.#w(t)?t.reload():window.location.reload()}))}#w(t){return"TURBO-FRAME"===t.tagName&&"function"==typeof t.reload}}const H=t=>(e,s={})=>new I(e,s)[t]();var V={reload:H("reload"),refresh:H("reload")};class j{static get(){const t=document.querySelector('meta[name="csrf-token"]')?.content;return t||null}}class $ extends n{constructor(t,e={}){super(t,e),this.value=e.value}async get(){if(this.value){this.#y({with:this.value})&&console.warn(`Cross-origin request to: ${this.value}. Missing the correct CORS headers.`),this.#g("busy");try{const t=await fetch(this.value,{method:"GET"});if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const e=await t.text();return this.targets.forEach((t=>{t.innerHTML=e})),this.#g("success"),t}catch(t){throw console.error("GET request failed:",t),this.#g("error"),t}}else console.warn("No URL provided in the action value")}post(){return this.#A("POST")}patch(){return this.#A("PATCH")}put(){return this.#A("PUT")}#y({with:t}){try{return new URL(t,window.location.href).origin!==window.location.origin}catch{return console.error("Invalid URL:",t),!1}}#g(t){const e=this.currentElement.dataset.requestDuration;this.targets.forEach((e=>{"busy"===t?(e.setAttribute("data-request-busy","true"),e.removeAttribute("data-request-success")):(e.removeAttribute("data-request-busy"),e.setAttribute("data-request-success","success"===t))})),e&&"busy"!==t&&g((()=>{this.targets.forEach((t=>t.removeAttribute("data-request-success")))}),parseInt(e))}#A(t){if(this.value)return this.#g("busy"),fetch(this.value,{method:t,headers:{"Content-Type":"application/json","X-CSRF-Token":j.get()},body:JSON.stringify(this.#L)}).then((t=>{if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);return this.#g("success"),t})).catch((e=>{throw console.error(`${t} request failed:`,e),this.#g("error"),e}));console.warn("No URL provided in the action value")}get#L(){const t={},e=this.targets[0];if(e instanceof HTMLFormElement){const s=new FormData(e);for(const[e,r]of s.entries())t[e]=r;return t}if(this.#T){const e=this.currentElement.name,s=this.currentElement.value;t[e]=s}return t}get#T(){return this.currentElement instanceof HTMLInputElement||this.currentElement instanceof HTMLSelectElement||this.currentElement instanceof HTMLTextAreaElement&&this.currentElement.name}}const R=t=>(e,s={})=>new $(e,s)[t]();var P={get:R("get"),post:R("post"),patch:R("patch"),put:R("put")};class U extends n{constructor(t,e={}){super(t,e);const s=e.value;this.behavior=["auto","instant","smooth"].includes(s)?s:"auto"}scroll(){this.targets[0]?.scrollIntoView({behavior:this.behavior})}}var z={scrollTo:(t=>(e,s={})=>new U(e,s)[t]())("scroll")};const B={attribute:c,class:d,clipboard:p,confirm:E,dataAttribute:A,dialog:x,element:k,form:D,intersection:O,reload:V,request:P,scrollTo:z},G=(t=[])=>0===t.length?Object.values(B).reduce(((t,e)=>({...t,...e})),{}):B.reduce(((e,s)=>t[s]?{...e,...t[s]}:(console.warn(`Action “${s}” not found`),e)),{});var _=G([]);var J=new class{#x={};#M=new WeakMap;#S=new Map;#k;#N=new Map;#F;static get debug(){return t.enabled}static set debug(e){t.enabled=e}constructor(){this.#k=new e(_),this.#F=new r((t=>this.#n(t)),(t=>this.#a(t)))}activate(e={}){const{on:s=document,debug:r=!1}=e;return t.enabled=r,t.log("Initializing…"),this.element=s,this.#F.start("[data-action]"),this.element.querySelectorAll("[data-action]").forEach((t=>this.#n(t))),t.log("…initialized"),this}withActions(s=[]){return t.log("Initializing with actions",s),this.#k=new e(G(s)),this}#n(t){const e=t.dataset.action;if(!e)return;const r=e.split(" ");new Set(e.includes("->")?s.identify({by:e}):[s.getDefault({from:t})]).forEach((t=>this.#D({for:t}))),r.filter((t=>t.includes("@"))).forEach((e=>{const[s]=e.split("->"),[r,i]=s.split("@"),n="window"===r?window:document;this.#q(i,n,t)}));const n=r.filter((t=>t.includes(":"))).map((t=>t.split(":")[1]));n.forEach((e=>{i.setup({for:e,on:t,trigger:()=>this.#k.process({type:e},{on:t,using:e})})}))}#a(t){const e=this.#M.get(t);e&&(e.forEach((e=>{const s=this.#N.get(e);if(s&&(s.delete(t),0===s.size)){const[t,s]=e.split(":"),r=this.#S.get(e);("window"===t?window:document).removeEventListener(s,r),this.#S.delete(e),this.#N.delete(e)}})),this.#M.delete(t))}#D({for:e}){this.#x[e]||(this.element.addEventListener(e,(t=>this.#C(t))),t.log("Added event listener for",e,"to",this.element),this.#x[e]=!0)}#q(t,e,s){const r=`${e===window?"window":"document"}:${t}`;if(this.#M.has(s)||this.#M.set(s,new Set),this.#M.get(s).add(r),this.#N.has(r)||this.#N.set(r,new Set),this.#N.get(r).add(s),!this.#S.has(r)){const s=e=>{const s=this.#N.get(r);s&&s.forEach((s=>{this.#k.process(e,{on:s,using:t})}))};e.addEventListener(t,s),this.#S.set(r,s)}}#C(t){const e=t.target.closest("[data-action]");if(!e)return;const r=s.getDefault({from:e});this.#k.process(t,{on:e,using:r})}};const W=(t=document)=>{window.Attractive&&window.Attractive._initialized||J.activate({element:t})};return"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>W())):W(),document.addEventListener("turbo:load",(()=>W()))),"undefined"!=typeof window&&(window.Attractive=J),J}));

data/app/assets/stylesheets/fuik/application.css

@@ -2,10 +2,17 @@
 
 @layer base {
   :root {
-    --color-text: oklch(30% 0.02 250);
-    --color-text-muted: oklch(55% 0.02 250);
-    --color-border: oklch(90% 0.01 250);
-    --color-bg-hover: oklch(97% 0.01 250);
+    --gray-50: oklch(98.7% .002 197.1);
+    --gray-100: oklch(96.3% .002 197.1);
+    --gray-200: oklch(92.5% .005 214.3);
+    --gray-300: oklch(87.2% .007 219.6);
+    --gray-400: oklch(72.3% .014 214.4);
+    --gray-500: oklch(56% .021 213.5);
+    --gray-600: oklch(45% .017 213.2);
+    --gray-700: oklch(37.8% .015 216);
+    --gray-800: oklch(27.5% .011 216.9);
+    --gray-900: oklch(21.8% .008 223.9);
+    --gray-950: oklch(14.8% .004 228.8);
   }
 
   * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -13,7 +20,8 @@
   body {
     font-family: system-ui, -apple-system, sans-serif;
     line-height: 1.5;
-    color: var(--color-text);
+    color: light-dark(var(--gray-800), var(--gray-200));
+    background-color: light-dark(white, var(--gray-950));
   }
 
   main {
@@ -22,19 +30,6 @@
     margin-inline: auto;
   }
 
-  h1 {
-    margin-block-end: 1rem;
-    font-size: 1.875rem;
-    font-weight: 700;
-    letter-spacing: -.025em;
-
-    a {
-      color: var(--color-text-muted);
-
-      &:hover { color: var(--color-text); }
-    }
-  }
-
   a {
     color: inherit;
     text-decoration: none;
@@ -47,60 +42,38 @@
     padding-block: .5rem;
     padding-inline: 1rem;
     max-height: calc(20lh + 1rem);
+    width: 100%;
     font-size: .875rem;
-    background: var(--color-bg-hover);
-    border-radius: .5rem;
+    background: light-dark(var(--gray-50), var(--gray-800));
+    border: 1px solid light-dark(transparent, var(--gray-700));
+    border-radius: .375rem;
     overflow-x: auto;
   }
+}
 
-  dl {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 1rem 2rem;
-    overflow: hidden;
-
-    dt {
-      font-weight: 600;
-      color: var(--color-text);
-    }
-
-    dd {
-      position: relative;
-      overflow-x: auto;
-    }
-
-    .actions {
-      display: flex;
-      align-items: center;
-      gap: .5rem;
-      position: absolute;
-      top: .5rem; right: .5rem;
-    }
-
-    svg {
-      width: 1rem;
-      aspect-ratio: 1 / 1;
-      color: oklch(from var(--color-text) l c h / 80%);
-      background: var(--color-bg);
-    }
+@layer components {
+  .heading {
+    margin-block-end: 1rem;
+    font-size: 1.875rem;
+    font-weight: 550;
+    letter-spacing: -.0125em;
+    color: light-dark(var(--gray-700), var(--gray-100));
 
-    dd .copy-button .success-icon {
-      display: none;
+    .divider {
+      font-weight: 400;
+      color: light-dark(var(--gray-600), var(--gray-300));
     }
 
-    dd:has([data-copy-success="true"]) .copy-button .copy-icon {
-      display: none;
-    }
+    a {
+      color: light-dark(var(--gray-500), var(--gray-400));
 
-    dd:has([data-copy-success="true"]) .copy-button .success-icon {
-      display: block;
+      &:hover { color: light-dark(var(--gray-800), var(--gray-200)); }
     }
   }
-}
 
-@layer components {
   .events {
     list-style: none;
+    margin-block-start: 1rem;
 
     li {
       --icon-width: 1.125rem;
@@ -108,7 +81,7 @@
       padding-block: .5rem;
       padding-inline: .75rem;
 
-      &:hover { background: var(--color-bg-hover); }
+      &:hover { background: light-dark(var(--gray-50), var(--gray-800)); }
 
       a {
         display: grid;
@@ -118,6 +91,12 @@
         &:hover { text-decoration: none; }
       }
 
+      .icon {
+        width: var(--icon-width);
+        aspect-ratio: 1/1;
+        border-radius: .15rem;
+      }
+
       .name {
         display: grid;
         grid-template-columns: var(--icon-width) 1fr;
@@ -125,12 +104,6 @@
         gap: .5rem;
       }
 
-      .icon {
-        width: var(--icon-width);
-        aspect-ratio: 1/1;
-        border-radius: .125rem;
-      }
-
       code {
         display: flex;
         align-items: center;
@@ -138,7 +111,16 @@
     }
 
     li:not(:first-child) {
-      border-top: 1px solid var(--color-border);
+      border-top: 1px solid light-dark(var(--gray-100), var(--gray-800));
+    }
+
+    .empty-state {
+      display: none;
+      font-size: .875rem;
+      font-weight: 300;
+      color: light-dark(var(--gray-400), var(--gray-500));
+
+      &:only-child { display: block; }
     }
   }
 
@@ -152,7 +134,7 @@
       width: .5rem;
       aspect-ratio: 1/1;
       background-color: currentColor;
-      border: 2px solid oklch(from currentColor 1 c h / 85%);
+      border: 1.75px solid oklch(from currentColor .9 c h / .8);
       border-radius: .5rem;
     }
 
@@ -163,39 +145,180 @@
     &[data-status="failed"]::before { color: oklch(60% .2 25); }
   }
 
+  .filters {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+
+    fieldset {
+      border: 0;
+
+      legend {
+        font-size: .875rem;
+        font-weight: 400;
+        color: light-dark(var(--gray-500), var(--gray-400));
+      }
+
+      input[type="radio"] {
+        position: absolute;
+        clip: rect(0, 0, 0, 0);
+      }
+
+      .pills {
+        display: inline-flex;
+        background-color: light-dark(var(--gray-50), var(--gray-800));
+        border: 1px solid light-dark(var(--gray-200), var(--gray-700));
+        border-radius: .3rem;
+        overflow: clip;
+
+        .pill {
+          display: inline-flex;
+          align-items: center;
+          padding: .25rem .75rem;
+          font-size: .875rem;
+          font-weight: 400;
+          border-inline-start: 1px solid light-dark(var(--gray-200), var(--gray-700));
+          cursor: pointer;
+          transition: all ease-in-out 100ms;
+
+          &:first-child { border-inline-start: 0; }
+
+          &:has(input:checked),
+          &:hover:not(:has(input:checked)) {
+            background-color: light-dark(var(--gray-100), var(--gray-700));
+          }
+        }
+      }
+    }
+
+    select {
+      padding: .4rem .75rem;
+      font-size: .875rem;
+      background-color: light-dark(var(--gray-50), var(--gray-800));
+      border: 1px solid light-dark(var(--gray-200), var(--gray-700));
+      border-radius: .25rem;
+      cursor: pointer;
+    }
+
+    [type=submit] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
+  }
+
+  .details {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem 2rem;
+    overflow: hidden;
+
+    .description {
+      display: flex;
+      align-items: baseline;
+      margin-block-start: .125em;
+      font-weight: 500;
+      color: light-dark(var(--gray-700), var(--gray-400));
+    }
+
+    .icon {
+      width: 1.125rem;
+      aspect-ratio: 1/1;
+      margin-right: .25rem;
+      border-radius: .15rem;
+    }
+
+    .value {
+      position: relative;
+      display: flex;
+      align-items: center;
+      overflow-x: auto;
+
+      button { margin-left: .25rem; }
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+      position: absolute;
+      top: .5rem; right: .5rem;
+    }
+
+    svg {
+      width: 1rem;
+      aspect-ratio: 1 / 1;
+      color: light-dark(var(--gray-800), var(--gray-200));
+    }
+
+    dd .copy-button .success-icon {
+      display: none;
+    }
+
+    dd:has([data-copy-success="true"]) .copy-button .copy-icon {
+      display: none;
+    }
+
+    dd:has([data-copy-success="true"]) .copy-button .success-icon {
+      display: block;
+    }
+  }
+
   button,
   .copy-button {
     padding: .125rem;
-    background: var(--color-bg);
+    background: light-dark(var(--gray-50), var(--gray-800));
     border: 0;
     border-radius: .25rem;
     cursor: pointer;
 
     &:hover {
-      color: oklch(from var(--color-text) l c h);
+      color: light-dark(var(--gray-800), var(--gray-400));
       transition: transform ease-in-out 300ms;
-      transform: scale(1.10);
+
+      & svg { transform: scale(1.05); }
     }
   }
 
+  .retry-button {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    margin-inline-start: .5rem;
+    padding: .25rem .75rem;
+    border: 1px solid light-dark(var(--gray-200), var(--gray-700));
+  }
+
   .json-highlight {
     .json-key {
-      color: oklch(35% .15 250);
-      cursor: pointer;
+      color: light-dark(oklch(35% .15 250), oklch(70% .2 250));
+
+      #payload & {
+        border-radius: .125rem;
+        cursor: pointer;
+      }
 
-      &:hover {
-        background: oklch(90% 0.02 250);
+      #payload &:hover {
+        background: light-dark(oklch(from currentColor l c h / .1), oklch(from currentColor l c h / .2));
       }
     }
 
     .json-key-selected {
-      background: oklch(85% 0.05 250);
+      background: light-dark(oklch(85% .05 250), oklch(25% .08 250));
     }
 
-    .json-string { color: oklch(30% .18 160); }
-    .json-number { color: oklch(40% .15 130); }
-    .json-boolean { color: oklch(45% .18 260); }
-    .json-null { color: oklch(50% .05 250); }
-    .json-punctuation { color: oklch(20% .03 250); }
+    .json-string { color: light-dark(oklch(30% .18 160), oklch(72% .18 160)); user-select: all; }
+    .json-number { color: light-dark(oklch(40% .15 130), oklch(70% .18 130)); }
+    .json-boolean { color: light-dark(oklch(45% .18 260), oklch(75% .2 260)); }
+    .json-null { color: light-dark(oklch(50% .05 250), oklch(68% .08 250)); }
+    .json-punctuation { color: light-dark(oklch(20% .03 250), oklch(60% .03 250)); }
+  }
+
+  .errors {
+    padding-block: .5rem;
+    padding-inline: 1rem;
+    max-height: calc(20lh + 1rem);
+    font-size: .875rem;
+    color: light-dark(oklch(50.5% .213 27.52), oklch(88.5% .062 18.33));
+    background: light-dark(oklch(97.1% .013 17.38), oklch(25.8% .092 26.04 / .5));
+    border-radius: .5rem;
+    overflow-x: auto;
+    font-family: "Courier New", Courier, monospace;
   }
 }