studio-engine 0.96.2.rc1 → 0.97.0.rc1

data/app/views/studio/_board_assets.html.erb

@@ -1,454 +1,11 @@
 <%#
-  studioBoard factory — the Alpine data behind the engine board primitive
-  (studio/board/_board). Ships here at PAGE level on purpose: a <script> inside the
-  board component template would be cloned/re-parsed and never run, so a consumer
-  renders THIS once in its layout (like studio/_leveling_activity_assets homes
-  levelingActionModal and studio/_birthday_assets homes birthdayModal), and the
-  board anywhere below just references window.studioBoard. SortableJS is loaded
-  globally by layouts/studio/_head (vendored, no CDN); this factory drives it.
-
-  ONE factory drives BOTH board shapes — it reads its selectors and behavior from
-  opts, so the kanban cross-column board (group + move PATCH + toasts + counts) and
-  the within-lane depth chart (group:false, a drag handle, reorder-only) are the
-  same code with different opts. See studio/board/_board for the full opts contract.
-
-  CRITICAL BOUNDARY — this factory is UI ONLY. It PATCHes an app-supplied move_url,
-  POSTs an app-supplied reorder_url, and reacts to a neutral JSON contract; it holds
-  ZERO domain logic. Custom behavior attaches by LISTENING to the dispatched
-  window events (studio:board-moved / :board-reordered / :card-added), and heavier
-  animation is delegated OPAQUELY to a window[fx] module + window[hook] fns the
-  engine never inspects.
+  Renders nothing. A layout or page that renders studio/board_assets keeps
+  working; the render can be deleted.
+
+  The board primitive's behaviour is the studio/board module. studio/alpine_shims
+  publishes its factory as window.studioBoard on every page, before Alpine
+  starts, so x-data="studioBoard({...})" on studio/board/_board resolves with no
+  page-level script. The board controller (studio/controllers/board_controller,
+  named by the board's own data-studio-controller) loads the vendored SortableJS
+  on a page that renders a board.
 %>
-<script>
-  (function () {
-    if (window.studioBoard) return;
-
-    window.studioBoard = function (opts) {
-      opts = opts || {};
-      return {
-        // --- config (from opts) --------------------------------------------
-        zoneSelector:   opts.zoneSelector || ".kanban-dropzone",
-        cardSelector:   opts.draggable || ".kanban-card",
-        emptySelector:  opts.emptySelector || null,
-        groupName:      (opts.group === false ? null : (opts.group || "studio-board")),
-        handle:         opts.handle || null,
-        sortFilter:     opts.filter || ".kanban-empty",
-        idAttr:         opts.idAttr || "slug",
-        zoneAttr:       opts.zoneAttr || "stage",
-        domIdPrefix:    opts.domIdPrefix || "card-",
-        moveUrl:        opts.moveUrl || null,
-        moveParam:      opts.moveParam || null,
-        reorderUrl:     opts.reorderUrl || "",
-        reorderPayload: opts.reorderPayload || "slugs",
-        optimistic:     opts.optimistic !== false,
-        toastsEnabled:  opts.toasts !== false,
-        live:           !!opts.live,
-        demo:           !!opts.demo,
-        fxName:         opts.fx || null,
-        onMoveHook:     opts.onMoveHook || null,
-        onDropHook:     opts.onDropHook || null,
-        labels:         opts.labels || {},
-        // gap 3: the column key a data-exit-action="archive" remove re-parents INTO
-        // (its #dropzone-<key>) rather than deleting the card. null ⇒ 0.27.0 removal.
-        archiveZone:    opts.archiveZone || null,
-        // DG4: selector for PINNED cards (a locked depth-chart starter). When set,
-        // locked cards are filtered from dragging AND a drag can't cross one, so a
-        // pinned card keeps its slot while the rest reflow. null ⇒ every card drags.
-        lockedSelector: opts.lockedSelector || null,
-
-        // --- state ---------------------------------------------------------
-        toasts: [],
-        // gap 1: board-level chrome state lives HERE, on the studioBoard scope, so a
-        // board's header_slot controls + column show_expr bind to it directly — no
-        // bespoke outer Alpine wrapper. Seeded from board_state; {} when omitted.
-        state: (opts.state && typeof opts.state === "object") ? opts.state : {},
-
-        // --- init ----------------------------------------------------------
-        init: function () {
-          // Set data-alpine-ready in $nextTick, NOT synchronously: x-init runs while
-          // Alpine is still walking this subtree, so inner @click handlers are not
-          // bound yet. $nextTick fires after the directive walk, so the flag then
-          // means "the board is fully wired and interactive" — the documented init
-          // flake fix carried over from the MS kanbanBoard.
-          var self = this;
-          this.$nextTick(function () {
-            self.$el.dataset.alpineReady = "true";
-            self.initSortables();
-            if (self.live) {
-              self.observeLive();
-              if (!self.fx()) self.installExitStreamFallback();
-            }
-          });
-        },
-
-        fx: function () { return this.fxName ? window[this.fxName] : null; },
-        cardId: function (el) { return el ? el.getAttribute("data-" + this.idAttr) : null; },
-        zoneKey: function (el) { return el ? el.getAttribute("data-" + this.zoneAttr) : null; },
-        label: function (zone) { return this.labels[zone] || zone; },
-
-        // --- board-chrome state helpers (gap 1) ----------------------------
-        // Generic, domain-free operations over `state` so a board's header_slot /
-        // column show_expr drive filters + toggles without a bespoke wrapper.
-        toggleState: function (key) { this.state[key] = !this.state[key]; },
-        listHas: function (key, val) {
-          return Array.isArray(this.state[key]) && this.state[key].indexOf(val) !== -1;
-        },
-        toggleInState: function (key, val) {
-          if (!Array.isArray(this.state[key])) this.state[key] = [];
-          var i = this.state[key].indexOf(val);
-          if (i === -1) { this.state[key].push(val); } else { this.state[key].splice(i, 1); }
-        },
-
-        // --- SortableJS wiring ---------------------------------------------
-        initSortables: function () {
-          if (typeof Sortable === "undefined") return;
-          var self = this;
-          document.querySelectorAll(this.zoneSelector).forEach(function (zone) {
-            var cfg = {
-              animation: 150,
-              ghostClass: "opacity-30",
-              draggable: self.cardSelector,
-              // DG4: locked cards join the undraggable filter so a pinned entry
-              // can't be picked up (empty state was already filtered).
-              filter: self.lockedSelector ? (self.sortFilter + ", " + self.lockedSelector) : self.sortFilter,
-              onStart: function () { window.__studioBoardDragging = true; },
-              onEnd: function (evt) {
-                self.handleSortEnd(evt);
-                requestAnimationFrame(function () { window.__studioBoardDragging = false; });
-              }
-            };
-            if (self.groupName) cfg.group = self.groupName; // omit ⇒ within-zone only
-            if (self.handle) cfg.handle = self.handle;
-            if (self.lockedSelector) {
-              // DG4: pin locked cards — refuse a move that would cross a locked
-              // sibling, so a dragged card can't leapfrog a pinned starter.
-              cfg.onMove = function (evt) {
-                return !(evt.related && evt.related.matches && evt.related.matches(self.lockedSelector));
-              };
-            }
-            Sortable.create(zone, cfg);
-          });
-        },
-
-        // A cross-column drop moves the card (PATCH); a same-zone drop is a pure
-        // reorder and must NEVER PATCH the zone. Source the from/to from the
-        // DROPZONES (evt.from / evt.to), never the card, so an in-place reorder
-        // can't mismove.
-        handleSortEnd: function (evt) {
-          var self = this;
-          var card = evt.item;
-          var fromZone = evt.from;
-          var toZone = evt.to;
-          var id = this.cardId(card);
-          var moved = fromZone !== toZone;
-
-          var afterMove = function (ok) {
-            if (moved && !ok) return; // reverted — leave the order alone
-            self.saveOrder(toZone);
-            self.updateCounts();
-          };
-
-          if (moved) {
-            Promise.resolve(this.applyMove(card, fromZone, toZone, id)).then(afterMove);
-          } else {
-            afterMove(true);
-          }
-        },
-
-        // Cross-column move: PATCH the zone attr; optimistic revert on failure.
-        applyMove: function (card, fromZone, toZone, id) {
-          var self = this;
-          var newZone = this.zoneKey(toZone);
-          var fromKey = this.zoneKey(fromZone);
-
-          // Moves not configured (or a within-zone board): a cross-zone drop is
-          // disallowed — snap back so a stray drag can't silently mismove. In demo
-          // mode with no move endpoint, still reflect the move locally.
-          if (!this.moveUrl || !this.moveParam) {
-            if (this.demo) {
-              this.setCardZone(card, newZone);
-              this.emit("board-moved", id, fromKey, newZone);
-              return true;
-            }
-            this.revert(card, fromZone);
-            return false;
-          }
-
-          if (this.demo) {
-            this.setCardZone(card, newZone);
-            this.toast("Moved to " + this.label(newZone), "success");
-            this.emit("board-moved", id, fromKey, newZone);
-            this.hook(this.onMoveHook, { record: id, from: fromKey, to: newZone });
-            return true;
-          }
-
-          var url = this.moveUrl.replace(":id", encodeURIComponent(id));
-          var body = {};
-          body[this.moveParam.resource] = {};
-          body[this.moveParam.resource][this.moveParam.attr] = newZone;
-
-          // request() rejects on a refusal (and reads the server's message), so this
-          // `then` runs only on a real success and the `catch` below is the ONE
-          // failure path. It used to unwrap the 4xx itself; that check now lives at
-          // the seam, where saveOrder gets it too.
-          return this.request(url, "PATCH", body).then(function () {
-            self.setCardZone(card, newZone);
-            self.toast("Moved to " + self.label(newZone), "success");
-            self.emit("board-moved", id, fromKey, newZone);
-            self.hook(self.onMoveHook, { record: id, from: fromKey, to: newZone });
-            return true;
-          }).catch(function (e) {
-            if (self.optimistic) self.revert(card, fromZone);
-            self.toast((e && e.message) || "Move failed", "error");
-            self.updateCounts();
-            return false;
-          });
-        },
-
-        // Save the destination column's order. Reads the ordered id list and POSTs
-        // it under the neutral payload key (`slugs` | `ids`) plus the advisory zone.
-        //
-        // A REFUSAL IS SHOWN, NOT SWALLOWED. Through 0.76.2 this was a bare
-        // `.catch(){}` on a `fetch` that resolves on 4xx: two layers of silence over
-        // a server that had already written the operator its reason ("That order does
-        // not match this week's games — reload and try again"). The board renumbered
-        // the cards as though the save had landed. request() now rejects on a refusal
-        // and the catch below toasts what the server said.
-        //
-        // NO AUTO-REVERT, deliberately. Unlike a single-card move there is no one
-        // card to snap back — the whole column re-ranked, and SortableJS hands us the
-        // drop with the pre-drop order already gone. Every reorder endpoint's refusal
-        // tells the operator to RELOAD, which restores the stored truth exactly; the
-        // board's job is to make sure that instruction is read.
-        //
-        // RETURNS A PROMISE (resolving true/false, never rejecting) so a caller can
-        // wait for the save to land. It resolves rather than rejects so the
-        // fire-and-forget call in handleSortEnd cannot raise an unhandled rejection.
-        saveOrder: function (toZone) {
-          var self = this;
-          var ids = Array.prototype.slice
-            .call(toZone.querySelectorAll(this.cardSelector))
-            .map(function (c) { return self.cardId(c); });
-          var zone = this.zoneKey(toZone);
-          this.emit("board-reordered", null, zone, zone, { ids: ids, zone: zone });
-          this.hook(this.onDropHook, { ids: ids, zone: zone });
-          if (this.demo || !this.reorderUrl) return Promise.resolve(true);
-          var payload = {};
-          payload[this.reorderPayload] = ids;
-          payload.zone = zone;
-          return this.request(this.reorderUrl, "POST", payload).then(function () {
-            return true;
-          }).catch(function (e) {
-            self.toast((e && e.message) || "Order save failed — reload and try again.", "error");
-            return false;
-          });
-        },
-
-        setCardZone: function (card, zone) { card.setAttribute("data-" + this.zoneAttr, zone); },
-
-        // Revert a failed move: drop the card back into its SOURCE zone (which
-        // always exists) above the empty state, and flash a red ring.
-        revert: function (card, fromZone) {
-          var anchor = this.emptySelector ? fromZone.querySelector(this.emptySelector) : null;
-          fromZone.insertBefore(card, anchor);
-          card.classList.add("ring-2", "ring-red-500");
-          setTimeout(function () { card.classList.remove("ring-2", "ring-red-500"); }, 1500);
-        },
-
-        updateCounts: function () {
-          var self = this;
-          document.querySelectorAll("[data-board-count]").forEach(function (badge) {
-            var key = badge.getAttribute("data-board-count");
-            var zone = document.getElementById("dropzone-" + key);
-            if (!zone) return;
-            var count = zone.querySelectorAll(self.cardSelector).length;
-            badge.textContent = count;
-            if (self.emptySelector) {
-              var empty = zone.querySelector(self.emptySelector);
-              if (empty) empty.style.display = count === 0 ? "flex" : "none";
-            }
-          });
-        },
-
-        // --- live updates (Turbo Streams) ----------------------------------
-        // The board subscribes via turbo_stream_from(live_channel); Turbo patches the
-        // DOM on every broadcast. This observer adds the flourish Turbo doesn't: a
-        // fade/scale-in on each patched-in card (deferred to window[fx] when present)
-        // and a count refresh after any column change.
-        observeLive: function () {
-          var self = this;
-          var onChange = function (mutations) {
-            for (var i = 0; i < mutations.length; i++) {
-              mutations[i].addedNodes.forEach(function (node) {
-                if (node.nodeType === 1 && node.matches && node.matches(self.cardSelector)) {
-                  var fx = self.fx();
-                  if (fx && fx.onAdd) { fx.onAdd(node); } else { self.animateIn(node); }
-                  self.emit("card-added", self.cardId(node), null, self.zoneKey(node.parentElement));
-                }
-              });
-            }
-            self.updateCounts();
-          };
-          document.querySelectorAll(this.zoneSelector).forEach(function (zone) {
-            new MutationObserver(onChange).observe(zone, { childList: true });
-          });
-        },
-
-        animateIn: function (el) {
-          el.style.opacity = "0";
-          el.style.transform = "scale(0.96)";
-          el.classList.add("ring-2", "ring-primary");
-          requestAnimationFrame(function () {
-            el.style.transition = "opacity 300ms ease, transform 300ms ease";
-            el.style.opacity = "";
-            el.style.transform = "";
-          });
-          setTimeout(function () { el.classList.remove("ring-2", "ring-primary"); el.style.transition = ""; }, 900);
-        },
-
-        // Archive re-parent / delete exit animation via a Turbo `remove` stream
-        // carrying data-exit-action. Installed only when no fx module owns exits.
-        installExitStreamFallback: function () {
-          if (window.__studioBoardExitFallback) return;
-          window.__studioBoardExitFallback = true;
-          var self = this;
-          document.addEventListener("turbo:before-stream-render", function (event) {
-            var stream = event.target;
-            if (stream.getAttribute("action") !== "remove") return;
-            var target = stream.getAttribute("target") || "";
-            var exitAction = stream.dataset.exitAction;
-            if (target.indexOf(self.domIdPrefix) !== 0 || !exitAction) return;
-            var renderNow = event.detail.render;
-            event.detail.render = function (el) {
-              var card = document.getElementById(target);
-              if (!card) { renderNow(el); return; }
-              self.animateCardExit(card, exitAction).then(function () {
-                // gap 3: an `archive` exit RE-PARENTS the card into the archive
-                // column (#dropzone-<archiveZone>) instead of vanishing, when the
-                // board named one and it exists. Everything else falls through to
-                // Turbo's remove (the 0.27.0 behavior).
-                if (exitAction === "archive" && self.archiveZone) {
-                  var zone = document.getElementById("dropzone-" + self.archiveZone);
-                  if (zone) {
-                    var anchor = self.emptySelector ? zone.querySelector(self.emptySelector) : null;
-                    zone.insertBefore(card, anchor);
-                    self.setCardZone(card, self.archiveZone);
-                    self.resetCardExit(card);
-                    self.updateCounts();
-                    return; // keep the card in the archive column — do NOT remove it
-                  }
-                }
-                renderNow(el);
-                self.updateCounts();
-              });
-            };
-          });
-        },
-
-        animateCardExit: function (card, kind) {
-          if (!card) return Promise.resolve();
-          // gap 4: stamp an observable marker for WHICH exit is running (archive vs
-          // delete). Set before the reduced-motion guard so the marker is present
-          // even when the animation itself is skipped — the re-parent branch and any
-          // e2e both key off it.
-          card.dataset.exitAction = kind;
-          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
-          card.style.pointerEvents = "none";
-          var frames = kind === "archive"
-            ? [{ opacity: 1, transform: "translateY(0) scale(1)" }, { opacity: 0, transform: "translateY(18px) scale(0.86)" }]
-            : [{ opacity: 1, transform: "scale(1)" }, { opacity: 0, transform: "scale(0.6)" }];
-          var anim = card.animate(frames, {
-            duration: kind === "archive" ? 500 : 420,
-            easing: "cubic-bezier(.35,0,.2,1)",
-            fill: "forwards"
-          });
-          return anim.finished.catch(function () {});
-        },
-
-        // Clear an exit animation + its marker so a re-parented card is fully
-        // visible again in the archive column (used by the gap-3 re-parent path).
-        resetCardExit: function (card) {
-          if (!card) return;
-          card.getAnimations({ subtree: false }).forEach(function (a) { a.cancel(); });
-          delete card.dataset.exitAction;
-          card.style.pointerEvents = "";
-          card.style.opacity = "";
-          card.style.transform = "";
-          card.style.filter = "";
-        },
-
-        // --- toasts --------------------------------------------------------
-        toast: function (message, type) {
-          if (!this.toastsEnabled) {
-            if (type === "error" && typeof window.alert === "function") window.alert(message);
-            return;
-          }
-          var self = this;
-          var id = Date.now() + Math.random();
-          this.toasts.push({ id: id, message: message, type: type, visible: true });
-          setTimeout(function () {
-            var t = self.toasts.find(function (x) { return x.id === id; });
-            if (t) t.visible = false;
-            setTimeout(function () {
-              self.toasts = self.toasts.filter(function (x) { return x.id !== id; });
-            }, 300);
-          }, 3000);
-        },
-
-        // --- helpers -------------------------------------------------------
-        // The board's ONE HTTP seam, and it REJECTS ON A SERVER REFUSAL. That is
-        // the semantics every caller in this factory already assumed by writing
-        // `.catch(…)`, and it is the semantics NEITHER underlying fetcher has:
-        //
-        //   * `window.fetch` RESOLVES on 4xx/5xx. A 422 is an ordinary resolution,
-        //     so a bare `.catch()` sees network-level failure and nothing else.
-        //     That is how saveOrder discarded an operator-readable 422 in silence
-        //     on all five boards that ride this factory.
-        //   * `window.authedFetch` (the turf-monster fetcher this picks up when the
-        //     host defines it) returns the response for anything that is not a 401
-        //     — so a 422 resolves there too — and resolves to NULL on an expired
-        //     session or a rate-limited tier, which `resp.ok` cannot be read from.
-        //
-        // Normalising both HERE is the point: a caller can no longer re-introduce
-        // the silence by forgetting a check. To ignore a refusal it must now say so
-        // out loud, in its own `.catch`.
-        request: function (url, method, body) {
-          var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || "";
-          var fetcher = window.authedFetch || window.fetch;
-          return fetcher(url, {
-            method: method,
-            headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
-            body: JSON.stringify(body || {})
-          }).then(function (resp) {
-            // authedFetch's null — the session went away under the board. Name it,
-            // rather than throwing a TypeError off resp.ok on the next line.
-            if (!resp) throw new Error("Session expired — please sign in again.");
-            if (resp.ok) return resp;
-            // Prefer the SERVER'S OWN words. Every board endpoint this factory talks
-            // to renders `{ error: "…" }` beside its 4xx — Studio::Board::Reorderable
-            // here in the engine, and the hand-rolled siblings in the apps — and that
-            // text is written to be read by an operator.
-            return resp.json().catch(function () { return {}; }).then(function (err) {
-              throw new Error(err.error || ("Failed (" + resp.status + ")"));
-            });
-          });
-        },
-
-        // The primary extension seam — apps LISTEN for these on window and attach
-        // confetti / swipe / cart / analytics, never patching this factory.
-        emit: function (name, record, from, to, extra) {
-          try {
-            var detail = Object.assign({ record: record, from: from, to: to }, extra || {});
-            window.dispatchEvent(new CustomEvent("studio:" + name, { detail: detail }));
-          } catch (e) {}
-        },
-
-        hook: function (hookName, detail) {
-          if (!hookName) return;
-          var fn = window[hookName];
-          if (typeof fn === "function") { try { fn(detail); } catch (e) {} }
-        }
-      };
-    };
-  })();
-</script>