vanilla-breeze 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/cdn/components/adr-record.js +383 -0
  2. package/dist/cdn/components/adr-wc.js +403 -0
  3. package/dist/cdn/components/analytics-panel.js +34 -0
  4. package/dist/cdn/components/author-index.js +3 -0
  5. package/dist/cdn/components/brand-mark.js +2 -0
  6. package/dist/cdn/components/calendar-wc.js +2 -2
  7. package/dist/cdn/components/carousel-wc.js +1 -1
  8. package/dist/cdn/components/chart-wc.js +25 -25
  9. package/dist/cdn/components/color-palette.js +13 -7
  10. package/dist/cdn/components/comment-wc.js +2 -0
  11. package/dist/cdn/components/consent-banner.js +1 -1
  12. package/dist/cdn/components/content-lens.js +2 -0
  13. package/dist/cdn/components/day-view.js +2 -0
  14. package/dist/cdn/components/empathy-map.js +42 -25
  15. package/dist/cdn/components/flow-diagram.js +2 -0
  16. package/dist/cdn/components/font-pairer.js +108 -0
  17. package/dist/cdn/components/gantt-chart.js +2 -0
  18. package/dist/cdn/components/geo-map.js +7 -7
  19. package/dist/cdn/components/glossary-wc.js +2 -0
  20. package/dist/cdn/components/gradient-builder.js +52 -0
  21. package/dist/cdn/components/highlight-wc.js +3 -0
  22. package/dist/cdn/components/manifest.json +134 -26
  23. package/dist/cdn/components/markdown-viewer.js +3 -3
  24. package/dist/cdn/components/motion-specimen.js +21 -0
  25. package/dist/cdn/components/note-wc.js +3 -0
  26. package/dist/cdn/components/notification-wc.js +37 -0
  27. package/dist/cdn/components/page-info.js +55 -24
  28. package/dist/cdn/components/page-toc.js +1 -1
  29. package/dist/cdn/components/popularity-index.js +9 -0
  30. package/dist/cdn/components/print-page.js +1 -1
  31. package/dist/cdn/components/recently-visited.js +3 -0
  32. package/dist/cdn/components/review-surface.js +541 -0
  33. package/dist/cdn/components/selection-menu.js +2 -0
  34. package/dist/cdn/components/semantic-palette.js +30 -0
  35. package/dist/cdn/components/settings-panel.js +55 -51
  36. package/dist/cdn/components/share-wc.js +2 -2
  37. package/dist/cdn/components/site-map-wc.js +2 -0
  38. package/dist/cdn/components/spacing-specimen.js +5 -5
  39. package/dist/cdn/components/split-surface.js +1 -1
  40. package/dist/cdn/components/text-reader.js +2 -2
  41. package/dist/cdn/components/theme-export.js +18 -0
  42. package/dist/cdn/components/theme-picker.js +58 -58
  43. package/dist/cdn/components/token-specimen.js +25 -20
  44. package/dist/cdn/components/topic-map.js +3 -0
  45. package/dist/cdn/components/trust-filter.js +4 -0
  46. package/dist/cdn/components/type-specimen.js +16 -13
  47. package/dist/cdn/components/user-journey.js +48 -30
  48. package/dist/cdn/components/user-persona.js +17 -15
  49. package/dist/cdn/components/user-story.js +55 -22
  50. package/dist/cdn/components/watch-wc.js +3 -0
  51. package/dist/cdn/components/week-view.js +2 -0
  52. package/dist/cdn/components/work-item.js +446 -0
  53. package/dist/cdn/packs/design-system.full.js +124 -47
  54. package/dist/cdn/packs/effects.full.js +1 -1
  55. package/dist/cdn/packs/kawaii.full.css +1 -1
  56. package/dist/cdn/packs/kawaii.full.js +1 -1
  57. package/dist/cdn/packs/kawaii.theme.css +1 -1
  58. package/dist/cdn/packs/manifest.json +10 -40
  59. package/dist/cdn/packs/prototype.full.js +1 -1
  60. package/dist/cdn/packs/ui.full.css +1 -1
  61. package/dist/cdn/packs/ui.full.js +50 -50
  62. package/dist/cdn/packs/ux-planning.full.css +1 -1
  63. package/dist/cdn/packs/ux-planning.full.js +1546 -92
  64. package/dist/cdn/themes/8bit.css +1 -1
  65. package/dist/cdn/themes/alpha1999.css +1 -1
  66. package/dist/cdn/themes/bauhaus.css +1 -1
  67. package/dist/cdn/themes/brutalist.css +1 -1
  68. package/dist/cdn/themes/claymorphism.css +1 -1
  69. package/dist/cdn/themes/cottagecore.css +1 -1
  70. package/dist/cdn/themes/cyber.css +1 -1
  71. package/dist/cdn/themes/genai.css +1 -1
  72. package/dist/cdn/themes/glassmorphism.css +1 -1
  73. package/dist/cdn/themes/kawaii.css +1 -1
  74. package/dist/cdn/themes/magna.css +1 -1
  75. package/dist/cdn/themes/manifest.json +20 -20
  76. package/dist/cdn/themes/nes.css +1 -1
  77. package/dist/cdn/themes/neumorphism.css +1 -1
  78. package/dist/cdn/themes/organic.css +1 -1
  79. package/dist/cdn/themes/rough.css +1 -1
  80. package/dist/cdn/themes/startup.css +1 -1
  81. package/dist/cdn/themes/super2026.css +1 -1
  82. package/dist/cdn/themes/terminal.css +1 -1
  83. package/dist/cdn/themes/vaporwave.css +1 -1
  84. package/dist/cdn/themes/win9x.css +1 -1
  85. package/dist/cdn/vanilla-breeze-charts.js +25 -25
  86. package/dist/cdn/vanilla-breeze-core.css +1 -1
  87. package/dist/cdn/vanilla-breeze-core.js +119 -47
  88. package/dist/cdn/vanilla-breeze-dev.js +1 -1
  89. package/dist/cdn/vanilla-breeze-extras.js +154 -74
  90. package/dist/cdn/vanilla-breeze.css +1 -1
  91. package/dist/cdn/vanilla-breeze.js +1988 -248
  92. package/package.json +8 -6
  93. package/dist/cdn/packs/retro.bundle.js +0 -2
  94. package/dist/cdn/packs/retro.components.js +0 -1
  95. package/dist/cdn/packs/retro.effects.css +0 -2
  96. package/dist/cdn/packs/retro.effects.js +0 -16
  97. package/dist/cdn/packs/retro.full.css +0 -5
  98. package/dist/cdn/packs/retro.full.js +0 -16
  99. package/dist/cdn/packs/retro.theme.css +0 -2
