studio-engine 0.27.0 → 0.28.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3fefcb19f5cf631e4e1515bf0b113fb33167cb1173f039a0777038aac5173d57
-  data.tar.gz: f203c29195b71e945a055bcfa60ad58f0d1aea16fe2ce60e84de4de1993d62ec
+  metadata.gz: 79aac649d7403deadeaa9f055762802f111b7082865398432753dfdd93b998e0
+  data.tar.gz: 80307a1b7077886c9853ad5a6ab7f2dc79a9d7bf6d4db7aa883f5eb6162a77bb
 SHA512:
-  metadata.gz: d790f97aede359baf45915bbde14fef29cea6779a0866159a3b5f1dc5a396d24951d7ba3d796e4523e0dc17489319375929e8b3e2741ca9b7c569dd5f9dac91e
-  data.tar.gz: 25a54c2e44ad2e29608afe72fcf6b7dc8028fe28c47bd92e582e041b282f7f4e2b70ba5eb3468f4d8edb083f3d1fe185c340c135678b9a0a0556bfbab601a98b
+  metadata.gz: 8fb8f96918656e88d2d8cc3379716d544afd461bdaa19205c480e273ab71199c25cede8c7b729f9b6cf3400388a7976ac34f4135d96fd60b3e8e4083969f360e
+  data.tar.gz: 2f329ab8c0c240cf56e11e2e9d7bc1c3c6711e24dcb52ee82a2de2785c1697cf333e3bcc17f056db22400e4e606d6c30108565502bd8a6119e2d7b50e18a1a64

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

@@ -48,9 +48,16 @@
         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,
 
         // --- 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 () {
@@ -75,6 +82,19 @@
         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;
@@ -271,6 +291,21 @@
               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();
               });
@@ -279,7 +314,13 @@
         },
 
         animateCardExit: function (card, kind) {
-          if (!card || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
+          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)" }]
@@ -292,6 +333,18 @@
           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) {

data/app/views/studio/board/_board.html.erb

@@ -19,10 +19,27 @@
   studio/board/_column (the `.kanban-dropzone`) and studio/board/_card_shell (the
   `.kanban-card`) — an app may hand-roll a bespoke card as long as it matches.
 
+  CHROME COMPOSITION (the recipe that replaces a bespoke outer Alpine wrapper) —
+  a board with filters / toggles no longer needs to wrap this primitive in its own
+  x-data component. Everything the chrome needs lives ON the studioBoard scope:
+    1. `board_state:` seeds a reactive bag on the factory (`state`). Pass the
+       chrome's flags/lists, e.g. { showArchived: false, hiddenApps: [] }.
+    2. `header_slot:` (and `above_board_slot:`) render INSIDE the studioBoard
+       section, so their controls bind straight to that state and the generic
+       helpers the factory exposes: `toggleState('showArchived')`,
+       `toggleInState('hiddenApps', repo)`, `listHas('hiddenApps', repo)`.
+    3. A toggle-able column reads the same state via its `show_expr:`
+       (e.g. show_expr: "state.showArchived"); cards x-show off `listHas(...)`.
+    4. An Archived column that a stage→archived broadcast should re-parent INTO
+       (not delete) is named by the board's `archive_zone:`.
+
   locals:
     columns:          (req) [{ key:, label:, cards:, count:, badge_class:,
-                      collapsible:, hidden:, header_extra: }]. `cards` are records
-                      passed to `card_partial`; `count` defaults to cards.size.
+                      count_class:, collapsible:, hidden:, show_expr:, min_width:,
+                      kickoff:, header_extra: }]. `cards` are records passed to
+                      `card_partial`; `count` defaults to cards.size. See
+                      studio/board/_column for the additive per-column hooks
+                      (count_class / show_expr / min_width / kickoff).
     card_partial:     (req) partial rendered per card (e.g. "tasks/task_card").
     card_as:          local the record binds to in card_partial. Default :card.
     card_locals:      per-card extra locals — a Proc ->(record){ Hash } or a Hash.
