hibiki_rails 0.13.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dfd1da2a9d64baab573c47345a55fbe7f985c3e6781f2e0d04879043b0889dcc
-  data.tar.gz: f012a899f4c6b675b75102f217dc9e37feaa827e4c63097cc1a86de353dce543
+  metadata.gz: ce497d3d19ee46dede8bb9973f3a408e8b724f588ee2ebce3a4c0a0e5aa998f1
+  data.tar.gz: 1eea58578f6a73f3617a8f717cc1407023d741c1bbd1fb68f534b1fe135a4caa
 SHA512:
-  metadata.gz: 46110572a666ccd8f7c44114433259ebb901d50d7625ce7ff3468de7c0a34bbc6038766cf611eb977b1126d54fab8dbc018a55aa0a3aaab91553cf43fdcca048
-  data.tar.gz: 8b71c3b742e04e93b9e58707dcf7ebd1dda9319a0894108e07a5a560008f24591a43969e3ce1c4572e4c3ad76d0cf4fc025dd9fe3f518141bdf870e58261ab73
+  metadata.gz: fd67705cbe7db3a1eb1ddcd5dd914e7f8377f01070d564f3dca40a96f205833ef0a442f3a74bc68a8928d6577461a8bc83427c0e0117c711d3fd5733fa478b9e
+  data.tar.gz: eefeee042142381f1e2f1f2dba0d49d2884db32409a029d08215a9479aefce564bc7e03333c23b525ade2dc37fc3111a89ebbabd52fed6adf450bfe19c9f63bf

data/CHANGELOG.md

@@ -4,6 +4,85 @@ The gem and the npm package are released in lockstep and share these version
 numbers — `app/assets/javascripts/hibiki.js` is a single copy served both ways,
 so importmap and bundler apps always resolve identical client code.
 
+## 0.15.0 — 2026-09-09
+
+### Added
+
+**Motion for generated pages, and the `hibiki-rails/motion` module.** A
+re-rendered fragment is merged into the page in place, so a removed element
+was gone before the browser could draw it leaving. The new opt-in module
+holds a render while a marked element's transitions finish: mark an element
+`data-motion` (it needs an id), give it a transition, and `import
+"hibiki-rails/motion"` once beside your controllers. The module writes
+`data-motion-leaving` on each marked element the incoming fragment lacks,
+waits for its transitions, then lets the render run; it brackets an inserted
+marked element with `data-motion-entering` so a clip can be scoped to the
+motion. `data-motion="own"` animates the leave only when the gesture that
+removed the element came from inside it, read from the island's own trip
+records. Renders queue in arrival order; a hidden tab waits for nothing;
+every wait races a one-second ceiling. Both transports hold. This is a
+client change: the four `data-motion*` attributes are public, unlike the
+private `data-hibiki-*` ones. Docs: [Motion].
+
+- The scaffold emits it by default under `--css=daisyui` and `tailwind`:
+  the inline create card and the row's edit form slide open and shut
+  (`hbk-slide` / `hbk-slide-body`), and a row you destroy slides out to the
+  left before the list closes the gap (`hbk-slide-x` / `hbk-slide-x-body`,
+  marked `own`). The row's display markup gains an id-bearing `contents`
+  wrapper, because the merge pairs an anonymous `div` with the edit wrapper
+  and rewrites it in place, and `@starting-style` fires only on a real
+  insertion; under motion the row's card and card-body are one element, so
+  the add-on generators' anchors still hold.
+- `app/assets/stylesheets/hibiki_motion.css`, once per app beside the busy
+  sheet and wired the same four ways: slide, slide-x, fade, fly, scale and
+  blur as Tailwind `@utility` rules (the utilities layer sits above daisyUI's
+  components, and a single utility on the element still wins), with duration
+  and easing tuned there. Needs Tailwind 4.1. The generator appends
+  `import "hibiki-rails/motion"` to `app/javascript/application.js` once
+  and prints a `motion` notice when it cannot.
+- `--skip-motion` on both scaffold commands leaves every trace out.
+  `--css=none` never emits it: the transitions are Tailwind utilities, and
+  its output is byte-identical to a `--skip-motion` run.
+- Packaging: the engine pins `hibiki-rails/motion`; the npm package exports
+  `./motion`. The module imports `"hibiki-rails"` by its bare name, which
+  the pin and the package self-reference both resolve.
+
+### Changed
+
+- `hibiki.js` gains three seams for the module: an exported `islandFor(element)`,
+  the island's `lastControl` (set in `trackControl`, kept past the trip's
+  settle), and a `hibiki:before-render` event dispatched from the island root
+  before a transmit swap, with `event.detail.render` replaceable the way
+  Turbo's `turbo:before-stream-render` is. `received` returns the render's
+  result: `undefined` for a synchronous swap, a promise for a held one. An ack
+  settles its trip even while a render is held.
+- `CssVariant` gains two tokens, `row_card` and `contents`.
+
+[Motion]: https://planetaska.github.io/hibiki/motion/
+
+## 0.14.0 — 2026-09-07
+
+### Changed
+
+**The infinite-scroll Load-more control has a degraded path.** Under
+`--infinite-scroll` the scaffold emitted one button that answered both a
+click and the `visible` sentinel event, and gave it no `fallback:` on
+purpose: a sentinel that navigates on a dead socket would make scrolling
+navigate. Without JavaScript the button rendered and did nothing. The control
+is now two elements. The wrapper (`books_load_more`, the same id) is the
+sentinel and carries only `visible`. A link inside it is the click path, with
+`fallback: true` and a real href: the query already reads `?page=N` as a
+growing window, so a degraded click shows every window up to N, and the
+link's fragment lands on the last row the reader had already seen. The JS
+client is unchanged.
+
+- Both view layers. The Phlex component uses a bare `a`, so no `LinkTo`
+  include; `page_url` is now emitted in both pagination modes.
+- Regenerating an app changes only `_list.html.erb` / `list.rb`. A system
+  test that clicked `#books_load_more button` now clicks the `a`.
+- Docs: the fallback contract in [The JS client] gains the rule — never give
+  a `visible` control a `fallback:`; split it as the scaffold does.
+
 ## 0.13.0 — 2026-09-07
 
 ### Changed

data/app/assets/javascripts/hibiki-motion.js