@@ -1,4 +1,4 @@
1
- var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;function b(p,t,e={}){let r=e.priority??10,s={impl:t,bundle:e.bundle,contract:e.contract,priority:r},a=D.get(p);if(customElements.get(p)){if(!a||a.priority>=r){a&&a.priority===r&&a.impl!==t&&console.warn(`[VB Bundle] Tag <${p}> already registered by "${a.bundle}" (priority ${a.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${p}> defined by "${a.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(a&&a.priority>=r){a.priority===r&&console.warn(`[VB Bundle] Tag <${p}> already registered by "${a.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}D.set(p,s),customElements.define(p,t)}var A=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,r,s){t.addEventListener(e,r,s),this.#e.push(()=>t.removeEventListener(e,r,s))}setup(){}teardown(){}};var E=class p extends A{#e=null;#t=null;#a=!1;#i=null;setup(){this.setAttribute("role","list"),this.#a=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.#o(),this.#n(),this.#y(),this.#r()}teardown(){this.#e&&(this.#e.remove(),this.#e=null),p.#p?.source===this&&(p.#p=null)}get draggableChildren(){return[...this.querySelectorAll(':scope > [draggable="true"]')]}get group(){return this.getAttribute("group")||null}get orientation(){return this.getAttribute("orientation")||"vertical"}get sortedOrder(){return this.draggableChildren.map(t=>t.dataset.id)}#r(){for(let t of this.draggableChildren)t.getAttribute("role")||t.setAttribute("role","listitem"),t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.hasAttribute("aria-grabbed")||t.setAttribute("aria-grabbed","false")}#o(){this.#e=document.createElement("div"),this.#e.setAttribute("role","status"),this.#e.setAttribute("aria-live","polite"),this.#e.setAttribute("aria-atomic","true"),this.#e.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",this.prepend(this.#e)}#s(t){let e=this.#e;e&&(e.textContent="",requestAnimationFrame(()=>{e.textContent=t}))}#n(){this.listen(this,"pointerdown",t=>{this.#i=t.target}),this.listen(this,"dragstart",this.#c.bind(this)),this.listen(this,"dragover",this.#d.bind(this)),this.listen(this,"dragleave",this.#l.bind(this)),this.listen(this,"drop",this.#h.bind(this)),this.listen(this,"dragend",this.#f.bind(this))}#c(t){let e=t.target.closest('[draggable="true"]');if(!e||e.parentElement!==this||this.hasAttribute("disabled"))return;let r=e.querySelector("[data-drag-handle]");if(r&&!r.contains(this.#i)){t.preventDefault();return}e.setAttribute("data-dragging",""),t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",e.dataset.id||""),t.dataTransfer.setData("application/x-drag-surface-group",this.group||"");let s=this.#m(e);p.#p={item:e,source:this,originalIndex:s},this.dispatchEvent(new CustomEvent("drag-surface:reorder-start",{bubbles:!0}))}#d(t){let e=p.#p;if(!e||(this.group||e.source.group)&&this.group!==e.source.group)return;t.preventDefault(),t.dataTransfer.dropEffect="move",this.setAttribute("data-drag-over","");let r=this.orientation==="horizontal"?t.clientX:t.clientY;this.#k(r)}#l(t){t.relatedTarget&&!this.contains(t.relatedTarget)&&(this.removeAttribute("data-drag-over"),this.#v())}#h(t){t.preventDefault(),this.removeAttribute("data-drag-over"),this.#v();let e=p.#p;if(!e)return;let{item:r,source:s,originalIndex:a}=e,i=this.orientation==="horizontal"?t.clientX:t.clientY,o=this.#A(i);if(s===this){this.#g(r,o),this.#u();let c=this.#m(r);this.#b(r),this.dispatchEvent(new CustomEvent("drag-surface:reorder",{bubbles:!0,detail:{item:r,itemId:r.dataset.id,oldIndex:a,newIndex:c,order:this.sortedOrder}}))}else this.#g(r,o),this.#u(),s.#u(),this.#b(r),this.dispatchEvent(new CustomEvent("drag-surface:transfer",{bubbles:!0,detail:{item:r,itemId:r.dataset.id,fromSurface:s,toSurface:this,newIndex:this.#m(r),fromOrder:s.sortedOrder,toOrder:this.sortedOrder}}))}#f(){let t=p.#p;t?.item&&t.item.removeAttribute("data-dragging"),this.removeAttribute("data-drag-over"),this.#v(),p.#p=null,this.dispatchEvent(new CustomEvent("drag-surface:reorder-end",{bubbles:!0}))}#y(){this.listen(this,"keydown",this.#x.bind(this))}#x(t){let e=t.target.closest('[draggable="true"]');if(!e||e.parentElement!==this||this.hasAttribute("disabled"))return;let r=e.getAttribute("aria-grabbed")==="true",s=this.orientation==="horizontal",a=s?"ArrowLeft":"ArrowUp",i=s?"ArrowRight":"ArrowDown";if(t.key===" "||t.key==="Enter"){if(t.preventDefault(),r){e.setAttribute("aria-grabbed","false"),this.removeAttribute("data-reorder-mode"),this.#u(),this.#b(e);let l=this.#m(e),n=this.draggableChildren;this.#s(`${this.#_(e)}, dropped at position ${l+1} of ${n.length}`),this.dispatchEvent(new CustomEvent("drag-surface:reorder",{bubbles:!0,detail:{item:e,itemId:e.dataset.id,oldIndex:this.#t,newIndex:l,order:this.sortedOrder}})),this.dispatchEvent(new CustomEvent("drag-surface:reorder-end",{bubbles:!0})),this.#t=null}else{this.#t=this.#m(e),e.setAttribute("aria-grabbed","true"),this.setAttribute("data-reorder-mode","");let l=this.draggableChildren;this.#s(`${this.#_(e)}, grabbed. Position ${this.#t+1} of ${l.length}. Use arrow keys to move, Enter to drop, Escape to cancel.`),this.dispatchEvent(new CustomEvent("drag-surface:reorder-start",{bubbles:!0}))}return}if(!r&&(t.key===a||t.key===i)){t.preventDefault();let l=this.draggableChildren,n=l.indexOf(e),d=t.key===a?Math.max(0,n-1):Math.min(l.length-1,n+1);d!==n&&l[d].focus();return}if(r&&(t.key===a||t.key===i)){t.preventDefault();let l=this.draggableChildren,n=l.indexOf(e),d=t.key===a?Math.max(0,n-1):Math.min(l.length-1,n+1);d!==n&&(this.#g(e,d),e.focus(),this.#s(`Position ${d+1} of ${l.length}`));return}let o=s?"ArrowUp":"ArrowLeft",c=s?"ArrowDown":"ArrowRight";if(r&&(t.key===o||t.key===c)){if(t.preventDefault(),!this.group)return;let l=t.key===c?1:-1,n=this.#w(l);if(!n)return;n.appendChild(e),n.#u(),this.#u(),n.#b(e),e.focus();let d=n.getAttribute("aria-label")||"next surface";n.#s(`Moved to ${d}`),n.dispatchEvent(new CustomEvent("drag-surface:transfer",{bubbles:!0,detail:{item:e,itemId:e.dataset.id,fromSurface:this,toSurface:n,newIndex:n.draggableChildren.indexOf(e),fromOrder:this.sortedOrder,toOrder:n.sortedOrder}})),this.removeAttribute("data-reorder-mode"),n.setAttribute("data-reorder-mode",""),this.#t=null;return}if(r&&t.key==="Escape"){t.preventDefault(),e.setAttribute("aria-grabbed","false"),this.removeAttribute("data-reorder-mode"),this.#t!=null&&(this.#g(e,this.#t),e.focus()),this.#s("Reorder cancelled"),this.dispatchEvent(new CustomEvent("drag-surface:reorder-end",{bubbles:!0})),this.#t=null;return}!r&&t.key==="Escape"&&(t.preventDefault(),e.blur())}#b(t){t.setAttribute("data-just-dropped",""),t.addEventListener("animationend",()=>{t.removeAttribute("data-just-dropped")},{once:!0}),setTimeout(()=>t.removeAttribute("data-just-dropped"),500)}#w(t){if(!this.group)return null;let e=[...document.querySelectorAll(`drag-surface[group="${this.group}"]`)];if(e.length<2)return null;e.sort((a,i)=>{let o=a.getBoundingClientRect(),c=i.getBoundingClientRect();return o.left-c.left||o.top-c.top});let r=e.indexOf(this);return e[r+t]||null}#_(t){return t.dataset.id||t.textContent.trim().slice(0,40)}#m(t){return this.draggableChildren.indexOf(t)}#g(t,e){let s=this.draggableChildren.filter(a=>a!==t)[e]||null;s?this.insertBefore(t,s):this.appendChild(t)}#u(){this.draggableChildren.forEach((t,e)=>{t.dataset.sortOrder=String(e+1)})}#A(t){let e=this.orientation==="horizontal",r=this.draggableChildren.filter(s=>!s.hasAttribute("data-dragging"));for(let s=0;s<r.length;s++){let a=r[s].getBoundingClientRect(),i=e?a.left+a.width/2:a.top+a.height/2;if(t<i)return s}return r.length}#k(t){this.#v();let e=this.orientation==="horizontal",r=this.draggableChildren.filter(s=>!s.hasAttribute("data-dragging"));for(let s=0;s<r.length;s++){let a=r[s].getBoundingClientRect(),i=e?a.left+a.width/2:a.top+a.height/2;if(t<i){r[s].setAttribute("data-drop-target","before");return}}r.length>0&&r[r.length-1].setAttribute("data-drop-target","after")}#v(){for(let t of this.querySelectorAll("[data-drop-target]"))t.removeAttribute("data-drop-target")}static#p=null};b("drag-surface",E);var H=`
1
+ var Bt=window.matchMedia("(prefers-reduced-motion: reduce)");var mt=new Map;function x(d,t,e={}){let s=e.priority??10,a={impl:t,bundle:e.bundle,contract:e.contract,priority:s},r=mt.get(d);if(customElements.get(d)){if(!r||r.priority>=s){r&&r.priority===s&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${d}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${d}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=s){r.priority===s&&console.warn(`[VB Bundle] Tag <${d}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}mt.set(d,a),customElements.define(d,t)}var A=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,s,a){t.addEventListener(e,s,a),this.#t.push(()=>t.removeEventListener(e,s,a))}setup(){}teardown(){}};var F=class d extends A{#t=null;#e=null;#s=!1;#a=null;setup(){this.setAttribute("role","list"),this.#s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.#o(),this.#l(),this.#C(),this.#r()}teardown(){this.#t&&(this.#t.remove(),this.#t=null),d.#x?.source===this&&(d.#x=null)}get draggableChildren(){return[...this.querySelectorAll(':scope > [draggable="true"]')]}get group(){return this.getAttribute("group")||null}get orientation(){return this.getAttribute("orientation")||"vertical"}get sortedOrder(){return this.draggableChildren.map(t=>t.dataset.id)}#r(){for(let t of this.draggableChildren)t.getAttribute("role")||t.setAttribute("role","listitem"),t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.hasAttribute("aria-grabbed")||t.setAttribute("aria-grabbed","false")}#o(){this.#t=document.createElement("div"),this.#t.setAttribute("role","status"),this.#t.setAttribute("aria-live","polite"),this.#t.setAttribute("aria-atomic","true"),this.#t.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",this.prepend(this.#t)}#i(t){let e=this.#t;e&&(e.textContent="",requestAnimationFrame(()=>{e.textContent=t}))}#l(){this.listen(this,"pointerdown",t=>{this.#a=t.target}),this.listen(this,"dragstart",this.#n.bind(this)),this.listen(this,"dragover",this.#c.bind(this)),this.listen(this,"dragleave",this.#d.bind(this)),this.listen(this,"drop",this.#m.bind(this)),this.listen(this,"dragend",this.#f.bind(this))}#n(t){let e=t.target.closest('[draggable="true"]');if(!e||e.parentElement!==this||this.hasAttribute("disabled"))return;let s=e.querySelector("[data-drag-handle]");if(s&&!s.contains(this.#a)){t.preventDefault();return}e.setAttribute("data-dragging",""),t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",e.dataset.id||""),t.dataTransfer.setData("application/x-drag-surface-group",this.group||"");let a=this.#p(e);d.#x={item:e,source:this,originalIndex:a},this.dispatchEvent(new CustomEvent("drag-surface:reorder-start",{bubbles:!0}))}#c(t){let e=d.#x;if(!e||(this.group||e.source.group)&&this.group!==e.source.group)return;t.preventDefault(),t.dataTransfer.dropEffect="move",this.setAttribute("data-drag-over","");let s=this.orientation==="horizontal"?t.clientX:t.clientY;this.#q(s)}#d(t){t.relatedTarget&&!this.contains(t.relatedTarget)&&(this.removeAttribute("data-drag-over"),this.#w())}#m(t){t.preventDefault(),this.removeAttribute("data-drag-over"),this.#w();let e=d.#x;if(!e)return;let{item:s,source:a,originalIndex:r}=e,i=this.orientation==="horizontal"?t.clientX:t.clientY,o=this.#y(i);if(a===this){this.#v(s,o),this.#u();let n=this.#p(s);this.#b(s),this.dispatchEvent(new CustomEvent("drag-surface:reorder",{bubbles:!0,detail:{item:s,itemId:s.dataset.id,oldIndex:r,newIndex:n,order:this.sortedOrder}}))}else this.#v(s,o),this.#u(),a.#u(),this.#b(s),this.dispatchEvent(new CustomEvent("drag-surface:transfer",{bubbles:!0,detail:{item:s,itemId:s.dataset.id,fromSurface:a,toSurface:this,newIndex:this.#p(s),fromOrder:a.sortedOrder,toOrder:this.sortedOrder}}))}#f(){let t=d.#x;t?.item&&t.item.removeAttribute("data-dragging"),this.removeAttribute("data-drag-over"),this.#w(),d.#x=null,this.dispatchEvent(new CustomEvent("drag-surface:reorder-end",{bubbles:!0}))}#C(){this.listen(this,"keydown",this.#k.bind(this))}#k(t){let e=t.target.closest('[draggable="true"]');if(!e||e.parentElement!==this||this.hasAttribute("disabled"))return;let s=e.getAttribute("aria-grabbed")==="true",a=this.orientation==="horizontal",r=a?"ArrowLeft":"ArrowUp",i=a?"ArrowRight":"ArrowDown";if(t.key===" "||t.key==="Enter"){if(t.preventDefault(),s){e.setAttribute("aria-grabbed","false"),this.removeAttribute("data-reorder-mode"),this.#u(),this.#b(e);let c=this.#p(e),l=this.draggableChildren;this.#i(`${this.#g(e)}, dropped at position ${c+1} of ${l.length}`),this.dispatchEvent(new CustomEvent("drag-surface:reorder",{bubbles:!0,detail:{item:e,itemId:e.dataset.id,oldIndex:this.#e,newIndex:c,order:this.sortedOrder}})),this.dispatchEvent(new CustomEvent("drag-surface:reorder-end",{bubbles:!0})),this.#e=null}else{this.#e=this.#p(e),e.setAttribute("aria-grabbed","true"),this.setAttribute("data-reorder-mode","");let c=this.draggableChildren;this.#i(`${this.#g(e)}, grabbed. Position ${this.#e+1} of ${c.length}. Use arrow keys to move, Enter to drop, Escape to cancel.`),this.dispatchEvent(new CustomEvent("drag-surface:reorder-start",{bubbles:!0}))}return}if(!s&&(t.key===r||t.key===i)){t.preventDefault();let c=this.draggableChildren,l=c.indexOf(e),h=t.key===r?Math.max(0,l-1):Math.min(c.length-1,l+1);h!==l&&c[h].focus();return}if(s&&(t.key===r||t.key===i)){t.preventDefault();let c=this.draggableChildren,l=c.indexOf(e),h=t.key===r?Math.max(0,l-1):Math.min(c.length-1,l+1);h!==l&&(this.#v(e,h),e.focus(),this.#i(`Position ${h+1} of ${c.length}`));return}let o=a?"ArrowUp":"ArrowLeft",n=a?"ArrowDown":"ArrowRight";if(s&&(t.key===o||t.key===n)){if(t.preventDefault(),!this.group)return;let c=t.key===n?1:-1,l=this.#E(c);if(!l)return;l.appendChild(e),l.#u(),this.#u(),l.#b(e),e.focus();let h=l.getAttribute("aria-label")||"next surface";l.#i(`Moved to ${h}`),l.dispatchEvent(new CustomEvent("drag-surface:transfer",{bubbles:!0,detail:{item:e,itemId:e.dataset.id,fromSurface:this,toSurface:l,newIndex:l.draggableChildren.indexOf(e),fromOrder:this.sortedOrder,toOrder:l.sortedOrder}})),this.removeAttribute("data-reorder-mode"),l.setAttribute("data-reorder-mode",""),this.#e=null;return}if(s&&t.key==="Escape"){t.preventDefault(),e.setAttribute("aria-grabbed","false"),this.removeAttribute("data-reorder-mode"),this.#e!=null&&(this.#v(e,this.#e),e.focus()),this.#i("Reorder cancelled"),this.dispatchEvent(new CustomEvent("drag-surface:reorder-end",{bubbles:!0})),this.#e=null;return}!s&&t.key==="Escape"&&(t.preventDefault(),e.blur())}#b(t){t.setAttribute("data-just-dropped",""),t.addEventListener("animationend",()=>{t.removeAttribute("data-just-dropped")},{once:!0}),setTimeout(()=>t.removeAttribute("data-just-dropped"),500)}#E(t){if(!this.group)return null;let e=[...document.querySelectorAll(`drag-surface[group="${this.group}"]`)];if(e.length<2)return null;e.sort((r,i)=>{let o=r.getBoundingClientRect(),n=i.getBoundingClientRect();return o.left-n.left||o.top-n.top});let s=e.indexOf(this);return e[s+t]||null}#g(t){return t.dataset.id||t.textContent.trim().slice(0,40)}#p(t){return this.draggableChildren.indexOf(t)}#v(t,e){let a=this.draggableChildren.filter(r=>r!==t)[e]||null;a?this.insertBefore(t,a):this.appendChild(t)}#u(){this.draggableChildren.forEach((t,e)=>{t.dataset.sortOrder=String(e+1)})}#y(t){let e=this.orientation==="horizontal",s=this.draggableChildren.filter(a=>!a.hasAttribute("data-dragging"));for(let a=0;a<s.length;a++){let r=s[a].getBoundingClientRect(),i=e?r.left+r.width/2:r.top+r.height/2;if(t<i)return a}return s.length}#q(t){this.#w();let e=this.orientation==="horizontal",s=this.draggableChildren.filter(a=>!a.hasAttribute("data-dragging"));for(let a=0;a<s.length;a++){let r=s[a].getBoundingClientRect(),i=e?r.left+r.width/2:r.top+r.height/2;if(t<i){s[a].setAttribute("data-drop-target","before");return}}s.length>0&&s[s.length-1].setAttribute("data-drop-target","after")}#w(){for(let t of this.querySelectorAll("[data-drop-target]"))t.removeAttribute("data-drop-target")}static#x=null};x("drag-surface",F);var ft=`
2
2
  :host {
3
3
  display: block;
4
4
  font-family: var(--user-persona-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
@@ -246,41 +246,43 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
246
246
  transition: none !important;
247
247
  }
248
248
  }
249
- `;function u(p){return String(p).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function P(p){return p.split(" ").map(t=>t[0]).join("").toUpperCase().slice(0,2)}function O(p){let t=0;for(let r=0;r<p.length;r++)t=p.charCodeAt(r)+((t<<5)-t);return`hsl(${(t%360+360)%360}, 65%, 55%)`}function _(p){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${p}</svg>`}var g={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"/>'},q={says:{label:"Says",icon:g.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:g.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:g.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:g.heart,color:"#ef4444"}},k={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 S=class extends HTMLElement{static get observedAttributes(){return["name","role","age","location","avatar","quote","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.getAttribute(e)&&this.#e.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#e.get(t)||""}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(let s of["name","role","age","location","avatar","quote"])r[s]&&this.setAttribute(s,r[s]);for(let s of["bio","goals","frustrations","behaviors"])r[s]&&(Array.isArray(r[s])?this.#e.set(s,r[s]):this.#e.set(s,r[s]));this.#a()}catch(e){console.warn(`[user-persona] Failed to load src="${t}":`,e)}}connectedCallback(){this.#t(),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),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")}attributeChangedCallback(t,e,r){e!==r&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(r):this.#a())}get personaName(){return this._resolve("name")||"Unnamed Persona"}get personaRole(){return this._resolve("role")||""}get age(){return this._resolve("age")||""}get location(){return this._resolve("location")||""}get avatar(){return this._resolve("avatar")||""}get quote(){return this._resolve("quote")||""}get compact(){return this.hasAttribute("compact")}#a(){let t=this.personaName,e=this.personaRole,r=this.age,s=this.location,a=this.avatar,i=this.quote,o=O(t),c=a?`background:url(${u(a)}) center/cover`:`background:${o}`;this.shadowRoot.innerHTML=`
250
- <style>${H}</style>
249
+ `;function u(d){return String(d).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function E(d){return d.split(" ").map(t=>t[0]).join("").toUpperCase().slice(0,2)}function S(d){let t=0;for(let s=0;s<d.length;s++)t=d.charCodeAt(s)+((t<<5)-t);return`hsl(${(t%360+360)%360}, 65%, 55%)`}function v(d){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${d}</svg>`}var _={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"/>'},V={says:{label:"Says",icon:_.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:_.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:_.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:_.heart,color:"#ef4444"}},C={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 kt="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait",N=[32,64,128,256,512];function Et(d){let t=0;for(let e=0;e<d.length;e++)t=d.charCodeAt(e)+((t<<5)-t);return t}function St(d){let t=N[0],e=Math.abs(d-t);for(let s=1;s<N.length;s++){let a=Math.abs(d-N[s]);a<e&&(t=N[s],e=a)}return t}function bt(d,t=128){let e=Et(String(d)),s=(e%100+100)%100,a=(e>>>16&1)===0?"female":"male",r=St(t);return`${kt}/${a}/${r}/${s}.jpg`}function W(d){let t=0;for(let e=0;e<d.length;e++)t=d.charCodeAt(e)+((t<<5)-t);return t}var $t=["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"],qt=["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"],zt=["San Francisco, CA","Austin, TX","London, UK","Toronto, CA","Berlin, DE","Tokyo, JP","Sydney, AU","S\xE3o Paulo, BR"],It=["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."],Tt=["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"],Nt=["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"],Lt=["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"],X=class extends HTMLElement{static get observedAttributes(){return["role","age","location","avatar","compact","src"]}#t=new Map;constructor(){super(),this.attachShadow({mode:"open"})}#e(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&!this.getAttribute(e)&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();for(let a of["role","age","location","avatar"])s[a]&&this.setAttribute(a,s[a]);if(s.name&&!this.querySelector('[slot="name"]')){let a=document.createElement("h2");a.slot="name",a.textContent=s.name,this.appendChild(a)}if(s.quote&&!this.querySelector('[slot="quote"]')){let a=document.createElement("p");a.slot="quote",a.textContent=s.quote,this.appendChild(a)}for(let a of["bio","goals","frustrations","behaviors"])s[a]&&(Array.isArray(s[a])?this.#t.set(a,s[a]):this.#t.set(a,s[a]));this.#a()}catch(e){console.warn(`[user-persona] Failed to load src="${t}":`,e)}}connectedCallback(){this.#e(),this.hasAttribute("data-mock")?this.#s():this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),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")}attributeChangedCallback(t,e,s){e!==s&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(s):this.#a())}get personaName(){return this.querySelector('[slot="name"]')?.textContent?.trim()||this.#t.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.#t.get("quote")||""}get compact(){return this.hasAttribute("compact")}#s(){let t=this.dataset.seed||this.dataset.mock||String(Date.now()),e=r=>r[(W(t+r.length)%r.length+r.length)%r.length],s=(r,i)=>{let o=[];for(let n=0;n<i;n++)o.push(r[(W(t+n+r.length)%r.length+r.length)%r.length]);return[...new Set(o)]};if(!this.querySelector('[slot="name"]')){let r=document.createElement("h2");r.slot="name",r.textContent=e($t),this.appendChild(r)}if(this.getAttribute("role")||this.setAttribute("role",e(qt)),this.getAttribute("age")||this.setAttribute("age",String(25+(W(t)%30+30)%30)),this.getAttribute("location")||this.setAttribute("location",e(zt)),!this.getAttribute("avatar")){let r=this.querySelector('[slot="name"]')?.textContent?.trim()||"Persona";this.setAttribute("avatar",bt(r,256))}if(!this.querySelector('[slot="quote"]')){let r=document.createElement("p");r.slot="quote",r.textContent=e(It),this.appendChild(r)}let a=(r,i)=>{if(this.querySelector(`[slot="${r}"]`))return;let o=document.createElement("ul");o.setAttribute("slot",r);for(let n of i){let c=document.createElement("li");c.textContent=n,o.appendChild(c)}this.appendChild(o)};a("goals",s(Tt,3)),a("frustrations",s(Nt,3)),a("behaviors",s(Lt,3))}#a(){let t=this.personaName,e=this.personaRole,s=this.age,a=this.location,r=this.avatar,i=this.quote,o=S(t),n=r?`background:url(${u(r)}) center/cover`:`background:${o}`;this.shadowRoot.innerHTML=`
250
+ <style>${ft}</style>
251
251
 
252
252
  <article class="persona-card" part="card" role="article"
253
253
  aria-label="User persona: ${u(t)}">
254
254
 
255
255
  <header class="persona-header" part="header">
256
- <div class="avatar" part="avatar" style="${c}"
256
+ <div class="avatar" part="avatar" style="${n}"
257
257
  role="img" aria-label="Avatar for ${u(t)}">
258
- ${a?"":u(P(t))}
258
+ ${r?"":u(E(t))}
259
259
  </div>
260
260
  <div class="header-info">
261
- <h2 class="persona-name" part="name">${u(t)}</h2>
261
+ <div class="persona-name-wrap" part="name">
262
+ <slot name="name"><h2 class="persona-name-fallback">${u(t)}</h2></slot>
263
+ </div>
262
264
  ${e?`<p class="persona-role" part="role">${u(e)}</p>`:""}
263
265
  <div class="persona-meta" part="meta">
264
- ${r?`
266
+ ${s?`
265
267
  <span class="meta-item">
266
268
  <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>
267
- ${u(r)} years old
269
+ ${u(s)} years old
268
270
  </span>
269
271
  `:""}
270
- ${s?`
272
+ ${a?`
271
273
  <span class="meta-item">
272
274
  <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>
273
- ${u(s)}
275
+ ${u(a)}
274
276
  </span>
275
277
  `:""}
276
278
  </div>
277
279
  </div>
278
280
  </header>
279
281
 
280
- ${i?`
282
+ ${i||this.querySelector('[slot="quote"]')?`
281
283
  <div class="persona-quote" part="quote">
282
284
  <span class="quote-mark" aria-hidden="true">&ldquo;</span>
283
- <p class="quote-text">${u(i)}</p>
285
+ <div class="quote-text-wrap"><slot name="quote"><p class="quote-text">${u(i)}</p></slot></div>
284
286
  </div>
285
287
  `:""}
286
288
 
@@ -334,7 +336,7 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
334
336
  </div>
335
337
  </div>
336
338
  </article>
337
- `}};b("user-persona",S);var z=`
339
+ `}};x("user-persona",X);var Y=`
338
340
  :host {
339
341
  --_bg: var(--user-story-bg, var(--color-surface, #ffffff));
340
342
  --_text: var(--user-story-text, var(--color-text, #1a1a1a));
@@ -470,6 +472,24 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
470
472
  font-weight: 500;
471
473
  }
472
474
 
475
+ .persona-text--link {
476
+ display: inline-flex;
477
+ align-items: center;
478
+ gap: 3px;
479
+ color: var(--_accent);
480
+ text-decoration: none;
481
+ }
482
+
483
+ .persona-text--link svg {
484
+ width: 13px;
485
+ height: 13px;
486
+ flex-shrink: 0;
487
+ }
488
+
489
+ .persona-text--link:hover {
490
+ text-decoration: underline;
491
+ }
492
+
473
493
  .action-text {
474
494
  font-weight: 500;
475
495
  }
@@ -573,6 +593,24 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
573
593
  }
574
594
  }
575
595
 
596
+ /* \u2500\u2500 Slotted title (minimal mode heading) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
597
+ .story-title-wrap {
598
+ margin: 0;
599
+ }
600
+
601
+ ::slotted([slot="title"]) {
602
+ font-size: var(--_font-sm) !important;
603
+ font-weight: 600 !important;
604
+ color: var(--_text) !important;
605
+ margin: 0 !important;
606
+ }
607
+
608
+ .story-title-fallback {
609
+ font-size: var(--_font-sm);
610
+ font-weight: 600;
611
+ color: var(--_text);
612
+ }
613
+
576
614
  /* Minimal detail level */
577
615
  :host([detail="minimal"]) .story-card {
578
616
  padding: var(--_space-xs);
@@ -603,11 +641,6 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
603
641
  outline-offset: 2px;
604
642
  }
605
643
 
606
- :host([detail="minimal"]) .story-statement {
607
- font-size: var(--_font-sm);
608
- margin: 0;
609
- }
610
-
611
644
  :host([detail="minimal"]) .story-id {
612
645
  display: block;
613
646
  margin-bottom: var(--_space-2xs);
@@ -625,19 +658,21 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
625
658
  :host([detail="compact"]) .slot-fallback {
626
659
  display: none;
627
660
  }
628
- `;var j=class p extends HTMLElement{static get observedAttributes(){return["persona","action","benefit","priority","points","status","epic","story-id","title","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;constructor(){super(),this.attachShadow({mode:"open"})}#t(){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)||""}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(let[s,a]of[["storyId","story-id"],["persona","persona"],["action","action"],["benefit","benefit"],["priority","priority"],["status","status"],["points","points"],["epic","epic"],["title","title"],["detail","detail"]])r[s]!=null&&this.setAttribute(a,String(r[s]));for(let s of["acceptanceCriteria","tasks","notes"])r[s]&&this.#e.set(s==="acceptanceCriteria"?"acceptance-criteria":s,r[s]);this.#a()}catch(e){console.warn(`[user-story] Failed to load src="${t}":`,e)}}connectedCallback(){this.#t(),this.storyId&&!this.id&&(this.id=this.storyId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#a(),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.#a())}get persona(){return this._resolve("persona")||"user"}get action(){return this._resolve("action")||""}get benefit(){return this._resolve("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._resolve("epic")||""}get storyId(){return this._resolve("story-id")||""}get storyTitle(){return this._resolve("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){p.STATUSES[t]&&(this.setAttribute("status",t),this.dispatchEvent(new CustomEvent("status-changed",{detail:{status:t,storyId:this.storyId},bubbles:!0,composed:!0})))}updatePriority(t){p.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 s=document.createElement("header"),a=document.createElement("h3");a.textContent=this.storyTitle||this.storyId||"Story Detail";let i=document.createElement("button");i.type="submit",i.setAttribute("aria-label","Close"),i.textContent="\xD7",s.appendChild(a),s.appendChild(i);let o=document.createElement("section"),c=document.createElement("user-story");for(let n of this.getAttributeNames())n==="detail"||n==="compact"||n==="data-upgraded"||n==="draggable"||n==="data-id"||n==="data-quadrant"||c.setAttribute(n,this.getAttribute(n));let l=[...this.children].some(n=>n.getAttribute("slot")&&n.tagName!=="DIALOG");c.setAttribute("detail",l?"full":"compact"),c.removeAttribute("id");for(let n of[...this.children])n.tagName!=="DIALOG"&&c.appendChild(n.cloneNode(!0));o.appendChild(c),r.appendChild(s),r.appendChild(o),e.innerHTML="",e.appendChild(r),e.addEventListener("close",()=>{e.innerHTML=""},{once:!0}),e.showModal()}#a(){let t=p.PRIORITIES[this.priority]||p.PRIORITIES.medium,e=p.STATUSES[this.status]||p.STATUSES.backlog,r=this._detailLevel,s=this.storyId?`User story: ${u(this.storyId)}`:"User story";if(r==="minimal"){this.shadowRoot.innerHTML=`
629
- <style>${z}</style>
630
- <article class="story-card story-card--minimal" role="article" aria-label="${s}"
631
- tabindex="0" title="Click to view full story">
661
+ `;var Q=class d 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)"}};#t=new Map;constructor(){super(),this.attachShadow({mode:"open"})}#e(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();for(let[a,r]of[["storyId","story-id"],["personaId","persona-id"],["priority","priority"],["status","status"],["points","points"],["epic","epic"],["detail","detail"]])s[a]!=null&&this.setAttribute(r,String(s[a]));if(s.persona&&!this.querySelector('[slot="persona"]')){let a=document.createElement("span");a.slot="persona",a.textContent=s.persona,this.appendChild(a)}if(s.action&&!this.querySelector('[slot="action"]')){let a=document.createElement("span");a.slot="action",a.textContent=s.action,this.appendChild(a)}if(s.benefit&&!this.querySelector('[slot="benefit"]')){let a=document.createElement("span");a.slot="benefit",a.textContent=s.benefit,this.appendChild(a)}if(s.title&&!this.querySelector('[slot="title"]')){let a=document.createElement("h3");a.slot="title",a.textContent=s.title,this.appendChild(a)}for(let a of["acceptance-criteria","tasks","notes"]){let r=a==="acceptance-criteria"?"acceptanceCriteria":a;if(s[r]&&!this.querySelector(`[slot="${a}"]`))if(Array.isArray(s[r])){let i=document.createElement("ul");i.slot=a;for(let o of s[r]){let n=document.createElement("li");n.textContent=o,i.appendChild(n)}this.appendChild(i)}else{let i=document.createElement("p");i.slot=a,i.textContent=s[r],this.appendChild(i)}}this.#e(),this.#s()}catch(e){console.warn(`[user-story] Failed to load src="${t}":`,e)}}connectedCallback(){this.#e(),this.storyId&&!this.id&&(this.id=this.storyId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#s(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t,e,s){e!==s&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(s):this.#s())}get persona(){return this.querySelector('[slot="persona"]')?.textContent?.trim()||this.#t.get("persona")||"user"}get personaId(){return this.getAttribute("persona-id")||""}get action(){return this.querySelector('[slot="action"]')?.textContent?.trim()||this.#t.get("action")||""}get benefit(){return this.querySelector('[slot="benefit"]')?.textContent?.trim()||this.#t.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.#t.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){d.STATUSES[t]&&(this.setAttribute("status",t),this.dispatchEvent(new CustomEvent("status-changed",{detail:{status:t,storyId:this.storyId},bubbles:!0,composed:!0})))}updatePriority(t){d.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 s=document.createElement("form");s.method="dialog";let a=document.createElement("header"),r=document.createElement("h3");r.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(r),a.appendChild(i);let o=document.createElement("section"),n=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"||n.setAttribute(l,this.getAttribute(l));let c=[...this.children].some(l=>l.getAttribute("slot")&&l.tagName!=="DIALOG");n.setAttribute("detail",c?"full":"compact"),n.removeAttribute("id");for(let l of[...this.children])l.tagName!=="DIALOG"&&n.appendChild(l.cloneNode(!0));o.appendChild(n),s.appendChild(a),s.appendChild(o),e.innerHTML="",e.appendChild(s),e.addEventListener("close",()=>{e.innerHTML=""},{once:!0}),e.showModal()}#s(){let t=d.PRIORITIES[this.priority]||d.PRIORITIES.medium,e=d.STATUSES[this.status]||d.STATUSES.backlog,s=this._detailLevel,a=this.storyId?`User story: ${u(this.storyId)}`:"User story";if(s==="minimal"){this.shadowRoot.innerHTML=`
662
+ <style>${Y}</style>
663
+ <article class="story-card story-card--minimal" role="article" aria-label="${a}"
664
+ tabindex="0">
632
665
  <div class="story-body">
633
666
  ${this.storyId?`<span class="story-id">${u(this.storyId)}</span>`:""}
634
- <p class="story-statement story-statement--minimal">${u(this._minimalLabel||"[describe the action]")}</p>
667
+ <div class="story-title-wrap">
668
+ <slot name="title"><span class="story-title-fallback">${u(this._minimalLabel||"[describe the action]")}</span></slot>
669
+ </div>
635
670
  </div>
636
671
  </article>
637
- `;let a=this.shadowRoot.querySelector(".story-card--minimal");a.addEventListener("click",()=>this.showDetail()),a.addEventListener("keydown",i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),this.showDetail())})}else this.shadowRoot.innerHTML=`
638
- <style>${z}</style>
672
+ `;let r=this.shadowRoot.querySelector(".story-card--minimal");r.addEventListener("click",()=>this.showDetail()),r.addEventListener("keydown",i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),this.showDetail())})}else this.shadowRoot.innerHTML=`
673
+ <style>${Y}</style>
639
674
 
640
- <article class="story-card story-card--${r}" part="card" role="article" aria-label="${s}">
675
+ <article class="story-card story-card--${s}" part="card" role="article" aria-label="${a}">
641
676
  <header class="story-header" part="header">
642
677
  <div class="story-meta">
643
678
  ${this.storyId?`<span class="story-id" part="id">${u(this.storyId)}</span>`:""}
@@ -650,18 +685,18 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
650
685
  <span class="status-badge" part="status"
651
686
  style="color: ${e.color}; background: ${e.bg};"
652
687
  >${u(e.label)}</span>
653
- ${this.points?`<span class="points-badge" part="points" title="Story points">${u(this.points)}</span>`:""}
688
+ ${this.points?`<span class="points-badge" part="points">${u(this.points)}</span>`:""}
654
689
  </div>
655
690
  </header>
656
691
 
657
692
  <div class="story-body" part="body">
658
693
  <p class="story-statement" part="statement">
659
694
  <span class="keyword">As a</span>
660
- <span class="persona-text">${u(this.persona)}</span>,
695
+ ${this.personaId?`<a class="persona-text persona-text--link" href="#${u(this.personaId)}">${v(_.user)} <slot name="persona"><span>user</span></slot></a>`:'<span class="persona-text"><slot name="persona"><span>user</span></slot></span>'},
661
696
  <span class="keyword">I want</span>
662
- <span class="action-text">${u(this.action||"[describe the action]")}</span>${this.benefit?`
697
+ <span class="action-text"><slot name="action"><span>[describe the action]</span></slot></span>${this.benefit||this.querySelector('[slot="benefit"]')?`
663
698
  <span class="keyword">so that</span>
664
- <span class="benefit-text">${u(this.benefit)}</span>`:""}
699
+ <span class="benefit-text"><slot name="benefit"></slot></span>`:""}
665
700
  </p>
666
701
  </div>
667
702
 
@@ -709,7 +744,7 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
709
744
  </div>
710
745
  </div>
711
746
  </article>
712
- `,r==="compact"&&this.shadowRoot.querySelectorAll(".section").forEach(i=>{let o=i.querySelector("slot");o&&o.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}))}};b("user-story",j);var C=`
747
+ `,s==="compact"&&this.shadowRoot.querySelectorAll(".section").forEach(i=>{let o=i.querySelector("slot");o&&o.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}))}};x("user-story",Q);var L=`
713
748
  :host {
714
749
  display: block;
715
750
  font-family: var(--_font-sans);
@@ -825,22 +860,38 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
825
860
  .persona-ref svg { width: 14px; height: 14px; flex-shrink: 0; }
826
861
  a.persona-ref:hover { color: #6366f1; text-decoration: underline; }
827
862
 
828
- /* Title & summary */
863
+ /* Title & summary (slotted content) */
864
+ .journey__title-wrap {
865
+ margin-block-end: var(--_space-2xs);
866
+ }
867
+
829
868
  .journey__title {
830
869
  font-size: var(--_font-xl);
831
870
  font-weight: 700;
832
871
  color: var(--_text);
833
- margin-block-end: var(--_space-2xs);
872
+ margin: 0;
873
+ }
874
+
875
+ ::slotted([slot="title"]) {
876
+ font-size: var(--_font-xl) !important;
877
+ font-weight: 700 !important;
878
+ color: var(--_text) !important;
879
+ margin: 0 !important;
834
880
  }
835
881
 
836
- .journey--compact .journey__title { font-size: var(--_font-md); }
882
+ .journey--compact .journey__title,
883
+ .journey--compact ::slotted([slot="title"]) { font-size: var(--_font-md) !important; }
837
884
 
838
- .journey__summary {
839
- font-size: var(--_font-sm);
840
- color: var(--_muted);
885
+ .journey__summary-wrap {
841
886
  max-width: 72ch;
842
887
  }
843
888
 
889
+ ::slotted([slot="summary"]) {
890
+ font-size: var(--_font-sm) !important;
891
+ color: var(--_muted) !important;
892
+ margin: 0 !important;
893
+ }
894
+
844
895
  /* Emotion curve */
845
896
  .journey__curve {
846
897
  background: var(--_bg);
@@ -998,29 +1049,31 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
998
1049
  .journey__grid-wrap { overflow: visible; }
999
1050
  .row-label, .corner { position: relative; }
1000
1051
  }
1001
- `;var B=[{key:"actions",label:"Actions"},{key:"thoughts",label:"Thoughts"},{key:"touchpoints",label:"Touchpoints"},{key:"painPoints",label:"Pain Points"},{key:"opportunities",label:"Opportunities"}],I=class extends HTMLElement{static get observedAttributes(){return["src","title","persona","persona-id","summary","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.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())}async _loadSrc(t){if(t){this.shadowRoot.innerHTML=`<style>${C}</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();r.title&&this.setAttribute("title",r.title),r.persona&&this.setAttribute("persona",r.persona),r.personaId&&this.setAttribute("persona-id",r.personaId),r.summary&&this.setAttribute("summary",r.summary),this.__phases=r.phases||[],this._render()}catch(e){this.shadowRoot.innerHTML=`<style>${C}</style><div class="state-msg state-msg--error">Could not load journey: ${u(e.message)}</div>`}}}_render(){let t=this._resolve("title")||"User Journey",e=this._resolve("persona")||"",r=this._resolve("persona-id")||"",s=this._resolve("summary")||"",a=(this._resolve("story-ids")||"").split(",").map(c=>c.trim()).filter(Boolean),i=this.hasAttribute("compact"),o=this.__phases;this.shadowRoot.innerHTML=`<style>${C}</style>
1002
- <article class="journey${i?" journey--compact":""}">
1052
+ `;var Mt=[{key:"actions",label:"Actions"},{key:"thoughts",label:"Thoughts"},{key:"touchpoints",label:"Touchpoints"},{key:"painPoints",label:"Pain Points"},{key:"opportunities",label:"Opportunities"}],K=class extends HTMLElement{static get observedAttributes(){return["src","persona","persona-id","story-ids","compact"]}#t=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.__phases=null}get phases(){return this.__phases}set phases(t){this.__phases=t,this.isConnected&&this._render()}#e(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}connectedCallback(){this.#e(),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){this.shadowRoot.innerHTML=`<style>${L}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();if(s.persona&&this.setAttribute("persona",s.persona),s.personaId&&this.setAttribute("persona-id",s.personaId),s.title&&!this.querySelector('[slot="title"]')){let a=document.createElement("h2");a.slot="title",a.textContent=s.title,this.appendChild(a)}if(s.summary&&!this.querySelector('[slot="summary"]')){let a=document.createElement("p");a.slot="summary",a.textContent=s.summary,this.appendChild(a)}this.__phases=s.phases||[],this._render()}catch(e){this.shadowRoot.innerHTML=`<style>${L}</style><div class="state-msg state-msg--error">Could not load journey: ${u(e.message)}</div>`}}}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",s=(this.getAttribute("story-ids")||"").split(",").map(o=>o.trim()).filter(Boolean),a=this.hasAttribute("compact"),r=this.__phases,i=!!this.querySelector('[slot="summary"]')||this.#t.has("summary");this.shadowRoot.innerHTML=`<style>${L}</style>
1053
+ <article class="journey${a?" journey--compact":""}">
1003
1054
 
1004
1055
  <header class="journey__header">
1005
1056
  <div class="journey__header-top">
1006
1057
  <div class="journey__chips">
1007
1058
  <span class="chip chip--type">Journey Map</span>
1008
- ${a.map(c=>`<a class="chip chip--story" href="#${c}">${this._label(c)}</a>`).join("")}
1059
+ ${s.map(o=>`<a class="chip chip--story" href="#${o}">${this._label(o)}</a>`).join("")}
1009
1060
  </div>
1010
- ${e?`
1061
+ ${t?`
1011
1062
  <div class="journey__persona">
1012
- ${r?`<a class="persona-ref" href="#${r}">${_(g.user)} ${u(e)}</a>`:`<span class="persona-ref">${_(g.user)} ${u(e)}</span>`}
1063
+ ${e?`<a class="persona-ref" href="#${e}">${v(_.user)} ${u(t)}</a>`:`<span class="persona-ref">${v(_.user)} ${u(t)}</span>`}
1013
1064
  </div>`:""}
1014
1065
  </div>
1015
- <h2 class="journey__title">${u(t)}</h2>
1016
- ${s?`<p class="journey__summary">${u(s)}</p>`:""}
1066
+ <div class="journey__title-wrap">
1067
+ <slot name="title"><h2 class="journey__title">User Journey</h2></slot>
1068
+ </div>
1069
+ ${i?'<div class="journey__summary-wrap"><slot name="summary"></slot></div>':""}
1017
1070
  </header>
1018
1071
 
1019
- ${o&&o.length?this._curve(o)+this._grid(o):`<div class="journey__placeholder">
1072
+ ${r&&r.length?this._curve(r)+this._grid(r):`<div class="journey__placeholder">
1020
1073
  <p>Add phase data via <code>src</code> (JSON) or set <code>.phases</code> programmatically.</p>
1021
1074
  </div>`}
1022
1075
 
1023
- </article>`,this.dispatchEvent(new CustomEvent("journey-ready",{bubbles:!0,composed:!0,detail:{title:t,persona:e,phaseCount:o?o.length:0}}))}_curve(t){let c=t.length,l=h=>28+(c<2?944/2:h/(c-1)*944),n=h=>14+(1-(k[h.emotion]||k.neutral).score)*72,d=t.map((h,x)=>({x:l(x),y:n(h),ph:h})),m=`M ${d[0].x},${d[0].y}`;for(let h=1;h<d.length;h++){let x=d[h-1],v=d[h],w=(x.x+v.x)/2;m+=` C ${w},${x.y} ${w},${v.y} ${v.x},${v.y}`}let f=`uj-${Math.random().toString(36).slice(2,8)}`,y=d.at(-1);return`
1076
+ </article>`,this.dispatchEvent(new CustomEvent("journey-ready",{bubbles:!0,composed:!0,detail:{title,persona:t,phaseCount:r?r.length:0}}))}_curve(t){let n=t.length,c=m=>28+(n<2?944/2:m/(n-1)*944),l=m=>14+(1-(C[m.emotion]||C.neutral).score)*72,h=t.map((m,b)=>({x:c(b),y:l(m),ph:m})),p=`M ${h[0].x},${h[0].y}`;for(let m=1;m<h.length;m++){let b=h[m-1],y=h[m],w=(b.x+y.x)/2;p+=` C ${w},${b.y} ${w},${y.y} ${y.x},${y.y}`}let f=`uj-${Math.random().toString(36).slice(2,8)}`,g=h.at(-1);return`
1024
1077
  <div class="journey__curve" aria-hidden="true">
1025
1078
  <svg viewBox="0 0 1000 100" preserveAspectRatio="none" class="curve-svg">
1026
1079
  <defs>
@@ -1032,23 +1085,23 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
1032
1085
  <rect x="0" y="0" width="1000" height="${100*.4}" class="zone zone--pos"/>
1033
1086
  <rect x="0" y="${100*.4}" width="1000" height="${100*.2}" class="zone zone--neu"/>
1034
1087
  <rect x="0" y="${100*.6}" width="1000" height="${100*.4}" class="zone zone--neg"/>
1035
- ${d.map(({x:h})=>`<line x1="${h}" y1="0" x2="${h}" y2="100" class="vline"/>`).join("")}
1036
- <path d="${m} L ${y.x},100 L ${d[0].x},100 Z" fill="url(#${f})"/>
1037
- <path d="${m}" fill="none" class="curve-line"/>
1038
- ${d.map(({x:h,y:x,ph:v})=>{let w=k[v.emotion]||k.neutral;return`<circle cx="${h}" cy="${x}" r="5" class="dot" style="fill:${w.color}"/>`}).join("")}
1088
+ ${h.map(({x:m})=>`<line x1="${m}" y1="0" x2="${m}" y2="100" class="vline"/>`).join("")}
1089
+ <path d="${p} L ${g.x},100 L ${h[0].x},100 Z" fill="url(#${f})"/>
1090
+ <path d="${p}" fill="none" class="curve-line"/>
1091
+ ${h.map(({x:m,y:b,ph:y})=>{let w=C[y.emotion]||C.neutral;return`<circle cx="${m}" cy="${b}" r="5" class="dot" style="fill:${w.color}"/>`}).join("")}
1039
1092
  </svg>
1040
- </div>`}_grid(t){let e=t.map((s,a)=>{let i=k[s.emotion]||k.neutral,o=s.storyIds||[];return`
1041
- <th class="phase-head" data-emotion="${s.emotion||"neutral"}"
1093
+ </div>`}_grid(t){let e=t.map((a,r)=>{let i=C[a.emotion]||C.neutral,o=a.storyIds||[];return`
1094
+ <th class="phase-head" data-emotion="${a.emotion||"neutral"}"
1042
1095
  style="--ec:${i.color}">
1043
- <span class="ph-num">${a+1}</span>
1044
- <span class="ph-name">${u(s.name||"")}</span>
1045
- <span class="ph-emoji" title="${s.emotion||"neutral"}"><span role="img" aria-label="${u(s.emotion||"neutral")}">${i.emoji}</span></span>
1046
- ${o.length?`<div class="ph-stories">${o.map(c=>`<a class="chip chip--story" href="#${c}">${this._label(c)}</a>`).join("")}</div>`:""}
1047
- </th>`}).join(""),r=B.map(({key:s,label:a})=>{let i=t.map(o=>{let c=o[s]||[];return c.length?`<td class="data-cell data-cell--${s.toLowerCase()}">
1048
- ${c.map(l=>`<p>${u(l)}</p>`).join("")}
1096
+ <span class="ph-num">${r+1}</span>
1097
+ <span class="ph-name">${u(a.name||"")}</span>
1098
+ <span class="ph-emoji" title="${a.emotion||"neutral"}"><span role="img" aria-label="${u(a.emotion||"neutral")}">${i.emoji}</span></span>
1099
+ ${o.length?`<div class="ph-stories">${o.map(n=>`<a class="chip chip--story" href="#${n}">${this._label(n)}</a>`).join("")}</div>`:""}
1100
+ </th>`}).join(""),s=Mt.map(({key:a,label:r})=>{let i=t.map(o=>{let n=o[a]||[];return n.length?`<td class="data-cell data-cell--${a.toLowerCase()}">
1101
+ ${n.map(c=>`<p>${u(c)}</p>`).join("")}
1049
1102
  </td>`:'<td class="data-cell data-cell--empty">\u2014</td>'}).join("");return`
1050
- <tr class="grid-row grid-row--${s.toLowerCase()}">
1051
- <th class="row-label">${a}</th>
1103
+ <tr class="grid-row grid-row--${a.toLowerCase()}">
1104
+ <th class="row-label">${r}</th>
1052
1105
  ${i}
1053
1106
  </tr>`}).join("");return`
1054
1107
  <div class="journey__grid-wrap">
@@ -1060,9 +1113,9 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
1060
1113
  ${e}
1061
1114
  </tr>
1062
1115
  </thead>
1063
- <tbody>${r}</tbody>
1116
+ <tbody>${s}</tbody>
1064
1117
  </table>
1065
- </div>`}_label(t){return t.replace(/^(activity|persona|journey|story|user)-/,"").replace(/-/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};b("user-journey",I);var $=`
1118
+ </div>`}_label(t){return t.replace(/^(activity|persona|journey|story|user)-/,"").replace(/-/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};x("user-journey",K);var M=`
1066
1119
  :host {
1067
1120
  display: block;
1068
1121
  font-family: var(--_font-sans);
@@ -1182,20 +1235,35 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
1182
1235
 
1183
1236
  a.persona-ref:hover { color: #6366f1; text-decoration: underline; }
1184
1237
 
1185
- /* \u2500\u2500 Title & summary \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1238
+ /* \u2500\u2500 Title & summary (slotted content) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1239
+ .empathy-map__title-wrap {
1240
+ margin-block-end: var(--_space-2xs);
1241
+ }
1242
+
1186
1243
  .empathy-map__title {
1187
1244
  font-size: var(--_font-xl);
1188
1245
  font-weight: 700;
1189
1246
  color: var(--_text);
1190
- margin-block-end: var(--_space-2xs);
1247
+ margin: 0;
1191
1248
  }
1192
1249
 
1193
- .empathy-map__summary {
1194
- font-size: var(--_font-sm);
1195
- color: var(--_muted);
1250
+ ::slotted([slot="title"]) {
1251
+ font-size: var(--_font-xl) !important;
1252
+ font-weight: 700 !important;
1253
+ color: var(--_text) !important;
1254
+ margin: 0 !important;
1255
+ }
1256
+
1257
+ .empathy-map__summary-wrap {
1196
1258
  max-width: 72ch;
1197
1259
  }
1198
1260
 
1261
+ ::slotted([slot="summary"]) {
1262
+ font-size: var(--_font-sm) !important;
1263
+ color: var(--_muted) !important;
1264
+ margin: 0 !important;
1265
+ }
1266
+
1199
1267
  /* \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 */
1200
1268
  .empathy-map__grid {
1201
1269
  display: grid;
@@ -1562,70 +1630,1456 @@ var U=window.matchMedia("(prefers-reduced-motion: reduce)");var D=new Map;functi
1562
1630
  .state-msg { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
1563
1631
  .state-msg--error { color: #dc2626; }
1564
1632
  code { font-family: Monaco, Menlo, monospace; font-size: 0.88em; }
1565
- `;var L=["says","thinks","does","feels"],T=class extends HTMLElement{static get observedAttributes(){return["title","persona","persona-id","summary","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())}editQuadrant(t){L.includes(t)&&this.hasAttribute("editable")&&this._openEdit(t)}closeQuadrant(t){L.includes(t)&&this._closeEdit(t)}async _loadSrc(t){if(t){this.shadowRoot.innerHTML=`<style>${$}</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();r.title&&this.setAttribute("title",r.title),r.persona&&this.setAttribute("persona",r.persona),r.personaId&&this.setAttribute("persona-id",r.personaId),r.summary&&this.setAttribute("summary",r.summary),this.__quadrants=r.quadrants||null,this.__goals=r.goals||null,this.__painPoints=r.painPoints||null,this._render()}catch(e){this.shadowRoot.innerHTML=`<style>${$}</style><div class="state-msg state-msg--error">Could not load empathy map: ${u(e.message)}</div>`}}}_render(){let t=this._resolve("title")||"Empathy Map",e=this._resolve("persona")||"",r=this._resolve("persona-id")||"",s=this._resolve("summary")||"",a=this.hasAttribute("compact"),i=this.hasAttribute("editable"),o=this.__goals?.length||this.querySelector('[slot="goals"]'),c=this.__painPoints?.length||this.querySelector('[slot="pain-points"]');this.shadowRoot.innerHTML=`<style>${$}</style>
1566
- <article class="empathy-map${a?" empathy-map--compact":""}">
1633
+ `;var G=["says","thinks","does","feels"],J=class extends HTMLElement{static get observedAttributes(){return["persona","persona-id","src","editable","compact"]}#t=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()}#e(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}connectedCallback(){this.#e(),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())}editQuadrant(t){G.includes(t)&&this.hasAttribute("editable")&&this._openEdit(t)}closeQuadrant(t){G.includes(t)&&this._closeEdit(t)}async _loadSrc(t){if(t){this.shadowRoot.innerHTML=`<style>${M}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();if(s.persona&&this.setAttribute("persona",s.persona),s.personaId&&this.setAttribute("persona-id",s.personaId),s.title&&!this.querySelector('[slot="title"]')){let a=document.createElement("h2");a.slot="title",a.textContent=s.title,this.appendChild(a)}if(s.summary&&!this.querySelector('[slot="summary"]')){let a=document.createElement("p");a.slot="summary",a.textContent=s.summary,this.appendChild(a)}this.__quadrants=s.quadrants||null,this.__goals=s.goals||null,this.__painPoints=s.painPoints||null,this._render()}catch(e){this.shadowRoot.innerHTML=`<style>${M}</style><div class="state-msg state-msg--error">Could not load empathy map: ${u(e.message)}</div>`}}}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",s=this.hasAttribute("compact"),a=this.hasAttribute("editable"),r=!!this.querySelector('[slot="title"]')||this.#t.has("title"),i=!!this.querySelector('[slot="summary"]')||this.#t.has("summary"),o=this.__goals?.length||this.querySelector('[slot="goals"]'),n=this.__painPoints?.length||this.querySelector('[slot="pain-points"]');this.shadowRoot.innerHTML=`<style>${M}</style>
1634
+ <article class="empathy-map${s?" empathy-map--compact":""}">
1567
1635
 
1568
1636
  <header class="empathy-map__header">
1569
1637
  <div class="empathy-map__header-top">
1570
1638
  <div class="empathy-map__chips">
1571
1639
  <span class="chip chip--type">Empathy Map</span>
1572
1640
  </div>
1573
- ${e?`
1641
+ ${t?`
1574
1642
  <div class="empathy-map__persona">
1575
- ${r?`<a class="persona-ref" href="#${u(r)}">${_(g.user)} ${u(e)}</a>`:`<span class="persona-ref">${_(g.user)} ${u(e)}</span>`}
1643
+ ${e?`<a class="persona-ref" href="#${u(e)}">${v(_.user)} ${u(t)}</a>`:`<span class="persona-ref">${v(_.user)} ${u(t)}</span>`}
1576
1644
  </div>`:""}
1577
1645
  </div>
1578
- <h2 class="empathy-map__title">${u(t)}</h2>
1579
- ${s?`<p class="empathy-map__summary">${u(s)}</p>`:""}
1646
+ <div class="empathy-map__title-wrap">
1647
+ <slot name="title"><h2 class="empathy-map__title">Empathy Map</h2></slot>
1648
+ </div>
1649
+ ${i?'<div class="empathy-map__summary-wrap"><slot name="summary"></slot></div>':""}
1580
1650
  </header>
1581
1651
 
1582
1652
  <div class="empathy-map__grid">
1583
- ${L.map(l=>this._renderQuadrant(l,i)).join("")}
1653
+ ${G.map(c=>this._renderQuadrant(c,a)).join("")}
1584
1654
  </div>
1585
1655
 
1586
- ${o||c?`
1656
+ ${o||n?`
1587
1657
  <footer class="empathy-map__footer">
1588
- ${this._renderSummaryRow("goals",_(g.target),"Goals")}
1589
- ${this._renderSummaryRow("pain-points",_(g.alertTriangle),"Pain Points")}
1658
+ ${this._renderSummaryRow("goals",v(_.target),"Goals")}
1659
+ ${this._renderSummaryRow("pain-points",v(_.alertTriangle),"Pain Points")}
1590
1660
  </footer>
1591
1661
  `:""}
1592
1662
 
1593
- </article>`,i&&this._bindEditListeners(),this.dispatchEvent(new CustomEvent("empathy-map:ready",{bubbles:!0,composed:!0,detail:{title:t,persona:e}}))}_renderQuadrant(t,e){let r=q[t],s=this.__quadrants?.[t],a=this._editingQuadrants.has(t),i=s&&s.length?t==="feels"?s.map(c=>this._renderEmotion(c)).join(""):s.map(c=>`<p>${u(c)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">Add ${r.label.toLowerCase()} items\u2026</p></slot>`,o=s?.length?s.join(`
1663
+ </article>`,a&&this._bindEditListeners(),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 s=V[t],a=this.__quadrants?.[t],r=this._editingQuadrants.has(t),i=a&&a.length?t==="feels"?a.map(n=>this._renderEmotion(n)).join(""):a.map(n=>`<p>${u(n)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">Add ${s.label.toLowerCase()} items\u2026</p></slot>`,o=a?.length?a.join(`
1594
1664
  `):"";return`
1595
- <section class="quadrant quadrant--${t}"${a?" data-editing":""}>
1665
+ <section class="quadrant quadrant--${t}"${r?" data-editing":""}>
1596
1666
  <div class="quadrant__inner">
1597
1667
  <div class="quadrant__header">
1598
- <div class="quadrant__icon" aria-hidden="true">${_(r.icon)}</div>
1599
- <span class="quadrant__label">${r.label}</span>
1668
+ <div class="quadrant__icon" aria-hidden="true">${v(s.icon)}</div>
1669
+ <span class="quadrant__label">${s.label}</span>
1600
1670
  ${e?`<button class="quadrant__edit-btn" data-quadrant="${t}"
1601
- aria-label="Edit ${r.label}" title="Edit ${r.label}">${_(g.pencil)}</button>`:""}
1671
+ aria-label="Edit ${s.label}" title="Edit ${s.label}">${v(_.pencil)}</button>`:""}
1602
1672
  </div>
1603
1673
  <div class="quadrant__faces">
1604
- <div class="quadrant__face quadrant__face--front"${a?" inert":""}>
1674
+ <div class="quadrant__face quadrant__face--front"${r?" inert":""}>
1605
1675
  <div class="quadrant__content">
1606
1676
  ${i}
1607
1677
  </div>
1608
1678
  </div>
1609
1679
  ${e?`
1610
- <div class="quadrant__face quadrant__face--back"${a?"":" inert"}>
1680
+ <div class="quadrant__face quadrant__face--back"${r?"":" inert"}>
1611
1681
  <textarea class="quadrant__editor" data-quadrant="${t}"
1612
1682
  placeholder="One item per line\u2026"
1613
- aria-label="Edit ${r.label} items">${u(o)}</textarea>
1683
+ aria-label="Edit ${s.label} items">${u(o)}</textarea>
1614
1684
  <button class="quadrant__done-btn" data-quadrant="${t}"
1615
- aria-label="Done editing ${r.label}">${_(g.check)} Done</button>
1685
+ aria-label="Done editing ${s.label}">${v(_.check)} Done</button>
1616
1686
  </div>
1617
1687
  `:""}
1618
1688
  </div>
1619
1689
  </div>
1620
- </section>`}_renderEmotion(t){let e=t.toLowerCase().trim(),r=k[e];return r?`<span class="emotion-tag" style="--ec:${r.color}"><span role="img" aria-label="${u(t)}">${r.emoji}</span> ${u(t)}</span>`:`<p>${u(t)}</p>`}_renderSummaryRow(t,e,r){let a=(t==="pain-points"?"painPoints":t)==="painPoints"?this.__painPoints:this.__goals,i=a?.length?a.map(o=>`<p>${u(o)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">No ${r.toLowerCase()} specified.</p></slot>`;return`
1690
+ </section>`}_renderEmotion(t){let e=t.toLowerCase().trim(),s=C[e];return s?`<span class="emotion-tag" style="--ec:${s.color}"><span role="img" aria-label="${u(t)}">${s.emoji}</span> ${u(t)}</span>`:`<p>${u(t)}</p>`}_renderSummaryRow(t,e,s){let r=(t==="pain-points"?"painPoints":t)==="painPoints"?this.__painPoints:this.__goals,i=r?.length?r.map(o=>`<p>${u(o)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">No ${s.toLowerCase()} specified.</p></slot>`;return`
1621
1691
  <div class="summary-row">
1622
1692
  <span class="summary-row__icon" aria-hidden="true">${e}</span>
1623
1693
  <div class="summary-row__body">
1624
- <div class="summary-row__label">${r}</div>
1694
+ <div class="summary-row__label">${s}</div>
1625
1695
  <div class="summary-row__content">${i}</div>
1626
1696
  </div>
1627
- </div>`}_bindEditListeners(){let t=this.shadowRoot;t.querySelectorAll(".quadrant__edit-btn").forEach(e=>{e.addEventListener("click",()=>{this._openEdit(e.dataset.quadrant)})}),t.querySelectorAll(".quadrant__done-btn").forEach(e=>{e.addEventListener("click",()=>{this._closeEdit(e.dataset.quadrant)})}),t.querySelectorAll(".quadrant__editor").forEach(e=>{e.addEventListener("keydown",r=>{r.key==="Escape"&&(r.preventDefault(),this._closeEdit(e.dataset.quadrant))})})}_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"),s=e.querySelector(".quadrant__face--back");r&&r.setAttribute("inert",""),s&&s.removeAttribute("inert");let a=e.querySelector(".quadrant__editor");if(a){let i=this.__quadrants?.[t];if(i?.length)a.value=i.join(`
1628
- `);else{let o=e.querySelector(`slot[name="${t}"]`);if(o){let c=o.assignedElements();if(c.length){let l=[];c.forEach(n=>{let d=n.querySelectorAll("li");d.length?d.forEach(m=>l.push(m.textContent.trim())):l.push(n.textContent.trim())}),a.value=l.filter(Boolean).join(`
1629
- `)}}}a.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(`
1630
- `).map(c=>c.trim()).filter(Boolean);this.__quadrants||(this.__quadrants={}),this.__quadrants[t]=i;let o=e.querySelector(".quadrant__content");if(o)if(i.length)o.innerHTML=t==="feels"?i.map(c=>this._renderEmotion(c)).join(""):i.map(c=>`<p>${u(c)}</p>`).join("");else{let c=q[t];o.innerHTML=`<p class="placeholder">Add ${c.label.toLowerCase()} items\u2026</p>`}}this._editingQuadrants.delete(t),e.removeAttribute("data-editing");let s=e.querySelector(".quadrant__face--front"),a=e.querySelector(".quadrant__face--back");s&&s.removeAttribute("inert"),a&&a.setAttribute("inert",""),this.dispatchEvent(new CustomEvent("empathy-map:update",{bubbles:!0,composed:!0,detail:{quadrant:t,items:this.__quadrants?.[t]||[]}}))}};b("empathy-map",T);var M=class p extends A{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;#a={};#i=null;#r="";#o=null;setup(){this.#r=`ie-${++p.#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 s=document.createElement("div");s.style.cssText="display:flex;flex-direction:column;flex:1;min-width:0;";let a=document.createElement("div");a.className="ie-grid",a.setAttribute("role","region"),a.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 n of p.QUADRANTS){let d=document.createElement("section");d.className="ie-quadrant",d.dataset.quadrantZone=n,d.setAttribute("aria-label",`${p.LABELS[n]}: ${p.DESCRIPTIONS[n]}`);let m=document.createElement("header");m.className="ie-quadrant-label",m.innerHTML=`${p.LABELS[n]}<br><span class="ie-quadrant-desc">${p.DESCRIPTIONS[n]}</span>`;let f=document.createElement("drag-surface");f.setAttribute("group",this.#r),f.setAttribute("aria-label",p.LABELS[n]),f.setAttribute("data-layout","stack"),f.setAttribute("data-layout-gap","xs"),d.appendChild(m),d.appendChild(f),a.appendChild(d),this.#a[n]=f}t.forEach((n,d)=>{let m=n.getAttribute("data-quadrant")||"quick-wins",f=this.#a[m]||this.#a["quick-wins"];n.hasAttribute("draggable")||n.setAttribute("draggable","true"),n.hasAttribute("data-id")||(n.dataset.id=`ie-item-${d}`),f.appendChild(n)});let o=document.createElement("div");o.className="ie-live-region",o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.setAttribute("aria-atomic","true");let c=this.getAttribute("title");if(c){let n=document.createElement("h3");n.className="ie-title",n.textContent=c,this.prepend(n)}s.appendChild(a),s.appendChild(i),e.appendChild(r),e.appendChild(s),this.appendChild(e),this.appendChild(o),this.#t=a,this.#i=o,this.#o=e,this.listen(this,"drag-surface:transfer",n=>{let{item:d,fromSurface:m,toSurface:f}=n.detail,y=this.#n(m),h=this.#n(f);!y||!h||(d.setAttribute("data-quadrant",h),this.#c(`Moved ${this.#d(d)} to ${p.LABELS[h]}`),this.dispatchEvent(new CustomEvent("impact-effort:move",{bubbles:!0,detail:{itemId:d.dataset.id,from:y,to:h,item:d}})))});let l=this.getAttribute("src");l&&this.#s(l),this.#l()}teardown(){this.#o&&(this.#o.remove(),this.#o=null),this.#i&&(this.#i.remove(),this.#i=null),this.#t=null,this.#a={}}attributeChangedCallback(t,e,r){this.hasAttribute("data-upgraded")&&t==="src"&&r&&r!==e&&this.#s(r)}async#s(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;for(let s of p.QUADRANTS){let a=this.#a[s];if(a)for(let i of[...a.querySelectorAll("[draggable]")])i.remove()}r.forEach((s,a)=>{let i=s.quadrant||"quick-wins",o=s.id||`ie-item-${a}`,c;s.persona||s.action||s.storyId?(c=document.createElement("user-story"),c.setAttribute("detail","minimal"),s.storyId&&c.setAttribute("story-id",s.storyId),s.persona&&c.setAttribute("persona",s.persona),s.action&&c.setAttribute("action",s.action),s.benefit&&c.setAttribute("benefit",s.benefit),s.priority&&c.setAttribute("priority",s.priority),s.status&&c.setAttribute("status",s.status),s.points&&c.setAttribute("points",String(s.points))):(c=document.createElement("article"),c.textContent=s.label||s.text||""),c.setAttribute("draggable","true"),c.dataset.id=o,c.dataset.quadrant=i,(this.#a[i]||this.#a["quick-wins"]).appendChild(c)}),this.#l()}catch(e){console.warn(`[impact-effort] Failed to load src="${t}":`,e)}}#n(t){for(let[e,r]of Object.entries(this.#a))if(r===t)return e;return null}#c(t){let e=this.#i;e&&(e.textContent="",requestAnimationFrame(()=>{e.textContent=t}))}#d(t){return t.dataset.id||t.textContent.trim().slice(0,40)}#l(){let t={};for(let e of p.QUADRANTS){let r=this.#a[e];t[e]=r?r.querySelectorAll('[draggable="true"]').length:0}this.dispatchEvent(new CustomEvent("impact-effort:ready",{bubbles:!0,detail:{quadrantCounts:t}}))}};b("impact-effort",M);var N=class p extends A{static get observedAttributes(){return["src","compact","title"]}static#e=0;#t=null;#a={};#i={};#r=null;#o="";#s=[];setup(){this.#o=`kb-${++p.#e}`;let t=[...this.querySelectorAll(":scope > section[data-column]")];this.#s=t.map(a=>{let i=a.getAttribute("data-column")||"",c=a.getAttribute("data-column-label")||""||this.#f(i),l=a.getAttribute("data-wip"),n=l?parseInt(l,10):null,d=a.getAttribute("data-column-color")||null,m=[...a.children];return{id:i,label:c,wip:n,color:d,children:m}});for(let a of t)a.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 a of this.#s){let i=document.createElement("section");i.className="kb-column",i.setAttribute("data-column-id",a.id),a.color&&i.setAttribute("data-column-tint",a.color);let o=document.createElement("header");o.className="kb-column-header";let c=document.createElement("h3");c.textContent=a.label;let l=document.createElement("output");if(l.className="kb-count",l.textContent=String(a.children.length),c.appendChild(l),a.wip!==null&&!isNaN(a.wip)){let d=document.createElement("span");d.className="kb-wip",d.textContent=`/ ${a.wip}`,d.setAttribute("aria-label",`WIP limit ${a.wip}`),c.appendChild(d)}o.appendChild(c),i.appendChild(o);let n=document.createElement("drag-surface");if(n.setAttribute("group",this.#o),n.setAttribute("aria-label",`${a.label} items`),n.setAttribute("data-layout","stack"),n.setAttribute("data-layout-gap","xs"),a.children.length>0){for(let d of a.children)d.hasAttribute("draggable")||d.setAttribute("draggable","true"),d.hasAttribute("data-id")||(d.dataset.id=`kb-item-${e}`),n.appendChild(d);e+=a.children.length}else{let d=document.createElement("p");d.className="kb-empty",d.textContent="No items",n.appendChild(d)}i.appendChild(n),this.#t.appendChild(i),this.#a[a.id]=n,this.#i[a.id]=i,a.wip!==null&&a.children.length>a.wip&&i.setAttribute("data-wip-exceeded","")}let r=this.getAttribute("title");if(r){let a=document.createElement("h2");a.className="kb-title",a.textContent=r,this.appendChild(a)}this.appendChild(this.#t),this.#r=document.createElement("div"),this.#r.className="kb-live-region",this.#r.setAttribute("role","status"),this.#r.setAttribute("aria-live","polite"),this.#r.setAttribute("aria-atomic","true"),this.appendChild(this.#r),this.listen(this,"drag-surface:reorder",a=>{let i=a.detail,o=a.target.closest("drag-surface"),c=this.#n(o);c&&(this.#c(c),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",a=>{let i=a.detail,o=i.fromSurface,c=i.toSurface,l=this.#n(o),n=this.#n(c);if(!l||!n)return;i.item&&i.item.setAttribute("data-column",n),this.#c(l),this.#c(n);let d=c.querySelector(".kb-empty");if(d&&d.remove(),o.querySelectorAll(':scope > [draggable="true"]').length===0&&!o.querySelector(".kb-empty")){let w=document.createElement("p");w.className="kb-empty",w.textContent="No items",o.appendChild(w)}let f=this.#h(i.item),y=this.#d(l),h=this.#d(n);this.#l(`${f} moved from ${y} to ${h}`),this.dispatchEvent(new CustomEvent("kanban-board:transfer",{bubbles:!0,detail:{itemId:i.itemId,fromColumn:l,toColumn:n,newIndex:i.newIndex,item:i.item}}));let x=c.querySelectorAll(':scope > [draggable="true"]').length,v=this.#s.find(w=>w.id===n);v?.wip!==null&&v?.wip!==void 0&&x>v.wip&&this.dispatchEvent(new CustomEvent("kanban-board:wip-exceeded",{bubbles:!0,detail:{column:n,limit:v.wip,count:x}}))});let s=this.getAttribute("src");if(s){this._loadSrc(s);return}this.dispatchEvent(new CustomEvent("kanban-board:ready",{bubbles:!0,detail:{columnCount:this.#s.length,itemCount:e}}))}teardown(){let t=this.querySelector(".kb-title");t&&t.remove(),this.#t&&(this.#t.remove(),this.#t=null),this.#r&&(this.#r.remove(),this.#r=null),this.#a={},this.#i={},this.#s=[]}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 a=document.createElement("section");a.setAttribute("data-column",s.id),s.label&&a.setAttribute("data-column-label",s.label),s.wip!=null&&a.setAttribute("data-wip",String(s.wip)),s.color&&a.setAttribute("data-column-color",s.color);for(let i of s.items||[]){let o;i.persona||i.action||i.storyId?(o=document.createElement("user-story"),o.setAttribute("detail",i.detail||"minimal"),i.storyId&&o.setAttribute("story-id",i.storyId),i.persona&&o.setAttribute("persona",i.persona),i.action&&o.setAttribute("action",i.action),i.benefit&&o.setAttribute("benefit",i.benefit),i.priority&&o.setAttribute("priority",i.priority),i.status&&o.setAttribute("status",i.status),i.points&&o.setAttribute("points",String(i.points))):(o=document.createElement("article"),o.className="kb-card",o.textContent=i.text||i.label||""),o.setAttribute("draggable","true"),o.dataset.id=i.id||i.storyId||"",a.appendChild(o)}this.appendChild(a)}this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(e){console.warn(`[kanban-board] 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],r=this.#i[t];if(!e||!r)return;let s=e.querySelectorAll(':scope > [draggable="true"]').length,a=r.querySelector(".kb-count");a&&(a.textContent=String(s));let i=this.#s.find(o=>o.id===t);i?.wip!==null&&i?.wip!==void 0&&(s>i.wip?r.setAttribute("data-wip-exceeded",""):r.removeAttribute("data-wip-exceeded"))}#d(t){return this.#s.find(r=>r.id===t)?.label||this.#f(t)}#l(t){this.#r&&(this.#r.textContent="",requestAnimationFrame(()=>{this.#r&&(this.#r.textContent=t)}))}#h(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#f(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};b("kanban-board",N);var R=class p extends A{static get observedAttributes(){return["src","compact","title"]}static#e=0;#t=null;#a=null;#i={};#r=null;#o="";#s=[];setup(){this.#o=`sm-${++p.#e}`;let t=[...this.querySelectorAll(":scope > section[data-activity]")];this.#s=t.map(a=>{let i=a.getAttribute("data-activity")||"",c=a.getAttribute("data-activity-label")||""||this.#h(i),l=a.getAttribute("data-journey-phase")||null,n=[...a.children];return{id:i,label:c,journeyPhase:l,children:n}});for(let a of t)a.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.#a=document.createElement("div"),this.#a.className="sm-columns";let e=0;for(let a of this.#s){let i=document.createElement("section");i.className="sm-column",i.setAttribute("data-activity-column",a.id);let o=document.createElement("header");o.className="sm-activity-header";let c=document.createElement("h3");c.textContent=a.label;let l=document.createElement("span");l.className="sm-activity-count",l.textContent=String(a.children.length),c.appendChild(l),o.appendChild(c),i.appendChild(o);let n=document.createElement("drag-surface");if(n.setAttribute("group",this.#o),n.setAttribute("aria-label",`${a.label} stories`),n.setAttribute("data-layout","stack"),n.setAttribute("data-layout-gap","xs"),a.children.length>0){for(let d of a.children)n.appendChild(d);e+=a.children.length}else{let d=document.createElement("p");d.className="sm-empty",d.textContent="No stories yet",n.appendChild(d)}i.appendChild(n),this.#a.appendChild(i),this.#i[a.id]=n}let r=this.getAttribute("title");if(r){let a=document.createElement("h2");a.className="sm-title",a.textContent=r,this.appendChild(a)}this.#t.appendChild(this.#a),this.appendChild(this.#t),this.#r=document.createElement("div"),this.#r.className="sm-live-region",this.#r.setAttribute("role","status"),this.#r.setAttribute("aria-live","polite"),this.#r.setAttribute("aria-atomic","true"),this.appendChild(this.#r),this.listen(this,"drag-surface:reorder",a=>{let i=a.detail,o=a.target.closest("drag-surface"),c=this.#n(o);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",a=>{let i=a.detail,o=i.fromSurface,c=i.toSurface,l=this.#n(o),n=this.#n(c);if(!l||!n)return;this.#c(l),this.#c(n);let d=c.querySelector(".sm-empty");if(d&&d.remove(),o.querySelectorAll(':scope > [draggable="true"]').length===0&&!o.querySelector(".sm-empty")){let y=document.createElement("p");y.className="sm-empty",y.textContent="No stories yet",o.appendChild(y)}let f=this.#l(i.item);this.#d(`${f} moved from ${l} to ${n}`),this.dispatchEvent(new CustomEvent("story-map:transfer",{bubbles:!0,detail:{itemId:i.itemId,fromActivity:l,toActivity:n,newIndex:i.newIndex}}))});let s=this.getAttribute("src");if(s){this._loadSrc(s);return}this.dispatchEvent(new CustomEvent("story-map:ready",{bubbles:!0,detail:{activityCount:this.#s.length,storyCount:e}}))}teardown(){this.#t&&(this.#t.remove(),this.#t=null),this.#r&&(this.#r.remove(),this.#r=null),this.#a=null,this.#i={},this.#s=[]}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 a=document.createElement("section");a.setAttribute("data-activity",s.id),a.setAttribute("data-activity-label",s.label||s.id),s.journeyPhase&&a.setAttribute("data-journey-phase",s.journeyPhase);for(let i of s.stories||[]){let o=document.createElement("user-story");o.setAttribute("draggable","true"),o.dataset.id=i.id||i.storyId,(i.storyId||i.id)&&o.setAttribute("story-id",i.storyId||i.id),i.title&&o.setAttribute("title",i.title),i.persona&&o.setAttribute("persona",i.persona),i.action&&o.setAttribute("action",i.action),i.benefit&&o.setAttribute("benefit",i.benefit),i.priority&&o.setAttribute("priority",i.priority),i.status&&o.setAttribute("status",i.status),i.points&&o.setAttribute("points",String(i.points)),o.setAttribute("detail",i.detail||"compact"),a.appendChild(o)}this.appendChild(a)}this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}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.#i))if(r===t)return e;return null}#c(t){let e=this.#i[t];if(!e)return;let r=e.querySelectorAll(':scope > [draggable="true"]').length,s=e.closest("[data-activity-column]");if(!s)return;let a=s.querySelector(".sm-activity-count");a&&(a.textContent=String(r))}#d(t){this.#r&&(this.#r.textContent="",requestAnimationFrame(()=>{this.#r&&(this.#r.textContent=t)}))}#l(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#h(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};b("story-map",R);
1697
+ </div>`}_bindEditListeners(){let t=this.shadowRoot;t.querySelectorAll(".quadrant__edit-btn").forEach(e=>{e.addEventListener("click",()=>{this._openEdit(e.dataset.quadrant)})}),t.querySelectorAll(".quadrant__done-btn").forEach(e=>{e.addEventListener("click",()=>{this._closeEdit(e.dataset.quadrant)})}),t.querySelectorAll(".quadrant__editor").forEach(e=>{e.addEventListener("keydown",s=>{s.key==="Escape"&&(s.preventDefault(),this._closeEdit(e.dataset.quadrant))})})}_openEdit(t){this._editingQuadrants.add(t);let e=this.shadowRoot.querySelector(`.quadrant--${t}`);if(!e)return;e.setAttribute("data-editing","");let s=e.querySelector(".quadrant__face--front"),a=e.querySelector(".quadrant__face--back");s&&s.setAttribute("inert",""),a&&a.removeAttribute("inert");let r=e.querySelector(".quadrant__editor");if(r){let i=this.__quadrants?.[t];if(i?.length)r.value=i.join(`
1698
+ `);else{let o=e.querySelector(`slot[name="${t}"]`);if(o){let n=o.assignedElements();if(n.length){let c=[];n.forEach(l=>{let h=l.querySelectorAll("li");h.length?h.forEach(p=>c.push(p.textContent.trim())):c.push(l.textContent.trim())}),r.value=c.filter(Boolean).join(`
1699
+ `)}}}r.focus()}}_closeEdit(t){let e=this.shadowRoot.querySelector(`.quadrant--${t}`);if(!e)return;let s=e.querySelector(".quadrant__editor");if(s){let i=s.value.split(`
1700
+ `).map(n=>n.trim()).filter(Boolean);this.__quadrants||(this.__quadrants={}),this.__quadrants[t]=i;let o=e.querySelector(".quadrant__content");if(o)if(i.length)o.innerHTML=t==="feels"?i.map(n=>this._renderEmotion(n)).join(""):i.map(n=>`<p>${u(n)}</p>`).join("");else{let n=V[t];o.innerHTML=`<p class="placeholder">Add ${n.label.toLowerCase()} items\u2026</p>`}}this._editingQuadrants.delete(t),e.removeAttribute("data-editing");let a=e.querySelector(".quadrant__face--front"),r=e.querySelector(".quadrant__face--back");a&&a.removeAttribute("inert"),r&&r.setAttribute("inert",""),this.dispatchEvent(new CustomEvent("empathy-map:update",{bubbles:!0,composed:!0,detail:{quadrant:t,items:this.__quadrants?.[t]||[]}}))}};x("empathy-map",J);var Z=class d extends A{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#t=0;static get observedAttributes(){return["src","compact","title"]}#e=null;#s={};#a=null;#r="";#o=null;setup(){this.#r=`ie-${++d.#t}`;let t=[...this.querySelectorAll(":scope > [data-quadrant], :scope > [draggable]")],e=document.createElement("div");e.className="ie-wrapper";let s=document.createElement("div");s.className="ie-y-label",s.setAttribute("aria-hidden","true"),s.textContent="Impact \u2191";let a=document.createElement("div");a.style.cssText="display:flex;flex-direction:column;flex:1;min-width:0;";let r=document.createElement("div");r.className="ie-grid",r.setAttribute("role","region"),r.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 d.QUADRANTS){let h=document.createElement("section");h.className="ie-quadrant",h.dataset.quadrantZone=l,h.setAttribute("aria-label",`${d.LABELS[l]}: ${d.DESCRIPTIONS[l]}`);let p=document.createElement("header");p.className="ie-quadrant-label",p.innerHTML=`${d.LABELS[l]}<br><span class="ie-quadrant-desc">${d.DESCRIPTIONS[l]}</span>`;let f=document.createElement("drag-surface");f.setAttribute("group",this.#r),f.setAttribute("aria-label",d.LABELS[l]),f.setAttribute("data-layout","stack"),f.setAttribute("data-layout-gap","xs"),h.appendChild(p),h.appendChild(f),r.appendChild(h),this.#s[l]=f}t.forEach((l,h)=>{let p=l.getAttribute("data-quadrant")||"quick-wins",f=this.#s[p]||this.#s["quick-wins"];l.hasAttribute("draggable")||l.setAttribute("draggable","true"),l.hasAttribute("data-id")||(l.dataset.id=`ie-item-${h}`),f.appendChild(l)});let o=document.createElement("div");o.className="ie-live-region",o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.setAttribute("aria-atomic","true");let n=this.getAttribute("title");if(n){let l=document.createElement("h3");l.className="ie-title",l.textContent=n,this.prepend(l)}a.appendChild(r),a.appendChild(i),e.appendChild(s),e.appendChild(a),this.appendChild(e),this.appendChild(o),this.#e=r,this.#a=o,this.#o=e,this.listen(this,"drag-surface:transfer",l=>{let{item:h,fromSurface:p,toSurface:f}=l.detail,g=this.#l(p),m=this.#l(f);!g||!m||(h.setAttribute("data-quadrant",m),this.#n(`Moved ${this.#c(h)} to ${d.LABELS[m]}`),this.dispatchEvent(new CustomEvent("impact-effort:move",{bubbles:!0,detail:{itemId:h.dataset.id,from:g,to:m,item:h}})))});let c=this.getAttribute("src");c&&this.#i(c),this.#d()}teardown(){this.#o&&(this.#o.remove(),this.#o=null),this.#a&&(this.#a.remove(),this.#a=null),this.#e=null,this.#s={}}attributeChangedCallback(t,e,s){this.hasAttribute("data-upgraded")&&t==="src"&&s&&s!==e&&this.#i(s)}async#i(t){try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();if(!Array.isArray(s))return;for(let a of d.QUADRANTS){let r=this.#s[a];if(r)for(let i of[...r.querySelectorAll("[draggable]")])i.remove()}s.forEach((a,r)=>{let i=a.quadrant||"quick-wins",o=a.id||`ie-item-${r}`,n;a.persona||a.action||a.storyId?(n=document.createElement("user-story"),n.setAttribute("detail","minimal"),a.storyId&&n.setAttribute("story-id",a.storyId),a.persona&&n.setAttribute("persona",a.persona),a.action&&n.setAttribute("action",a.action),a.benefit&&n.setAttribute("benefit",a.benefit),a.priority&&n.setAttribute("priority",a.priority),a.status&&n.setAttribute("status",a.status),a.points&&n.setAttribute("points",String(a.points))):(n=document.createElement("article"),n.textContent=a.label||a.text||""),n.setAttribute("draggable","true"),n.dataset.id=o,n.dataset.quadrant=i,(this.#s[i]||this.#s["quick-wins"]).appendChild(n)}),this.#d()}catch(e){console.warn(`[impact-effort] Failed to load src="${t}":`,e)}}#l(t){for(let[e,s]of Object.entries(this.#s))if(s===t)return e;return null}#n(t){let e=this.#a;e&&(e.textContent="",requestAnimationFrame(()=>{e.textContent=t}))}#c(t){return t.dataset.id||t.textContent.trim().slice(0,40)}#d(){let t={};for(let e of d.QUADRANTS){let s=this.#s[e];t[e]=s?s.querySelectorAll('[draggable="true"]').length:0}this.dispatchEvent(new CustomEvent("impact-effort:ready",{bubbles:!0,detail:{quadrantCounts:t}}))}};x("impact-effort",Z);var tt=class d extends A{static get observedAttributes(){return["src","compact","title"]}static#t=0;#e=null;#s={};#a={};#r=null;#o="";#i=[];setup(){this.#o=`kb-${++d.#t}`;let t=[...this.querySelectorAll(":scope > section[data-column]")];this.#i=t.map(r=>{let i=r.getAttribute("data-column")||"",n=r.getAttribute("data-column-label")||""||this.#f(i),c=r.getAttribute("data-wip"),l=c?parseInt(c,10):null,h=r.getAttribute("data-column-color")||null,p=[...r.children];return{id:i,label:n,wip:l,color:h,children:p}});for(let r of t)r.remove();this.#e=document.createElement("div"),this.#e.className="kb-columns",this.#e.setAttribute("role","region"),this.#e.setAttribute("aria-label","Kanban board");let e=0;for(let r of this.#i){let i=document.createElement("section");i.className="kb-column",i.setAttribute("data-column-id",r.id),r.color&&i.setAttribute("data-column-tint",r.color);let o=document.createElement("header");o.className="kb-column-header";let n=document.createElement("h3");n.textContent=r.label;let c=document.createElement("output");if(c.className="kb-count",c.textContent=String(r.children.length),n.appendChild(c),r.wip!==null&&!isNaN(r.wip)){let h=document.createElement("span");h.className="kb-wip",h.textContent=`/ ${r.wip}`,h.setAttribute("aria-label",`WIP limit ${r.wip}`),n.appendChild(h)}o.appendChild(n),i.appendChild(o);let l=document.createElement("drag-surface");if(l.setAttribute("group",this.#o),l.setAttribute("aria-label",`${r.label} items`),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),r.children.length>0){for(let h of r.children)h.hasAttribute("draggable")||h.setAttribute("draggable","true"),h.hasAttribute("data-id")||(h.dataset.id=`kb-item-${e}`),l.appendChild(h);e+=r.children.length}else{let h=document.createElement("p");h.className="kb-empty",h.textContent="No items",l.appendChild(h)}i.appendChild(l),this.#e.appendChild(i),this.#s[r.id]=l,this.#a[r.id]=i,r.wip!==null&&r.children.length>r.wip&&i.setAttribute("data-wip-exceeded","")}let s=this.getAttribute("title");if(s){let r=document.createElement("h2");r.className="kb-title",r.textContent=s,this.appendChild(r)}this.appendChild(this.#e),this.#r=document.createElement("div"),this.#r.className="kb-live-region",this.#r.setAttribute("role","status"),this.#r.setAttribute("aria-live","polite"),this.#r.setAttribute("aria-atomic","true"),this.appendChild(this.#r),this.listen(this,"drag-surface:reorder",r=>{let i=r.detail,o=r.target.closest("drag-surface"),n=this.#l(o);n&&(this.#n(n),this.dispatchEvent(new CustomEvent("kanban-board:reorder",{bubbles:!0,detail:{itemId:i.itemId,column:n,oldIndex:i.oldIndex,newIndex:i.newIndex}})))}),this.listen(this,"drag-surface:transfer",r=>{let i=r.detail,o=i.fromSurface,n=i.toSurface,c=this.#l(o),l=this.#l(n);if(!c||!l)return;i.item&&i.item.setAttribute("data-column",l),this.#n(c),this.#n(l);let h=n.querySelector(".kb-empty");if(h&&h.remove(),o.querySelectorAll(':scope > [draggable="true"]').length===0&&!o.querySelector(".kb-empty")){let w=document.createElement("p");w.className="kb-empty",w.textContent="No items",o.appendChild(w)}let f=this.#m(i.item),g=this.#c(c),m=this.#c(l);this.#d(`${f} moved from ${g} to ${m}`),this.dispatchEvent(new CustomEvent("kanban-board:transfer",{bubbles:!0,detail:{itemId:i.itemId,fromColumn:c,toColumn:l,newIndex:i.newIndex,item:i.item}}));let b=n.querySelectorAll(':scope > [draggable="true"]').length,y=this.#i.find(w=>w.id===l);y?.wip!==null&&y?.wip!==void 0&&b>y.wip&&this.dispatchEvent(new CustomEvent("kanban-board:wip-exceeded",{bubbles:!0,detail:{column:l,limit:y.wip,count:b}}))});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}}))}teardown(){let t=this.querySelector(".kb-title");t&&t.remove(),this.#e&&(this.#e.remove(),this.#e=null),this.#r&&(this.#r.remove(),this.#r=null),this.#s={},this.#a={},this.#i=[]}attributeChangedCallback(t,e,s){e===s||!this.isConnected||t==="src"&&this._loadSrc(s)}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();for(;this.firstChild;)this.firstChild.remove();for(let a of s.columns||[]){let r=document.createElement("section");r.setAttribute("data-column",a.id),a.label&&r.setAttribute("data-column-label",a.label),a.wip!=null&&r.setAttribute("data-wip",String(a.wip)),a.color&&r.setAttribute("data-column-color",a.color);for(let i of a.items||[]){let o;i.persona||i.action||i.storyId?(o=document.createElement("user-story"),o.setAttribute("detail",i.detail||"minimal"),i.storyId&&o.setAttribute("story-id",i.storyId),i.persona&&o.setAttribute("persona",i.persona),i.action&&o.setAttribute("action",i.action),i.benefit&&o.setAttribute("benefit",i.benefit),i.priority&&o.setAttribute("priority",i.priority),i.status&&o.setAttribute("status",i.status),i.points&&o.setAttribute("points",String(i.points))):(o=document.createElement("article"),o.className="kb-card",o.textContent=i.text||i.label||""),o.setAttribute("draggable","true"),o.dataset.id=i.id||i.storyId||"",r.appendChild(o)}this.appendChild(r)}this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(e){console.warn(`[kanban-board] Failed to load src="${t}":`,e)}}#l(t){if(!t)return null;for(let[e,s]of Object.entries(this.#s))if(s===t)return e;return null}#n(t){let e=this.#s[t],s=this.#a[t];if(!e||!s)return;let a=e.querySelectorAll(':scope > [draggable="true"]').length,r=s.querySelector(".kb-count");r&&(r.textContent=String(a));let i=this.#i.find(o=>o.id===t);i?.wip!==null&&i?.wip!==void 0&&(a>i.wip?s.setAttribute("data-wip-exceeded",""):s.removeAttribute("data-wip-exceeded"))}#c(t){return this.#i.find(s=>s.id===t)?.label||this.#f(t)}#d(t){this.#r&&(this.#r.textContent="",requestAnimationFrame(()=>{this.#r&&(this.#r.textContent=t)}))}#m(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#f(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};x("kanban-board",tt);var et=class d extends A{static get observedAttributes(){return["src","compact","title"]}static#t=0;#e=null;#s=null;#a={};#r=null;#o="";#i=[];setup(){this.#o=`sm-${++d.#t}`;let t=[...this.querySelectorAll(":scope > section[data-activity]")];this.#i=t.map(r=>{let i=r.getAttribute("data-activity")||"",n=r.getAttribute("data-activity-label")||""||this.#m(i),c=r.getAttribute("data-journey-phase")||null,l=[...r.children];return{id:i,label:n,journeyPhase:c,children:l}});for(let r of t)r.remove();this.#e=document.createElement("div"),this.#e.className="sm-scroll",this.#e.setAttribute("role","region"),this.#e.setAttribute("aria-label","Story map"),this.#e.setAttribute("tabindex","0"),this.#s=document.createElement("div"),this.#s.className="sm-columns";let e=0;for(let r of this.#i){let i=document.createElement("section");i.className="sm-column",i.setAttribute("data-activity-column",r.id);let o=document.createElement("header");o.className="sm-activity-header";let n=document.createElement("h3");n.textContent=r.label;let c=document.createElement("span");c.className="sm-activity-count",c.textContent=String(r.children.length),n.appendChild(c),o.appendChild(n),i.appendChild(o);let l=document.createElement("drag-surface");if(l.setAttribute("group",this.#o),l.setAttribute("aria-label",`${r.label} stories`),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),r.children.length>0){for(let h of r.children)l.appendChild(h);e+=r.children.length}else{let h=document.createElement("p");h.className="sm-empty",h.textContent="No stories yet",l.appendChild(h)}i.appendChild(l),this.#s.appendChild(i),this.#a[r.id]=l}let s=this.getAttribute("title");if(s){let r=document.createElement("h2");r.className="sm-title",r.textContent=s,this.appendChild(r)}this.#e.appendChild(this.#s),this.appendChild(this.#e),this.#r=document.createElement("div"),this.#r.className="sm-live-region",this.#r.setAttribute("role","status"),this.#r.setAttribute("aria-live","polite"),this.#r.setAttribute("aria-atomic","true"),this.appendChild(this.#r),this.listen(this,"drag-surface:reorder",r=>{let i=r.detail,o=r.target.closest("drag-surface"),n=this.#l(o);n&&(this.#n(n),this.dispatchEvent(new CustomEvent("story-map:reorder",{bubbles:!0,detail:{itemId:i.itemId,activity:n,oldIndex:i.oldIndex,newIndex:i.newIndex}})))}),this.listen(this,"drag-surface:transfer",r=>{let i=r.detail,o=i.fromSurface,n=i.toSurface,c=this.#l(o),l=this.#l(n);if(!c||!l)return;this.#n(c),this.#n(l);let h=n.querySelector(".sm-empty");if(h&&h.remove(),o.querySelectorAll(':scope > [draggable="true"]').length===0&&!o.querySelector(".sm-empty")){let g=document.createElement("p");g.className="sm-empty",g.textContent="No stories yet",o.appendChild(g)}let f=this.#d(i.item);this.#c(`${f} moved from ${c} to ${l}`),this.dispatchEvent(new CustomEvent("story-map:transfer",{bubbles:!0,detail:{itemId:i.itemId,fromActivity:c,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.#e&&(this.#e.remove(),this.#e=null),this.#r&&(this.#r.remove(),this.#r=null),this.#s=null,this.#a={},this.#i=[]}attributeChangedCallback(t,e,s){e===s||!this.isConnected||t==="src"&&this._loadSrc(s)}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();for(;this.firstChild;)this.firstChild.remove();for(let a of s.activities||[]){let r=document.createElement("section");r.setAttribute("data-activity",a.id),r.setAttribute("data-activity-label",a.label||a.id),a.journeyPhase&&r.setAttribute("data-journey-phase",a.journeyPhase);for(let i of a.stories||[]){let o=document.createElement("user-story");o.setAttribute("draggable","true"),o.dataset.id=i.id||i.storyId,(i.storyId||i.id)&&o.setAttribute("story-id",i.storyId||i.id),i.title&&o.setAttribute("title",i.title),i.persona&&o.setAttribute("persona",i.persona),i.action&&o.setAttribute("action",i.action),i.benefit&&o.setAttribute("benefit",i.benefit),i.priority&&o.setAttribute("priority",i.priority),i.status&&o.setAttribute("status",i.status),i.points&&o.setAttribute("points",String(i.points)),o.setAttribute("detail",i.detail||"compact"),r.appendChild(o)}this.appendChild(r)}this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(e){console.warn(`[story-map] Failed to load src="${t}":`,e)}}#l(t){if(!t)return null;for(let[e,s]of Object.entries(this.#a))if(s===t)return e;return null}#n(t){let e=this.#a[t];if(!e)return;let s=e.querySelectorAll(':scope > [draggable="true"]').length,a=e.closest("[data-activity-column]");if(!a)return;let r=a.querySelector(".sm-activity-count");r&&(r.textContent=String(s))}#c(t){this.#r&&(this.#r.textContent="",requestAnimationFrame(()=>{this.#r&&(this.#r.textContent=t)}))}#d(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#m(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};x("story-map",et);var j=`
1701
+ :host {
1702
+ display: block;
1703
+ position: relative;
1704
+ font-family: var(--_font-sans);
1705
+ line-height: 1.5;
1706
+ color: var(--_text);
1707
+ container-type: inline-size;
1708
+
1709
+ --_bg: var(--review-surface-bg, var(--color-surface, #ffffff));
1710
+ --_card: var(--review-surface-card, var(--color-surface-raised, #f8f9fa));
1711
+ --_border: var(--review-surface-border, var(--color-border, #e0e0e0));
1712
+ --_text: var(--review-surface-text, var(--color-text, #1a1a1a));
1713
+ --_muted: var(--review-surface-muted, var(--color-text-muted, #666666));
1714
+ --_accent: var(--review-surface-accent, var(--color-interactive, #0066cc));
1715
+ --_pin-bg: var(--review-surface-pin-bg, var(--color-interactive, #0066cc));
1716
+ --_pin-text: var(--review-surface-pin-text, #ffffff);
1717
+ --_pin-size: var(--review-surface-pin-size, 28px);
1718
+ --_resolved: var(--review-surface-resolved, var(--color-success, #16a34a));
1719
+ --_radius: var(--review-surface-radius, var(--radius-xl, 1rem));
1720
+ --_radius-m: var(--review-surface-radius-m, var(--radius-m, 0.5rem));
1721
+ --_radius-full: var(--review-surface-radius-full, var(--radius-full, 9999px));
1722
+ --_font-sans: var(--review-surface-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
1723
+ --_font-xs: var(--review-surface-font-xs, var(--font-size-xs, 0.75rem));
1724
+ --_font-sm: var(--review-surface-font-sm, var(--font-size-sm, 0.875rem));
1725
+ --_font-md: var(--review-surface-font-md, var(--font-size-md, 1rem));
1726
+ --_space-2xs: var(--review-surface-space-2xs, var(--size-2xs, 0.25rem));
1727
+ --_space-xs: var(--review-surface-space-xs, var(--size-xs, 0.5rem));
1728
+ --_space-s: var(--review-surface-space-s, var(--size-s, 0.75rem));
1729
+ --_space-m: var(--review-surface-space-m, var(--size-m, 1rem));
1730
+ --_space-l: var(--review-surface-space-l, var(--size-l, 1.5rem));
1731
+ --_duration: var(--review-surface-duration, var(--duration-normal, 200ms));
1732
+ --_duration-fast: var(--review-surface-duration-fast, var(--duration-fast, 100ms));
1733
+ --_ease: var(--review-surface-ease, var(--ease-default, ease));
1734
+ }
1735
+
1736
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
1737
+
1738
+ /* \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 */
1739
+ .rs-container {
1740
+ position: relative;
1741
+ display: grid;
1742
+ }
1743
+
1744
+ .rs-container > ::slotted(*),
1745
+ .rs-container > .rs-overlay {
1746
+ grid-area: 1 / 1;
1747
+ }
1748
+
1749
+ /* \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 */
1750
+ .rs-overlay {
1751
+ position: relative;
1752
+ z-index: 10;
1753
+ pointer-events: none;
1754
+ cursor: default;
1755
+ }
1756
+
1757
+ :host([data-annotating]) .rs-overlay {
1758
+ pointer-events: auto;
1759
+ cursor: crosshair;
1760
+ }
1761
+
1762
+ /* \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 */
1763
+ .rs-pin {
1764
+ position: absolute;
1765
+ transform: translate(-50%, -50%);
1766
+ width: var(--_pin-size);
1767
+ height: var(--_pin-size);
1768
+ border-radius: var(--_radius-full);
1769
+ background: var(--_pin-bg);
1770
+ color: var(--_pin-text);
1771
+ border: 2px solid var(--_pin-text);
1772
+ font-size: var(--_font-xs);
1773
+ font-weight: 700;
1774
+ font-family: inherit;
1775
+ display: inline-flex;
1776
+ align-items: center;
1777
+ justify-content: center;
1778
+ cursor: pointer;
1779
+ pointer-events: auto;
1780
+ padding: 0;
1781
+ line-height: 1;
1782
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
1783
+ transition: transform var(--_duration-fast) var(--_ease),
1784
+ box-shadow var(--_duration-fast) var(--_ease);
1785
+ z-index: 11;
1786
+ }
1787
+
1788
+ .rs-pin:hover {
1789
+ transform: translate(-50%, -50%) scale(1.15);
1790
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
1791
+ }
1792
+
1793
+ .rs-pin:focus-visible {
1794
+ outline: 2px solid var(--_accent);
1795
+ outline-offset: 2px;
1796
+ }
1797
+
1798
+ .rs-pin[data-resolved] {
1799
+ background: var(--_resolved);
1800
+ }
1801
+
1802
+ .rs-pin[data-active] {
1803
+ transform: translate(-50%, -50%) scale(1.2);
1804
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--_pin-bg) 30%, transparent);
1805
+ }
1806
+
1807
+ /* \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 */
1808
+ .rs-popover {
1809
+ position: absolute;
1810
+ z-index: 20;
1811
+ width: 300px;
1812
+ max-height: 400px;
1813
+ overflow-y: auto;
1814
+ background: var(--_bg);
1815
+ border: 1px solid var(--_border);
1816
+ border-radius: var(--_radius-m);
1817
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
1818
+ padding: 0;
1819
+ opacity: 0;
1820
+ transform: translateY(4px);
1821
+ transition: opacity var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
1822
+ pointer-events: none;
1823
+ }
1824
+
1825
+ .rs-popover[data-open] {
1826
+ opacity: 1;
1827
+ transform: translateY(0);
1828
+ pointer-events: auto;
1829
+ }
1830
+
1831
+ .rs-popover__header {
1832
+ display: flex;
1833
+ align-items: center;
1834
+ justify-content: space-between;
1835
+ padding: 10px 12px 8px;
1836
+ border-block-end: 1px solid var(--_border);
1837
+ }
1838
+
1839
+ .rs-popover__title {
1840
+ font-size: var(--_font-sm);
1841
+ font-weight: 700;
1842
+ color: var(--_text);
1843
+ }
1844
+
1845
+ .rs-popover__actions {
1846
+ display: flex;
1847
+ gap: 4px;
1848
+ }
1849
+
1850
+ .rs-popover__btn {
1851
+ display: inline-flex;
1852
+ align-items: center;
1853
+ justify-content: center;
1854
+ width: 26px;
1855
+ height: 26px;
1856
+ border: none;
1857
+ border-radius: 4px;
1858
+ background: transparent;
1859
+ color: var(--_muted);
1860
+ cursor: pointer;
1861
+ padding: 0;
1862
+ transition: background var(--_duration-fast) var(--_ease), color var(--_duration-fast) var(--_ease);
1863
+ }
1864
+
1865
+ .rs-popover__btn svg {
1866
+ width: 14px;
1867
+ height: 14px;
1868
+ }
1869
+
1870
+ .rs-popover__btn:hover {
1871
+ background: var(--_border);
1872
+ color: var(--_text);
1873
+ }
1874
+
1875
+ .rs-popover__btn--resolve {
1876
+ color: var(--_resolved);
1877
+ }
1878
+
1879
+ .rs-popover__btn--resolve:hover {
1880
+ background: color-mix(in srgb, var(--_resolved) 15%, transparent);
1881
+ }
1882
+
1883
+ .rs-popover__btn--delete {
1884
+ color: #dc2626;
1885
+ }
1886
+
1887
+ .rs-popover__btn--delete:hover {
1888
+ background: #fef2f2;
1889
+ color: #dc2626;
1890
+ }
1891
+
1892
+ /* \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 */
1893
+ .rs-comment {
1894
+ padding: 10px 12px;
1895
+ }
1896
+
1897
+ .rs-comment__meta {
1898
+ display: flex;
1899
+ align-items: center;
1900
+ gap: 6px;
1901
+ margin-block-end: 4px;
1902
+ }
1903
+
1904
+ .rs-comment__avatar {
1905
+ width: 22px;
1906
+ height: 22px;
1907
+ border-radius: var(--_radius-full);
1908
+ font-size: 10px;
1909
+ font-weight: 700;
1910
+ display: flex;
1911
+ align-items: center;
1912
+ justify-content: center;
1913
+ color: #fff;
1914
+ flex-shrink: 0;
1915
+ }
1916
+
1917
+ .rs-comment__author {
1918
+ font-size: var(--_font-xs);
1919
+ font-weight: 600;
1920
+ color: var(--_text);
1921
+ }
1922
+
1923
+ .rs-comment__time {
1924
+ font-size: 11px;
1925
+ color: var(--_muted);
1926
+ }
1927
+
1928
+ .rs-comment__text {
1929
+ font-size: var(--_font-sm);
1930
+ color: var(--_text);
1931
+ line-height: 1.5;
1932
+ white-space: pre-wrap;
1933
+ word-break: break-word;
1934
+ }
1935
+
1936
+ /* Replies */
1937
+ .rs-replies {
1938
+ border-block-start: 1px solid var(--_border);
1939
+ }
1940
+
1941
+ .rs-reply {
1942
+ padding: 8px 12px;
1943
+ border-block-end: 1px solid color-mix(in srgb, var(--_border) 50%, transparent);
1944
+ }
1945
+
1946
+ .rs-reply:last-child {
1947
+ border-block-end: none;
1948
+ }
1949
+
1950
+ /* \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 */
1951
+ .rs-input {
1952
+ display: flex;
1953
+ gap: 6px;
1954
+ padding: 8px 12px;
1955
+ border-block-start: 1px solid var(--_border);
1956
+ background: var(--_card);
1957
+ border-radius: 0 0 var(--_radius-m) var(--_radius-m);
1958
+ }
1959
+
1960
+ .rs-input__field {
1961
+ flex: 1;
1962
+ min-height: 32px;
1963
+ max-height: 80px;
1964
+ padding: 6px 10px;
1965
+ border: 1px solid var(--_border);
1966
+ border-radius: 6px;
1967
+ font-family: inherit;
1968
+ font-size: var(--_font-xs);
1969
+ line-height: 1.4;
1970
+ color: var(--_text);
1971
+ background: var(--_bg);
1972
+ resize: none;
1973
+ }
1974
+
1975
+ .rs-input__field:focus {
1976
+ outline: 2px solid var(--_accent);
1977
+ outline-offset: -1px;
1978
+ border-color: var(--_accent);
1979
+ }
1980
+
1981
+ .rs-input__field::placeholder {
1982
+ color: var(--_muted);
1983
+ }
1984
+
1985
+ .rs-input__submit {
1986
+ align-self: flex-end;
1987
+ display: inline-flex;
1988
+ align-items: center;
1989
+ justify-content: center;
1990
+ width: 32px;
1991
+ height: 32px;
1992
+ border: none;
1993
+ border-radius: 6px;
1994
+ background: var(--_accent);
1995
+ color: #fff;
1996
+ cursor: pointer;
1997
+ padding: 0;
1998
+ flex-shrink: 0;
1999
+ transition: background var(--_duration-fast) var(--_ease);
2000
+ }
2001
+
2002
+ .rs-input__submit svg {
2003
+ width: 14px;
2004
+ height: 14px;
2005
+ }
2006
+
2007
+ .rs-input__submit:hover {
2008
+ background: color-mix(in srgb, var(--_accent) 85%, #000);
2009
+ }
2010
+
2011
+ .rs-input__submit:disabled {
2012
+ opacity: 0.4;
2013
+ cursor: not-allowed;
2014
+ }
2015
+
2016
+ /* \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 */
2017
+ .rs-toolbar {
2018
+ display: flex;
2019
+ align-items: center;
2020
+ gap: var(--_space-xs);
2021
+ padding: var(--_space-xs) var(--_space-s);
2022
+ background: var(--_card);
2023
+ border: 1px solid var(--_border);
2024
+ border-radius: var(--_radius-m);
2025
+ margin-block-start: var(--_space-xs);
2026
+ }
2027
+
2028
+ .rs-toolbar__btn {
2029
+ display: inline-flex;
2030
+ align-items: center;
2031
+ gap: 5px;
2032
+ padding: 4px 10px;
2033
+ border: 1px solid var(--_border);
2034
+ border-radius: 6px;
2035
+ background: var(--_bg);
2036
+ color: var(--_text);
2037
+ font-family: inherit;
2038
+ font-size: var(--_font-xs);
2039
+ font-weight: 600;
2040
+ cursor: pointer;
2041
+ line-height: 1;
2042
+ transition: background var(--_duration-fast) var(--_ease),
2043
+ border-color var(--_duration-fast) var(--_ease);
2044
+ }
2045
+
2046
+ .rs-toolbar__btn svg {
2047
+ width: 14px;
2048
+ height: 14px;
2049
+ }
2050
+
2051
+ .rs-toolbar__btn:hover {
2052
+ background: var(--_border);
2053
+ }
2054
+
2055
+ .rs-toolbar__btn[aria-pressed="true"] {
2056
+ background: var(--_accent);
2057
+ color: #fff;
2058
+ border-color: var(--_accent);
2059
+ }
2060
+
2061
+ .rs-toolbar__count {
2062
+ font-size: var(--_font-xs);
2063
+ color: var(--_muted);
2064
+ margin-inline-start: auto;
2065
+ }
2066
+
2067
+ /* \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 */
2068
+ .rs-resolved-badge {
2069
+ display: inline-flex;
2070
+ align-items: center;
2071
+ gap: 4px;
2072
+ font-size: 11px;
2073
+ font-weight: 600;
2074
+ color: var(--_resolved);
2075
+ padding: 2px 8px;
2076
+ border-radius: var(--_radius-full);
2077
+ background: color-mix(in srgb, var(--_resolved) 12%, transparent);
2078
+ }
2079
+
2080
+ .rs-resolved-badge svg {
2081
+ width: 12px;
2082
+ height: 12px;
2083
+ }
2084
+
2085
+ /* \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 */
2086
+ .rs-live {
2087
+ position: absolute;
2088
+ width: 1px;
2089
+ height: 1px;
2090
+ overflow: hidden;
2091
+ clip: rect(0, 0, 0, 0);
2092
+ white-space: nowrap;
2093
+ }
2094
+
2095
+ /* \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 */
2096
+ :host([compact]) {
2097
+ --_pin-size: 22px;
2098
+ }
2099
+
2100
+ :host([compact]) .rs-popover {
2101
+ width: 250px;
2102
+ max-height: 300px;
2103
+ }
2104
+
2105
+ :host([compact]) .rs-toolbar {
2106
+ padding: 3px var(--_space-xs);
2107
+ }
2108
+
2109
+ :host([compact]) .rs-toolbar__btn {
2110
+ font-size: 11px;
2111
+ padding: 3px 8px;
2112
+ }
2113
+
2114
+ /* \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 */
2115
+ @container (max-width: 400px) {
2116
+ .rs-popover {
2117
+ width: 240px;
2118
+ }
2119
+
2120
+ .rs-toolbar {
2121
+ flex-wrap: wrap;
2122
+ }
2123
+ }
2124
+
2125
+ /* \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 */
2126
+ @media (prefers-reduced-motion: reduce) {
2127
+ .rs-pin,
2128
+ .rs-popover,
2129
+ .rs-toolbar__btn,
2130
+ .rs-popover__btn,
2131
+ .rs-input__submit {
2132
+ transition: none;
2133
+ }
2134
+ }
2135
+
2136
+ /* \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 */
2137
+ @media print {
2138
+ .rs-overlay,
2139
+ .rs-toolbar,
2140
+ .rs-popover {
2141
+ display: none;
2142
+ }
2143
+ }
2144
+
2145
+ /* \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 */
2146
+ .state-msg { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
2147
+ .state-msg--error { color: #dc2626; }
2148
+
2149
+ @media (prefers-color-scheme: dark) {
2150
+ .rs-popover__btn--delete:hover {
2151
+ background: #450a0a;
2152
+ }
2153
+ }
2154
+ `;function jt(){let d=globalThis.localStorage;if(!d)throw new Error("VBStore: localStorage is not available in this environment");return{async getRaw(t){return d.getItem(t)},async setRaw(t,e){d.setItem(t,e)},async removeRaw(t){d.removeItem(t)},async keys(t){let e=[];for(let s=0;s<d.length;s++){let a=d.key(s);a&&a.startsWith(t)&&e.push(a)}return e}}}var R=null;function k(){return R||(R=jt()),R}function st(d,t){if(typeof d!="string"||!d)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:${d}:${t}`}function gt(d){if(typeof d!="string"||!d)throw new TypeError("VBStore: namespace must be a non-empty string");return`vb:${d}:`}function vt(d){try{let t=JSON.parse(d);if(t&&typeof t=="object"&&typeof t.timestamp=="number")return t}catch{}return null}var P={configure(d={}){R=d.backend??null},async set(d,t,e){let s={data:e,timestamp:Date.now()};await k().setRaw(st(d,t),JSON.stringify(s))},async get(d,t,e){let s=await k().getRaw(st(d,t));if(s==null)return null;let a=vt(s);return!a||e?.maxAge!=null&&Date.now()-a.timestamp>e.maxAge?null:a.data},async remove(d,t){await k().removeRaw(st(d,t))},async list(d){let t=gt(d),e=await k().keys(t),s=[];for(let a of e){let r=await k().getRaw(a);if(r==null)continue;let i=vt(r);i&&s.push({key:a.slice(t.length),data:i.data,timestamp:i.timestamp})}return s},async clear(d){let t=gt(d),e=await k().keys(t);for(let s of e)await k().removeRaw(s)},async clearAll(){let d=await k().keys("vb:");for(let t of d)await k().removeRaw(t)},async setMany(d,t){for(let[e,s]of t)await P.set(d,e,s)}};var z=class{#t=new Map;async load(){return[...this.#t.values()]}async save(t){return t.id||(t.id=crypto.randomUUID()),this.#t.set(t.id,t),t}async update(t,e){let s=this.#t.get(t);if(!s)throw new Error(`Pin ${t} not found`);return Object.assign(s,e),s}async remove(t){this.#t.delete(t)}},D=class{#t;constructor(t="default"){this.#t=t}async#e(){let t=await P.get("reviews",this.#t);return Array.isArray(t)?t:[]}async#s(t){await P.set("reviews",this.#t,t)}async load(){return this.#e()}async save(t){t.id||(t.id=crypto.randomUUID());let e=await this.#e();return e.push(t),await this.#s(e),t}async update(t,e){let s=await this.#e(),a=s.findIndex(r=>r.id===t);if(a===-1)throw new Error(`Pin ${t} not found`);return Object.assign(s[a],e),await this.#s(s),s[a]}async remove(t){let e=(await this.#e()).filter(s=>s.id!==t);await this.#s(e)}},B=class{#t;constructor(t){if(!t)throw new Error("RestAdapter requires an endpoint URL");this.#t=t.replace(/\/$/,"")}async load(){let t=await fetch(this.#t);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.#t,{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 s=await fetch(`${this.#t}/${encodeURIComponent(t)}`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)});if(!s.ok)throw new Error(`HTTP ${s.status}`);return s.json()}async remove(t){let e=await fetch(`${this.#t}/${encodeURIComponent(t)}`,{method:"DELETE"});if(!e.ok)throw new Error(`HTTP ${e.status}`)}},at=class extends HTMLElement{static get observedAttributes(){return["src","editable","adapter","endpoint","storage-key","author","compact","show-resolved"]}#t=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){this.__pins=Array.isArray(t)?t:[],this.isConnected&&this._render()}get adapter(){return this.__adapter}set adapter(t){this.__adapter=t,this.isConnected&&this._loadFromAdapter()}#e(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}connectedCallback(){this.#e(),this.setAttribute("data-upgraded",""),this.#s(),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.#s(),this._loadFromAdapter()):this._render())}#s(){if(this.__adapter&&!(this.__adapter instanceof z)&&!(this.__adapter instanceof D)&&!(this.__adapter instanceof B))return;switch(this.getAttribute("adapter")||"memory"){case"local":this.__adapter=new D(this.getAttribute("storage-key")||"default");break;case"rest":try{this.__adapter=new B(this.getAttribute("endpoint"))}catch{this.__adapter=new z}break;default:this.__adapter=new z}}async _loadSrc(t){if(t){this.shadowRoot.innerHTML=`<style>${j}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();this.__pins=Array.isArray(s)?s:s.pins||[],this._render()}catch(e){this.shadowRoot.innerHTML=`<style>${j}</style><div class="state-msg state-msg--error">Could not load pins: ${u(e.message)}</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.#n(`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(s=>s.id===t);e&&(this.__adapter&&await this.__adapter.remove(t),this.__pins=this.__pins.filter(s=>s.id!==t),this._activePin===t&&(this._activePin=null),this._render(),this.#n("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 s={resolved:!0,resolvedBy:this.getAttribute("author")||"Anonymous",resolvedAt:new Date().toISOString()};this.__adapter&&await this.__adapter.update(t,s),Object.assign(e,s),this._render(),this.#n("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 s={resolved:!1,resolvedBy:null,resolvedAt:null};this.__adapter&&await this.__adapter.update(t,s),Object.assign(e,s),this._render(),this.#n("Pin re-opened"),this.dispatchEvent(new CustomEvent("review-surface:update",{bubbles:!0,composed:!0,detail:{pin:e,changes:s}}))}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,s)=>new Date(e.createdAt)-new Date(s.createdAt))}_render(){let t=this.hasAttribute("editable"),e=this.#a(),s=this._activePin?this.__pins.find(a=>a.id===this._activePin):null;this.setAttribute("pin-count",String(e.length)),this.shadowRoot.innerHTML=`<style>${j}</style>
2155
+ <div class="rs-container">
2156
+ <slot></slot>
2157
+ <div class="rs-overlay" role="img" aria-label="Review annotation surface">
2158
+ ${e.map((a,r)=>this._renderPin(a,r+1)).join("")}
2159
+ </div>
2160
+ ${s?this._renderPopover(s,t):""}
2161
+ </div>
2162
+ ${t?this._renderToolbar(e.length):""}
2163
+ <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 s=t.text?t.text.slice(0,50):"Empty pin";return`<button class="rs-pin"
2164
+ data-pin-id="${u(t.id)}"
2165
+ ${t.resolved?"data-resolved":""}
2166
+ ${this._activePin===t.id?"data-active":""}
2167
+ style="left:${t.x}%;top:${t.y}%"
2168
+ aria-label="Pin ${e}: ${u(s)}"
2169
+ aria-expanded="${this._activePin===t.id}"
2170
+ aria-haspopup="dialog">
2171
+ <span class="rs-pin__number">${e}</span>
2172
+ </button>`}_renderPopover(t,e){let s=this.#a().findIndex(a=>a.id===t.id)+1;return`<div class="rs-popover" data-open
2173
+ style="left:${Math.min(t.x,70)}%;top:${t.y}%"
2174
+ role="dialog"
2175
+ aria-labelledby="rs-popover-title-${u(t.id)}">
2176
+
2177
+ <div class="rs-popover__header">
2178
+ <span class="rs-popover__title" id="rs-popover-title-${u(t.id)}">
2179
+ Pin ${s}
2180
+ ${t.resolved?`<span class="rs-resolved-badge">${v(_.checkCircle)} Resolved</span>`:""}
2181
+ </span>
2182
+ <div class="rs-popover__actions">
2183
+ ${e&&!t.resolved?`
2184
+ <button class="rs-popover__btn rs-popover__btn--resolve" data-action="resolve" data-pin-id="${u(t.id)}"
2185
+ aria-label="Resolve pin" title="Resolve">${v(_.checkCircle)}</button>`:""}
2186
+ ${e&&t.resolved?`
2187
+ <button class="rs-popover__btn" data-action="unresolve" data-pin-id="${u(t.id)}"
2188
+ aria-label="Re-open pin" title="Re-open">${v(_.messageCircle)}</button>`:""}
2189
+ ${e?`
2190
+ <button class="rs-popover__btn rs-popover__btn--delete" data-action="delete" data-pin-id="${u(t.id)}"
2191
+ aria-label="Delete pin" title="Delete">${v(_.x)}</button>`:""}
2192
+ <button class="rs-popover__btn" data-action="close"
2193
+ aria-label="Close">${v(_.x)}</button>
2194
+ </div>
2195
+ </div>
2196
+
2197
+ <div class="rs-comment">
2198
+ <div class="rs-comment__meta">
2199
+ <span class="rs-comment__avatar" style="background:${S(t.author||"Anonymous")}">${E(t.author||"Anonymous")}</span>
2200
+ <span class="rs-comment__author">${u(t.author||"Anonymous")}</span>
2201
+ <span class="rs-comment__time">${this.#l(t.createdAt)}</span>
2202
+ </div>
2203
+ <div class="rs-comment__text">${u(t.text)}</div>
2204
+ </div>
2205
+
2206
+ ${t.replies?.length?`
2207
+ <div class="rs-replies">
2208
+ ${t.replies.map(a=>`
2209
+ <div class="rs-reply">
2210
+ <div class="rs-comment__meta">
2211
+ <span class="rs-comment__avatar" style="background:${S(a.author||"Anonymous")}">${E(a.author||"Anonymous")}</span>
2212
+ <span class="rs-comment__author">${u(a.author||"Anonymous")}</span>
2213
+ <span class="rs-comment__time">${this.#l(a.createdAt)}</span>
2214
+ </div>
2215
+ <div class="rs-comment__text">${u(a.text)}</div>
2216
+ </div>
2217
+ `).join("")}
2218
+ </div>`:""}
2219
+
2220
+ ${e?`
2221
+ <div class="rs-input">
2222
+ <textarea class="rs-input__field" placeholder="Reply\u2026" rows="1"
2223
+ aria-label="Reply to pin ${s}"></textarea>
2224
+ <button class="rs-input__submit" data-action="reply" data-pin-id="${u(t.id)}"
2225
+ aria-label="Send reply">${v(_.send)}</button>
2226
+ </div>`:""}
2227
+
2228
+ </div>`}_renderToolbar(t){return`<div class="rs-toolbar" role="toolbar" aria-label="Review tools">
2229
+ <button class="rs-toolbar__btn" data-action="toggle-mode"
2230
+ aria-pressed="${this._annotating}"
2231
+ title="Toggle annotate mode">
2232
+ ${v(_.mapPin)} Annotate
2233
+ </button>
2234
+ <button class="rs-toolbar__btn" data-action="export"
2235
+ title="Export pins as JSON">
2236
+ ${v(_.download)} Export
2237
+ </button>
2238
+ <output class="rs-toolbar__count">${t} pin${t!==1?"s":""}</output>
2239
+ </div>`}_bindListeners(t){let e=this.shadowRoot;e.querySelectorAll(".rs-pin").forEach(r=>{r.addEventListener("click",i=>{i.stopPropagation();let o=r.dataset.pinId;this._activePin=this._activePin===o?null:o,this._render(),this._activePin&&this.dispatchEvent(new CustomEvent("review-surface:select",{bubbles:!0,composed:!0,detail:{pin:this.__pins.find(n=>n.id===o)}}))})});let s=e.querySelector(".rs-overlay");s&&t&&s.addEventListener("click",r=>{if(!this._annotating||r.target.closest(".rs-pin"))return;let i=s.getBoundingClientRect(),o=(r.clientX-i.left)/i.width*100,n=(r.clientY-i.top)/i.height*100;this.#r(o,n)}),e.querySelectorAll("[data-action]").forEach(r=>{r.addEventListener("click",i=>{i.stopPropagation();let o=r.dataset.action,n=r.dataset.pinId;switch(o){case"close":this._activePin=null,this._render();break;case"resolve":this.resolvePin(n);break;case"unresolve":this.unresolvePin(n);break;case"delete":this.removePin(n);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(n);break}})});let a=e.querySelector(".rs-input__field");a&&a.addEventListener("keydown",r=>{if(r.key==="Enter"&&!r.shiftKey){r.preventDefault();let i=e.querySelector('[data-action="reply"]')?.dataset.pinId;i&&this.#o(i)}}),e.addEventListener("keydown",r=>{r.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#r(t,e){let s=this.getAttribute("author")||"Anonymous",a=await this.addPin({x:t,y:e,text:"",author:s});this._activePin=a.id,this._render(),requestAnimationFrame(()=>{let r=this.shadowRoot.querySelector(".rs-input__field");r&&r.focus()})}async#o(t){let e=this.shadowRoot.querySelector(".rs-input__field");if(!e)return;let s=e.value.trim();if(!s)return;let a=this.__pins.find(i=>i.id===t);if(!a)return;let r={id:crypto.randomUUID(),text:s,author:this.getAttribute("author")||"Anonymous",createdAt:new Date().toISOString()};a.replies||(a.replies=[]),a.text?(a.replies.push(r),this.__adapter&&await this.__adapter.update(t,{replies:a.replies})):(a.text=s,this.__adapter&&await this.__adapter.update(t,{text:s})),this._render(),this.#n("Reply added"),requestAnimationFrame(()=>{let i=this.shadowRoot.querySelector(".rs-input__field");i&&i.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);try{await navigator.clipboard.writeText(t),this.#n("Pins copied to clipboard")}catch{let e=new Blob([t],{type:"application/json"}),s=URL.createObjectURL(e),a=document.createElement("a");a.href=s,a.download="review-pins.json",a.click(),URL.revokeObjectURL(s),this.#n("Pins exported as file")}}#l(t){if(!t)return"";try{let e=new Date(t),a=new Date-e,r=Math.floor(a/6e4);if(r<1)return"just now";if(r<60)return`${r}m ago`;let i=Math.floor(r/60);if(i<24)return`${i}h ago`;let o=Math.floor(i/24);return o<7?`${o}d ago`:e.toLocaleDateString()}catch{return""}}#n(t){let e=this.shadowRoot.querySelector(".rs-live");e&&(e.textContent=t)}};x("review-surface",at);var $=864e5,it=$*7,H=$*30,Rt=$*91,_t=$*365;function yt(d){return typeof d=="number"?d:new Date(d).getTime()}function Pt(d){return d<=it*3?t=>t.toLocaleDateString(void 0,{month:"short",day:"numeric"}):d<=H*3?t=>t.toLocaleDateString(void 0,{month:"short",day:"numeric"}):d<=_t?t=>t.toLocaleDateString(void 0,{month:"short",year:"2-digit"}):t=>t.toLocaleDateString(void 0,{year:"numeric"})}function Dt(d){return d<=it*3?"day":d<=H*3?"week":d<=_t?"month":"quarter"}function xt(d){return String(d).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}var rt=class extends A{static get observedAttributes(){return["src","title","view","show-today","show-progress","show-dependencies","compact"]}#t=null;#e=null;#s=null;#a=[];#r=0;#o=0;#i=0;setup(){let t=this.querySelector(":scope > table");if(!t||(this.#a=this.#l(t),this.#a.length===0))return!1;this.#r=Math.min(...this.#a.map(e=>e.start)),this.#o=Math.max(...this.#a.map(e=>e.end)),this.#i=this.#o-this.#r,this.#i<=0&&(this.#i=$),this.#n(t),this.dispatchEvent(new CustomEvent("gantt-chart:ready",{bubbles:!0,detail:{taskCount:this.#a.length,dateRange:{start:new Date(this.#r).toISOString(),end:new Date(this.#o).toISOString()}}}))}teardown(){this.#s&&(this.#s.remove(),this.#s=null),this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null);let t=this.querySelector("table.gc-sr-only");t&&t.classList.remove("gc-sr-only"),this.#a=[]}attributeChangedCallback(t,e,s){e===s||!this.isConnected||(t==="src"?this._loadSrc(s):this.hasAttribute("data-upgraded")&&(this.teardown(),this.removeAttribute("data-upgraded"),this.setup()))}#l(t){let e=t.querySelectorAll("tbody tr"),s=[];for(let a=0;a<e.length;a++){let r=e[a],i=r.querySelectorAll("time[datetime]");if(i.length<2&&!r.hasAttribute("data-milestone"))continue;let o=i[0]?.getAttribute("datetime"),n=i.length>1?i[1].getAttribute("datetime"):o;if(!o)continue;let c=r.querySelector("progress"),l=c?c.value/(c.max||100):0,h=r.cells[0]?.textContent?.trim()||`Task ${a+1}`;s.push({id:r.dataset.taskId||`gc-task-${a}`,name:h,start:yt(o),end:yt(n),progress:l,group:r.dataset.group||null,depends:r.dataset.depends?r.dataset.depends.split(",").map(p=>p.trim()):[],status:r.dataset.status||null,assignee:r.dataset.assignee||null,milestone:r.hasAttribute("data-milestone"),color:r.dataset.color||null,storyIds:r.dataset.storyIds?r.dataset.storyIds.split(",").map(p=>p.trim()):[],itemIds:r.dataset.itemIds?r.dataset.itemIds.split(",").map(p=>p.trim()):[]})}return s}#n(t){let e=this.getAttribute("title"),s=this.hasAttribute("show-today"),a=this.hasAttribute("show-progress"),r=this.hasAttribute("show-dependencies");e&&(this.#s=document.createElement("h2"),this.#s.className="gc-title",this.#s.textContent=e,this.insertBefore(this.#s,t)),this.#t=document.createElement("div"),this.#t.className="gc-container",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label",`Gantt chart${e?": "+e:""}`);let i=this.#c();this.#t.appendChild(i);let o=document.createElement("div");o.className="gc-body";let n=document.createElement("div");n.className="gc-task-list";let c=document.createElement("div");c.className="gc-bars";let l=this.#m();c.appendChild(l);let h=this.#f();for(let[p,f]of h){if(h.size>1&&p){let g=document.createElement("div");g.className="gc-group-header";let m=document.createElement("span");m.className="gc-group-label",m.textContent=p,g.appendChild(m),n.appendChild(g);let b=document.createElement("div");b.className="gc-group-spacer",c.appendChild(b)}for(let g of f){let m=document.createElement("div");m.className="gc-task-row",m.setAttribute("data-task-id",g.id);let b=document.createElement("span");b.className="gc-task-name",b.textContent=g.name,m.appendChild(b);let y=document.createElement("span");y.className="gc-task-dates",y.textContent=`${new Date(g.start).toLocaleDateString()} to ${new Date(g.end).toLocaleDateString()}`,m.appendChild(y),n.appendChild(m);let w=document.createElement("div");w.className="gc-bar-row",g.milestone?w.appendChild(this.#k(g)):w.appendChild(this.#C(g,a)),c.appendChild(w)}}if(s){let p=this.#b();p&&c.appendChild(p)}r&&requestAnimationFrame(()=>{let p=this.#E(c);p&&c.appendChild(p)}),o.appendChild(n),o.appendChild(c),this.#t.appendChild(o),this.insertBefore(this.#t,t),t.classList.add("gc-sr-only"),this.#e=document.createElement("div"),this.#e.className="gc-sr-only",this.#e.setAttribute("role","status"),this.#e.setAttribute("aria-live","polite"),this.#e.setAttribute("aria-atomic","true"),this.appendChild(this.#e),this.listen(this.#t,"click",p=>{let f=p.target.closest(".gc-bar, .gc-milestone");if(!f)return;let g=f.dataset.taskId,m=this.#a.find(b=>b.id===g);m&&(this.#p(`Selected: ${m.name}`),this.dispatchEvent(new CustomEvent("gantt-chart:task-click",{bubbles:!0,detail:{task:m}})))}),this.listen(this.#t,"keydown",p=>{if(p.key==="Enter"||p.key===" "){let f=p.target.closest(".gc-bar, .gc-milestone");f&&(p.preventDefault(),f.click())}})}#c(){let t=document.createElement("div");t.className="gc-timeline-header";let e=document.createElement("div");e.className="gc-timeline-spacer",t.appendChild(e);let s=document.createElement("div");s.className="gc-timeline-dates";let a=this.#d();for(let{position:r,text:i}of a){let o=document.createElement("span");o.className="gc-date-label",o.style.left=`${r}%`,o.textContent=i,s.appendChild(o)}return t.appendChild(s),t}#d(){let t=this.getAttribute("view")||"auto",e=t==="auto"?Dt(this.#i):t,s=Pt(this.#i),a=[],r;switch(e){case"day":r=$;break;case"week":r=it;break;case"month":r=H;break;case"quarter":r=Rt;break;default:r=H}let i=new Date(this.#r);if(e==="week"){let c=i.getDay(),l=c===0?1:c===1?0:8-c;i.setDate(i.getDate()+l)}else if(e==="month")i.setDate(1),i.getTime()<this.#r&&i.setMonth(i.getMonth()+1);else if(e==="quarter"){let c=i.getMonth(),l=Math.ceil((c+1)/3)*3;i.setMonth(l),i.setDate(1)}let o=i.getTime();o>this.#r+r*.5&&a.push({position:0,text:s(new Date(this.#r))});let n=o;for(;n<=this.#o;){let c=(n-this.#r)/this.#i*100;if(c>=0&&c<=100&&a.push({position:c,text:s(new Date(n))}),e==="month"){let l=new Date(n);l.setMonth(l.getMonth()+1),n=l.getTime()}else if(e==="quarter"){let l=new Date(n);l.setMonth(l.getMonth()+3),n=l.getTime()}else n+=r}return a}#m(){let t=document.createElement("div");t.className="gc-grid-lines";let e=this.#d();for(let{position:s}of e){if(s<=0)continue;let a=document.createElement("div");a.className="gc-grid-line",a.style.left=`${s}%`,t.appendChild(a)}return t}#f(){let t=new Map;for(let e of this.#a){let s=e.group||"";t.has(s)||t.set(s,[]),t.get(s).push(e)}return t}#C(t,e){let s=(t.start-this.#r)/this.#i*100,a=(t.end-t.start)/this.#i*100,r=document.createElement("div");if(r.className="gc-bar",r.setAttribute("data-task-id",t.id),r.setAttribute("role","img"),r.setAttribute("tabindex","0"),r.setAttribute("aria-label",`${xt(t.name)}: ${new Date(t.start).toLocaleDateString()} to ${new Date(t.end).toLocaleDateString()}`+(t.progress>0?`, ${Math.round(t.progress*100)}% complete`:"")),r.style.left=`${s}%`,r.style.width=`${Math.max(a,.5)}%`,t.status&&r.setAttribute("data-status",t.status),t.color&&r.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)}%`,r.appendChild(i)}if(a>8){let i=document.createElement("span");i.className="gc-bar-label",i.textContent=t.name,r.appendChild(i)}return r}#k(t){let e=(t.start-this.#r)/this.#i*100,s=document.createElement("div");return s.className="gc-milestone",s.setAttribute("data-task-id",t.id),s.setAttribute("role","img"),s.setAttribute("tabindex","0"),s.setAttribute("aria-label",`Milestone: ${xt(t.name)}, ${new Date(t.start).toLocaleDateString()}`),s.style.left=`${e}%`,t.status&&s.setAttribute("data-status",t.status),t.color&&s.style.setProperty("--gc-bar-color",t.color),s}#b(){let t=Date.now();if(t<this.#r||t>this.#o)return null;let e=(t-this.#r)/this.#i*100,s=document.createElement("div");s.className="gc-today-line",s.style.left=`${e}%`;let a=document.createElement("span");return a.className="gc-today-label",a.textContent="Today",s.appendChild(a),s}#E(t){if(!this.#a.some(n=>n.depends.length>0))return null;let s="http://www.w3.org/2000/svg",a=document.createElementNS(s,"svg");a.setAttribute("class","gc-deps"),a.style.width="100%",a.style.height="100%";let r=document.createElementNS(s,"defs"),i=document.createElementNS(s,"marker");i.setAttribute("id","gc-arrowhead"),i.setAttribute("markerWidth","8"),i.setAttribute("markerHeight","6"),i.setAttribute("refX","8"),i.setAttribute("refY","3"),i.setAttribute("orient","auto");let o=document.createElementNS(s,"polygon");o.setAttribute("points","0 0, 8 3, 0 6"),o.setAttribute("fill","var(--color-text-muted, #666666)"),i.appendChild(o),r.appendChild(i),a.appendChild(r);for(let n of this.#a)for(let c of n.depends){let l=this.#a.find(Ct=>Ct.id===c);if(!l)continue;let h=(l.end-this.#r)/this.#i*100,p=(n.start-this.#r)/this.#i*100,f=this.#g(l.id,t),g=this.#g(n.id,t);if(f===-1||g===-1)continue;let m=36,b=f*m+m/2,y=g*m+m/2,w=document.createElementNS(s,"path"),ut=h+(p-h)/2;w.setAttribute("d",`M ${h}% ${b} C ${ut}% ${b}, ${ut}% ${y}, ${p}% ${y}`),w.setAttribute("class","gc-dep-line"),a.appendChild(w)}return a}#g(t,e){let s=e.querySelectorAll(".gc-bar-row");for(let a=0;a<s.length;a++){let r=s[a].querySelector("[data-task-id]");if(r&&r.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 s=await e.json();for(;this.firstChild;)this.firstChild.remove();let a=document.createElement("table"),r=document.createElement("thead"),i=document.createElement("tr");for(let n of["Task","Start","End","Progress"]){let c=document.createElement("th");c.textContent=n,i.appendChild(c)}r.appendChild(i),a.appendChild(r);let o=document.createElement("tbody");for(let n of s.tasks||[]){let c=document.createElement("tr");n.id&&(c.dataset.taskId=n.id),n.group&&(c.dataset.group=n.group),n.depends&&(c.dataset.depends=Array.isArray(n.depends)?n.depends.join(","):n.depends),n.status&&(c.dataset.status=n.status),n.assignee&&(c.dataset.assignee=n.assignee),n.milestone&&c.setAttribute("data-milestone",""),n.color&&(c.dataset.color=n.color),n.storyIds&&(c.dataset.storyIds=Array.isArray(n.storyIds)?n.storyIds.join(","):n.storyIds),n.itemIds&&(c.dataset.itemIds=Array.isArray(n.itemIds)?n.itemIds.join(","):n.itemIds);let l=document.createElement("td");l.textContent=n.name||"",c.appendChild(l);let h=document.createElement("td"),p=document.createElement("time");p.setAttribute("datetime",n.start),p.textContent=new Date(n.start).toLocaleDateString(void 0,{month:"short",day:"numeric"}),h.appendChild(p),c.appendChild(h);let f=document.createElement("td"),g=document.createElement("time");g.setAttribute("datetime",n.end||n.start),g.textContent=new Date(n.end||n.start).toLocaleDateString(void 0,{month:"short",day:"numeric"}),f.appendChild(g),c.appendChild(f);let m=document.createElement("td"),b=document.createElement("progress");b.value=n.progress||0,b.max=100,b.textContent=`${n.progress||0}%`,m.appendChild(b),c.appendChild(m),o.appendChild(c)}a.appendChild(o),this.appendChild(a),s.title&&this.setAttribute("title",s.title),this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(e){console.warn(`[gantt-chart] Failed to load src="${t}":`,e)}}#p(t){this.#e&&(this.#e.textContent="",requestAnimationFrame(()=>{this.#e&&(this.#e.textContent=t)}))}};x("gantt-chart",rt);var ot=class d extends A{static get observedAttributes(){return["src","compact","title","searchable"]}static#t=0;#e=null;#s=null;#a=null;#r=null;#o=null;#i="";#l=null;#n=[];#c=[];#d=new Map;#m=new Map;setup(){this.#i=`gloss-${++d.#t}`;let t=this.querySelector(":scope > dl");if(!t)return!1;let e=[...t.querySelectorAll(":scope > div[data-term-id]")];if(e.length===0)return!1;this.#n=e.map(r=>{let i=r.getAttribute("data-term-id")||"",o=r.getAttribute("data-category")||"Uncategorized",n=r.querySelector("dt"),c=r.querySelector("dd"),l=n?n.textContent.trim():"",h=c?c.textContent.trim():"";return r.id=i,{id:i,term:l,definition:h,category:o,el:r}});let s=new Set;this.#c=[];for(let r of this.#n)s.has(r.category)||(s.add(r.category),this.#c.push(r.category));t.remove(),this.#f();let a=this.getAttribute("src");if(a){this._loadSrc(a);return}this.dispatchEvent(new CustomEvent("glossary-wc:ready",{bubbles:!0,detail:{termCount:this.#n.length,categories:[...this.#c]}}))}teardown(){this.#l&&clearTimeout(this.#l);let t=this.querySelector(".gloss-title");t&&t.remove(),this.#e?.parentElement&&this.#e.parentElement.remove(),this.#s&&this.#s.remove(),this.#o&&this.#o.remove(),this.#r&&this.#r.remove(),this.#e=null,this.#s=null,this.#a=null,this.#r=null,this.#o=null,this.#n=[],this.#c=[],this.#d=new Map,this.#m=new Map}#f(){let t=this.getAttribute("title");if(t){let e=document.createElement("h2");e.className="gloss-title",e.textContent=t,this.#a=document.createElement("output"),this.#a.className="gloss-count",this.#a.textContent=String(this.#n.length),e.appendChild(this.#a),this.appendChild(e)}if(this.hasAttribute("searchable")){let e=document.createElement("div");e.className="gloss-search";let s=document.createElement("input");s.type="search",s.className="gloss-search-input",s.setAttribute("placeholder","Search terms\u2026"),s.setAttribute("aria-label","Search glossary terms"),e.appendChild(s),this.appendChild(e),this.#e=s,this.listen(s,"input",this.#b)}this.#C(),this.#o=document.createElement("div"),this.#o.className="gloss-categories",this.#o.setAttribute("role","region"),this.#o.setAttribute("aria-label","Glossary terms"),this.appendChild(this.#o);for(let e of this.#c){let s=this.#n.filter(a=>a.category===e);this.#k(e,s)}this.#r=document.createElement("div"),this.#r.className="gloss-live-region",this.#r.setAttribute("role","status"),this.#r.setAttribute("aria-live","polite"),this.#r.setAttribute("aria-atomic","true"),this.appendChild(this.#r)}#C(){this.#s=document.createElement("nav"),this.#s.className="gloss-jump-bar",this.#s.setAttribute("aria-label","Alphabet navigation");let t=new Set;for(let e of this.#n){let s=e.term.charAt(0).toUpperCase();/[A-Z]/.test(s)&&t.add(s)}for(let e=65;e<=90;e++){let s=String.fromCharCode(e),a=document.createElement("a");a.textContent=s,a.className="gloss-jump-letter",t.has(s)?(a.href=`#${this.#i}-letter-${s}`,a.setAttribute("data-active","")):(a.setAttribute("aria-disabled","true"),a.setAttribute("tabindex","-1")),this.#s.appendChild(a)}this.appendChild(this.#s)}#k(t,e){let s=document.createElement("section");s.className="gloss-category",s.setAttribute("data-category",t);let a=document.createElement("header");a.className="gloss-category-header";let r=document.createElement("button");r.type="button",r.className="gloss-category-toggle",r.setAttribute("aria-expanded","true"),r.innerHTML=`<span class="gloss-category-label">${u(t)}</span><output class="gloss-category-count">${e.length}</output><span class="gloss-chevron" aria-hidden="true"></span>`,a.appendChild(r),s.appendChild(a),this.#d.set(t,r);let i=document.createElement("dl");i.className="gloss-term-list";let o=[...e].sort((l,h)=>l.term.localeCompare(h.term)),n=[],c="";for(let l of o){let h=l.term.charAt(0).toUpperCase();if(/[A-Z]/.test(h)&&h!==c){c=h;let p=document.createElement("span");p.id=`${this.#i}-letter-${h}`,p.className="gloss-letter-anchor",i.appendChild(p)}l.el.className="gloss-term",l.el.id=l.id,i.appendChild(l.el),n.push(l.el)}this.#m.set(t,n),s.appendChild(i),this.#o.appendChild(s),this.listen(r,"click",()=>{let l=r.getAttribute("aria-expanded")==="true";r.setAttribute("aria-expanded",String(!l)),i.hidden=l})}#b=t=>{this.#l&&clearTimeout(this.#l),this.#l=setTimeout(()=>{let e=t.target.value.toLowerCase().trim();this.#E(e)},150)};#E(t){let e=0;for(let s of this.#n)t===""||s.term.toLowerCase().includes(t)||s.definition.toLowerCase().includes(t)?(s.el.removeAttribute("hidden"),e++):s.el.setAttribute("hidden","");for(let s of this.#c){let a=this.#m.get(s)||[],r=a[0]?.closest(".gloss-category");if(!r)continue;if(a.some(o=>!o.hasAttribute("hidden"))){r.removeAttribute("hidden");let o=a.filter(c=>!c.hasAttribute("hidden")).length,n=r.querySelector(".gloss-category-count");n&&(n.textContent=String(o))}else r.setAttribute("hidden","")}this.#a&&(this.#a.textContent=t===""?String(this.#n.length):`${e} / ${this.#n.length}`),t!==""&&this.#r&&(this.#r.textContent="",requestAnimationFrame(()=>{this.#r&&(this.#r.textContent=`${e} term${e!==1?"s":""} found`)})),this.dispatchEvent(new CustomEvent("glossary-wc:search",{bubbles:!0,detail:{query:t,matchCount:e}}))}attributeChangedCallback(t,e,s){e===s||!this.isConnected||t==="src"&&this._loadSrc(s)}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();for(;this.firstChild;)this.firstChild.remove();let a=document.createElement("dl");for(let r of s.terms||[]){let i=document.createElement("div");i.setAttribute("data-term-id",r.id||""),i.setAttribute("data-category",r.category||"Uncategorized");let o=document.createElement("dt");o.textContent=r.term||"";let n=document.createElement("dd"),c=r.definition||"";if(r.seeAlso&&r.seeAlso.length>0){let l=r.seeAlso.map(h=>`<a href="#${u(h)}">${u(this.#g(h))}</a>`).join(", ");c+=` See also: ${l}.`}n.innerHTML=c,i.appendChild(o),i.appendChild(n),a.appendChild(i)}this.appendChild(a),s.title&&!this.getAttribute("title")&&this.setAttribute("title",s.title),this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(e){console.warn(`[glossary-wc] Failed to load src="${t}":`,e)}}#g(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};x("glossary-wc",ot);var I=`
2240
+ :host {
2241
+ --_bg: var(--work-item-bg, var(--color-surface, #ffffff));
2242
+ --_text: var(--work-item-text, var(--color-text, #1a1a1a));
2243
+ --_muted: var(--work-item-muted, var(--color-text-muted, #666));
2244
+ --_border: var(--work-item-border, var(--color-border, #e0e0e0));
2245
+ --_accent: var(--work-item-accent, var(--color-interactive, #0066cc));
2246
+ --_card-bg: var(--work-item-card-bg, var(--color-surface-raised, #f8f9fa));
2247
+ --_highlight: var(--work-item-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
2248
+ --_radius: var(--work-item-radius, var(--radius-l, 0.75rem));
2249
+ --_shadow: var(--work-item-shadow, var(--shadow-sm));
2250
+ --_shadow-hover: var(--work-item-shadow-hover, var(--shadow-md));
2251
+ --_duration: var(--work-item-duration, var(--duration-normal, 200ms));
2252
+ --_ease: var(--work-item-ease, var(--ease-default, ease));
2253
+ --_space-2xs: var(--work-item-space-2xs, var(--size-2xs, 0.25rem));
2254
+ --_space-xs: var(--work-item-space-xs, var(--size-xs, 0.5rem));
2255
+ --_space-s: var(--work-item-space-s, var(--size-s, 0.75rem));
2256
+ --_space-m: var(--work-item-space-m, var(--size-m, 1rem));
2257
+ --_font-xs: var(--work-item-font-xs, var(--font-size-xs, 0.75rem));
2258
+ --_font-sm: var(--work-item-font-sm, var(--font-size-sm, 0.875rem));
2259
+ --_font-md: var(--work-item-font-md, var(--font-size-md, 1rem));
2260
+ --_font-lg: var(--work-item-font-lg, var(--font-size-lg, 1.125rem));
2261
+ --_font-mono: var(--work-item-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
2262
+ --_radius-s: var(--work-item-radius-s, var(--radius-s, 0.25rem));
2263
+ --_radius-full: var(--work-item-radius-full, var(--radius-full, 9999px));
2264
+
2265
+ display: block;
2266
+ font-family: var(--work-item-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
2267
+ }
2268
+
2269
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
2270
+
2271
+ /* \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 */
2272
+ .wi-card {
2273
+ background: var(--_bg);
2274
+ border: 1px solid var(--_border);
2275
+ border-radius: var(--_radius);
2276
+ overflow: hidden;
2277
+ box-shadow: var(--_shadow);
2278
+ transition: box-shadow var(--_duration) var(--_ease);
2279
+ }
2280
+
2281
+ .wi-card:hover {
2282
+ box-shadow: var(--_shadow-hover);
2283
+ }
2284
+
2285
+ /* \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 */
2286
+ .wi-header {
2287
+ display: flex;
2288
+ align-items: center;
2289
+ justify-content: space-between;
2290
+ padding: var(--_space-s) var(--_space-m);
2291
+ background: var(--_card-bg);
2292
+ border-block-end: 1px solid var(--_border);
2293
+ gap: var(--_space-s);
2294
+ flex-wrap: wrap;
2295
+ }
2296
+
2297
+ .wi-meta {
2298
+ display: flex;
2299
+ align-items: center;
2300
+ gap: var(--_space-xs);
2301
+ flex-wrap: wrap;
2302
+ min-width: 0;
2303
+ }
2304
+
2305
+ .wi-id {
2306
+ font-size: var(--_font-xs);
2307
+ font-weight: 600;
2308
+ color: var(--_muted);
2309
+ font-family: var(--_font-mono);
2310
+ }
2311
+
2312
+ /* \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 */
2313
+ .wi-type {
2314
+ display: inline-flex;
2315
+ align-items: center;
2316
+ gap: 4px;
2317
+ font-size: 11px;
2318
+ font-weight: 600;
2319
+ padding: 3px 8px;
2320
+ border-radius: var(--_radius-s);
2321
+ text-transform: capitalize;
2322
+ }
2323
+
2324
+ .wi-type svg {
2325
+ width: 12px;
2326
+ height: 12px;
2327
+ }
2328
+
2329
+ /* Type colors */
2330
+ .wi-type[data-type="task"] { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
2331
+ .wi-type[data-type="bug"] { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
2332
+ .wi-type[data-type="chore"] { color: #6b7280; background: rgba(107, 114, 128, 0.1); }
2333
+ .wi-type[data-type="spike"] { color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
2334
+ .wi-type[data-type="feature"] { color: #059669; background: rgba(5, 150, 105, 0.1); }
2335
+
2336
+ /* \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 */
2337
+ .wi-badges {
2338
+ display: flex;
2339
+ align-items: center;
2340
+ gap: var(--_space-xs);
2341
+ }
2342
+
2343
+ .wi-priority,
2344
+ .wi-status {
2345
+ font-size: 11px;
2346
+ padding: 4px 10px;
2347
+ border-radius: var(--_radius-full);
2348
+ font-weight: 600;
2349
+ text-transform: uppercase;
2350
+ letter-spacing: 0.3px;
2351
+ }
2352
+
2353
+ .wi-estimate {
2354
+ width: 28px;
2355
+ height: 28px;
2356
+ border-radius: var(--_radius-full);
2357
+ background: var(--_accent);
2358
+ color: white;
2359
+ font-size: var(--_font-xs);
2360
+ font-weight: 700;
2361
+ display: flex;
2362
+ align-items: center;
2363
+ justify-content: center;
2364
+ }
2365
+
2366
+ /* \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 */
2367
+ .wi-body {
2368
+ padding: 16px 20px;
2369
+ }
2370
+
2371
+ .wi-title-wrap {
2372
+ margin-block-end: var(--_space-xs);
2373
+ }
2374
+
2375
+ .wi-title-wrap:last-child {
2376
+ margin-block-end: 0;
2377
+ }
2378
+
2379
+ ::slotted([slot="title"]) {
2380
+ font-size: var(--_font-lg) !important;
2381
+ font-weight: 700 !important;
2382
+ color: var(--_text) !important;
2383
+ line-height: 1.4 !important;
2384
+ margin: 0 !important;
2385
+ }
2386
+
2387
+ .wi-title-fallback {
2388
+ font-size: var(--_font-lg);
2389
+ font-weight: 700;
2390
+ color: var(--_text);
2391
+ line-height: 1.4;
2392
+ }
2393
+
2394
+ .wi-title:last-child {
2395
+ margin-block-end: 0;
2396
+ }
2397
+
2398
+ /* \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 */
2399
+ .wi-assignee {
2400
+ display: inline-flex;
2401
+ align-items: center;
2402
+ gap: 5px;
2403
+ font-size: var(--_font-xs);
2404
+ color: var(--_muted);
2405
+ margin-block-start: var(--_space-xs);
2406
+ }
2407
+
2408
+ .wi-assignee__avatar {
2409
+ width: 20px;
2410
+ height: 20px;
2411
+ border-radius: var(--_radius-full);
2412
+ font-size: 9px;
2413
+ font-weight: 700;
2414
+ display: flex;
2415
+ align-items: center;
2416
+ justify-content: center;
2417
+ color: #fff;
2418
+ flex-shrink: 0;
2419
+ }
2420
+
2421
+ /* \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 */
2422
+ .wi-links {
2423
+ display: flex;
2424
+ flex-wrap: wrap;
2425
+ gap: 4px;
2426
+ margin-block-start: var(--_space-s);
2427
+ }
2428
+
2429
+ .wi-link {
2430
+ display: inline-flex;
2431
+ align-items: center;
2432
+ gap: 3px;
2433
+ font-size: 11px;
2434
+ font-weight: 500;
2435
+ padding: 2px 8px;
2436
+ border-radius: var(--_radius-s);
2437
+ background: var(--_highlight);
2438
+ color: var(--_accent);
2439
+ text-decoration: none;
2440
+ }
2441
+
2442
+ .wi-link:hover {
2443
+ text-decoration: underline;
2444
+ }
2445
+
2446
+ .wi-link svg {
2447
+ width: 11px;
2448
+ height: 11px;
2449
+ }
2450
+
2451
+ /* \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 */
2452
+ .wi-sections {
2453
+ border-block-start: 1px solid var(--_border);
2454
+ }
2455
+
2456
+ .wi-section {
2457
+ padding: 14px 20px;
2458
+ border-block-end: 1px solid var(--_border);
2459
+ }
2460
+
2461
+ .wi-section:last-child {
2462
+ border-block-end: none;
2463
+ }
2464
+
2465
+ .wi-section-header {
2466
+ display: flex;
2467
+ align-items: center;
2468
+ gap: var(--_space-xs);
2469
+ margin-block-end: var(--_space-s);
2470
+ }
2471
+
2472
+ .wi-section-icon {
2473
+ width: 22px;
2474
+ height: 22px;
2475
+ border-radius: 5px;
2476
+ display: flex;
2477
+ align-items: center;
2478
+ justify-content: center;
2479
+ }
2480
+
2481
+ .wi-section-icon svg {
2482
+ width: 13px;
2483
+ height: 13px;
2484
+ fill: white;
2485
+ }
2486
+
2487
+ .wi-section-icon.description { background: #3b82f6; }
2488
+ .wi-section-icon.checklist { background: #22c55e; }
2489
+ .wi-section-icon.notes { background: #f59e0b; }
2490
+
2491
+ .wi-section-title {
2492
+ font-size: var(--_font-xs);
2493
+ font-weight: 600;
2494
+ color: var(--_muted);
2495
+ text-transform: uppercase;
2496
+ letter-spacing: 0.5px;
2497
+ }
2498
+
2499
+ .wi-section-content {
2500
+ color: var(--_text);
2501
+ font-size: var(--_font-sm);
2502
+ line-height: 1.6;
2503
+ }
2504
+
2505
+ .wi-section-content ::slotted(ul),
2506
+ .wi-section-content ::slotted(ol) {
2507
+ margin: 0;
2508
+ padding-inline-start: 20px;
2509
+ }
2510
+
2511
+ .wi-section-content ::slotted(p) {
2512
+ margin: 0;
2513
+ }
2514
+
2515
+ .slot-fallback {
2516
+ color: var(--_muted);
2517
+ font-style: italic;
2518
+ }
2519
+
2520
+ /* \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 */
2521
+ .wi-card--minimal {
2522
+ padding: var(--_space-xs);
2523
+ cursor: pointer;
2524
+ }
2525
+
2526
+ .wi-card--minimal:hover {
2527
+ box-shadow: var(--_shadow-hover);
2528
+ }
2529
+
2530
+ .wi-card--minimal:focus-visible {
2531
+ outline: 2px solid var(--_accent);
2532
+ outline-offset: 2px;
2533
+ }
2534
+
2535
+ .wi-card--minimal .wi-header { display: none; }
2536
+ .wi-card--minimal .wi-sections { display: none; }
2537
+ .wi-card--minimal .wi-links { display: none; }
2538
+ .wi-card--minimal .wi-assignee { display: none; }
2539
+
2540
+ .wi-card--minimal .wi-body {
2541
+ padding: var(--_space-xs) var(--_space-s);
2542
+ }
2543
+
2544
+ .wi-card--minimal .wi-title-fallback,
2545
+ .wi-card--minimal ::slotted([slot="title"]) {
2546
+ font-size: var(--_font-sm) !important;
2547
+ font-weight: 600 !important;
2548
+ }
2549
+
2550
+ .wi-card--minimal .wi-id {
2551
+ display: block;
2552
+ margin-block-end: var(--_space-2xs);
2553
+ }
2554
+
2555
+ .wi-card--minimal .wi-type {
2556
+ font-size: 10px;
2557
+ padding: 2px 6px;
2558
+ }
2559
+
2560
+ /* \u2500\u2500 Compact detail \u2014 hide empty sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2561
+ .wi-card--compact .wi-section[data-empty] {
2562
+ display: none;
2563
+ }
2564
+
2565
+ .wi-card--compact .slot-fallback {
2566
+ display: none;
2567
+ }
2568
+
2569
+ .wi-card--compact .wi-body {
2570
+ padding: var(--_space-s) var(--_space-m);
2571
+ }
2572
+
2573
+ /* \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 */
2574
+ @media (max-width: 480px) {
2575
+ .wi-header {
2576
+ flex-direction: column;
2577
+ align-items: flex-start;
2578
+ }
2579
+
2580
+ .wi-badges {
2581
+ width: 100%;
2582
+ justify-content: flex-start;
2583
+ }
2584
+ }
2585
+
2586
+ @media (prefers-reduced-motion: reduce) {
2587
+ .wi-card {
2588
+ transition: none;
2589
+ }
2590
+ }
2591
+
2592
+ @media print {
2593
+ .wi-card {
2594
+ box-shadow: none;
2595
+ break-inside: avoid;
2596
+ }
2597
+ }
2598
+
2599
+ .state-msg { padding: var(--_space-m); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
2600
+ .state-msg--error { color: #dc2626; }
2601
+ `;var wt={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"/>'},nt={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)"}},lt={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)"}},ct=class extends HTMLElement{static get observedAttributes(){return["item-id","type","priority","status","estimate","assignee","story-ids","detail","compact","src"]}#t=new Map;constructor(){super(),this.attachShadow({mode:"open"})}#e(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}connectedCallback(){this.#e(),this.itemId&&!this.id&&(this.id=this.itemId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#s(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t,e,s){e!==s&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(s):this.#s())}get itemId(){return this.getAttribute("item-id")||""}get itemTitle(){return this.querySelector('[slot="title"]')?.textContent?.trim()||this.#t.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){lt[t]&&(this.setAttribute("status",t),this.dispatchEvent(new CustomEvent("work-item:status",{detail:{status:t,itemId:this.itemId},bubbles:!0,composed:!0})))}updatePriority(t){nt[t]&&(this.setAttribute("priority",t),this.dispatchEvent(new CustomEvent("work-item:priority",{detail:{priority:t,itemId:this.itemId},bubbles:!0,composed:!0})))}async _loadSrc(t){if(t){this.shadowRoot.innerHTML=`<style>${I}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();for(let[a,r]of[["itemId","item-id"],["type","type"],["priority","priority"],["status","status"],["estimate","estimate"],["assignee","assignee"],["detail","detail"]])s[a]!=null&&this.setAttribute(r,String(s[a]));if(s.storyIds&&this.setAttribute("story-ids",Array.isArray(s.storyIds)?s.storyIds.join(","):s.storyIds),s.title&&!this.querySelector('[slot="title"]')){let a=document.createElement("h3");a.slot="title",a.textContent=s.title,this.appendChild(a)}for(let a of["description","notes"])if(s[a]&&!this.querySelector(`[slot="${a}"]`)){let r=document.createElement("p");r.slot=a,r.textContent=s[a],this.appendChild(r)}if(s.checklist&&!this.querySelector('[slot="checklist"]')){let a=document.createElement("ul");a.slot="checklist";let r=Array.isArray(s.checklist)?s.checklist:[s.checklist];for(let i of r){let o=document.createElement("li");o.textContent=i,a.appendChild(o)}this.appendChild(a)}this.#s()}catch(e){this.shadowRoot.innerHTML=`<style>${I}</style><div class="state-msg state-msg--error">Could not load: ${u(e.message)}</div>`}}}#s(){let t=nt[this.priority]||nt.medium,e=lt[this.status]||lt.backlog,s=this.itemType,a=wt[s]||wt.task,r=this._detailLevel,i=this.itemId?`Work item: ${u(this.itemId)}`:"Work item";if(r==="minimal"){this.shadowRoot.innerHTML=`<style>${I}</style>
2602
+ <article class="wi-card wi-card--minimal" role="article" aria-label="${i}"
2603
+ tabindex="0">
2604
+ <div class="wi-body">
2605
+ <div class="wi-meta">
2606
+ ${this.itemId?`<span class="wi-id">${u(this.itemId)}</span>`:""}
2607
+ <span class="wi-type" data-type="${u(s)}">${v(a)} ${u(s)}</span>
2608
+ </div>
2609
+ <div class="wi-title-wrap">
2610
+ <slot name="title"><span class="wi-title-fallback">${u(this._minimalLabel)}</span></slot>
2611
+ </div>
2612
+ </div>
2613
+ </article>`;return}if(this.shadowRoot.innerHTML=`<style>${I}</style>
2614
+ <article class="wi-card wi-card--${r}" role="article" aria-label="${i}">
2615
+
2616
+ <header class="wi-header">
2617
+ <div class="wi-meta">
2618
+ ${this.itemId?`<span class="wi-id">${u(this.itemId)}</span>`:""}
2619
+ <span class="wi-type" data-type="${u(s)}">${v(a)} ${u(s)}</span>
2620
+ </div>
2621
+ <div class="wi-badges">
2622
+ <span class="wi-priority" style="color:${t.color};background:${t.bg}">${u(t.label)}</span>
2623
+ <span class="wi-status" style="color:${e.color};background:${e.bg}">${u(e.label)}</span>
2624
+ ${this.estimate?`<span class="wi-estimate" title="Estimate">${u(this.estimate)}</span>`:""}
2625
+ </div>
2626
+ </header>
2627
+
2628
+ <div class="wi-body">
2629
+ <div class="wi-title-wrap">
2630
+ <slot name="title"><span class="wi-title-fallback">[Untitled work item]</span></slot>
2631
+ </div>
2632
+
2633
+ ${this.assignee?`
2634
+ <div class="wi-assignee">
2635
+ <span class="wi-assignee__avatar" style="background:${S(this.assignee)}">${E(this.assignee)}</span>
2636
+ ${u(this.assignee)}
2637
+ </div>`:""}
2638
+
2639
+ ${this.storyIds.length?`
2640
+ <div class="wi-links">
2641
+ ${this.storyIds.map(o=>`<a class="wi-link" href="#${u(o)}">${v('<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h10"/><path d="M7 12h10"/><path d="M7 17h10"/>')} ${u(o)}</a>`).join("")}
2642
+ </div>`:""}
2643
+ </div>
2644
+
2645
+ <div class="wi-sections">
2646
+ <div class="wi-section">
2647
+ <div class="wi-section-header">
2648
+ <div class="wi-section-icon description">
2649
+ <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>
2650
+ </div>
2651
+ <span class="wi-section-title">Description</span>
2652
+ </div>
2653
+ <div class="wi-section-content">
2654
+ <slot name="description"><em class="slot-fallback">No description.</em></slot>
2655
+ </div>
2656
+ </div>
2657
+
2658
+ <div class="wi-section">
2659
+ <div class="wi-section-header">
2660
+ <div class="wi-section-icon checklist">
2661
+ <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>
2662
+ </div>
2663
+ <span class="wi-section-title">Checklist</span>
2664
+ </div>
2665
+ <div class="wi-section-content">
2666
+ <slot name="checklist"><em class="slot-fallback">No checklist items.</em></slot>
2667
+ </div>
2668
+ </div>
2669
+
2670
+ <div class="wi-section">
2671
+ <div class="wi-section-header">
2672
+ <div class="wi-section-icon notes">
2673
+ <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>
2674
+ </div>
2675
+ <span class="wi-section-title">Notes</span>
2676
+ </div>
2677
+ <div class="wi-section-content">
2678
+ <slot name="notes"><em class="slot-fallback">No notes.</em></slot>
2679
+ </div>
2680
+ </div>
2681
+ </div>
2682
+
2683
+ </article>`,r==="compact")for(let o of this.shadowRoot.querySelectorAll(".wi-section")){let n=o.querySelector("slot");n&&n.assignedNodes().length===0&&o.setAttribute("data-empty","")}this.dispatchEvent(new CustomEvent("work-item:ready",{detail:{itemId:this.itemId,title:this.itemTitle,type:s,priority:this.priority,status:this.status},bubbles:!0,composed:!0}))}};x("work-item",ct);var O={layout:{label:"Layout",cssClass:"sm-badge--layout"},section:{label:"Section",cssClass:"sm-badge--section"},dashboard:{label:"Dashboard",cssClass:"sm-badge--dashboard"},page:{label:"Page",cssClass:"sm-badge--page"},modal:{label:"Modal",cssClass:"sm-badge--modal"},redirect:{label:"Redirect",cssClass:"sm-badge--redirect"}},U={draft:{label:"Draft",cssClass:"sm-status--draft"},ready:{label:"Ready",cssClass:"sm-status--ready"},live:{label:"Live",cssClass:"sm-status--live"},deprecated:{label:"Deprecated",cssClass:"sm-status--deprecated"}},dt=class d extends A{static get observedAttributes(){return["src","collapsed","compact","title","data-view","data-orientation","data-detail"]}static#t=0;#e=null;#s=null;#a=null;#r=null;#o=0;#i=0;setup(){d.#t++;let t=this.getAttribute("src");if(t&&!this.querySelector("nav")){this._loadSrc(t);return}let e=this.querySelector(":scope > nav");if(e){if(this.#o=0,this.#i=0,this.#l(e.querySelector("ul"),0),this.dataset.view==="visual"){this.#c(),this.#G(e),this.dispatchEvent(new CustomEvent("site-map-wc:ready",{bubbles:!0,detail:{nodeCount:this.#o,depth:this.#i}}));return}this.#n(e.querySelector("ul"),0),this.#c(),e.classList.add("sm-tree"),e.setAttribute("role","tree"),e.setAttribute("aria-label",this.getAttribute("title")||"Site map"),this.#e=e,this.hasAttribute("collapsed")&&this.#d(),this.listen(e,"keydown",s=>this.#k(s)),this.listen(e,"click",s=>this.#C(s)),this.dispatchEvent(new CustomEvent("site-map-wc:ready",{bubbles:!0,detail:{nodeCount:this.#o,depth:this.#i}}))}}teardown(){if(this.#a){this.#a.remove(),this.#a=null;let t=this.querySelector("nav");t&&(t.style.display="",t.removeAttribute("aria-hidden"))}this.#s&&(this.#s.remove(),this.#s=null),this.#e&&(this.#e.classList.remove("sm-tree"),this.#e.removeAttribute("role"),this.#e.removeAttribute("aria-label")),this.querySelectorAll(".sm-node-content, .sm-toggle").forEach(t=>t.remove()),this.querySelectorAll('li[role="treeitem"]').forEach(t=>{t.removeAttribute("role"),t.removeAttribute("aria-expanded"),t.removeAttribute("tabindex")}),this.querySelectorAll('ul[role="group"]').forEach(t=>{t.removeAttribute("role"),t.classList.remove("sm-subtree","sm-collapsed")}),this.#e=null,this.#r=null,this.#o=0,this.#i=0}attributeChangedCallback(t,e,s){e===s||!this.isConnected||t==="src"&&this._loadSrc(s)}#l(t,e){if(!t)return;let s=t.querySelectorAll(":scope > li");for(let a of s){this.#o++;let r=e+1;r>this.#i&&(this.#i=r);let i=a.querySelector(":scope > ul");i&&this.#l(i,r)}}#n(t,e){if(!t)return;e>0&&(t.setAttribute("role","group"),t.classList.add("sm-subtree"));let s=[...t.querySelectorAll(":scope > li")];for(let a of s){let r=!!a.querySelector(":scope > ul"),i=a.querySelector(":scope > a"),o=a.getAttribute("data-page-type")||"page",n=a.getAttribute("data-template")||"",c=a.getAttribute("data-status")||"";a.setAttribute("role","treeitem"),a.setAttribute("tabindex","-1");let l=document.createElement("span");if(l.className="sm-node-content",r){a.setAttribute("aria-expanded","true");let p=document.createElement("button");p.className="sm-toggle",p.setAttribute("type","button"),p.setAttribute("aria-hidden","true"),p.setAttribute("tabindex","-1"),p.textContent="\u25BE",l.appendChild(p)}else{let p=document.createElement("span");p.className="sm-leaf-marker",p.setAttribute("aria-hidden","true"),l.appendChild(p)}if(c&&U[c]){let p=document.createElement("span");p.className=`sm-status-dot ${U[c].cssClass}`,p.setAttribute("title",U[c].label),p.setAttribute("aria-label",U[c].label),l.appendChild(p)}if(i&&l.appendChild(i),O[o]){let p=document.createElement("span");p.className=`sm-badge ${O[o].cssClass}`,p.textContent=O[o].label,l.appendChild(p)}if(n){let p=document.createElement("span");p.className="sm-badge sm-badge--template",p.textContent=n,l.appendChild(p)}a.insertBefore(l,a.firstChild);let h=a.querySelector(":scope > ul");h&&this.#n(h,e+1)}}#c(){let t=this.getAttribute("title");if(!t&&this.#o===0)return;if(this.#s=document.createElement("div"),this.#s.className="sm-header",t){let a=document.createElement("h2");a.className="sm-title",a.textContent=t,this.#s.appendChild(a)}let e=document.createElement("span");e.className="sm-summary",e.textContent=`${this.#o} pages \xB7 ${this.#i} levels deep`,this.#s.appendChild(e);let s=document.createElement("button");s.className="sm-toggle-all",s.setAttribute("type","button"),s.textContent="Collapse all",s.addEventListener("click",()=>{this.querySelectorAll('li[aria-expanded="true"]').length>0?(this.#d(),s.textContent="Expand all"):(this.#m(),s.textContent="Collapse all")}),this.#s.appendChild(s),this.insertBefore(this.#s,this.firstChild)}#d(){let t=this.querySelectorAll("li[aria-expanded]");for(let e of t){e.setAttribute("aria-expanded","false");let s=e.querySelector(":scope > ul");s&&s.classList.add("sm-collapsed");let a=e.querySelector(":scope > .sm-node-content > .sm-toggle");a&&(a.textContent="\u25B8")}}#m(){let t=this.querySelectorAll("li[aria-expanded]");for(let e of t){e.setAttribute("aria-expanded","true");let s=e.querySelector(":scope > ul");s&&s.classList.remove("sm-collapsed");let a=e.querySelector(":scope > .sm-node-content > .sm-toggle");a&&(a.textContent="\u25BE")}}#f(t){let e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true");let s=t.querySelector(":scope > ul");s&&s.classList.toggle("sm-collapsed",e);let a=t.querySelector(":scope > .sm-node-content > .sm-toggle");a&&(a.textContent=e?"\u25B8":"\u25BE")}#C(t){let e=t.target;if(e.closest(".sm-toggle")){t.preventDefault();let r=e.closest('li[role="treeitem"]');r&&this.#f(r);return}let s=e.closest('li[role="treeitem"]');if(!s)return;this.#p(s);let a=e.closest("a");a&&this.dispatchEvent(new CustomEvent("site-map-wc:select",{bubbles:!0,detail:{href:a.getAttribute("href")||"",pageType:s.getAttribute("data-page-type")||"page",template:s.getAttribute("data-template")||""}}))}#k(t){let e=t.target.closest('li[role="treeitem"]');if(!e)return;let s=t.key,a=!1;switch(s){case"ArrowDown":a=!0,this.#E(e);break;case"ArrowUp":a=!0,this.#g(e);break;case"ArrowRight":if(a=!0,e.getAttribute("aria-expanded")==="false")this.#f(e);else if(e.getAttribute("aria-expanded")==="true"){let r=e.querySelector(':scope > ul > li[role="treeitem"]');r&&this.#p(r)}break;case"ArrowLeft":if(a=!0,e.getAttribute("aria-expanded")==="true")this.#f(e);else{let r=e.parentElement?.closest('li[role="treeitem"]');r&&this.#p(r)}break;case"Enter":a=!0,e.hasAttribute("aria-expanded")&&this.#f(e);break;case" ":a=!0;{let r=e.querySelector(":scope > .sm-node-content > a");r&&r.click()}break;case"Home":a=!0;{let r=this.querySelector('li[role="treeitem"]');r&&this.#p(r)}break;case"End":a=!0;{let r=this.#b();r.length&&this.#p(r[r.length-1])}break}a&&(t.preventDefault(),t.stopPropagation())}#b(){let t=[],e=a=>{if(!a)return;let r=[...a.querySelectorAll(':scope > li[role="treeitem"]')];for(let i of r)if(t.push(i),i.getAttribute("aria-expanded")==="true"){let o=i.querySelector(":scope > ul");o&&e(o)}},s=this.querySelector("nav > ul");return e(s),t}#E(t){let e=this.#b(),s=e.indexOf(t);s>=0&&s<e.length-1&&this.#p(e[s+1])}#g(t){let e=this.#b(),s=e.indexOf(t);s>0&&this.#p(e[s-1])}#p(t){this.#r&&this.#r.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0"),t.focus(),this.#r=t}static#v="http://www.w3.org/2000/svg";static#u=150;static#y=70;static#q=30;static#w=50;static#x=20;static#j={layout:{stroke:"#8b5cf6",fill:"#f5f3ff",text:"#6d28d9"},section:{stroke:"#3b82f6",fill:"#eff6ff",text:"#1d4ed8"},dashboard:{stroke:"#22c55e",fill:"#f0fdf4",text:"#15803d"},page:{stroke:"#94a3b8",fill:"#f8fafc",text:"#475569"},modal:{stroke:"#f59e0b",fill:"#fffbeb",text:"#b45309"},redirect:{stroke:"#ef4444",fill:"#fef2f2",text:"#b91c1c"}};static#R={draft:"#94a3b8",ready:"#f59e0b",live:"#22c55e",deprecated:"#ef4444"};#P(t){let e=[];for(let s of t.querySelectorAll(":scope > li")){let a=s.querySelector(":scope > a"),r=s.querySelector(":scope > ul");e.push({label:a?.textContent?.trim()||s.firstChild?.textContent?.trim()||"",href:a?.getAttribute("href")||"",pageType:s.getAttribute("data-page-type")||"page",template:s.getAttribute("data-template")||"",status:s.getAttribute("data-status")||"",children:r?this.#P(r):[],x:0,y:0,subtreeWidth:0,collapsed:!1,childCount:0})}return e}#D(t,e=0){let s=d.#u,a=d.#y,r=d.#q,i=d.#w;for(let o of t)o.childCount=this.#B(o),o.children.length>0&&!o.collapsed?(this.#D(o.children,e+1),o.subtreeWidth=o.children.reduce((n,c)=>n+c.subtreeWidth,0)+r*(o.children.length-1)):o.subtreeWidth=s,o.subtreeWidth=Math.max(o.subtreeWidth,s)}#B(t){let e=0;for(let s of t.children)e+=1+this.#B(s);return e}#H(t,e,s){let a=d.#u,r=d.#y,i=d.#q,o=d.#w,n=e;for(let c of t)c.x=n+(c.subtreeWidth-a)/2,c.y=s,c.children.length>0&&!c.collapsed&&this.#H(c.children,n,s+r+o),n+=c.subtreeWidth+i}#G(t){t.style.display="none",t.setAttribute("aria-hidden","true");let e=t.querySelector("ul");e&&(this.#h=this.#P(e),this.#S())}#h=null;#_=1;get#N(){return this.dataset.orientation==="horizontal"?"horizontal":"vertical"}get#O(){return Math.min(4,Math.max(0,parseInt(this.dataset.detail||"2",10)))}static#z={zoomIn:'<circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/>',zoomOut:'<circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/>',reset:'<path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/>',flip:'<path d="M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3"/><path d="M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3"/><path d="M4 12H2"/><path d="M10 12H8"/><path d="M16 12h-2"/><path d="M22 12h-2"/>'};static#U=["Shape","Shape + Title","Full","Full + Status","Wireframe"];#S(){if(!this.#h)return;this.#a&&this.#a.remove();let t=d.#v,e=d.#u,s=d.#y,a=d.#x,r=this.#N==="horizontal";this.#D(this.#h),this.#H(this.#h,a,a);let i=this.#Y(this.#h),o=i.maxX+e+a,n=i.maxY+s+a;r&&([o,n]=[n,o]),this.#a=document.createElement("div"),this.#a.className="sm-visual",this.#a.setAttribute("tabindex","-1"),this.#a.appendChild(this.#J());let c=document.createElementNS(t,"svg");c.setAttribute("viewBox",`0 0 ${o} ${n}`),c.setAttribute("width",String(o)),c.setAttribute("height",String(n)),c.setAttribute("role","img"),c.setAttribute("aria-label",`Site map${this.getAttribute("title")?": "+this.getAttribute("title"):""}`);let l=document.createElement("div");if(l.className="sm-visual-zoom",l.style.width=`${Math.round(o*this.#_)}px`,l.style.height=`${Math.round(n*this.#_)}px`,c.style.transform=`scale(${this.#_})`,c.style.transformOrigin="0 0",r){let f=document.createElementNS(t,"g");f.setAttribute("transform",`rotate(90 0 0) translate(0 -${n})`),this.#L(f,this.#h),this.#M(f,this.#h),c.appendChild(f)}else this.#L(c,this.#h),this.#M(c,this.#h);l.appendChild(c),this.#a.appendChild(l);let h=document.createElement("div");h.className="sm-visual-summary";let p=Math.round(this.#_*100);h.textContent=`${this.#o} pages \xB7 ${this.#i} levels \xB7 ${p}%`,this.#a.appendChild(h),this.appendChild(this.#a),this.#st(this.#a,c),this.listen(c,"click",f=>{let g=f.target,m=g.closest("[data-toggle]");if(m){let y=m.getAttribute("data-toggle");this.#Q(y);return}let b=g.closest("[data-node-id]");b&&(this.#A(b.getAttribute("data-node-id")),this.dispatchEvent(new CustomEvent("site-map-wc:select",{bubbles:!0,detail:{href:b.getAttribute("data-href")||"",pageType:b.getAttribute("data-page-type")||"page",template:b.getAttribute("data-template")||""}})))}),c.setAttribute("tabindex","0"),c.setAttribute("role","tree"),c.setAttribute("aria-label",`Site map${this.getAttribute("title")?": "+this.getAttribute("title"):""} \u2014 use arrow keys to navigate`),c.addEventListener("keydown",f=>this.#tt(f)),requestAnimationFrame(()=>{let f=c.querySelector("[data-node-id]");f&&this.#V(f)})}#J(){let t=document.createElement("div");t.className="sm-vtoolbar",t.setAttribute("role","toolbar"),t.setAttribute("aria-label","Site map controls");let e=f=>`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${f}</svg>`,s=this.#I(e(d.#z.zoomIn),"Zoom in",()=>{this.#_=Math.min(3,this.#_+.25),this.#S()});t.appendChild(s);let a=this.#I(e(d.#z.zoomOut),"Zoom out",()=>{this.#_=Math.max(.25,this.#_-.25),this.#S()});t.appendChild(a);let r=this.#I(e(d.#z.reset),"Reset zoom",()=>{this.#_=1,this.#S()});t.appendChild(r);let i=document.createElement("span");i.className="sm-vtoolbar-sep",t.appendChild(i);let o=this.#N==="horizontal"?"Vertical":"Horizontal",n=this.#I(e(d.#z.flip),o,()=>{this.dataset.orientation=this.#N==="horizontal"?"vertical":"horizontal",this.#S()});t.appendChild(n),t.appendChild(i.cloneNode());let c=this.#O,l=document.createElement("label");l.className="sm-vtoolbar-detail",l.textContent="Detail ";let h=document.createElement("input");h.type="range",h.min="0",h.max="4",h.value=String(c),h.setAttribute("aria-label","Detail level"),h.className="sm-vtoolbar-slider",l.appendChild(h);let p=document.createElement("span");return p.className="sm-vtoolbar-detail-label",p.textContent=d.#U[c],l.appendChild(p),h.addEventListener("input",()=>{this.dataset.detail=h.value,p.textContent=d.#U[parseInt(h.value,10)],this.#S()}),t.appendChild(l),t}#I(t,e,s){let a=document.createElement("button");return a.type="button",a.className="sm-vtoolbar-btn",a.innerHTML=t,a.setAttribute("aria-label",e),a.setAttribute("title",e),a.addEventListener("click",s),a}#T=null;#F(t,e=""){let s=[];for(let a=0;a<t.length;a++){let r=t[a],i=e?`${e}-${a}`:String(a);s.push(i),r.children.length>0&&!r.collapsed&&s.push(...this.#F(r.children,i))}return s}#Z(t){let e=t.lastIndexOf("-");return e>0?t.slice(0,e):null}#at(t){let e=this.#$(t,this.#h);return!e||e.collapsed||e.children.length===0?null:`${t}-0`}#A(t){if(!t||!this.#a)return;let e=this.#a.querySelector('svg[role="tree"]');if(!e)return;let s=e.querySelector(`[data-node-id="${t}"]`);if(!s)return;this.#V(s),this.#T=t;let a=s.querySelector("rect");if(a&&this.#a){let r=a.getBoundingClientRect(),i=this.#a.getBoundingClientRect();(r.left<i.left||r.right>i.right||r.top<i.top||r.bottom>i.bottom)&&a.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}}#V(t){let e=t.closest("svg");if(!e)return;e.querySelectorAll(".sm-vfocus-ring").forEach(r=>r.remove()),e.querySelectorAll("[data-node-id]").forEach(r=>r.removeAttribute("aria-current"));let s=d.#v,a=t.querySelector("rect");if(a){let r=document.createElementNS(s,"rect");r.setAttribute("x",String(parseFloat(a.getAttribute("x"))-3)),r.setAttribute("y",String(parseFloat(a.getAttribute("y"))-3)),r.setAttribute("width",String(parseFloat(a.getAttribute("width"))+6)),r.setAttribute("height",String(parseFloat(a.getAttribute("height"))+6)),r.setAttribute("rx","11"),r.setAttribute("fill","none"),r.setAttribute("stroke","#3b82f6"),r.setAttribute("stroke-width","2"),r.setAttribute("class","sm-vfocus-ring"),t.parentNode.insertBefore(r,t)}t.setAttribute("aria-current","true"),this.#T=t.getAttribute("data-node-id")}#tt(t){if(!this.#h)return;let e=this.#T||"0",s=!1;switch(t.key){case"ArrowDown":{s=!0;let a=this.#$(e,this.#h);a&&a.children.length>0&&!a.collapsed&&this.#A(`${e}-0`);break}case"ArrowUp":{s=!0;let a=this.#Z(e);a&&this.#A(a);break}case"ArrowRight":{s=!0;let a=this.#W(e,1);a&&this.#A(a);break}case"ArrowLeft":{s=!0;let a=this.#W(e,-1);a&&this.#A(a);break}case"Enter":case" ":{s=!0;let a=this.#$(e,this.#h);a&&a.children.length>0&&this.#Q(e);break}case"Home":{s=!0,this.#A("0");break}case"End":{s=!0;let a=this.#F(this.#h);a.length&&this.#A(a[a.length-1]);break}}s&&(t.preventDefault(),t.stopPropagation())}#W(t,e){let s=t.split("-").map(Number),a=s[s.length-1]+e;if(a<0)return null;let r=s.length>1?s.slice(0,-1).join("-"):null,i=r?this.#$(r,this.#h):null,o=i?i.children:this.#h;if(!o||a>=o.length)return null;let n=[...s];return n[n.length-1]=a,n.join("-")}#X=!1;#et={dragging:!1,startX:0,startY:0,scrollLeft:0,scrollTop:0,moved:!1};#st(t,e){if(e.style.cursor="grab",this.#X)return;this.#X=!0;let s=this.#et;this.listen(this,"pointerdown",a=>{if(a.target.closest("button, [data-toggle], .sm-vtoolbar, input"))return;let r=this.querySelector(".sm-visual");if(!r)return;s.dragging=!0,s.moved=!1,s.startX=a.clientX,s.startY=a.clientY,s.scrollLeft=r.scrollLeft,s.scrollTop=r.scrollTop;let i=this.querySelector('svg[role="tree"]');i&&(i.style.cursor="grabbing")}),this.listen(window,"pointermove",a=>{if(!s.dragging)return;let r=a.clientX-s.startX,i=a.clientY-s.startY;(Math.abs(r)>3||Math.abs(i)>3)&&(s.moved=!0);let o=this.querySelector(".sm-visual");o&&(o.scrollLeft=s.scrollLeft-r,o.scrollTop=s.scrollTop-i)}),this.listen(window,"pointerup",()=>{if(!s.dragging)return;s.dragging=!1;let a=this.querySelector('svg[role="tree"]');a&&(a.style.cursor="grab")}),this.listen(this,"click",a=>{s.moved&&(a.stopPropagation(),s.moved=!1)},{capture:!0})}#Y(t){let e=0,s=0;for(let a of t)if(a.x+d.#u>e&&(e=a.x+d.#u),a.y+d.#y>s&&(s=a.y+d.#y),a.children.length>0&&!a.collapsed){let r=this.#Y(a.children);r.maxX>e&&(e=r.maxX),r.maxY>s&&(s=r.maxY)}return{maxX:e,maxY:s}}#L(t,e){let s=d.#v,a=d.#u,r=d.#y,i=d.#w;for(let o of e){if(o.children.length===0||o.collapsed)continue;let n=o.x+a/2,c=o.y+r,l=c+i/2;for(let h of o.children){let p=h.x+a/2,f=h.y,g=document.createElementNS(s,"path");g.setAttribute("d",`M ${n} ${c} L ${n} ${l} L ${p} ${l} L ${p} ${f}`),g.setAttribute("fill","none"),g.setAttribute("stroke","#cbd5e1"),g.setAttribute("stroke-width","1.5"),t.appendChild(g)}this.#L(t,o.children)}}#M(t,e,s=""){let a=d.#v,r=d.#u,i=d.#y,o=this.#O,n=o>=4;for(let c=0;c<e.length;c++){let l=e[c],h=s?`${s}-${c}`:String(c),p=n?{stroke:"#94a3b8",fill:"#ffffff",text:"#475569"}:d.#j[l.pageType]||d.#j.page,f=document.createElementNS(a,"g");f.setAttribute("data-node-id",h),f.setAttribute("data-href",l.href),f.setAttribute("data-page-type",l.pageType),f.setAttribute("data-template",l.template),f.style.cursor="pointer";let g=document.createElementNS(a,"rect");if(g.setAttribute("x",String(l.x)),g.setAttribute("y",String(l.y)),g.setAttribute("width",String(r)),g.setAttribute("height",String(i)),g.setAttribute("rx","8"),g.setAttribute("fill",p.fill),g.setAttribute("stroke",p.stroke),g.setAttribute("stroke-width",n?"1":"2"),(n||l.pageType==="modal")&&g.setAttribute("stroke-dasharray","6 3"),f.appendChild(g),o>=1){let m=document.createElementNS(a,"text");m.setAttribute("x",String(l.x+r/2)),m.setAttribute("y",String(o===1?l.y+i/2+5:l.y+24)),m.setAttribute("text-anchor","middle"),m.setAttribute("font-size","13"),m.setAttribute("font-weight","600"),m.setAttribute("fill",p.text),m.setAttribute("font-family","system-ui, sans-serif"),m.textContent=l.label.length>18?l.label.slice(0,17)+"\u2026":l.label,f.appendChild(m)}if(o>=2){let m=document.createElementNS(a,"text");if(m.setAttribute("x",String(l.x+r/2)),m.setAttribute("y",String(l.y+40)),m.setAttribute("text-anchor","middle"),m.setAttribute("font-size","9"),m.setAttribute("font-weight","700"),m.setAttribute("fill",p.stroke),m.setAttribute("font-family","system-ui, sans-serif"),m.textContent=(O[l.pageType]?.label||l.pageType).toUpperCase(),f.appendChild(m),l.template){let b=document.createElementNS(a,"text");b.setAttribute("x",String(l.x+r/2)),b.setAttribute("y",String(l.y+54)),b.setAttribute("text-anchor","middle"),b.setAttribute("font-size","9"),b.setAttribute("fill","#94a3b8"),b.setAttribute("font-family","system-ui, sans-serif"),b.textContent=l.template,f.appendChild(b)}}if(o>=3&&l.status&&d.#R[l.status]){let m=document.createElementNS(a,"circle");m.setAttribute("cx",String(l.x+r/2)),m.setAttribute("cy",String(l.y+i-8)),m.setAttribute("r","4"),m.setAttribute("fill",n?"#94a3b8":d.#R[l.status]),f.appendChild(m)}if(n)for(let m=0;m<2;m++){let b=document.createElementNS(a,"line");b.setAttribute("x1",String(l.x+12)),b.setAttribute("x2",String(l.x+r-12)),b.setAttribute("y1",String(l.y+i-22+m*8)),b.setAttribute("y2",String(l.y+i-22+m*8)),b.setAttribute("stroke","#cbd5e1"),b.setAttribute("stroke-width","1"),b.setAttribute("stroke-dasharray","3 2"),f.appendChild(b)}if(l.children.length>0){let m=document.createElementNS(a,"g");m.setAttribute("data-toggle",h),m.style.cursor="pointer";let b=document.createElementNS(a,"circle");b.setAttribute("cx",String(l.x+r/2)),b.setAttribute("cy",String(l.y+i+10)),b.setAttribute("r","10"),b.setAttribute("fill",n?"#fff":"#f1f5f9"),b.setAttribute("stroke","#cbd5e1"),b.setAttribute("stroke-width","1"),m.appendChild(b);let y=document.createElementNS(a,"text");y.setAttribute("x",String(l.x+r/2)),y.setAttribute("y",String(l.y+i+14)),y.setAttribute("text-anchor","middle"),y.setAttribute("font-size","11"),y.setAttribute("font-weight","700"),y.setAttribute("fill","#64748b"),y.setAttribute("font-family","system-ui, sans-serif"),y.textContent=l.collapsed?`+${l.childCount}`:"\u2212",m.appendChild(y),f.appendChild(m)}t.appendChild(f),l.children.length>0&&!l.collapsed&&this.#M(t,l.children,h)}}#Q(t){let e=this.#$(t,this.#h);if(!e)return;e.collapsed=!e.collapsed;let s=this.#T||t;this.#S(),requestAnimationFrame(()=>{this.#A(s);let a=this.#a?.querySelector('svg[role="tree"]');a&&a.focus({preventScroll:!0})})}#$(t,e){if(!e)return null;let s=t.split("-").map(Number),a=e,r=null;for(let i of s){if(!a||i>=a.length)return null;r=a[i],a=r.children}return r}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();for(;this.firstChild;)this.firstChild.remove();s.title&&!this.getAttribute("title")&&this.setAttribute("title",s.title);let a=document.createElement("nav"),r=document.createElement("ul");this.#K(r,s.pages||[]),a.appendChild(r),this.appendChild(a),this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(e){console.warn(`[site-map-wc] Failed to load src="${t}":`,e)}}#K(t,e){for(let s of e){let a=document.createElement("li");s.pageType&&a.setAttribute("data-page-type",s.pageType),s.template&&a.setAttribute("data-template",s.template),s.status&&a.setAttribute("data-status",s.status);let r=document.createElement("a");if(r.href=s.href||"#",r.textContent=s.label||"",a.appendChild(r),s.children&&s.children.length>0){let i=document.createElement("ul");this.#K(i,s.children),a.appendChild(i)}t.appendChild(a)}}};x("site-map-wc",dt);var T=`
2684
+ :host {
2685
+ --_bg: var(--adr-wc-bg, var(--color-surface, #ffffff));
2686
+ --_text: var(--adr-wc-text, var(--color-text, #1a1a1a));
2687
+ --_muted: var(--adr-wc-muted, var(--color-text-muted, #666));
2688
+ --_border: var(--adr-wc-border, var(--color-border, #e0e0e0));
2689
+ --_accent: var(--adr-wc-accent, var(--color-interactive, #0066cc));
2690
+ --_card-bg: var(--adr-wc-card-bg, var(--color-surface-raised, #f8f9fa));
2691
+ --_highlight: var(--adr-wc-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
2692
+ --_radius: var(--adr-wc-radius, var(--radius-l, 0.75rem));
2693
+ --_shadow: var(--adr-wc-shadow, var(--shadow-sm));
2694
+ --_shadow-hover: var(--adr-wc-shadow-hover, var(--shadow-md));
2695
+ --_duration: var(--adr-wc-duration, var(--duration-normal, 200ms));
2696
+ --_ease: var(--adr-wc-ease, var(--ease-default, ease));
2697
+ --_space-2xs: var(--adr-wc-space-2xs, var(--size-2xs, 0.25rem));
2698
+ --_space-xs: var(--adr-wc-space-xs, var(--size-xs, 0.5rem));
2699
+ --_space-s: var(--adr-wc-space-s, var(--size-s, 0.75rem));
2700
+ --_space-m: var(--adr-wc-space-m, var(--size-m, 1rem));
2701
+ --_font-xs: var(--adr-wc-font-xs, var(--font-size-xs, 0.75rem));
2702
+ --_font-sm: var(--adr-wc-font-sm, var(--font-size-sm, 0.875rem));
2703
+ --_font-md: var(--adr-wc-font-md, var(--font-size-md, 1rem));
2704
+ --_font-lg: var(--adr-wc-font-lg, var(--font-size-lg, 1.125rem));
2705
+ --_font-mono: var(--adr-wc-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
2706
+ --_radius-s: var(--adr-wc-radius-s, var(--radius-s, 0.25rem));
2707
+ --_radius-full: var(--adr-wc-radius-full, var(--radius-full, 9999px));
2708
+
2709
+ display: block;
2710
+ font-family: var(--adr-wc-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
2711
+ }
2712
+
2713
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
2714
+
2715
+ /* \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 */
2716
+ .adr-card {
2717
+ background: var(--_bg);
2718
+ border: 1px solid var(--_border);
2719
+ border-radius: var(--_radius);
2720
+ overflow: hidden;
2721
+ box-shadow: var(--_shadow);
2722
+ transition: box-shadow var(--_duration) var(--_ease);
2723
+ }
2724
+
2725
+ .adr-card:hover {
2726
+ box-shadow: var(--_shadow-hover);
2727
+ }
2728
+
2729
+ /* \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 */
2730
+ .adr-header {
2731
+ display: flex;
2732
+ align-items: center;
2733
+ justify-content: space-between;
2734
+ padding: var(--_space-s) var(--_space-m);
2735
+ background: var(--_card-bg);
2736
+ border-block-end: 1px solid var(--_border);
2737
+ gap: var(--_space-s);
2738
+ flex-wrap: wrap;
2739
+ }
2740
+
2741
+ .adr-meta {
2742
+ display: flex;
2743
+ align-items: center;
2744
+ gap: var(--_space-xs);
2745
+ flex-wrap: wrap;
2746
+ min-width: 0;
2747
+ }
2748
+
2749
+ .adr-id {
2750
+ font-size: var(--_font-xs);
2751
+ font-weight: 600;
2752
+ color: var(--_muted);
2753
+ font-family: var(--_font-mono);
2754
+ }
2755
+
2756
+ /* \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 */
2757
+ .adr-badges {
2758
+ display: flex;
2759
+ align-items: center;
2760
+ gap: var(--_space-xs);
2761
+ }
2762
+
2763
+ .adr-status {
2764
+ font-size: 11px;
2765
+ padding: 4px 10px;
2766
+ border-radius: var(--_radius-full);
2767
+ font-weight: 600;
2768
+ text-transform: uppercase;
2769
+ letter-spacing: 0.3px;
2770
+ }
2771
+
2772
+ /* \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 */
2773
+ .adr-date-wrap {
2774
+ display: inline-flex;
2775
+ align-items: center;
2776
+ gap: 4px;
2777
+ font-size: var(--_font-xs);
2778
+ color: var(--_muted);
2779
+ }
2780
+
2781
+ .adr-date-wrap svg {
2782
+ width: 12px;
2783
+ height: 12px;
2784
+ flex-shrink: 0;
2785
+ }
2786
+
2787
+ ::slotted([slot="date"]) {
2788
+ font-size: var(--_font-xs);
2789
+ font-family: var(--_font-mono);
2790
+ color: var(--_muted);
2791
+ }
2792
+
2793
+ /* \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 */
2794
+ .adr-body {
2795
+ padding: 16px 20px;
2796
+ }
2797
+
2798
+ /* \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 */
2799
+ .adr-title-wrap {
2800
+ margin-block-end: 0;
2801
+ }
2802
+
2803
+ ::slotted([slot="title"]) {
2804
+ font-size: var(--_font-lg) !important;
2805
+ font-weight: 700 !important;
2806
+ color: var(--_text) !important;
2807
+ line-height: 1.4 !important;
2808
+ margin: 0 !important;
2809
+ }
2810
+
2811
+ /* Fallback title when no slot content */
2812
+ .adr-title-fallback {
2813
+ font-size: var(--_font-lg);
2814
+ font-weight: 700;
2815
+ color: var(--_text);
2816
+ line-height: 1.4;
2817
+ }
2818
+
2819
+ /* \u2500\u2500 Supersedes / Superseded-by links \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2820
+ .adr-links {
2821
+ display: flex;
2822
+ flex-wrap: wrap;
2823
+ gap: 4px;
2824
+ margin-block-start: var(--_space-s);
2825
+ }
2826
+
2827
+ .adr-links-label {
2828
+ font-size: 11px;
2829
+ font-weight: 600;
2830
+ color: var(--_muted);
2831
+ text-transform: uppercase;
2832
+ letter-spacing: 0.3px;
2833
+ margin-inline-end: var(--_space-2xs);
2834
+ align-self: center;
2835
+ }
2836
+
2837
+ .adr-link {
2838
+ display: inline-flex;
2839
+ align-items: center;
2840
+ gap: 3px;
2841
+ font-size: 11px;
2842
+ font-weight: 500;
2843
+ padding: 2px 8px;
2844
+ border-radius: var(--_radius-s);
2845
+ background: var(--_highlight);
2846
+ color: var(--_accent);
2847
+ text-decoration: none;
2848
+ }
2849
+
2850
+ .adr-link:hover {
2851
+ text-decoration: underline;
2852
+ }
2853
+
2854
+ .adr-link svg {
2855
+ width: 11px;
2856
+ height: 11px;
2857
+ }
2858
+
2859
+ /* \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 */
2860
+ .adr-sections {
2861
+ border-block-start: 1px solid var(--_border);
2862
+ }
2863
+
2864
+ .adr-section {
2865
+ padding: 14px 20px;
2866
+ border-block-end: 1px solid var(--_border);
2867
+ }
2868
+
2869
+ .adr-section:last-child {
2870
+ border-block-end: none;
2871
+ }
2872
+
2873
+ .adr-section-header {
2874
+ display: flex;
2875
+ align-items: center;
2876
+ gap: var(--_space-xs);
2877
+ margin-block-end: var(--_space-s);
2878
+ }
2879
+
2880
+ .adr-section-icon {
2881
+ width: 22px;
2882
+ height: 22px;
2883
+ border-radius: 5px;
2884
+ display: flex;
2885
+ align-items: center;
2886
+ justify-content: center;
2887
+ }
2888
+
2889
+ .adr-section-icon svg {
2890
+ width: 13px;
2891
+ height: 13px;
2892
+ fill: white;
2893
+ }
2894
+
2895
+ .adr-section-icon.context { background: #8b5cf6; }
2896
+ .adr-section-icon.decision { background: #22c55e; }
2897
+ .adr-section-icon.consequences { background: #f59e0b; }
2898
+
2899
+ .adr-section-title {
2900
+ font-size: var(--_font-xs);
2901
+ font-weight: 600;
2902
+ color: var(--_muted);
2903
+ text-transform: uppercase;
2904
+ letter-spacing: 0.5px;
2905
+ }
2906
+
2907
+ .adr-section-content {
2908
+ color: var(--_text);
2909
+ font-size: var(--_font-sm);
2910
+ line-height: 1.6;
2911
+ }
2912
+
2913
+ .adr-section-content ::slotted(ul),
2914
+ .adr-section-content ::slotted(ol) {
2915
+ margin: 0;
2916
+ padding-inline-start: 20px;
2917
+ }
2918
+
2919
+ .adr-section-content ::slotted(p) {
2920
+ margin: 0;
2921
+ }
2922
+
2923
+ .slot-fallback {
2924
+ color: var(--_muted);
2925
+ font-style: italic;
2926
+ }
2927
+
2928
+ /* \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 */
2929
+ .adr-card--minimal {
2930
+ padding: var(--_space-xs);
2931
+ cursor: pointer;
2932
+ }
2933
+
2934
+ .adr-card--minimal:hover {
2935
+ box-shadow: var(--_shadow-hover);
2936
+ }
2937
+
2938
+ .adr-card--minimal:focus-visible {
2939
+ outline: 2px solid var(--_accent);
2940
+ outline-offset: 2px;
2941
+ }
2942
+
2943
+ .adr-card--minimal .adr-header { display: none; }
2944
+ .adr-card--minimal .adr-sections { display: none; }
2945
+ .adr-card--minimal .adr-links { display: none; }
2946
+ .adr-card--minimal .adr-date-wrap { display: none; }
2947
+
2948
+ .adr-card--minimal .adr-body {
2949
+ padding: var(--_space-xs) var(--_space-s);
2950
+ }
2951
+
2952
+ .adr-card--minimal .adr-title-fallback,
2953
+ .adr-card--minimal ::slotted([slot="title"]) {
2954
+ font-size: var(--_font-sm) !important;
2955
+ font-weight: 600 !important;
2956
+ }
2957
+
2958
+ .adr-card--minimal .adr-id {
2959
+ display: block;
2960
+ margin-block-end: var(--_space-2xs);
2961
+ }
2962
+
2963
+ .adr-card--minimal .adr-status {
2964
+ font-size: 10px;
2965
+ padding: 2px 6px;
2966
+ }
2967
+
2968
+ /* \u2500\u2500 Compact detail \u2014 hide empty sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2969
+ .adr-card--compact .adr-section[data-empty] {
2970
+ display: none;
2971
+ }
2972
+
2973
+ .adr-card--compact .slot-fallback {
2974
+ display: none;
2975
+ }
2976
+
2977
+ .adr-card--compact .adr-body {
2978
+ padding: var(--_space-s) var(--_space-m);
2979
+ }
2980
+
2981
+ /* \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 */
2982
+ @media (max-width: 480px) {
2983
+ .adr-header {
2984
+ flex-direction: column;
2985
+ align-items: flex-start;
2986
+ }
2987
+
2988
+ .adr-badges {
2989
+ width: 100%;
2990
+ justify-content: flex-start;
2991
+ }
2992
+ }
2993
+
2994
+ @media (prefers-reduced-motion: reduce) {
2995
+ .adr-card {
2996
+ transition: none;
2997
+ }
2998
+ }
2999
+
3000
+ @media print {
3001
+ .adr-card {
3002
+ box-shadow: none;
3003
+ break-inside: avoid;
3004
+ }
3005
+ }
3006
+
3007
+ .state-msg { padding: var(--_space-m); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
3008
+ .state-msg--error { color: #dc2626; }
3009
+ `;var At={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)"}},q={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"/>'},ht=class extends HTMLElement{static get observedAttributes(){return["adr-id","status","supersedes","superseded-by","detail","compact","src"]}#t=new Map;constructor(){super(),this.attachShadow({mode:"open"})}#e(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}connectedCallback(){this.#e(),this.adrId&&!this.id&&(this.id=this.adrId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#s(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t,e,s){e!==s&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(s):this.#s())}get adrId(){return this.getAttribute("adr-id")||""}get status(){return this.getAttribute("status")||"proposed"}get adrTitle(){return this.querySelector('[slot="title"]')?.textContent?.trim()||this.#t.get("title")||""}get adrDate(){let t=this.querySelector('[slot="date"]');return t?.getAttribute("datetime")||t?.textContent?.trim()||this.#t.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"}async _loadSrc(t){if(t){this.shadowRoot.innerHTML=`<style>${T}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();if(s.adrId!=null&&this.setAttribute("adr-id",String(s.adrId)),s.status!=null&&this.setAttribute("status",String(s.status)),s.detail!=null&&this.setAttribute("detail",String(s.detail)),s.supersedes&&this.setAttribute("supersedes",Array.isArray(s.supersedes)?s.supersedes.join(","):s.supersedes),s.supersededBy&&this.setAttribute("superseded-by",Array.isArray(s.supersededBy)?s.supersededBy.join(","):s.supersededBy),s.title&&!this.querySelector('[slot="title"]')){let a=document.createElement("h3");a.slot="title",a.textContent=s.title,this.appendChild(a)}if(s.date&&!this.querySelector('[slot="date"]')){let a=document.createElement("time");a.slot="date",a.setAttribute("datetime",s.date),a.textContent=new Date(s.date).toLocaleDateString(void 0,{year:"numeric",month:"long",day:"numeric"}),this.appendChild(a)}for(let a of["context","decision"])if(s[a]&&!this.querySelector(`[slot="${a}"]`)){let r=document.createElement("p");r.slot=a,r.textContent=s[a],this.appendChild(r)}if(s.consequences&&!this.querySelector('[slot="consequences"]')){let a=document.createElement("ul");a.slot="consequences";let r=Array.isArray(s.consequences)?s.consequences:[s.consequences];for(let i of r){let o=document.createElement("li");o.textContent=i,a.appendChild(o)}this.appendChild(a)}this.#e(),this.#s()}catch(e){this.shadowRoot.innerHTML=`<style>${T}</style><div class="state-msg state-msg--error">Could not load: ${u(e.message)}</div>`}}}#s(){let t=At[this.status]||At.proposed,e=this._detailLevel,s=this.adrId?`ADR: ${u(this.adrId)}`:"Architectural Decision Record",a=!!this.querySelector('[slot="date"]')||this.#t.has("date");if(e==="minimal"){this.shadowRoot.innerHTML=`<style>${T}</style>
3010
+ <article class="adr-card adr-card--minimal" role="article" aria-label="${s}"
3011
+ tabindex="0">
3012
+ <div class="adr-body">
3013
+ <div class="adr-meta">
3014
+ ${this.adrId?`<span class="adr-id">${u(this.adrId)}</span>`:""}
3015
+ <span class="adr-status" style="color:${t.color};background:${t.bg}">${u(t.label)}</span>
3016
+ </div>
3017
+ <div class="adr-title-wrap">
3018
+ <slot name="title"><span class="adr-title-fallback">${u(this._minimalLabel)}</span></slot>
3019
+ </div>
3020
+ </div>
3021
+ </article>`;return}if(this.shadowRoot.innerHTML=`<style>${T}</style>
3022
+ <article class="adr-card adr-card--${e}" role="article" aria-label="${s}">
3023
+
3024
+ <header class="adr-header">
3025
+ <div class="adr-meta">
3026
+ ${this.adrId?`<span class="adr-id">${u(this.adrId)}</span>`:""}
3027
+ ${a?`<span class="adr-date-wrap">${v(q.calendar)} <slot name="date"></slot></span>`:""}
3028
+ </div>
3029
+ <div class="adr-badges">
3030
+ <span class="adr-status" style="color:${t.color};background:${t.bg}">${u(t.label)}</span>
3031
+ </div>
3032
+ </header>
3033
+
3034
+ <div class="adr-body">
3035
+ <div class="adr-title-wrap">
3036
+ <slot name="title"><span class="adr-title-fallback">[Untitled ADR]</span></slot>
3037
+ </div>
3038
+
3039
+ ${this.supersedes.length?`
3040
+ <div class="adr-links">
3041
+ <span class="adr-links-label">Supersedes</span>
3042
+ ${this.supersedes.map(r=>`<a class="adr-link" href="#${u(r)}">${v(q.arrowRight)} ${u(r)}</a>`).join("")}
3043
+ </div>`:""}
3044
+
3045
+ ${this.supersededBy.length?`
3046
+ <div class="adr-links">
3047
+ <span class="adr-links-label">Superseded by</span>
3048
+ ${this.supersededBy.map(r=>`<a class="adr-link" href="#${u(r)}">${v(q.arrowRight)} ${u(r)}</a>`).join("")}
3049
+ </div>`:""}
3050
+ </div>
3051
+
3052
+ <div class="adr-sections">
3053
+ <div class="adr-section">
3054
+ <div class="adr-section-header">
3055
+ <div class="adr-section-icon context">${v(q.context)}</div>
3056
+ <span class="adr-section-title">Context</span>
3057
+ </div>
3058
+ <div class="adr-section-content">
3059
+ <slot name="context"><em class="slot-fallback">No context provided.</em></slot>
3060
+ </div>
3061
+ </div>
3062
+
3063
+ <div class="adr-section">
3064
+ <div class="adr-section-header">
3065
+ <div class="adr-section-icon decision">${v(q.decision)}</div>
3066
+ <span class="adr-section-title">Decision</span>
3067
+ </div>
3068
+ <div class="adr-section-content">
3069
+ <slot name="decision"><em class="slot-fallback">No decision recorded.</em></slot>
3070
+ </div>
3071
+ </div>
3072
+
3073
+ <div class="adr-section">
3074
+ <div class="adr-section-header">
3075
+ <div class="adr-section-icon consequences">${v(q.consequences)}</div>
3076
+ <span class="adr-section-title">Consequences</span>
3077
+ </div>
3078
+ <div class="adr-section-content">
3079
+ <slot name="consequences"><em class="slot-fallback">No consequences documented.</em></slot>
3080
+ </div>
3081
+ </div>
3082
+ </div>
3083
+
3084
+ </article>`,e==="compact")for(let r of this.shadowRoot.querySelectorAll(".adr-section")){let i=r.querySelector("slot");i&&i.assignedNodes().length===0&&r.setAttribute("data-empty","")}this.dispatchEvent(new CustomEvent("adr-wc:ready",{detail:{adrId:this.adrId,title:this.adrTitle,status:this.status},bubbles:!0,composed:!0}))}};x("adr-wc",ht);var pt=class extends A{static get observedAttributes(){return["src","title","compact"]}#t=null;#e=null;#s=null;#a=0;setup(){let t=this.querySelector(":scope > ol");if(!t)return!1;let e=this.#r(t);if(e.length===0)return!1;t.style.display="none",t.setAttribute("aria-hidden","true");let s=this.getAttribute("title");s&&(this.#e=document.createElement("h2"),this.#e.className="fd-title",this.#e.textContent=s,this.insertBefore(this.#e,t)),this.#t=document.createElement("div"),this.#t.className="fd-container",this.#t.setAttribute("role","img"),this.#t.setAttribute("aria-label",`Flow diagram${s?": "+s:""}`),this.#a=0,this.#i(e,this.#t);let a=document.createElement("div");a.className="fd-summary",a.textContent=`${this.#a} step${this.#a!==1?"s":""}`,this.#t.appendChild(a),this.insertBefore(this.#t,t),this.#s=document.createElement("div"),this.#s.className="fd-live",this.#s.setAttribute("role","status"),this.#s.setAttribute("aria-live","polite"),this.#s.setAttribute("aria-atomic","true"),this.appendChild(this.#s),this.listen(this.#t,"click",r=>{let i=r.target.closest(".fd-node-shape");if(!i)return;let n=i.closest(".fd-node")?.dataset.type||"action",c=i.textContent?.trim()||"";this.#d(`Selected: ${c}`),this.dispatchEvent(new CustomEvent("flow-diagram:select",{bubbles:!0,detail:{type:n,text:c}}))}),this.dispatchEvent(new CustomEvent("flow-diagram:ready",{bubbles:!0,detail:{nodeCount:this.#a}}))}teardown(){this.#e&&(this.#e.remove(),this.#e=null),this.#t&&(this.#t.remove(),this.#t=null),this.#s&&(this.#s.remove(),this.#s=null);let t=this.querySelector("ol");t&&(t.style.display="",t.removeAttribute("aria-hidden")),this.#a=0}attributeChangedCallback(t,e,s){e===s||!this.isConnected||(t==="src"?this._loadSrc(s):this.hasAttribute("data-upgraded")&&(this.teardown(),this.removeAttribute("data-upgraded"),this.setup()))}#r(t){let e=[];for(let s of t.querySelectorAll(":scope > li")){let a=this.#o(s);a&&e.push(a)}return e}#o(t){let e=t.dataset.type||"action",s=t.dataset.annotation||"",a=[],r=t.querySelectorAll(":scope > ol > li[data-branch]");if(r.length>0)for(let o of r){let n=o.dataset.branch||"",c=o.querySelector(":scope > ol"),l=c?this.#r(c):[];a.push({label:n,steps:l})}let i="";for(let o of t.childNodes)(o.nodeType===Node.TEXT_NODE||o.nodeType===Node.ELEMENT_NODE&&o.tagName!=="OL")&&(i+=o.textContent);return i=i.trim(),{type:e,text:i,annotation:s,branches:a}}#i(t,e){for(let s=0;s<t.length;s++){let a=t[s];s>0&&e.appendChild(this.#n());let r=this.#l(a);if(e.appendChild(r),a.branches.length>0){let i=document.createElement("div");i.className="fd-branches",i.setAttribute("data-branch-count",String(a.branches.length));let o=document.createElement("div");o.className="fd-split-line",o.setAttribute("aria-hidden","true"),i.appendChild(o);let n=document.createElement("div");n.className="fd-branch-columns";let c=(50/a.branches.length).toFixed(2);n.style.setProperty("--fd-inset",`${c}%`);for(let l of a.branches){let h=document.createElement("div");h.className="fd-branch",h.appendChild(this.#n());let p=document.createElement("span");p.className="fd-branch-label",p.textContent=l.label,p.setAttribute("data-branch",l.label.toLowerCase()),h.appendChild(p),this.#i(l.steps,h),n.appendChild(h)}i.appendChild(n),e.appendChild(i)}}}#l(t){this.#a++;let e=document.createElement("div");e.className="fd-node",e.dataset.type=t.type;let s=document.createElement("div");if(s.className="fd-node-shape",s.setAttribute("tabindex","0"),s.setAttribute("role","img"),s.setAttribute("aria-label",`${t.type}: ${t.text}`),s.textContent=t.text,e.appendChild(s),t.annotation){let a=document.createElement("div");a.className="fd-annotation",a.textContent=t.annotation,e.appendChild(a)}return e}#n(t){let e=document.createElement("div");e.className="fd-connector",e.setAttribute("aria-hidden","true");let s=document.createElement("div");if(s.className="fd-connector-line",e.appendChild(s),t){let r=document.createElement("span");r.className="fd-connector-label",r.textContent=t,e.appendChild(r)}let a=document.createElement("div");return a.className="fd-connector-arrow",e.appendChild(a),e}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();for(;this.firstChild;)this.firstChild.remove();s.title&&this.setAttribute("title",s.title);let a=document.createElement("ol");this.#c(s.steps||[],a),this.appendChild(a),this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(e){console.warn(`[flow-diagram] Failed to load src="${t}":`,e)}}#c(t,e){for(let s of t){let a=document.createElement("li");if(s.type&&(a.dataset.type=s.type),s.annotation&&(a.dataset.annotation=s.annotation),a.textContent=s.text||"",s.branches&&s.branches.length>0){let r=document.createElement("ol");for(let i of s.branches){let o=document.createElement("li");o.dataset.branch=i.label||"";let n=document.createElement("ol");this.#c(i.steps||[],n),o.appendChild(n),r.appendChild(o)}a.appendChild(r)}e.appendChild(a)}}#d(t){this.#s&&(this.#s.textContent="",requestAnimationFrame(()=>{this.#s&&(this.#s.textContent=t)}))}};x("flow-diagram",pt);
1631
3085
  //# sourceMappingURL=ux-planning.full.js.map