@@ -50,6 +67,11 @@
     empty_label:      empty-zone text. Default "Drop here".
     header_slot:      raw HTML rendered above the columns (pass html_safe content).
     above_board_slot: raw HTML rendered between the header and the columns.
+    board_state:      Hash seeding the factory's reactive `state` bag (board-level
+                      chrome: filter/toggle flags + lists). nil ⇒ empty {}.
+    archive_zone:     column key a `remove` exit-stream marked data-exit-action=
+                      "archive" RE-PARENTS the card into (its #dropzone-<key>),
+                      instead of deleting it. nil ⇒ the card is removed (0.27.0).
     fx:               window[<name>] module the factory defers add/exit anims to.
     on_move_hook:     window[<name>] opaque fn, called with { record, from, to }.
     on_drop_hook:     window[<name>] opaque fn, called with { ids, zone }.
@@ -79,6 +101,8 @@
   empty_label      = local_assigns.fetch(:empty_label, "Drop here")
   header_slot      = local_assigns.fetch(:header_slot, nil)
   above_board_slot = local_assigns.fetch(:above_board_slot, nil)
+  board_state      = local_assigns.fetch(:board_state, nil)   # gap 1: chrome-state home
+  archive_zone     = local_assigns.fetch(:archive_zone, nil)  # gap 3: exit re-parent target
   fx               = local_assigns.fetch(:fx, nil)
   on_move_hook     = local_assigns.fetch(:on_move_hook, nil)
   on_drop_hook     = local_assigns.fetch(:on_drop_hook, nil)
@@ -102,6 +126,8 @@
     toasts:         !!toasts,
     live:           live_channel.present?,
     demo:           !!demo,
+    state:          (board_state.is_a?(Hash) ? board_state : nil),
+    archiveZone:    (archive_zone ? archive_zone.to_s : nil),
     fx:             fx,
     onMoveHook:     on_move_hook,
     onDropHook:     on_drop_hook,

data/app/views/studio/board/_column.html.erb

@@ -12,10 +12,25 @@
 
   locals:
     column:               (req) { key:, label:, cards:, count:, badge_class:,
-                          collapsible:, hidden:, header_extra: }. `cards` are the
+                          count_class:, collapsible:, hidden:, show_expr:,
+                          min_width:, kickoff:, header_extra: }. `cards` are the
                           records passed to the card partial; `count` defaults to
                           cards.size; `badge_class` picks a components/_badge scheme
                           for the count (else a plain neutral count chip).
+                          Additive board-chrome hooks (all opt-in, all default to
+                          the 0.27.0 rendering when omitted):
+                            count_class: raw class string colouring the neutral
+                              count chip (e.g. a task_stage_count_classes value).
+                              Ignored when badge_class is set. Default neutral chip.
+                            show_expr:   Alpine x-show expression for a toggle-able
+                              column (binds against the board's studioBoard scope,
+                              e.g. "state.showArchived"). Adds x-cloak so it can't
+                              flash before Alpine boots. Independent of `hidden:`.
+                            min_width:   the column's sm min-width utility class.
+                              Default "sm:min-w-[190px]".
+                            kickoff:     raw HTML rendered in a fixed-height slot
+                              under the header row (a per-column kickoff chip);
+                              nil renders nothing.
     zone_attr:            data-attr name for the zone. Default "stage".
     dom_id_prefix:        card dom-id prefix, forwarded to the cards. Default "card-".
     zone_selector_class:  the drop-zone class. Default "kanban-dropzone".
@@ -41,9 +56,20 @@
   cards        = column[:cards] || []
   count        = column.fetch(:count) { cards.size }
   badge_class  = column[:badge_class]
+  # gap 2: an opt-in raw class colouring the neutral count chip; nil keeps the
+  # exact 0.27.0 neutral chip classes.
+  count_class  = column[:count_class]
   collapsible  = column[:collapsible]
   hidden       = column[:hidden]
+  # gap 5: a bindable visibility expr (x-show), a per-board min-width, and a
+  # per-column kickoff slot — each nil/absent renders identically to 0.27.0.
+  show_expr    = column[:show_expr]
+  min_width    = column[:min_width] || "sm:min-w-[190px]"
+  kickoff      = column[:kickoff]
   header_extra = column[:header_extra]
