shadcn_view_component 0.3.3

data/app/components/shadcn/toggle_group/item/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ToggleGroup
+    module Item
+      # ToggleGroupItem — styled with the toggle's own variants, like the TSX
+      # does via `toggleVariants({ variant, size })`.
+      class Component < ApplicationViewComponent
+        EXTRA_CLASSES = "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 " \
+                        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none " \
+                        "data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md " \
+                        "data-[spacing=0]:data-[variant=outline]:border-l-0 " \
+                        "data-[spacing=0]:data-[variant=outline]:first:border-l"
+
+        default_tag :button
+        slot_name :"toggle-group-item"
+
+        attr_reader :value, :variant, :size, :spacing, :pressed, :disabled
+
+        def initialize(value:, variant: :default, size: :default, spacing: 0,
+                       pressed: false, disabled: false, **attributes)
+          @value = value.to_s
+          @variant = variant&.to_sym || :default
+          @size = size&.to_sym || :default
+          @spacing = spacing
+          @pressed = pressed
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            disabled: (true if disabled),
+            tabindex: "-1",
+            "aria-pressed" => pressed.to_s,
+            "data-state" => (pressed ? "on" : "off"),
+            "data-value" => value,
+            "data-variant" => variant,
+            "data-size" => size,
+            "data-spacing" => spacing,
+            "data-disabled" => (true if disabled),
+            "data-shadcn--toggle-group-target" => "item",
+            "data-action" => "click->shadcn--toggle-group#toggle " \
+                             "keydown->shadcn--toggle-group#keydown"
+          }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          Toggle::Component.variant_classes(
+            variant:,
+            size:,
+            class: ShadcnViewComponent.cn(EXTRA_CLASSES, extra)
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/toggle_group/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ToggleGroup
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Size" and "Disabled". Its "Vertical" is the other registry's.
+      def sizes
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/toggle_group/previews/default.html.erb

@@ -0,0 +1,12 @@
+<div class="flex flex-col items-start gap-6">
+  <%= render(Shadcn::ToggleGroup::Component.new(type: :multiple, variant: :outline)) do |g| %>
+    <% %w[Bold Italic Underline].each do |label| %>
+      <% g.with_item(value: label.downcase) { label } %>
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::ToggleGroup::Component.new(type: :single, spacing: 2, value: "center")) do |g| %>
+    <% %w[Left Center Right].each do |label| %>
+      <% g.with_item(value: label.downcase, pressed: label == "Center") { label } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/toggle_group/previews/sizes.html.erb

@@ -0,0 +1,37 @@
+<%# Upstream's "Size" and "Disabled".
+
+    Icon-only items, because that is where the size shows. The three are
+    `h-8 min-w-8`, `h-9 min-w-9` and `h-10 min-w-10` — with a text label the
+    width comes from the text and only 4px of height separates them, which is
+    what the first version of this preview looked like: three rows the same.
+
+    Upstream's "Vertical" is not here. `toggle-group.tsx` takes no orientation
+    at all, so there is nothing in this registry to show — the first version
+    passed `orientation:`, which landed as an inert HTML attribute, and the
+    version after it reached for `flex-col`, which stacks items of three
+    different widths because the group is `w-fit`. Both were this port
+    inventing a variant. See todo.md for the others upstream's docs show and
+    this registry does not have. %>
+<div class="flex items-center gap-6">
+  <% %i[sm default lg].each do |size| %>
+    <div class="flex flex-col items-center gap-1">
+      <%= render(Shadcn::ToggleGroup::Component.new(type: :single, variant: :outline, size:, value: "check")) do |g| %>
+        <% %w[check circle x].each do |icon| %>
+          <% g.with_item(value: icon, pressed: icon == "check", "aria-label": icon) do %>
+            <%= render(Shadcn::Icon::Component.new(icon)) %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <span class="text-xs text-muted-foreground"><%= size %></span>
+    </div>
+  <% end %>
+
+  <div class="flex flex-col items-center gap-1">
+    <%= render(Shadcn::ToggleGroup::Component.new(type: :single, variant: :outline, disabled: true, value: "b")) do |g| %>
+      <% %w[A B C].each do |label| %>
+        <% g.with_item(value: label.downcase, pressed: label == "B") { label } %>
+      <% end %>
+    <% end %>
+    <span class="text-xs text-muted-foreground">disabled</span>
+  </div>
+</div>

