studio-engine 0.21.0 → 0.23.0

data/app/models/concerns/studio/board/rankable.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module Studio
+  module Board
+    # Shared 100-gap rank read-model for board-orderable records — the kanban
+    # columns (McRitchie Studio tasks / news / content) and the depth-chart lanes.
+    # A record carries an integer `position`; the board renders by `board_ordered`
+    # (highest position on top), and a drag-reorder restamps the whole column with
+    # 100-gaps via `reposition!`. Ranking is ZONE-SCOPED: a fresh rank is computed
+    # within the record's zone (a kanban `stage`, a depth-chart position group), so
+    # every column ranks independently and 100-spacing leaves room for the next
+    # drag insert without a full re-stamp.
+    #
+    # This is the read/rank half of the board primitive; the write half is
+    # Studio::Board::Reorderable (the controller action that calls reposition!).
+    #
+    #   class Task < ApplicationRecord
+    #     include Studio::Board::Rankable
+    #     before_create :set_initial_position   # seeds the genesis rank
+    #   end
+    #
+    #   class DepthChartEntry < ApplicationRecord
+    #     include Studio::Board::Rankable
+    #     self.board_zone_attr = :position_group   # a lane, not a kanban stage
+    #   end
+    module Rankable
+      extend ActiveSupport::Concern
+
+      included do
+        # The column the record ranks WITHIN. Default matches the three MS kanban
+        # boards (stage); a within-lane board overrides it, and `nil` ranks globally.
+        class_attribute :board_zone_attr, instance_accessor: false, default: :stage
+
+        # Board order: highest `position` first (freshest/top card wins), NULLS last,
+        # then newest by created_at as a stable tiebreak. Arel.sql: the fragment is a
+        # fixed literal, not user input.
+        scope :board_ordered, -> { order(Arel.sql("position DESC NULLS LAST, created_at DESC")) }
+      end
+
+      # Seed the genesis rank on create: max(position) within this record's zone plus
+      # a 100 gap. A no-op when `position` is already set, so an explicit rank is
+      # never clobbered. Wire from the host via `before_create :set_initial_position`.
+      def set_initial_position
+        return if position.present?
+
+        self.position = self.class.board_next_position(zone_value_for_rank)
+      end
+
+      # This record's zone value (nil when the model ranks globally).
+      def zone_value_for_rank
+        attr = self.class.board_zone_attr
+        attr && respond_to?(attr) ? public_send(attr) : nil
+      end
+
+      class_methods do
+        # max(position) + gap within a zone (or globally when the zone value / attr
+        # is blank). The genesis seed and the "bump to top on a stage move" both read
+        # from here, so the 100-gap rule lives in one place.
+        def board_next_position(zone_value = nil, gap: 100)
+          scope = board_zone_attr && zone_value ? where(board_zone_attr => zone_value) : all
+          (scope.maximum(:position) || 0) + gap
+        end
+
+        # Restamp a column top-to-bottom in ONE pass. `ids` arrive in DOM order (top
+        # first). Under the `position DESC` board sort the TOP card must hold the
+        # HIGHEST rank, so with `direction: :desc` (the board default) the first id
+        # gets the largest value and each next one drops by `gap` — 100-spacing that
+        # leaves gaps for the next drag insert. `direction: :asc` ranks the other way
+        # (first id smallest) for an ascending board. This is exactly the per-id
+        # `update_all(position: ...)` loop the MS tasks/news/content reorder actions
+        # each ran by hand, lifted into the model. Returns the ids it stamped.
+        def reposition!(ids, gap: 100, direction: :desc, id_attr: primary_key)
+          ids = Array(ids)
+          length = ids.length
+          ids.each_with_index do |id, index|
+            rank = direction.to_sym == :asc ? (index + 1) * gap : (length - index) * gap
+            where(id_attr => id).update_all(position: rank)
+          end
+          ids
+        end
+      end
+    end
+  end
+end

data/app/views/components/_badge.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (text:, scheme: "neutral") %>
+<%# locals: (text:, scheme: "neutral", data_board_count: nil) %>
 <%#
   Stage roles (stage-fresh ... stage-closed) form a shared pipeline palette
   used by News and Content (and any future pipelines). Mapping:
@@ -32,4 +32,6 @@
     else                         "bg-surface-alt text-body border-subtle"
     end
 %>
-<span class="badge <%= scheme_classes %>"><%= text %></span>
+<%# data_board_count wires the badge as a studio/board count target (updateCounts sets
+    its textContent) — additive + opt-in, so every existing caller renders identically. %>
+<span class="badge <%= scheme_classes %>"<% if local_assigns[:data_board_count] %> data-board-count="<%= data_board_count %>"<% end %>><%= text %></span>

data/app/views/layouts/studio/_head.html.erb