+  # The neutral count chip's colour classes: an opt-in raw class, else the 0.27.0
+  # neutral default. The layout classes are shared; only the colour band varies.
+  count_color  = count_class || "bg-surface-alt text-secondary border border-subtle"
 
   # Merge the per-card hook (Proc or Hash) with the record binding.
   resolve_locals = lambda do |record|
@@ -51,21 +77,29 @@
     { card_as => record }.merge(extra || {})
   end
 %>
-<div class="studio-board-column w-full flex-none sm:flex-1 sm:min-w-[190px]"
+<div class="studio-board-column w-full flex-none sm:flex-1 <%= min_width %>"
      data-board-column="<%= key %>"
      <% if collapsible %>data-board-collapsible="true"<% end %>
+     <% if show_expr %>x-show="<%= show_expr %>" x-cloak<% end %>
      <% if hidden %>x-cloak style="display:none"<% end %>>
   <div class="mb-3 px-1 flex items-center gap-2">
     <h3 class="text-sm font-bold text-heading uppercase tracking-wider"><%= label %></h3>
     <% if badge_class %>
       <%= render "components/badge", text: count.to_s, scheme: badge_class, data_board_count: key %>
     <% else %>
-      <span class="stage-count inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-bold bg-surface-alt text-secondary border border-subtle"
+      <span class="stage-count inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-bold <%= count_color %>"
             data-board-count="<%= key %>"><%= count %></span>
     <% end %>
     <% if header_extra %><%= header_extra %><% end %>
   </div>
 
+  <%# gap 5: per-column kickoff slot — a fixed-height row under the header so every
+      column's dropzone starts at the same y (no height jog) when only some carry a
+      chip. Renders nothing when the column passes no kickoff. %>
+  <% if kickoff %>
+    <div class="studio-board-kickoff mt-2 min-h-[26px]"><%= kickoff %></div>
+  <% end %>
+
   <div id="dropzone-<%= key %>"
        data-<%= zone_attr %>="<%= key %>"
        class="<%= zone_selector_class %> rounded-xl border-2 border-dashed border-subtle min-h-40 p-2 space-y-2 transition-colors duration-150 sm:min-h-[calc(100vh-220px)]">

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

@@ -109,6 +109,69 @@
     </div>
   </div>
 
