@profpowell/vb-project-planning 0.2.1 → 0.2.3

package/src/web-components/gantt-chart/styles.css

@@ -107,6 +107,14 @@ gantt-chart:not([data-upgraded]) > table {
   text-overflow: ellipsis;
 }
 
+.gc-task-status {
+  flex: none;
+  margin-inline-start: auto;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-muted, #666666);
+}
+
 .gc-task-dates {
   position: absolute;
   width: 1px;
@@ -291,12 +299,16 @@ gantt-chart:not([data-upgraded]) > table {
   fill: none;
   stroke: var(--color-text-muted, #666666);
   stroke-width: 1.5;
-  marker-end: url(#gc-arrowhead);
+  /* marker-end is set per path to this chart's own marker id. */
 }
 
 /* ── Visually hidden (original table + live region) ── */
+/* Visually hidden, still read by screen readers. table-layout: fixed is
+   required: a table ignores width: 1px and grows to its content, which made
+   the page scroll sideways on phones. */
 .gc-sr-only {
   position: absolute;
+  table-layout: fixed;
   width: 1px;
   height: 1px;
   padding: 0;
@@ -369,6 +381,7 @@ gantt-chart[compact] .gc-group-spacer {
 
   gantt-chart[data-upgraded] .gc-sr-only {
     position: static;
+    table-layout: auto;
     width: auto;
     height: auto;
     margin: 0;

package/src/web-components/impact-effort/api.json

@@ -5,17 +5,19 @@
   "description": "2x2 prioritization matrix with drag-and-drop between quadrants (Quick Wins, Big Bets, Fill-Ins, Money Pit)",
   "htmlvalidate": { "flow": true, "permittedContent": ["@flow"] },
   "attributes": [
-    { "name": "src",     "kind": "host-api", "purpose": "config", "type": "string",  "description": "URL to JSON data for items" },
+    { "name": "src",     "kind": "host-api", "purpose": "config", "type": "string",  "description": "URL to a JSON array of items ({ id, quadrant, label }). Fetched once per value; a new value replaces the items and aborts an older in-flight request" },
     { "name": "title",   "kind": "host-api", "purpose": "config", "type": "string",  "description": "Optional heading above the matrix" },
-    { "name": "compact", "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Reduced spacing variant" }
+    { "name": "compact", "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Reduces grid height, padding, and label sizes for denser layouts" }
   ],
   "childAttributes": [
-    { "name": "data-quadrant", "on": "any child", "type": "enum", "values": ["quick-wins", "big-bets", "fill-ins", "money-pit"], "description": "Target quadrant for this item" },
-    { "name": "draggable",     "on": "any child", "type": "boolean", "description": "Required for drag capability" },
-    { "name": "data-id",       "on": "any child", "type": "string",  "description": "Stable identifier for the item" }
+    { "name": "data-quadrant", "on": "any child", "type": "enum", "values": ["quick-wins", "big-bets", "fill-ins", "money-pit"], "description": "Target quadrant for this item (default quick-wins); kept up to date as the item is dragged" },
+    { "name": "draggable",     "on": "any child", "type": "boolean", "description": "Required for drag capability (added if missing)" },
+    { "name": "data-id",       "on": "any child", "type": "string",  "description": "Stable identifier for the item, used as the .items key (generated if missing)" }
   ],
   "events": [
-    { "name": "impact-effort:move",  "detail": "{ itemId, from, to, item }",  "description": "Fired when an item is dragged between quadrants" },
-    { "name": "impact-effort:ready", "detail": "{ quadrantCounts }",          "description": "Fired after component initializes" }
+    { "name": "impact-effort:move",          "detail": "{ itemId, from, to, item }",       "description": "Fired when an item is dragged between quadrants; from and to are quadrant names" },
+    { "name": "impact-effort:ready",         "detail": "{ quadrantCounts }",               "description": "Fired once after the first render, with the number of items per quadrant. With src, fired once the loaded cards are in the DOM (after the View Transition's update). Once per element: not re-fired by a later src change (watch items-changed with source 'src') or when the matrix is moved in the DOM" },
+    { "name": "impact-effort:items-changed", "detail": "{ items, source: 'property' | 'src' }", "description": "Fired after each .items assignment (source 'property') and after each src load's cards are in the DOM (source 'src')" },
+    { "name": "impact-effort:upgraded",      "detail": "",                                 "description": "Fired (in a microtask) each time the matrix connects and upgrades" }
   ]
 }

package/src/web-components/impact-effort/logic.js

@@ -9,6 +9,7 @@
  * registered by the main bundle or pack entry.
  *
  * @attr {string} src - URL to JSON data for items
+ * @attr {string} title - Optional heading above the matrix
  * @attr {boolean} compact - Reduced spacing variant
  *
  * Children use:
@@ -17,13 +18,16 @@
  * @attr {string} data-id - Stable identifier for the item
  *
  * @fires impact-effort:move - When an item is dragged between quadrants
- * @fires impact-effort:ready - After component initializes with quadrant counts
+ * @fires impact-effort:ready - Once per element, after the first render (with src: after the loaded cards are in the DOM)
+ * @fires impact-effort:items-changed - { items, source: 'property' | 'src' } after .items is set or src loads
+ * @fires impact-effort:upgraded - Each time the matrix connects and upgrades
  */
 
 import { registerComponent } from '../../lib/bundle-registry.js';
 import { VBElement } from '../../lib/vb-element.js';
 import { viewTransitionSwap } from '../../lib/vb-view-transition.js';
 import { diffByKey } from '../../lib/diff-by-key.js';
+import { SrcLoader, announce, createLiveRegion, createStoryCard, isStoryRecord, itemLabel } from '../../lib/board-surface.js';
 
 class ImpactEffort extends VBElement {
   static QUADRANTS = ['quick-wins', 'big-bets', 'fill-ins', 'money-pit'];
@@ -36,10 +40,10 @@ class ImpactEffort extends VBElement {
   };
 
   static DESCRIPTIONS = {
-    'quick-wins': 'High impact \u00b7 Low effort',
-    'big-bets':   'High impact \u00b7 High effort',
-    'fill-ins':   'Low impact \u00b7 Low effort',
-    'money-pit':  'Low impact \u00b7 High effort',
+    'quick-wins': 'High impact · Low effort',
+    'big-bets':   'High impact · High effort',
+    'fill-ins':   'Low impact · Low effort',
+    'money-pit':  'Low impact · High effort',
   };
 
   static #instanceCount = 0;
@@ -48,20 +52,68 @@ class ImpactEffort extends VBElement {
     return ['src', 'compact', 'title'];
   }
 
-  /** @type {HTMLElement | null} */
-  #grid = null;
   /** @type {Record<string, HTMLElement>} */
   #surfaces = {};
   /** @type {HTMLElement | null} */
   #liveRegion = null;
+  /** @type {HTMLHeadingElement | null} */
+  #titleEl = null;
   /** @type {string} */
   #groupId = '';
-  /** @type {HTMLElement | null} */
-  #wrapper = null;
+  /** Shell built (survives disconnect so a moved matrix keeps its cards). */
+  #built = false;
+  /** Listeners attached for the current connection. */
+  #wired = false;
+  #readyFired = false;
+  #loader = new SrcLoader();
+  /** Items assigned before upgrade, applied on first setup. */
+  /** @type {any[] | null} */
+  #pending = null;
+
+  /** key → rendered card (authored, assigned, or loaded). */
+  /** @type {Map<unknown, Element>} */
+  #nodes = new Map();
+  /** key → last record assigned via `.items` or `src`. */
+  /** @type {Map<unknown, any>} */
+  #records = new Map();
 
   setup() {
-    this.#groupId = `ie-${++ImpactEffort.#instanceCount}`;
+    if (!this.#groupId) this.#groupId = `ie-${++ImpactEffort.#instanceCount}`;
+
+    if (!this.#built) {
+      this.#built = true;
+      this.#build();
+      if (this.#pending) {
+        const pending = this.#pending;
+        this.#pending = null;
+        this.items = pending;
+      }
+    }
 
+    if (!this.#wired) {
+      this.#wired = true;
+      this.listen(this, 'drag-surface:transfer', this.#onTransfer);
+    }
+
+    // Data mode: fetch once per src value; ready fires after it renders.
+    const src = this.getAttribute('src');
+    if (src) {
+      if (src !== this.#loader.url) this.#loadFromSrc(src);
+      return;
+    }
+
+    if (!this.#readyFired) this.#dispatchReady();
+  }
+
+  teardown() {
+    // Listeners are removed by VBElement. The grid, title and cards stay
+    // in place so a matrix that is moved in the DOM keeps its content;
+    // the next connect only re-attaches listeners.
+    this.#wired = false;
+  }
+
+  /** First build: wrapper, quadrants, live region; authored cards moved in. */
+  #build() {
     // 1. Snapshot children that belong in quadrants
     const children = [...this.querySelectorAll(':scope > [data-quadrant], :scope > [draggable]')];
 
@@ -72,7 +124,7 @@ class ImpactEffort extends VBElement {
     const yLabel = document.createElement('div');
     yLabel.className = 'ie-y-label';
     yLabel.setAttribute('aria-hidden', 'true');
-    yLabel.textContent = 'Impact \u2191';
+    yLabel.textContent = 'Impact ↑';
 
     const column = document.createElement('div');
     column.style.cssText = 'display:flex;flex-direction:column;flex:1;min-width:0;';
@@ -85,7 +137,7 @@ class ImpactEffort extends VBElement {
     const xLabel = document.createElement('div');
     xLabel.className = 'ie-x-label';
     xLabel.setAttribute('aria-hidden', 'true');
-    xLabel.textContent = 'Effort \u2192';
+    xLabel.textContent = 'Effort →';
 
     // 3. Build quadrant sections
     for (const q of ImpactEffort.QUADRANTS) {
@@ -96,8 +148,10 @@ class ImpactEffort extends VBElement {
 
       const header = document.createElement('header');
       header.className = 'ie-quadrant-label';
-      header.innerHTML =
-        `${ImpactEffort.LABELS[q]}<br><span class="ie-quadrant-desc">${ImpactEffort.DESCRIPTIONS[q]}</span>`;
+      const desc = document.createElement('span');
+      desc.className = 'ie-quadrant-desc';
+      desc.textContent = ImpactEffort.DESCRIPTIONS[q];
+      header.append(ImpactEffort.LABELS[q], document.createElement('br'), desc);
 
       const surface = document.createElement('drag-surface');
       surface.setAttribute('group', this.#groupId);
@@ -112,124 +166,88 @@ class ImpactEffort extends VBElement {
       this.#surfaces[q] = surface;
     }
 
-    // 4. Distribute captured children into matching surfaces
+    // 4. Distribute captured children into matching surfaces and register
+    //    them so a later `.items` assignment diffs against them.
     children.forEach((c, i) => {
       const child = /** @type {HTMLElement} */ (c);
-      const quadrant = child.getAttribute('data-quadrant') || 'quick-wins';
-      const target = this.#surfaces[quadrant] || this.#surfaces['quick-wins'];
-
-      // Ensure draggable and data-id
-      if (!child.hasAttribute('draggable')) {
-        child.setAttribute('draggable', 'true');
-      }
-      if (!child.hasAttribute('data-id')) {
-        child.dataset.id = `ie-item-${i}`;
-      }
-
-      target.appendChild(child);
+      const quadrant = this.#surfaces[child.getAttribute('data-quadrant') || ''] ? child.getAttribute('data-quadrant') : 'quick-wins';
+      child.setAttribute('data-quadrant', /** @type {string} */ (quadrant));
+      if (!child.hasAttribute('draggable')) child.setAttribute('draggable', 'true');
+      if (!child.hasAttribute('data-id')) child.dataset.id = `ie-item-${i}`;
+      this.#surfaces[/** @type {string} */ (quadrant)].appendChild(child);
+      this.#nodes.set(child.dataset.id, child);
     });
 
-    // 5. Create live region
-    const liveRegion = document.createElement('div');
-    liveRegion.className = 'ie-live-region';
-    liveRegion.setAttribute('role', 'status');
-    liveRegion.setAttribute('aria-live', 'polite');
-    liveRegion.setAttribute('aria-atomic', 'true');
-
-    // 6. Assemble DOM
-    const title = this.getAttribute('title');
-    if (title) {
-      const heading = document.createElement('h3');
-      heading.className = 'ie-title';
-      heading.textContent = title;
-      this.prepend(heading);
-    }
-
+    // 5. Assemble DOM
+    this.#liveRegion = createLiveRegion('ie-live-region');
+    this.#syncTitle();
     column.appendChild(grid);
     column.appendChild(xLabel);
     wrapper.appendChild(yLabel);
     wrapper.appendChild(column);
-    this.appendChild(wrapper);
-    this.appendChild(liveRegion);
-
-    this.#grid = grid;
-    this.#liveRegion = liveRegion;
-    this.#wrapper = wrapper;
-
-    // 7. Listen for cross-surface transfers
-    this.listen(this, 'drag-surface:transfer', (/** @type {CustomEvent} */ e) => {
-      const { item, fromSurface, toSurface } = e.detail;
-      const fromQuadrant = this.#findQuadrantForSurface(fromSurface);
-      const toQuadrant = this.#findQuadrantForSurface(toSurface);
-
-      if (!fromQuadrant || !toQuadrant) return;
+    this.append(wrapper, this.#liveRegion);
+  }
 
-      // Update the item's quadrant attribute
-      item.setAttribute('data-quadrant', toQuadrant);
+  /** Create, update, or remove the optional heading from the title attribute. */
+  #syncTitle() {
+    const title = this.getAttribute('title');
+    if (title) {
+      if (!this.#titleEl) {
+        this.#titleEl = document.createElement('h3');
+        this.#titleEl.className = 'ie-title';
+        this.prepend(this.#titleEl);
+      }
+      this.#titleEl.textContent = title;
+    } else if (this.#titleEl) {
+      this.#titleEl.remove();
+      this.#titleEl = null;
+    }
+  }
 
-      // Announce the move
-      this.#announce(`Moved ${this.#itemLabel(item)} to ${ImpactEffort.LABELS[toQuadrant]}`);
+  /** @param {Event} e */
+  #onTransfer = (e) => {
+    const { item, fromSurface, toSurface } = /** @type {CustomEvent} */ (e).detail;
+    const fromQuadrant = this.#findQuadrantForSurface(fromSurface);
+    const toQuadrant = this.#findQuadrantForSurface(toSurface);
 
-      // Dispatch component-level event
-      this.dispatchEvent(new CustomEvent('impact-effort:move', {
-        bubbles: true,
-        detail: {
-          itemId: item.dataset.id,
-          from: fromQuadrant,
-          to: toQuadrant,
-          item,
-        },
-      }));
-    });
+    if (!fromQuadrant || !toQuadrant) return;
 
-    // 8. Handle src attribute for data mode
-    const src = this.getAttribute('src');
-    if (src) {
-      this.#loadFromSrc(src);
-    }
+    // Update the item's quadrant attribute
+    item.setAttribute('data-quadrant', toQuadrant);
 
-    // 9. Dispatch ready event with counts
-    this.#dispatchReady();
-  }
+    announce(this.#liveRegion, `Moved ${itemLabel(item)} to ${ImpactEffort.LABELS[toQuadrant]}`);
 
-  teardown() {
-    if (this.#wrapper) {
-      this.#wrapper.remove();
-      this.#wrapper = null;
-    }
-    if (this.#liveRegion) {
-      this.#liveRegion.remove();
-      this.#liveRegion = null;
-    }
-    this.#grid = null;
-    this.#surfaces = {};
-    this.#nodes.clear();
-    this.#items = [];
-  }
+    this.dispatchEvent(new CustomEvent('impact-effort:move', {
+      bubbles: true,
+      detail: {
+        itemId: item.dataset.id,
+        from: fromQuadrant,
+        to: toQuadrant,
+        item,
+      },
+    }));
+  };
 
   // ── Data API (HTML-first / JS-first dual contract) ──────────────
 
-  /** @type {any[]} */
-  #items = [];
-  /** @type {Map<unknown, Element>} */
-  #nodes = new Map();
-
   /**
-   * Read the matrix items as a plain array. Each entry:
-   * `{ id, quadrant: 'quick-wins'|'big-bets'|'fill-ins'|'money-pit', text? }`.
-   * After upgrade reflects the parsed children; after assignment reflects
-   * what was passed in.
+   * The matrix items in DOM order, reflecting drags. Each entry is the
+   * record last assigned for that id (via `.items` or `src`) with its
+   * current `quadrant`; authored cards read as `{ id, quadrant, label }`.
+   * Assigning the result back to `.items` keeps every card in place.
    */
   get items() {
-    if (this.#items.length) return this.#items;
     const result = [];
     for (const [q, surface] of Object.entries(this.#surfaces)) {
       for (const el of surface.querySelectorAll(':scope > [draggable="true"]')) {
-        result.push({
-          id: el.getAttribute('data-id') || undefined,
-          quadrant: q,
-          text: el.textContent?.trim() || undefined,
-        });
+        const id = el.getAttribute('data-id') || undefined;
+        const key = this.#keyForNode(el);
+        const known = key !== undefined ? this.#records.get(key) : undefined;
+        if (known) {
+          result.push({ ...known, quadrant: q });
+        } else {
+          result.push({ id, quadrant: q, label: itemLabel(el) });
+        }
       }
     }
     return result;
@@ -237,111 +255,136 @@ class ImpactEffort extends VBElement {
 
   /**
    * Replace the matrix items and route each into its quadrant surface.
-   * Runs a keyed diff so existing nodes whose id persists are preserved
-   * across re-assignment (in-flight drag state, focus, animations survive).
-   * New ids render as <article class="ie-card"> by default; override via
+   * Each item: `{ id, quadrant, label }` (`text` is accepted as an alias of
+   * `label`; story fields — persona, action, benefit, storyId — render a
+   * `<user-story>` card). Runs a keyed diff by `id`, so cards whose id
+   * persists (including authored ones) are moved, not recreated. Items
+   * without an `id` are keyed by their label (the nth repeat of a label
+   * keeps the nth such card), so they also survive drags and round-trips;
+   * give items an `id` if their labels change. New ids
+   * render as `<article class="ie-card">` by default; override via
    * `.renderItem`.
    *
    * Emits impact-effort:items-changed { items, source: 'property' }.
    */
   set items(value) {
-    if (!this.#grid) return;
     const next = Array.isArray(value) ? value : [];
-    diffByKey({
-      newItems: next,
-      nodes: this.#nodes,
-      keyOf: (it) => it.id ?? `${it.quadrant}:${it.text}`,
-      renderItem: (it) => {
-        const self = /** @type {any} */ (this);
-        if (typeof self.renderItem === 'function') {
-          const out = self.renderItem(it);
-          if (out instanceof Element) {
-            if (!out.hasAttribute('draggable')) out.setAttribute('draggable', 'true');
-            if (!out.hasAttribute('data-id')) out.setAttribute('data-id', String(it.id ?? ''));
-            return out;
-          }
-        }
-        const article = document.createElement('article');
-        article.className = 'ie-card';
-        article.setAttribute('draggable', 'true');
-        if (it.id) article.setAttribute('data-id', String(it.id));
-        article.textContent = it.text || it.id || '';
-        return article;
-      },
-      containerFor: (it) => this.#surfaces[it.quadrant] || this.#surfaces['quick-wins'],
-    });
-    this.#items = next;
+    if (!this.#built) {
+      this.#pending = next;
+      return;
+    }
+    this.#applyItems(next);
     this.dispatchEvent(new CustomEvent('impact-effort:items-changed', {
       detail: { items: next, source: 'property' },
       bubbles: true,
     }));
   }
 
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (!this.hasAttribute('data-upgraded')) return;
+  /**
+   * Diff keys for a list of items: the `id` when present; otherwise the
+   * label (`label` or `text`), with a counter for repeats, so the nth
+   * id-less item with a given label keeps the nth such card. The quadrant
+   * is not part of the key, so a dragged id-less card survives an
+   * `.items` round-trip.
+   * @param {any[]} list
+   * @returns {Map<any, unknown>}
+   */
+  static #keysFor(list) {
+    /** @type {Map<string, number>} */
+    const seen = new Map();
+    /** @type {Map<any, unknown>} */
+    const keys = new Map();
+    for (const it of list) {
+      if (it.id != null) { keys.set(it, it.id); continue; }
+      const label = String(it.label ?? it.text ?? '');
+      const n = seen.get(label) ?? 0;
+      seen.set(label, n + 1);
+      keys.set(it, n ? `label:${label}#${n}` : `label:${label}`);
+    }
+    return keys;
+  }
+
+  /** @param {Element} el */
+  #keyForNode(el) {
+    for (const [key, node] of this.#nodes) if (node === el) return key;
+    return undefined;
+  }
 
-    if (name === 'src' && newVal && newVal !== oldVal) {
-      this.#loadFromSrc(newVal);
+  /** @param {any[]} next */
+  #applyItems(next) {
+    const keys = ImpactEffort.#keysFor(next);
+    diffByKey({
+      newItems: next,
+      nodes: this.#nodes,
+      keyOf: (it) => keys.get(it),
+      renderItem: (it) => this.#renderCard(it),
+      containerFor: (it) => this.#surfaces[it.quadrant] || this.#surfaces['quick-wins'],
+    });
+    this.#records.clear();
+    for (const it of next) {
+      const key = keys.get(it);
+      this.#records.set(key, it);
+      const el = this.#nodes.get(key);
+      el?.setAttribute('data-quadrant', this.#surfaces[it.quadrant] ? it.quadrant : 'quick-wins');
     }
   }
 
+  /**
+   * @param {any} it
+   * @returns {Element}
+   */
+  #renderCard(it) {
+    const self = /** @type {any} */ (this);
+    let el;
+    if (typeof self.renderItem === 'function') {
+      const out = self.renderItem(it);
+      if (out instanceof Element) el = out;
+    }
+    if (!el && isStoryRecord(it)) el = createStoryCard(it, 'minimal');
+    if (!el) {
+      el = document.createElement('article');
+      el.className = 'ie-card';
+      el.textContent = it.label ?? it.text ?? it.id ?? '';
+    }
+    if (!el.hasAttribute('draggable')) el.setAttribute('draggable', 'true');
+    if (it.id != null && !el.hasAttribute('data-id')) el.setAttribute('data-id', String(it.id));
+    return el;
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal || !this.#built) return;
+    if (name === 'src' && newVal && newVal !== this.#loader.url) this.#loadFromSrc(newVal);
+    if (name === 'src' && !newVal) this.#loader.cancel();   // src removed: drop a pending load, keep the cards
+    if (name === 'title') this.#syncTitle();
+  }
+
   // ── Data loading ──────────────────────────────────────────────────────────
 
+  /**
+   * Fetch an array of items (same shape as `.items`) and replace the
+   * matrix with it. One request per src value; a newer src aborts an
+   * older in-flight one. Once the cards are in the DOM (after the View
+   * Transition's update callback) `impact-effort:items-changed` fires with
+   * source 'src', and `impact-effort:ready` if it has not fired yet.
+   * @param {string} url
+   */
   async #loadFromSrc(url) {
     try {
-      const res = await fetch(url);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = await res.json();
-
+      const result = await this.#loader.fetchJson(url);
+      if (!result) return;
+      const { data, isCurrent } = result;
       if (!Array.isArray(data)) return;
-
-      const swap = () => {
-        // Clear existing items from all surfaces
-        for (const q of ImpactEffort.QUADRANTS) {
-          const surface = this.#surfaces[q];
-          if (!surface) continue;
-          for (const child of [...surface.querySelectorAll('[draggable]')]) {
-            child.remove();
-          }
-        }
-
-        // Create and distribute items — use <user-story> when story data present
-        data.forEach((entry, i) => {
-          const quadrant = entry.quadrant || 'quick-wins';
-          const id = entry.id || `ie-item-${i}`;
-          let el;
-
-          if (entry.persona || entry.action || entry.storyId) {
-            el = document.createElement('user-story');
-            el.setAttribute('detail', 'minimal');
-            if (entry.storyId)  el.setAttribute('story-id', entry.storyId);
-            if (entry.persona)  el.setAttribute('persona', entry.persona);
-            if (entry.action)   el.setAttribute('action', entry.action);
-            if (entry.benefit)  el.setAttribute('benefit', entry.benefit);
-            if (entry.priority) el.setAttribute('priority', entry.priority);
-            if (entry.status)   el.setAttribute('status', entry.status);
-            if (entry.points)   el.setAttribute('points', String(entry.points));
-          } else {
-            el = document.createElement('article');
-            el.textContent = entry.label || entry.text || '';
-          }
-
-          el.setAttribute('draggable', 'true');
-          el.dataset.id = id;
-          el.dataset.quadrant = quadrant;
-
-          const target = this.#surfaces[quadrant] || this.#surfaces['quick-wins'];
-          target.appendChild(el);
-        });
-      };
-
-      if (this.hasAttribute('data-upgraded') && this.#grid) {
-        viewTransitionSwap(this, swap, 'ie-vt');
-      } else {
-        swap();
-      }
-
-      this.#dispatchReady();
+      const entries = data.map((entry, i) => ({ ...entry, id: entry.id ?? entry.storyId ?? `ie-item-${i}` }));
+
+      // viewTransitionSwap runs the swap synchronously when it can't animate.
+      const tx = viewTransitionSwap(this, () => this.#applyItems(entries), 'ie-vt');
+      if (tx) await tx.updateCallbackDone;
+      if (!isCurrent()) return;
+      this.dispatchEvent(new CustomEvent('impact-effort:items-changed', {
+        detail: { items: this.items, source: 'src' },
+        bubbles: true,
+      }));
+      if (!this.#readyFired) this.#dispatchReady();
     } catch (err) {
       console.warn(`[impact-effort] Failed to load src="${url}":`, err);
     }
@@ -357,28 +400,14 @@ class ImpactEffort extends VBElement {
     return null;
   }
 
-  /** Set live region text content (with clear-and-set for re-announcement) */
-  #announce(msg) {
-    const region = this.#liveRegion;
-    if (!region) return;
-    region.textContent = '';
-    requestAnimationFrame(() => {
-      region.textContent = msg;
-    });
-  }
-
-  /** Derive a label for an item from data-id or textContent */
-  #itemLabel(item) {
-    return item.dataset.id || item.textContent.trim().slice(0, 40);
-  }
-
   /** Dispatch the ready event with counts per quadrant */
   #dispatchReady() {
+    this.#readyFired = true;
     const quadrantCounts = {};
     for (const q of ImpactEffort.QUADRANTS) {
       const surface = this.#surfaces[q];
       quadrantCounts[q] = surface
-        ? surface.querySelectorAll('[draggable="true"]').length
+        ? surface.querySelectorAll(':scope > [draggable="true"]').length
         : 0;
     }
     this.dispatchEvent(new CustomEvent('impact-effort:ready', {