@@ -21,7 +21,19 @@
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
 
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
+<%# canvas-confetti is VENDORED into the engine (studio/canvas_confetti.js) and
+    shipped through the asset pipeline — no CDN, CSP-safe (same-origin :self),
+    zero-per-app dependency. Defines the global `confetti`; studio_confetti.js
+    then builds window.studioConfetti (burst/cannons). fireSuccessConfetti below
+    is unchanged and rides the same global. %>
+<%= javascript_include_tag "studio/canvas_confetti", "data-turbo-track": "reload" %>
+<%= javascript_include_tag "studio/studio_confetti", "data-turbo-track": "reload" %>
+<%# SortableJS is VENDORED into the engine (studio/sortable.js) and shipped through
+    the asset pipeline — no CDN, CSP-safe (same-origin :self). Defines the global
+    `Sortable`; the studio/board primitive (studio/_board_assets -> window.studioBoard)
+    drives it for drag-reorder kanban AND depth-chart boards. Loaded here (deferred)
+    so any board consumer has it with zero per-app wiring, mirroring canvas_confetti. %>
+<%= javascript_include_tag "studio/sortable", defer: true, "data-turbo-track": "reload" %>
 <script>
   window.fireSuccessConfetti = function() {
     if (typeof confetti === 'undefined') return;

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

@@ -0,0 +1,341 @@
+<%#
+  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/_age_verify_assets homes ageVerifyModal), 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.
+%>
+<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 || {},
+
+        // --- state ---------------------------------------------------------
+        toasts: [],
+
+        // --- 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; },
+
+        // --- 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,
+              filter: 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;
+            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;
+
+          return this.request(url, "PATCH", body).then(function (resp) {
+            if (!resp.ok) {
+              return resp.json().catch(function () { return {}; }).then(function (err) {
+                throw new Error(err.error || ("Failed (" + resp.status + ")"));
+              });
+            }
+            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.
+        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;
+          var payload = {};
+          payload[this.reorderPayload] = ids;
+          payload.zone = zone;
+          this.request(this.reorderUrl, "POST", payload).catch(function () {
+            // Order save failed — positions are stale but the board stays functional.
+          });
+        },
+
+        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 () {
+                renderNow(el);
+                self.updateCounts();
+              });
+            };
+          });
+        },
+
+        animateCardExit: function (card, kind) {
+          if (!card || 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 () {});
+        },
+
+        // --- 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 -------------------------------------------------------
+        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 || {})
+          });
+        },
+
+        // 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>

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