+  <%# ---- The ENRICHED board chrome (0.28.0) ------------------------------ %>
+  <%# One specimen that exercises the five additive hooks the /tasks pilot surfaced,
+      all opt-in: (1) board_state + header_slot chrome home, (2) a coloured count
+      chip via count_class, (3) archive_zone exit re-parent, (4) the exit marker,
+      (5) a toggle-able column (show_expr) + a per-column kickoff slot + min_width.
+      No outer Alpine wrapper: the Show/Hide-archived toggle in header_slot and the
+      archived column's show_expr both bind to the SAME studioBoard state. %>
+  <% chrome_header = capture do %>
+    <div class="flex items-center gap-3 flex-wrap">
+      <button type="button"
+              class="px-3 py-1.5 rounded-lg text-sm font-medium transition border border-subtle"
+              :class="state.showArchived ? 'bg-primary text-white border-primary' : 'bg-surface text-secondary hover:text-heading'"
+              @click="toggleState('showArchived')"
+              data-test="chrome-archived-toggle">
+        <span x-text="state.showArchived ? 'Hide archived' : 'Show archived'">Show archived</span>
+      </button>
+      <span class="label-upper"><code class="font-mono text-2xs">header_slot</code> chrome &middot; binds to <code class="font-mono text-2xs">state.showArchived</code> &mdash; no outer wrapper</span>
+    </div>
+  <% end %>
+  <% chrome_kickoff = capture do %>
+    <span class="inline-flex items-center gap-1 rounded border border-primary/30 bg-primary/10 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-primary">kickoff slot</span>
+  <% end %>
+  <%
+    # Per-column count_class colours (raw classes, the task_stage_count_classes shape),
+    # a kickoff chip + widened min_width on Designed, and a toggle-able Archived column
+    # (show_expr) the board re-parents into (archive_zone).
+    chrome_columns = [
+      { key: "designed", label: "Designed",
+        count_class: "bg-blue-500/10 text-blue-500 border border-blue-500/30",
+        kickoff: chrome_kickoff, min_width: "sm:min-w-[15rem]",
+        cards: [{ id: "chrome-count-color", zone: "designed", title: "Coloured count chip", repo: "studio-engine", who: "SH" }] },
+      { key: "building", label: "Building",
+        count_class: "bg-yellow-500/10 text-yellow-400 border border-yellow-500/30",
+        cards: [{ id: "chrome-bindable-col", zone: "building", title: "Bindable columns", repo: "turf-monster", who: "CA" }] },
+      { key: "shipped", label: "Shipped",
+        count_class: "bg-emerald-500/10 text-emerald-500 border border-emerald-500/30",
+        cards: [{ id: "chrome-exit-marker", zone: "shipped", title: "Exit re-parent marker", repo: "mcritchie", who: "ST" }] },
+      { key: "archived", label: "Archived",
+        count_class: "bg-gray-500/10 text-gray-400 border border-gray-500/30",
+        show_expr: "state.showArchived",
+        cards: [{ id: "chrome-archived-card", zone: "archived", title: "Archived (re-parent target)", repo: "mcritchie", who: "ST" }] }
+    ]
+  %>
+  <div class="space-y-3">
+    <div class="flex items-center gap-2">
+      <span class="badge" style="color: var(--color-primary); border-color: var(--color-primary)">Enriched</span>
+      <p class="label-upper"><code class="font-mono text-2xs">studio/board/board</code> &middot; 0.28.0 chrome &mdash; coloured counts, toggle-able column, archive re-parent</p>
+    </div>
+    <%= render "studio/board/board",
+          demo: true,
+          columns: chrome_columns,
+          card_partial: "style/board/demo_card",
+          card_as: :card,
+          reorder_url: "#",
+          move_url: "#",
+          move_param: { resource: "task", attr: "stage" },
+          group: "studio-board-chrome",
+          board_state: { showArchived: false },
+          archive_zone: "archived",
+          header_slot: chrome_header,
+          empty_label: "Drop tasks here" %>
+  </div>
+
   <%# ---- The static reference sketch ------------------------------------- %>
   <div class="fade-edge-x overflow-x-auto pb-2">
     <div class="flex gap-4 min-w-max">
@@ -162,9 +225,11 @@
       </div>
       <ul class="text-secondary text-sm space-y-1 list-disc list-inside">
         <li>Column layout + horizontal scroll with faded edges</li>
-        <li>The <code class="font-mono text-2xs">stage-*</code> badge palette + count chips</li>
+        <li>The <code class="font-mono text-2xs">stage-*</code> badge palette + count chips (colour via <code class="font-mono text-2xs">count_class</code>)</li>
         <li>Card chrome (<code class="font-mono text-2xs">.card</code>) and the drag / rank handle</li>
         <li>Empty-column drop state</li>
+        <li>Chrome-state home (<code class="font-mono text-2xs">board_state</code> + <code class="font-mono text-2xs">header_slot</code>) &mdash; filters/toggles without an outer wrapper</li>
+        <li>Toggle-able columns (<code class="font-mono text-2xs">show_expr</code>), a kickoff slot, and archive re-parent (<code class="font-mono text-2xs">archive_zone</code>)</li>
       </ul>
     </div>
     <div class="card p-5 space-y-2">
@@ -175,7 +240,7 @@
       <ul class="text-secondary text-sm space-y-1 list-disc list-inside">
         <li>Which stages become columns</li>
         <li>The card body — fields, chips, avatars, live timers</li>
-        <li>Filters (agent, app) and header actions</li>
+        <li>Filter/toggle logic + header actions, composed onto the shared chrome state</li>
         <li>Live-update wiring (Turbo Streams on the deploy board)</li>
       </ul>
     </div>

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.27.0"
+  VERSION = "0.28.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.27.0
+  version: 0.28.0
 platform: ruby
 authors:
 - Alex McRitchie