@@ -0,0 +1,160 @@
+// hibiki-rails/motion — enter/leave motion for server-rendered swaps.
+//
+// Opt-in: `import "hibiki-rails/motion"` once, beside the controllers. This
+// is the PUBLIC motion contract (unlike the client's private data-hibiki-*):
+//
+//   app-written    data-motion          the element animates its leave
+//                  data-motion="own"    …only when the gesture that removed
+//                                       it came from inside it — a destroyed
+//                                       row, not one that paged or filtered
+//                                       away. Marked elements need an id: both
+//                                       sets below are keyed by id, as the
+//                                       transports' swaps are.
+//   written here   data-motion-leaving  on a marked element the incoming
+//                                       render lacks, until its transitions end
+//                  data-motion-entering on a marked element the render inserted,
+//                                       until its first transitions end
+//
+// Addressed to app CSS — Tailwind's `starting:` / `data-motion-leaving:` /
+// `in-data-motion-leaving:` variants, or plain attribute selectors. The
+// enter needs no help: @starting-style is the from-state on a real
+// insertion. The exit does, because a morph drops the node before any CSS
+// could run — so a render that would remove a marked element is HELD until
+// the element's transitions finish. Renders queue in arrival order, one
+// chain per document, so a hold never lets a later render overtake it. Only
+// the outermost marked element of a subtree moves, in either phase.
+//
+// One requestAnimationFrame per wait, because transitions exist only after
+// the next style pass. A hidden document waits for nothing (its frames never
+// come), and every wait races a one-second ceiling, so a tab hidden mid-hold
+// cannot wedge the queue. Nothing here reads layout: a forced style read
+// between a morph's insert and its class sync defeats @starting-style.
+import { islandFor } from "hibiki-rails"
+
+const CEILING = 1000
+
+// Turbo stream actions that remove content. morph rides replace/update;
+// append/prepend/before/after/refresh remove nothing.
+const REMOVING = new Set(["replace", "update", "remove"])
+
+const marked = (root) => [...root.querySelectorAll("[data-motion]")]
+const hasMarks = (root) => root.querySelector("[data-motion]") !== null
+const idsOf = (root) => new Set(marked(root).map((element) => element.id))
+
+// `own`: the island's trip records are the honest gesture signal — the
+// control of an in-flight trip, or the last control the island tracked
+// (kept past its trip's settle; a render can land after the ack's grace).
+const ownsGesture = (island, element) => {
+  if (!island) return false
+  for (const record of island.busy.values()) {
+    if (record.control && element.contains(record.control)) return true
+  }
+  return Boolean(island.lastControl) && element.contains(island.lastControl)
+}
+
+const animates = (element, island) =>
+  element.getAttribute("data-motion") !== "own" || ownsGesture(island, element)
+
+// Marked elements under `target` (and `target` itself when the action
+// replaces it) whose id the incoming content lacks.
+const leavingFrom = (target, includeSelf, incoming, island) => {
+  const candidates =
+    includeSelf && target.hasAttribute("data-motion") ? [target, ...marked(target)] : marked(target)
+  return candidates.filter(
+    (element) => element.id && !incoming.has(element.id) && animates(element, island)
+  )
+}
+
+const outermost = (elements) =>
+  elements.filter((element) => !elements.some((other) => other !== element && other.contains(element)))
+
+// Resolves once the element's own transitions have run. Element-only, not
+// {subtree: true}: a spinner inside a leaving row is an infinite animation.
+const settled = async (element) => {
+  if (document.visibilityState === "hidden") return
+  await new Promise(requestAnimationFrame)
+  await Promise.allSettled((element.getAnimations?.() ?? []).map((animation) => animation.finished))
+}
+
+const finished = (elements) => {
+  let timer
+  const ceiling = new Promise((resolve) => {
+    timer = setTimeout(resolve, CEILING)
+  })
+  return Promise.race([Promise.all(elements.map(settled)), ceiling]).finally(() => clearTimeout(timer))
+}
+
+// One chain per document. A failed render must not close it.
+let queue = Promise.resolve()
+const enqueue = (job) => (queue = queue.catch(() => {}).then(job))
+
+// The hold. `plan` runs when the render's turn comes (earlier renders may
+// have changed the DOM) and returns { leaving, islands }; `render` is what
+// the transport would have run at once.
+const held = (plan, render) =>
+  enqueue(async () => {
+    const { leaving: candidates, islands } = plan()
+    const leaving = outermost(candidates)
+    const before = idsOf(document)
+    for (const element of leaving) element.setAttribute("data-motion-leaving", "")
+    if (leaving.length) await finished(leaving)
+    try {
+      await render()
+    } finally {
+      // A render that kept the element after all, and the gesture consumed.
+      for (const element of leaving) {
+        if (element.isConnected) element.removeAttribute("data-motion-leaving")
+      }
+      for (const island of islands) island.lastControl = null
+    }
+    const entering = outermost(marked(document).filter((element) => element.id && !before.has(element.id)))
+    for (const element of entering) {
+      element.setAttribute("data-motion-entering", "")
+      finished([element]).then(() => element.removeAttribute("data-motion-entering"))
+    }
+  })
+
+// Turbo streams. Registered at import, so this wrapper sits INSIDE the
+// islands' own render wrappers (theirs count the paint) and the hold ends
+// before they count it. The gate keeps unmarked pages at two querySelectors;
+// a hold is pending only while a marked element is still in the document,
+// so any render arriving during one sees marks and queues behind it.
+document.addEventListener("turbo:before-stream-render", (event) => {
+  const stream = event.detail.newStream
+  if (!stream?.templateElement) return
+  const content = stream.templateElement.content
+  if (!hasMarks(document) && !hasMarks(content)) return
+
+  const render = event.detail.render
+  event.detail.render = (streamElement) =>
+    held(() => {
+      const plan = { leaving: [], islands: new Set() }
+      // A refresh stream has no target: targetElements throws.
+      if (stream.action === "refresh") return plan
+      const incoming = idsOf(content)
+      for (const target of stream.targetElements) {
+        const island = islandFor(target)
+        if (island) plan.islands.add(island)
+        if (REMOVING.has(stream.action)) {
+          plan.leaving.push(...leavingFrom(target, stream.action !== "update", incoming, island))
+        }
+      }
+      return plan
+    }, () => render(streamElement))
+})
+
+// The transmit transport: the client's own swap, by root id. A root id
+// always survives a by-id swap, so only descendants can leave.
+document.addEventListener("hibiki:before-render", (event) => {
+  const { island, content, render } = event.detail
+  if (!hasMarks(document) && !hasMarks(content)) return
+
+  event.detail.render = () =>
+    held(() => ({
+      islands: new Set([island]),
+      leaving: [...content.children].flatMap((fragment) => {
+        const target = document.getElementById(fragment.id)
+        return target ? leavingFrom(target, false, idsOf(fragment), island) : []
+      })
+    }), render)
+})

data/app/assets/javascripts/hibiki.js

@@ -71,6 +71,14 @@
 // and per-button feedback needs no server state. Content is stale during
 // a round trip, never absent.
 //
+// Motion is the one PUBLIC data-* contract, and it lives in the opt-in
+// module `hibiki-rails/motion`: an app marks an element `data-motion` (or
+// `data-motion="own"`), the module stamps `data-motion-leaving` /
+// `data-motion-entering` around a swap and holds the render while a
+// leaving element's transitions run. Its header carries the rules; this
+// file only gives it two seams — `islandFor` and the `hibiki:before-render`
+// event the transmit swap dispatches (the same shape Turbo gives streams).
+//
 // The left side of `->` is a hibiki event name: click, change, input,
 // and submit are delegated DOM listeners; `visible` is a pseudo-event
 // backed by an IntersectionObserver (the element entering the viewport).
@@ -131,6 +139,18 @@ let consumer
 // island pins nothing even if disconnect never ran.
 const islands = new WeakMap()
 
