{# Workspace shell composition — heading, context selector, edit chrome,
   card grid, add-card, and detail drawer singleton.
   Contract: ~/.claude/skills/ux-architect/components/workspace-shell.md

   v0.62 CSS refactor: Tailwind utility soup → semantic .dz-workspace-*
   / .dz-card-* / .dz-drawer-* classes (components/dashboard.css). Alpine
   state grammar (saveState, isDragging, isResizing, showPicker) preserved
   verbatim — :class bindings now toggle .is-dragging / .is-resizing /
   data-dz-save-state and CSS resolves the visual delta. #}
{# #948: cards are server-rendered HTML (no JSON island, no x-for).
   Alpine state contracts to ephemeral fields only (drag/resize/save/picker);
   the DOM is the source of truth for layout. The workspace name and
   the catalog flow through `data-*` attributes that JS reads on demand
   rather than capturing reactively at init time. #}
<div class="dz-workspace"
     x-data="dzDashboardBuilder()"
     data-workspace-name="{{ workspace.name }}"
     {% if fold_count is defined %}data-fold-count="{{ fold_count }}"{% endif %}>
  {# Workspace heading — title + primary actions row. `purpose:` is
     developer intent (e.g. "Personal dashboard for support agents")
     and leaks into user-facing copy when rendered verbatim, with no
     awareness of who's viewing it. See #805. Title (the DSL's first
     positional string) is the user-facing name. Primary-action buttons
     are framework-inferred from region entities that have CREATE
     surfaces and for which the current persona has create permission
     — closes #827. #}
  <div class="dz-workspace-heading">
    <h2 class="dz-workspace-title">
      {{ workspace.title or workspace.name.replace('_', ' ').title() }}
    </h2>
    {% if primary_actions %}
    <div class="dz-workspace-primary-actions" data-test-id="dz-workspace-primary-actions">
      {% for action in primary_actions %}
      <a href="{{ action.route }}" hx-boost="true" class="dz-workspace-action">
        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        {{ action.label }}
      </a>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  {% if workspace.context_options_url %}
  <div class="dz-workspace-context">
    <label class="dz-workspace-context-label" for="dz-context-selector">{{ workspace.context_selector_label or workspace.context_selector_entity.replace('_', ' ') }}:</label>
    <select id="dz-context-selector" class="dz-workspace-context-select">
      <option value="">All</option>
    </select>
  </div>
  <script>
  (function() {
    var sel = document.getElementById('dz-context-selector');
    if (!sel) return;
    var wsName = {{ workspace.name | tojson }};
    var prefKey = 'workspace.' + wsName + '.context';
    fetch({{ workspace.context_options_url | tojson }})
      .then(function(r) { return r.json(); })
      .then(function(data) {
        (data.options || []).forEach(function(opt) {
          var o = document.createElement('option');
          o.value = opt.id;
          o.textContent = opt.label;
          sel.appendChild(o);
        });
        var saved = window.dzPrefs ? window.dzPrefs.get(prefKey) : null;
        if (saved) {
          sel.value = saved;
        } else if (sel.options.length > 1) {
          // No saved preference: default to the first real option. The
          // hard-coded "All" entry produces an empty landing page on
          // workspaces whose regions filter by current_context (#870).
          sel.value = sel.options[1].value;
        }
        sel.dispatchEvent(new Event('change'));
      });
    sel.addEventListener('change', function() {
      var val = sel.value;
      if (window.dzPrefs) { if (val) window.dzPrefs.set(prefKey, val); else window.dzPrefs.del(prefKey); }
      document.querySelectorAll('[id^="region-"][hx-get]').forEach(function(el) {
        var url = el.getAttribute('hx-get');
        var base = url.split('?')[0];
        var params = new URLSearchParams(url.split('?')[1] || '');
        if (val) params.set('context_id', val); else params.delete('context_id');
        var qs = params.toString();
        var newUrl = base + (qs ? '?' + qs : '');
        el.setAttribute('hx-get', newUrl);
        // #980 round 2: guard against htmx not yet loaded. The initial
        // sel.dispatchEvent(new Event('change')) fires synchronously
        // when this inline script runs, BEFORE the deferred htmx.min.js
        // has executed. On post-login first nav this raced 100% of the
        // time. Skip the manual triggers when htmx is missing — the
        // updated hx-get attribute will still be honoured by htmx once
        // it loads and processes the page.
        if (typeof htmx === 'undefined') return;
        htmx.process(el);
        htmx.ajax('GET', newUrl, {target: '#' + el.id, swap: 'innerHTML'});
      });
    });
  })();
  </script>
  {% endif %}

  {# ── Toolbar ── #}
  <div class="dz-workspace-toolbar">
    <div class="dz-workspace-toolbar-spacer"></div>

    {# Reset button #}
    <button @click="resetLayout()" class="dz-workspace-reset">
      Reset
    </button>

    {# Save button — reflects saveState via data-dz-save-state attribute. #}
    <button @click="save()"
            :disabled="saveState === 'clean' || saveState === 'saving' || saveState === 'saved'"
            :data-dz-save-state="saveState"
            :title="saveState === 'error' ? _saveError : ''"
            class="dz-workspace-save">
      {# x-cloak gates visibility until Alpine evaluates x-show — protects
         against degraded state (#866) where alpine:init fails to fire
         (HTMX morph race, layout-JSON parse error, etc.) and the browser's
         default `display: inline` stacks every status label simultaneously. #}
      <span x-cloak x-show="saveState === 'clean'">Saved</span>
      <span x-cloak x-show="saveState === 'dirty'">Save layout</span>
      <span x-cloak x-show="saveState === 'saving'" class="dz-workspace-save-busy">
        <svg class="dz-workspace-save-busy-icon" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
        Saving
      </span>
      <span x-cloak x-show="saveState === 'saved'" class="dz-workspace-save-busy">
        <svg class="dz-workspace-save-busy-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
        Saved
      </span>
      <span x-cloak x-show="saveState === 'error'">Retry</span>
    </button>
  </div>

  {# ── Card Grid ── #}
  {# Pointer drag/resize listeners are registered imperatively in the
     dashboard Alpine component's init()/destroy() (same lifecycle
     pattern used by dzTable for issue #795) — using @<event>.window
     here leaks the listener across HTMX morph navigations and throws
     ReferenceError on the next pointer event. #}
  {# items-start: CSS Grid defaults to align-items: stretch, which sizes
     every row to its tallest card and leaves dead whitespace in shorter
     ones. Fixed in #844 — each cell now collapses to intrinsic content
     height. dashboard-builder.js only manipulates grid-column spans, so
     drag/resize behaviour is unaffected. #}
  <div class="dz-dashboard-grid"
       data-grid-container
       role="application"
       aria-label="Dashboard card grid"
       {% if workspace.sse_url %}hx-ext="sse" sse-connect="{{ workspace.sse_url }}"{% endif %}>

    {# #948: server-rendered cards. The DOM is the source of truth for
       layout — drag/resize/add/delete mutate it directly. Card events
       wire via delegation on the grid container (see dashboard-builder.js
       init), so neither this server-rendered iteration nor any
       runtime-added card needs per-element Alpine `@` directives.

       Invariants preserved across the #948 migration:
       - data-test-id="dz-card-drag-handle" still anchors INTERACTION_WALK
       - card-title-{id} still id-matches the card chrome
       - notice band shape preserved including data-dz-notice-tone keyed
         off dz-tones.css (#906)
       - eager vs lazy hx-trigger split (#864) honoured per-card via
         {{ loop.index0 < (fold_count or 0) }}

       Whitespace-stripped via `{%- -%}` to keep the rendered HTML
       compact — each card was 1.6 KB pre-strip; ~30% of that was
       indentation + blank lines. On a 50-card workspace the saving is
       ~25 KB on the wire, ~15 ms at 4G transfer speeds. #}
    {%- for r in workspace.regions %}
    {%- set _card_id = 'card-' ~ loop.index0 %}
    {%- set _eager = loop.index0 < (fold_count or 0) %}
    {%- set _trigger = 'load' if _eager else 'intersect once' %}
    {%- if workspace.sse_url %}
    {%- set _trigger = _trigger ~ ', sse:entity.created, sse:entity.updated, sse:entity.deleted' %}
    {%- endif %}
    <div data-card-id="{{ _card_id }}" data-card-region="{{ r.name }}" data-card-col-span="{{ r.col_span }}" data-card-row-order="{{ loop.index0 }}" class="dz-card-wrapper{% if r.css_class %} {{ r.css_class }}{% endif %} is-animating" style="grid-column: span {{ r.col_span }} / span {{ r.col_span }};" tabindex="0">
      <article class="dz-card" role="article" aria-labelledby="card-title-{{ _card_id }}">
        <div class="dz-card-header" data-test-id="dz-card-drag-handle">
          <div class="dz-card-titles">
            {%- if r.eyebrow %}<span class="dz-card-eyebrow">{{ r.eyebrow }}</span>{% endif %}
            <h3 id="card-title-{{ _card_id }}" class="dz-card-title">{{ r.title or r.name.replace('_', ' ').title() }}</h3>
          </div>
          <div class="dz-card-actions">
            <button data-test-id="dz-card-remove" class="dz-card-action-button" aria-label="Remove card">
              <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
              <span class="visually-hidden">Remove card</span>
            </button>
          </div>
        </div>
        {%- if r.notice and r.notice.title %}
        <div class="dz-notice-band dz-card-notice" data-dz-notice-tone="{{ r.notice.tone or 'neutral' }}" role="note">
          <div class="dz-card-notice-title">{{ r.notice.title }}</div>
          {%- if r.notice.body %}<div class="dz-card-notice-body">{{ r.notice.body }}</div>{% endif %}
        </div>
        {%- endif %}
        <div class="dz-card-body" id="region-{{ r.name }}-{{ _card_id }}" data-display="{{ r.display | lower }}" hx-get="/api/workspaces/{{ workspace.name }}/regions/{{ r.name }}" hx-trigger="{{ _trigger }}" hx-swap="innerHTML">
          <div class="dz-card-skeleton">
            <div class="dz-card-skeleton-line w-3-4"></div>
            <div class="dz-card-skeleton-line is-thin"></div>
            <div class="dz-card-skeleton-line is-thin w-5-6"></div>
          </div>
        </div>
      </article>
      <div class="dz-card-resize" aria-hidden="true"></div>
    </div>
    {%- endfor %}
  </div>

  {# ── Add Card ── #}
  <div class="dz-add-card-row">
    <button @click="showPicker = !showPicker"
            data-test-id="dz-add-card-trigger"
            class="dz-add-card-button">
      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
      Add Card
    </button>
    {% include 'workspace/_card_picker.html' %}
  </div>
</div>

{# Detail drawer (preserved unchanged) #}
<div id="dz-drawer-backdrop"
     class="dz-drawer-backdrop"
     onclick="window.dzDrawer.close()"></div>
<aside id="dz-detail-drawer" class="dz-drawer">
  <div class="dz-drawer-header">
    <button class="dz-drawer-button" onclick="window.dzDrawer.close()">
      <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
      Close
    </button>
    <a id="dz-drawer-expand" hidden class="dz-drawer-button">
      Open full page
      <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
    </a>
  </div>
  <div id="dz-detail-drawer-content" class="dz-drawer-content"></div>
</aside>
<script>
(function() {
  // #934: this script gets re-executed every time `_content.html` is
  // swapped into `#main-content` (workspace nav, htmx morph swap).
  // Pre-fix the IIFE re-bound listeners to `document.body` on every
  // run — N navigations meant N stacked listeners — and captured
  // local element references in closures that pointed at detached
  // DOM after morph. The failure mode: empty drawer "slid in" mid-
  // page on workspace→workspace nav because state leaked across
  // swaps and the close path mutated the wrong (detached) element.
  //
  // The fix has three parts:
  //   1. Init guard — register every listener exactly once across the
  //      session.
  //   2. Look up `drawer` / `backdrop` / `content` / `expand` fresh on
  //      each call so post-morph swaps still find the live nodes.
  //   3. `htmx:afterSettle` defensive close — if a swap landed
  //      anywhere other than `#dz-detail-drawer-content`, force the
  //      drawer closed. Stale `is-open` state from a previous workspace
  //      page can no longer leak across nav.
  function _qd(id) { return document.getElementById(id); }

  window.dzDrawer = {
    isOpen: false,
    open: function(url) {
      var drawer = _qd('dz-detail-drawer');
      var backdrop = _qd('dz-drawer-backdrop');
      var expand = _qd('dz-drawer-expand');
      if (!drawer || !backdrop) return;
      if (url && expand) { expand.href = url; expand.hidden = false; }
      else if (expand) { expand.hidden = true; }
      drawer.classList.add('is-open');
      backdrop.classList.add('is-open');
      document.body.classList.add('overflow-hidden');
      this.isOpen = true;
    },
    close: function() {
      var drawer = _qd('dz-detail-drawer');
      var backdrop = _qd('dz-drawer-backdrop');
      if (drawer) drawer.classList.remove('is-open');
      if (backdrop) backdrop.classList.remove('is-open');
      document.body.classList.remove('overflow-hidden');
      this.isOpen = false;
    }
  };

  if (window.__dzDrawerInit) return;
  window.__dzDrawerInit = true;

  document.body.addEventListener('dz:drawerOpen', function(e) {
    var url = (e.detail && e.detail.url) || '';
    window.dzDrawer.open(url);
  });

  // Click delegation on document.body — the drawer content node is
  // recreated on every workspace render, so we can't bind directly to
  // it. Filter to clicks INSIDE the live drawer content element.
  document.body.addEventListener('click', function(e) {
    var content = _qd('dz-detail-drawer-content');
    if (!content || !content.contains(e.target)) return;
    var link = e.target.closest('a[href]');
    if (!link) return;
    if (link.hasAttribute('hx-get')) return;
    var href = link.getAttribute('href');
    if (!href || href === '#') return;
    if (link.textContent.trim().match(/back/i)) {
      e.preventDefault();
      window.dzDrawer.close();
      return;
    }
    if (href.startsWith('/')) {
      e.preventDefault();
      // #980 round 2: guard against htmx not yet loaded. This handler
      // is registered immediately at script-parse time (before the
      // deferred htmx.min.js); on a fresh page load + rapid click
      // before htmx initialises, the call would race.
      if (typeof htmx === 'undefined') {
        // Fall back to native navigation — better than a dead click.
        window.location.href = href;
        return;
      }
      htmx.ajax('GET', href, {target: '#dz-detail-drawer-content', swap: 'innerHTML'});
    }
  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && window.dzDrawer.isOpen) {
      window.dzDrawer.close();
    }
  });

  // #934: defensive close on any swap that doesn't target the drawer.
  // Workspace→workspace nav uses `hx-target="#main-content"`, so the
  // drawer's `is-open` state from a prior interaction would otherwise
  // persist visually across the swap. The drawer-targeted action path
  // (target == 'dz-detail-drawer-content') is left alone because the
  // `dz:drawerOpen` trigger fires *after* htmx:afterSettle on that
  // path — opening the drawer is the intended next step there.
  document.body.addEventListener('htmx:afterSettle', function(e) {
    var target = e.detail && e.detail.target;
    if (!target || target.id === 'dz-detail-drawer-content') return;
    if (window.dzDrawer && window.dzDrawer.isOpen) {
      window.dzDrawer.close();
    }
  });
})();
</script>