@profpowell/vb-project-planning 0.1.0

package/dist/vb-project-planning.min.js

@@ -0,0 +1,3312 @@
+var re=`
+  :host {
+    display: block;
+    font-family: var(--user-persona-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+    --_bg:          var(--user-persona-bg, var(--color-surface, #ffffff));
+    --_text:        var(--user-persona-text, var(--color-text, #1a1a1a));
+    --_border:      var(--user-persona-border, var(--color-border, #e0e0e0));
+    --_muted:       var(--user-persona-muted, var(--color-text-muted, #666));
+    --_accent:      var(--user-persona-accent, var(--color-interactive, #0066cc));
+    --_card-bg:     var(--user-persona-card-bg, var(--color-surface-raised, #f8f9fa));
+    --_radius:      var(--user-persona-radius, var(--radius-xl, 1rem));
+    --_avatar-size: var(--user-persona-avatar-size, 80px);
+    --_goals:       var(--user-persona-goals, #22c55e);
+    --_frustrations: var(--user-persona-frustrations, #ef4444);
+    --_behaviors:   var(--user-persona-behaviors, #8b5cf6);
+    --_stories:     var(--user-persona-stories, #3b82f6);
+    --_shadow:    var(--user-persona-shadow, var(--shadow-md));
+    --_space-2xs: var(--user-persona-space-2xs, var(--size-2xs, 0.25rem));
+    --_space-xs:  var(--user-persona-space-xs, var(--size-xs, 0.5rem));
+    --_space-s:   var(--user-persona-space-s, var(--size-s, 0.75rem));
+    --_space-m:   var(--user-persona-space-m, var(--size-m, 1rem));
+    --_space-l:   var(--user-persona-space-l, var(--size-l, 1.5rem));
+    --_font-xs:   var(--user-persona-font-xs, var(--font-size-xs, 0.75rem));
+    --_font-sm:   var(--user-persona-font-sm, var(--font-size-sm, 0.875rem));
+    --_font-md:   var(--user-persona-font-md, var(--font-size-md, 1rem));
+    --_font-2xl:  var(--user-persona-font-2xl, var(--font-size-2xl, 1.5rem));
+    --_radius-m:  var(--user-persona-radius-m, var(--radius-m, 0.5rem));
+    --_radius-l:  var(--user-persona-radius-l, var(--radius-l, 0.75rem));
+  }
+
+  .persona-card {
+    background: var(--_bg);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius);
+    overflow: hidden;
+    box-shadow: var(--_shadow);
+  }
+
+  .persona-header {
+    display: flex;
+    align-items: center;
+    gap: var(--_space-l);
+    padding: var(--_space-l);
+    background: var(--_card-bg);
+    border-bottom: 1px solid var(--_border);
+  }
+
+  :host([compact]) .persona-header {
+    padding: var(--_space-m);
+    gap: var(--_space-m);
+  }
+
+  .avatar {
+    width: var(--_avatar-size);
+    height: var(--_avatar-size);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    font-weight: 600;
+    color: white;
+    flex-shrink: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  :host([compact]) .avatar {
+    width: 56px;
+    height: 56px;
+    font-size: 20px;
+  }
+
+  .header-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .persona-name {
+    font-size: var(--_font-2xl);
+    font-weight: 700;
+    color: var(--_text);
+    margin: 0 0 var(--_space-2xs) 0;
+  }
+
+  :host([compact]) .persona-name {
+    font-size: 18px;
+  }
+
+  .persona-role {
+    font-size: var(--_font-md);
+    color: var(--_accent);
+    font-weight: 500;
+    margin: 0;
+  }
+
+  :host([compact]) .persona-role {
+    font-size: var(--_font-sm);
+  }
+
+  .persona-meta {
+    display: flex;
+    gap: var(--_space-m);
+    margin-top: var(--_space-xs);
+    flex-wrap: wrap;
+  }
+
+  .meta-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--_muted);
+  }
+
+  .meta-item svg {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+    opacity: 0.7;
+  }
+
+  .persona-quote {
+    padding: 20px var(--_space-l);
+    background: var(--_card-bg);
+    border-bottom: 1px solid var(--_border);
+    position: relative;
+  }
+
+  :host([compact]) .persona-quote {
+    padding: var(--_space-m);
+  }
+
+  .quote-mark {
+    position: absolute;
+    top: 12px;
+    left: 16px;
+    font-size: 48px;
+    line-height: 1;
+    color: var(--_accent);
+    opacity: 0.2;
+    font-family: Georgia, serif;
+  }
+
+  .quote-text {
+    font-size: var(--_font-md);
+    font-style: italic;
+    color: var(--_text);
+    line-height: 1.6;
+    margin: 0;
+    padding-left: var(--_space-l);
+  }
+
+  :host([compact]) .quote-text {
+    font-size: var(--_font-sm);
+  }
+
+  .persona-body {
+    padding: var(--_space-l);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--_space-l);
+  }
+
+  :host([compact]) .persona-body {
+    padding: var(--_space-m);
+    gap: var(--_space-m);
+  }
+
+  .section {
+    background: var(--_card-bg);
+    border-radius: var(--_radius-l);
+    padding: var(--_space-m);
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: var(--_space-xs);
+    margin-bottom: var(--_space-s);
+  }
+
+  .section-icon {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--_radius-m);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .section-icon svg {
+    width: 16px;
+    height: 16px;
+    fill: white;
+  }
+
+  .section-icon.bio { background: var(--_accent); }
+  .section-icon.goals { background: var(--_goals); }
+  .section-icon.frustrations { background: var(--_frustrations); }
+  .section-icon.behaviors { background: var(--_behaviors); }
+  .section-icon.stories { background: var(--_stories); }
+
+  /* Stories section \u2014 auto-rendered list of related <user-story> elements */
+  .section-count {
+    margin-inline-start: var(--_space-2xs);
+    padding: 0.05em 0.5ch;
+    border-radius: 999px;
+    background: var(--color-surface-raised, oklch(95% 0 0));
+    color: var(--color-text-muted);
+    font-size: 0.75em;
+    font-weight: 600;
+  }
+  .story-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: var(--_space-2xs);
+  }
+  .story-item {
+    display: flex;
+    align-items: center;
+    gap: var(--_space-s);
+    padding-block: var(--_space-2xs);
+    border-block-end: 1px solid var(--color-border-muted, var(--color-border, #e5e7eb));
+  }
+  .story-item:last-child { border-block-end: none; }
+  .story-item a {
+    color: var(--color-interactive, currentColor);
+    text-decoration: none;
+    flex: 1;
+  }
+  .story-item a:hover { text-decoration: underline; }
+  .story-meta {
+    font-size: var(--_font-xs);
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0 0.5ch;
+    border: 1px solid var(--color-border-muted, var(--color-border, #e5e7eb));
+    border-radius: var(--_radius-m);
+  }
+  .empty-stories {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+
+  .section-title {
+    font-size: var(--_font-sm);
+    font-weight: 600;
+    color: var(--_text);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .section-content {
+    color: var(--_text);
+    font-size: var(--_font-sm);
+    line-height: 1.6;
+  }
+
+  .section-content ::slotted(ul),
+  .section-content ::slotted(ol) {
+    margin: 0;
+    padding-left: 20px;
+  }
+
+  .section-content ::slotted(li) {
+    margin-bottom: var(--_space-xs);
+  }
+
+  .section-content ::slotted(p) {
+    margin: 0;
+  }
+
+  @media (max-width: 600px) {
+    .persona-header {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .persona-meta {
+      justify-content: center;
+    }
+
+    .persona-body {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+    }
+  }
+`;var Ir=window.matchMedia("(prefers-reduced-motion: reduce)");var se=new Map;function w(o,t,e={}){let r=e.priority??10,a={impl:t,bundle:e.bundle,contract:e.contract,priority:r},s=se.get(o);if(customElements.get(o)){if(!s||s.priority>=r){s&&s.priority===r&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${o}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=r){s.priority===r&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}se.set(o,a),customElements.define(o,t)}function m(o){return String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function O(o){return o.split(" ").map(t=>t[0]).join("").toUpperCase().slice(0,2)}function B(o){let t=0;for(let r=0;r<o.length;r++)t=o.charCodeAt(r)+((t<<5)-t);return`hsl(${(t%360+360)%360}, 65%, 55%)`}function k(o){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${o}</svg>`}var E={user:'<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',pencil:'<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',check:'<path d="M20 6 9 17l-5-5"/>',target:'<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',alertTriangle:'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',messageCircle:'<path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>',lightbulb:'<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',wrench:'<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>',heart:'<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>',mapPin:'<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',checkCircle:'<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',x:'<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',send:'<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>'},ft={says:{label:"Says",icon:E.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:E.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:E.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:E.heart,color:"#ef4444"}},R={delighted:{emoji:"\u{1F604}",score:.95,color:"#16a34a"},satisfied:{emoji:"\u{1F60A}",score:.8,color:"#22c55e"},hopeful:{emoji:"\u{1F642}",score:.68,color:"#84cc16"},curious:{emoji:"\u{1F914}",score:.55,color:"#eab308"},neutral:{emoji:"\u{1F610}",score:.5,color:"#94a3b8"},uncertain:{emoji:"\u{1F615}",score:.4,color:"#f97316"},confused:{emoji:"\u{1F635}",score:.3,color:"#fb923c"},frustrated:{emoji:"\u{1F624}",score:.18,color:"#ef4444"},angry:{emoji:"\u{1F620}",score:.05,color:"#dc2626"}};var Pe="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait",Z=[32,64,128,256,512];function Re(o){let t=0;for(let e=0;e<o.length;e++)t=o.charCodeAt(e)+((t<<5)-t);return t}function je(o){let t=Z[0],e=Math.abs(o-t);for(let r=1;r<Z.length;r++){let a=Math.abs(o-Z[r]);a<e&&(t=Z[r],e=a)}return t}function ae(o,t=128){let e=Re(String(o)),r=(e%100+100)%100,a=(e>>>16&1)===0?"female":"male",s=je(t);return`${Pe}/${a}/${s}/${r}.jpg`}function bt(o){let t=0;for(let e=0;e<o.length;e++)t=o.charCodeAt(e)+((t<<5)-t);return t}var De=["Sarah Chen","Marcus Johnson","Aisha Patel","James O'Brien","Yuki Tanaka","Elena Rodriguez","David Kim","Fatima Al-Hassan","Lucas Silva","Priya Sharma","Noah Williams","Mei Lin","Carlos Mendez","Amara Osei","Henrik Larsson","Zara Ahmed"],Fe=["Product Manager","UX Designer","Frontend Developer","Data Analyst","Marketing Lead","QA Engineer","DevOps Lead","Content Strategist","Startup Founder","IT Director","Customer Success Lead","Research Scientist"],Oe=["San Francisco, CA","Austin, TX","London, UK","Toronto, CA","Berlin, DE","Tokyo, JP","Sydney, AU","S\xE3o Paulo, BR"],Be=["I need tools that help me stay organized without slowing me down.","The dashboard is where I live \u2014 it has to be fast and reliable.","I want to understand the data, not fight the interface.","If it takes more than two clicks, I\u2019ll find another way.","Collaboration shouldn\u2019t mean endless notification noise.","I just want it to work the way I expect it to.","Give me the big picture first, then let me drill into details.","Accessibility isn\u2019t a nice-to-have \u2014 it\u2019s how I use the web."],He=["Streamline daily workflows","Reduce context-switching","Stay aligned with the team","Make data-driven decisions quickly","Ship features on a predictable cadence","Automate repetitive tasks","Improve onboarding experience","Keep documentation up to date"],Ue=["Too many disconnected tools","Slow page loads break focus","Unclear ownership of tasks","Settings that reset unexpectedly","Notifications that bury important updates","Poor mobile experience","Inconsistent design across features","No offline support"],Ve=["Checks dashboards every morning","Prefers keyboard shortcuts over mouse","Skims docs, reads deeply only when stuck","Shares screenshots in Slack","Batches email to twice a day","Tests features in incognito first","Bookmarks frequently used reports","Uses dark mode exclusively"],gt=class extends HTMLElement{static get observedAttributes(){return["role","age","location","avatar","compact","src","data-list-stories","id"]}#e=new Map;#t=null;constructor(){super(),this.attachShadow({mode:"open"})}relatedStories(){if(!this.id)return[];let t=this.getRootNode(),e=t.querySelectorAll?t:document;return Array.from(e.querySelectorAll(`user-story[persona-id="${We(this.id)}"]`))}#r(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&!this.getAttribute(e)&&this.#e.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#e.get(t)||""}get data(){return{name:this.personaName,role:this.personaRole||void 0,age:this.age||void 0,location:this.location||void 0,avatar:this.avatar||void 0,quote:this.quote||void 0,bio:this.#e.get("bio")||void 0,goals:this.#e.get("goals")||void 0,frustrations:this.#e.get("frustrations")||void 0,behaviors:this.#e.get("behaviors")||void 0}}set data(t){!t||typeof t!="object"||(this._applyData(t),this.shadowRoot&&this.#n(),this.dispatchEvent(new CustomEvent("user-persona:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0})))}_applyData(t){for(let e of["role","age","location","avatar"])t[e]&&this.setAttribute(e,String(t[e]));if(t.name&&!this.querySelector('[slot="name"]')){let e=document.createElement("h2");e.slot="name",e.textContent=String(t.name),this.appendChild(e)}if(t.quote&&!this.querySelector('[slot="quote"]')){let e=document.createElement("p");e.slot="quote",e.textContent=String(t.quote),this.appendChild(e)}for(let e of["bio","goals","frustrations","behaviors"])t[e]&&this.#e.set(e,String(t[e]))}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let r=await e.json();this._applyData(r),this.#n()}catch(e){console.warn(`[user-persona] Failed to load src="${t}":`,e)}}connectedCallback(){this.#r(),this.hasAttribute("data-mock")?this.#i():this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#n(),this.#a(),this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent("persona-ready",{bubbles:!0,composed:!0,detail:{name:this.personaName,role:this.personaRole}}))}disconnectedCallback(){this.removeAttribute("data-upgraded"),this.#t?.disconnect(),this.#t=null}#a(){if(!this.hasAttribute("data-list-stories")||!this.id){this.#t?.disconnect(),this.#t=null;return}this.#t||(this.#t=new MutationObserver(()=>this.#s()),this.#t.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["persona-id"]}))}#s(){if(!this.shadowRoot)return;let t=this.shadowRoot.querySelector("[data-stories-section]");t&&(t.outerHTML=this.#o())}#o(){if(!this.hasAttribute("data-list-stories")||!this.id)return"";let t=this.relatedStories();return`
+      <section class="section" part="section-stories" data-stories-section>
+        <div class="section-header">
+          <div class="section-icon stories" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
+          </div>
+          <span class="section-title">Stories <span class="section-count">${t.length}</span></span>
+        </div>
+        <div class="section-content">
+          ${t.length===0?'<p class="empty-stories">No user stories reference this persona yet.</p>':`<ul class="story-list">${t.map(e=>{let r=e.id||e.getAttribute("story-id")||"",a=e.querySelector('[slot="action"]')?.textContent?.trim()||e.getAttribute("action")||e.id||"untitled",s=e.getAttribute("priority")||"",i=e.getAttribute("status")||"";return`<li class="story-item" data-priority="${m(s)}" data-status="${m(i)}">${r?`<a href="#${m(r)}">${m(a)}</a>`:`<span>${m(a)}</span>`}${s?`<span class="story-meta">${m(s)}</span>`:""}${i?`<span class="story-meta">${m(i)}</span>`:""}</li>`}).join("")}</ul>`}
+        </div>
+      </section>
+    `}attributeChangedCallback(t,e,r){if(!(e===r||!this.shadowRoot)){if(t==="src"&&this.isConnected){this._loadSrc(r);return}(t==="data-list-stories"||t==="id")&&this.#a(),this.#n()}}get personaName(){return this.querySelector('[slot="name"]')?.textContent?.trim()||this.#e.get("name")||"Unnamed Persona"}get personaRole(){return this.getAttribute("role")||""}get age(){return this.getAttribute("age")||""}get location(){return this.getAttribute("location")||""}get avatar(){return this.getAttribute("avatar")||""}get quote(){return this.querySelector('[slot="quote"]')?.textContent?.trim()||this.#e.get("quote")||""}get compact(){return this.hasAttribute("compact")}#i(){let t=this.dataset.seed||this.dataset.mock||String(Date.now()),e=s=>s[(bt(t+s.length)%s.length+s.length)%s.length],r=(s,i)=>{let n=[];for(let c=0;c<i;c++)n.push(s[(bt(t+c+s.length)%s.length+s.length)%s.length]);return[...new Set(n)]};if(!this.querySelector('[slot="name"]')){let s=document.createElement("h2");s.slot="name",s.textContent=e(De),this.appendChild(s)}if(this.getAttribute("role")||this.setAttribute("role",e(Fe)),this.getAttribute("age")||this.setAttribute("age",String(25+(bt(t)%30+30)%30)),this.getAttribute("location")||this.setAttribute("location",e(Oe)),!this.getAttribute("avatar")){let s=this.querySelector('[slot="name"]')?.textContent?.trim()||"Persona";this.setAttribute("avatar",ae(s,256))}if(!this.querySelector('[slot="quote"]')){let s=document.createElement("p");s.slot="quote",s.textContent=e(Be),this.appendChild(s)}let a=(s,i)=>{if(this.querySelector(`[slot="${s}"]`))return;let n=document.createElement("ul");n.setAttribute("slot",s);for(let c of i){let d=document.createElement("li");d.textContent=c,n.appendChild(d)}this.appendChild(n)};a("goals",r(He,3)),a("frustrations",r(Ue,3)),a("behaviors",r(Ve,3))}#n(){let t=this.personaName,e=this.personaRole,r=this.age,a=this.location,s=this.avatar,i=this.quote,n=B(t),c=s?`background:url(${m(s)}) center/cover`:`background:${n}`;this.shadowRoot.innerHTML=`
+      <style>${re}</style>
+
+      <article class="persona-card" part="card" role="article"
+        aria-label="User persona: ${m(t)}">
+
+        <header class="persona-header" part="header">
+          <div class="avatar" part="avatar" style="${c}"
+            role="img" aria-label="Avatar for ${m(t)}">
+            ${s?"":m(O(t))}
+          </div>
+          <div class="header-info">
+            <div class="persona-name-wrap" part="name">
+              <slot name="name"><h2 class="persona-name-fallback">${m(t)}</h2></slot>
+            </div>
+            ${e?`<p class="persona-role" part="role">${m(e)}</p>`:""}
+            <div class="persona-meta" part="meta">
+              ${r?`
+                <span class="meta-item">
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
+                  ${m(r)} years old
+                </span>
+              `:""}
+              ${a?`
+                <span class="meta-item">
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
+                  ${m(a)}
+                </span>
+              `:""}
+            </div>
+          </div>
+        </header>
+
+        ${i||this.querySelector('[slot="quote"]')?`
+          <div class="persona-quote" part="quote">
+            <span class="quote-mark" aria-hidden="true">&ldquo;</span>
+            <div class="quote-text-wrap"><slot name="quote"><p class="quote-text">${m(i)}</p></slot></div>
+          </div>
+        `:""}
+
+        <div class="persona-body" part="body">
+          <div class="section" part="section-bio">
+            <div class="section-header">
+              <div class="section-icon bio" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+              </div>
+              <span class="section-title">Background</span>
+            </div>
+            <div class="section-content">
+              <slot name="bio">No background information provided.</slot>
+            </div>
+          </div>
+
+          <div class="section" part="section-goals">
+            <div class="section-header">
+              <div class="section-icon goals" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+              </div>
+              <span class="section-title">Goals</span>
+            </div>
+            <div class="section-content">
+              <slot name="goals">No goals specified.</slot>
+            </div>
+          </div>
+
+          <div class="section" part="section-frustrations">
+            <div class="section-header">
+              <div class="section-icon frustrations" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
+              </div>
+              <span class="section-title">Frustrations</span>
+            </div>
+            <div class="section-content">
+              <slot name="frustrations">No frustrations listed.</slot>
+            </div>
+          </div>
+
+          <div class="section" part="section-behaviors">
+            <div class="section-header">
+              <div class="section-icon behaviors" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
+              </div>
+              <span class="section-title">Behaviors</span>
+            </div>
+            <div class="section-content">
+              <slot name="behaviors">No behaviors documented.</slot>
+            </div>
+          </div>
+
+          ${this.#o()}
+        </div>
+      </article>
+    `}};function We(o){return typeof CSS<"u"&&CSS.escape?CSS.escape(String(o)):String(o).replace(/["\\]/g,"\\$&")}w("user-persona",gt);var vt=`
+:host {
+  --_bg:        var(--user-story-bg, var(--color-surface, #ffffff));
+  --_text:      var(--user-story-text, var(--color-text, #1a1a1a));
+  --_muted:     var(--user-story-muted, var(--color-text-muted, #666));
+  --_border:    var(--user-story-border, var(--color-border, #e0e0e0));
+  --_accent:    var(--user-story-accent, var(--color-interactive, #0066cc));
+  --_card-bg:   var(--user-story-card-bg, var(--color-surface-raised, #f8f9fa));
+  --_highlight: var(--user-story-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
+  --_radius:    var(--user-story-radius, var(--radius-l, 0.75rem));
+  --_shadow:       var(--user-story-shadow, var(--shadow-sm));
+  --_shadow-hover: var(--user-story-shadow-hover, var(--shadow-md));
+  --_duration:     var(--user-story-duration, var(--duration-normal, 200ms));
+  --_ease:         var(--user-story-ease, var(--ease-default, ease));
+  --_space-xs:     var(--user-story-space-xs, var(--size-xs, 0.5rem));
+  --_space-s:      var(--user-story-space-s, var(--size-s, 0.75rem));
+  --_space-m:      var(--user-story-space-m, var(--size-m, 1rem));
+  --_font-xs:      var(--user-story-font-xs, var(--font-size-xs, 0.75rem));
+  --_font-sm:      var(--user-story-font-sm, var(--font-size-sm, 0.875rem));
+  --_font-md:      var(--user-story-font-md, var(--font-size-md, 1rem));
+  --_font-lg:      var(--user-story-font-lg, var(--font-size-lg, 1.125rem));
+  --_font-mono:    var(--user-story-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
+  --_radius-s:     var(--user-story-radius-s, var(--radius-s, 0.25rem));
+  --_radius-full:  var(--user-story-radius-full, var(--radius-full, 9999px));
+
+  display: block;
+  font-family: var(--user-story-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+}
+
+.story-card {
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  overflow: hidden;
+  box-shadow: var(--_shadow);
+  transition: box-shadow var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
+}
+
+.story-card:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+.story-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--_space-s) var(--_space-m);
+  background: var(--_card-bg);
+  border-bottom: 1px solid var(--_border);
+  gap: var(--_space-s);
+  flex-wrap: wrap;
+}
+
+.story-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  flex-wrap: wrap;
+}
+
+.story-id {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  font-family: var(--_font-mono);
+}
+
+.epic-badge {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: var(--_radius-s);
+  background: var(--_highlight);
+  color: var(--_accent);
+  font-weight: 500;
+}
+
+.story-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+}
+
+.priority-badge,
+.status-badge {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--_radius-full);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.points-badge {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+  color: white;
+  font-size: var(--_font-xs);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.story-body {
+  padding: 20px;
+}
+
+:host([compact]) .story-body {
+  padding: var(--_space-m);
+}
+
+.story-statement {
+  font-size: var(--_font-lg);
+  line-height: 1.6;
+  color: var(--_text);
+  margin: 0;
+}
+
+:host([compact]) .story-statement {
+  font-size: 15px;
+}
+
+.keyword {
+  font-weight: 600;
+  color: var(--_accent);
+}
+
+.persona-text {
+  background: var(--_highlight);
+  padding: 2px 6px;
+  border-radius: var(--_radius-s);
+  font-weight: 500;
+}
+
+.persona-text--link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--_accent);
+  text-decoration: none;
+}
+
+.persona-text--link svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
+.persona-text--link:hover {
+  text-decoration: underline;
+}
+
+.action-text {
+  font-weight: 500;
+}
+
+.benefit-text {
+  font-style: italic;
+  color: var(--_muted);
+}
+
+.story-sections {
+  border-top: 1px solid var(--_border);
+}
+
+.section {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--_border);
+}
+
+.section:last-child {
+  border-bottom: none;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  margin-bottom: var(--_space-s);
+}
+
+.section-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--_accent);
+}
+
+.section-icon svg {
+  width: 14px;
+  height: 14px;
+  fill: white;
+}
+
+/* Semantic section-icon colors \u2014 driven by VB theme tokens so they shift
+   with the active theme rather than fighting it. */
+.section-icon.acceptance { background: var(--color-success, #22c55e); }
+.section-icon.notes      { background: var(--color-warning, #f59e0b); }
+.section-icon.tasks      { background: var(--color-accent,  #8b5cf6); }
+
+.section-title {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.section-content {
+  color: var(--_text);
+  font-size: var(--_font-sm);
+  line-height: 1.6;
+}
+
+/* Slotted content styling */
+.section-content ::slotted(ul),
+.section-content ::slotted(ol) {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.section-content ::slotted(li) {
+  margin-bottom: 6px;
+}
+
+.section-content ::slotted(p) {
+  margin: 0;
+}
+
+/* Empty-slot fallback */
+.slot-fallback {
+  color: var(--_muted);
+  font-style: italic;
+}
+
+@media (max-width: 480px) {
+  .story-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .story-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .story-card {
+    transition: none;
+  }
+}
+
+/* \u2500\u2500 Slotted title (minimal mode heading) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.story-title-wrap {
+  margin: 0;
+}
+
+::slotted([slot="title"]) {
+  font-size: var(--_font-sm) !important;
+  font-weight: 600 !important;
+  color: var(--_text) !important;
+  margin: 0 !important;
+}
+
+.story-title-fallback {
+  font-size: var(--_font-sm);
+  font-weight: 600;
+  color: var(--_text);
+}
+
+/* Minimal detail level */
+:host([detail="minimal"]) .story-card {
+  padding: var(--_space-xs);
+}
+
+:host([detail="minimal"]) .story-header {
+  display: none;
+}
+
+:host([detail="minimal"]) .story-sections {
+  display: none;
+}
+
+:host([detail="minimal"]) .story-body {
+  padding: var(--_space-xs) var(--_space-s);
+}
+
+:host([detail="minimal"]) .story-card {
+  cursor: pointer;
+}
+
+:host([detail="minimal"]) .story-card:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+:host([detail="minimal"]) .story-card:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+:host([detail="minimal"]) .story-id {
+  display: block;
+  margin-bottom: var(--_space-2xs);
+}
+
+:host([detail="minimal"]) .benefit-text {
+  display: none;
+}
+
+/* Compact detail level \u2014 hide empty sections */
+:host([detail="compact"]) .section[data-empty] {
+  display: none;
+}
+
+:host([detail="compact"]) .slot-fallback {
+  display: none;
+}
+`;var yt=class o extends HTMLElement{static get observedAttributes(){return["persona-id","priority","points","status","epic","story-id","compact","detail","src"]}static PRIORITIES={critical:{label:"Critical",color:"#dc2626",bg:"rgba(220, 38, 38, 0.1)"},high:{label:"High",color:"#ea580c",bg:"rgba(234, 88, 12, 0.1)"},medium:{label:"Medium",color:"#ca8a04",bg:"rgba(202, 138, 4, 0.1)"},low:{label:"Low",color:"#16a34a",bg:"rgba(22, 163, 74, 0.1)"}};static STATUSES={backlog:{label:"Backlog",color:"#6b7280",bg:"rgba(107, 114, 128, 0.1)"},"to-do":{label:"To Do",color:"#3b82f6",bg:"rgba(59, 130, 246, 0.1)"},"in-progress":{label:"In Progress",color:"#8b5cf6",bg:"rgba(139, 92, 246, 0.1)"},review:{label:"Review",color:"#f59e0b",bg:"rgba(245, 158, 11, 0.1)"},done:{label:"Done",color:"#22c55e",bg:"rgba(34, 197, 94, 0.1)"}};#e=new Map;#t=null;constructor(){super(),this.attachShadow({mode:"open"})}#r(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&this.#e.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#e.get(t)||""}get data(){return{storyId:this.storyId||void 0,personaId:this.personaId||void 0,priority:this.priority,status:this.status,points:this.points||void 0,epic:this.epic||void 0,detail:this.getAttribute("detail")||void 0,persona:this.persona||void 0,action:this.action||void 0,benefit:this.benefit||void 0,title:this.storyTitle||void 0}}set data(t){!t||typeof t!="object"||(this._applyData(t),this.#r(),this.shadowRoot&&this.#n(),this.dispatchEvent(new CustomEvent("user-story:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0})))}_applyData(t){for(let[e,r]of[["storyId","story-id"],["personaId","persona-id"],["priority","priority"],["status","status"],["points","points"],["epic","epic"],["detail","detail"]])t[e]!=null&&this.setAttribute(r,String(t[e]));if(t.persona&&!this.querySelector('[slot="persona"]')){let e=document.createElement("span");e.slot="persona",e.textContent=String(t.persona),this.appendChild(e)}if(t.action&&!this.querySelector('[slot="action"]')){let e=document.createElement("span");e.slot="action",e.textContent=String(t.action),this.appendChild(e)}if(t.benefit&&!this.querySelector('[slot="benefit"]')){let e=document.createElement("span");e.slot="benefit",e.textContent=String(t.benefit),this.appendChild(e)}if(t.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h3");e.slot="title",e.textContent=String(t.title),this.appendChild(e)}for(let e of["acceptance-criteria","tasks","notes"]){let r=e==="acceptance-criteria"?"acceptanceCriteria":e;if(t[r]&&!this.querySelector(`[slot="${e}"]`))if(Array.isArray(t[r])){let a=document.createElement("ul");a.slot=e;for(let s of t[r]){let i=document.createElement("li");i.textContent=String(s),a.appendChild(i)}this.appendChild(a)}else{let a=document.createElement("p");a.slot=e,a.textContent=String(t[r]),this.appendChild(a)}}}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let r=await e.json();this._applyData(r),this.#r(),this.#n()}catch(e){console.warn(`[user-story] Failed to load src="${t}":`,e)}}connectedCallback(){this.#r(),this.storyId&&!this.id&&(this.id=this.storyId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#n(),this.#a(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded"),this.#t?.disconnect(),this.#t=null}attributeChangedCallback(t,e,r){e!==r&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(r):(this.#n(),t==="persona-id"&&this.#a()))}#a(){if(this.#t?.disconnect(),this.#t=null,!this.personaId||this.#s())return;let t=this.getRootNode(),r=(t&&typeof t.getElementById=="function"?t:document).getElementById(this.personaId);!r||r.tagName!=="USER-PERSONA"||(this.#t=new MutationObserver(()=>this.#n()),this.#t.observe(r,{attributes:!0,attributeFilter:["role"]}))}get persona(){return this.#s()||this.#o()||"user"}get personaId(){return this.getAttribute("persona-id")||""}#s(){return this.querySelector('[slot="persona"]')?.textContent?.trim()||this.#e.get("persona")||""}#o(){if(!this.personaId)return"";let t=this.getRootNode(),r=(t&&typeof t.getElementById=="function"?t:document).getElementById(this.personaId);return!r||r.tagName!=="USER-PERSONA"?"":r.getAttribute("role")?.trim()||""}#i(){return/^[aeio]/i.test(this.persona.trim())?"an":"a"}get action(){return this.querySelector('[slot="action"]')?.textContent?.trim()||this.#e.get("action")||""}get benefit(){return this.querySelector('[slot="benefit"]')?.textContent?.trim()||this.#e.get("benefit")||""}get priority(){return this.getAttribute("priority")||"medium"}get points(){return this.getAttribute("points")||""}get status(){return this.getAttribute("status")||"backlog"}get epic(){return this.getAttribute("epic")||""}get storyId(){return this.getAttribute("story-id")||""}get storyTitle(){return this.querySelector('[slot="title"]')?.textContent?.trim()||this.#e.get("title")||""}get _minimalLabel(){if(this.storyTitle)return this.storyTitle;let t=this.action;return t.length>40?t.slice(0,40)+"\u2026":t}get compact(){return this.hasAttribute("compact")}get _detailLevel(){return this.getAttribute("detail")?this.getAttribute("detail"):this.hasAttribute("compact")?"compact":"full"}updateStatus(t){o.STATUSES[t]&&(this.setAttribute("status",t),this.dispatchEvent(new CustomEvent("status-changed",{detail:{status:t,storyId:this.storyId},bubbles:!0,composed:!0})))}updatePriority(t){o.PRIORITIES[t]&&(this.setAttribute("priority",t),this.dispatchEvent(new CustomEvent("priority-changed",{detail:{priority:t,storyId:this.storyId},bubbles:!0,composed:!0})))}showDetail(){let t=`story-dialog-${this.storyId||this.id||"detail"}`,e=document.getElementById(t);e||(e=document.createElement("dialog"),e.id=t,e.setAttribute("data-size","l"),document.body.appendChild(e));let r=document.createElement("form");r.method="dialog";let a=document.createElement("header"),s=document.createElement("h3");s.textContent=this.storyTitle||this.storyId||"Story Detail";let i=document.createElement("button");i.type="submit",i.setAttribute("aria-label","Close"),i.textContent="\xD7",a.appendChild(s),a.appendChild(i);let n=document.createElement("section"),c=document.createElement("user-story");for(let l of this.getAttributeNames())l==="detail"||l==="compact"||l==="data-upgraded"||l==="draggable"||l==="data-id"||l==="data-quadrant"||c.setAttribute(l,this.getAttribute(l)??"");let d=[...this.children].some(l=>l.getAttribute("slot")&&l.tagName!=="DIALOG");c.setAttribute("detail",d?"full":"compact"),c.removeAttribute("id");for(let l of[...this.children])l.tagName!=="DIALOG"&&c.appendChild(l.cloneNode(!0));n.appendChild(c),r.appendChild(a),r.appendChild(n),e.innerHTML="",e.appendChild(r),e.addEventListener("close",()=>{e.innerHTML=""},{once:!0}),e.showModal()}#n(){let t=o.PRIORITIES[this.priority]||o.PRIORITIES.medium,e=o.STATUSES[this.status]||o.STATUSES.backlog,r=this._detailLevel,a=this.storyId?`User story: ${m(this.storyId)}`:"User story";if(this.shadowRoot){if(r==="minimal"){this.shadowRoot.innerHTML=`
+        <style>${vt}</style>
+        <article class="story-card story-card--minimal" role="article" aria-label="${a}"
+          tabindex="0">
+          <div class="story-body">
+            ${this.storyId?`<span class="story-id">${m(this.storyId)}</span>`:""}
+            <div class="story-title-wrap">
+              <slot name="title"><span class="story-title-fallback">${m(this._minimalLabel||"[describe the action]")}</span></slot>
+            </div>
+          </div>
+        </article>
+      `;let s=this.shadowRoot.querySelector(".story-card--minimal");if(!s)return;s.addEventListener("click",()=>this.showDetail()),s.addEventListener("keydown",i=>{let n=i;(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this.showDetail())})}else this.shadowRoot.innerHTML=`
+        <style>${vt}</style>
+
+        <article class="story-card story-card--${r}" part="card" role="article" aria-label="${a}">
+          <header class="story-header" part="header">
+            <div class="story-meta">
+              ${this.storyId?`<span class="story-id" part="id">${m(this.storyId)}</span>`:""}
+              ${this.epic?`<span class="epic-badge" part="epic">${m(this.epic)}</span>`:""}
+            </div>
+            <div class="story-badges">
+              <span class="priority-badge" part="priority"
+                style="color: ${t.color}; background: ${t.bg};"
+              >${m(t.label)}</span>
+              <span class="status-badge" part="status"
+                style="color: ${e.color}; background: ${e.bg};"
+              >${m(e.label)}</span>
+              ${this.points?`<span class="points-badge" part="points">${m(this.points)}</span>`:""}
+            </div>
+          </header>
+
+          <div class="story-body" part="body">
+            <p class="story-statement" part="statement">
+              <span class="keyword">As ${this.#i()}</span>
+              ${this.personaId?`<a class="persona-text persona-text--link" href="#${m(this.personaId)}">${k(E.user)} <slot name="persona"><span>${m(this.#o()||"user")}</span></slot></a>`:'<span class="persona-text"><slot name="persona"><span>user</span></slot></span>'},
+              <span class="keyword">I want</span>
+              <span class="action-text"><slot name="action"><span>[describe the action]</span></slot></span>${this.benefit||this.querySelector('[slot="benefit"]')?`
+              <span class="keyword">so that</span>
+              <span class="benefit-text"><slot name="benefit"></slot></span>`:""}
+            </p>
+          </div>
+
+          <div class="story-sections" part="sections">
+            <div class="section" part="section">
+              <div class="section-header">
+                <div class="section-icon acceptance">
+                  <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                </div>
+                <span class="section-title">Acceptance Criteria</span>
+              </div>
+              <div class="section-content">
+                <slot name="acceptance-criteria">
+                  <em class="slot-fallback">No acceptance criteria defined.</em>
+                </slot>
+              </div>
+            </div>
+
+            <div class="section" part="section">
+              <div class="section-header">
+                <div class="section-icon tasks">
+                  <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
+                </div>
+                <span class="section-title">Tasks</span>
+              </div>
+              <div class="section-content">
+                <slot name="tasks">
+                  <em class="slot-fallback">No tasks added yet.</em>
+                </slot>
+              </div>
+            </div>
+
+            <div class="section" part="section">
+              <div class="section-header">
+                <div class="section-icon notes">
+                  <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                </div>
+                <span class="section-title">Notes</span>
+              </div>
+              <div class="section-content">
+                <slot name="notes">
+                  <em class="slot-fallback">No additional notes.</em>
+                </slot>
+              </div>
+            </div>
+          </div>
+        </article>
+      `,r==="compact"&&this.shadowRoot.querySelectorAll(".section").forEach(i=>{let n=i.querySelector("slot");n&&n.assignedNodes().length===0&&i.setAttribute("data-empty","")});this.dispatchEvent(new CustomEvent("story-ready",{detail:{id:this.storyId,persona:this.persona,action:this.action,benefit:this.benefit,priority:this.priority,status:this.status,points:this.points},bubbles:!0,composed:!0}))}}};w("user-story",yt);var tt=`
+  :host {
+    display: block;
+    font-family: var(--_font-sans);
+    line-height: 1.6;
+    color: var(--_text);
+    container-type: inline-size;
+
+    --_bg:        var(--user-journey-bg, var(--color-surface-raised, #f8f9fa));
+    --_card:      var(--user-journey-card, var(--color-surface, #ffffff));
+    --_border:    var(--user-journey-border, var(--color-border, #e0e0e0));
+    --_muted:     var(--user-journey-muted, var(--color-text-muted, #666666));
+    --_text:      var(--user-journey-text, var(--color-text, #1a1a1a));
+    --_inverted:  var(--user-journey-text-inverted, var(--color-text-inverted, #ffffff));
+    --_primary:   var(--user-journey-primary, var(--color-primary, var(--color-interactive, #6366f1)));
+    --_accent:    var(--user-journey-accent, var(--color-accent, #8b5cf6));
+    --_link:      var(--user-journey-link, var(--color-interactive, var(--color-primary, #6366f1)));
+    --_curve-stroke: var(--user-journey-curve-stroke, var(--_primary));
+    --_radius:    var(--user-journey-radius, var(--radius-l, 0.75rem));
+
+    --_font-sans: var(--user-journey-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+    --_font-mono: var(--user-journey-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
+    --_font-xs:   var(--user-journey-font-xs, var(--font-size-xs, 0.75rem));
+    --_font-sm:   var(--user-journey-font-sm, var(--font-size-sm, 0.875rem));
+    --_font-md:   var(--user-journey-font-md, var(--font-size-md, 1rem));
+    --_font-xl:   var(--user-journey-font-xl, var(--font-size-xl, 1.25rem));
+    --_space-2xs: var(--user-journey-space-2xs, var(--size-2xs, 0.25rem));
+    --_space-xs:  var(--user-journey-space-xs, var(--size-xs, 0.5rem));
+    --_space-s:   var(--user-journey-space-s, var(--size-s, 0.75rem));
+    --_space-m:   var(--user-journey-space-m, var(--size-m, 1rem));
+    --_space-l:   var(--user-journey-space-l, var(--size-l, 1.5rem));
+
+    /* Semantic tints derived from theme tokens via color-mix.
+       Subtle backgrounds (10\u201314%) for body cells, header at 22%. */
+    --_tint-pos:  color-mix(in oklch, var(--color-success, #22c55e) 14%, var(--_card));
+    --_tint-neu:  color-mix(in oklch, var(--color-warning, #f59e0b) 12%, var(--_card));
+    --_tint-neg:  color-mix(in oklch, var(--color-error,   #ef4444) 12%, var(--_card));
+    --_tint-row-pain: color-mix(in oklch, var(--color-error,   #ef4444) 8%,  var(--_card));
+    --_tint-row-opp:  color-mix(in oklch, var(--color-success, #22c55e) 8%,  var(--_card));
+    --_chip-type-bg:  color-mix(in oklch, var(--_accent)  18%, var(--_card));
+    --_chip-type-fg:  var(--color-accent-text, var(--_accent));
+    --_chip-story-bg: color-mix(in oklch, var(--_link)    18%, var(--_card));
+    --_chip-story-bg-hover: color-mix(in oklch, var(--_link) 28%, var(--_card));
+    --_chip-story-fg: var(--_link);
+    --_grid-head-bg:  color-mix(in oklch, var(--_primary) 85%, var(--color-text, #000));
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+  /* Card */
+  .journey {
+    background: var(--_card);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius);
+    overflow: hidden;
+  }
+
+  /* Header */
+  .journey__header {
+    padding: 20px 24px 16px 28px;
+    border-block-end: 1px solid var(--_border);
+    position: relative;
+  }
+
+  /* Left accent bar */
+  .journey__header::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 4px;
+    background: linear-gradient(135deg, var(--_primary), var(--_accent));
+  }
+
+  .journey__header-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--_space-s);
+    flex-wrap: wrap;
+    margin-block-end: var(--_space-xs);
+  }
+
+  .journey__chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+
+  /* Chips */
+  .chip {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    padding: 2px 9px;
+    border-radius: 99px;
+    text-decoration: none;
+    line-height: 1.6;
+  }
+
+  .chip--type {
+    color: var(--_chip-type-fg);
+    background: var(--_chip-type-bg);
+  }
+
+  .chip--story {
+    color: var(--_chip-story-fg);
+    background: var(--_chip-story-bg);
+  }
+
+  .chip--story:hover { background: var(--_chip-story-bg-hover); }
+
+  /* Persona ref */
+  .persona-ref {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--_muted);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .persona-ref svg { width: 14px; height: 14px; flex-shrink: 0; }
+  a.persona-ref:hover { color: var(--_link); text-decoration: underline; }
+
+  /* Title & summary (slotted content) */
+  .journey__title-wrap {
+    margin-block-end: var(--_space-2xs);
+  }
+
+  .journey__title {
+    font-size: var(--_font-xl);
+    font-weight: 700;
+    color: var(--_text);
+    margin: 0;
+  }
+
+  ::slotted([slot="title"]) {
+    font-size: var(--_font-xl) !important;
+    font-weight: 700 !important;
+    color: var(--_text) !important;
+    margin: 0 !important;
+  }
+
+  .journey--compact .journey__title,
+  .journey--compact ::slotted([slot="title"]) { font-size: var(--_font-md) !important; }
+
+  .journey__summary-wrap {
+    max-width: 72ch;
+  }
+
+  ::slotted([slot="summary"]) {
+    font-size: var(--_font-sm) !important;
+    color: var(--_muted) !important;
+    margin: 0 !important;
+  }
+
+  /* Emotion curve */
+  .journey__curve {
+    background: var(--_bg);
+    border-block-end: 1px solid var(--_border);
+    overflow: hidden;
+  }
+
+  .curve-svg {
+    display: block;
+    width: 100%;
+    height: 80px;
+  }
+
+  .journey--compact .curve-svg { height: 54px; }
+
+  .zone { opacity: 0.55; }
+  .zone--pos { fill: var(--_tint-pos); }
+  .zone--neu { fill: var(--_tint-neu); }
+  .zone--neg { fill: var(--_tint-neg); }
+
+  .vline      { stroke: var(--_border); stroke-width: 1; stroke-dasharray: 3 4; }
+  .curve-line { stroke: var(--_curve-stroke); stroke-width: 2.5; stroke-linecap: round; }
+  .dot        { stroke: var(--_card); stroke-width: 2.5; }
+
+  /* Grid */
+  .journey__grid-wrap { overflow-x: auto; }
+
+  .journey__grid {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  /* Head row */
+  .journey__grid thead tr {
+    background: var(--_grid-head-bg);
+    color: var(--_inverted);
+  }
+
+  .corner {
+    padding: 10px 12px;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.55;
+    text-align: left;
+    white-space: nowrap;
+    min-width: 100px;
+    position: sticky;
+    left: 0;
+    background: var(--_grid-head-bg);
+    z-index: 2;
+  }
+
+  .phase-head {
+    padding: 10px 14px;
+    text-align: left;
+    vertical-align: top;
+    border-inline-start: 1px solid color-mix(in oklch, var(--_inverted) 12%, transparent);
+    min-width: 160px;
+    position: relative;
+  }
+
+  /* Emotion-coloured top accent per phase */
+  .phase-head::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    height: 3px;
+    background: var(--ec, var(--_primary));
+  }
+
+  .ph-num   { display: block; font-size: 10px; opacity: 0.5; margin-block-end: 2px; }
+  .ph-name  { display: block; font-size: var(--_font-sm); font-weight: 700; line-height: 1.2; }
+  .ph-emoji { display: block; font-size: var(--_font-xl); line-height: 1; margin-block: 4px 2px; }
+
+  .ph-stories { display: flex; flex-wrap: wrap; gap: var(--_space-2xs); margin-block-start: var(--_space-2xs); }
+
+  /* Body rows */
+  .grid-row th,
+  .grid-row td {
+    padding: 10px 12px;
+    border-block-end: 1px solid var(--_border);
+    border-inline-start: 1px solid var(--_border);
+    vertical-align: top;
+  }
+
+  .grid-row th:first-child { border-inline-start: none; }
+
+  .row-label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--_muted);
+    white-space: nowrap;
+    background: var(--_bg);
+    text-align: left;
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  .data-cell          { font-size: 13px; line-height: 1.45; }
+  .data-cell p        { margin-block: 0 4px; }
+  .data-cell p:last-child { margin-block-end: 0; }
+  .data-cell--empty   { color: var(--_muted); opacity: 0.35; }
+
+  /* Semantic row tints */
+  .grid-row--painpoints    .data-cell { background: var(--_tint-row-pain); }
+  .grid-row--opportunities .data-cell { background: var(--_tint-row-opp); }
+
+  /* Compact */
+  .journey--compact .phase-head { min-width: 120px; padding: 8px 10px; }
+  .journey--compact .data-cell  { font-size: 12px; padding: 7px 10px; }
+  .journey--compact .corner     { min-width: 80px; }
+
+  /* Utility */
+  .state-msg           { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
+  .state-msg--error    { color: var(--color-error-text, var(--color-error, #dc2626)); }
+  .journey__placeholder { padding: 20px 24px; font-size: var(--_font-sm); color: var(--_muted); }
+  code { font-family: var(--_font-mono); font-size: 0.88em; }
+
+  /* Responsive */
+  @container (max-width: 500px) {
+    .journey__header   { padding: 14px 16px 12px 20px; }
+    .journey__title    { font-size: 17px; }
+    .corner, .row-label { min-width: 72px; font-size: 9px; }
+    .phase-head        { min-width: 110px; padding: 8px 10px; }
+    .data-cell         { font-size: 12px; padding: 8px 10px; }
+  }
+
+  @media print {
+    .journey__grid-wrap { overflow: visible; }
+    .row-label, .corner { position: relative; }
+  }
+`;var Qe=0;function M(o,t,e="vb-vt"){if(!o?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return t(),null;let r=`${e}-${++Qe}`;o.style.viewTransitionName=r;let a=document.startViewTransition(t);return a.finished.finally(()=>{o.style.viewTransitionName===r&&(o.style.viewTransitionName="")}),a}var Xe=[{key:"actions",label:"Actions"},{key:"thoughts",label:"Thoughts"},{key:"touchpoints",label:"Touchpoints"},{key:"painPoints",label:"Pain Points"},{key:"opportunities",label:"Opportunities"}],xt=class extends HTMLElement{static get observedAttributes(){return["src","persona","persona-id","story-ids","compact"]}#e=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.__phases=null}get phases(){return this.__phases}set phases(t){this.__phases!==t&&(this.__phases=t,this.isConnected&&this._render(),this.dispatchEvent(new CustomEvent("user-journey:phases-changed",{detail:{phases:t,source:"property"},bubbles:!0,composed:!0})))}get data(){return{persona:this.getAttribute("persona")||void 0,personaId:this.getAttribute("persona-id")||void 0,title:this.querySelector('[slot="title"]')?.textContent?.trim()||void 0,summary:this.querySelector('[slot="summary"]')?.textContent?.trim()||void 0,phases:this.__phases||void 0}}set data(t){if(!(!t||typeof t!="object")){if(t.persona&&this.setAttribute("persona",String(t.persona)),t.personaId&&this.setAttribute("persona-id",String(t.personaId)),t.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h2");e.slot="title",e.textContent=t.title,this.appendChild(e)}if(t.summary&&!this.querySelector('[slot="summary"]')){let e=document.createElement("p");e.slot="summary",e.textContent=t.summary,this.appendChild(e)}t.phases!=null&&(this.__phases=t.phases),this.isConnected&&this._render(),this.dispatchEvent(new CustomEvent("user-journey:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0}))}}#t(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#e.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#e.get(t)||""}connectedCallback(){this.#t(),this.setAttribute("data-upgraded",""),this.hasAttribute("src")?this._loadSrc(this.getAttribute("src")):this._render()}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t){this.isConnected&&(t==="src"?this._loadSrc(this.getAttribute("src")):this._render())}async _loadSrc(t){if(!t)return;let e=this.shadowRoot;e.innerHTML=`<style>${tt}</style><div class="state-msg">Loading\u2026</div>`;try{let r=await fetch(t);if(!r.ok)throw new Error(`HTTP ${r.status}`);let a=await r.json();if(a.persona&&this.setAttribute("persona",a.persona),a.personaId&&this.setAttribute("persona-id",a.personaId),a.title&&!this.querySelector('[slot="title"]')){let s=document.createElement("h2");s.slot="title",s.textContent=a.title,this.appendChild(s)}if(a.summary&&!this.querySelector('[slot="summary"]')){let s=document.createElement("p");s.slot="summary",s.textContent=a.summary,this.appendChild(s)}this.__phases=a.phases||[],this._render()}catch(r){e.innerHTML=`<style>${tt}</style><div class="state-msg state-msg--error">Could not load journey: ${m(r.message)}</div>`}}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",r=(this.getAttribute("story-ids")||"").split(",").map(u=>u.trim()).filter(Boolean),a=this.hasAttribute("compact"),s=this.__phases,i=!!this.querySelector('[slot="summary"]')||this.#e.has("summary"),n=this.querySelector('[slot="title"]')?.textContent?.trim()||this.#e.get("title")||"",c=`<style>${tt}</style>
+      <article class="journey${a?" journey--compact":""}">
+
+        <header class="journey__header">
+          <div class="journey__header-top">
+            <div class="journey__chips">
+              <span class="chip chip--type">Journey Map</span>
+              ${r.map(u=>`<a class="chip chip--story" href="#${u}">${this._label(u)}</a>`).join("")}
+            </div>
+            ${t?`
+              <div class="journey__persona">
+                ${e?`<a class="persona-ref" href="#${e}">${k(E.user)} ${m(t)}</a>`:`<span class="persona-ref">${k(E.user)} ${m(t)}</span>`}
+              </div>`:""}
+          </div>
+          <div class="journey__title-wrap">
+            <slot name="title"><h2 class="journey__title">User Journey</h2></slot>
+          </div>
+          ${i?'<div class="journey__summary-wrap"><slot name="summary"></slot></div>':""}
+        </header>
+
+        ${s&&s.length?this._curve(s)+this._grid(s):`<div class="journey__placeholder">
+               <p>Add phase data via <code>src</code> (JSON) or set <code>.phases</code> programmatically.</p>
+             </div>`}
+
+      </article>`,d=this.shadowRoot,l=()=>{d.innerHTML=c};d.querySelector("article")?M(this,l,"uj-vt"):l(),this.dispatchEvent(new CustomEvent("journey-ready",{bubbles:!0,composed:!0,detail:{title:n,persona:t,phaseCount:s?s.length:0}}))}_curve(t){let c=t.length,d=b=>28+(c<2?944/2:b/(c-1)*944),l=b=>14+(1-(R[b.emotion]||R.neutral).score)*72,u=t.map((b,v)=>({x:d(v),y:l(b),ph:b})),p=`M ${u[0].x},${u[0].y}`;for(let b=1;b<u.length;b++){let v=u[b-1],x=u[b],_=(v.x+x.x)/2;p+=` C ${_},${v.y} ${_},${x.y} ${x.x},${x.y}`}let h=`uj-${Math.random().toString(36).slice(2,8)}`,f=u.at(-1);return`
+      <div class="journey__curve" aria-hidden="true">
+        <svg viewBox="0 0 1000 100" preserveAspectRatio="none" class="curve-svg">
+          <defs>
+            <linearGradient id="${h}" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%"   stop-color="#6366f1" stop-opacity="0.22"/>
+              <stop offset="100%" stop-color="#6366f1" stop-opacity="0"/>
+            </linearGradient>
+          </defs>
+          <rect x="0"             y="0"          width="1000" height="${100*.4}"  class="zone zone--pos"/>
+          <rect x="0"             y="${100*.4}" width="1000" height="${100*.2}"  class="zone zone--neu"/>
+          <rect x="0"             y="${100*.6}" width="1000" height="${100*.4}"  class="zone zone--neg"/>
+          ${u.map(({x:b})=>`<line x1="${b}" y1="0" x2="${b}" y2="100" class="vline"/>`).join("")}
+          <path d="${p} L ${f.x},100 L ${u[0].x},100 Z" fill="url(#${h})"/>
+          <path d="${p}" fill="none" class="curve-line"/>
+          ${u.map(({x:b,y:v,ph:x})=>{let _=R[x.emotion]||R.neutral;return`<circle cx="${b}" cy="${v}" r="5" class="dot" style="fill:${_.color}"/>`}).join("")}
+        </svg>
+      </div>`}_grid(t){let e=t.map((a,s)=>{let i=R[a.emotion]||R.neutral,n=a.storyIds||[];return`
+        <th class="phase-head" data-emotion="${a.emotion||"neutral"}"
+            style="--ec:${i.color}">
+          <span class="ph-num">${s+1}</span>
+          <span class="ph-name">${m(a.name||"")}</span>
+          <span class="ph-emoji" title="${a.emotion||"neutral"}"><span role="img" aria-label="${m(a.emotion||"neutral")}">${i.emoji}</span></span>
+          ${n.length?`<div class="ph-stories">${n.map(c=>`<a class="chip chip--story" href="#${c}">${this._label(c)}</a>`).join("")}</div>`:""}
+        </th>`}).join(""),r=Xe.map(({key:a,label:s})=>{let i=t.map(n=>{let c=n[a]||[];return c.length?`<td class="data-cell data-cell--${a.toLowerCase()}">
+          ${c.map(d=>`<p>${m(d)}</p>`).join("")}
+        </td>`:'<td class="data-cell data-cell--empty">\u2014</td>'}).join("");return`
+        <tr class="grid-row grid-row--${a.toLowerCase()}">
+          <th class="row-label">${s}</th>
+          ${i}
+        </tr>`}).join("");return`
+      <div class="journey__grid-wrap">
+        <table class="journey__grid"
+               aria-label="${m(this.getAttribute("title")||"User Journey")} \u2014 phase breakdown">
+          <thead>
+            <tr>
+              <th class="corner">Stage</th>
+              ${e}
+            </tr>
+          </thead>
+          <tbody>${r}</tbody>
+        </table>
+      </div>`}_label(t){return t.replace(/^(activity|persona|journey|story|user)-/,"").replace(/-/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};w("user-journey",xt);var et=`
+  :host {
+    display: block;
+    font-family: var(--_font-sans);
+    line-height: 1.6;
+    color: var(--_text);
+    container-type: inline-size;
+
+    --_bg:     var(--empathy-map-bg, var(--color-surface, #ffffff));
+    --_card:   var(--empathy-map-card, var(--color-surface-raised, #f8f9fa));
+    --_border: var(--empathy-map-border, var(--color-border, #e0e0e0));
+    --_muted:  var(--empathy-map-muted, var(--color-text-muted, #666666));
+    --_text:   var(--empathy-map-text, var(--color-text, #1a1a1a));
+    --_radius: var(--empathy-map-radius, var(--radius-xl, 1rem));
+    --_accent: var(--empathy-map-accent, var(--color-interactive, var(--color-primary, #0066cc)));
+    --_link:   var(--empathy-map-link, var(--color-interactive, var(--color-primary, #6366f1)));
+    --_primary: var(--empathy-map-primary, var(--color-primary, #6366f1));
+    --_accent-bar: var(--empathy-map-accent-bar, var(--color-accent, #8b5cf6));
+    --_says:   var(--empathy-map-says, var(--color-info, #3b82f6));
+    --_thinks: var(--empathy-map-thinks, var(--color-accent, #8b5cf6));
+    --_does:   var(--empathy-map-does, var(--color-warning, #f59e0b));
+    --_feels:  var(--empathy-map-feels, var(--color-error, #ef4444));
+    --_says-bg:   color-mix(in oklch, var(--_says)   16%, var(--_card));
+    --_thinks-bg: color-mix(in oklch, var(--_thinks) 16%, var(--_card));
+    --_does-bg:   color-mix(in oklch, var(--_does)   16%, var(--_card));
+    --_feels-bg:  color-mix(in oklch, var(--_feels)  16%, var(--_card));
+    --_chip-type-bg: color-mix(in oklch, var(--_accent-bar) 18%, var(--_card));
+    --_chip-type-fg: var(--_accent-bar);
+    --_font-sans:    var(--empathy-map-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+    --_font-xs:      var(--empathy-map-font-xs, var(--font-size-xs, 0.75rem));
+    --_font-sm:      var(--empathy-map-font-sm, var(--font-size-sm, 0.875rem));
+    --_font-md:      var(--empathy-map-font-md, var(--font-size-md, 1rem));
+    --_font-xl:      var(--empathy-map-font-xl, var(--font-size-xl, 1.25rem));
+    --_space-2xs:    var(--empathy-map-space-2xs, var(--size-2xs, 0.25rem));
+    --_space-xs:     var(--empathy-map-space-xs, var(--size-xs, 0.5rem));
+    --_space-s:      var(--empathy-map-space-s, var(--size-s, 0.75rem));
+    --_space-m:      var(--empathy-map-space-m, var(--size-m, 1rem));
+    --_space-l:      var(--empathy-map-space-l, var(--size-l, 1.5rem));
+    --_radius-m:     var(--empathy-map-radius-m, var(--radius-m, 0.5rem));
+    --_radius-full:  var(--empathy-map-radius-full, var(--radius-full, 9999px));
+    --_duration:     var(--empathy-map-duration, var(--duration-normal, 200ms));
+    --_duration-fast: var(--empathy-map-duration-fast, var(--duration-fast, 100ms));
+    --_ease:         var(--empathy-map-ease, var(--ease-default, ease));
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+  /* \u2500\u2500 Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .empathy-map {
+    background: var(--_card);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius);
+    overflow: hidden;
+  }
+
+  /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .empathy-map__header {
+    padding: 20px 24px 16px 28px;
+    border-block-end: 1px solid var(--_border);
+    position: relative;
+  }
+
+  /* Left accent bar */
+  .empathy-map__header::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 4px;
+    background: linear-gradient(135deg, var(--_primary), var(--_accent-bar));
+  }
+
+  .empathy-map__header-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--_space-s);
+    flex-wrap: wrap;
+    margin-block-end: var(--_space-xs);
+  }
+
+  .empathy-map__chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+
+  /* \u2500\u2500 Chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .chip {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    padding: 2px 9px;
+    border-radius: var(--_radius-full);
+    text-decoration: none;
+    line-height: 1.6;
+  }
+
+  .chip--type {
+    color: var(--_chip-type-fg);
+    background: var(--_chip-type-bg);
+  }
+
+  /* \u2500\u2500 Persona ref \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .persona-ref {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--_muted);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .persona-ref svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  a.persona-ref:hover { color: var(--_link); text-decoration: underline; }
+
+  /* \u2500\u2500 Title & summary (slotted content) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .empathy-map__title-wrap {
+    margin-block-end: var(--_space-2xs);
+  }
+
+  .empathy-map__title {
+    font-size: var(--_font-xl);
+    font-weight: 700;
+    color: var(--_text);
+    margin: 0;
+  }
+
+  ::slotted([slot="title"]) {
+    font-size: var(--_font-xl) !important;
+    font-weight: 700 !important;
+    color: var(--_text) !important;
+    margin: 0 !important;
+  }
+
+  .empathy-map__summary-wrap {
+    max-width: 72ch;
+  }
+
+  ::slotted([slot="summary"]) {
+    font-size: var(--_font-sm) !important;
+    color: var(--_muted) !important;
+    margin: 0 !important;
+  }
+
+  /* \u2500\u2500 Grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .empathy-map__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1px;
+    background: var(--_border);
+  }
+
+  /* \u2500\u2500 Quadrant \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .quadrant {
+    background: var(--_card);
+    padding: 0;
+    position: relative;
+    display: grid;
+  }
+
+  .quadrant::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    height: 3px;
+  }
+
+  .quadrant--says::before   { background: var(--_says); }
+  .quadrant--thinks::before { background: var(--_thinks); }
+  .quadrant--does::before   { background: var(--_does); }
+  .quadrant--feels::before  { background: var(--_feels); }
+
+  .quadrant__inner {
+    display: grid;
+    padding: 16px 20px;
+    padding-block-start: 19px; /* 16 + 3px top border */
+  }
+
+  /* \u2500\u2500 Quadrant header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .quadrant__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-block-end: var(--_space-s);
+  }
+
+  .quadrant__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--_radius-m);
+    flex-shrink: 0;
+  }
+
+  .quadrant__icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .quadrant--says   .quadrant__icon { background: var(--_says-bg);   color: var(--_says); }
+  .quadrant--thinks .quadrant__icon { background: var(--_thinks-bg); color: var(--_thinks); }
+  .quadrant--does   .quadrant__icon { background: var(--_does-bg);   color: var(--_does); }
+  .quadrant--feels  .quadrant__icon { background: var(--_feels-bg);  color: var(--_feels); }
+
+  .quadrant__label {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--_muted);
+    flex: 1;
+  }
+
+  /* \u2500\u2500 Quadrant content / faces \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .quadrant__face {
+    grid-area: 1 / 1;
+    transition: opacity var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
+  }
+
+  .quadrant__face--front {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .quadrant__face--back {
+    opacity: 0;
+    transform: scale(0.95);
+    pointer-events: none;
+  }
+
+  [data-editing] .quadrant__face--front {
+    opacity: 0;
+    transform: scale(0.95);
+    pointer-events: none;
+  }
+
+  [data-editing] .quadrant__face--back {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+
+  .quadrant__content {
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--_text);
+  }
+
+  .quadrant__content p {
+    margin-block: 0 6px;
+  }
+
+  .quadrant__content p:last-child {
+    margin-block-end: 0;
+  }
+
+  /* \u2500\u2500 Slot fallback / placeholder \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .placeholder {
+    font-size: 13px;
+    color: var(--_muted);
+    font-style: italic;
+  }
+
+  ::slotted(ul),
+  ::slotted(ol) {
+    margin: 0;
+    padding-inline-start: 1.4em;
+    font-size: 14px;
+    line-height: 1.55;
+  }
+
+  /* \u2500\u2500 Emotion tags \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .emotion-tag {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px 10px;
+    border-radius: var(--_radius-full);
+    margin-block-end: 6px;
+    margin-inline-end: 4px;
+    background: color-mix(in srgb, var(--ec, #94a3b8) 15%, transparent);
+    color: var(--ec, #94a3b8);
+    border: 1px solid color-mix(in srgb, var(--ec, #94a3b8) 30%, transparent);
+  }
+
+  /* \u2500\u2500 Edit / Done buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .quadrant__edit-btn,
+  .quadrant__done-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--_border);
+    border-radius: 6px;
+    background: var(--_bg);
+    color: var(--_muted);
+    cursor: pointer;
+    line-height: 1;
+    padding: 0;
+    flex-shrink: 0;
+    transition: background var(--_duration-fast) var(--_ease), color var(--_duration-fast) var(--_ease);
+  }
+
+  .quadrant__edit-btn svg,
+  .quadrant__done-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .quadrant__edit-btn:hover,
+  .quadrant__done-btn:hover {
+    background: var(--_border);
+    color: var(--_text);
+  }
+
+  .quadrant__done-btn {
+    margin-block-start: 8px;
+    width: auto;
+    padding: 0 12px;
+    font-size: 12px;
+    font-weight: 600;
+    gap: 4px;
+  }
+
+  /* \u2500\u2500 Editor textarea \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .quadrant__editor {
+    width: 100%;
+    min-height: 100px;
+    padding: 10px 12px;
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius-m);
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--_text);
+    background: var(--_bg);
+    resize: vertical;
+  }
+
+  .quadrant__editor:focus {
+    outline: 2px solid var(--_accent);
+    outline-offset: -1px;
+    border-color: var(--_accent);
+  }
+
+  /* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .empathy-map__footer {
+    display: flex;
+    gap: 1px;
+    background: var(--_border);
+    border-block-start: 1px solid var(--_border);
+  }
+
+  .summary-row {
+    flex: 1;
+    background: var(--_card);
+    padding: 16px 20px;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .summary-row__icon {
+    line-height: 1;
+    flex-shrink: 0;
+    margin-block-start: 2px;
+    color: var(--_muted);
+  }
+
+  .summary-row__icon svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .summary-row__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .summary-row__label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--_muted);
+    margin-block-end: 4px;
+  }
+
+  .summary-row__content {
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--_text);
+  }
+
+  .summary-row__content p {
+    margin-block: 0 4px;
+  }
+
+  .summary-row__content p:last-child {
+    margin-block-end: 0;
+  }
+
+  /* \u2500\u2500 Compact variant \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  :host([compact]) .empathy-map__header {
+    padding: 14px 18px 12px 22px;
+  }
+
+  :host([compact]) .empathy-map__title {
+    font-size: 16px;
+  }
+
+  :host([compact]) .empathy-map__summary {
+    font-size: 12px;
+  }
+
+  :host([compact]) .quadrant__inner {
+    padding: 12px 14px;
+    padding-block-start: 15px;
+  }
+
+  :host([compact]) .quadrant__icon {
+    width: 26px;
+    height: 26px;
+    font-size: 13px;
+    border-radius: 6px;
+  }
+
+  :host([compact]) .quadrant__label {
+    font-size: 11px;
+  }
+
+  :host([compact]) .quadrant__content {
+    font-size: 12px;
+  }
+
+  :host([compact]) .summary-row {
+    padding: 12px 14px;
+  }
+
+  :host([compact]) .summary-row__content {
+    font-size: 12px;
+  }
+
+  /* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  @container (max-width: 500px) {
+    .empathy-map__grid {
+      grid-template-columns: 1fr;
+    }
+
+    .empathy-map__header {
+      padding: 14px 16px 12px 20px;
+    }
+
+    .empathy-map__title {
+      font-size: 17px;
+    }
+
+    .empathy-map__footer {
+      flex-direction: column;
+    }
+  }
+
+  /* \u2500\u2500 Motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  @media (prefers-reduced-motion: reduce) {
+    .quadrant__face {
+      transition: none;
+    }
+
+    .quadrant__edit-btn,
+    .quadrant__done-btn {
+      transition: none;
+    }
+  }
+
+  /* \u2500\u2500 Print \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  @media print {
+    .empathy-map {
+      break-inside: avoid;
+      border-color: var(--_border);
+    }
+
+    .quadrant__edit-btn,
+    .quadrant__done-btn {
+      display: none;
+    }
+
+    .quadrant__face--back {
+      display: none;
+    }
+
+    .empathy-map__footer {
+      flex-direction: column;
+    }
+  }
+
+  /* \u2500\u2500 Utility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .state-msg        { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
+  .state-msg--error { color: var(--color-error-text, var(--color-error, #dc2626)); }
+  code { font-family: var(--font-mono, Monaco, Menlo, monospace); font-size: 0.88em; }
+`;var _t=["says","thinks","does","feels"],wt=class extends HTMLElement{static get observedAttributes(){return["persona","persona-id","src","editable","compact"]}#e=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.__quadrants=null,this.__goals=null,this.__painPoints=null,this._editingQuadrants=new Set}get quadrants(){return this.__quadrants}set quadrants(t){this.__quadrants=t,this.isConnected&&this._render()}get goals(){return this.__goals}set goals(t){this.__goals=t,this.isConnected&&this._render()}get painPoints(){return this.__painPoints}set painPoints(t){this.__painPoints=t,this.isConnected&&this._render()}#t(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#e.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#e.get(t)||""}connectedCallback(){this.#t(),this.setAttribute("data-upgraded",""),this.hasAttribute("src")?this._loadSrc(this.getAttribute("src")):this._render()}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t){this.isConnected&&(t==="src"?this._loadSrc(this.getAttribute("src")):this._render())}get data(){let t=this.querySelector('[slot="title"]'),e=this.querySelector('[slot="summary"]');return{persona:this.getAttribute("persona")||void 0,personaId:this.getAttribute("persona-id")||void 0,title:t?.textContent?.trim()||void 0,summary:e?.textContent?.trim()||void 0,quadrants:this.__quadrants||void 0,goals:this.__goals||void 0,painPoints:this.__painPoints||void 0}}set data(t){if(!(!t||typeof t!="object")){if(t.persona&&this.setAttribute("persona",String(t.persona)),t.personaId&&this.setAttribute("persona-id",String(t.personaId)),t.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h2");e.slot="title",e.textContent=t.title,this.appendChild(e)}if(t.summary&&!this.querySelector('[slot="summary"]')){let e=document.createElement("p");e.slot="summary",e.textContent=t.summary,this.appendChild(e)}t.quadrants!=null&&(this.__quadrants=t.quadrants),t.goals!=null&&(this.__goals=t.goals),t.painPoints!=null&&(this.__painPoints=t.painPoints),this.isConnected&&this._render(),this.dispatchEvent(new CustomEvent("empathy-map:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0}))}}editQuadrant(t){_t.includes(t)&&this.hasAttribute("editable")&&this._openEdit(t)}closeQuadrant(t){_t.includes(t)&&this._closeEdit(t)}async _loadSrc(t){if(!(!t||!this.shadowRoot)){this.shadowRoot.innerHTML=`<style>${et}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let r=await e.json();if(r.persona&&this.setAttribute("persona",r.persona),r.personaId&&this.setAttribute("persona-id",r.personaId),r.title&&!this.querySelector('[slot="title"]')){let a=document.createElement("h2");a.slot="title",a.textContent=r.title,this.appendChild(a)}if(r.summary&&!this.querySelector('[slot="summary"]')){let a=document.createElement("p");a.slot="summary",a.textContent=r.summary,this.appendChild(a)}this.__quadrants=r.quadrants||null,this.__goals=r.goals||null,this.__painPoints=r.painPoints||null,this._render()}catch(e){if(!this.shadowRoot)return;let r=e instanceof Error?e.message:String(e);this.shadowRoot.innerHTML=`<style>${et}</style><div class="state-msg state-msg--error">Could not load empathy map: ${m(r)}</div>`}}}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",r=this.hasAttribute("compact"),a=this.hasAttribute("editable"),s=!!this.querySelector('[slot="title"]')||this.#e.has("title"),i=!!this.querySelector('[slot="summary"]')||this.#e.has("summary"),n=this.__goals?.length||this.querySelector('[slot="goals"]'),c=this.__painPoints?.length||this.querySelector('[slot="pain-points"]'),d=`<style>${et}</style>
+      <article class="empathy-map${r?" empathy-map--compact":""}">
+
+        <header class="empathy-map__header">
+          <div class="empathy-map__header-top">
+            <div class="empathy-map__chips">
+              <span class="chip chip--type">Empathy Map</span>
+            </div>
+            ${t?`
+              <div class="empathy-map__persona">
+                ${e?`<a class="persona-ref" href="#${m(e)}">${k(E.user)} ${m(t)}</a>`:`<span class="persona-ref">${k(E.user)} ${m(t)}</span>`}
+              </div>`:""}
+          </div>
+          <div class="empathy-map__title-wrap">
+            <slot name="title"><h2 class="empathy-map__title">Empathy Map</h2></slot>
+          </div>
+          ${i?'<div class="empathy-map__summary-wrap"><slot name="summary"></slot></div>':""}
+        </header>
+
+        <div class="empathy-map__grid">
+          ${_t.map(u=>this._renderQuadrant(u,a)).join("")}
+        </div>
+
+        ${n||c?`
+          <footer class="empathy-map__footer">
+            ${this._renderSummaryRow("goals",k(E.target),"Goals")}
+            ${this._renderSummaryRow("pain-points",k(E.alertTriangle),"Pain Points")}
+          </footer>
+        `:""}
+
+      </article>`,l=()=>{this.shadowRoot&&(this.shadowRoot.innerHTML=d,a&&this._bindEditListeners())};this.shadowRoot?.querySelector("article")?M(this,l,"em-vt"):l(),this.dispatchEvent(new CustomEvent("empathy-map:ready",{bubbles:!0,composed:!0,detail:{title:this.querySelector('[slot="title"]')?.textContent?.trim()||"Empathy Map",persona:t}}))}_renderQuadrant(t,e){let r=ft[t],a=this.__quadrants?.[t],s=this._editingQuadrants.has(t),i=a&&a.length?t==="feels"?a.map(c=>this._renderEmotion(c)).join(""):a.map(c=>`<p>${m(c)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">Add ${r.label.toLowerCase()} items\u2026</p></slot>`,n=a?.length?a.join(`
+`):"";return`
+      <section class="quadrant quadrant--${t}"${s?" data-editing":""}>
+        <div class="quadrant__inner">
+          <div class="quadrant__header">
+            <div class="quadrant__icon" aria-hidden="true">${k(r.icon)}</div>
+            <span class="quadrant__label">${r.label}</span>
+            ${e?`<button class="quadrant__edit-btn" data-quadrant="${t}"
+              aria-label="Edit ${r.label}" title="Edit ${r.label}">${k(E.pencil)}</button>`:""}
+          </div>
+          <div class="quadrant__faces">
+            <div class="quadrant__face quadrant__face--front"${s?" inert":""}>
+              <div class="quadrant__content">
+                ${i}
+              </div>
+            </div>
+            ${e?`
+              <div class="quadrant__face quadrant__face--back"${s?"":" inert"}>
+                <textarea class="quadrant__editor" data-quadrant="${t}"
+                  placeholder="One item per line\u2026"
+                  aria-label="Edit ${r.label} items">${m(n)}</textarea>
+                <button class="quadrant__done-btn" data-quadrant="${t}"
+                  aria-label="Done editing ${r.label}">${k(E.check)} Done</button>
+              </div>
+            `:""}
+          </div>
+        </div>
+      </section>`}_renderEmotion(t){let e=t.toLowerCase().trim(),r=R[e];return r?`<span class="emotion-tag" style="--ec:${r.color}"><span role="img" aria-label="${m(t)}">${r.emoji}</span> ${m(t)}</span>`:`<p>${m(t)}</p>`}_renderSummaryRow(t,e,r){let s=(t==="pain-points"?"painPoints":t)==="painPoints"?this.__painPoints:this.__goals,i=s?.length?s.map(n=>`<p>${m(n)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">No ${r.toLowerCase()} specified.</p></slot>`;return`
+      <div class="summary-row">
+        <span class="summary-row__icon" aria-hidden="true">${e}</span>
+        <div class="summary-row__body">
+          <div class="summary-row__label">${r}</div>
+          <div class="summary-row__content">${i}</div>
+        </div>
+      </div>`}_bindEditListeners(){let t=this.shadowRoot;t&&(t.querySelectorAll(".quadrant__edit-btn").forEach(e=>{e.addEventListener("click",()=>{let r=e.dataset.quadrant;r&&this._openEdit(r)})}),t.querySelectorAll(".quadrant__done-btn").forEach(e=>{e.addEventListener("click",()=>{let r=e.dataset.quadrant;r&&this._closeEdit(r)})}),t.querySelectorAll(".quadrant__editor").forEach(e=>{let r=e;r.addEventListener("keydown",a=>{let s=a;if(s.key==="Escape"){s.preventDefault();let i=r.dataset.quadrant;i&&this._closeEdit(i)}})}))}_openEdit(t){this._editingQuadrants.add(t);let e=this.shadowRoot?.querySelector(`.quadrant--${t}`);if(!e)return;e.setAttribute("data-editing","");let r=e.querySelector(".quadrant__face--front"),a=e.querySelector(".quadrant__face--back");r&&r.setAttribute("inert",""),a&&a.removeAttribute("inert");let s=e.querySelector(".quadrant__editor");if(s){let i=this.__quadrants?.[t];if(i?.length)s.value=i.join(`
+`);else{let n=e.querySelector(`slot[name="${t}"]`);if(n){let c=n.assignedElements();if(c.length){let d=[];c.forEach(l=>{let u=l.querySelectorAll("li");u.length?u.forEach(p=>d.push(p.textContent?.trim()??"")):d.push(l.textContent?.trim()??"")}),s.value=d.filter(Boolean).join(`
+`)}}}s.focus()}}_closeEdit(t){let e=this.shadowRoot?.querySelector(`.quadrant--${t}`);if(!e)return;let r=e.querySelector(".quadrant__editor");if(r){let i=r.value.split(`
+`).map(c=>c.trim()).filter(Boolean);this.__quadrants||(this.__quadrants={}),this.__quadrants[t]=i;let n=e.querySelector(".quadrant__content");if(n)if(i.length)n.innerHTML=t==="feels"?i.map(c=>this._renderEmotion(c)).join(""):i.map(c=>`<p>${m(c)}</p>`).join("");else{let c=ft[t];n.innerHTML=`<p class="placeholder">Add ${c.label.toLowerCase()} items\u2026</p>`}}this._editingQuadrants.delete(t),e.removeAttribute("data-editing");let a=e.querySelector(".quadrant__face--front"),s=e.querySelector(".quadrant__face--back");a&&a.removeAttribute("inert"),s&&s.setAttribute("inert",""),this.dispatchEvent(new CustomEvent("empathy-map:update",{bubbles:!0,composed:!0,detail:{quadrant:t,items:this.__quadrants?.[t]||[]}}))}};w("empathy-map",wt);var C=class extends HTMLElement{#e=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,r,a){t.addEventListener(e,r,a),this.#e.push(()=>t.removeEventListener(e,r,a))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let r=this.#t.states;try{e?r.add(t):r.delete(t)}catch{let a=`--${t}`;e?r.add(a):r.delete(a)}}_adoptInternals(t){this.#t||(this.#t=t)}};function rt({newItems:o,nodes:t,keyOf:e,renderItem:r,containerFor:a}){let s=[],i=[],n=[],c=new Set;for(let l of o)c.add(e(l));for(let[l,u]of[...t])c.has(l)||(u.remove(),t.delete(l),n.push(l));let d=new Map;for(let l of o){let u=e(l),p=t.get(u)||null,h=a(l,p);d.has(h)||d.set(h,[]),d.get(h)?.push({item:l,key:u,existing:p})}for(let[l,u]of d)for(let p=0;p<u.length;p++){let{item:h,key:f,existing:b}=u[p],v=b;v?(v.parentElement!==l||l.children[p]!==v)&&i.push(f):(v=r(h),t.set(f,v),s.push(f));let x=l.children[p];x!==v&&l.insertBefore(v,x||null)}return{added:s,moved:i,removed:n}}var At=class o extends C{static QUADRANTS=["quick-wins","big-bets","fill-ins","money-pit"];static LABELS={"quick-wins":"Quick Wins","big-bets":"Big Bets","fill-ins":"Fill-Ins","money-pit":"Money Pit"};static DESCRIPTIONS={"quick-wins":"High impact \xB7 Low effort","big-bets":"High impact \xB7 High effort","fill-ins":"Low impact \xB7 Low effort","money-pit":"Low impact \xB7 High effort"};static#e=0;static get observedAttributes(){return["src","compact","title"]}#t=null;#r={};#a=null;#s="";#o=null;setup(){this.#s=`ie-${++o.#e}`;let t=[...this.querySelectorAll(":scope > [data-quadrant], :scope > [draggable]")],e=document.createElement("div");e.className="ie-wrapper";let r=document.createElement("div");r.className="ie-y-label",r.setAttribute("aria-hidden","true"),r.textContent="Impact \u2191";let a=document.createElement("div");a.style.cssText="display:flex;flex-direction:column;flex:1;min-width:0;";let s=document.createElement("div");s.className="ie-grid",s.setAttribute("role","region"),s.setAttribute("aria-label","Impact-Effort prioritization matrix");let i=document.createElement("div");i.className="ie-x-label",i.setAttribute("aria-hidden","true"),i.textContent="Effort \u2192";for(let l of o.QUADRANTS){let u=document.createElement("section");u.className="ie-quadrant",u.dataset.quadrantZone=l,u.setAttribute("aria-label",`${o.LABELS[l]}: ${o.DESCRIPTIONS[l]}`);let p=document.createElement("header");p.className="ie-quadrant-label",p.innerHTML=`${o.LABELS[l]}<br><span class="ie-quadrant-desc">${o.DESCRIPTIONS[l]}</span>`;let h=document.createElement("drag-surface");h.setAttribute("group",this.#s),h.setAttribute("aria-label",o.LABELS[l]),h.setAttribute("data-layout","stack"),h.setAttribute("data-layout-gap","xs"),u.appendChild(p),u.appendChild(h),s.appendChild(u),this.#r[l]=h}t.forEach((l,u)=>{let p=l,h=p.getAttribute("data-quadrant")||"quick-wins",f=this.#r[h]||this.#r["quick-wins"];p.hasAttribute("draggable")||p.setAttribute("draggable","true"),p.hasAttribute("data-id")||(p.dataset.id=`ie-item-${u}`),f.appendChild(p)});let n=document.createElement("div");n.className="ie-live-region",n.setAttribute("role","status"),n.setAttribute("aria-live","polite"),n.setAttribute("aria-atomic","true");let c=this.getAttribute("title");if(c){let l=document.createElement("h3");l.className="ie-title",l.textContent=c,this.prepend(l)}a.appendChild(s),a.appendChild(i),e.appendChild(r),e.appendChild(a),this.appendChild(e),this.appendChild(n),this.#t=s,this.#a=n,this.#o=e,this.listen(this,"drag-surface:transfer",l=>{let{item:u,fromSurface:p,toSurface:h}=l.detail,f=this.#l(p),b=this.#l(h);!f||!b||(u.setAttribute("data-quadrant",b),this.#p(`Moved ${this.#d(u)} to ${o.LABELS[b]}`),this.dispatchEvent(new CustomEvent("impact-effort:move",{bubbles:!0,detail:{itemId:u.dataset.id,from:f,to:b,item:u}})))});let d=this.getAttribute("src");d&&this.#c(d),this.#f()}teardown(){this.#o&&(this.#o.remove(),this.#o=null),this.#a&&(this.#a.remove(),this.#a=null),this.#t=null,this.#r={},this.#n.clear(),this.#i=[]}#i=[];#n=new Map;get items(){if(this.#i.length)return this.#i;let t=[];for(let[e,r]of Object.entries(this.#r))for(let a of r.querySelectorAll(':scope > [draggable="true"]'))t.push({id:a.getAttribute("data-id")||void 0,quadrant:e,text:a.textContent?.trim()||void 0});return t}set items(t){if(!this.#t)return;let e=Array.isArray(t)?t:[];rt({newItems:e,nodes:this.#n,keyOf:r=>r.id??`${r.quadrant}:${r.text}`,renderItem:r=>{let a=this;if(typeof a.renderItem=="function"){let i=a.renderItem(r);if(i instanceof Element)return i.hasAttribute("draggable")||i.setAttribute("draggable","true"),i.hasAttribute("data-id")||i.setAttribute("data-id",String(r.id??"")),i}let s=document.createElement("article");return s.className="ie-card",s.setAttribute("draggable","true"),r.id&&s.setAttribute("data-id",String(r.id)),s.textContent=r.text||r.id||"",s},containerFor:r=>this.#r[r.quadrant]||this.#r["quick-wins"]}),this.#i=e,this.dispatchEvent(new CustomEvent("impact-effort:items-changed",{detail:{items:e,source:"property"},bubbles:!0}))}attributeChangedCallback(t,e,r){this.hasAttribute("data-upgraded")&&t==="src"&&r&&r!==e&&this.#c(r)}async#c(t){try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let r=await e.json();if(!Array.isArray(r))return;let a=()=>{for(let s of o.QUADRANTS){let i=this.#r[s];if(i)for(let n of[...i.querySelectorAll("[draggable]")])n.remove()}r.forEach((s,i)=>{let n=s.quadrant||"quick-wins",c=s.id||`ie-item-${i}`,d;s.persona||s.action||s.storyId?(d=document.createElement("user-story"),d.setAttribute("detail","minimal"),s.storyId&&d.setAttribute("story-id",s.storyId),s.persona&&d.setAttribute("persona",s.persona),s.action&&d.setAttribute("action",s.action),s.benefit&&d.setAttribute("benefit",s.benefit),s.priority&&d.setAttribute("priority",s.priority),s.status&&d.setAttribute("status",s.status),s.points&&d.setAttribute("points",String(s.points))):(d=document.createElement("article"),d.textContent=s.label||s.text||""),d.setAttribute("draggable","true"),d.dataset.id=c,d.dataset.quadrant=n,(this.#r[n]||this.#r["quick-wins"]).appendChild(d)})};this.hasAttribute("data-upgraded")&&this.#t?M(this,a,"ie-vt"):a(),this.#f()}catch(e){console.warn(`[impact-effort] Failed to load src="${t}":`,e)}}#l(t){for(let[e,r]of Object.entries(this.#r))if(r===t)return e;return null}#p(t){let e=this.#a;e&&(e.textContent="",requestAnimationFrame(()=>{e.textContent=t}))}#d(t){return t.dataset.id||t.textContent.trim().slice(0,40)}#f(){let t={};for(let e of o.QUADRANTS){let r=this.#r[e];t[e]=r?r.querySelectorAll('[draggable="true"]').length:0}this.dispatchEvent(new CustomEvent("impact-effort:ready",{bubbles:!0,detail:{quadrantCounts:t}}))}};w("impact-effort",At);var kt=class o extends C{static#e=0;setup(){this.#d=`qg-${++o.#e}`;let t=this.getAttribute("x-label")||"",e=this.getAttribute("y-label")||"",r=this.getAttribute("x-low")||"Low",a=this.getAttribute("x-high")||"High",s=this.getAttribute("y-low")||"Low",i=this.getAttribute("y-high")||"High",n=[this.getAttribute("q1-label")||"Q1",this.getAttribute("q2-label")||"Q2",this.getAttribute("q3-label")||"Q3",this.getAttribute("q4-label")||"Q4"],c=this.hasAttribute("draggable"),d=[...this.querySelectorAll(":scope > [data-quadrant], :scope > [data-x][data-y]")],l=document.createElement("section");l.className="qg-wrapper",l.setAttribute("role","region"),l.setAttribute("aria-label",`${e} \xD7 ${t} quadrant grid`);let u=document.createElement("header");u.className="qg-y-label",u.setAttribute("aria-hidden","true"),u.textContent=`\u2191 ${e}`;let p=document.createElement("aside");p.className="qg-y-scale",p.setAttribute("aria-hidden","true"),p.innerHTML=`<span>${i}</span><span>${s}</span>`;let h=document.createElement("div");h.className="qg-grid";let f=document.createElement("aside");f.className="qg-x-scale",f.setAttribute("aria-hidden","true"),f.innerHTML=`<span>${r}</span><span>${a}</span>`;let b=document.createElement("footer");b.className="qg-x-label",b.setAttribute("aria-hidden","true"),b.textContent=`${t} \u2192`;for(let x=0;x<4;x++){let _=document.createElement("section");_.className="qg-quadrant",_.dataset.quadrantZone=String(x),_.setAttribute("aria-label",n[x]);let g=document.createElement("header");if(g.className="qg-quadrant-label",g.textContent=n[x],_.appendChild(g),c){let y=document.createElement("drag-surface");y.setAttribute("group",this.#d),y.setAttribute("aria-label",n[x]),y.setAttribute("data-layout","stack"),y.setAttribute("data-layout-gap","xs"),_.appendChild(y),this.#f[x]=y}else{let y=document.createElement("ul");y.className="qg-items",_.appendChild(y),this.#u[x]=y}h.appendChild(_),this.#m[x]=_}d.forEach((x,_)=>{let g=x,y=this.#n(g),A=c?this.#f[y]:this.#u[y];if(c&&(g.hasAttribute("draggable")||g.setAttribute("draggable","true")),g.hasAttribute("data-id")||(g.dataset.id=`qg-item-${_}`),g.hasAttribute("data-x")&&g.hasAttribute("data-y")){let S=parseFloat(g.getAttribute("data-x")??""),$=parseFloat(g.getAttribute("data-y")??"");if(Number.isFinite(S)&&Number.isFinite($)){let T=y===0||y===3?(S-.5)*2:S*2,z=y===0||y===1?($-.5)*2:$*2;if(g.style.setProperty("--qg-local-x",T.toFixed(4)),g.style.setProperty("--qg-local-y",z.toFixed(4)),g.classList.add("qg-pinned"),!g.style.getPropertyValue("--qg-pin-hue")){let N=g.dataset.id||(g.textContent||"").trim();g.style.setProperty("--qg-pin-hue",`${o.#o(N)}deg`)}}}if(c)A.appendChild(g);else{let S=document.createElement("li");S.appendChild(g),A.appendChild(S)}});let v=document.createElement("div");v.className="qg-live-region visually-hidden",v.setAttribute("role","status"),v.setAttribute("aria-live","polite"),l.appendChild(u),l.appendChild(p),l.appendChild(h),l.appendChild(f),l.appendChild(b),this.appendChild(l),this.appendChild(v),this.#h=h,this.#b=v,this.#v=n,c&&this.listen(this,"drag-surface:transfer",this.#i),this.#t()}#t(){if(typeof ResizeObserver>"u")return;let t=e=>{let r=e.offsetWidth,a=e.offsetHeight;r>0&&e.style.setProperty("--qg-pin-half-w",`${r/2}px`),a>0&&e.style.setProperty("--qg-pin-half-h",`${a/2}px`)};this.#y=new ResizeObserver(e=>{for(let r of e)t(r.target);this.#r()});for(let e of this.querySelectorAll(".qg-pinned"))this.#y.observe(e);this.#r()}#r(){this.#g||(this.#g=requestAnimationFrame(()=>{this.#g=0,this.#a()}))}#a(){for(let e of this.querySelectorAll(".qg-pinned")){let r=e;r.classList.remove("qg-clustered"),r.style.removeProperty("--qg-cluster-i"),r.style.removeProperty("--qg-cluster-n"),delete r.dataset.cluster,r.dataset.qgTabbed!==void 0&&(r.removeAttribute("tabindex"),delete r.dataset.qgTabbed)}let t=0;for(let e=0;e<4;e++){let r=this.#m[e];if(!r)continue;let a=[...r.querySelectorAll(".qg-pinned")];if(a.length<2)continue;let s=a.map(l=>l.getBoundingClientRect()),i=Array.from({length:a.length},(l,u)=>u),n=l=>i[l]===l?l:i[l]=n(i[l]),c=(l,u)=>{let p=n(l),h=n(u);p!==h&&(i[p]=h)};for(let l=0;l<a.length;l++)for(let u=l+1;u<a.length;u++)o.#s(s[l],s[u])&&c(l,u);let d=new Map;for(let l=0;l<a.length;l++){let u=n(l);d.has(u)||d.set(u,[]),d.get(u)?.push(l)}for(let l of d.values()){if(l.length<2)continue;let u=`c${++t}`;l.forEach((p,h)=>{let f=a[p];f.classList.add("qg-clustered"),f.dataset.cluster=u,f.style.setProperty("--qg-cluster-i",String(h)),f.style.setProperty("--qg-cluster-n",String(l.length)),!f.hasAttribute("tabindex")&&!f.matches("a, button, [contenteditable]")&&(f.setAttribute("tabindex","0"),f.dataset.qgTabbed="")})}}}teardown(){this.#y?.disconnect(),this.#y=null,this.#g&&cancelAnimationFrame(this.#g),this.#g=0}static#s(t,e){return!(t.right<=e.left||e.right<=t.left||t.bottom<=e.top||e.bottom<=t.top)}static#o(t){let e=5381;for(let r=0;r<t.length;r++)e=(e<<5)+e+t.charCodeAt(r)|0;return(e%360+360)%360}#i=t=>{let{item:e,fromSurface:r,toSurface:a}=t.detail,s=this.#c(r),i=this.#c(a);s==null||i==null||(e.setAttribute("data-quadrant",String(i)),this.#p(`Moved ${this.#l(e)} to ${this.#v[i]}`),this.dispatchEvent(new CustomEvent("quadrant-grid:move",{bubbles:!0,detail:{item:e,itemId:e.dataset.id,from:s,to:i}})))};#n(t){let e=parseInt(t.getAttribute("data-quadrant"),10);if(e>=0&&e<=3)return e;if(t.hasAttribute("data-x")&&t.hasAttribute("data-y")){let r=parseFloat(t.getAttribute("data-x")),a=parseFloat(t.getAttribute("data-y"));return o.quadrantFor(r,a)}return 0}static quadrantFor(t,e){let r=t>=.5,a=e>=.5;return a&&r?0:a&&!r?1:!a&&!r?2:3}#c(t){for(let e=0;e<4;e++)if(this.#f[e]===t)return e;return null}#l(t){return(t.textContent||"").trim().split(`
+`)[0]||"item"}#p(t){this.#b&&(this.#b.textContent=t)}#d="";#f={};#u={};#m={};#h=null;#b=null;#v=[];#y=null;#g=0};w("quadrant-grid",kt);var ie=5,Ct=class o extends C{setup(){let t=this.querySelector(":scope > template"),e=t?o.#t(t):[];if(this.hasAttribute("src")){this.#e(this.getAttribute("src"));return}this.#r(e)}async#e(t){try{let r=await(await fetch(t)).json();this.#r(Array.isArray(r)?r:[])}catch(e){console.warn("risk-register: failed to load src",t,e),this.#r([])}}static#t(t){let e=[],r=t.content.querySelectorAll("tr");for(let a of r){let s=[...a.children],i=s[0]?.textContent?.trim()||"",n=a.getAttribute("data-id")||i.toLowerCase().replace(/\s+/g,"-")||`risk-${e.length}`;e.push({id:n,title:i,likelihood:parseInt(s[1]?.textContent??"",10)||0,impact:parseInt(s[2]?.textContent??"",10)||0,owner:s[3]?.textContent?.trim()||"",mitigation:s[4]?.textContent?.trim()||""})}return e}#r(t){this.#i=t,[...this.children].forEach(a=>{a.tagName!=="TEMPLATE"&&a.remove()});let e=this.getAttribute("label");if(e){let a=document.createElement("header");a.className="rr-label",a.textContent=e,this.appendChild(a)}let r=document.createElement("div");r.className="rr-layout",r.appendChild(this.#a(t)),r.appendChild(this.#s(t)),this.appendChild(r),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent("risk-register:ready",{bubbles:!0,detail:{count:t.length}}))})}#a(t){let e=document.createElement("data-table"),r=document.createElement("table");return r.innerHTML=`
+      <thead>
+        <tr>
+          <th data-sort="string">Title</th>
+          <th data-sort="number">Likelihood</th>
+          <th data-sort="number">Impact</th>
+          <th data-sort="number" data-rollup="product" data-heatmap="low-good">Severity</th>
+          <th data-sort="string">Owner</th>
+          <th data-sort="string">Mitigation</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${t.map(a=>`
+          <tr data-id="${o.#o(a.id)}">
+            <td>${o.#o(a.title)}</td>
+            <td>${a.likelihood||""}</td>
+            <td>${a.impact||""}</td>
+            <td></td>
+            <td>${o.#o(a.owner)}</td>
+            <td>${o.#o(a.mitigation)}</td>
+          </tr>
+        `).join("")}
+      </tbody>
+    `,e.appendChild(r),e}#s(t){let e=document.createElement("quadrant-grid");e.setAttribute("x-label","Likelihood"),e.setAttribute("y-label","Impact"),e.setAttribute("x-low","Rare"),e.setAttribute("x-high","Likely"),e.setAttribute("y-low","Minor"),e.setAttribute("y-high","Severe"),e.setAttribute("q1-label","Avoid"),e.setAttribute("q2-label","Plan"),e.setAttribute("q3-label","Accept"),e.setAttribute("q4-label","Mitigate");for(let r of t){if(!r.likelihood||!r.impact)continue;let a=document.createElement("span"),s=Math.min(1,Math.max(0,r.likelihood/ie)),i=Math.min(1,Math.max(0,r.impact/ie));a.setAttribute("data-x",s.toFixed(3)),a.setAttribute("data-y",i.toFixed(3)),a.setAttribute("data-id",r.id),a.setAttribute("title",`${r.title} \u2014 likelihood ${r.likelihood}, impact ${r.impact}`),a.textContent=r.title,e.appendChild(a)}return e}static#o(t){return String(t??"").replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[e])}#i=[];get rows(){return[...this.#i]}set rows(t){this.#r(Array.isArray(t)?t:[])}};w("risk-register",Ct);var Et=class o extends C{setup(){let t=this.getAttribute("rows"),e=this.getAttribute("cols"),r=this.getAttribute("link-attr");return!t||!e||!r?(console.warn("traceability-matrix: requires rows, cols, and link-attr attributes"),!1):(queueMicrotask(()=>this.#e(t,e,r)),!0)}#e(t,e,r){let a=[...document.querySelectorAll(t)].filter(g=>g!==this&&!this.contains(g)),s=[...document.querySelectorAll(e)].filter(g=>g!==this&&!this.contains(g));if(!a.length||!s.length){this.#a();return}let i=this.getAttribute("row-label")||"",n=this.getAttribute("cell-mark")||"\u2713",c=this.hasAttribute("flag-orphans"),d=[],l=new WeakMap,u=new WeakMap;for(let g of a){let y=o.#s(g.getAttribute(r));for(let A of y){let S=s.find($=>$.id===A);S&&(d.push({rowEl:g,colEl:S}),l.set(g,(l.get(g)||0)+1),u.set(S,(u.get(S)||0)+1))}}let p=document.createElement("data-table"),h=document.createElement("table"),f=document.createElement("thead"),b=document.createElement("tr"),v=document.createElement("th");v.setAttribute("data-sort","string"),v.textContent=i,b.appendChild(v);for(let g of s){let y=document.createElement("th");y.setAttribute("data-sort","number"),y.textContent=o.#o(g),y.dataset.colId=g.id||"",c&&!u.get(g)&&(y.dataset.orphan=""),b.appendChild(y)}f.appendChild(b),h.appendChild(f);let x=document.createElement("tbody");for(let g of a){let y=document.createElement("tr");y.dataset.rowId=g.id||"",c&&!l.get(g)&&(y.dataset.orphan="");let A=document.createElement("th");A.scope="row",A.textContent=o.#o(g),y.appendChild(A);let S=o.#s(g.getAttribute(r));for(let $ of s){let T=document.createElement("td"),z=S.includes($.id);T.setAttribute("data-sort-value",z?"1":"0"),z?(T.dataset.linked="",T.textContent=n,T.setAttribute("aria-label","linked")):T.setAttribute("aria-label","not linked"),T.dataset.colId=$.id||"",y.appendChild(T)}x.appendChild(y)}h.appendChild(x),p.appendChild(h),[...this.children].forEach(g=>{g.tagName!=="TEMPLATE"&&g.remove()});let _=this.getAttribute("label");if(_){let g=document.createElement("header");g.className="tm-label",g.textContent=_,this.appendChild(g)}this.appendChild(p),this.#i=p,this.#n=new Map(a.map(g=>[g.id,g])),this.#c=new Map(s.map(g=>[g.id,g])),this.listen(p,"click",this.#t),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent("traceability-matrix:ready",{bubbles:!0,detail:{rowCount:a.length,colCount:s.length,linkCount:d.length}}))})}#t=t=>{let e=t.target.closest('td, th[scope="row"]');if(!e)return;let r=e.closest("tr");if(!r)return;let a=r.dataset.rowId,s=e.dataset.colId,i=a?this.#n.get(a):null,n=s?this.#c.get(s):null,c=e.hasAttribute("data-state-highlighted");if(this.#r(),c){this.dispatchEvent(new CustomEvent("traceability-matrix:highlight",{bubbles:!0,detail:{rowEl:i,colEl:n,on:!1}}));return}e.setAttribute("data-state-highlighted",""),i&&i.setAttribute("data-state-highlighted",""),n&&n!==i&&n.setAttribute("data-state-highlighted",""),r.setAttribute("data-state-highlighted",""),this.dispatchEvent(new CustomEvent("traceability-matrix:highlight",{bubbles:!0,detail:{rowEl:i,colEl:n,on:!0}}))};#r(){this.#i&&(this.#i.querySelectorAll("[data-state-highlighted]").forEach(t=>t.removeAttribute("data-state-highlighted")),document.querySelectorAll("[data-state-highlighted]").forEach(t=>{(this.#n.has(t.id)||this.#c.has(t.id))&&t.removeAttribute("data-state-highlighted")}))}#a(){[...this.children].forEach(e=>{e.tagName!=="TEMPLATE"&&e.remove()});let t=document.createElement("p");t.className="tm-empty",t.textContent="No matching elements found for this matrix.",this.appendChild(t)}static#s(t){return t?t.split(",").map(e=>e.trim()).filter(Boolean):[]}static#o(t){return t.getAttribute("data-matrix-label")||t.id||(t.textContent||"").trim().split(`
+`)[0].slice(0,60)||"(unnamed)"}#i=null;#n=new Map;#c=new Map};w("traceability-matrix",Et);var Ye=864e5,St=class o extends C{setup(){let t=this.getAttribute("start"),e=this.getAttribute("end"),r=parseFloat(this.getAttribute("total")||"");if(!t||!e||!Number.isFinite(r))return console.warn("burndown-chart: requires start, end, and total attributes"),!1;let a=o.#r(t),s=o.#r(e);if(!a||!s||s<a)return console.warn("burndown-chart: start/end dates invalid",t,e),!1;let i=(this.getAttribute("weekends")||"include")!=="exclude",n=this.getAttribute("unit")||"points",c=this.getAttribute("label")||"",d=this.querySelector(":scope > template"),l=d?o.#t(d):[],u=l.filter(b=>b.delta!==0),p=o.#s(a,s),h=o.#o(p,r,i),f=o.#i(p,l);return this.#e({label:c,unit:n,dayLabels:p,actual:f,ideal:h,scopeChanges:u}),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent("burndown-chart:ready",{bubbles:!0,detail:{dayCount:p.length,total:r,scopeChanges:u.length}}))}),!0}#e({label:t,unit:e,dayLabels:r,actual:a,ideal:s,scopeChanges:i}){if([...this.children].forEach(u=>{u.tagName!=="TEMPLATE"&&u.remove()}),t){let u=document.createElement("header");u.className="bdc-label",u.textContent=t,this.appendChild(u)}let n=document.createElement("chart-wc");n.setAttribute("data-type","line"),n.setAttribute("data-legend",""),n.setAttribute("data-tooltip",""),n.setAttribute("data-label-x","Day"),n.setAttribute("data-label-y",e);let c={},d={};r.forEach((u,p)=>{c[u]=s[p],a[p]!==null&&(d[u]=a[p])});let l=[{name:"Actual",values:d},{name:"Ideal",values:c}];if(n.setAttribute("data-values",JSON.stringify(l)),this.appendChild(n),i.length){let u=document.createElement("aside");u.className="bdc-scope-changes";let p=document.createElement("h4");p.textContent="Scope changes",u.appendChild(p);let h=document.createElement("ul");for(let f of i){let b=document.createElement("li"),v=f.delta>0?"+":"";b.innerHTML=`<time datetime="${f.date}">${f.date}</time>: <strong>${v}${f.delta} ${e}</strong>`,h.appendChild(b)}u.appendChild(h),this.appendChild(u)}}static#t(t){let e=[],r=t.content.querySelectorAll("tr");for(let a of r){let s=[...a.children],i=s[0]?.textContent?.trim(),n=parseFloat(s[1]?.textContent??""),c=parseFloat(s[2]?.textContent??"0")||0;!i||!Number.isFinite(n)||e.push({date:i,remaining:n,delta:c})}return e}static#r(t){let e=String(t).match(/^(\d{4})-(\d{2})-(\d{2})/);return e?new Date(Number(e[1]),Number(e[2])-1,Number(e[3])):null}static#a(t){let e=String(t.getMonth()+1).padStart(2,"0"),r=String(t.getDate()).padStart(2,"0");return`${t.getFullYear()}-${e}-${r}`}static#s(t,e){let r=[];for(let a=t.getTime();a<=e.getTime();a+=Ye)r.push(o.#a(new Date(a)));return r}static#o(t,e,r){let a=l=>{let u=o.#r(l);if(!u)return!1;let p=u.getDay();return p===0||p===6},s=t.map((l,u)=>({d:l,i:u,weekend:a(l)})).filter(l=>r||!l.weekend),i=s.length>1?e/(s.length-1):0,n=new Array(t.length).fill(null),c=e,d=0;for(let l=0;l<t.length;l++){let u=a(t[l]);r||!u?(n[l]=Math.max(0,e-i*d),d++,c=n[l]):n[l]=c}return n}static#i(t,e){let r=new Map(e.map(a=>[a.date,a.remaining]));return t.map(a=>r.has(a)?r.get(a):null)}};w("burndown-chart",St);var $t=class o extends C{setup(){let t=this.getAttribute("start"),e=this.getAttribute("end");if(!t||!e)return console.warn("product-roadmap: start and end attributes required"),!1;let r=o.#u(t,"start"),a=o.#u(e,"end");if(!r||!a||a<=r)return console.warn("product-roadmap: invalid start/end",t,e),!1;this.#h=r,this.#b=a,this.#v=a.getTime()-r.getTime(),this.#y=this.getAttribute("view")==="month"?"month":"quarter",this.#g=this.hasAttribute("editable");let s=[...this.querySelectorAll(":scope > section[data-lane]")];return s.length?(this.#x=s,this.#e(),!0):(console.warn("product-roadmap: no <section data-lane> children found"),!1)}attributeChangedCallback(){this.isConnected&&this.#x.length&&this.#e()}#e(){[...this.children].forEach(a=>{this.#x.includes(a)||a.remove()}),this.#x.forEach(a=>{a.hidden=!0});let t=document.createElement("div");t.className="rm-wrapper";let e=this.#t();t.appendChild(e);let r=document.createElement("div");r.className="rm-lanes";for(let a of this.#x){let s=a.getAttribute("data-lane")||"",i=document.createElement("section");i.className="rm-lane",i.dataset.lane=s;let n=document.createElement("header");n.className="rm-lane-label",n.textContent=s,i.appendChild(n);let c=document.createElement("div");c.className="rm-track",c.dataset.lane=s;let d=[...a.querySelectorAll(":scope > article[data-start][data-end]")];for(let l of d){let u=this.#r(l,s);u&&c.appendChild(u)}this.#g&&(c.addEventListener("dragover",this.#n),c.addEventListener("drop",this.#c)),i.appendChild(c),r.appendChild(i)}if(t.appendChild(r),this.hasAttribute("today-marker")&&this.#h&&this.#b){let a=new Date;if(a>=this.#h&&a<=this.#b){let s=document.createElement("div");s.className="rm-today",s.style.setProperty("--rm-x",this.#l(a).toFixed(4)),s.title=`Today: ${o.#m(a)}`,r.appendChild(s)}}this.appendChild(t),this.#w=t}#t(){let t=document.createElement("header");t.className="rm-axis";let e=this.#f();for(let r of e){let a=document.createElement("div");a.className="rm-tick",a.style.setProperty("--rm-x",r.startFraction.toFixed(4)),a.style.setProperty("--rm-w",(r.endFraction-r.startFraction).toFixed(4)),a.textContent=r.label,t.appendChild(a)}return t}#r(t,e){let r=o.#u(t.getAttribute("data-start"),"start"),a=o.#u(t.getAttribute("data-end"),"end");if(!r||!a||!this.#h||!this.#b)return null;let s=r<this.#h?this.#h:r,i=a>this.#b?this.#b:a;if(s>=i)return null;let n=this.#l(s),c=this.#l(i)-n,d=document.createElement("article");d.className="rm-bar",d.style.setProperty("--rm-x",n.toFixed(4)),d.style.setProperty("--rm-w",c.toFixed(4)),d.dataset.lane=e,d.dataset.start=o.#m(r),d.dataset.end=o.#m(a),t.dataset.status&&(d.dataset.status=t.dataset.status),t.id&&(d.dataset.sourceId=t.id),this.#g&&d.setAttribute("draggable","true");let l=t.querySelector("h1, h2, h3, h4, h5, h6"),u=document.createElement("span");if(u.className="rm-bar-title",u.textContent=l?l.textContent.trim():(t.textContent||"").trim().split(`
+`)[0],d.appendChild(u),d.setAttribute("aria-label",`${u.textContent} \u2014 ${d.dataset.start} to ${d.dataset.end} in ${e}`),d.addEventListener("click",p=>{this.#_||this.dispatchEvent(new CustomEvent("product-roadmap:select",{bubbles:!0,detail:{initiative:t,lane:e,start:d.dataset.start,end:d.dataset.end,status:d.dataset.status||null}}))}),this.#g){let p=document.createElement("span");p.className="rm-bar-handle",p.setAttribute("aria-label","Resize end date"),d.appendChild(p),p.addEventListener("pointerdown",h=>this.#s(h,d,t)),d.addEventListener("pointerdown",h=>{h.target!==p&&this.#a(h,d,t)}),d.addEventListener("dragstart",h=>{h.dataTransfer&&(h.dataTransfer.effectAllowed="move",h.dataTransfer.setData("text/plain",t.id||d.dataset.sourceId||"")),this.#k=t,this.#A=e}),d.addEventListener("dragend",()=>{this.#k=null,this.#A=null})}return d}#a(t,e,r){if(t.button!==0)return;t.preventDefault();let a=e.parentElement.getBoundingClientRect(),s=t.clientX,i=parseFloat(e.style.getPropertyValue("--rm-x"))||0,n=parseFloat(e.style.getPropertyValue("--rm-w"))||0;this.#_={kind:"move",bar:e,initiative:r,trackRect:a,startX:s,startFraction:i,widthFraction:n},e.setPointerCapture(t.pointerId),e.addEventListener("pointermove",this.#o),e.addEventListener("pointerup",this.#i),e.addEventListener("pointercancel",this.#i)}#s(t,e,r){if(t.button!==0)return;t.preventDefault(),t.stopPropagation();let a=e.parentElement.getBoundingClientRect(),s=t.clientX,i=parseFloat(e.style.getPropertyValue("--rm-x"))||0,n=parseFloat(e.style.getPropertyValue("--rm-w"))||0;this.#_={kind:"resize",bar:e,initiative:r,trackRect:a,startX:s,startFraction:i,widthFraction:n},e.setPointerCapture(t.pointerId),e.addEventListener("pointermove",this.#o),e.addEventListener("pointerup",this.#i),e.addEventListener("pointercancel",this.#i)}#o=t=>{if(!this.#_)return;let{kind:e,bar:r,trackRect:a,startX:s,startFraction:i,widthFraction:n}=this.#_,c=(t.clientX-s)/a.width;if(e==="move"){let d=Math.max(0,Math.min(1-n,i+c));r.style.setProperty("--rm-x",d.toFixed(4))}else if(e==="resize"){let d=Math.max(.02,Math.min(1-i,n+c));r.style.setProperty("--rm-w",d.toFixed(4))}};#i=t=>{if(!this.#_)return;let{kind:e,bar:r,initiative:a}=this.#_;r.releasePointerCapture(t.pointerId),r.removeEventListener("pointermove",this.#o),r.removeEventListener("pointerup",this.#i),r.removeEventListener("pointercancel",this.#i);let s=parseFloat(r.style.getPropertyValue("--rm-x"))||0,i=parseFloat(r.style.getPropertyValue("--rm-w"))||0,n=this.#d(this.#p(s)),c=this.#d(this.#p(s+i));r.dataset.start=o.#m(n),r.dataset.end=o.#m(c);let d=this.#l(n),l=this.#l(c)-d;r.style.setProperty("--rm-x",d.toFixed(4)),r.style.setProperty("--rm-w",l.toFixed(4)),a&&(a.setAttribute("data-start",r.dataset.start??""),a.setAttribute("data-end",r.dataset.end??"")),this.dispatchEvent(new CustomEvent(e==="move"?"product-roadmap:reschedule":"product-roadmap:resize",{bubbles:!0,detail:{initiative:a,lane:r.dataset.lane,start:r.dataset.start,end:r.dataset.end}})),setTimeout(()=>{this.#_=null},0)};#n=t=>{this.#k&&(t.preventDefault(),t.dataTransfer.dropEffect="move")};#c=t=>{if(!this.#k)return;t.preventDefault();let e=t.currentTarget.dataset.lane,r=this.#k,a=this.#A;if(e===a)return;let s=this.#x.find(i=>i.getAttribute("data-lane")===e);s&&s.appendChild(r),this.dispatchEvent(new CustomEvent("product-roadmap:move",{bubbles:!0,detail:{initiative:r,fromLane:a,toLane:e,start:r.getAttribute("data-start"),end:r.getAttribute("data-end")}})),this.#e()};#l(t){if(!this.#h)return 0;let e=t.getTime()-this.#h.getTime();return Math.max(0,Math.min(1,e/this.#v))}#p(t){let e=this.#h??new Date;return new Date(e.getTime()+t*this.#v)}#d(t){if(this.#y==="month")return new Date(t.getFullYear(),t.getMonth(),1);let e=t.getMonth(),r=Math.floor(e/3)*3;return new Date(t.getFullYear(),r,1)}#f(){let t=[],e=this.#h,r=this.#b;if(!e||!r)return t;if(this.#y==="quarter"){let a=this.#d(e);for(;a<r;){let s=new Date(a.getFullYear(),a.getMonth()+3,1),i=this.#l(a<e?e:a),n=this.#l(s>r?r:s),c=Math.floor(a.getMonth()/3)+1;t.push({startFraction:i,endFraction:n,label:`Q${c} ${a.getFullYear()}`}),a=s}}else{let a=new Date(e.getFullYear(),e.getMonth(),1);for(;a<r;){let s=new Date(a.getFullYear(),a.getMonth()+1,1),i=this.#l(a<e?e:a),n=this.#l(s>r?r:s),c=a.toLocaleString(void 0,{month:"short"});t.push({startFraction:i,endFraction:n,label:`${c} ${a.getFullYear()}`}),a=s}}return t}static#u(t,e){if(!t)return null;let r=String(t).match(/^(\d{4})-Q([1-4])$/i);if(r){let i=Number(r[1]),c=(Number(r[2])-1)*3;return e==="end"?new Date(i,c+3,0):new Date(i,c,1)}let a=String(t).match(/^(\d{4})-(\d{2})-(\d{2})/);if(a)return new Date(Number(a[1]),Number(a[2])-1,Number(a[3]));let s=new Date(t);return isNaN(s.getTime())?null:s}static#m(t){let e=String(t.getMonth()+1).padStart(2,"0"),r=String(t.getDate()).padStart(2,"0");return`${t.getFullYear()}-${e}-${r}`}#h=null;#b=null;#v=0;#y="quarter";#g=!1;#x=[];#w=null;#_=null;#k=null;#A=null};w("product-roadmap",$t);function oe(o){let t=o;return class extends t{static keyOf(e){return e.id}#e=[];#t=new Map;get items(){return this.#e}set items(e){let r=e||[],a=rt({newItems:r,nodes:this.#t,keyOf:this.constructor.keyOf,renderItem:s=>this._renderItem(s),containerFor:(s,i)=>this._containerFor(s,i)});this.#e=r,this._postRender({...a,items:r}),this._emit("items-changed",{items:r},"api")}_renderItem(e){throw new Error(`${this.constructor.name}: must implement _renderItem(item)`)}_containerFor(e,r){return this}_postRender(e){}_emit(e,r,a="api"){this.dispatchEvent(new CustomEvent(`${this.localName}:${e}`,{detail:{...r,source:a},bubbles:!0}))}_nodeFor(e){return this.#t.get(e)||null}_seedCollection(e,r){this.#e=e,this.#t.clear();for(let[a,s]of r)this.#t.set(a,s)}_setItemsSilently(e){this.#e=e}}}var qt=class o extends oe(C){static get observedAttributes(){return["src","compact","title"]}static keyOf(t){return t.id??t.storyId}static#e=0;#t=null;#r={};#a={};#s=null;#o="";#i=[];#n=null;setup(){this.#o=`kb-${++o.#e}`;let t=[...this.querySelectorAll(":scope > section[data-column]")];this.#i=t.map(s=>{let i=s.getAttribute("data-column")||"",c=s.getAttribute("data-column-label")||""||this.#v(i),d=s.getAttribute("data-wip"),l=d?parseInt(d,10):null,u=s.getAttribute("data-column-color")||null,p=[...s.children];return{id:i,label:c,wip:l,color:u,children:p}});for(let s of t)s.remove();this.#t=document.createElement("div"),this.#t.className="kb-columns",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label","Kanban board");let e=0;for(let s of this.#i){let i=document.createElement("section");i.className="kb-column",i.setAttribute("data-column-id",s.id),s.color&&i.setAttribute("data-column-tint",s.color);let n=document.createElement("header");n.className="kb-column-header";let c=document.createElement("h3");c.textContent=s.label;let d=document.createElement("output");if(d.className="kb-count",d.textContent=String(s.children.length),c.appendChild(d),s.wip!==null&&!isNaN(s.wip)){let u=document.createElement("span");u.className="kb-wip",u.textContent=`/ ${s.wip}`,u.setAttribute("aria-label",`WIP limit ${s.wip}`),c.appendChild(u)}n.appendChild(c),i.appendChild(n);let l=document.createElement("drag-surface");if(l.setAttribute("group",this.#o),l.setAttribute("aria-label",`${s.label} items`),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),s.children.length>0){for(let u of s.children)u.hasAttribute("draggable")||u.setAttribute("draggable","true"),u.hasAttribute("data-id")||(u.dataset.id=`kb-item-${e}`),l.appendChild(u);e+=s.children.length}else{let u=document.createElement("p");u.className="kb-empty",u.textContent="No items",l.appendChild(u)}i.appendChild(l),this.#t.appendChild(i),this.#r[s.id]=l,this.#a[s.id]=i,s.wip!==null&&s.children.length>s.wip&&i.setAttribute("data-wip-exceeded","")}let r=this.getAttribute("title");if(r){let s=document.createElement("h2");s.className="kb-title",s.textContent=r,this.appendChild(s)}this.appendChild(this.#t),this.#s=document.createElement("div"),this.#s.className="kb-live-region",this.#s.setAttribute("role","status"),this.#s.setAttribute("aria-live","polite"),this.#s.setAttribute("aria-atomic","true"),this.appendChild(this.#s),this.listen(this,"drag-surface:reorder",s=>{let i=s.detail,n=s.target.closest("drag-surface"),c=this.#f(n);c&&(this.#u(c),this.#l("drag"),this.dispatchEvent(new CustomEvent("kanban-board:reorder",{bubbles:!0,detail:{itemId:i.itemId,column:c,oldIndex:i.oldIndex,newIndex:i.newIndex}})))}),this.listen(this,"drag-surface:transfer",s=>{let i=s.detail,n=i.fromSurface,c=i.toSurface,d=this.#f(n),l=this.#f(c);if(!d||!l)return;i.item&&i.item.setAttribute("data-column",l),this.#u(d),this.#u(l);let u=c.querySelector(".kb-empty");if(u&&u.remove(),n.querySelectorAll(':scope > [draggable="true"]').length===0&&!n.querySelector(".kb-empty")){let _=document.createElement("p");_.className="kb-empty",_.textContent="No items",n.appendChild(_)}let h=this.#b(i.item),f=this.#m(d),b=this.#m(l);this.#h(`${h} moved from ${f} to ${b}`),this.#l("drag"),this.dispatchEvent(new CustomEvent("kanban-board:transfer",{bubbles:!0,detail:{itemId:i.itemId,fromColumn:d,toColumn:l,newIndex:i.newIndex,item:i.item}}));let v=c.querySelectorAll(':scope > [draggable="true"]').length,x=this.#i.find(_=>_.id===l);x?.wip!==null&&x?.wip!==void 0&&v>x.wip&&this.dispatchEvent(new CustomEvent("kanban-board:wip-exceeded",{bubbles:!0,detail:{column:l,limit:x.wip,count:v}}))}),this.#c();let a=this.getAttribute("src");if(a){this._loadSrc(a);return}this.dispatchEvent(new CustomEvent("kanban-board:ready",{bubbles:!0,detail:{columnCount:this.#i.length,itemCount:e}}))}#c(){let t=[],e=new Map;for(let[r,a]of Object.entries(this.#r)){let s=a.querySelectorAll(':scope > [draggable="true"]');for(let i of s){let n=i.getAttribute("data-id");n&&(t.push({id:n,column:r}),e.set(n,i))}}this._seedCollection(t,e)}#l(t){let e=[],r=new Map;for(let a of this.items){let s=String(a.id??a.storyId??"");s&&r.set(s,a)}for(let[a,s]of Object.entries(this.#r)){let i=s.querySelectorAll(':scope > [draggable="true"]');for(let n of i){let c=n.getAttribute("data-id");if(!c)continue;let d=r.get(c);e.push(d?{...d,column:a}:{id:c,column:a})}}this._setItemsSilently(e),this._emit("items-changed",{items:e},t)}teardown(){let t=this.querySelector(".kb-title");t&&t.remove(),this.#t&&(this.#t.remove(),this.#t=null),this.#s&&(this.#s.remove(),this.#s=null),this.#r={},this.#a={},this.#i=[]}get columns(){return this.#i.map(t=>({id:t.id,label:t.label,wip:t.wip??void 0,color:t.color??void 0}))}set columns(t){let e=(t||[]).map(i=>({id:i.id,label:i.label||this.#v(i.id),wip:i.wip??null,color:i.color??null,children:[]})),r=this.#t;this.#r={},this.#a={},this.#i=e;let a=this.#d();this.#t=a;let s=()=>{r&&r.remove(),this.appendChild(a)};this.hasAttribute("data-upgraded")&&r?M(this,s,"kb-vt"):s()}get renderItem(){return this.#n}set renderItem(t){this.#n=typeof t=="function"?t:null}_renderItem(t){let e;if(this.#n){let r=this.#n(t);if(!(r instanceof Element))throw new Error("kanban-board: renderItem must return an Element");e=r}else e=this.#p(t);return e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("data-id")||e.setAttribute("data-id",String(o.keyOf(t))),e}_containerFor(t,e){let r=this.#r[t.column];if(!r)throw new Error(`kanban-board: no column "${t.column}" \u2014 set .columns first or include item.column matching an existing column id`);let a=r.querySelector(":scope > .kb-empty");return a&&a.remove(),r}_postRender(){for(let t of Object.keys(this.#r)){this.#u(t);let e=this.#r[t],r=e.querySelectorAll(':scope > [draggable="true"]'),a=e.querySelector(":scope > .kb-empty");if(r.length===0&&!a){let s=document.createElement("p");s.className="kb-empty",s.textContent="No items",e.appendChild(s)}else r.length>0&&a&&a.remove()}}#p(t){let e=customElements.get("work-item")?"work-item":"article",r=document.createElement(e);return e==="work-item"?r.data={itemId:t.id??t.storyId,type:t.type,priority:t.priority,status:t.status,estimate:t.estimate!=null?String(t.estimate):void 0,assignee:t.assignee,title:t.title,description:t.description,checklist:t.checklist,notes:t.notes,detail:t.detail}:(r.className="kb-card",r.textContent=t.title||t.label||t.id),r}#d(){let t=document.createElement("div");t.className="kb-columns",t.setAttribute("role","region"),t.setAttribute("aria-label","Kanban board");for(let e of this.#i){let r=document.createElement("section");r.className="kb-column",r.setAttribute("data-column-id",e.id),e.color&&r.setAttribute("data-column-tint",e.color);let a=document.createElement("header");a.className="kb-column-header";let s=document.createElement("h3");s.textContent=e.label;let i=document.createElement("output");if(i.className="kb-count",i.textContent="0",s.appendChild(i),e.wip!=null&&!isNaN(e.wip)){let d=document.createElement("span");d.className="kb-wip",d.textContent=`/ ${e.wip}`,d.setAttribute("aria-label",`WIP limit ${e.wip}`),s.appendChild(d)}a.appendChild(s),r.appendChild(a);let n=document.createElement("drag-surface");n.setAttribute("group",this.#o),n.setAttribute("aria-label",`${e.label} items`),n.setAttribute("data-layout","stack"),n.setAttribute("data-layout-gap","xs");let c=document.createElement("p");c.className="kb-empty",c.textContent="No items",n.appendChild(c),r.appendChild(n),t.appendChild(r),this.#r[e.id]=n,this.#a[e.id]=r}return t}attributeChangedCallback(t,e,r){e===r||!this.isConnected||t==="src"&&this._loadSrc(r)}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let r=await e.json();for(;this.firstChild;)this.firstChild.remove();for(let s of r.columns||[]){let i=document.createElement("section");i.setAttribute("data-column",s.id),s.label&&i.setAttribute("data-column-label",s.label),s.wip!=null&&i.setAttribute("data-wip",String(s.wip)),s.color&&i.setAttribute("data-column-color",s.color);for(let n of s.items||[]){let c;n.persona||n.action||n.storyId?(c=document.createElement("user-story"),c.setAttribute("detail",n.detail||"minimal"),n.storyId&&c.setAttribute("story-id",n.storyId),n.persona&&c.setAttribute("persona",n.persona),n.action&&c.setAttribute("action",n.action),n.benefit&&c.setAttribute("benefit",n.benefit),n.priority&&c.setAttribute("priority",n.priority),n.status&&c.setAttribute("status",n.status),n.points&&c.setAttribute("points",String(n.points))):(c=document.createElement("article"),c.className="kb-card",c.textContent=n.text||n.label||""),c.setAttribute("draggable","true"),c.dataset.id=n.id||n.storyId||"",i.appendChild(c)}this.appendChild(i)}let a=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};this.hasAttribute("data-upgraded")&&this.#t?M(this,a,"kb-vt"):a()}catch(e){console.warn(`[kanban-board] Failed to load src="${t}":`,e)}}#f(t){if(!t)return null;for(let[e,r]of Object.entries(this.#r))if(r===t)return e;return null}#u(t){let e=this.#r[t],r=this.#a[t];if(!e||!r)return;let a=e.querySelectorAll(':scope > [draggable="true"]').length,s=r.querySelector(".kb-count");s&&(s.textContent=String(a));let i=this.#i.find(n=>n.id===t);i?.wip!==null&&i?.wip!==void 0&&(a>i.wip?r.setAttribute("data-wip-exceeded",""):r.removeAttribute("data-wip-exceeded"))}#m(t){return this.#i.find(r=>r.id===t)?.label||this.#v(t)}#h(t){this.#s&&(this.#s.textContent="",requestAnimationFrame(()=>{this.#s&&(this.#s.textContent=t)}))}#b(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#v(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};w("kanban-board",qt);var It=class o extends C{static get observedAttributes(){return["src","compact","title"]}static#e=0;#t=null;#r=null;#a={};#s=null;#o="";#i=[];setup(){this.#o=`sm-${++o.#e}`;let t=[...this.querySelectorAll(":scope > section[data-activity]")];this.#i=t.map(s=>{let i=s.getAttribute("data-activity")||"",c=s.getAttribute("data-activity-label")||""||this.#d(i),d=s.getAttribute("data-journey-phase")||null,l=[...s.children];return{id:i,label:c,journeyPhase:d,children:l}});for(let s of t)s.remove();this.#t=document.createElement("div"),this.#t.className="sm-scroll",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label","Story map"),this.#t.setAttribute("tabindex","0"),this.#r=document.createElement("div"),this.#r.className="sm-columns";let e=0;for(let s of this.#i){let i=document.createElement("section");i.className="sm-column",i.setAttribute("data-activity-column",s.id);let n=document.createElement("header");n.className="sm-activity-header";let c=document.createElement("h3");c.textContent=s.label;let d=document.createElement("span");d.className="sm-activity-count",d.textContent=String(s.children.length),c.appendChild(d),n.appendChild(c),i.appendChild(n);let l=document.createElement("drag-surface");if(l.setAttribute("group",this.#o),l.setAttribute("aria-label",`${s.label} stories`),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),s.children.length>0){for(let u of s.children)l.appendChild(u);e+=s.children.length}else{let u=document.createElement("p");u.className="sm-empty",u.textContent="No stories yet",l.appendChild(u)}i.appendChild(l),this.#r.appendChild(i),this.#a[s.id]=l}let r=this.getAttribute("title");if(r){let s=document.createElement("h2");s.className="sm-title",s.textContent=r,this.appendChild(s)}this.#t.appendChild(this.#r),this.appendChild(this.#t),this.#s=document.createElement("div"),this.#s.className="sm-live-region",this.#s.setAttribute("role","status"),this.#s.setAttribute("aria-live","polite"),this.#s.setAttribute("aria-atomic","true"),this.appendChild(this.#s),this.listen(this,"drag-surface:reorder",s=>{let i=s.detail,n=s.target.closest("drag-surface"),c=this.#n(n);c&&(this.#c(c),this.dispatchEvent(new CustomEvent("story-map:reorder",{bubbles:!0,detail:{itemId:i.itemId,activity:c,oldIndex:i.oldIndex,newIndex:i.newIndex}})))}),this.listen(this,"drag-surface:transfer",s=>{let i=s.detail,n=i.fromSurface,c=i.toSurface,d=this.#n(n),l=this.#n(c);if(!d||!l)return;this.#c(d),this.#c(l);let u=c.querySelector(".sm-empty");if(u&&u.remove(),n.querySelectorAll(':scope > [draggable="true"]').length===0&&!n.querySelector(".sm-empty")){let f=document.createElement("p");f.className="sm-empty",f.textContent="No stories yet",n.appendChild(f)}let h=this.#p(i.item);this.#l(`${h} moved from ${d} to ${l}`),this.dispatchEvent(new CustomEvent("story-map:transfer",{bubbles:!0,detail:{itemId:i.itemId,fromActivity:d,toActivity:l,newIndex:i.newIndex}}))});let a=this.getAttribute("src");if(a){this._loadSrc(a);return}this.dispatchEvent(new CustomEvent("story-map:ready",{bubbles:!0,detail:{activityCount:this.#i.length,storyCount:e}}))}teardown(){this.#t&&(this.#t.remove(),this.#t=null),this.#s&&(this.#s.remove(),this.#s=null),this.#r=null,this.#a={},this.#i=[]}get activities(){return this.#i.map(t=>({id:t.id,label:t.label,journeyPhase:t.journeyPhase||void 0,stories:[...this.#a[t.id]?.querySelectorAll(':scope > [draggable="true"]')||[]].map(e=>({id:e.getAttribute("data-id")||void 0,storyId:e.getAttribute("story-id")||void 0,title:e.querySelector('[slot="title"]')?.textContent?.trim()||void 0}))}))}set activities(t){let e=Array.isArray(t)?t:[];for(;this.firstChild;)this.firstChild.remove();for(let a of e){let s=document.createElement("section");s.setAttribute("data-activity",a.id||""),a.label&&s.setAttribute("data-activity-label",a.label),a.journeyPhase&&s.setAttribute("data-journey-phase",a.journeyPhase);for(let i of a.stories||[]){let n,c=this;if(typeof c.renderStory=="function"){let d=c.renderStory(i);n=d instanceof Element?d:null}n||(customElements.get("user-story")?(n=document.createElement("user-story"),n.data=i):(n=document.createElement("article"),n.className="sm-card",n.textContent=i.title||i.id||"")),n.hasAttribute("draggable")||n.setAttribute("draggable","true"),i.id&&!n.hasAttribute("data-id")&&n.setAttribute("data-id",String(i.id)),s.appendChild(n)}this.appendChild(s)}let r=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};this.hasAttribute("data-upgraded")&&this.#t?M(this,r,"sm-vt"):r(),this.dispatchEvent(new CustomEvent("story-map:activities-changed",{detail:{activities:e,source:"property"},bubbles:!0}))}attributeChangedCallback(t,e,r){e===r||!this.isConnected||t==="src"&&this._loadSrc(r)}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let r=await e.json();for(;this.firstChild;)this.firstChild.remove();for(let s of r.activities||[]){let i=document.createElement("section");i.setAttribute("data-activity",s.id),i.setAttribute("data-activity-label",s.label||s.id),s.journeyPhase&&i.setAttribute("data-journey-phase",s.journeyPhase);for(let n of s.stories||[]){let c=document.createElement("user-story");c.setAttribute("draggable","true"),c.dataset.id=n.id||n.storyId,(n.storyId||n.id)&&c.setAttribute("story-id",n.storyId||n.id),n.title&&c.setAttribute("title",n.title),n.persona&&c.setAttribute("persona",n.persona),n.action&&c.setAttribute("action",n.action),n.benefit&&c.setAttribute("benefit",n.benefit),n.priority&&c.setAttribute("priority",n.priority),n.status&&c.setAttribute("status",n.status),n.points&&c.setAttribute("points",String(n.points)),c.setAttribute("detail",n.detail||"compact"),i.appendChild(c)}this.appendChild(i)}let a=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};this.hasAttribute("data-upgraded")&&this.#t?M(this,a,"sm-vt"):a()}catch(e){console.warn(`[story-map] Failed to load src="${t}":`,e)}}#n(t){if(!t)return null;for(let[e,r]of Object.entries(this.#a))if(r===t)return e;return null}#c(t){let e=this.#a[t];if(!e)return;let r=e.querySelectorAll(':scope > [draggable="true"]').length,a=e.closest("[data-activity-column]");if(!a)return;let s=a.querySelector(".sm-activity-count");s&&(s.textContent=String(r))}#l(t){this.#s&&(this.#s.textContent="",requestAnimationFrame(()=>{this.#s&&(this.#s.textContent=t)}))}#p(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#d(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};w("story-map",It);var st=`
+  :host {
+    display: block;
+    position: relative;
+    font-family: var(--_font-sans);
+    line-height: 1.5;
+    color: var(--_text);
+    container-type: inline-size;
+
+    --_bg:          var(--review-surface-bg, var(--color-surface, #ffffff));
+    --_card:        var(--review-surface-card, var(--color-surface-raised, #f8f9fa));
+    --_border:      var(--review-surface-border, var(--color-border, #e0e0e0));
+    --_text:        var(--review-surface-text, var(--color-text, #1a1a1a));
+    --_muted:       var(--review-surface-muted, var(--color-text-muted, #666666));
+    --_accent:      var(--review-surface-accent, var(--color-interactive, #0066cc));
+    --_pin-bg:      var(--review-surface-pin-bg, var(--color-interactive, #0066cc));
+    --_pin-text:    var(--review-surface-pin-text, #ffffff);
+    --_pin-size:    var(--review-surface-pin-size, 28px);
+    --_resolved:    var(--review-surface-resolved, var(--color-success, #16a34a));
+    --_radius:      var(--review-surface-radius, var(--radius-xl, 1rem));
+    --_radius-m:    var(--review-surface-radius-m, var(--radius-m, 0.5rem));
+    --_radius-full: var(--review-surface-radius-full, var(--radius-full, 9999px));
+    --_font-sans:   var(--review-surface-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+    --_font-xs:     var(--review-surface-font-xs, var(--font-size-xs, 0.75rem));
+    --_font-sm:     var(--review-surface-font-sm, var(--font-size-sm, 0.875rem));
+    --_font-md:     var(--review-surface-font-md, var(--font-size-md, 1rem));
+    --_space-2xs:   var(--review-surface-space-2xs, var(--size-2xs, 0.25rem));
+    --_space-xs:    var(--review-surface-space-xs, var(--size-xs, 0.5rem));
+    --_space-s:     var(--review-surface-space-s, var(--size-s, 0.75rem));
+    --_space-m:     var(--review-surface-space-m, var(--size-m, 1rem));
+    --_space-l:     var(--review-surface-space-l, var(--size-l, 1.5rem));
+    --_duration:    var(--review-surface-duration, var(--duration-normal, 200ms));
+    --_duration-fast: var(--review-surface-duration-fast, var(--duration-fast, 100ms));
+    --_ease:        var(--review-surface-ease, var(--ease-default, ease));
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+  /* \u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-container {
+    position: relative;
+    display: grid;
+  }
+
+  .rs-container > ::slotted(*),
+  .rs-container > .rs-overlay {
+    grid-area: 1 / 1;
+  }
+
+  /* \u2500\u2500 Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-overlay {
+    position: relative;
+    z-index: 10;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  :host([data-annotating]) .rs-overlay {
+    pointer-events: auto;
+    cursor: crosshair;
+  }
+
+  /* \u2500\u2500 Pin markers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-pin {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: var(--_pin-size);
+    height: var(--_pin-size);
+    border-radius: var(--_radius-full);
+    background: var(--_pin-bg);
+    color: var(--_pin-text);
+    border: 2px solid var(--_pin-text);
+    font-size: var(--_font-xs);
+    font-weight: 700;
+    font-family: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    pointer-events: auto;
+    padding: 0;
+    line-height: 1;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    transition: transform var(--_duration-fast) var(--_ease),
+                box-shadow var(--_duration-fast) var(--_ease);
+    z-index: 11;
+  }
+
+  .rs-pin:hover {
+    transform: translate(-50%, -50%) scale(1.15);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
+  }
+
+  .rs-pin:focus-visible {
+    outline: 2px solid var(--_accent);
+    outline-offset: 2px;
+  }
+
+  .rs-pin[data-resolved] {
+    background: var(--_resolved);
+  }
+
+  .rs-pin[data-active] {
+    transform: translate(-50%, -50%) scale(1.2);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_pin-bg) 30%, transparent);
+  }
+
+  /* \u2500\u2500 Popover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-popover {
+    position: absolute;
+    z-index: 20;
+    width: 300px;
+    max-height: 400px;
+    overflow-y: auto;
+    background: var(--_bg);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius-m);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+    padding: 0;
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
+    pointer-events: none;
+  }
+
+  .rs-popover[data-open] {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .rs-popover__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px 8px;
+    border-block-end: 1px solid var(--_border);
+  }
+
+  .rs-popover__title {
+    font-size: var(--_font-sm);
+    font-weight: 700;
+    color: var(--_text);
+  }
+
+  .rs-popover__actions {
+    display: flex;
+    gap: 4px;
+  }
+
+  .rs-popover__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--_muted);
+    cursor: pointer;
+    padding: 0;
+    transition: background var(--_duration-fast) var(--_ease), color var(--_duration-fast) var(--_ease);
+  }
+
+  .rs-popover__btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .rs-popover__btn:hover {
+    background: var(--_border);
+    color: var(--_text);
+  }
+
+  .rs-popover__btn--resolve {
+    color: var(--_resolved);
+  }
+
+  .rs-popover__btn--resolve:hover {
+    background: color-mix(in srgb, var(--_resolved) 15%, transparent);
+  }
+
+  .rs-popover__btn--delete {
+    color: var(--color-error-text, var(--color-error, #dc2626));
+  }
+
+  .rs-popover__btn--delete:hover {
+    background: color-mix(in oklch, var(--color-error, #dc2626) 8%, var(--_card));
+    color: var(--color-error-text, var(--color-error, #dc2626));
+  }
+
+  /* \u2500\u2500 Comment thread \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-comment {
+    padding: 10px 12px;
+  }
+
+  .rs-comment__meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-block-end: 4px;
+  }
+
+  .rs-comment__avatar {
+    width: 22px;
+    height: 22px;
+    border-radius: var(--_radius-full);
+    font-size: 10px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-inverted, #fff);
+    flex-shrink: 0;
+  }
+
+  .rs-comment__author {
+    font-size: var(--_font-xs);
+    font-weight: 600;
+    color: var(--_text);
+  }
+
+  .rs-comment__time {
+    font-size: 11px;
+    color: var(--_muted);
+  }
+
+  .rs-comment__text {
+    font-size: var(--_font-sm);
+    color: var(--_text);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  /* Replies */
+  .rs-replies {
+    border-block-start: 1px solid var(--_border);
+  }
+
+  .rs-reply {
+    padding: 8px 12px;
+    border-block-end: 1px solid color-mix(in srgb, var(--_border) 50%, transparent);
+  }
+
+  .rs-reply:last-child {
+    border-block-end: none;
+  }
+
+  /* \u2500\u2500 Input area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-input {
+    display: flex;
+    gap: 6px;
+    padding: 8px 12px;
+    border-block-start: 1px solid var(--_border);
+    background: var(--_card);
+    border-radius: 0 0 var(--_radius-m) var(--_radius-m);
+  }
+
+  .rs-input__field {
+    flex: 1;
+    min-height: 32px;
+    max-height: 80px;
+    padding: 6px 10px;
+    border: 1px solid var(--_border);
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: var(--_font-xs);
+    line-height: 1.4;
+    color: var(--_text);
+    background: var(--_bg);
+    resize: none;
+  }
+
+  .rs-input__field:focus {
+    outline: 2px solid var(--_accent);
+    outline-offset: -1px;
+    border-color: var(--_accent);
+  }
+
+  .rs-input__field::placeholder {
+    color: var(--_muted);
+  }
+
+  .rs-input__submit {
+    align-self: flex-end;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: var(--_accent);
+    color: var(--color-text-inverted, #fff);
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    transition: background var(--_duration-fast) var(--_ease);
+  }
+
+  .rs-input__submit svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .rs-input__submit:hover {
+    background: color-mix(in srgb, var(--_accent) 85%, #000);
+  }
+
+  .rs-input__submit:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--_space-xs);
+    padding: var(--_space-xs) var(--_space-s);
+    background: var(--_card);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius-m);
+    margin-block-start: var(--_space-xs);
+  }
+
+  .rs-toolbar__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border: 1px solid var(--_border);
+    border-radius: 6px;
+    background: var(--_bg);
+    color: var(--_text);
+    font-family: inherit;
+    font-size: var(--_font-xs);
+    font-weight: 600;
+    cursor: pointer;
+    line-height: 1;
+    transition: background var(--_duration-fast) var(--_ease),
+                border-color var(--_duration-fast) var(--_ease);
+  }
+
+  .rs-toolbar__btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .rs-toolbar__btn:hover {
+    background: var(--_border);
+  }
+
+  .rs-toolbar__btn[aria-pressed="true"] {
+    background: var(--_accent);
+    color: var(--color-text-inverted, #fff);
+    border-color: var(--_accent);
+  }
+
+  .rs-toolbar__count {
+    font-size: var(--_font-xs);
+    color: var(--_muted);
+    margin-inline-start: auto;
+  }
+
+  /* \u2500\u2500 Resolved badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-resolved-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--_resolved);
+    padding: 2px 8px;
+    border-radius: var(--_radius-full);
+    background: color-mix(in srgb, var(--_resolved) 12%, transparent);
+  }
+
+  .rs-resolved-badge svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* \u2500\u2500 Live region \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .rs-live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  /* \u2500\u2500 Compact \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  :host([compact]) {
+    --_pin-size: 22px;
+  }
+
+  :host([compact]) .rs-popover {
+    width: 250px;
+    max-height: 300px;
+  }
+
+  :host([compact]) .rs-toolbar {
+    padding: 3px var(--_space-xs);
+  }
+
+  :host([compact]) .rs-toolbar__btn {
+    font-size: 11px;
+    padding: 3px 8px;
+  }
+
+  /* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  @container (max-width: 400px) {
+    .rs-popover {
+      width: 240px;
+    }
+
+    .rs-toolbar {
+      flex-wrap: wrap;
+    }
+  }
+
+  /* \u2500\u2500 Motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  @media (prefers-reduced-motion: reduce) {
+    .rs-pin,
+    .rs-popover,
+    .rs-toolbar__btn,
+    .rs-popover__btn,
+    .rs-input__submit {
+      transition: none;
+    }
+  }
+
+  /* \u2500\u2500 Print \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  @media print {
+    .rs-overlay,
+    .rs-toolbar,
+    .rs-popover {
+      display: none;
+    }
+  }
+
+  /* \u2500\u2500 Utility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .state-msg        { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
+  .state-msg--error { color: var(--color-error-text, var(--color-error, #dc2626)); }
+`;function Ke(){let o=globalThis.localStorage;if(!o)throw new Error("VBStore: localStorage is not available in this environment");return{async getRaw(t){return o.getItem(t)},async setRaw(t,e){o.setItem(t,e)},async removeRaw(t){o.removeItem(t)},async keys(t){let e=[];for(let r=0;r<o.length;r++){let a=o.key(r);a&&a.startsWith(t)&&e.push(a)}return e}}}var at=null;function j(){return at||(at=Ke()),at}function Nt(o,t){if(typeof o!="string"||!o)throw new TypeError("VBStore: namespace must be a non-empty string");if(typeof t!="string"||!t)throw new TypeError("VBStore: key must be a non-empty string");return`vb:${o}:${t}`}function ne(o){if(typeof o!="string"||!o)throw new TypeError("VBStore: namespace must be a non-empty string");return`vb:${o}:`}function ce(o){try{let t=JSON.parse(o);if(t&&typeof t=="object"&&typeof t.timestamp=="number")return t}catch{}return null}var it={configure(o={}){at=o.backend??null},async set(o,t,e){let r={data:e,timestamp:Date.now()};await j().setRaw(Nt(o,t),JSON.stringify(r))},async get(o,t,e){let r=await j().getRaw(Nt(o,t));if(r==null)return null;let a=ce(r);return!a||e?.maxAge!=null&&Date.now()-a.timestamp>e.maxAge?null:a.data},async remove(o,t){await j().removeRaw(Nt(o,t))},async list(o){let t=ne(o),e=await j().keys(t),r=[];for(let a of e){let s=await j().getRaw(a);if(s==null)continue;let i=ce(s);i&&r.push({key:a.slice(t.length),data:i.data,timestamp:i.timestamp})}return r},async clear(o){let t=ne(o),e=await j().keys(t);for(let r of e)await j().removeRaw(r)},async clearAll(){let o=await j().keys("vb:");for(let t of o)await j().removeRaw(t)},async setMany(o,t){for(let[e,r]of t)await it.set(o,e,r)}};var Mt="[data-copy], [data-copy-target], [data-paste-target]",Je="Copied to clipboard",Ge="Pasted from clipboard",Tt=new WeakMap;async function zt(o,t={}){if(o==null||o==="")return!1;let{button:e,announceMessage:r=Je,duration:a=1500}=t;try{await navigator.clipboard.writeText(o)}catch{return!1}return de({button:e,duration:a,announceMessage:r,eventDetail:{text:o}}),!0}function de({button:o,duration:t,announceMessage:e,eventDetail:r,state:a="copied",eventName:s="copy"}){if(o){o.dataset.state=a;let i=Tt.get(o);i&&clearTimeout(i),Tt.set(o,setTimeout(()=>{delete o.dataset.state,Tt.delete(o)},t)),o.dispatchEvent(new CustomEvent(s,{bubbles:!0,detail:r}))}er(e,o??document.body)}async function Ze(o,t={}){let{button:e,announceMessage:r=Ge,duration:a=1500}=t,s;try{s=await navigator.clipboard.readText()}catch{return null}return o&&("value"in o&&(o instanceof HTMLInputElement||o instanceof HTMLTextAreaElement||o instanceof HTMLSelectElement)?o.value=s:o.textContent=s,o.dispatchEvent(new Event("input",{bubbles:!0}))),de({button:e,duration:a,announceMessage:r,eventDetail:{text:s},state:"pasted",eventName:"paste"}),s}function le(o=document){o.querySelectorAll(Mt).forEach(Lt)}function Lt(o){o.hasAttribute("data-copy-init")||(o.setAttribute("data-copy-init",""),o.addEventListener("click",()=>{if(o.dataset.pasteTarget){let e=document.querySelector(o.dataset.pasteTarget);if(!e)return;Ze(e,{button:o});return}let t=tr(o);t&&zt(t,{button:o})}))}function tr(o){if(o.dataset.copy)return o.dataset.copy;if(o.dataset.copyTarget){let t=document.querySelector(o.dataset.copyTarget);if(!t)return"";let e=o.dataset.copyAttr;return e?t.getAttribute(e)??"":t.textContent??""}return""}function er(o,t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.className="visually-hidden",e.textContent=o,t.appendChild(e),setTimeout(()=>e.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>le()):le();var rr=new MutationObserver(o=>{for(let t of o)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let r=e;r.matches(Mt)&&Lt(r),r.querySelectorAll(Mt).forEach(a=>Lt(a))}});rr.observe(document.documentElement,{childList:!0,subtree:!0});var X=class{#e=new Map;async load(){return[...this.#e.values()]}async save(t){return t.id||(t.id=crypto.randomUUID()),this.#e.set(t.id,t),t}async update(t,e){let r=this.#e.get(t);if(!r)throw new Error(`Pin ${t} not found`);return Object.assign(r,e),r}async remove(t){this.#e.delete(t)}},ot=class{#e;constructor(t="default"){this.#e=t}async#t(){let t=await it.get("reviews",this.#e);return Array.isArray(t)?t:[]}async#r(t){await it.set("reviews",this.#e,t)}async load(){return this.#t()}async save(t){t.id||(t.id=crypto.randomUUID());let e=await this.#t();return e.push(t),await this.#r(e),t}async update(t,e){let r=await this.#t(),a=r.findIndex(s=>s.id===t);if(a===-1)throw new Error(`Pin ${t} not found`);return Object.assign(r[a],e),await this.#r(r),r[a]}async remove(t){let e=(await this.#t()).filter(r=>r.id!==t);await this.#r(e)}},nt=class{#e;constructor(t){if(!t)throw new Error("RestAdapter requires an endpoint URL");this.#e=t.replace(/\/$/,"")}async load(){let t=await fetch(this.#e);if(!t.ok)throw new Error(`HTTP ${t.status}`);let e=await t.json();return Array.isArray(e)?e:e.pins||[]}async save(t){let e=await fetch(this.#e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)});if(!e.ok)throw new Error(`HTTP ${e.status}`);return e.json()}async update(t,e){let r=await fetch(`${this.#e}/${encodeURIComponent(t)}`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)});if(!r.ok)throw new Error(`HTTP ${r.status}`);return r.json()}async remove(t){let e=await fetch(`${this.#e}/${encodeURIComponent(t)}`,{method:"DELETE"});if(!e.ok)throw new Error(`HTTP ${e.status}`)}},Pt=class extends HTMLElement{static get observedAttributes(){return["src","editable","adapter","endpoint","storage-key","author","compact","show-resolved"]}#e=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.__pins=[],this.__adapter=null,this._activePin=null,this._annotating=!1}get pins(){return this.__pins}set pins(t){let e=Array.isArray(t)?t:[];this.__pins!==e&&(this.__pins=e,this.isConnected&&this._render(),this.dispatchEvent(new CustomEvent("review-surface:pins-changed",{detail:{pins:e,source:"property"},bubbles:!0,composed:!0})))}get adapter(){return this.__adapter}set adapter(t){this.__adapter=t,this.isConnected&&this._loadFromAdapter()}#t(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#e.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#e.get(t)||""}connectedCallback(){this.#t(),this.setAttribute("data-upgraded",""),this.#r(),this.hasAttribute("src")?this._loadSrc(this.getAttribute("src")):this._loadFromAdapter()}disconnectedCallback(){this.removeAttribute("data-upgraded"),this.removeAttribute("data-annotating")}attributeChangedCallback(t){this.isConnected&&(t==="src"?this._loadSrc(this.getAttribute("src")):t==="adapter"||t==="endpoint"||t==="storage-key"?(this.#r(),this._loadFromAdapter()):this._render())}#r(){if(this.__adapter&&!(this.__adapter instanceof X)&&!(this.__adapter instanceof ot)&&!(this.__adapter instanceof nt))return;switch(this.getAttribute("adapter")||"memory"){case"local":this.__adapter=new ot(this.getAttribute("storage-key")||"default");break;case"rest":try{this.__adapter=new nt(this.getAttribute("endpoint")??"")}catch{this.__adapter=new X}break;default:this.__adapter=new X}}async _loadSrc(t){if(!(!t||!this.shadowRoot)){this.shadowRoot.innerHTML=`<style>${st}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let r=await e.json();this.__pins=Array.isArray(r)?r:r.pins||[],this._render()}catch(e){let r=e instanceof Error?e.message:String(e);this.shadowRoot.innerHTML=`<style>${st}</style><div class="state-msg state-msg--error">Could not load pins: ${m(r)}</div>`}}}async _loadFromAdapter(){if(this.__adapter){try{this.__pins=await this.__adapter.load()}catch{this.__pins=[]}this._render()}}async addPin(t){let e={id:crypto.randomUUID(),x:Math.max(0,Math.min(100,t.x)),y:Math.max(0,Math.min(100,t.y)),text:t.text||"",author:t.author||this.getAttribute("author")||"Anonymous",createdAt:new Date().toISOString(),resolved:!1,resolvedBy:null,resolvedAt:null,replies:[]};return this.__adapter&&await this.__adapter.save(e),this.__pins.push(e),this._render(),this.#c(`Pin ${this.#a().length} added`),this.dispatchEvent(new CustomEvent("review-surface:add",{bubbles:!0,composed:!0,detail:{pin:e}})),e}async removePin(t){let e=this.__pins.find(r=>r.id===t);e&&(this.__adapter&&await this.__adapter.remove(t),this.__pins=this.__pins.filter(r=>r.id!==t),this._activePin===t&&(this._activePin=null),this._render(),this.#c("Pin removed"),this.dispatchEvent(new CustomEvent("review-surface:remove",{bubbles:!0,composed:!0,detail:{pin:e}})))}async resolvePin(t){let e=this.__pins.find(a=>a.id===t);if(!e)return;let r={resolved:!0,resolvedBy:this.getAttribute("author")||"Anonymous",resolvedAt:new Date().toISOString()};this.__adapter&&await this.__adapter.update(t,r),Object.assign(e,r),this._render(),this.#c("Pin resolved"),this.dispatchEvent(new CustomEvent("review-surface:resolve",{bubbles:!0,composed:!0,detail:{pin:e}}))}async unresolvePin(t){let e=this.__pins.find(a=>a.id===t);if(!e)return;let r={resolved:!1,resolvedBy:null,resolvedAt:null};this.__adapter&&await this.__adapter.update(t,r),Object.assign(e,r),this._render(),this.#c("Pin re-opened"),this.dispatchEvent(new CustomEvent("review-surface:update",{bubbles:!0,composed:!0,detail:{pin:e,changes:r}}))}exportPins(){return structuredClone(this.__pins)}importPins(t){this.__pins=Array.isArray(t)?structuredClone(t):[],this._activePin=null,this._render()}#a(){let t=this.hasAttribute("show-resolved");return this.__pins.filter(e=>t||!e.resolved).sort((e,r)=>new Date(e.createdAt??0).getTime()-new Date(r.createdAt??0).getTime())}_render(){if(!this.shadowRoot)return;let t=this.hasAttribute("editable"),e=this.#a(),r=this._activePin?this.__pins.find(a=>a.id===this._activePin):null;this.setAttribute("pin-count",String(e.length)),this.shadowRoot.innerHTML=`<style>${st}</style>
+      <div class="rs-container">
+        <slot></slot>
+        <div class="rs-overlay" role="img" aria-label="Review annotation surface">
+          ${e.map((a,s)=>this._renderPin(a,s+1)).join("")}
+        </div>
+        ${r?this._renderPopover(r,t):""}
+      </div>
+      ${t?this._renderToolbar(e.length):""}
+      <div class="rs-live" aria-live="polite" aria-atomic="true"></div>`,this._bindListeners(t),this.dispatchEvent(new CustomEvent("review-surface:ready",{bubbles:!0,composed:!0,detail:{pinCount:e.length}}))}_renderPin(t,e){let r=t.text?t.text.slice(0,50):"Empty pin";return`<button class="rs-pin"
+      data-pin-id="${m(t.id)}"
+      ${t.resolved?"data-resolved":""}
+      ${this._activePin===t.id?"data-active":""}
+      style="left:${t.x}%;top:${t.y}%"
+      aria-label="Pin ${e}: ${m(r)}"
+      aria-expanded="${this._activePin===t.id}"
+      aria-haspopup="dialog">
+      <span class="rs-pin__number">${e}</span>
+    </button>`}_renderPopover(t,e){let r=this.#a().findIndex(a=>a.id===t.id)+1;return`<div class="rs-popover" data-open
+      style="left:${Math.min(t.x,70)}%;top:${t.y}%"
+      role="dialog"
+      aria-labelledby="rs-popover-title-${m(t.id)}">
+
+      <div class="rs-popover__header">
+        <span class="rs-popover__title" id="rs-popover-title-${m(t.id)}">
+          Pin ${r}
+          ${t.resolved?`<span class="rs-resolved-badge">${k(E.checkCircle)} Resolved</span>`:""}
+        </span>
+        <div class="rs-popover__actions">
+          ${e&&!t.resolved?`
+            <button class="rs-popover__btn rs-popover__btn--resolve" data-action="resolve" data-pin-id="${m(t.id)}"
+              aria-label="Resolve pin" title="Resolve">${k(E.checkCircle)}</button>`:""}
+          ${e&&t.resolved?`
+            <button class="rs-popover__btn" data-action="unresolve" data-pin-id="${m(t.id)}"
+              aria-label="Re-open pin" title="Re-open">${k(E.messageCircle)}</button>`:""}
+          ${e?`
+            <button class="rs-popover__btn rs-popover__btn--delete" data-action="delete" data-pin-id="${m(t.id)}"
+              aria-label="Delete pin" title="Delete">${k(E.x)}</button>`:""}
+          <button class="rs-popover__btn" data-action="close"
+            aria-label="Close">${k(E.x)}</button>
+        </div>
+      </div>
+
+      <div class="rs-comment">
+        <div class="rs-comment__meta">
+          <span class="rs-comment__avatar" style="background:${B(t.author||"Anonymous")}">${O(t.author||"Anonymous")}</span>
+          <span class="rs-comment__author">${m(t.author||"Anonymous")}</span>
+          <span class="rs-comment__time">${this.#n(t.createdAt)}</span>
+        </div>
+        <div class="rs-comment__text">${m(t.text)}</div>
+      </div>
+
+      ${t.replies?.length?`
+        <div class="rs-replies">
+          ${t.replies.map(a=>`
+            <div class="rs-reply">
+              <div class="rs-comment__meta">
+                <span class="rs-comment__avatar" style="background:${B(a.author||"Anonymous")}">${O(a.author||"Anonymous")}</span>
+                <span class="rs-comment__author">${m(a.author||"Anonymous")}</span>
+                <span class="rs-comment__time">${this.#n(a.createdAt)}</span>
+              </div>
+              <div class="rs-comment__text">${m(a.text)}</div>
+            </div>
+          `).join("")}
+        </div>`:""}
+
+      ${e?`
+        <div class="rs-input">
+          <textarea class="rs-input__field" placeholder="Reply\u2026" rows="1"
+            aria-label="Reply to pin ${r}"></textarea>
+          <button class="rs-input__submit" data-action="reply" data-pin-id="${m(t.id)}"
+            aria-label="Send reply">${k(E.send)}</button>
+        </div>`:""}
+
+    </div>`}_renderToolbar(t){return`<div class="rs-toolbar" role="toolbar" aria-label="Review tools">
+      <button class="rs-toolbar__btn" data-action="toggle-mode"
+        aria-pressed="${this._annotating}"
+        title="Toggle annotate mode">
+        ${k(E.mapPin)} Annotate
+      </button>
+      <button class="rs-toolbar__btn" data-action="export"
+        title="Export pins as JSON">
+        ${k(E.download)} Export
+      </button>
+      <output class="rs-toolbar__count">${t} pin${t!==1?"s":""}</output>
+    </div>`}_bindListeners(t){let e=this.shadowRoot;if(!e)return;e.querySelectorAll(".rs-pin").forEach(s=>{s.addEventListener("click",i=>{i.stopPropagation();let n=s.dataset.pinId??null;this._activePin=this._activePin===n?null:n,this._render(),this._activePin&&this.dispatchEvent(new CustomEvent("review-surface:select",{bubbles:!0,composed:!0,detail:{pin:this.__pins.find(c=>c.id===n)}}))})});let r=e.querySelector(".rs-overlay");r&&t&&r.addEventListener("click",s=>{if(!this._annotating)return;let i=s;if(i.target?.closest(".rs-pin"))return;let c=r.getBoundingClientRect(),d=(i.clientX-c.left)/c.width*100,l=(i.clientY-c.top)/c.height*100;this.#s(d,l)}),e.querySelectorAll("[data-action]").forEach(s=>{s.addEventListener("click",i=>{i.stopPropagation();let n=s.dataset.action,c=s.dataset.pinId;switch(n){case"close":this._activePin=null,this._render();break;case"resolve":c&&this.resolvePin(c);break;case"unresolve":c&&this.unresolvePin(c);break;case"delete":c&&this.removePin(c);break;case"toggle-mode":this._annotating=!this._annotating,this._annotating?this.setAttribute("data-annotating",""):this.removeAttribute("data-annotating"),this._render(),this.dispatchEvent(new CustomEvent("review-surface:mode",{bubbles:!0,composed:!0,detail:{mode:this._annotating?"annotate":"view"}}));break;case"export":this.#i();break;case"reply":this.#o(c);break}})});let a=e.querySelector(".rs-input__field");a&&a.addEventListener("keydown",s=>{let i=s;if(i.key==="Enter"&&!i.shiftKey){i.preventDefault();let c=e.querySelector('[data-action="reply"]')?.dataset.pinId;c&&this.#o(c)}}),e.addEventListener("keydown",s=>{s.key==="Escape"&&(this._activePin?(this._activePin=null,this._render()):this._annotating&&(this._annotating=!1,this.removeAttribute("data-annotating"),this._render(),this.dispatchEvent(new CustomEvent("review-surface:mode",{bubbles:!0,composed:!0,detail:{mode:"view"}}))))})}async#s(t,e){let r=this.getAttribute("author")||"Anonymous",a=await this.addPin({x:t,y:e,text:"",author:r});this._activePin=a.id,this._render(),requestAnimationFrame(()=>{(this.shadowRoot?.querySelector(".rs-input__field")??null)?.focus()})}async#o(t){let e=this.shadowRoot?.querySelector(".rs-input__field")??null;if(!e)return;let r=e.value.trim();if(!r)return;let a=this.__pins.find(i=>i.id===t);if(!a)return;let s={id:crypto.randomUUID(),text:r,author:this.getAttribute("author")||"Anonymous",createdAt:new Date().toISOString()};a.replies||(a.replies=[]),a.text?(a.replies.push(s),this.__adapter&&await this.__adapter.update(t,{replies:a.replies})):(a.text=r,this.__adapter&&await this.__adapter.update(t,{text:r})),this._render(),this.#c("Reply added"),requestAnimationFrame(()=>{(this.shadowRoot?.querySelector(".rs-input__field")??null)?.focus()}),this.dispatchEvent(new CustomEvent("review-surface:update",{bubbles:!0,composed:!0,detail:{pin:a,changes:{replies:a.replies}}}))}async#i(){let t=JSON.stringify(this.exportPins(),null,2);if(await zt(t,{announceMessage:"Pins copied to clipboard"}))return;let r=new Blob([t],{type:"application/json"}),a=URL.createObjectURL(r),s=document.createElement("a");s.href=a,s.download="review-pins.json",s.click(),URL.revokeObjectURL(a),this.#c("Pins exported as file")}#n(t){if(!t)return"";try{let e=new Date(t),a=new Date().getTime()-e.getTime(),s=Math.floor(a/6e4);if(s<1)return"just now";if(s<60)return`${s}m ago`;let i=Math.floor(s/60);if(i<24)return`${i}h ago`;let n=Math.floor(i/24);return n<7?`${n}d ago`:e.toLocaleDateString()}catch{return""}}#c(t){let e=this.shadowRoot?.querySelector(".rs-live");e&&(e.textContent=t)}};w("review-surface",Pt);var H=864e5,jt=H*7,ct=H*30,sr=H*91,pe=H*365;function Y(o){return typeof o=="number"?o:new Date(o).getTime()}function ar(o){return o<=jt*3?t=>t.toLocaleDateString(void 0,{month:"short",day:"numeric"}):o<=ct*3?t=>t.toLocaleDateString(void 0,{month:"short",day:"numeric"}):o<=pe?t=>t.toLocaleDateString(void 0,{month:"short",year:"2-digit"}):t=>t.toLocaleDateString(void 0,{year:"numeric"})}function ir(o){return o<=jt*3?"day":o<=ct*3?"week":o<=pe?"month":"quarter"}function ue(o){return String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}var Rt=class o extends C{static get observedAttributes(){return["src","title","view","show-today","show-progress","show-dependencies","compact"]}#e=null;#t=null;#r=null;#a=[];#s=0;#o=0;#i=0;setup(){let t=this.querySelector(":scope > table");return!t||(this.#a=this.#l(t),this.#a.length===0)?!1:(this.#s=Math.min(...this.#a.map(e=>e.start)),this.#o=Math.max(...this.#a.map(e=>e.end)),this.#i=this.#o-this.#s,this.#i<=0&&(this.#i=H),this.#p(t),this.dispatchEvent(new CustomEvent("gantt-chart:ready",{bubbles:!0,detail:{taskCount:this.#a.length,dateRange:{start:new Date(this.#s).toISOString(),end:new Date(this.#o).toISOString()}}})),!0)}teardown(){this.#r&&(this.#r.remove(),this.#r=null),this.#e&&(this.#e.remove(),this.#e=null),this.#t&&(this.#t.remove(),this.#t=null);let t=this.querySelector("table.gc-sr-only");t&&t.classList.remove("gc-sr-only"),this.#a=[]}static#n=0;attributeChangedCallback(t,e,r){e===r||!this.isConnected||(t==="src"?this._loadSrc(r):this.hasAttribute("data-upgraded")&&this.#c())}#c(){let t=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};if(this.hasAttribute("data-upgraded")&&"startViewTransition"in document&&!matchMedia("(prefers-reduced-motion: reduce)").matches){let e=`gc-vt-${++o.#n}`;this.style.viewTransitionName=e,document.startViewTransition(t).finished.finally(()=>{this.style.viewTransitionName=""})}else t()}get tasks(){return this.#a}set tasks(t){let e=(t||[]).map((r,a)=>({id:r.id??`gc-task-${a}`,name:r.name??`Task ${a+1}`,start:typeof r.start=="number"?r.start:Y(r.start),end:typeof r.end=="number"?r.end:r.end!=null?Y(r.end):typeof r.start=="number"?r.start:Y(r.start),progress:r.progress??0,group:r.group??null,depends:Array.isArray(r.depends)?r.depends:r.depends?String(r.depends).split(",").map(s=>s.trim()):[],status:r.status??null,assignee:r.assignee??null,milestone:!!r.milestone,color:r.color??null,storyIds:r.storyIds??[],itemIds:r.itemIds??[]}));if((this.#e||this.#r||this.#t)&&(this.#r&&(this.#r.remove(),this.#r=null),this.#e&&(this.#e.remove(),this.#e=null),this.#t&&(this.#t.remove(),this.#t=null)),this.#a=e,e.length>0){this.#s=Math.min(...e.map(a=>a.start)),this.#o=Math.max(...e.map(a=>a.end)),this.#i=this.#o-this.#s,this.#i<=0&&(this.#i=H);let r=this.querySelector(":scope > table");r||(r=document.createElement("table"),r.classList.add("gc-sr-only"),this.appendChild(r)),this.#p(r)}this.dispatchEvent(new CustomEvent("gantt-chart:tasks-changed",{detail:{tasks:e,source:"property"},bubbles:!0}))}#l(t){let e=t.querySelectorAll("tbody tr"),r=[];for(let a=0;a<e.length;a++){let s=e[a],i=s.querySelectorAll("time[datetime]");if(i.length<2&&!s.hasAttribute("data-milestone"))continue;let n=i[0]?.getAttribute("datetime"),c=i.length>1?i[1].getAttribute("datetime"):n;if(!n)continue;let d=s.querySelector("progress"),l=d?d.value/(d.max||100):0,u=s.cells[0]?.textContent?.trim()||`Task ${a+1}`;r.push({id:s.dataset.taskId||`gc-task-${a}`,name:u,start:Y(n),end:Y(c),progress:l,group:s.dataset.group||null,depends:s.dataset.depends?s.dataset.depends.split(",").map(p=>p.trim()):[],status:s.dataset.status||null,assignee:s.dataset.assignee||null,milestone:s.hasAttribute("data-milestone"),color:s.dataset.color||null,storyIds:s.dataset.storyIds?s.dataset.storyIds.split(",").map(p=>p.trim()):[],itemIds:s.dataset.itemIds?s.dataset.itemIds.split(",").map(p=>p.trim()):[]})}return r}#p(t){let e=this.getAttribute("title"),r=this.hasAttribute("show-today"),a=this.hasAttribute("show-progress"),s=this.hasAttribute("show-dependencies");e&&(this.#r=document.createElement("h2"),this.#r.className="gc-title",this.#r.textContent=e,this.insertBefore(this.#r,t)),this.#e=document.createElement("div"),this.#e.className="gc-container",this.#e.setAttribute("role","region"),this.#e.setAttribute("aria-label",`Gantt chart${e?": "+e:""}`);let i=this.#d();this.#e.appendChild(i);let n=document.createElement("div");n.className="gc-body";let c=document.createElement("div");c.className="gc-task-list";let d=document.createElement("div");d.className="gc-bars";let l=this.#u();d.appendChild(l);let u=this.#m();for(let[p,h]of u){if(u.size>1&&p){let f=document.createElement("div");f.className="gc-group-header";let b=document.createElement("span");b.className="gc-group-label",b.textContent=p,f.appendChild(b),c.appendChild(f);let v=document.createElement("div");v.className="gc-group-spacer",d.appendChild(v)}for(let f of h){let b=document.createElement("div");b.className="gc-task-row",b.setAttribute("data-task-id",f.id);let v=document.createElement("span");v.className="gc-task-name",v.textContent=f.name,b.appendChild(v);let x=document.createElement("span");x.className="gc-task-dates",x.textContent=`${new Date(f.start).toLocaleDateString()} to ${new Date(f.end).toLocaleDateString()}`,b.appendChild(x),c.appendChild(b);let _=document.createElement("div");_.className="gc-bar-row",f.milestone?_.appendChild(this.#b(f)):_.appendChild(this.#h(f,a)),d.appendChild(_)}}if(r){let p=this.#v();p&&d.appendChild(p)}s&&requestAnimationFrame(()=>{let p=this.#y(d);p&&d.appendChild(p)}),n.appendChild(c),n.appendChild(d),this.#e.appendChild(n),this.insertBefore(this.#e,t),t.classList.add("gc-sr-only"),this.#t=document.createElement("div"),this.#t.className="gc-sr-only",this.#t.setAttribute("role","status"),this.#t.setAttribute("aria-live","polite"),this.#t.setAttribute("aria-atomic","true"),this.appendChild(this.#t),this.listen(this.#e,"click",p=>{let h=p.target.closest(".gc-bar, .gc-milestone");if(!h)return;let f=h.dataset.taskId,b=this.#a.find(v=>v.id===f);b&&(this.#x(`Selected: ${b.name}`),this.dispatchEvent(new CustomEvent("gantt-chart:task-click",{bubbles:!0,detail:{task:b}})))}),this.listen(this.#e,"keydown",p=>{let h=p;if(h.key==="Enter"||h.key===" "){let f=h.target.closest(".gc-bar, .gc-milestone");f&&(h.preventDefault(),f.click())}})}#d(){let t=document.createElement("div");t.className="gc-timeline-header";let e=document.createElement("div");e.className="gc-timeline-spacer",t.appendChild(e);let r=document.createElement("div");r.className="gc-timeline-dates";let a=this.#f();for(let{position:s,text:i}of a){let n=document.createElement("span");n.className="gc-date-label",n.style.left=`${s}%`,n.textContent=i,r.appendChild(n)}return t.appendChild(r),t}#f(){let t=this.getAttribute("view")||"auto",e=t==="auto"?ir(this.#i):t,r=ar(this.#i),a=[],s;switch(e){case"day":s=H;break;case"week":s=jt;break;case"month":s=ct;break;case"quarter":s=sr;break;default:s=ct}let i=new Date(this.#s);if(e==="week"){let d=i.getDay(),l=d===0?1:d===1?0:8-d;i.setDate(i.getDate()+l)}else if(e==="month")i.setDate(1),i.getTime()<this.#s&&i.setMonth(i.getMonth()+1);else if(e==="quarter"){let d=i.getMonth(),l=Math.ceil((d+1)/3)*3;i.setMonth(l),i.setDate(1)}let n=i.getTime();n>this.#s+s*.5&&a.push({position:0,text:r(new Date(this.#s))});let c=n;for(;c<=this.#o;){let d=(c-this.#s)/this.#i*100;if(d>=0&&d<=100&&a.push({position:d,text:r(new Date(c))}),e==="month"){let l=new Date(c);l.setMonth(l.getMonth()+1),c=l.getTime()}else if(e==="quarter"){let l=new Date(c);l.setMonth(l.getMonth()+3),c=l.getTime()}else c+=s}return a}#u(){let t=document.createElement("div");t.className="gc-grid-lines";let e=this.#f();for(let{position:r}of e){if(r<=0)continue;let a=document.createElement("div");a.className="gc-grid-line",a.style.left=`${r}%`,t.appendChild(a)}return t}#m(){let t=new Map;for(let e of this.#a){let r=e.group||"";t.has(r)||t.set(r,[]),t.get(r)?.push(e)}return t}#h(t,e){let r=(t.start-this.#s)/this.#i*100,a=(t.end-t.start)/this.#i*100,s=document.createElement("div");if(s.className="gc-bar",s.setAttribute("data-task-id",t.id),s.setAttribute("role","img"),s.setAttribute("tabindex","0"),s.setAttribute("aria-label",`${ue(t.name)}: ${new Date(t.start).toLocaleDateString()} to ${new Date(t.end).toLocaleDateString()}`+(t.progress>0?`, ${Math.round(t.progress*100)}% complete`:"")),s.style.left=`${r}%`,s.style.width=`${Math.max(a,.5)}%`,t.status&&s.setAttribute("data-status",t.status),t.color&&s.style.setProperty("--gc-bar-color",t.color),e&&t.progress>0){let i=document.createElement("div");i.className="gc-bar-fill",i.style.width=`${Math.round(t.progress*100)}%`,s.appendChild(i)}if(a>8){let i=document.createElement("span");i.className="gc-bar-label",i.textContent=t.name,s.appendChild(i)}return s}#b(t){let e=(t.start-this.#s)/this.#i*100,r=document.createElement("div");return r.className="gc-milestone",r.setAttribute("data-task-id",t.id),r.setAttribute("role","img"),r.setAttribute("tabindex","0"),r.setAttribute("aria-label",`Milestone: ${ue(t.name)}, ${new Date(t.start).toLocaleDateString()}`),r.style.left=`${e}%`,t.status&&r.setAttribute("data-status",t.status),t.color&&r.style.setProperty("--gc-bar-color",t.color),r}#v(){let t=Date.now();if(t<this.#s||t>this.#o)return null;let e=(t-this.#s)/this.#i*100,r=document.createElement("div");r.className="gc-today-line",r.style.left=`${e}%`;let a=document.createElement("span");return a.className="gc-today-label",a.textContent="Today",r.appendChild(a),r}#y(t){if(!this.#a.some(l=>l.depends.length>0))return null;let r="http://www.w3.org/2000/svg",a=36,s=t.querySelectorAll(".gc-bar-row").length,i=document.createElementNS(r,"svg");i.setAttribute("class","gc-deps"),i.setAttribute("viewBox",`0 0 100 ${s*a}`),i.setAttribute("preserveAspectRatio","none"),i.style.width="100%",i.style.height="100%";let n=document.createElementNS(r,"defs"),c=document.createElementNS(r,"marker");c.setAttribute("id","gc-arrowhead"),c.setAttribute("markerWidth","8"),c.setAttribute("markerHeight","6"),c.setAttribute("refX","8"),c.setAttribute("refY","3"),c.setAttribute("orient","auto");let d=document.createElementNS(r,"polygon");d.setAttribute("points","0 0, 8 3, 0 6"),d.setAttribute("fill","var(--color-text-muted, #666666)"),c.appendChild(d),n.appendChild(c),i.appendChild(n);for(let l of this.#a)for(let u of l.depends){let p=this.#a.find(A=>A.id===u);if(!p)continue;let h=(p.end-this.#s)/this.#i*100,f=(l.start-this.#s)/this.#i*100,b=this.#g(p.id,t),v=this.#g(l.id,t);if(b===-1||v===-1)continue;let x=b*a+a/2,_=v*a+a/2,g=document.createElementNS(r,"path"),y=h+(f-h)/2;g.setAttribute("d",`M ${h} ${x} C ${y} ${x}, ${y} ${_}, ${f} ${_}`),g.setAttribute("class","gc-dep-line"),g.setAttribute("vector-effect","non-scaling-stroke"),i.appendChild(g)}return i}#g(t,e){let r=e.querySelectorAll(".gc-bar-row");for(let a=0;a<r.length;a++){let s=r[a].querySelector("[data-task-id]");if(s&&s.dataset.taskId===t)return a}return-1}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let r=await e.json();for(;this.firstChild;)this.firstChild.remove();let a=document.createElement("table"),s=document.createElement("thead"),i=document.createElement("tr");for(let c of["Task","Start","End","Progress"]){let d=document.createElement("th");d.textContent=c,i.appendChild(d)}s.appendChild(i),a.appendChild(s);let n=document.createElement("tbody");for(let c of r.tasks||[]){let d=document.createElement("tr");c.id&&(d.dataset.taskId=c.id),c.group&&(d.dataset.group=c.group),c.depends&&(d.dataset.depends=Array.isArray(c.depends)?c.depends.join(","):c.depends),c.status&&(d.dataset.status=c.status),c.assignee&&(d.dataset.assignee=c.assignee),c.milestone&&d.setAttribute("data-milestone",""),c.color&&(d.dataset.color=c.color),c.storyIds&&(d.dataset.storyIds=Array.isArray(c.storyIds)?c.storyIds.join(","):c.storyIds),c.itemIds&&(d.dataset.itemIds=Array.isArray(c.itemIds)?c.itemIds.join(","):c.itemIds);let l=document.createElement("td");l.textContent=c.name||"",d.appendChild(l);let u=document.createElement("td"),p=document.createElement("time");p.setAttribute("datetime",c.start),p.textContent=new Date(c.start).toLocaleDateString(void 0,{month:"short",day:"numeric"}),u.appendChild(p),d.appendChild(u);let h=document.createElement("td"),f=document.createElement("time");f.setAttribute("datetime",c.end||c.start),f.textContent=new Date(c.end||c.start).toLocaleDateString(void 0,{month:"short",day:"numeric"}),h.appendChild(f),d.appendChild(h);let b=document.createElement("td"),v=document.createElement("progress");v.value=c.progress||0,v.max=100,v.textContent=`${c.progress||0}%`,b.appendChild(v),d.appendChild(b),n.appendChild(d)}a.appendChild(n),this.appendChild(a),r.title&&this.setAttribute("title",r.title),this.#c()}catch(e){console.warn(`[gantt-chart] Failed to load src="${t}":`,e)}}#x(t){this.#t&&(this.#t.textContent="",requestAnimationFrame(()=>{this.#t&&(this.#t.textContent=t)}))}};w("gantt-chart",Rt);var K=`
+:host {
+  --_bg:        var(--work-item-bg, var(--color-surface, #ffffff));
+  --_text:      var(--work-item-text, var(--color-text, #1a1a1a));
+  --_muted:     var(--work-item-muted, var(--color-text-muted, #666));
+  --_border:    var(--work-item-border, var(--color-border, #e0e0e0));
+  --_accent:    var(--work-item-accent, var(--color-interactive, #0066cc));
+  --_card-bg:   var(--work-item-card-bg, var(--color-surface-raised, #f8f9fa));
+  --_highlight: var(--work-item-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
+  --_radius:    var(--work-item-radius, var(--radius-l, 0.75rem));
+  --_shadow:       var(--work-item-shadow, var(--shadow-sm));
+  --_shadow-hover: var(--work-item-shadow-hover, var(--shadow-md));
+  --_duration:     var(--work-item-duration, var(--duration-normal, 200ms));
+  --_ease:         var(--work-item-ease, var(--ease-default, ease));
+  --_space-2xs:    var(--work-item-space-2xs, var(--size-2xs, 0.25rem));
+  --_space-xs:     var(--work-item-space-xs, var(--size-xs, 0.5rem));
+  --_space-s:      var(--work-item-space-s, var(--size-s, 0.75rem));
+  --_space-m:      var(--work-item-space-m, var(--size-m, 1rem));
+  --_font-xs:      var(--work-item-font-xs, var(--font-size-xs, 0.75rem));
+  --_font-sm:      var(--work-item-font-sm, var(--font-size-sm, 0.875rem));
+  --_font-md:      var(--work-item-font-md, var(--font-size-md, 1rem));
+  --_font-lg:      var(--work-item-font-lg, var(--font-size-lg, 1.125rem));
+  --_font-mono:    var(--work-item-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
+  --_radius-s:     var(--work-item-radius-s, var(--radius-s, 0.25rem));
+  --_radius-full:  var(--work-item-radius-full, var(--radius-full, 9999px));
+
+  display: block;
+  font-family: var(--work-item-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+/* \u2500\u2500 Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-card {
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  overflow: hidden;
+  box-shadow: var(--_shadow);
+  transition: box-shadow var(--_duration) var(--_ease);
+}
+
+.wi-card:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--_space-s) var(--_space-m);
+  background: var(--_card-bg);
+  border-block-end: 1px solid var(--_border);
+  gap: var(--_space-s);
+  flex-wrap: wrap;
+}
+
+.wi-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.wi-id {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  font-family: var(--_font-mono);
+}
+
+/* \u2500\u2500 Type badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-type {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: var(--_radius-s);
+  text-transform: capitalize;
+}
+
+.wi-type svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Type colors \u2014 driven by VB theme tokens, with color-mix surfaces so the
+   pill background shifts with the active theme. */
+.wi-type[data-type="task"]    { color: var(--color-info,    #3b82f6); background: color-mix(in oklch, var(--color-info,    #3b82f6) 12%, transparent); }
+.wi-type[data-type="bug"]     { color: var(--color-error,   #dc2626); background: color-mix(in oklch, var(--color-error,   #dc2626) 12%, transparent); }
+.wi-type[data-type="chore"]   { color: var(--color-text-muted, #6b7280); background: color-mix(in oklch, var(--color-text-muted, #6b7280) 12%, transparent); }
+.wi-type[data-type="spike"]   { color: var(--color-accent,  #8b5cf6); background: color-mix(in oklch, var(--color-accent,  #8b5cf6) 12%, transparent); }
+.wi-type[data-type="feature"] { color: var(--color-success, #059669); background: color-mix(in oklch, var(--color-success, #059669) 12%, transparent); }
+
+/* \u2500\u2500 Badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+}
+
+.wi-priority,
+.wi-status {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--_radius-full);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.wi-estimate {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+  color: white;
+  font-size: var(--_font-xs);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-body {
+  padding: 16px 20px;
+}
+
+.wi-title-wrap {
+  margin-block-end: var(--_space-xs);
+}
+
+.wi-title-wrap:last-child {
+  margin-block-end: 0;
+}
+
+::slotted([slot="title"]) {
+  font-size: var(--_font-lg) !important;
+  font-weight: 700 !important;
+  color: var(--_text) !important;
+  line-height: 1.4 !important;
+  margin: 0 !important;
+}
+
+.wi-title-fallback {
+  font-size: var(--_font-lg);
+  font-weight: 700;
+  color: var(--_text);
+  line-height: 1.4;
+}
+
+.wi-title:last-child {
+  margin-block-end: 0;
+}
+
+/* \u2500\u2500 Assignee \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-assignee {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: var(--_font-xs);
+  color: var(--_muted);
+  margin-block-start: var(--_space-xs);
+}
+
+.wi-assignee__avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--_radius-full);
+  font-size: 9px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-inverted, #fff);
+  flex-shrink: 0;
+}
+
+/* \u2500\u2500 Linked stories \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-block-start: var(--_space-s);
+}
+
+.wi-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: var(--_radius-s);
+  background: var(--_highlight);
+  color: var(--_accent);
+  text-decoration: none;
+}
+
+.wi-link:hover {
+  text-decoration: underline;
+}
+
+.wi-link svg {
+  width: 11px;
+  height: 11px;
+}
+
+/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-sections {
+  border-block-start: 1px solid var(--_border);
+}
+
+.wi-section {
+  padding: 14px 20px;
+  border-block-end: 1px solid var(--_border);
+}
+
+.wi-section:last-child {
+  border-block-end: none;
+}
+
+.wi-section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  margin-block-end: var(--_space-s);
+}
+
+.wi-section-icon {
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wi-section-icon svg {
+  width: 13px;
+  height: 13px;
+  fill: var(--color-text-inverted, #fff);
+}
+
+.wi-section-icon.description { background: var(--color-info,    #3b82f6); }
+.wi-section-icon.checklist   { background: var(--color-success, #22c55e); }
+.wi-section-icon.notes       { background: var(--color-warning, #f59e0b); }
+
+.wi-section-title {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.wi-section-content {
+  color: var(--_text);
+  font-size: var(--_font-sm);
+  line-height: 1.6;
+}
+
+.wi-section-content ::slotted(ul),
+.wi-section-content ::slotted(ol) {
+  margin: 0;
+  padding-inline-start: 20px;
+}
+
+.wi-section-content ::slotted(p) {
+  margin: 0;
+}
+
+.slot-fallback {
+  color: var(--_muted);
+  font-style: italic;
+}
+
+/* \u2500\u2500 Minimal detail \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-card--minimal {
+  padding: var(--_space-xs);
+  cursor: pointer;
+}
+
+.wi-card--minimal:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+.wi-card--minimal:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+.wi-card--minimal .wi-header { display: none; }
+.wi-card--minimal .wi-sections { display: none; }
+.wi-card--minimal .wi-links { display: none; }
+.wi-card--minimal .wi-assignee { display: none; }
+
+.wi-card--minimal .wi-body {
+  padding: var(--_space-xs) var(--_space-s);
+}
+
+.wi-card--minimal .wi-title-fallback,
+.wi-card--minimal ::slotted([slot="title"]) {
+  font-size: var(--_font-sm) !important;
+  font-weight: 600 !important;
+}
+
+.wi-card--minimal .wi-id {
+  display: block;
+  margin-block-end: var(--_space-2xs);
+}
+
+.wi-card--minimal .wi-type {
+  font-size: 10px;
+  padding: 2px 6px;
+}
+
+/* \u2500\u2500 Compact detail \u2014 hide empty sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.wi-card--compact .wi-section[data-empty] {
+  display: none;
+}
+
+.wi-card--compact .slot-fallback {
+  display: none;
+}
+
+.wi-card--compact .wi-body {
+  padding: var(--_space-s) var(--_space-m);
+}
+
+/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@media (max-width: 480px) {
+  .wi-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .wi-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wi-card {
+    transition: none;
+  }
+}
+
+@media print {
+  .wi-card {
+    box-shadow: none;
+    break-inside: avoid;
+  }
+}
+
+.state-msg        { padding: var(--_space-m); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
+.state-msg--error { color: var(--color-error-text, var(--color-error, #dc2626)); }
+`;var he={task:'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/>',bug:'<path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/>',chore:'<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>',spike:'<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',feature:'<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>'},Dt={critical:{label:"Critical",color:"#dc2626",bg:"rgba(220, 38, 38, 0.1)"},high:{label:"High",color:"#ea580c",bg:"rgba(234, 88, 12, 0.1)"},medium:{label:"Medium",color:"#ca8a04",bg:"rgba(202, 138, 4, 0.1)"},low:{label:"Low",color:"#16a34a",bg:"rgba(22, 163, 74, 0.1)"}},Ft={backlog:{label:"Backlog",color:"#6b7280",bg:"rgba(107, 114, 128, 0.1)"},"to-do":{label:"To Do",color:"#3b82f6",bg:"rgba(59, 130, 246, 0.1)"},"in-progress":{label:"In Progress",color:"#8b5cf6",bg:"rgba(139, 92, 246, 0.1)"},review:{label:"Review",color:"#f59e0b",bg:"rgba(245, 158, 11, 0.1)"},done:{label:"Done",color:"#22c55e",bg:"rgba(34, 197, 94, 0.1)"},blocked:{label:"Blocked",color:"#dc2626",bg:"rgba(220, 38, 38, 0.1)"}},Ot=class extends HTMLElement{static get observedAttributes(){return["item-id","type","priority","status","estimate","assignee","story-ids","detail","compact","src"]}#e=new Map;constructor(){super(),this.attachShadow({mode:"open"})}#t(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&this.#e.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#e.get(t)||""}connectedCallback(){this.#t(),this.itemId&&!this.id&&(this.id=this.itemId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#r(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t,e,r){e!==r&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(r):this.#r())}get itemId(){return this.getAttribute("item-id")||""}get itemTitle(){return this.querySelector('[slot="title"]')?.textContent?.trim()||this.#e.get("title")||""}get itemType(){return this.getAttribute("type")||"task"}get priority(){return this.getAttribute("priority")||"medium"}get status(){return this.getAttribute("status")||"backlog"}get estimate(){return this.getAttribute("estimate")||""}get assignee(){return this.getAttribute("assignee")||""}get storyIds(){let t=this.getAttribute("story-ids")||"";return t?t.split(",").map(e=>e.trim()).filter(Boolean):[]}get _detailLevel(){return this.getAttribute("detail")?this.getAttribute("detail"):this.hasAttribute("compact")?"compact":"full"}get _minimalLabel(){return this.itemTitle||this.itemId||"Work item"}updateStatus(t){Ft[t]&&(this.setAttribute("status",t),this.dispatchEvent(new CustomEvent("work-item:status",{detail:{status:t,itemId:this.itemId},bubbles:!0,composed:!0})))}updatePriority(t){Dt[t]&&(this.setAttribute("priority",t),this.dispatchEvent(new CustomEvent("work-item:priority",{detail:{priority:t,itemId:this.itemId},bubbles:!0,composed:!0})))}get data(){return{itemId:this.itemId||void 0,type:this.itemType,priority:this.priority,status:this.status,estimate:this.estimate||void 0,assignee:this.assignee||void 0,storyIds:this.storyIds.length?this.storyIds:void 0,detail:this.getAttribute("detail")||void 0,title:this.itemTitle||void 0}}set data(t){!t||typeof t!="object"||(this._applyData(t),this.shadowRoot&&this.#r(),this.dispatchEvent(new CustomEvent("work-item:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0})))}_applyData(t){for(let[e,r]of[["itemId","item-id"],["type","type"],["priority","priority"],["status","status"],["estimate","estimate"],["assignee","assignee"],["detail","detail"]])t[e]!=null&&this.setAttribute(r,String(t[e]));if(t.storyIds&&this.setAttribute("story-ids",Array.isArray(t.storyIds)?t.storyIds.join(","):String(t.storyIds)),t.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h3");e.slot="title",e.textContent=String(t.title),this.appendChild(e)}for(let e of["description","notes"])if(t[e]&&!this.querySelector(`[slot="${e}"]`)){let r=document.createElement("p");r.slot=e,r.textContent=String(t[e]),this.appendChild(r)}if(t.checklist&&!this.querySelector('[slot="checklist"]')){let e=document.createElement("ul");e.slot="checklist";let r=Array.isArray(t.checklist)?t.checklist:[t.checklist];for(let a of r){let s=document.createElement("li");s.textContent=String(a),e.appendChild(s)}this.appendChild(e)}}async _loadSrc(t){if(!t)return;let e=this.shadowRoot;e.innerHTML=`<style>${K}</style><div class="state-msg">Loading\u2026</div>`;try{let r=await fetch(t);if(!r.ok)throw new Error(`HTTP ${r.status}`);let a=await r.json();this._applyData(a),this.#r()}catch(r){e.innerHTML=`<style>${K}</style><div class="state-msg state-msg--error">Could not load: ${m(r.message)}</div>`}}#r(){let t=this.shadowRoot,e=Dt[this.priority]||Dt.medium,r=Ft[this.status]||Ft.backlog,a=this.itemType,s=he[a]||he.task,i=this._detailLevel,n=this.itemId?`Work item: ${m(this.itemId)}`:"Work item";if(i==="minimal"){t.innerHTML=`<style>${K}</style>
+        <article class="wi-card wi-card--minimal" role="article" aria-label="${n}"
+          tabindex="0">
+          <div class="wi-body">
+            <div class="wi-meta">
+              ${this.itemId?`<span class="wi-id">${m(this.itemId)}</span>`:""}
+              <span class="wi-type" data-type="${m(a)}">${k(s)} ${m(a)}</span>
+            </div>
+            <div class="wi-title-wrap">
+              <slot name="title"><span class="wi-title-fallback">${m(this._minimalLabel)}</span></slot>
+            </div>
+          </div>
+        </article>`;return}if(t.innerHTML=`<style>${K}</style>
+      <article class="wi-card wi-card--${i}" role="article" aria-label="${n}">
+
+        <header class="wi-header">
+          <div class="wi-meta">
+            ${this.itemId?`<span class="wi-id">${m(this.itemId)}</span>`:""}
+            <span class="wi-type" data-type="${m(a)}">${k(s)} ${m(a)}</span>
+          </div>
+          <div class="wi-badges">
+            <span class="wi-priority" style="color:${e.color};background:${e.bg}">${m(e.label)}</span>
+            <span class="wi-status" style="color:${r.color};background:${r.bg}">${m(r.label)}</span>
+            ${this.estimate?`<span class="wi-estimate" title="Estimate">${m(this.estimate)}</span>`:""}
+          </div>
+        </header>
+
+        <div class="wi-body">
+          <div class="wi-title-wrap">
+            <slot name="title"><span class="wi-title-fallback">[Untitled work item]</span></slot>
+          </div>
+
+          ${this.assignee?`
+            <div class="wi-assignee">
+              <span class="wi-assignee__avatar" style="background:${B(this.assignee)}">${O(this.assignee)}</span>
+              ${m(this.assignee)}
+            </div>`:""}
+
+          ${this.storyIds.length?`
+            <div class="wi-links">
+              ${this.storyIds.map(c=>`<a class="wi-link" href="#${m(c)}">${k('<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h10"/><path d="M7 12h10"/><path d="M7 17h10"/>')} ${m(c)}</a>`).join("")}
+            </div>`:""}
+        </div>
+
+        <div class="wi-sections">
+          <div class="wi-section">
+            <div class="wi-section-header">
+              <div class="wi-section-icon description">
+                <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+              </div>
+              <span class="wi-section-title">Description</span>
+            </div>
+            <div class="wi-section-content">
+              <slot name="description"><em class="slot-fallback">No description.</em></slot>
+            </div>
+          </div>
+
+          <div class="wi-section">
+            <div class="wi-section-header">
+              <div class="wi-section-icon checklist">
+                <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              </div>
+              <span class="wi-section-title">Checklist</span>
+            </div>
+            <div class="wi-section-content">
+              <slot name="checklist"><em class="slot-fallback">No checklist items.</em></slot>
+            </div>
+          </div>
+
+          <div class="wi-section">
+            <div class="wi-section-header">
+              <div class="wi-section-icon notes">
+                <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+              </div>
+              <span class="wi-section-title">Notes</span>
+            </div>
+            <div class="wi-section-content">
+              <slot name="notes"><em class="slot-fallback">No notes.</em></slot>
+            </div>
+          </div>
+        </div>
+
+      </article>`,i==="compact")for(let c of t.querySelectorAll(".wi-section")){let d=c.querySelector("slot");d&&d.assignedNodes().length===0&&c.setAttribute("data-empty","")}this.dispatchEvent(new CustomEvent("work-item:ready",{detail:{itemId:this.itemId,title:this.itemTitle,type:a,priority:this.priority,status:this.status},bubbles:!0,composed:!0}))}};w("work-item",Ot);var J=`
+:host {
+  --_bg:        var(--adr-wc-bg, var(--color-surface, #ffffff));
+  --_text:      var(--adr-wc-text, var(--color-text, #1a1a1a));
+  --_muted:     var(--adr-wc-muted, var(--color-text-muted, #666));
+  --_border:    var(--adr-wc-border, var(--color-border, #e0e0e0));
+  --_accent:    var(--adr-wc-accent, var(--color-interactive, #0066cc));
+  --_card-bg:   var(--adr-wc-card-bg, var(--color-surface-raised, #f8f9fa));
+  --_highlight: var(--adr-wc-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
+  --_radius:    var(--adr-wc-radius, var(--radius-l, 0.75rem));
+  --_shadow:       var(--adr-wc-shadow, var(--shadow-sm));
+  --_shadow-hover: var(--adr-wc-shadow-hover, var(--shadow-md));
+  --_duration:     var(--adr-wc-duration, var(--duration-normal, 200ms));
+  --_ease:         var(--adr-wc-ease, var(--ease-default, ease));
+  --_space-2xs:    var(--adr-wc-space-2xs, var(--size-2xs, 0.25rem));
+  --_space-xs:     var(--adr-wc-space-xs, var(--size-xs, 0.5rem));
+  --_space-s:      var(--adr-wc-space-s, var(--size-s, 0.75rem));
+  --_space-m:      var(--adr-wc-space-m, var(--size-m, 1rem));
+  --_font-xs:      var(--adr-wc-font-xs, var(--font-size-xs, 0.75rem));
+  --_font-sm:      var(--adr-wc-font-sm, var(--font-size-sm, 0.875rem));
+  --_font-md:      var(--adr-wc-font-md, var(--font-size-md, 1rem));
+  --_font-lg:      var(--adr-wc-font-lg, var(--font-size-lg, 1.125rem));
+  --_font-mono:    var(--adr-wc-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
+  --_radius-s:     var(--adr-wc-radius-s, var(--radius-s, 0.25rem));
+  --_radius-full:  var(--adr-wc-radius-full, var(--radius-full, 9999px));
+
+  display: block;
+  font-family: var(--adr-wc-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+/* \u2500\u2500 Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-card {
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  overflow: hidden;
+  box-shadow: var(--_shadow);
+  transition: box-shadow var(--_duration) var(--_ease);
+}
+
+.adr-card:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--_space-s) var(--_space-m);
+  background: var(--_card-bg);
+  border-block-end: 1px solid var(--_border);
+  gap: var(--_space-s);
+  flex-wrap: wrap;
+}
+
+.adr-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.adr-id {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  font-family: var(--_font-mono);
+}
+
+/* \u2500\u2500 Status badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+}
+
+.adr-status {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--_radius-full);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+/* \u2500\u2500 Date (slotted <time>) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-date-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--_font-xs);
+  color: var(--_muted);
+}
+
+.adr-date-wrap svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+::slotted([slot="date"]) {
+  font-size: var(--_font-xs);
+  font-family: var(--_font-mono);
+  color: var(--_muted);
+}
+
+/* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-body {
+  padding: 16px 20px;
+}
+
+/* \u2500\u2500 Title (slotted heading) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-title-wrap {
+  margin-block-end: 0;
+}
+
+::slotted([slot="title"]) {
+  font-size: var(--_font-lg) !important;
+  font-weight: 700 !important;
+  color: var(--_text) !important;
+  line-height: 1.4 !important;
+  margin: 0 !important;
+}
+
+/* Fallback title when no slot content */
+.adr-title-fallback {
+  font-size: var(--_font-lg);
+  font-weight: 700;
+  color: var(--_text);
+  line-height: 1.4;
+}
+
+/* \u2500\u2500 Supersedes / Superseded-by links \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-block-start: var(--_space-s);
+}
+
+.adr-links-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--_muted);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-inline-end: var(--_space-2xs);
+  align-self: center;
+}
+
+.adr-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: var(--_radius-s);
+  background: var(--_highlight);
+  color: var(--_accent);
+  text-decoration: none;
+}
+
+.adr-link:hover {
+  text-decoration: underline;
+}
+
+.adr-link svg {
+  width: 11px;
+  height: 11px;
+}
+
+/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-sections {
+  border-block-start: 1px solid var(--_border);
+}
+
+.adr-section {
+  padding: 14px 20px;
+  border-block-end: 1px solid var(--_border);
+}
+
+.adr-section:last-child {
+  border-block-end: none;
+}
+
+.adr-section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  margin-block-end: var(--_space-s);
+}
+
+.adr-section-icon {
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.adr-section-icon svg {
+  width: 13px;
+  height: 13px;
+  fill: var(--color-text-inverted, #fff);
+}
+
+.adr-section-icon.context      { background: var(--color-accent,  #8b5cf6); }
+.adr-section-icon.decision     { background: var(--color-success, #22c55e); }
+.adr-section-icon.consequences { background: var(--color-warning, #f59e0b); }
+
+.adr-section-title {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.adr-section-content {
+  color: var(--_text);
+  font-size: var(--_font-sm);
+  line-height: 1.6;
+}
+
+.adr-section-content ::slotted(ul),
+.adr-section-content ::slotted(ol) {
+  margin: 0;
+  padding-inline-start: 20px;
+}
+
+.adr-section-content ::slotted(p) {
+  margin: 0;
+}
+
+.slot-fallback {
+  color: var(--_muted);
+  font-style: italic;
+}
+
+/* \u2500\u2500 Minimal detail \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-card--minimal {
+  padding: var(--_space-xs);
+  cursor: pointer;
+}
+
+.adr-card--minimal:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+.adr-card--minimal:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+.adr-card--minimal .adr-header { display: none; }
+.adr-card--minimal .adr-sections { display: none; }
+.adr-card--minimal .adr-links { display: none; }
+.adr-card--minimal .adr-date-wrap { display: none; }
+
+.adr-card--minimal .adr-body {
+  padding: var(--_space-xs) var(--_space-s);
+}
+
+.adr-card--minimal .adr-title-fallback,
+.adr-card--minimal ::slotted([slot="title"]) {
+  font-size: var(--_font-sm) !important;
+  font-weight: 600 !important;
+}
+
+.adr-card--minimal .adr-id {
+  display: block;
+  margin-block-end: var(--_space-2xs);
+}
+
+.adr-card--minimal .adr-status {
+  font-size: 10px;
+  padding: 2px 6px;
+}
+
+/* \u2500\u2500 Compact detail \u2014 hide empty sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.adr-card--compact .adr-section[data-empty] {
+  display: none;
+}
+
+.adr-card--compact .slot-fallback {
+  display: none;
+}
+
+.adr-card--compact .adr-body {
+  padding: var(--_space-s) var(--_space-m);
+}
+
+/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@media (max-width: 480px) {
+  .adr-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .adr-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .adr-card {
+    transition: none;
+  }
+}
+
+@media print {
+  .adr-card {
+    box-shadow: none;
+    break-inside: avoid;
+  }
+}
+
+.state-msg        { padding: var(--_space-m); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
+.state-msg--error { color: var(--color-error-text, var(--color-error, #dc2626)); }
+`;var me={proposed:{label:"Proposed",color:"#3b82f6",bg:"rgba(59, 130, 246, 0.1)"},accepted:{label:"Accepted",color:"#22c55e",bg:"rgba(34, 197, 94, 0.1)"},deprecated:{label:"Deprecated",color:"#f59e0b",bg:"rgba(245, 158, 11, 0.1)"},superseded:{label:"Superseded",color:"#6b7280",bg:"rgba(107, 114, 128, 0.1)"}},V={calendar:'<rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/>',context:'<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/>',decision:'<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',consequences:'<path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/>',arrowRight:'<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>'},Bt=class extends HTMLElement{static get observedAttributes(){return["adr-id","status","supersedes","superseded-by","detail","compact","src"]}#e=new Map;constructor(){super(),this.attachShadow({mode:"open"})}#t(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&this.#e.set(e,t.textContent.trim())}}connectedCallback(){this.#t(),this.adrId&&!this.id&&(this.id=this.adrId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#r(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t,e,r){e!==r&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(r):this.#r())}get adrId(){return this.getAttribute("adr-id")||""}get status(){return this.getAttribute("status")||"proposed"}get adrTitle(){return this.querySelector('[slot="title"]')?.textContent?.trim()||this.#e.get("title")||""}get adrDate(){let t=this.querySelector('[slot="date"]');return t?.getAttribute("datetime")||t?.textContent?.trim()||this.#e.get("date")||""}get supersedes(){let t=this.getAttribute("supersedes")||"";return t?t.split(",").map(e=>e.trim()).filter(Boolean):[]}get supersededBy(){let t=this.getAttribute("superseded-by")||"";return t?t.split(",").map(e=>e.trim()).filter(Boolean):[]}get _detailLevel(){return this.getAttribute("detail")?this.getAttribute("detail"):this.hasAttribute("compact")?"compact":"full"}get _minimalLabel(){return this.adrTitle||this.adrId||"ADR"}get data(){return{adrId:this.adrId||void 0,status:this.status,detail:this.getAttribute("detail")||void 0,supersedes:this.supersedes.length?this.supersedes:void 0,supersededBy:this.supersededBy.length?this.supersededBy:void 0,title:this.adrTitle||void 0,date:this.adrDate||void 0}}set data(t){!t||typeof t!="object"||(this._applyData(t),this.#t(),this.shadowRoot&&this.#r(),this.dispatchEvent(new CustomEvent("adr-wc:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0})))}_applyData(t){if(t.adrId!=null&&this.setAttribute("adr-id",String(t.adrId)),t.status!=null&&this.setAttribute("status",String(t.status)),t.detail!=null&&this.setAttribute("detail",String(t.detail)),t.supersedes&&this.setAttribute("supersedes",Array.isArray(t.supersedes)?t.supersedes.join(","):String(t.supersedes)),t.supersededBy&&this.setAttribute("superseded-by",Array.isArray(t.supersededBy)?t.supersededBy.join(","):String(t.supersededBy)),t.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h3");e.slot="title",e.textContent=String(t.title),this.appendChild(e)}if(t.date&&!this.querySelector('[slot="date"]')){let e=document.createElement("time");e.slot="date",e.setAttribute("datetime",String(t.date)),e.textContent=new Date(String(t.date)).toLocaleDateString(void 0,{year:"numeric",month:"long",day:"numeric"}),this.appendChild(e)}for(let e of["context","decision"])if(t[e]&&!this.querySelector(`[slot="${e}"]`)){let r=document.createElement("p");r.slot=e,r.textContent=String(t[e]),this.appendChild(r)}if(t.consequences&&!this.querySelector('[slot="consequences"]')){let e=document.createElement("ul");e.slot="consequences";let r=Array.isArray(t.consequences)?t.consequences:[t.consequences];for(let a of r){let s=document.createElement("li");s.textContent=String(a),e.appendChild(s)}this.appendChild(e)}}async _loadSrc(t){if(!t)return;let e=this.shadowRoot;e.innerHTML=`<style>${J}</style><div class="state-msg">Loading\u2026</div>`;try{let r=await fetch(t);if(!r.ok)throw new Error(`HTTP ${r.status}`);let a=await r.json();this._applyData(a),this.#t(),this.#r()}catch(r){e.innerHTML=`<style>${J}</style><div class="state-msg state-msg--error">Could not load: ${m(r.message)}</div>`}}#r(){let t=this.shadowRoot,e=me[this.status]||me.proposed,r=this._detailLevel,a=this.adrId?`ADR: ${m(this.adrId)}`:"Architectural Decision Record",s=!!this.querySelector('[slot="date"]')||this.#e.has("date");if(r==="minimal"){t.innerHTML=`<style>${J}</style>
+        <article class="adr-card adr-card--minimal" role="article" aria-label="${a}"
+          tabindex="0">
+          <div class="adr-body">
+            <div class="adr-meta">
+              ${this.adrId?`<span class="adr-id">${m(this.adrId)}</span>`:""}
+              <span class="adr-status" style="color:${e.color};background:${e.bg}">${m(e.label)}</span>
+            </div>
+            <div class="adr-title-wrap">
+              <slot name="title"><span class="adr-title-fallback">${m(this._minimalLabel)}</span></slot>
+            </div>
+          </div>
+        </article>`;return}if(t.innerHTML=`<style>${J}</style>
+      <article class="adr-card adr-card--${r}" role="article" aria-label="${a}">
+
+        <header class="adr-header">
+          <div class="adr-meta">
+            ${this.adrId?`<span class="adr-id">${m(this.adrId)}</span>`:""}
+            ${s?`<span class="adr-date-wrap">${k(V.calendar)} <slot name="date"></slot></span>`:""}
+          </div>
+          <div class="adr-badges">
+            <span class="adr-status" style="color:${e.color};background:${e.bg}">${m(e.label)}</span>
+          </div>
+        </header>
+
+        <div class="adr-body">
+          <div class="adr-title-wrap">
+            <slot name="title"><span class="adr-title-fallback">[Untitled ADR]</span></slot>
+          </div>
+
+          ${this.supersedes.length?`
+            <div class="adr-links">
+              <span class="adr-links-label">Supersedes</span>
+              ${this.supersedes.map(i=>`<a class="adr-link" href="#${m(i)}">${k(V.arrowRight)} ${m(i)}</a>`).join("")}
+            </div>`:""}
+
+          ${this.supersededBy.length?`
+            <div class="adr-links">
+              <span class="adr-links-label">Superseded by</span>
+              ${this.supersededBy.map(i=>`<a class="adr-link" href="#${m(i)}">${k(V.arrowRight)} ${m(i)}</a>`).join("")}
+            </div>`:""}
+        </div>
+
+        <div class="adr-sections">
+          <div class="adr-section">
+            <div class="adr-section-header">
+              <div class="adr-section-icon context">${k(V.context)}</div>
+              <span class="adr-section-title">Context</span>
+            </div>
+            <div class="adr-section-content">
+              <slot name="context"><em class="slot-fallback">No context provided.</em></slot>
+            </div>
+          </div>
+
+          <div class="adr-section">
+            <div class="adr-section-header">
+              <div class="adr-section-icon decision">${k(V.decision)}</div>
+              <span class="adr-section-title">Decision</span>
+            </div>
+            <div class="adr-section-content">
+              <slot name="decision"><em class="slot-fallback">No decision recorded.</em></slot>
+            </div>
+          </div>
+
+          <div class="adr-section">
+            <div class="adr-section-header">
+              <div class="adr-section-icon consequences">${k(V.consequences)}</div>
+              <span class="adr-section-title">Consequences</span>
+            </div>
+            <div class="adr-section-content">
+              <slot name="consequences"><em class="slot-fallback">No consequences documented.</em></slot>
+            </div>
+          </div>
+        </div>
+
+      </article>`,r==="compact")for(let i of t.querySelectorAll(".adr-section")){let n=i.querySelector("slot");n&&n.assignedNodes().length===0&&i.setAttribute("data-empty","")}this.dispatchEvent(new CustomEvent("adr-wc:ready",{detail:{adrId:this.adrId,title:this.adrTitle,status:this.status},bubbles:!0,composed:!0}))}};w("adr-wc",Bt);function fe(o,t,e){let r=W(o?.sprintCount)>0?W(o.sprintCount)*(W(o.sprintWeeks)||1):W(o?.sprintWeeks),a=W(t?.teamFTE),s=nr(W(e),0,1);return!(r>0)||!(a>0)||!(s>0)?0:Math.ceil(r*a*s)}function or(o){let t=2166136261;for(let e=0;e<o.length;e++)t^=o.charCodeAt(e),t=Math.imul(t,16777619);return(t>>>0).toString(36)}function Ht(o){return o===null||typeof o!="object"?JSON.stringify(o):Array.isArray(o)?"["+o.map(Ht).join(",")+"]":"{"+Object.keys(o).sort().map(e=>JSON.stringify(e)+":"+Ht(o[e])).join(",")+"}"}function be({time:o,cost:t,scope:e}){return or(Ht({time:o||{},cost:t||{},scope:e||{}}))}function W(o){if(o===""||o==null)return 0;let t=Number(o);return Number.isFinite(t)?t:0}function nr(o,t,e){return Math.max(t,Math.min(e,o))}function cr({time:o={},cost:t={},scope:e={}}={}){return{t:P(o.sprintCount,1)*P(o.sprintWeeks,1),c:P(t.teamFTE,0)*P(t.hoursPerWeek,40),s:P(e.mustHaveCount,0)+.5*P(e.shouldHaveCount,0)}}function lr(o){let t=[o.t,o.c,o.s].filter(a=>a>0);if(t.length===0)return{time:1,cost:1,scope:1};let e=Math.max(...t),r=a=>a<=0?.55:.55+(1.45-.55)*(a/e);return{time:r(o.t),cost:r(o.c),scope:r(o.s)}}function Ut(o,t=80){let e={scope:-Math.PI/2,time:5*Math.PI/6,cost:Math.PI/6},r=lr(cr(o)),a=s=>({x:Math.cos(e[s])*t*r[s],y:Math.sin(e[s])*t*r[s],factor:r[s]});return{scope:a("scope"),time:a("time"),cost:a("cost")}}function dr(o={}){let t=P(o.sprintCount,0),e=P(o.sprintWeeks,0);if(t>0&&e>0){let r=t*e;return t>1?`${r} weeks (${t} \xD7 ${e}wk)`:`${r} week${r===1?"":"s"}`}return e>0?`${e} week${e===1?"":"s"}`:o.deadline?`until ${o.deadline}`:"TBD"}function ur(o={}){let t=Number(o.teamFTE),e=o.budgetTier,r=[];return Number.isFinite(t)&&t>0&&r.push(`${t} FTE`),e&&e!=="unset"&&r.push(e),r.length>0?r.join(" \xB7 "):"TBD"}function pr(o={}){let t=P(o.mustHaveCount,0),e=P(o.shouldHaveCount,0);return t>0&&e>0?`${t} must \xB7 ${e} should`:t>0?`${t} must-have`:e>0?`${e} should-have`:"TBD"}function ge(o){return typeof o=="string"&&o.trim().length>0?o:"TBD \u2014 click to set"}var q="http://www.w3.org/2000/svg",hr={scope:{dx:0,dy:-22,anchor:"middle"},time:{dx:-10,dy:14,anchor:"end"},cost:{dx:10,dy:14,anchor:"start"}},mr={scope:{dx:0,dy:-8,anchor:"middle"},time:{dx:-10,dy:28,anchor:"end"},cost:{dx:10,dy:28,anchor:"start"}},fr={scope:{name:"Scope",unit:"# features / story points"},time:{name:"Time",unit:"hours / days / weeks"},cost:{name:"Cost",unit:"FTE / $"}};function ve({value:o={},vertices:t,capacityPoints:e=0,capacitySource:r="formula",qualitySummary:a=""}={}){let s=t||Ut(o),i=document.createElementNS(q,"svg");i.setAttribute("viewBox","-220 -170 440 340"),i.setAttribute("role","group"),i.setAttribute("aria-label",`Project shape: ${e||0} capacity points. Click each corner to edit, or the center to open the quality compass.`);let n=document.createElementNS(q,"polygon");n.setAttribute("class","triangle"),n.setAttribute("points",[`${L(s.scope.x)},${L(s.scope.y)}`,`${L(s.time.x)},${L(s.time.y)}`,`${L(s.cost.x)},${L(s.cost.y)}`].join(" ")),i.append(n);let c=document.createElementNS(q,"g");c.setAttribute("class","center"),c.setAttribute("data-target","quality"),c.setAttribute("tabindex","0"),c.setAttribute("role","button"),c.setAttribute("aria-label",`Quality \u2014 ${ge(a)}. Activate to open the NFR compass.`);let d=document.createElementNS(q,"circle");d.setAttribute("class","capacity-backdrop"),d.setAttribute("cx","0"),d.setAttribute("cy","4"),d.setAttribute("r","32"),c.append(d);let l=document.createElementNS(q,"rect");l.setAttribute("class","hit"),l.setAttribute("x","-36"),l.setAttribute("y","-30"),l.setAttribute("width","72"),l.setAttribute("height","68"),l.setAttribute("rx","34"),c.append(l);let u=document.createElementNS(q,"text");u.setAttribute("class","quality-label"),u.setAttribute("x","0"),u.setAttribute("y","-15"),u.setAttribute("text-anchor","middle"),u.textContent="Quality",c.append(u);let p=document.createElementNS(q,"text");p.setAttribute("class","capacity"),p.setAttribute("x","0"),p.setAttribute("y","7"),p.setAttribute("text-anchor","middle"),p.setAttribute("dominant-baseline","middle"),p.textContent=e>0?String(e):"\u2014",c.append(p);let h=document.createElementNS(q,"text");h.setAttribute("class","capacity-unit"),h.setAttribute("x","0"),h.setAttribute("y","26"),h.setAttribute("text-anchor","middle"),h.textContent=r==="manual"?"pts (manual)":"pts",c.append(h);let f=document.createElementNS(q,"title");f.textContent=ge(a),c.append(f),i.append(c);for(let b of["scope","time","cost"])i.append(br(b,s[b],o));return i}function br(o,t,e){let r=hr[o],a=mr[o],s=fr[o],i=o==="scope"?pr(e.scope):o==="cost"?ur(e.cost):dr(e.time),n=document.createElementNS(q,"g");n.setAttribute("class","vertex"),n.setAttribute("data-axis",o),n.setAttribute("tabindex","0"),n.setAttribute("role","button"),n.setAttribute("aria-label",`${s.name} \u2014 ${i}. Activate to edit.`);let c=document.createElementNS(q,"rect");c.setAttribute("class","hit");let d=160,l=50,u;r.anchor==="end"?u=t.x-d+6:r.anchor==="start"?u=t.x-6:u=t.x-d/2;let p=o==="scope"?t.y-l+6:t.y-6;c.setAttribute("x",String(L(u))),c.setAttribute("y",String(L(p))),c.setAttribute("width",String(d)),c.setAttribute("height",String(l)),c.setAttribute("rx","6"),n.append(c);let h=document.createElementNS(q,"text");h.setAttribute("class","vertex-name"),h.setAttribute("x",String(L(t.x+r.dx))),h.setAttribute("y",String(L(t.y+r.dy))),h.setAttribute("text-anchor",r.anchor),h.textContent=s.name,n.append(h);let f=document.createElementNS(q,"text");f.setAttribute("class","vertex-summary"),f.setAttribute("x",String(L(t.x+a.dx))),f.setAttribute("y",String(L(t.y+a.dy))),f.setAttribute("text-anchor",a.anchor),f.textContent=i,n.append(f);let b=document.createElementNS(q,"title");return b.textContent=`${s.name}: ${i} \u2014 ${s.unit}`,n.append(b),n}function P(o,t){if(o===""||o==null)return t;let e=Number(o);return Number.isFinite(e)&&e>0?e:t}function L(o){return Math.round(o*100)/100}var lt=["time","cost","scope"],dt={time:[{key:"sprintWeeks",label:"Sprint length (weeks)",type:"number",min:1,step:1,value:2,width:"6rem"},{key:"sprintCount",label:"Number of sprints",type:"number",min:1,step:1,value:3,width:"6rem"},{key:"hoursPerWeek",label:"Hours per week (per FTE)",type:"number",min:1,max:168,step:1,value:40,width:"6rem"},{key:"deadline",label:"Deadline (optional)",type:"date",width:"12rem"}],cost:[{key:"teamFTE",label:"Team size (FTE)",type:"number",min:0,step:.5,value:1,width:"6rem"},{key:"budgetTier",label:"Budget tier",type:"select",options:[["solo","Solo"],["small","Small (2-5)"],["medium","Medium (6-15)"],["large","Large (16+)"]],value:"solo",width:"14rem"},{key:"contractorBudget",label:"Contractor budget ($, optional)",type:"number",min:0,step:100,width:"10rem"}],scope:[{key:"mustHaveCount",label:"Must-have feature count",type:"number",min:0,step:1,width:"6rem"},{key:"shouldHaveCount",label:"Should-have feature count",type:"number",min:0,step:1,width:"6rem"},{key:"scopeNotes",label:"Notes",type:"textarea",rows:3,maxlength:2e3}]},ye={scope:"Scope",time:"Time",cost:"Cost"},Vt=class extends C{static formAssociated=!0;static get observedAttributes(){return["data-focus-factor","data-min-capacity","data-quality-href","data-quality-summary","disabled","locked"]}#e;#t={time:{},cost:{},scope:{},capacityPoints:0,capacitySource:"formula",hash:""};#r=null;#a=[];#s="";#o={};constructor(){super(),this.#e=this.attachInternals(),this._adoptInternals(this.#e)}setup(){this.#s=this.getAttribute("data-quality-summary")||"",this.#f(),this.#m(),this.listen(this,"click",t=>this.#i(t)),this.listen(this,"keydown",t=>this.#n(t))}attributeChangedCallback(t){this.isConnected&&(t==="data-focus-factor"||t==="data-min-capacity"?this.#u({source:"attribute"}):t==="data-quality-summary"?(this.#s=this.getAttribute("data-quality-summary")||"",this.#m()):(t==="disabled"||t==="locked")&&this.#v())}get value(){return JSON.parse(JSON.stringify({...this.#t,revisionLog:this.#a}))}set value(t){if(!(!t||typeof t!="object")){for(let e of lt)t[e]&&typeof t[e]=="object"&&(this.#t[e]={...t[e]});t.capacitySource==="manual"&&Number.isFinite(t.capacityPoints)?(this.#r=t.capacityPoints,this.#t.capacitySource="manual"):(this.#r=null,this.#t.capacitySource="formula"),Array.isArray(t.revisionLog)&&(this.#a=[...t.revisionLog]),this.#d(),this.#u({source:"property"})}}get capacityPoints(){return this.#t.capacityPoints}get capacitySource(){return this.#t.capacitySource}get hash(){return this.#t.hash}get revisionLog(){return JSON.parse(JSON.stringify(this.#a))}get qualitySummary(){return this.#s}set qualitySummary(t){this.#s=String(t??""),this.#m()}openEditor(t){if(!lt.includes(t))return;let e=this.#l(t);typeof e.showModal=="function"?e.showModal():e.setAttribute("open","")}revise(t,e,r){if(!t||typeof r!="string"||r.length<10)throw new Error("iron-triangle: revise() requires field and a reason of at least 10 characters");let a=this.#y(t);this.#g(t,e);let s={field:t,from:a,to:e,reason:r};this.#a.push({revisedAt:new Date().toISOString(),changes:[s]}),this.dispatchEvent(new CustomEvent("iron-triangle:revise",{bubbles:!0,composed:!0,detail:s})),this.#d(),this.#u({source:"revise"})}setManual(t){let e=Math.max(1,Math.floor(Number(t)||0));this.#r=e;let r=this.#t.capacitySource;this.#t.capacitySource="manual",r!=="manual"&&this.dispatchEvent(new CustomEvent("iron-triangle:mode",{bubbles:!0,composed:!0,detail:{from:r,to:"manual"}})),this.setState("manual",!0),this.setState("formula",!1),this.#u({source:"manual"})}setFormula(){this.#r=null;let t=this.#t.capacitySource;this.#t.capacitySource="formula",t!=="formula"&&this.dispatchEvent(new CustomEvent("iron-triangle:mode",{bubbles:!0,composed:!0,detail:{from:t,to:"formula"}})),this.setState("manual",!1),this.setState("formula",!0),this.#u({source:"formula"})}recalc(){this.#u({source:"recalc"})}#i(t){let e=t.target.closest?.(".vertex[data-axis]");if(e&&this.contains(e)){t.preventDefault(),this.openEditor(e.dataset.axis);return}let r=t.target.closest?.('.center[data-target="quality"]');r&&this.contains(r)&&(t.preventDefault(),this.#c())}#n(t){if(t.key!=="Enter"&&t.key!==" ")return;let e=t.target.closest?.(".vertex[data-axis]");if(e&&this.contains(e)){t.preventDefault(),this.openEditor(e.dataset.axis);return}let r=t.target.closest?.('.center[data-target="quality"]');r&&this.contains(r)&&(t.preventDefault(),this.#c())}#c(){let t=new CustomEvent("iron-triangle:open-quality",{bubbles:!0,composed:!0,cancelable:!0,detail:{qualitySummary:this.#s,capacityPoints:this.#t.capacityPoints}});if(this.dispatchEvent(t)){let r=this.getAttribute("data-quality-href");r&&window.location.assign(r)}}#l(t){if(this.#o[t])return this.#o[t];let e=document.createElement("dialog");e.className=`iron-triangle-dialog iron-triangle-dialog--${t}`,e.setAttribute("aria-label",`${ye[t]} \u2014 edit`);let r=document.createElement("form");r.method="dialog",r.setAttribute("data-layout","stack"),r.setAttribute("data-layout-gap","m");let a=document.createElement("h3");a.textContent=ye[t],r.append(a);for(let c of dt[t])r.append(gr(t,c,this.#t[t]?.[c.key]));let s=document.createElement("div");s.setAttribute("data-layout","cluster"),s.setAttribute("data-layout-gap","s"),s.setAttribute("data-layout-justify","end");let i=document.createElement("button");i.type="button",i.value="cancel",i.textContent="Cancel",i.addEventListener("click",()=>e.close("cancel"));let n=document.createElement("button");return n.type="submit",n.value="save",n.textContent="Save",s.append(i,n),r.append(s),e.append(r),this.append(e),this.#o[t]=e,r.addEventListener("submit",c=>{c.preventDefault(),this.#p(t,r),e.close("save"),this.#u({source:"dialog",field:t})}),e}#p(t,e){let r={};for(let a of dt[t]){let s=e.querySelector(`[name="${t}.${a.key}"]`);if(!s)continue;let i=s.type==="checkbox"?s.checked:s.value;if(!(i===""||i==null))if(a.type==="number"){let n=Number(i);Number.isFinite(n)&&(r[a.key]=n)}else r[a.key]=i}this.#t[t]=r}#d(){for(let t of lt){let e=this.#o[t];if(e)for(let r of dt[t]){let a=e.querySelector(`[name="${t}.${r.key}"]`);if(!a)continue;let s=this.#t[t]?.[r.key];a.value=s==null?"":String(s)}}}#f(){for(let t of lt)for(let e of dt[t])e.value!==void 0&&this.#t[t][e.key]===void 0&&(this.#t[t][e.key]=e.value);this.#u({source:"init"})}#u({source:t,field:e}={}){let r=Number(this.dataset.focusFactor??.6),a=Number(this.dataset.minCapacity??1),s;this.#t.capacitySource==="manual"&&this.#r!=null?s=this.#r:s=fe(this.#t.time,this.#t.cost,r),Number.isFinite(a)&&s>0&&s<a&&(s=a),this.#t.capacityPoints=s,this.#t.hash=be(this.#t),this.#m(),this.#h(),this.#b(),this.dispatchEvent(new CustomEvent("iron-triangle:change",{bubbles:!0,composed:!0,detail:{...this.value,source:t,field:e}}))}#m(){let t=ve({value:this.#t,vertices:Ut(this.#t),capacityPoints:this.#t.capacityPoints,capacitySource:this.#t.capacitySource,qualitySummary:this.#s}),e=this.querySelector(":scope > svg");e?e.replaceWith(t):this.prepend(t),this.dataset.capacityPoints=String(this.#t.capacityPoints),this.dataset.capacitySource=this.#t.capacitySource}#h(){this.setState("formula",this.#t.capacitySource==="formula"),this.setState("manual",this.#t.capacitySource==="manual"),this.setState("unbudgeted",!(this.#t.capacityPoints>0));let t=this.#t.time?.deadline,e=!1;if(t){let r=new Date(t).getTime();Number.isFinite(r)&&(e=r<Date.now())}this.setState("over-deadline",e)}#b(){try{this.#e.setFormValue(JSON.stringify(this.value))}catch{}}#v(){let t=this.hasAttribute("disabled")||this.hasAttribute("locked");for(let e of Object.values(this.#o))for(let r of e.querySelectorAll("input, select, textarea, button"))r.disabled=t}#y(t){if(t==="capacityPoints")return this.#t.capacityPoints;let[e,r]=t.split(".");return e&&r?this.#t[e]?.[r]:void 0}#g(t,e){if(t==="capacityPoints"){this.setManual(e);return}let[r,a]=t.split(".");!r||!a||(this.#t[r]||(this.#t[r]={}),this.#t[r][a]=e)}};function gr(o,t,e){let r=document.createElement("form-field"),a=`${o}-${t.key}`,s=document.createElement("label");s.setAttribute("for",a),s.textContent=t.label,r.append(s);let i;if(t.type==="select"){i=document.createElement("select");for(let[n,c]of t.options){let d=document.createElement("option");d.value=n,d.textContent=c,(e===n||e==null&&t.value===n)&&(d.selected=!0),i.append(d)}}else t.type==="textarea"?(i=document.createElement("textarea"),t.rows&&(i.rows=t.rows),t.maxlength&&(i.maxLength=t.maxlength),e!=null&&(i.value=String(e))):(i=document.createElement("input"),i.type=t.type,t.min!=null&&(i.min=String(t.min)),t.max!=null&&(i.max=String(t.max)),t.step!=null&&(i.step=String(t.step)),e!=null?i.value=String(e):t.value!=null&&(i.value=String(t.value)));return i.id=a,i.name=`${o}.${t.key}`,t.width&&(i.style.inlineSize=t.width),r.append(i),r}w("iron-triangle",Vt);function vr(o){if(!o)return 0;let t=o.dataset?.capacityCost??o.getAttribute?.("data-capacity-cost"),e=Number(t);return Number.isFinite(e)&&e>0?e:0}function xe(o){let t=0;for(let e of o||[])t+=vr(e);return t}function Wt({capacityPoints:o,qualitySum:t,featureSum:e}){let r=Number.isFinite(o)?o:1/0,a=Math.max(0,Number(t)||0),s=Math.max(0,Number(e)||0),i=Number.isFinite(r)?r-a-s:1/0;return{capacity:r,quality:a,features:s,slack:i}}function _e({capacity:o,quality:t,features:e}){if(!Number.isFinite(o)||o<=0){let s=t+e;return s<=0?{quality:0,features:0,slack:100}:{quality:t/s*100,features:e/s*100,slack:0}}let r=t+e,a=Math.max(o,r);return{quality:t/a*100,features:e/a*100,slack:Math.max(0,(o-r)/a*100)}}var Qt=class extends C{static get observedAttributes(){return["data-bind-triangle","data-bind-quality"]}#e=null;#t=null;#r=null;#a=null;#s=!1;setup(){this.#i(),this.#n(),this.#c(),this.#d()}teardown(){this.#e?.(),this.#t?.(),this.#r?.disconnect(),this.#e=null,this.#t=null,this.#r=null}attributeChangedCallback(t){this.isConnected&&(t==="data-bind-triangle"?(this.#i(),this.#d()):t==="data-bind-quality"&&(this.#n(),this.#d()))}get capacityPoints(){return this.#l()}get qualitySum(){return this.#p()}get featureSum(){return this.#a!=null?this.#a:xe(this.querySelectorAll("[data-capacity-cost]"))}set featureSum(t){this.#a=Number.isFinite(+t)?+t:null,this.#d()}get slack(){return Wt({capacityPoints:this.#l(),qualitySum:this.#p(),featureSum:this.featureSum}).slack}#o(t){if(!t)return null;let e=this.getRootNode();return e.getElementById?e.getElementById(t):document.getElementById(t)}#i(){this.#e?.(),this.#e=null;let t=this.#o(this.dataset.bindTriangle);if(!t||t.localName!=="iron-triangle")return;let e=()=>this.#d();t.addEventListener("iron-triangle:change",e),this.#e=()=>t.removeEventListener("iron-triangle:change",e)}#n(){this.#t?.(),this.#t=null;let t=this.#o(this.dataset.bindQuality);if(!t||t.localName!=="quality-target")return;let e=()=>this.#d();t.addEventListener("quality-target:change",e),this.#t=()=>t.removeEventListener("quality-target:change",e)}#c(){this.#r||(this.#r=new MutationObserver(t=>{t.some(r=>!r.target.closest?.("[data-capacity-table]"))&&this.#d()}),this.#r.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-capacity-cost"]}))}#l(){let t=this.#o(this.dataset.bindTriangle);if(!t||t.localName!=="iron-triangle")return 1/0;let e=t.capacityPoints;return Number.isFinite(e)&&e>0?e:1/0}#p(){let t=this.#o(this.dataset.bindQuality);return!t||t.localName!=="quality-target"?0:Number(t.criticalSum)||0}#d(){let t=Wt({capacityPoints:this.#l(),qualitySum:this.#p(),featureSum:this.featureSum}),e=_e(t),r=this.querySelector(":scope > [data-capacity-table]");r||(r=document.createElement("section"),r.dataset.capacityTable="",this.prepend(r));let a=yr(t.capacity),s=t.quality>0?`\u2212${t.quality} pts`:"0 pts",i=t.features>0?`\u2212${t.features} pts`:"0 pts",n=xr(t.slack);r.innerHTML=`
+      <dl data-layout="grid" class="capacity-ledger" aria-label="Capacity ledger">
+        <div data-row="capacity">
+          <dt>Capacity</dt>
+          <dd class="num">${a}</dd>
+          <dd class="bar"><span class="bar-track"><span class="bar-fill bar-capacity" style="--w:100%"></span></span></dd>
+        </div>
+        <div data-row="quality">
+          <dt>Quality</dt>
+          <dd class="num">${s}</dd>
+          <dd class="bar"><span class="bar-track"><span class="bar-fill bar-quality" style="--w:${e.quality.toFixed(1)}%"></span></span></dd>
+        </div>
+        <div data-row="features">
+          <dt>Features</dt>
+          <dd class="num">${i}</dd>
+          <dd class="bar"><span class="bar-track"><span class="bar-fill bar-features" style="--w:${e.features.toFixed(1)}%"></span></span></dd>
+        </div>
+        <div data-row="slack" data-state="${t.slack<0?"over":"under"}">
+          <dt>Slack</dt>
+          <dd class="num">${n}</dd>
+          <dd class="bar"><span class="bar-track"><span class="bar-fill bar-slack" style="--w:${e.slack.toFixed(1)}%"></span></span></dd>
+        </div>
+      </dl>
+    `,this.setState("overdrawn",t.slack<0);let c=t.slack<0;c!==this.#s&&(this.dispatchEvent(new CustomEvent("capacity-plan:overdrawn",{bubbles:!0,composed:!0,detail:{ledger:t,source:"render"}})),this.#s=c)}};function yr(o){return Number.isFinite(o)?`${o} pts`:"\u221E"}function xr(o){return Number.isFinite(o)?o===0?"0 pts":o>0?`+${o} pts`:`${o} pts`:"\u221E"}w("capacity-plan",Qt);var Yt=Object.freeze(["performance","accessibility","security","reliability","maintainability","observability","compatibility","scalability","portability","internationalization","privacy"]),ut=Object.freeze(["critical","important","acceptable","not-relevant"]),Kt=Object.freeze({critical:"Critical",important:"Important",acceptable:"Acceptable","not-relevant":"Not relevant"}),we=Object.freeze({accessibility:3,performance:5,security:5,reliability:4,observability:3,internationalization:4,compatibility:2,portability:3,privacy:4,scalability:5,maintainability:2}),Ae=Object.freeze({performance:"Performance",accessibility:"Accessibility",security:"Security",reliability:"Reliability",maintainability:"Maintainability",observability:"Observability",compatibility:"Compatibility",scalability:"Scalability",portability:"Portability",internationalization:"Internationalization",privacy:"Privacy"}),va=Object.freeze({accessibility:"a11y",internationalization:"i18n",maintainability:"maint",observability:"obs",compatibility:"compat",portability:"porta",performance:"perf",reliability:"rely",scalability:"scale",security:"sec",privacy:"priv"}),_r=Object.freeze({critical:1,important:.6,acceptable:.3,"not-relevant":0});function G(o){return Ae[o]?Ae[o]:String(o).replace(/[-_]/g," ").replace(/\b\w/g,t=>t.toUpperCase())}function Jt(o,t={}){let e={};for(let r of o)Object.prototype.hasOwnProperty.call(t,r)&&Number.isFinite(Number(t[r]))?e[r]=Math.max(0,Math.floor(Number(t[r]))):Object.prototype.hasOwnProperty.call(we,r)?e[r]=we[r]:e[r]=1;return Object.freeze(e)}function pt(o,t){let e=0;for(let[r,a]of Object.entries(o||{}))a==="critical"&&(e+=Number(t?.[r]??0));return e}function Ce(o){return Object.keys(o||{}).filter(t=>o[t]==="critical")}function Ee(o){let{vector:t={},rationales:e={},costWeights:r={},capacityPoints:a=1/0,overrunRationale:s="",minRationale:i=10,minOverrunRationale:n=10}=o||{},c=[],d=Ce(t);for(let u of d){let p=e[u];(typeof p!="string"||p.trim().length<i)&&c.push(`Critical "${u}" needs a rationale of at least ${i} characters.`)}let l=pt(t,r);return Number.isFinite(a)&&l>a&&(typeof s!="string"||s.trim().length<n)&&c.push(`Over budget by ${l-a} points (${l}/${a}); overrunRationale of at least ${n} characters required.`),{valid:c.length===0,errors:c,criticalSum:l}}function Se({level:o,rationale:t,minRationale:e=10}){return ut.includes(o)?o==="critical"&&(typeof t!="string"||t.trim().length<e)?{ok:!1,reason:"rationale-too-short"}:{ok:!0}:{ok:!1,reason:"pick-level"}}function ke({ility:o,level:t,costWeight:e}){let r=G(o),a=t?Kt[t]||t:"unset",s=Number(e),i=Number.isFinite(s)?`${s} pts`:"? pts";return`${r} \u2014 ${a} \xB7 ${i}`}function $e(o){if(!o||typeof o!="string")return{};try{let t=JSON.parse(o);return t&&typeof t=="object"&&!Array.isArray(t)?t:{}}catch{return{}}}function qe(o){let t=[];for(let e=0;e<o;e++)t.push(-Math.PI/2+2*Math.PI*e/o);return t}function wr({ilities:o,vector:t={},radius:e}){let r=qe(o.length);return o.map((a,s)=>{let i=t[a]||null,n=_r[i]??0;return{ility:a,level:i,x:U(Math.cos(r[s])*e*n),y:U(Math.sin(r[s])*e*n)}})}function Xt({ilities:o,radius:t}){let e=qe(o.length);return o.map((r,a)=>({ility:r,x:U(Math.cos(e[a])*t),y:U(Math.sin(e[a])*t)}))}var I="http://www.w3.org/2000/svg",Ar=Object.freeze([{ratio:1,label:"Critical",className:"ring-critical"},{ratio:.6,label:"Important",className:"ring-important"},{ratio:.3,label:"Acceptable",className:"ring-acceptable"}]),kr=.22;function Ie({ilities:o=[],vector:t={},costWeights:e={},capacityPoints:r=0,radius:a=100}={}){let s=document.createElementNS(I,"svg"),i=a+14,n=i+140,c=i+30;s.setAttribute("viewBox",`${-n} ${-c} ${n*2} ${c*2}`),s.setAttribute("role","group"),s.setAttribute("aria-label",`Quality target. ${Ce(t||{}).length} critical of ${o.length} ilities. Click any axis to edit.`);for(let y of Ar){let A=document.createElementNS(I,"polygon");A.setAttribute("class",`ring ${y.className}`);let S=Xt({ilities:o,radius:a*y.ratio});A.setAttribute("points",S.map($=>`${$.x},${$.y}`).join(" ")),s.append(A)}let d=Xt({ilities:o,radius:a});for(let y of d){let A=document.createElementNS(I,"line");A.setAttribute("class","spoke"),A.setAttribute("x1","0"),A.setAttribute("y1","0"),A.setAttribute("x2",String(y.x)),A.setAttribute("y2",String(y.y)),s.append(A)}let l=wr({ilities:o,vector:t,radius:a}),u=l.filter(y=>Math.hypot(y.x,y.y)>.5);if(u.length>=3){let y=document.createElementNS(I,"polygon");y.setAttribute("class","vector"),y.setAttribute("points",u.map(A=>`${A.x},${A.y}`).join(" ")),s.append(y)}else if(u.length>0)for(let y of u){let A=document.createElementNS(I,"line");A.setAttribute("class","vector-spoke"),A.setAttribute("x1","0"),A.setAttribute("y1","0"),A.setAttribute("x2",String(y.x)),A.setAttribute("y2",String(y.y)),s.append(A)}let p=Xt({ilities:o,radius:i});for(let y=0;y<o.length;y++){let A=o[y],S=l[y],$=p[y],T=Number(e?.[A]??0),z=t?.[A]??null,N=document.createElementNS(I,"g");N.setAttribute("class","axis"),N.setAttribute("data-ility",A),z&&N.setAttribute("data-level",String(z)),N.setAttribute("tabindex","0"),N.setAttribute("role","button"),N.setAttribute("aria-label",`${ke({ility:A,level:z,costWeight:T})}. Activate to edit.`);let D=document.createElementNS(I,"rect");D.setAttribute("class","hit");let ht=Cr($),mt=100,te=22,Le=$.x+(ht==="end"?-mt:ht==="start"?0:-mt/2),ze=$.y-te/2;if(D.setAttribute("x",String(U(Le))),D.setAttribute("y",String(U(ze))),D.setAttribute("width",String(mt)),D.setAttribute("height",String(te)),D.setAttribute("rx","4"),N.append(D),z){let Q=document.createElementNS(I,"circle");Q.setAttribute("class","marker"),Q.setAttribute("cx",String(S.x)),Q.setAttribute("cy",String(S.y)),Q.setAttribute("r","4"),N.append(Q)}let F=document.createElementNS(I,"text");F.setAttribute("class","axis-label"),F.setAttribute("x",String($.x)),F.setAttribute("y",String($.y)),F.setAttribute("text-anchor",ht),F.setAttribute("dominant-baseline","middle"),F.textContent=G(A),N.append(F);let ee=document.createElementNS(I,"title");ee.textContent=ke({ility:A,level:z,costWeight:T}),N.append(ee),s.append(N)}let h=document.createElementNS(I,"g");h.setAttribute("class","center");let f=pt(t,e);Number.isFinite(r)&&f>r&&h.setAttribute("data-over","");let v=a*kr,x=document.createElementNS(I,"circle");x.setAttribute("class","capacity-backdrop"),x.setAttribute("cx","0"),x.setAttribute("cy","0"),x.setAttribute("r",String(U(v))),h.append(x);let _=document.createElementNS(I,"text");_.setAttribute("class","capacity-sum"),_.setAttribute("x","0"),_.setAttribute("y","-3"),_.setAttribute("text-anchor","middle"),_.setAttribute("dominant-baseline","middle"),_.textContent=String(f),h.append(_);let g=document.createElementNS(I,"text");return g.setAttribute("class","capacity-denom"),g.setAttribute("x","0"),g.setAttribute("y","11"),g.setAttribute("text-anchor","middle"),g.textContent=Number.isFinite(r)?`of ${r}`:"unbounded",h.append(g),s.append(h),s}function U(o){return Math.round(o*100)/100}function Cr(o){return Math.abs(o.x)<4?"middle":o.x>0?"start":"end"}var Gt=class extends C{static formAssociated=!0;static get observedAttributes(){return["data-bind-to","data-capacity-points","data-cost-weights","data-radius","data-show-envelope","data-min-rationale","data-max-rationale","data-min-overrun-rationale","data-max-overrun-rationale","disabled","locked"]}#e;#t=[...Yt];#r={};#a={};#s=Jt(Yt);#o="";#i=!1;#n=null;#c=null;#l={};#p=null;constructor(){super(),this.#e=this.attachInternals(),this._adoptInternals(this.#e)}setup(){this.#y(),this.#I(),this.#C(),this.#b(),this.listen(this,"click",t=>this.#d(t)),this.listen(this,"keydown",t=>this.#f(t)),this.listen(this,"input",t=>this.#u(t))}teardown(){this.#n?.(),this.#n=null}attributeChangedCallback(t){this.isConnected&&(t==="data-bind-to"?(this.#I(),this.#C()):t==="data-capacity-points"?this.#C():t==="data-cost-weights"?(this.#y(),this.#C()):t==="data-radius"||t==="data-show-envelope"?this.#C():(t==="disabled"||t==="locked")&&this.#T())}get vector(){return{...this.#r}}set vector(t){this.#g(t),this.#E("property")}get rationales(){return{...this.#a}}set rationales(t){this.#x(t),this.#E("property")}get costWeights(){return{...this.#s}}get capacityPoints(){return this.#w()}set capacityPoints(t){this.#c=Number.isFinite(+t)?+t:null,this.#E("property")}get criticalSum(){return pt(this.#r,this.#s)}get overBudget(){let t=this.#w();return Number.isFinite(t)&&this.criticalSum>t}get overrunRationale(){return this.#o}set overrunRationale(t){this.#o=String(t??"");let e=this.querySelector("[data-quality-overrun] textarea");e&&(e.value=this.#o),this.#$()}get ilities(){return[...this.#t]}set ilities(t){!Array.isArray(t)||t.length===0||(this.#t=[...t],this.#y(),this.#E("property"))}get value(){return{vector:{...this.#r},rationales:{...this.#a},costWeights:{...this.#s},capacityPoints:this.#_(),capacitySource:this.#k(),criticalSum:this.criticalSum,overrunRationale:this.#o||void 0,ironTriangleHash:this.#N()}}openEditor(t){if(!this.#t.includes(t))return;let e=this.#m(t);typeof e.showModal=="function"?e.showModal():e.setAttribute("open","")}checkValidity(){let{valid:t,errors:e}=Ee({vector:this.#r,rationales:this.#a,costWeights:this.#s,capacityPoints:this.#w(),overrunRationale:this.#o,minRationale:this.#S(),minOverrunRationale:this.#q()});this.setState("missing-rationale",!t);let r=this.querySelector("[data-quality-errors]");return r&&(r.textContent=e.join(" ")),t}#d(t){let e=t.target.closest?.(".axis[data-ility]");e&&this.contains(e)&&(t.preventDefault(),this.openEditor(e.dataset.ility))}#f(t){if(t.key!=="Enter"&&t.key!==" ")return;let e=t.target.closest?.(".axis[data-ility]");e&&this.contains(e)&&(t.preventDefault(),this.openEditor(e.dataset.ility))}#u(t){let e=t.target;e?.matches?.("[data-quality-overrun] textarea")&&(this.#o=e.value,this.checkValidity(),this.#$())}#m(t){if(this.#l[t])return this.#h(t),this.#l[t];let e=document.createElement("dialog");e.className=`quality-dialog quality-dialog--${t}`,e.setAttribute("aria-label",`${G(t)} \u2014 edit priority`);let r=document.createElement("form");r.method="dialog",r.setAttribute("data-layout","stack"),r.setAttribute("data-layout-gap","m");let a=document.createElement("h3");a.textContent=G(t),r.append(a);let s=document.createElement("fieldset");s.setAttribute("data-layout","stack"),s.setAttribute("data-layout-gap","2xs");let i=document.createElement("legend");i.textContent="Priority",s.append(i);for(let f of ut){let b=document.createElement("label"),v=document.createElement("input");v.type="radio",v.name="level",v.value=f,b.append(v,document.createTextNode(" "+Kt[f])),s.append(b)}r.append(s);let n=document.createElement("form-field"),c=document.createElement("label");c.setAttribute("for",`quality-${t}-rationale`),c.textContent="Rationale (required when Critical)";let d=document.createElement("textarea");d.id=`quality-${t}-rationale`,d.name="rationale",d.rows=3,d.minLength=this.#S(),d.maxLength=this.#M(),d.placeholder=`Why \u2265 ${this.#S()} chars`,n.append(c,d),r.append(n);let l=document.createElement("p");l.className="message message-error",l.dataset.dialogError="",l.hidden=!0,r.append(l);let u=document.createElement("div");u.setAttribute("data-layout","cluster"),u.setAttribute("data-layout-gap","s"),u.setAttribute("data-layout-justify","end");let p=document.createElement("button");p.type="button",p.textContent="Cancel",p.addEventListener("click",()=>e.close("cancel"));let h=document.createElement("button");return h.type="submit",h.textContent="Save",u.append(p,h),r.append(u),e.append(r),this.append(e),this.#l[t]=e,r.addEventListener("submit",f=>{f.preventDefault();let v=r.querySelector('input[name="level"]:checked')?.value,_=r.querySelector('textarea[name="rationale"]')?.value??"",g=Se({level:v,rationale:_,minRationale:this.#S()});if(!g.ok){l.hidden=!1,l.textContent=g.reason==="pick-level"?"Pick a priority level.":`Rationale must be at least ${this.#S()} characters.`;return}this.#r[t]=v??"",v==="critical"?this.#a[t]=_.trim():delete this.#a[t],e.close("save"),this.#E("dialog",t)}),this.#h(t),e}#h(t){let e=this.#l[t];if(!e)return;let r=this.#r[t];for(let i of e.querySelectorAll('input[name="level"]')){let n=i;n.checked=n.value===r}let a=e.querySelector('textarea[name="rationale"]');a&&(a.value=this.#a[t]||"");let s=e.querySelector("[data-dialog-error]");s&&(s.hidden=!0,s.textContent="")}#b(){if(this.#p)return;let t=document.createElement("section");t.className="quality-footer",t.dataset.qualityFooter="",t.setAttribute("data-layout","stack"),t.setAttribute("data-layout-gap","s");let e=document.createElement("section");e.dataset.qualityOverrun="",e.hidden=!0,e.innerHTML=`
+      <strong>Over budget \u2014 explain why.</strong>
+      <small data-overrun-prompt></small>
+      <form-field>
+        <label for="quality-overrun">Overrun rationale (\u2265 ${this.#q()} chars)</label>
+        <textarea id="quality-overrun" name="overrunRationale"
+                  minlength="${this.#q()}"
+                  maxlength="${this.#L()}"
+                  rows="3"></textarea>
+      </form-field>
+    `,t.append(e);let r=document.createElement("p");r.dataset.qualityErrors="",r.className="message message-error",r.setAttribute("role","alert"),t.append(r),this.append(t),this.#p=t}#v(){if(!this.#p)return;let t=this.#w(),e=this.criticalSum,r=Number.isFinite(t)&&e>t,a=this.#p.querySelector("[data-quality-overrun]");if(a){a.hidden=!r;let s=a.querySelector("[data-overrun-prompt]");s&&Number.isFinite(t)&&(s.textContent=`You're over budget by ${e-t} points (${e}/${t}).`)}}#y(){let t=$e(this.getAttribute("data-cost-weights")||"");this.#s=Jt(this.#t,t)}#g(t){if(!(!t||typeof t!="object"))for(let[e,r]of Object.entries(t))ut.includes(r)&&(this.#r[e]=r)}#x(t){if(!(!t||typeof t!="object"))for(let[e,r]of Object.entries(t))this.#a[e]=String(r??"")}#w(){let t=this.#A();if(t&&Number.isFinite(t.capacityPoints)&&t.capacityPoints>0)return t.capacityPoints;let e=Number(this.getAttribute("data-capacity-points"));if(Number.isFinite(e)&&e>0)return e;let r=this.#c;return r!==null&&Number.isFinite(r)&&r>0?r:1/0}#_(){let t=this.#w();return Number.isFinite(t)?t:null}#k(){let t=this.#A();return t?.capacitySource==="manual"?"manual":t?"formula":(this.getAttribute("data-capacity-points"),"manual")}#A(){let t=this.getAttribute("data-bind-to");if(!t)return null;let e=this.getRootNode(),r=e.getElementById?e.getElementById(t):document.getElementById(t);return r&&r.localName==="iron-triangle"?r:null}#N(){return this.#A()?.hash||null}#I(){this.#n?.(),this.#n=null;let t=this.#A();if(!t)return;let e=()=>this.#E("iron-triangle");t.addEventListener("iron-triangle:change",e),this.#n=()=>t.removeEventListener("iron-triangle:change",e)}#C(){let t=Er(Number(this.dataset.radius??100),30,400),e=this.#w(),r=Ie({ilities:this.#t,vector:this.#r,costWeights:this.#s,capacityPoints:e,radius:t}),a=this.querySelector(":scope > svg");a?a.replaceWith(r):this.prepend(r)}#E(t,e){this.#C(),this.#v();let r=this.#w(),a=this.criticalSum,s=Number.isFinite(r)&&a>r;if(this.setState("over-budget",s),this.#$(),s!==this.#i){let i=s?"quality-target:over-budget":"quality-target:under-budget",n=s?{delta:a-r,criticalSum:a,capacityPoints:r}:{slack:r-a,criticalSum:a,capacityPoints:r};this.dispatchEvent(new CustomEvent(i,{bubbles:!0,composed:!0,detail:n})),this.#i=s}this.dispatchEvent(new CustomEvent("quality-target:change",{bubbles:!0,composed:!0,detail:{...this.value,source:t,field:e}}))}#$(){try{this.#e.setFormValue(JSON.stringify(this.value))}catch{}}#T(){let t=this.hasAttribute("disabled")||this.hasAttribute("locked");for(let e of Object.values(this.#l))for(let r of e.querySelectorAll("input, textarea, select, button"))r.disabled=t}#S(){return Math.max(0,parseInt(this.dataset.minRationale??"10",10)||10)}#M(){return Math.max(10,parseInt(this.dataset.maxRationale??"200",10)||200)}#q(){return Math.max(0,parseInt(this.dataset.minOverrunRationale??"10",10)||10)}#L(){return Math.max(10,parseInt(this.dataset.maxOverrunRationale??"400",10)||400)}};function Er(o,t,e){return Math.max(t,Math.min(e,o))}w("quality-target",Gt);var Ne=`
+  :host {
+    --_padding:        var(--requirement-card-padding, var(--size-m, 1rem));
+    --_radius:         var(--requirement-card-radius, var(--radius-m, 0.5rem));
+    --_gap:            var(--requirement-card-gap, var(--size-2xs, 0.25rem));
+    --_surface:        var(--requirement-card-surface, var(--color-surface, #fff));
+    --_border:         var(--requirement-card-border, 1px solid var(--color-border, #e5e7eb));
+    --_text:           var(--requirement-card-text, var(--color-text, #1a1a1a));
+    --_muted:          var(--requirement-card-muted, var(--color-text-muted, #6b7280));
+    --_critical-bg:    var(--requirement-card-critical-bg,    var(--color-error-subtle, oklch(95% 0.05 27)));
+    --_critical-fg:    var(--requirement-card-critical-fg,    var(--color-error, #dc2626));
+    --_important-bg:   var(--requirement-card-important-bg,   var(--color-warning-subtle, oklch(95% 0.05 80)));
+    --_important-fg:   var(--requirement-card-important-fg,   var(--color-warning, #b45309));
+    --_acceptable-bg:  var(--requirement-card-acceptable-bg,  var(--color-success-subtle, oklch(95% 0.05 145)));
+    --_acceptable-fg:  var(--requirement-card-acceptable-fg,  var(--color-success, #15803d));
+    --_skipped-bg:     var(--requirement-card-skipped-bg,     var(--color-surface-raised, var(--color-surface, #f5f5f5)));
+    --_skipped-fg:     var(--requirement-card-skipped-fg,     var(--color-text-muted, #6b7280));
+    --_conflict:       var(--requirement-card-conflict-color, var(--color-error, #dc2626));
+
+    display: block;
+    padding: var(--_padding);
+    border-radius: var(--_radius);
+    background: var(--_surface);
+    border: var(--_border);
+    color: var(--_text);
+    container-type: inline-size;
+  }
+
+  .card {
+    display: grid;
+    gap: var(--_gap);
+  }
+
+  .head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--size-s, 0.75rem);
+  }
+
+  .name {
+    font-weight: var(--font-weight-semibold, 600);
+    font-size: var(--font-size-md, 1rem);
+  }
+
+  .badge ::slotted([slot="badge"]) {
+    font-size: var(--font-size-xs, 0.75em);
+    color: var(--_muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .pill ::slotted([slot="priority-pill"]),
+  .priority-default {
+    display: inline-block;
+    padding: 0.15em 0.6em;
+    border-radius: var(--radius-pill, 999px);
+    font-size: var(--font-size-xs, 0.75em);
+    font-weight: var(--font-weight-semibold, 600);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* Priority-driven surface tinting on the card itself (when no slotted pill) */
+  :host(:state(priority-critical))     { border-color: var(--_critical-fg); }
+  :host(:state(priority-important))    { border-color: var(--_important-fg); }
+  :host(:state(priority-acceptable))   { border-color: var(--_acceptable-fg); }
+  :host(:state(priority-not-relevant)) { opacity: 0.6; }
+
+  :host(:state(priority-critical))     .priority-default { background: var(--_critical-bg);    color: var(--_critical-fg); }
+  :host(:state(priority-important))    .priority-default { background: var(--_important-bg);   color: var(--_important-fg); }
+  :host(:state(priority-acceptable))   .priority-default { background: var(--_acceptable-bg);  color: var(--_acceptable-fg); }
+  :host(:state(priority-not-relevant)) .priority-default { background: var(--_skipped-bg);     color: var(--_skipped-fg); text-decoration: line-through; }
+
+  /* Hide the default pill when the author supplied one via slot */
+  :host(:state(has-priority-pill)) .priority-default { display: none; }
+
+  .rationale ::slotted([slot="rationale"]) {
+    color: var(--_muted);
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: 1.45;
+  }
+
+  .conflicts ::slotted([slot="conflicts"]) {
+    color: var(--_conflict);
+    font-size: var(--font-size-sm, 0.875rem);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  /* When no rationale or conflicts content, collapse the slot row */
+  :host(:not(:state(has-rationale))) .rationale,
+  :host(:not(:state(has-conflicts))) .conflicts { display: none; }
+
+  /* Conflict flag */
+  :host([data-conflict]) {
+    border-color: var(--_conflict);
+    box-shadow: inset 0 0 0 1px var(--_conflict);
+  }
+
+  /* Interactive: bubble click event so parents can wire up navigation */
+  :host { cursor: default; }
+  :host(:state(interactive)) { cursor: pointer; }
+  :host(:state(interactive)):hover { background: color-mix(in oklab, var(--_surface) 92%, currentColor 8%); }
+  :host(:focus-visible) {
+    outline: 2px solid var(--color-focus-ring, var(--color-interactive, currentColor));
+    outline-offset: 2px;
+  }
+`;var Te=Object.freeze(["critical","important","acceptable","not-relevant"]),Sr=Object.freeze({critical:"Critical",important:"Important",acceptable:"Acceptable","not-relevant":"Not relevant"}),Me=["badge","priority-pill","rationale","conflicts"],$r=`
+  <style>${Ne}</style>
+  <article class="card" part="card">
+    <header class="head" part="head">
+      <span class="name" part="name"><slot name="name"></slot></span>
+      <span class="badge" part="badge"><slot name="badge"></slot></span>
+    </header>
+    <span class="pill" part="pill">
+      <slot name="priority-pill"><span class="priority-default" part="priority-default" data-priority-default></span></slot>
+    </span>
+    <p class="rationale" part="rationale"><slot name="rationale"></slot></p>
+    <p class="conflicts" part="conflicts"><slot name="conflicts"></slot></p>
+  </article>
+`,Zt=class extends C{static get observedAttributes(){return["data-priority","data-conflict","tabindex"]}setup(){if(this.shadowRoot)for(let t of Me){let e=this.shadowRoot.querySelector(`slot[name="${t}"]`);this.#t(t,e)}else{let t=this.attachShadow({mode:"open"});t.innerHTML=$r;for(let e of Me){let r=t.querySelector(`slot[name="${e}"]`);r?.addEventListener("slotchange",()=>this.#t(e,r)),this.#t(e,r)}}this.#r(),this.#a(),this.#s(),this.listen(this,"click",t=>this.#o(t)),this.listen(this,"keydown",t=>{let e=t;(e.key==="Enter"||e.key===" ")&&this.#e&&(e.preventDefault(),this.#o(e))})}attributeChangedCallback(t){this.isConnected&&(t==="data-priority"?(this.#r(),this.#a()):t==="data-conflict"||t==="tabindex"&&this.#s())}get priority(){return(this.dataset.priority||"").toLowerCase()}set priority(t){let e=String(t||"").toLowerCase();Te.includes(e)?this.dataset.priority=e:delete this.dataset.priority}get hasConflict(){return this.hasAttribute("data-conflict")}set hasConflict(t){t?this.setAttribute("data-conflict",""):this.removeAttribute("data-conflict")}get#e(){return this.hasAttribute("tabindex")||this.closest("a[href], button")}#t(t,e){let r=!!e&&e.assignedNodes({flatten:!0}).some(a=>a.nodeType===Node.ELEMENT_NODE||a.nodeType===Node.TEXT_NODE&&a.textContent.trim().length>0);this.setState(`has-${t}`,r)}#r(){let t=(this.dataset.priority||"").toLowerCase();for(let e of Te)this.setState(`priority-${e}`,e===t)}#a(){let t=(this.dataset.priority||"").toLowerCase(),e=this.shadowRoot?.querySelector("[data-priority-default]");e&&(e.textContent=Sr[t]||"")}#s(){this.setState("interactive",!!this.#e)}#o(t){this.#e&&this.dispatchEvent(new CustomEvent("requirement-card:click",{bubbles:!0,composed:!0,detail:{priority:this.priority||null,hasConflict:this.hasConflict,originalEvent:t}}))}};w("requirement-card",Zt);