@@ -0,0 +1,174 @@
+<%#
+  levelingActionModal factory — the Alpine data behind the engine leveling-activity
+  modals (studio/modals/blocks/_leveling_activity and its _change_username
+  specialization). Ships here, at PAGE level, on purpose: the modal partial mounts
+  inside a modal host's single-root template, and a script cloned out of a template
+  never runs. So a consumer renders THIS once in its layout (like the other shared
+  Alpine factories), and the modal partial anywhere below just references
+  window.levelingActionModal. Mirrors how studio/_age_verify_assets homes the
+  ageVerifyModal factory.
+
+  CRITICAL BOUNDARY — this factory is UI ONLY. It POSTs to an app-supplied
+  submitUrl and reacts to a NEUTRAL JSON contract; it holds ZERO on-chain logic,
+  no wallet taxonomy, no signing. Any second step some apps need (e.g. a wallet
+  approval) is delegated OPAQUELY: the engine hands the app-returned "challenge"
+  blob to an app-supplied window[finalizeHook] and POSTs back whatever opaque
+  "proof" the app returns. The engine never inspects, parses, or decodes either
+  blob, so the whole wallet dance stays in the app.
+
+  Wire contract (submitUrl + finalizeUrl responses are JSON):
+    POST submitUrl { value } -> one of:
+      { status: "saved",     seeds_earned?, seeds_total? }   done
+      { status: "needs_step", challenge, token }             app step required
+      { status: "error",     message }                       show message
+    when needs_step and a finalizeHook is wired:
+      proof = await window[finalizeHook](challenge, { token, onProgress })
+      POST finalizeUrl { token, proof } -> { status: "saved" | "error", ... }
+
+  opts: { hasInput, initialValue, minLength, submitUrl, finalizeUrl, finalizeHook,
+          savedEvent, store, leveling, demo, seedsPerLevel }.
+    hasInput      true renders + validates a single-line input; false is a
+                  no-field activity (a plain "Complete" action).
+    initialValue  seed value for the input (a plain string; never a model).
+    minLength     client-only min length for the input (0 = none).
+    submitUrl     app endpoint the action POSTs to (the app owns persistence).
+    finalizeUrl   app endpoint for the opaque second step (omit if none).
+    finalizeHook  name of a window async fn the app supplies for the step (omit
+                  if none); it owns EVERY app-side detail of that step.
+    savedEvent    DOM event dispatched on success, carrying the app payload, so
+                  the app can run its own follow-on. Default "studio:activity-saved".
+    store         Alpine modal store name backing close(). Default "modals".
+    leveling      true shows the seeds celebration on success (a UI flourish).
+    demo          style-guide preview: resolve locally, skip the network POST.
+    seedsPerLevel seeds per level for the celebration bar. Default 100.
+%>
+<script>
+  (function () {
+    if (window.levelingActionModal) return;
+    window.levelingActionModal = function (opts) {
+      opts = opts || {};
+      return {
+        hasInput: !!opts.hasInput,
+        value: opts.initialValue || "",
+        original: opts.initialValue || "",
+        minLength: parseInt(opts.minLength, 10) || 0,
+        submitUrl: opts.submitUrl || "",
+        finalizeUrl: opts.finalizeUrl || "",
+        finalizeHook: opts.finalizeHook || "",
+        savedEvent: opts.savedEvent || "studio:activity-saved",
+        store: opts.store || "modals",
+        leveling: !!opts.leveling,
+        demo: !!opts.demo,
+        seedsPerLevel: parseInt(opts.seedsPerLevel, 10) || 100,
+        saving: false,
+        error: "",
+        saved: false,
+        celebrate: false,
+        progressLabel: "",
+        seedsEarned: 0,
+        seedsTotal: 0,
+
+        // Actionable while there is a real change to save (input activities) or
+        // until the one-shot action has fired (no-field activities).
+        get changed() {
+          if (!this.hasInput) return !this.saved;
+          var v = (this.value || "").trim();
+          if (v.length < this.minLength) return false;
+          return v !== (this.original || "").trim();
+        },
+
+        _dispatch: function (payload) {
+          try {
+            window.dispatchEvent(new CustomEvent(this.savedEvent, { detail: payload || {} }));
+          } catch (e) {}
+        },
+
+        _finishSaved: function (payload) {
+          payload = payload || {};
+          this.saving = false;
+          this.saved = true;
+          this.progressLabel = "";
+          if (this.hasInput) this.original = (this.value || "").trim();
+          this._dispatch(payload);
+          if (this.leveling) {
+            this.seedsEarned = parseInt(payload.seeds_earned, 10) || 0;
+            this.seedsTotal = parseInt(payload.seeds_total, 10) || 0;
+            this.celebrate = true;
+          }
+        },
+
+        _post: function (url, body) {
+          var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || "";
+          var fetcher = window.authedFetch || window.fetch;
+          return fetcher(url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
+            body: JSON.stringify(body || {})
+          }).then(function (r) {
+            return r.json().then(function (j) { return { ok: r.ok, body: j || {} }; });
+          });
+        },
+
+        save: function () {
+          if (this.saving || !this.changed) return;
+          this.saving = true;
+          this.error = "";
+          var self = this;
+          if (this.demo) {
+            // Style-guide preview: no backend. Resolve to a level-crossing payload
+            // so the leveling celebration demonstrates its full flourish.
+            setTimeout(function () {
+              self._finishSaved({ seeds_earned: 30, seeds_total: self.seedsPerLevel });
+            }, 600);
+            return;
+          }
+          var body = this.hasInput ? { value: (this.value || "").trim() } : {};
+          this._post(this.submitUrl, body)
+            .then(function (res) { return self._handle(res); })
+            .catch(function (e) {
+              self.error = (e && e.message) || "Something went wrong. Please try again.";
+              self.saving = false;
+            });
+        },
+
+        _handle: function (res) {
+          var body = (res && res.body) || {};
+          var status = body.status || (res && res.ok ? "saved" : "error");
+          if (status === "saved") { this._finishSaved(body); return; }
+          if (status === "needs_step") { return this._step(body); }
+          this.error = body.message || "Something went wrong. Please try again.";
+          this.saving = false;
+        },
+
+        // The opaque second step. The engine hands the app's "challenge" blob to
+        // the app-supplied hook and POSTs back the app's "proof" blob — it inspects
+        // neither, so every app-side detail of the step stays in the app.
+        _step: function (body) {
+          var hook = this.finalizeHook && window[this.finalizeHook];
+          var self = this;
+          if (typeof hook !== "function") {
+            this.error = "This step isn't available.";
+            this.saving = false;
+            return;
+          }
+          return Promise.resolve(
+            hook(body.challenge, {
+              token: body.token,
+              onProgress: function (label) { self.progressLabel = label || ""; }
+            })
+          ).then(function (proof) {
+            return self._post(self.finalizeUrl, { token: body.token, proof: proof });
+          }).then(function (res) {
+            var rb = (res && res.body) || {};
+            var status = rb.status || (res && res.ok ? "saved" : "error");
+            if (status === "saved") { self._finishSaved(rb); }
+            else { self.error = rb.message || "Couldn't complete the step."; self.saving = false; }
+          }).catch(function (e) {
+            self.error = (e && e.message) || "Couldn't complete the step.";
+            self.saving = false;
+          });
+        }
+      };
+    };
+  })();
+</script>