studio-engine 0.21.0 → 0.23.0

data/app/views/style/_tasks.html.erb

@@ -1,13 +1,52 @@
 <%#  Tasks section of the living style guide (admin/style).
 
-     A DEMONSTRATOR of the shared board primitive — the columns, cards, stage
-     badges, and drag/rank affordance that every board (McRitchie Studio's
-     /deployments is the top-of-line) builds from. It is a static sketch, not a
-     backend-wired sortable board; the point is to show the standard so custom
-     boards can adopt it. The stage-* badge palette (components/_badge) is the
-     spine. %>
+     The shared board primitive, LIVE. Phase D lifted the columns / cards / drag +
+     optimistic move / reorder that the three near-identical McRitchie Studio boards
+     (tasks / news / content) each hand-rolled into one engine primitive
+     (studio/board/_board + the window.studioBoard factory + vendored SortableJS).
+     The first block below renders that real primitive with `demo: true` — you can
+     DRAG a card between columns and the move animates + toasts, but nothing POSTs.
+     The blocks under it stay a static reference: the stage-* badge palette
+     (components/_badge) that is the pipeline spine, and the standard-vs-custom
+     split of what a board inherits vs sets. %>
 <%
-  # The shared pipeline palette: each column maps to a stage-* badge scheme.
+  # LIVE specimen — the real studio/board/_board primitive, demo mode. Plain Hash
+  # records (the style guide has no models); each card id becomes id="card-<id>".
+  # Each demo card carries its current `zone` (the column it sits in) — in a real
+  # board the record knows its own stage; here the Hash does.
+  live_board_columns = [
+    { key: "designed",  label: "Designed",  badge_class: "stage-fresh",
+      cards: [
+        { id: "engine-board-primitive", zone: "designed", title: "Engine board primitive", repo: "studio-engine", who: "SH" },
+        { id: "coinflow-buy-rail",      zone: "designed", title: "Coinflow buy rail",      repo: "turf-monster",  who: "JA" }
+      ] },
+    { key: "building",  label: "Building",  badge_class: "stage-shaping",
+      cards: [{ id: "navbar-rpc-preload", zone: "building", title: "Navbar RPC preload", repo: "turf-monster", who: "CA" }] },
+    { key: "submitted", label: "Submitted", badge_class: "stage-structured",
+      cards: [{ id: "magic-link-ttl-bump", zone: "submitted", title: "Magic-link TTL bump", repo: "studio-engine", who: "SH" }] },
+    { key: "shipped",   label: "Shipped",   badge_class: "stage-shipped",
+      cards: [{ id: "ses-email-backend", zone: "shipped", title: "SES email backend", repo: "mcritchie", who: "ST" }] }
+  ]
+
+  # Copy-paste-for-an-agent usage. Built by array-join, NOT a heredoc: a heredoc as
+  # the last expression of an ERB scriptlet trips Erubi, and literal ERB tags in the
+  # body would close the tag. Plain render() calls read clearly for an agent.
+  board_usage_snippet = [
+    "# once at layout level (a <script> in the board template never runs):",
+    'render "studio/board_assets"',
+    "",
+    "# then the board itself:",
+    'render "studio/board/board",',
+    "  columns: @columns,            # [{ key:, label:, cards:, badge_class: }]",
+    '  card_partial: "tasks/task_card",',
+    "  reorder_url: tasks_reorder_path,        # POST { slugs: [...], zone: }",
+    '  move_url: "/tasks/:id.json",            # PATCH { task: { stage: } }',
+    '  move_param: { resource: "task", attr: "stage" },',
+    '  live_channel: "deployments"'
+  ].join("\n")
+
+  # The static reference palette below (unchanged): each column maps to a stage-*
+  # badge scheme.
   board_columns = [
     { key: "stage-fresh",      label: "Fresh",      count: 2 },
     { key: "stage-shaping",    label: "Shaping",    count: 1 },
@@ -32,13 +71,45 @@
     <h2 class="text-2xl font-bold text-heading">Tasks</h2>
     <p class="text-muted text-sm max-w-2xl">
       The shared board primitive that every board builds from &mdash; columns, cards, the
-      <code class="font-mono text-2xs">stage-*</code> badge palette, and the drag / rank affordance.
-      McRitchie Studio's <code class="font-mono text-2xs">/deployments</code> board is the top-of-line;
-      this is a static demonstrator (full extraction lands in a later phase).
+      <code class="font-mono text-2xs">stage-*</code> badge palette, and the drag / optimistic
+      move + reorder. McRitchie Studio's <code class="font-mono text-2xs">/deployments</code> board is
+      the top-of-line; the specimen below is the <strong>real</strong>
+      <code class="font-mono text-2xs">studio/board/board</code> primitive in
+      <code class="font-mono text-2xs">demo: true</code> mode &mdash; drag a card, no save.
     </p>
   </div>
 
-  <%# ---- The board ------------------------------------------------------- %>
+  <%# ---- The LIVE primitive (demo mode) --------------------------------- %>
+  <%# Render the factory once (a <script> in the board template would never run), then
+      the board. demo: true → drag animates + toasts locally, nothing POSTs. %>
+  <%= render "studio/board_assets" %>
+  <div class="space-y-3">
+    <div class="flex items-center gap-2">
+      <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">Live</span>
+      <p class="label-upper"><code class="font-mono text-2xs">studio/board/board</code> &middot; demo &mdash; drag a card between columns</p>
+    </div>
+    <%= render "studio/board/board",
+          demo: true,
+          columns: live_board_columns,
+          card_partial: "style/board/demo_card",
+          card_as: :card,
+          reorder_url: "#",
+          move_url: "#",
+          move_param: { resource: "task", attr: "stage" },
+          group: "studio-board-demo",
+          empty_label: "Drop tasks here" %>
+    <div class="relative" x-data="{ copied: false }">
+      <pre class="bg-inset text-body text-2xs rounded-lg px-3 py-2 pr-16 overflow-x-auto"><code x-ref="boardUsage"><%= board_usage_snippet %></code></pre>
+      <button type="button"
+              class="btn btn-neutral btn-sm absolute top-2 right-2"
+              aria-label="Copy usage snippet"
+              @click="navigator.clipboard?.writeText($refs.boardUsage.innerText); copied = true; setTimeout(() => copied = false, 1200)">
+        <span x-text="copied ? 'Copied' : 'Copy'">Copy</span>
+      </button>
+    </div>
+  </div>
+
+  <%# ---- The static reference sketch ------------------------------------- %>
   <div class="fade-edge-x overflow-x-auto pb-2">
     <div class="flex gap-4 min-w-max">
       <% board_columns.each do |col| %>

data/app/views/style/_tricks.html.erb

@@ -259,6 +259,52 @@
     </div>
   </section>
 
+  <!-- Confetti & pulse -->
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Confetti &amp; pulse</h3>
+      <p class="text-muted text-sm max-w-2xl">
+        Celebration effects lifted from Turf Monster into the engine. Confetti is
+        <code class="font-mono text-2xs">window.studioConfetti</code> - a zero-dependency,
+        no-CDN effect (canvas-confetti is vendored into the engine and shipped through the
+        asset pipeline). Two callable variants, both honoring
+        <code class="font-mono text-2xs">prefers-reduced-motion</code>. The pulse is the
+        <code class="font-mono text-2xs">.pulse-cta</code> attention beat. Fire the confetti
+        with the buttons below.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%= render layout: "style/specimen",
+            locals: { klass: "window.studioConfetti.burst(el)",
+                      usage: %(window.studioConfetti.burst(cardEl)\n// radial burst from behind a card/modal, from its center) } do %>
+        <div x-data="{}" class="flex flex-col items-center gap-3 py-2">
+          <div x-ref="burstCard" class="card px-5 py-4 text-sm font-semibold text-heading text-center">Success!</div>
+          <button type="button" class="btn btn-primary btn-sm"
+                  @click="window.studioConfetti && window.studioConfetti.burst($refs.burstCard)">Fire burst</button>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: "window.studioConfetti.cannons()",
+                      usage: %(window.studioConfetti.cannons()\n// left + right side-cannons, full-screen celebration) } do %>
+        <div x-data="{}" class="flex flex-col items-center gap-3 py-2">
+          <p class="text-sm font-semibold text-heading text-center">You joined a contest!</p>
+          <button type="button" class="btn btn-success btn-sm"
+                  @click="window.studioConfetti && window.studioConfetti.cannons()">Fire cannons</button>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".pulse-cta  (knobs: --pulse-cta-color / -speed / -scale)",
+                      usage: %(<button class="btn btn-primary pulse-cta">Change Username</button>\n<button class="btn btn-success pulse-cta" style="--pulse-cta-color: var(--color-success)">Go</button>) } do %>
+        <div class="flex flex-wrap items-center justify-center gap-4">
+          <button type="button" class="btn btn-primary pulse-cta">Change Username</button>
+          <button type="button" class="btn btn-success pulse-cta" style="--pulse-cta-color: var(--color-success)">Go</button>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
   <!-- Leveling (capability-gated: Studio.feature?(:leveling)) -->
   <section class="space-y-5">
     <div class="space-y-1">

data/app/views/style/board/_demo_card.html.erb

@@ -0,0 +1,22 @@
+<%# locals: (card:, id_attr: "slug", zone_attr: "stage") %>
+<%#
+  A demo board card for the /admin/style Board specimen. Renders THROUGH the engine
+  card-shell chrome (studio/board/_card_shell) so the specimen exercises the real
+  identity contract (id="card-<id>", class .kanban-card, data-<id_attr>/<zone_attr>),
+  not a bespoke stand-in. `card` is a plain Hash — the specimen has no models. The
+  id_attr / zone_attr flow through from the board so the same partial demonstrates
+  the primitive under both the default and a custom attribute naming.
+%>
+<%= render layout: "studio/board/card_shell",
+      locals: { id: card[:id], zone: card[:zone], id_attr: id_attr, zone_attr: zone_attr,
+                class: "card p-3 space-y-2 cursor-grab active:cursor-grabbing" } do %>
+  <div class="flex items-start gap-2">
+    <span class="text-muted select-none leading-none" aria-hidden="true">⠿</span>
+    <p class="text-sm font-semibold text-heading leading-snug flex-1"><%= card[:title] %></p>
+  </div>
+  <div class="flex items-center justify-between gap-2">
+    <%= render "components/badge", text: card[:repo], scheme: "neutral" %>
+    <span class="inline-flex h-6 w-6 items-center justify-center rounded-full text-2xs font-bold text-white shrink-0"
+          style="background: var(--color-cta)"><%= card[:who] %></span>
+  </div>
+<% end %>

data/lib/studio/engine.rb

@@ -4,6 +4,9 @@ module Studio
       app.config.assets.precompile += %w[
         studio/sticky_table_header.css
         studio/sticky_table_header.js
+        studio/canvas_confetti.js
+        studio/studio_confetti.js
+        studio/sortable.js
       ]
     end
 

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.21.0"
+  VERSION = "0.23.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.21.0
+  version: 0.23.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -170,12 +170,16 @@ files:
 - README.md
 - app/assets/images/resend-favicon.png
 - app/assets/images/ses-favicon.png
+- app/assets/javascripts/studio/canvas_confetti.js
+- app/assets/javascripts/studio/sortable.js
 - app/assets/javascripts/studio/sticky_table_header.js
+- app/assets/javascripts/studio/studio_confetti.js
 - app/assets/stylesheets/studio/sticky_table_header.css
 - app/assets/tailwind/studio_engine/engine-motion.css
 - app/assets/tailwind/studio_engine/engine.css
 - app/controllers/concerns/solana/session_auth.rb
 - app/controllers/concerns/studio/admin_models.rb
+- app/controllers/concerns/studio/board/reorderable.rb
 - app/controllers/concerns/studio/error_handling.rb
 - app/controllers/concerns/studio/impersonation.rb
 - app/controllers/concerns/studio/link_consumption.rb
@@ -203,6 +207,7 @@ files:
 - app/mailers/application_mailer.rb
 - app/mailers/user_mailer.rb
 - app/models/concerns/sluggable.rb
+- app/models/concerns/studio/board/rankable.rb
 - app/models/concerns/studio/broadcastable.rb
 - app/models/current.rb
 - app/models/error_log.rb
@@ -244,8 +249,10 @@ files:
 - app/views/sessions/_sso_continue.html.erb
 - app/views/sessions/new.html.erb
 - app/views/studio/_age_verify_assets.html.erb
+- app/views/studio/_board_assets.html.erb
 - app/views/studio/_confirm_interstitial.html.erb
 - app/views/studio/_cropper_assets.html.erb
+- app/views/studio/_leveling_activity_assets.html.erb
 - app/views/studio/admin_models/_arenas_table.html.erb
 - app/views/studio/admin_models/_teams_table.html.erb
 - app/views/studio/admin_models/index.html.erb
@@ -256,6 +263,9 @@ files:
 - app/views/studio/banners/_email_status_button.html.erb
 - app/views/studio/banners/_environment.html.erb
 - app/views/studio/banners/_impersonation.html.erb
+- app/views/studio/board/_board.html.erb
+- app/views/studio/board/_card_shell.html.erb
+- app/views/studio/board/_column.html.erb
 - app/views/studio/email_images/index.html.erb
 - app/views/studio/links/confirm.html.erb
 - app/views/studio/local_emails/index.html.erb
@@ -266,11 +276,13 @@ files:
 - app/views/studio/modals/auth/_resend_footer.html.erb
 - app/views/studio/modals/blocks/_age_verify.html.erb
 - app/views/studio/modals/blocks/_card_header.html.erb
+- app/views/studio/modals/blocks/_change_username.html.erb
 - app/views/studio/modals/blocks/_cta_redirect.html.erb
 - app/views/studio/modals/blocks/_digit_reel.html.erb
 - app/views/studio/modals/blocks/_entry_confirmed.html.erb
 - app/views/studio/modals/blocks/_error_card.html.erb
 - app/views/studio/modals/blocks/_free_entry_earned.html.erb
+- app/views/studio/modals/blocks/_leveling_activity.html.erb
 - app/views/studio/modals/blocks/_onchain_success.html.erb
 - app/views/studio/modals/blocks/_processing_card.html.erb
 - app/views/studio/modals/blocks/_progress_countdown.html.erb
@@ -294,6 +306,7 @@ files:
 - app/views/style/_tasks.html.erb
 - app/views/style/_theme.html.erb
 - app/views/style/_tricks.html.erb
+- app/views/style/board/_demo_card.html.erb
 - app/views/style/index.html.erb
 - app/views/style/modals/_age_verify.html.erb
 - app/views/style/modals/_auth.html.erb