data/app/components/shadcn/tooltip/component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tooltip
+    # Port of registry/new-york-v4/ui/tooltip.tsx
+    class Component < ApplicationViewComponent
+      renders_one :trigger, "Shadcn::Tooltip::Trigger::Component"
+      renders_one :tooltip_content, "Shadcn::Tooltip::Content::Component"
+
+      slot_name :tooltip
+
+      attr_reader :side, :align, :side_offset, :delay_duration
+
+      def initialize(side: :top, align: :center, side_offset: 0, delay_duration: 0, **attributes)
+        @side = side&.to_sym || :top
+        @align = align&.to_sym || :center
+        @side_offset = side_offset
+        @delay_duration = delay_duration
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(CONTENTS_STYLE),
+          "data-controller" => "shadcn--tooltip",
+          "data-shadcn--tooltip-side-value" => side,
+          "data-shadcn--tooltip-align-value" => align,
+          "data-shadcn--tooltip-side-offset-value" => side_offset,
+          "data-shadcn--tooltip-delay-value" => delay_duration
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ trigger, tooltip_content, content ].compact))
+      end
+    end
+  end
+end

data/app/components/shadcn/tooltip/content/component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tooltip
+    module Content
+      # TooltipContent — includes the rotated square Radix renders as the arrow.
+      class Component < ApplicationViewComponent
+        ARROW_CLASSES = "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 " \
+                        "rounded-[2px] bg-foreground fill-foreground"
+
+        slot_name :"tooltip-content"
+
+        style do
+          base {
+            "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in " \
+            "rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background " \
+            "fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 " \
+            "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 " \
+            "data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out " \
+            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "tooltip",
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--tooltip-target" => "content"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ content, arrow ]))
+        end
+
+        private
+
+        # Two elements, as Radix renders them: a wrapper that Popper pins to the
+        # side the content landed on, and inside it the rotated square shadcn
+        # styles. They cannot be one element — the classes set `rotate` and
+        # `translate`, which in Tailwind v4 are their own CSS properties and
+        # compose with `transform` rather than being overridden by it, so a
+        # placement written on the same element fights them instead of moving
+        # them. `popper.js` positions the wrapper.
+        #
+        # `display:block` on both, in a style attribute rather than a class,
+        # because upstream's arrow is an `<svg>` — a replaced element, which
+        # takes a width and a height where an inline `<span>` does not. Without
+        # it `size-2.5` applies to nothing and the arrow is 10px of intent and
+        # 0px of box: which is how this shipped, invisible however it was
+        # placed. A class would have to be one no vendored source carries, and
+        # `reverse_parity_spec` is there to notice that.
+        def arrow
+          tag.span("data-slot": "tooltip-arrow", style: "position:absolute;display:block") do
+            tag.span(class: ARROW_CLASSES, style: "display:block")
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/tooltip/preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tooltip
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Side": the same tooltip on each of the four edges.
+      def sides
+        render_with_template
+      end
+
+      # Upstream's "With Keyboard Shortcut".
+      def with_keyboard_shortcut
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/tooltip/previews/default.html.erb

@@ -0,0 +1,4 @@
+<%= render(Shadcn::Tooltip::Component.new) do |t| %>
+  <% t.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Hover me" } %>
+  <% t.with_tooltip_content { "Add to library" } %>
+<% end %>

data/app/components/shadcn/tooltip/previews/sides.html.erb

@@ -0,0 +1,19 @@
+<%# Upstream's "Side": the same tooltip on each of the four edges, and the arrow
+    that points back at the trigger from each.
+
+    `side:` goes to the *root*, not to the content. Passed to
+    `with_tooltip_content` it is swallowed into the content's attributes and
+    quietly does nothing — which is what the first version of this preview did,
+    leaving all four asking for `top` and looking, correctly, identical.
+
+    Room on every side on purpose: the popper flips a tooltip that will not fit,
+    so a cramped page shows four tooltips on top and says nothing about `side:`
+    either. %>
+<div class="flex h-72 items-center justify-center gap-16 px-24">
+  <% %i[top right bottom left].each do |side| %>
+    <%= render(Shadcn::Tooltip::Component.new(side:)) do |t| %>
+      <% t.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { side.to_s.capitalize } %>
+      <% t.with_tooltip_content { "On the #{side}" } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/tooltip/previews/with_keyboard_shortcut.html.erb

@@ -0,0 +1,11 @@
+<%# Upstream's "With Keyboard Shortcut": the tooltip carries the shortcut for
+    the thing it names, which is the case a `Kbd` inside one exists for. %>
+<%= render(Shadcn::Tooltip::Component.new) do |t| %>
+  <% t.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Save" } %>
+  <% t.with_tooltip_content do %>
+    <span class="flex items-center gap-2">
+      Save changes
+      <%= render(Shadcn::Kbd::Component.new) { "⌘S" } %>
+    </span>
+  <% end %>
+<% end %>

data/app/components/shadcn/tooltip/provider/component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tooltip
+    module Provider
+      # TooltipProvider — in React this only supplies the shared delay through
+      # context. Kept as a component so call sites read like the TSX; it renders
+      # nothing but its children.
+      class Component < ApplicationViewComponent
+        slot_name :"tooltip-provider"
+
+        attr_reader :delay_duration
+
+        def initialize(delay_duration: 0, **attributes)
+          @delay_duration = delay_duration
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            style: merged_style(CONTENTS_STYLE),
+            "data-delay-duration" => delay_duration
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/tooltip/trigger/component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tooltip
+    module Trigger
+      # TooltipTrigger — opens on hover and on keyboard focus.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"tooltip-trigger"
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "data-state" => "closed",
+            "data-shadcn--tooltip-target" => "trigger",
+            "data-action" => "mouseenter->shadcn--tooltip#show " \
+                             "mouseleave->shadcn--tooltip#hide " \
+                             "focus->shadcn--tooltip#show " \
+                             "blur->shadcn--tooltip#hide"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/helpers/shadcn_view_component/form_helper.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module ShadcnViewComponent
+  # `shadcn_form_with` is `form_with` with the shadcn builder already set, so
+  # the `f.shadcn_*` helpers are available without repeating `builder:`.
+  #
+  #   <%= shadcn_form_with model: @user do |f| %>
+  #     <%= f.shadcn_input_field :email, label: "Email", type: "email" %>
+  #     <%= f.shadcn_submit "Save" %>
+  #   <% end %>
+  #
+  # `form_with(..., builder: ShadcnViewComponent::FormBuilder)` does the same
+  # thing if you would rather be explicit.
+  module FormHelper
+    def shadcn_form_with(**options, &block)
+      form_with(**options.reverse_merge(builder: ShadcnViewComponent::FormBuilder), &block)
+    end
+
+    # For `fields_for` / `form_for` call sites that want the builder without the
+    # helper above.
+    def shadcn_form_builder
+      ShadcnViewComponent::FormBuilder
+    end
+  end
+end

data/app/helpers/shadcn_view_component/theme_helper.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module ShadcnViewComponent
+  # View helpers for the theming system.
+  #
+  #   <html>
+  #     <head><%= shadcn_theme_script_tag %></head>
+  #     <body class="<%= shadcn_theme_class %>">
+  #
+  # `shadcn_theme_script_tag` is what stops the flash of the wrong palette: it
+  # runs before the first paint, reads the stored preference and puts `.dark`
+  # and `data-shadcn-theme` on <html> itself, since <body> does not exist yet.
+  module ThemeHelper
+    MODE_COOKIE = "shadcn-ui-mode"
+    THEME_COOKIE = "shadcn-ui-theme"
+
+    # Emits the blocking snippet that applies the stored preference before the
+    # page paints. Put it in <head>, as early as possible.
+    #
+    # @param default_mode [String] "system", "light" or "dark"
+    # @param default_theme [String] a name from ShadcnViewComponent::Themes
+    def shadcn_theme_script_tag(default_mode: "system", default_theme: Themes::DEFAULT)
+      javascript_tag(nonce: true) do
+        raw(<<~JS)
+          (function () {
+            try {
+              var root = document.documentElement;
+              var mode = localStorage.getItem("#{MODE_COOKIE}") || "#{default_mode}";
+              var theme = localStorage.getItem("#{THEME_COOKIE}") || "#{default_theme}";
+              var dark = mode === "dark" ||
+                (mode === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
+
+              root.classList.toggle("dark", dark);
+              root.style.colorScheme = dark ? "dark" : "light";
+              root.dataset.shadcnTheme = theme;
+            } catch (e) {}
+          })();
+        JS
+      end
+    end
+
+    # The colour theme this request should render with, from the cookie the
+    # store mirrors its `localStorage` value into. Lets a server-rendered page
+    # be correct on the very first byte.
+    def shadcn_theme_name(default: Themes::DEFAULT)
+      name = cookies[THEME_COOKIE].to_s
+      Themes.exists?(name) ? name : default
+    end
+
+    # The class to put on <body>.
+    def shadcn_theme_class(default: Themes::DEFAULT)
+      "theme-#{shadcn_theme_name(default:)}"
+    end
+
+    # The mode this request should render with: "light", "dark" or "system".
+    def shadcn_mode(default: "system")
+      mode = cookies[MODE_COOKIE].to_s
+      %w[light dark system].include?(mode) ? mode : default
+    end
+  end
+end

data/app/javascript/shadcn/animation.js

@@ -0,0 +1,180 @@
+// Closing a layer has two halves that used to happen in one tick, which is why
+// no `data-[state=closed]:animate-out` class in this library ever played.
+//
+// `data-state="closed"` and everything about *interaction* — the dismiss layer,
+// aria, focus, the scroll lock — has to be immediate: a layer on its way out
+// must not answer Escape. Taking the element out of the DOM has to wait, or the
+// exit keyframes never get a frame.
+//
+// `getAnimations()` rather than an `animationend` listener. The event bubbles
+// from descendants, so it would need filtering by both target and name; worse,
+// it never fires when no animation applies, which forces a timeout — and that
+// timeout then becomes the *normal* path in a host that has not loaded this
+// gem's stylesheet. An empty animation list is unambiguous and needs no
+// fallback.
+
+// The animations worth holding a teardown for: the ones already under way that
+// are also going to end.
+//
+// `playState === "running"` on its own is not that: an
+// `animation-iteration-count: infinite` animation reports `"running"` and has
+// no end to reach. Caller classes concatenate onto a component's own, so a host
+// utility carrying one — `animate-pulse` among them — can land on closing
+// content through supported API, and waiting on its `finished` leaves the layer
+// in the document, painted and `pointer-events: none`, after everything that
+// closes it has already run. Measured before this filter existed: an Escaped
+// dialog still in the document five seconds later, `hidden` never set. An
+// animation that never ends is not the exit either way, so nothing is lost by
+// leaving it out. A timeout was the alternative: an arbitrary constant, and the
+// layer would still be stuck for its length.
+//
+// `endTime` rather than `iterations` because it is the one number that answers
+// "will this ever end" whatever put the animation there. Measured in headless
+// Chrome: `Infinity` for both spellings — CSS `infinite` and
+// `element.animate(…, { iterations: Infinity })` — and not a number at all for
+// an animation on a `scroll()` timeline, which has no end on a clock either.
+// `Number.isFinite` rejects all three.
+const willEnd = (animation) =>
+  animation.playState === "running" &&
+  Number.isFinite(animation.effect?.getComputedTiming()?.endTime)
+
+// A second literal, not a shared one: this selector is retyped to match
+// `[data-slot][data-exiting]:not([data-slot="accordion-content"])` in
+// shadcn.css, not read from it, so nothing in the code stops the two from
+// drifting apart if one changes and the other does not. What actually catches
+// that today is `exit_animation_spec.rb:426` — it probes a real control
+// inside a collapsing panel for focus and hit-testing, which fails the same
+// way whether the CSS exception goes missing or this one does.
+//
+// A collapsing accordion panel sits in the page flow with nothing behind it to
+// protect from a click, which is what that CSS exception is for — and `inert` is
+// a stronger tool than `pointer-events`, not an equivalent one: it drops the
+// subtree out of hit-testing itself, so a control inside would neither focus nor
+// receive a click no matter what its own `pointer-events` computed to. Applying
+// `inert` here without the same carve-out would silently defeat the CSS rule's
+// exception rather than agree with it. Measured with the carve-out missing: a
+// button inside a collapsing panel read `pointer-events: auto`, was not
+// focusable, and `elementFromPoint` at its centre returned the trigger instead.
+const exemptFromInert = (element) => element.matches("[data-slot='accordion-content']")
+
+// Holds teardowns that are waiting on an element's exit animation, one per
+// element.
+export class ExitQueue {
+  constructor() {
+    this.pending = new Map()
+    this.generation = 0
+    this.onBeforeCache = null
+  }
+
+  // Runs `teardown` once the animations already running on `element` have
+  // finished — or immediately and synchronously when there are none. That last
+  // part is the point: a host that never loaded this stylesheet, a host that
+  // overrode the classes away, and a host whose only animation here is an
+  // endless one all keep exactly today's behaviour.
+  //
+  // A second call for an element already waiting is ignored, so a `turbo:morph`
+  // re-render in the middle of an exit cannot queue the same teardown twice.
+  defer(element, teardown) {
+    if (this.pending.has(element)) return
+
+    const running = element.getAnimations().filter(willEnd)
+
+    if (!running.length) {
+      teardown()
+      return
+    }
+
+    // Marks the element as exiting for the length of the animation only — it
+    // is never rendered markup. Read by `[data-slot][data-exiting]` in
+    // shadcn.css, which stops most exiting elements intercepting clicks, as
+    // Radix does; that rule, not this marker, is what carries the accordion's
+    // exception.
+    element.dataset.exiting = ""
+
+    // `data-exiting` and `inert` are not two spellings of one thing: the
+    // marker above is a CSS hook, deliberately excluded for the accordion so
+    // its collapsing panel keeps taking clicks; `inert` takes the element out
+    // of the tab order and the accessibility tree instead, exempting the same
+    // accordion panel via `exemptFromInert` (above, and see its comment for
+    // how that exemption is kept in step with the CSS one) — `hidden` used to
+    // do both jobs, in the same tick, before either started waiting on this
+    // queue.
+    if (!exemptFromInert(element)) element.inert = true
+
+    // Tags this call's continuation with the generation it belongs to. Without
+    // it, cancel() followed by a fresh defer() in the same tick — reopen then
+    // close again before the first exit's promise has settled — would let the
+    // first continuation flush the second exit's teardown as soon as it drains,
+    // dismounting a layer whose new animation has barely started.
+    const generation = ++this.generation
+    this.pending.set(element, { teardown, generation })
+    this.watchTurbo()
+
+    // Reopening mid-exit cancels the animation, which rejects `finished`. Either
+    // way the waiting is over; whether the teardown still applies is decided by
+    // whoever calls `cancel`.
+    Promise.all(running.map((a) => a.finished))
+      .catch(() => {})
+      .then(() => {
+        if (this.pending.get(element)?.generation === generation) this.flush(element)
+      })
+  }
+
+  // Runs a pending teardown now. Called when the animation ends, and directly
+  // from `disconnect()`, where waiting is not an option: Turbo may be detaching
+  // the element, and a continuation would then be operating on a subtree that
+  // has left the document.
+  flush(element) {
+    const entry = this.pending.get(element)
+    if (!entry) return
+
+    this.pending.delete(element)
+    delete element.dataset.exiting
+    if (!exemptFromInert(element)) element.inert = false
+    this.unwatchTurbo()
+    entry.teardown()
+  }
+
+  // Drops a pending teardown without running it — the element is opening again,
+  // so there is nothing left to take out of the DOM.
+  cancel(element) {
+    if (!this.pending.delete(element)) return
+
+    delete element.dataset.exiting
+    if (!exemptFromInert(element)) element.inert = false
+    this.unwatchTurbo()
+  }
+
+  has(element) {
+    return this.pending.has(element)
+  }
+
+  flushAll() {
+    for (const element of [ ...this.pending.keys() ]) this.flush(element)
+  }
+
+  // A pending teardown must never survive into a Turbo snapshot. `cacheSnapshot()`
+  // clones whatever is in the document while handling `turbo:before-cache` — well
+  // inside an exit animation's duration — so without this a layer closed by the
+  // same pointerdown that starts a Drive navigation gets cached mid-exit: wrapper,
+  // placeholder and `data-exiting` all cloned in. A later restore built from that
+  // clone would then nest a second wrapper the next time the layer opens, and the
+  // surviving `data-exiting` would leave it unclickable.
+  //
+  // One listener per queue, added only while something is pending and removed
+  // as soon as nothing is, rather than one at module load: most pages never
+  // have an exit in flight when they navigate away.
+  watchTurbo() {
+    if (this.onBeforeCache) return
+
+    this.onBeforeCache = () => this.flushAll()
+    document.addEventListener("turbo:before-cache", this.onBeforeCache)
+  }
+
+  unwatchTurbo() {
+    if (this.pending.size || !this.onBeforeCache) return
+
+    document.removeEventListener("turbo:before-cache", this.onBeforeCache)
+    this.onBeforeCache = null
+  }
+}