+// The generic island CONTAINING element, or undefined. The walk performOn
+// uses, exported for the motion module's `own` policy — which reads the
+// island's trip records, so a ChannelController subclass (not in the map)
+// gets plain marks only.
+export function islandFor(element) {
+  for (let node = element; node; node = node.parentElement) {
+    const island = islands.get(node)
+    if (island) return island
+  }
+  return undefined
+}
+
 // camelCase Stimulus method name → snake_case Ruby channel action.
 const underscore = (name) => name.replace(/([A-Z])/g, "_$1").toLowerCase()
 
@@ -228,6 +248,7 @@ export class ChannelController extends Controller {
     this.seq = 0
     this.renders = 0
     this.busy = new Map()
+    this.lastControl = null
     this.queued = []
     this.setState("connecting")
   }
@@ -348,7 +369,11 @@ export class ChannelController extends Controller {
   // A depth counter, not a boolean: typing while a page loads is one island
   // with two actions outstanding. No requestAnimationFrame anywhere — it
   // never fires in a background tab, which is exactly when a stuck
-  // indicator goes unnoticed.
+  // indicator goes unnoticed. (The motion module is the one place a frame
+  // is waited for, and it waits for nothing in a hidden document.) An ack
+  // settles a trip even while that module is holding the render: the flag
+  // means the server has not answered, and a hold is motion after the
+  // answer.
 
   beginBusy(seq) {
     const record = {
@@ -373,6 +398,11 @@ export class ChannelController extends Controller {
   // has none); controls outside it — the search field — need the removal
   // in settle().
   trackControl(seq, control) {
+    // The most recent gesture, kept past its trip's settle for the motion
+    // module's `own` policy (a render can land after the ack's grace). Set
+    // before the record check: a send that died on the socket was still a
+    // gesture. A ChannelController subclass wanting `own` calls this itself.
+    this.lastControl = control
     const record = this.busy.get(seq)
     if (!record) return
     record.control = control
@@ -453,7 +483,13 @@ export class ChannelController extends Controller {
   //
   // { url } — mirror graph state into the address bar (transmit_url).
   //
-  // { html } — a fragment: swap it in by its root id.
+  // { html } — a fragment: swap it in by its root id. The swap is holdable
+  // the way Turbo's is: `hibiki:before-render` bubbles from the island
+  // first (detail { island, content, render }), and a listener may replace
+  // detail.render with one that waits — the motion module does, to let a
+  // leaving element's transition finish. Returns whatever that render
+  // returns: undefined when the swap ran synchronously, a promise when it
+  // was held, which is what a subclass reading the DOM afterwards awaits.
   //
   // Anything else is not ours to interpret. Subclasses may override, but
   // should call super (or handle `value`) to keep reactive values live.
@@ -469,9 +505,18 @@ export class ChannelController extends Controller {
     if (!html) return
     const template = document.createElement("template")
     template.innerHTML = html
-    for (const fragment of [...template.content.children]) {
-      document.getElementById(fragment.id)?.replaceWith(fragment)
+    const fragments = [...template.content.children]
+    const render = () => {
+      for (const fragment of fragments) {
+        document.getElementById(fragment.id)?.replaceWith(fragment)
+      }
     }
+    const event = new CustomEvent("hibiki:before-render", {
+      bubbles: true,
+      detail: { island: this, content: template.content, render }
+    })
+    this.element.dispatchEvent(event)
+    return event.detail.render()
   }
 
   // replaceState, never pushState: the URL is a mirror of graph state, not
@@ -629,10 +674,13 @@ export default class HibikiController extends ChannelController {
     super.disconnect()
   }
 
-  // The other swap point: hibiki's own transmit transport.
+  // The other swap point: hibiki's own transmit transport. A held swap
+  // hands back a promise; the replacement sentinel exists only after it.
   received(data) {
-    super.received(data)
-    if (data.html) this.scanSentinels()
+    const swapped = super.received(data)
+    if (!data.html) return
+    if (swapped?.then) swapped.then(() => this.scanSentinels())
+    else this.scanSentinels()
   }
 
   // Observe every `visible->` sentinel this island owns. observe() is a
@@ -771,10 +819,8 @@ export { HibikiController }
 // element (a structural mistake, hence the warn; the offline case stays
 // quiet because it is expected weather).
 export function performOn(element, action, payload = {}) {
-  for (let node = element; node; node = node.parentElement) {
-    const island = islands.get(node)
-    if (island) return island.perform(action, payload)
-  }
+  const island = islandFor(element)
+  if (island) return island.perform(action, payload)
   console.warn("hibiki: performOn found no island containing", element)
   return undefined
 }

data/config/importmap.rb

@@ -6,3 +6,5 @@
 # — both are part of the Rails 8 default stack. The client takes Action
 # Cable from turbo-rails' consumer, so no "@rails/actioncable" pin is needed.
 pin "hibiki-rails", to: "hibiki.js"
+# The opt-in motion module; it imports "hibiki-rails" by the pin above.
+pin "hibiki-rails/motion", to: "hibiki-motion.js"

data/lib/generators/hibiki/rails/css_variant.rb

@@ -57,6 +57,11 @@ module Hibiki
           card: "card bg-base-100 shadow-sm",
           card_body: "card-body",
           card_actions: "card-actions justify-end",
+          # The row under motion: card and body as ONE element, so the sliding
+          # wrapper above it adds no depth to the row's content. And the
+          # display wrapper, a swap unit with no box of its own.
+          row_card: "card bg-base-100 shadow-sm card-body",
+          contents: "contents",
           toggle: "toggle",
           toggle_sm: "toggle toggle-sm",
           btn: "btn",
@@ -149,6 +154,7 @@ module Hibiki
           card: "rounded-lg border border-gray-200 bg-white shadow-sm",
           card_body: "p-6 space-y-2",
           card_actions: "flex flex-wrap justify-end gap-2 pt-4",
+          row_card: "rounded-lg border border-gray-200 bg-white shadow-sm p-6 space-y-2",
           toggle: CHECKBOX,
           toggle_sm: CHECKBOX,
           btn: SECONDARY_BUTTON,

data/lib/generators/hibiki/rails/scaffold/USAGE

@@ -25,8 +25,11 @@ Example:
         app/controllers/books_controller.rb
         app/views/books/*
         app/assets/stylesheets/hibiki_busy.css
+        app/assets/stylesheets/hibiki_motion.css
     And add to config/routes.rb:
         resources :books
+    And to app/javascript/application.js:
+        import "hibiki-rails/motion"
 
     Restart the server afterwards if it is running — app/forms and
     app/queries are new.
@@ -34,3 +37,7 @@ Example:
     Pass --phlex to emit Phlex components under app/views/books/*.rb instead of
     ERB templates. The view layer is the only thing it changes; it needs the
     phlex-rails gem and `bin/rails g phlex:install`.
+
+    Rows and inline forms slide open and shut. Pass --skip-motion to leave
+    that out: no motion stylesheet, no import, no marks in the views.
+    --css=none never emits it either.

data/lib/generators/hibiki/rails/scaffold/scaffold_generator.rb

@@ -46,6 +46,8 @@ module Hibiki
                                    desc: "Omit the search box and the LIKE terms behind it"
         class_option :skip_create, type: :boolean, default: false,
                                    desc: "Omit the inline create form — New always navigates"
+        class_option :skip_motion, type: :boolean, default: false,
+                                   desc: "Omit the enter/leave motion — no hibiki_motion.css, no marks"
         class_option :page_size, type: :numeric, default: 20, desc: "Rows per page"
         class_option :phlex, type: :boolean, default: false,
                              desc: "Emit Phlex components under app/views instead of ERB templates"

data/lib/generators/hibiki/rails/scaffold_controller/USAGE

@@ -24,11 +24,17 @@ Example:
         app/controllers/books_controller.rb
         app/views/books/*
         app/assets/stylesheets/hibiki_busy.css
+        app/assets/stylesheets/hibiki_motion.css
     And modify:
         app/models/book.rb
         app/models/author.rb   # each model a belongs_to points at
+        app/javascript/application.js   # imports hibiki-rails/motion
         config/routes.rb
 
     Pass --phlex to emit Phlex components under app/views/books/*.rb instead of
     ERB templates. The view layer is the only thing it changes; it needs the
     phlex-rails gem and `bin/rails g phlex:install`.
+
+    Rows and inline forms slide open and shut. Pass --skip-motion to leave
+    that out: no motion stylesheet, no import, no marks in the views.
+    --css=none never emits it either.

data/lib/generators/hibiki/rails/scaffold_controller/scaffold_controller_generator.rb

@@ -12,6 +12,7 @@ require_relative "../scaffold_phlex_helpers"
 require_relative "../scaffold_post_install"
 require_relative "../scaffold_shared_views"
 require_relative "../scaffold_transport_stylesheet"
+require_relative "../scaffold_motion"
 require_relative "../scaffold_schema"
 require_relative "../css_variant"
 
@@ -39,6 +40,7 @@ module Hibiki
         include ScaffoldPostInstall
         include ScaffoldSharedViews
         include ScaffoldTransportStylesheet
+        include ScaffoldMotion
 
         TEMPLATE_ROOT = File.expand_path("templates", __dir__)
 
@@ -59,6 +61,8 @@ module Hibiki
                                    desc: "Omit the search box and the LIKE terms behind it"
         class_option :skip_create, type: :boolean, default: false,
                                    desc: "Omit the inline create form — New always navigates"
+        class_option :skip_motion, type: :boolean, default: false,
+                                   desc: "Omit the enter/leave motion — no hibiki_motion.css, no marks"
         class_option :page_size, type: :numeric, default: 20,
                                  desc: "Rows per page"
         class_option :skip_routes, type: :boolean,
@@ -89,14 +93,19 @@ module Hibiki
           @new_app_dirs = %w[app/forms app/queries app/channels app/models app/views].reject { exists?(it) }
         end
 
-        # One file per app, not per resource, and the only thing this generator
-        # writes outside app/{channels,models,forms,views,controllers}. It
-        # carries no model knowledge at all — the rules key on the client's
-        # attributes — so a second resource finds it already there.
+        # One file per app, not per resource (two under motion), and the only
+        # thing this generator writes outside app/{channels,models,forms,views,
+        # controllers} besides the motion import. They carry no model knowledge
+        # at all — the rules key on the client's attributes — so a second
+        # resource finds them already there.
         def create_stylesheet
           create_transport_stylesheet
         end
 
+        def wire_motion
+          wire_motion_module
+        end
+
         def create_channels
           template "channel.rb.tt", collection_channel_path
           template "member_channel.rb.tt", member_channel_path
@@ -292,6 +301,10 @@ module Hibiki
         def css(token) = CssVariant.token(css_variant, token)
         def css? = css_variant != :none
 
+        # Motion rides the stylesheet: --css=none is a hand-styled app, and its
+        # views must stay byte-identical to a --skip-motion run.
+        def motion? = css? && !options[:skip_motion]
+
         # nil means "no window": .limit(nil) and .offset(nil) are both relation
         # no-ops, so one constant replaces template conditionals across five
         # files.

data/lib/generators/hibiki/rails/scaffold_controller/templates/phlex/shared/views/list.rb.tt

@@ -48,8 +48,15 @@ class <%= view_class_name(:list) %> < Views::Base
 <% if inline_create? -%>
 
   def create_form
+<% if motion? -%>
+    # data-motion: the client holds the card while it slides shut; the slide
+    # itself is hbk-slide in hibiki_motion.css.
+    div<%= arg_list(%(id: "#{row_dom_id_prefix}_new"), "data: { motion: true }", *hbk_args("hbk-slide", token: :card)) %> do
+      div<%= arg_list(*hbk_args("hbk-slide-body", token: :card_body)) %> do
+<% else -%>
     div<%= arg_list(%(id: "#{row_dom_id_prefix}_new"), *css_args(:card)) %> do
       div<%= arg_list(*css_args(:card_body)) %> do
+<% end -%>
 <%= render_call(:row_form, create_form_render_args, indent: 8) %>
       end
     end
@@ -61,10 +68,11 @@ class <%= view_class_name(:list) %> < Views::Base
     pages = <%= query_class_name %>.page_numbers(page: @page, page_count: @page_count)
 <%= render_call(:pagination, ["page: @page", "page_count: @page_count", "pages: pages", %(anchor: "##{list_dom_id}"), "id: id", "url: page_url"], indent: 4, shared: true) %>
   end
+<% end -%>
 
-  # Real pagination hrefs carrying the current query state — the channel
-  # re-renders them with url_params fresh, so the fallback URLs stay
-  # truthful as the live state moves.
+  # Real hrefs for the <%= infinite? ? "Load-more link" : "page links" %>, carrying the current query
+  # state — the channel re-renders them with url_params fresh, so the
+  # fallback URLs stay truthful as the live state moves.
   def page_url
     ->(n) do
       query = @url_params.except(:page)
@@ -72,19 +80,22 @@ class <%= view_class_name(:list) %> < Views::Base
       <%= index_helper(type: :path) %>(**query)
     end
   end
-<% end -%>
 <% if infinite? -%>
 
-  # `visible` is a pseudo-event backed by an IntersectionObserver, so this
-  # button doubles as the infinite-scroll sentinel. The client stamps
-  # data-hibiki-busy on it while the next page is in flight.
+  # `visible` is a pseudo-event backed by an IntersectionObserver: the wrapper
+  # is the scroll sentinel, the link inside it is the click path and its href
+  # the fallback. A sentinel must never fall back — scrolling into view on a
+  # dead socket would navigate.
   def load_more
-    div<%= arg_list(%(id: "#{load_more_dom_id}"), *css_args(:load_more_wrap)) %> do
-      button<%= arg_list(%(type: "button"), *css_args(:btn_wide), "**on(:go_to_page, event: %i[click visible], with: { page: @page + 1 })", indent: 13) %> do
+    div<%= arg_list(%(id: "#{load_more_dom_id}"), *css_args(:load_more_wrap), "**on(:go_to_page, event: :visible, with: { page: @page + 1 })", indent: 8) %> do
+      # The STRING "false", not the boolean — Phlex omits false-valued attributes.
+      a<%= arg_list("href: load_more_href", *css_args(:btn_wide), "data: { turbo: \"false\" }.merge(on(:go_to_page, with: { page: @page + 1 },\n#{' ' * 42}fallback: true)[:data])", indent: 8) %> do
         plain "Load more"
         span<%= arg_list(*css_args(:muted_inline)) %> { " · #{@remaining} remaining" }
       end
     end
   end
+
+  def load_more_href = "#{page_url.(@page + 1)}#<%= row_dom_id_prefix %>_#{@<%= controller_file_name %>.last.id}"
 <% end -%>
 end

data/lib/generators/hibiki/rails/scaffold_controller/templates/phlex/shared/views/row.rb.tt

@@ -19,18 +19,47 @@ class <%= view_class_name(:row) %> < Views::Base
   def view_template
     # The root id stays stable across display/edit, so idiomorph pairs the
     # subtrees instead of rebuilding them (and losing focus).
+<% if motion? -%>
+    # data-motion="own": the row slides out when its own Destroy removes it;
+    # rows that page or filter away go at once. The wrapper closes the gap
+    # while the card inside slides left (hbk-slide-x, hibiki_motion.css).
+    div<%= arg_list(%(id: "#{row_dom_id_prefix}_\#{#{record_ref}.id}"), %(data: { motion: "own" }), *hbk_args("hbk-slide-x")) %> do
+      div<%= arg_list(*hbk_args("hbk-slide-x-body", token: :row_card)) %> do
+        @editing ? edit_form : display
+      end
+    end
+<% else -%>
     div<%= arg_list(%(id: "#{row_dom_id_prefix}_\#{#{record_ref}.id}"), *css_args(:card)) %> do
       div<%= arg_list(*css_args(:card_body)) %> do
         @editing ? edit_form : fields
       end
     end
+<% end -%>
   end
 
   private
 
+<% if motion? -%>
+  # The edit and display wrappers carry distinct ids so idiomorph swaps them
+  # instead of morphing one into the other — starting: fires only on a real
+  # insertion. The client holds the edit wrapper while it slides shut.
+  def edit_form
+    div<%= arg_list(%(id: "#{row_dom_id_prefix}_\#{#{record_ref}.id}_edit"), "data: { motion: true }", *hbk_args("hbk-slide")) %> do
+      div<%= arg_list(*hbk_args("hbk-slide-body")) %> do
+<%= render_call(:row_form, row_form_render_args, indent: 8) %>
+      end
+    end
+  end
+
+  # contents: no box of its own, so the card's layout is unchanged.
+  def display
+    div<%= arg_list(%(id: "#{row_dom_id_prefix}_\#{#{record_ref}.id}_display"), *css_args(:contents)) %> { fields }
+  end
+<% else -%>
   def edit_form
 <%= render_call(:row_form, row_form_render_args, indent: 4) %>
   end
+<% end -%>
 
   def fields
 <% schema.columns.each do |column| -%>

data/lib/generators/hibiki/rails/scaffold_controller/templates/shared/hibiki_motion.css.tt

@@ -0,0 +1,70 @@
+<%#- ESCAPING: all of this is literal CSS. There is no runtime ERB here at all —
+     a .css file is never rendered — and no generation-time branch either: this
+     file is not installed under --css=none. -%>
+/* The app's half of the motion contract: the hibiki-rails/motion module
+   stamps data-motion-leaving / data-motion-entering on a marked element
+   around a swap, and these classes turn that into motion. Only ever READ
+   those attributes — never write them.
+
+   One file per app. Duration and easing are tuned HERE — the views carry the
+   class names only. @utility, not a plain class: that puts each one in the
+   utilities layer, above daisyUI's components (a .card would otherwise win
+   on display and transition), and Tailwind orders multi-property utilities
+   first, so a single utility on the element (duration-500) still wins.
+   Needs Tailwind >= 4.1 (the in-* variant). */
+
+/* Slide open on insertion, shut on removal. The body class goes on the grid
+   child: the collapsed height's floor is its padding, so that slides too.
+   mb-0 keeps a space-y-* list's margin from jumping at either end. */
+@utility hbk-slide {
+  @apply grid grid-rows-[1fr] transition-all duration-300 ease-out
+    starting:grid-rows-[0fr] starting:opacity-0 starting:mb-0
+    data-motion-leaving:grid-rows-[0fr] data-motion-leaving:opacity-0
+    data-motion-leaving:mb-0 data-motion-leaving:ease-in
+    data-motion-entering:overflow-hidden data-motion-leaving:overflow-hidden
+    motion-reduce:transition-none;
+}
+@utility hbk-slide-body {
+  @apply min-h-0 transition-[padding] duration-300 ease-out
+    starting:py-0 in-data-motion-leaving:py-0 in-data-motion-leaving:ease-in;
+}
+
+/* Slide out sideways, then close the gap — the swipe-to-delete shape, for a
+   removal only. Two boxes: the wrapper closes the gap on a delay, and the
+   body (the visible card) slides left and fades first. */
+@utility hbk-slide-x {
+  @apply grid grid-rows-[1fr] transition-[grid-template-rows,margin] duration-300 delay-200 ease-out
+    data-motion-leaving:grid-rows-[0fr] data-motion-leaving:mb-0 data-motion-leaving:overflow-hidden
+    motion-reduce:transition-none;
+}
+@utility hbk-slide-x-body {
+  @apply min-h-0 transition-[translate,opacity] duration-300 ease-in
+    in-data-motion-leaving:-translate-x-full in-data-motion-leaving:opacity-0;
+}
+
+/* The rest of the set. Only the slides animate height; these leave the
+   neighbours jumping. Parameters are custom properties, overridable on the
+   element: class="hbk-fly [--hbk-fly-y:2rem]". */
+@utility hbk-fade {
+  @apply transition-opacity duration-300
+    starting:opacity-0 data-motion-leaving:opacity-0
+    motion-reduce:transition-none;
+}
+@utility hbk-fly {
+  @apply [--hbk-fly-x:0px] [--hbk-fly-y:1rem] transition-[translate,opacity] duration-300 ease-out
+    starting:opacity-0 starting:translate-x-(--hbk-fly-x) starting:translate-y-(--hbk-fly-y)
+    data-motion-leaving:opacity-0 data-motion-leaving:translate-x-(--hbk-fly-x) data-motion-leaving:translate-y-(--hbk-fly-y)
+    motion-reduce:transition-none;
+}
+@utility hbk-scale {
+  @apply [--hbk-scale:0.95] transition-[scale,opacity] duration-300 ease-out
+    starting:opacity-0 starting:scale-(--hbk-scale)
+    data-motion-leaving:opacity-0 data-motion-leaving:scale-(--hbk-scale)
+    motion-reduce:transition-none;
+}
+@utility hbk-blur {
+  @apply [--hbk-blur:4px] transition-[filter,opacity] duration-300
+    starting:opacity-0 starting:blur-(--hbk-blur)
+    data-motion-leaving:opacity-0 data-motion-leaving:blur-(--hbk-blur)
+    motion-reduce:transition-none;
+}

data/lib/generators/hibiki/rails/scaffold_controller/templates/shared/views/_list.html.erb.tt

@@ -3,23 +3,28 @@
 <%%# locals: (<%= list_locals_signature %>) -%>
 <%%# The island's re-rendered fragment. Its root id is the broadcast target —
     deliberately not the island root, which carries the stream source. %>
-<% unless infinite? -%>
-<%%# Real pagination hrefs carrying the current query state — the channel
-    re-renders them with url_params fresh, so the fallback URLs stay
-    truthful as the live state moves. %>
+<%%# Real hrefs for the <%= infinite? ? "Load-more link" : "page links" %>, carrying the current query
+    state — the channel re-renders them with url_params fresh, so the
+    fallback URLs stay truthful as the live state moves. %>
 <%% page_url = ->(n) do
      query = url_params.except(:page)
      query[:page] = n unless n == 1
      <%= index_helper(type: :path) %>(**query)
    end %>
-<% end -%>
 <div id="<%= list_dom_id %>"<%= css_attr(:list) %>>
 <% if inline_create? -%>
   <%%# The inline create form — only the channel ever renders it (the New
       link's action sets creating), so the first paint never carries it. %>
   <%% if creating %>
+<% if motion? -%>
+    <%%# data-motion: the client holds the card while it slides shut; the
+        slide itself is hbk-slide in hibiki_motion.css. %>
+    <div id="<%= row_dom_id_prefix %>_new" data-motion<%= hbk_attr("hbk-slide", token: :card) %>>
+      <div<%= hbk_attr("hbk-slide-body", token: :card_body) %>>
+<% else -%>
     <div id="<%= row_dom_id_prefix %>_new"<%= css_attr(:card) %>>
       <div<%= css_attr(:card_body) %>>
+<% end -%>
         <%%= render "<%= partial_path(row_form_partial) %>", <%= wrapped_list(create_form_render_locals, indent: render_indent(partial_path(row_form_partial)) + 4, width: 0).lstrip %> %>
       </div>
     </div>
@@ -44,20 +49,25 @@
   <%% end %>
 
 <% if infinite? -%>
-  <%%# `visible` is a pseudo-event backed by an IntersectionObserver, so this
-      button doubles as the infinite-scroll sentinel. The client stamps
-      data-hibiki-busy on it while the next page is in flight. %>
+  <%%# `visible` is a pseudo-event backed by an IntersectionObserver: the wrapper
+      is the scroll sentinel, the link inside it is the click path and its href
+      the fallback. A sentinel must never fall back — scrolling into view on a
+      dead socket would navigate. %>
   <%% if remaining.positive? %>
-    <div id="<%= load_more_dom_id %>"<%= css_attr(:load_more_wrap) %>>
-      <%%= tag.button(type: "button",
+    <%%= tag.div(id: "<%= load_more_dom_id %>",
 <% if css? -%>
-                     class: "<%= css(:btn_wide) %>",
+                class: "<%= css(:load_more_wrap) %>",
 <% end -%>
-                     **on(:go_to_page, event: %i[click visible],
-                                       with: { page: page + 1 })) do %>
+                **on(:go_to_page, event: :visible, with: { page: page + 1 })) do %>
+      <%%= link_to "#{page_url.(page + 1)}#<%= row_dom_id_prefix %>_#{<%= controller_file_name %>.last.id}",
+<% if css? -%>
+                  class: "<%= css(:btn_wide) %>",
+<% end -%>
+                  data: { turbo: false }.merge(on(:go_to_page, with: { page: page + 1 },
+                                                  fallback: true)[:data]) do %>
         Load more<span<%= css_attr(:muted_inline) %>>&nbsp;·&nbsp;<%%= remaining %> remaining</span>
       <%% end %>
-    </div>
+    <%% end %>
   <%% end %>
 <% else -%>
   <%%= render "shared/pagination", page: page, page_count: page_count, pages: pages,

data/lib/generators/hibiki/rails/scaffold_controller/templates/shared/views/_row.html.erb.tt

@@ -9,11 +9,34 @@
     default. %>
 <%%# The root id stays stable across display/edit, so idiomorph pairs the
     subtrees instead of rebuilding them (and losing focus). %>
+<% if motion? -%>
+<%%# data-motion="own": the row slides out when its own Destroy removes it;
+    rows that page or filter away go at once. The wrapper closes the gap
+    while the card inside slides left (hbk-slide-x, hibiki_motion.css). %>
+<div id="<%= row_dom_id_prefix %>_<%%= <%= singular_name %>.id %>" data-motion="own"<%= hbk_attr("hbk-slide-x") %>>
+  <div<%= hbk_attr("hbk-slide-x-body", token: :row_card) %>>
+<% else -%>
 <div id="<%= row_dom_id_prefix %>_<%%= <%= singular_name %>.id %>"<%= css_attr(:card) %>>
   <div<%= css_attr(:card_body) %>>
+<% end -%>
     <%% if editing %>
+<% if motion? -%>
+    <%%# The edit and display wrappers carry distinct ids so idiomorph swaps
+        them instead of morphing one into the other — starting: fires only
+        on a real insertion. The client holds this one while it slides shut. %>
+    <div id="<%= row_dom_id_prefix %>_<%%= <%= singular_name %>.id %>_edit" data-motion<%= hbk_attr("hbk-slide") %>>
+      <div<%= hbk_attr("hbk-slide-body") %>>
+        <%%= render "<%= partial_path(row_form_partial) %>", <%= wrapped_list(row_form_render_locals, indent: render_indent(partial_path(row_form_partial)) + 4).lstrip %> %>
+      </div>
+    </div>
+<% else -%>
     <%%= render "<%= partial_path(row_form_partial) %>", <%= wrapped_list(row_form_render_locals, indent: render_indent(partial_path(row_form_partial))).lstrip %> %>
+<% end -%>
     <%% else %>
+<% if motion? -%>
+    <%%# contents: no box of its own, so the card's layout is unchanged. %>
+    <div id="<%= row_dom_id_prefix %>_<%%= <%= singular_name %>.id %>_display"<%= css_attr(:contents) %>>
+<% end -%>
 <% schema.columns.each do |column| -%>
     <div>
       <strong><%= column.human_name %>:</strong>
@@ -53,6 +76,9 @@
                          confirm: "Are you sure?", fallback: true)[:data]) } %>
     </div>
     <%% end %>
+<% if motion? -%>
+    </div>
+<% end -%>
     <%% end %>
   </div>
 </div>

data/lib/generators/hibiki/rails/scaffold_motion.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Hibiki
+  module Rails
+    module Generators
+      # Getting the motion module onto the page. The views carry the marks and
+      # the class names, the stylesheet carries the rules, and this is the
+      # third leg: the client module that holds a render while a marked
+      # element's transition runs. Without it everything still works — rows
+      # pop instead of sliding — which is exactly the kind of silent gap a
+      # notice exists for.
+      #
+      # One import line, in the file both worlds have: importmap apps resolve
+      # it through the engine's pin, bundler apps through the npm package.
+      module ScaffoldMotion
+        APPLICATION_JS = "app/javascript/application.js"
+        MOTION_IMPORT = %(import "hibiki-rails/motion"\n)
+
+        private
+
+        def wire_motion_module
+          return unless motion?
+
+          @motion_wiring =
+            if wired?(APPLICATION_JS, MOTION_IMPORT.strip)
+              :already
+            elsif exists?(APPLICATION_JS)
+              append_to_file APPLICATION_JS, MOTION_IMPORT
+              :import
+            else
+              :manual
+            end
+        end
+
+        def motion_notice
+          case @motion_wiring
+          when :import
+            say_status :motion, "#{APPLICATION_JS} now imports hibiki-rails/motion, the client module " \
+                                "that lets a marked element finish its transition before a render " \
+                                "removes it", :blue
+          when :manual
+            say_status :motion, "#{APPLICATION_JS} not found, so nothing will slide. Import the motion " \
+                                "module from your JavaScript entry point: #{MOTION_IMPORT.strip}", :yellow
+          end
+        end
+      end
+    end
+  end
+end

data/lib/generators/hibiki/rails/scaffold_post_install.rb

@@ -27,6 +27,7 @@ module Hibiki
           # These live with the code that chose their branch, like
           # parent_notices — the outcomes are those modules' vocabulary.
           stylesheet_notice
+          motion_notice
           stale_erb_views_notice
           shared_views_notice
           stale_shared_views_notice

data/lib/generators/hibiki/rails/scaffold_transport_stylesheet.rb

@@ -3,20 +3,44 @@
 module Hibiki
   module Rails
     module Generators
-      # Emitting the transport stylesheet, and getting it onto the page.
+      # Emitting the app-wide stylesheets, and getting them onto the page.
       #
-      # The rules key on the client's attributes and know nothing about any
-      # model, so this is ONE file per app rather than one per resource — which
-      # is also why every write here is idempotent: scaffolding a second
-      # resource finds it already present and leaves it, and the wiring line it
-      # needs is added at most once.
+      # Two of them: the transport stylesheet (the client's loading and
+      # connection state) and, when motion is on, the motion stylesheet (the
+      # classes the views name). Both key on attributes the client stamps and
+      # know nothing about any model, so each is ONE file per app rather than
+      # one per resource — which is also why every write here is idempotent:
+      # scaffolding a second resource finds it already present and leaves it,
+      # and the wiring line it needs is added at most once.
       #
-      # Getting it onto the page is the part with branches, because "the main
-      # stylesheet" is not one thing. Three app shapes cover everything the
-      # generators have been run against, and the fourth branch is a printed
-      # instruction rather than a guess.
+      # Getting a file onto the page is the part with branches, because "the
+      # main stylesheet" is not one thing. Three app shapes cover everything
+      # the generators have been run against, and the fourth branch is a
+      # printed instruction rather than a guess.
       module ScaffoldTransportStylesheet
-        STYLESHEET = "app/assets/stylesheets/hibiki_busy.css"
+        DIR = "app/assets/stylesheets"
+
+        # What each file is FOR, in the notice's words: what it does once
+        # wired, and what stays broken while it is not. The busy sheet is
+        # always installed; the motion sheet only under motion?.
+        STYLESHEETS = {
+          busy: {
+            file: "hibiki_busy.css",
+            wired: "It styles the client's loading and connection state, and is shared by every " \
+                   "generated resource",
+            unwired: "the loading and connection state will be invisible"
+          },
+          motion: {
+            file: "hibiki_motion.css",
+            wired: "It defines the motion classes the views name (hbk-slide, hbk-slide-x, hbk-fade, " \
+                   "…); duration and easing are tuned there",
+            unwired: "nothing will slide"
+          }
+        }.freeze
+
+        # The busy sheet's names, kept as constants: the specs and the docs
+        # refer to them.
+        STYLESHEET = "#{DIR}/#{STYLESHEETS.dig(:busy, :file)}".freeze
         LOGICAL_NAME = "hibiki_busy"
 
         # The LEADING ./ is not decoration. Tailwind 4's CLI resolves imports
@@ -26,12 +50,13 @@ module Hibiki
         IMPORT_LINE = %(@import "./hibiki_busy.css";)
 
         # The entry stylesheet a bundler compiles, in the order the two
-        # conventions are checked. cssbundling-rails keeps it beside the other
-        # stylesheets; tailwindcss-rails gives it its own directory, so the
-        # import has to climb out of it.
+        # conventions are checked, each with the path an import there needs.
+        # cssbundling-rails keeps it beside the other stylesheets;
+        # tailwindcss-rails gives it its own directory, so the import has to
+        # climb out of it.
         ENTRIES = {
-          "app/assets/stylesheets/application.tailwind.css" => IMPORT_LINE,
-          "app/assets/tailwind/application.css" => %(@import "../stylesheets/hibiki_busy.css";)
+          "app/assets/stylesheets/application.tailwind.css" => "./",
+          "app/assets/tailwind/application.css" => "../stylesheets/"
         }.freeze
 
         LAYOUT = "app/views/layouts/application.html.erb"
@@ -43,8 +68,10 @@ module Hibiki
 
         # Anchor for the fallback, and deliberately narrow: it matches the line
         # a stock layout carries so the new tag lands directly after it, in the
-        # <head>, where a stylesheet belongs.
-        SINGLE_LINK = /^.*stylesheet_link_tag\s+["':].*$\n/
+        # <head>, where a stylesheet belongs. Never one of OUR tags: Thor's
+        # insert_into_file lands after every match, and the second sheet must
+        # not land twice.
+        SINGLE_LINK = /^.*stylesheet_link_tag\s+(?!"hibiki_)["':].*$\n/
 
         LINK_TAG = %(    <%= stylesheet_link_tag "hibiki_busy", "data-turbo-track": "reload" %>\n)
 
@@ -54,39 +81,48 @@ module Hibiki
         # always opens with its own import, which ours must follow anyway. An
         # entry someone rewrote without that line just gets the import
         # appended; assume they will place it themselves. (Order never protects
-        # the rules from the utilities — being unlayered does, see the
+        # the rules from the utilities — being unlayered does, see the busy
         # stylesheet's own header.)
         TAILWIND_IMPORT = %(@import "tailwindcss";\n)
 
         private
 
         def create_transport_stylesheet
-          template "hibiki_busy.css.tt", STYLESHEET
-          wire_transport_stylesheet
+          @stylesheet_wiring = {}
+          install_stylesheet(:busy)
+          install_stylesheet(:motion) if motion?
         end
 
         # Records what happened for the post-install notice, which is the only
         # place the user learns which branch they landed on.
-        def wire_transport_stylesheet
-          @stylesheet_wiring =
-            if (entry = ENTRIES.keys.find { exists?(it) })
-              import_into_entry(entry)
-            elsif wired?(LAYOUT, BULK_LINK)
-              :bulk
-            else
-              link_from_layout
-            end
+        def install_stylesheet(key)
+          sheet = STYLESHEETS.fetch(key)
+          template "#{sheet[:file]}.tt", stylesheet_path(sheet)
+          @stylesheet_wiring[key] = wire_stylesheet(sheet)
+        end
+
+        def wire_stylesheet(sheet)
+          if (entry = ENTRIES.keys.find { exists?(it) })
+            import_into_entry(entry, sheet)
+          elsif wired?(LAYOUT, BULK_LINK)
+            :bulk
+          else
+            link_from_layout(sheet)
+          end
         end
 
         # The :already probe uses the entry's OWN line, not IMPORT_LINE — the
         # tailwindcss-rails entry imports "../stylesheets/hibiki_busy.css", and
         # probing for the "./" spelling there re-appended on every re-run.
-        def import_into_entry(entry)
-          line = ENTRIES.fetch(entry)
+        # A later sheet lands below the one before it, so the entry reads in
+        # install order.
+        def import_into_entry(entry, sheet)
+          line = import_line(entry, sheet)
           return :already if wired?(entry, line)
 
-          if wired?(entry, TAILWIND_IMPORT)
-            inject_into_file entry, "#{line}\n", after: TAILWIND_IMPORT
+          anchor = [previous_import(entry, sheet), TAILWIND_IMPORT].compact.find { wired?(entry, it) }
+          if anchor
+            inject_into_file entry, "#{line}\n", after: anchor
           else
             append_to_file entry, "#{line}\n"
           end
@@ -97,27 +133,44 @@ module Hibiki
         # compiler rewrites url(...) — never @import. So an @import appended to
         # a plain application.css resolves to an undigested path and 404s
         # silently, which is why this branch edits the layout instead.
-        def link_from_layout
-          return :already if wired?(LAYOUT, LOGICAL_NAME)
+        def link_from_layout(sheet)
+          return :already if wired?(LAYOUT, logical_name(sheet))
           return :manual unless exists?(LAYOUT) && wired?(LAYOUT, SINGLE_LINK)
 
-          inject_into_file LAYOUT, LINK_TAG, after: SINGLE_LINK
+          inject_into_file LAYOUT, link_tag(sheet), after: SINGLE_LINK
           :layout
         end
 
-        # Which way it reached the page. Two of the three say what was EDITED,
-        # because a file this generator touched outside app/{channels,models,
-        # forms,views,controllers} should never be a surprise; :bulk and
-        # :already edited nothing and say nothing.
+        def stylesheet_path(sheet) = "#{DIR}/#{sheet[:file]}"
+        def logical_name(sheet) = File.basename(sheet[:file], ".css")
+        def import_line(entry, sheet) = %(@import "#{ENTRIES.fetch(entry)}#{sheet[:file]}";)
+        def link_tag(sheet) = %(    <%= stylesheet_link_tag "#{logical_name(sheet)}", "data-turbo-track": "reload" %>\n)
+
+        # The import line of the sheet installed before this one, or nil.
+        def previous_import(entry, sheet)
+          keys = STYLESHEETS.keys
+          index = keys.index { STYLESHEETS[it] == sheet }
+          return nil unless index&.positive?
+
+          "#{import_line(entry, STYLESHEETS[keys[index - 1]])}\n"
+        end
+
+        # Which way each sheet reached the page. Two of the four say what was
+        # EDITED, because a file this generator touched outside app/{channels,
+        # models,forms,views,controllers} should never be a surprise; :bulk
+        # and :already edited nothing and say nothing.
         #
         # :manual is the one that fails silently when ignored — the stylesheet
         # is on disk, nothing links it, every indicator is invisible, and
         # nothing raises.
         def stylesheet_notice
-          case @stylesheet_wiring
-          when :import then say_stylesheet_wired("imported from your entry stylesheet")
-          when :layout then say_stylesheet_wired("linked from #{LAYOUT}")
-          when :manual then say_stylesheet_manual
+          @stylesheet_wiring.each do |key, wiring|
+            sheet = STYLESHEETS.fetch(key)
+            case wiring
+            when :import then say_stylesheet_wired(sheet, "imported from your entry stylesheet")
+            when :layout then say_stylesheet_wired(sheet, "linked from #{LAYOUT}")
+            when :manual then say_stylesheet_manual(sheet)
+            end
           end
 
           stale_busy_partial_notice
@@ -136,16 +189,16 @@ module Hibiki
                              "asset — nothing renders it now, you can safely delete it", :yellow
         end
 
-        def say_stylesheet_wired(how)
-          say_status :css, "#{STYLESHEET} was created and #{how}. It styles the client's loading and " \
-                           "connection state, and is shared by every generated resource", :blue
+        def say_stylesheet_wired(sheet, how)
+          say_status :css, "#{stylesheet_path(sheet)} was created and #{how}. #{sheet[:wired]}", :blue
         end
 
-        def say_stylesheet_manual
-          say_status :css, "#{STYLESHEET} was created but nothing links it, so the loading and " \
-                           "connection state will be invisible. Add it to your layout —\n    " \
-                           "#{LINK_TAG.strip}\n  " \
-                           ", or import from your entry stylesheet: #{IMPORT_LINE}", :yellow
+        def say_stylesheet_manual(sheet)
+          say_status :css, "#{stylesheet_path(sheet)} was created but nothing links it, so " \
+                           "#{sheet[:unwired]}. Add it to your layout —\n    " \
+                           "#{link_tag(sheet).strip}\n  " \
+                           ", or import from your entry stylesheet: " \
+                           "#{import_line(ENTRIES.keys.first, sheet)}", :yellow
         end
       end
     end

data/lib/hibiki/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Hibiki
   module Rails
-    VERSION = "0.13.0"
+    VERSION = "0.15.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hibiki_rails
 version: !ruby/object:Gem::Version
-  version: 0.13.0
+  version: 0.15.0
 platform: ruby
 authors:
 - planetaska
@@ -76,6 +76,7 @@ extra_rdoc_files: []
 files:
 - CHANGELOG.md
 - README.md
+- app/assets/javascripts/hibiki-motion.js
 - app/assets/javascripts/hibiki.js
 - config/importmap.rb
 - lib/generators/hibiki/rails/css_variant.rb
@@ -136,6 +137,7 @@ files:
 - lib/generators/hibiki/rails/scaffold_controller/templates/shared/controller.rb.tt
 - lib/generators/hibiki/rails/scaffold_controller/templates/shared/form.rb.tt
 - lib/generators/hibiki/rails/scaffold_controller/templates/shared/hibiki_busy.css.tt
+- lib/generators/hibiki/rails/scaffold_controller/templates/shared/hibiki_motion.css.tt
 - lib/generators/hibiki/rails/scaffold_controller/templates/shared/member_channel.rb.tt
 - lib/generators/hibiki/rails/scaffold_controller/templates/shared/query.rb.tt
 - lib/generators/hibiki/rails/scaffold_controller/templates/shared/views/_controls.html.erb.tt
@@ -152,6 +154,7 @@ files:
 - lib/generators/hibiki/rails/scaffold_controller/templates/tailwind/views/_pagination.html.erb.tt
 - lib/generators/hibiki/rails/scaffold_helpers.rb
 - lib/generators/hibiki/rails/scaffold_model_injection.rb
+- lib/generators/hibiki/rails/scaffold_motion.rb
 - lib/generators/hibiki/rails/scaffold_parent_injection.rb
 - lib/generators/hibiki/rails/scaffold_parent_notices.rb
 - lib/generators/hibiki/rails/scaffold_phlex_helpers.rb