studio-engine 0.22.0 → 0.24.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/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

@@ -6,6 +6,7 @@ module Studio
         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.22.0"
+  VERSION = "0.24.0"
 end

data/lib/studio.rb

@@ -25,6 +25,20 @@ module Studio
   mattr_accessor :theme_logos,         default: []
   mattr_accessor :sticky_table_headers, default: false
 
+  # ---- Smooth-load convention ---------------------------------------------
+  # Opt-in per app: renders the view-transition + no-preview metas so Turbo 8
+  # page swaps materialize behind the current page and present with a view
+  # transition (layouts/studio/_smooth_load). OFF by default — an app with
+  # known multi-second pages should fix those before opting in, because
+  # no-preview holds the old page until the fresh response arrives.
+  mattr_accessor :smooth_load,          default: false
+
+  # Minimum ms the nav spinner stays visible once shown (_head.html.erb).
+  # Apps wrapping multi-second operations in the spinner (e.g. Solana RPC)
+  # keep the high default to avoid flicker; smooth-load apps typically drop
+  # this to ~300 so fast loads never linger on a spinner.
+  mattr_accessor :nav_spinner_min_ms,   default: 2500
+
   # ---- Authentication ------------------------------------------------------
   # Which sign-in methods this app offers. The shared login/signup views render
   # a button/field per enabled method (gate with Studio.auth_method?). Order is

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.22.0
+  version: 0.24.0
 platform: ruby
 authors:
 - Alex McRitchie
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-28 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -171,6 +170,7 @@ files:
 - 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
@@ -178,6 +178,7 @@ files:
 - 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
@@ -205,6 +206,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
@@ -239,6 +241,7 @@ files:
 - app/views/layouts/branded_mailer.html.erb
 - app/views/layouts/studio/_flash.html.erb
 - app/views/layouts/studio/_head.html.erb
+- app/views/layouts/studio/_smooth_load.html.erb
 - app/views/magic_links/confirm.html.erb
 - app/views/navbar/show.html.erb
 - app/views/registrations/new.html.erb
@@ -246,6 +249,7 @@ 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
@@ -259,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
@@ -299,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
@@ -341,7 +349,6 @@ metadata:
   source_code_uri: https://github.com/amcritchie/studio-engine/tree/main
   bug_tracker_uri: https://github.com/amcritchie/studio-engine/issues
   changelog_uri: https://github.com/amcritchie/studio-engine/blob/main/CHANGELOG.md
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -356,8 +363,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.22
-signing_key:
+rubygems_version: 4.0.9
 specification_version: 4
 summary: Shared Rails engine providing auth, SSO, error logging, theming, and S3-backed
   image caching