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.
- package/dist/cdn/components/adr-record.js +383 -0
- package/dist/cdn/components/adr-wc.js +403 -0
- package/dist/cdn/components/analytics-panel.js +34 -0
- package/dist/cdn/components/author-index.js +3 -0
- package/dist/cdn/components/brand-mark.js +2 -0
- package/dist/cdn/components/calendar-wc.js +2 -2
- package/dist/cdn/components/carousel-wc.js +1 -1
- package/dist/cdn/components/chart-wc.js +25 -25
- package/dist/cdn/components/color-palette.js +13 -7
- package/dist/cdn/components/comment-wc.js +2 -0
- package/dist/cdn/components/consent-banner.js +1 -1
- package/dist/cdn/components/content-lens.js +2 -0
- package/dist/cdn/components/day-view.js +2 -0
- package/dist/cdn/components/empathy-map.js +42 -25
- package/dist/cdn/components/flow-diagram.js +2 -0
- package/dist/cdn/components/font-pairer.js +108 -0
- package/dist/cdn/components/gantt-chart.js +2 -0
- package/dist/cdn/components/geo-map.js +7 -7
- package/dist/cdn/components/glossary-wc.js +2 -0
- package/dist/cdn/components/gradient-builder.js +52 -0
- package/dist/cdn/components/highlight-wc.js +3 -0
- package/dist/cdn/components/manifest.json +134 -26
- package/dist/cdn/components/markdown-viewer.js +3 -3
- package/dist/cdn/components/motion-specimen.js +21 -0
- package/dist/cdn/components/note-wc.js +3 -0
- package/dist/cdn/components/notification-wc.js +37 -0
- package/dist/cdn/components/page-info.js +55 -24
- package/dist/cdn/components/page-toc.js +1 -1
- package/dist/cdn/components/popularity-index.js +9 -0
- package/dist/cdn/components/print-page.js +1 -1
- package/dist/cdn/components/recently-visited.js +3 -0
- package/dist/cdn/components/review-surface.js +541 -0
- package/dist/cdn/components/selection-menu.js +2 -0
- package/dist/cdn/components/semantic-palette.js +30 -0
- package/dist/cdn/components/settings-panel.js +55 -51
- package/dist/cdn/components/share-wc.js +2 -2
- package/dist/cdn/components/site-map-wc.js +2 -0
- package/dist/cdn/components/spacing-specimen.js +5 -5
- package/dist/cdn/components/split-surface.js +1 -1
- package/dist/cdn/components/text-reader.js +2 -2
- package/dist/cdn/components/theme-export.js +18 -0
- package/dist/cdn/components/theme-picker.js +58 -58
- package/dist/cdn/components/token-specimen.js +25 -20
- package/dist/cdn/components/topic-map.js +3 -0
- package/dist/cdn/components/trust-filter.js +4 -0
- package/dist/cdn/components/type-specimen.js +16 -13
- package/dist/cdn/components/user-journey.js +48 -30
- package/dist/cdn/components/user-persona.js +17 -15
- package/dist/cdn/components/user-story.js +55 -22
- package/dist/cdn/components/watch-wc.js +3 -0
- package/dist/cdn/components/week-view.js +2 -0
- package/dist/cdn/components/work-item.js +446 -0
- package/dist/cdn/packs/design-system.full.js +124 -47
- package/dist/cdn/packs/effects.full.js +1 -1
- package/dist/cdn/packs/kawaii.full.css +1 -1
- package/dist/cdn/packs/kawaii.full.js +1 -1
- package/dist/cdn/packs/kawaii.theme.css +1 -1
- package/dist/cdn/packs/manifest.json +10 -40
- package/dist/cdn/packs/prototype.full.js +1 -1
- package/dist/cdn/packs/ui.full.css +1 -1
- package/dist/cdn/packs/ui.full.js +50 -50
- package/dist/cdn/packs/ux-planning.full.css +1 -1
- package/dist/cdn/packs/ux-planning.full.js +1546 -92
- package/dist/cdn/themes/8bit.css +1 -1
- package/dist/cdn/themes/alpha1999.css +1 -1
- package/dist/cdn/themes/bauhaus.css +1 -1
- package/dist/cdn/themes/brutalist.css +1 -1
- package/dist/cdn/themes/claymorphism.css +1 -1
- package/dist/cdn/themes/cottagecore.css +1 -1
- package/dist/cdn/themes/cyber.css +1 -1
- package/dist/cdn/themes/genai.css +1 -1
- package/dist/cdn/themes/glassmorphism.css +1 -1
- package/dist/cdn/themes/kawaii.css +1 -1
- package/dist/cdn/themes/magna.css +1 -1
- package/dist/cdn/themes/manifest.json +20 -20
- package/dist/cdn/themes/nes.css +1 -1
- package/dist/cdn/themes/neumorphism.css +1 -1
- package/dist/cdn/themes/organic.css +1 -1
- package/dist/cdn/themes/rough.css +1 -1
- package/dist/cdn/themes/startup.css +1 -1
- package/dist/cdn/themes/super2026.css +1 -1
- package/dist/cdn/themes/terminal.css +1 -1
- package/dist/cdn/themes/vaporwave.css +1 -1
- package/dist/cdn/themes/win9x.css +1 -1
- package/dist/cdn/vanilla-breeze-charts.js +25 -25
- package/dist/cdn/vanilla-breeze-core.css +1 -1
- package/dist/cdn/vanilla-breeze-core.js +119 -47
- package/dist/cdn/vanilla-breeze-dev.js +1 -1
- package/dist/cdn/vanilla-breeze-extras.js +154 -74
- package/dist/cdn/vanilla-breeze.css +1 -1
- package/dist/cdn/vanilla-breeze.js +1988 -248
- package/package.json +8 -6
- package/dist/cdn/packs/retro.bundle.js +0 -2
- package/dist/cdn/packs/retro.components.js +0 -1
- package/dist/cdn/packs/retro.effects.css +0 -2
- package/dist/cdn/packs/retro.effects.js +0 -16
- package/dist/cdn/packs/retro.full.css +0 -5
- package/dist/cdn/packs/retro.full.js +0 -16
- package/dist/cdn/packs/retro.theme.css +0 -2
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
var S=window.matchMedia("(prefers-reduced-motion: reduce)");var v=new Map;function g(a,o,i={}){let e=i.priority??10,t={impl:o,bundle:i.bundle,contract:i.contract,priority:e},s=v.get(a);if(customElements.get(a)){if(!s||s.priority>=e){s&&s.priority===e&&s.impl!==o&&console.warn(`[VB Bundle] Tag <${a}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${a}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=e){s.priority===e&&console.warn(`[VB Bundle] Tag <${a}> already registered by "${s.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}v.set(a,t),customElements.define(a,o)}var f=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let o of this.#e)o();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(o,i,e,t){o.addEventListener(i,e,t),this.#e.push(()=>o.removeEventListener(i,e,t))}setup(){}teardown(){}};var y=class extends f{static observedAttributes=["colors","names","layout","show-values","show-names","size","editable"];#e=[];setup(){this.#o()}attributeChangedCallback(){this.isConnected&&this.#o()}#o(){let o=this.getAttribute("colors")||"",i=this.getAttribute("names")||"",e=this.getAttribute("layout")||"inline",t=this.getAttribute("size")||"md",s=this.hasAttribute("show-values"),r=this.hasAttribute("show-names")||i.length>0,n=this.hasAttribute("editable"),u=this.#c(o);this.#e=u.slice();let d=i?i.split(",").map(c=>c.trim()):[],h={sm:48,md:80,lg:120}[t]||80,m="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";e==="grid"?m=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${h}px,1fr));gap:var(--size-xs,0.5rem)`:e==="list"&&(m="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let w=u.map((c,p)=>{let l=d[p]||"",E=this.#s(c),b=e==="list"?"display:flex;flex-direction:row;align-items:center;gap:0.75rem":`display:flex;flex-direction:column;align-items:center;gap:0.25rem;max-inline-size:${h}px`,x=e==="list"?36:h,$=`background:${c};color:${E};width:${x}px;height:${x}px;border:1px solid oklch(0% 0 0/0.15);border-radius:var(--radius-s,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono,monospace);position:relative;overflow:hidden;flex-shrink:0`;if(n){let k=this.#a(c);return`<div class="swatch-wrap" role="listitem" style="${b}">
|
|
2
|
+
<label class="color-box color-box-edit" style="${$};cursor:pointer" data-index="${p}" title="Click to edit${l?": "+l:""}" aria-label="${l||"Color "+(p+1)}: ${c}. Click to edit.">
|
|
3
|
+
<input type="color" class="color-input" value="${k}" data-index="${p}" style="position:absolute;inset:0;opacity:0;cursor:pointer;inline-size:100%;block-size:100%" aria-label="${l||"Color "+(p+1)} picker">
|
|
4
|
+
<span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${s?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease;pointer-events:none">${this.#t(c)}</span>
|
|
5
|
+
</label>
|
|
6
|
+
${r&&l?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l}</span>`:""}
|
|
7
|
+
</div>`}return`<div class="swatch-wrap" role="listitem" style="${b}">
|
|
8
|
+
<button type="button" class="color-box" data-index="${p}"
|
|
9
|
+
style="${$}"
|
|
4
10
|
title="Click to copy${l?": "+l:""}"
|
|
5
|
-
aria-label="${l||"Color "+(
|
|
6
|
-
<span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${
|
|
11
|
+
aria-label="${l||"Color "+(p+1)}: ${c}">
|
|
12
|
+
<span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${s?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${this.#t(c)}</span>
|
|
7
13
|
</button>
|
|
8
|
-
${
|
|
9
|
-
</div>`}).join("");this.innerHTML=`<div class="palette ${e}" role="list" aria-label="Color palette" style="${
|
|
14
|
+
${r&&l?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l}</span>`:""}
|
|
15
|
+
</div>`}).join("");this.innerHTML=`<div class="palette ${e}" role="list" aria-label="Color palette" style="${m}">${w}</div>`,n?this.#n(d):(this.#l(u,d),this.#r(u,d,s))}#r(o,i,e){this.querySelectorAll(".color-box").forEach(t=>{e||(t.addEventListener("pointerenter",()=>{let s=t.querySelector(".color-value");s&&(s.style.opacity="1")}),t.addEventListener("pointerleave",()=>{let s=t.querySelector(".color-value");s&&(s.style.opacity="0")})),t.addEventListener("click",()=>{let s=Number(t.dataset.index),r=o[s],n=i[s]||"";navigator.clipboard?.writeText(r),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:r,name:n,index:s}})),t.style.outline="3px solid currentColor",t.style.outlineOffset="2px",setTimeout(()=>{t.style.outline="",t.style.outlineOffset=""},600)})})}#n(o){this.querySelectorAll(".color-input").forEach(i=>{i.addEventListener("input",()=>{let e=Number(i.dataset.index),t=i.value;this.#e[e]=t;let s=i.parentElement;if(s){s.style.background=t,s.style.color=this.#s(t);let r=s.querySelector(".color-value");r&&(r.textContent=this.#t(t)),s.title=`Click to edit${o[e]?": "+o[e]:""} (${t})`,s.setAttribute("aria-label",`${o[e]||"Color "+(e+1)}: ${t}. Click to edit.`)}this.setAttribute("colors",this.#e.join(",")),this.dispatchEvent(new CustomEvent("color-palette:change",{bubbles:!0,detail:{color:t,name:o[e]||"",index:e,colors:this.#e.slice()}}))})})}get colors(){return this.#e.slice()}#l(o,i){this.querySelectorAll(".color-box").forEach(e=>{let t=Number(e.dataset.index),s=o[t];if(!s||!s.includes("var("))return;let r=getComputedStyle(e).backgroundColor,n=this.#i(r)||r;o[t]=n,this.#e[t]=n;let u=e.querySelector(".color-value");u&&(u.textContent=n),e.style.color=this.#s(n);let d=i[t]||"";e.title=`Click to copy${d?": "+d:""} (${n})`,e.setAttribute("aria-label",`${d||"Color "+(t+1)}: ${n}`)})}#i(o){let i=o.match(/rgba?\(\s*([\d.]+),?\s*([\d.]+),?\s*([\d.]+)/);if(!i)return null;let[,e,t,s]=i,r=n=>Math.round(Number(n)).toString(16).padStart(2,"0");return`#${r(e)}${r(t)}${r(s)}`}#a(o){if(/^#[0-9a-f]{6}$/i.test(o))return o.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(o))return("#"+o.slice(1).split("").map(t=>t+t).join("")).toLowerCase();if(typeof document>"u")return"#000000";let i=document.createElement("span");i.style.color=o,i.style.display="none",document.body.appendChild(i);let e=getComputedStyle(i).color;return i.remove(),this.#i(e)||"#000000"}#t(o){if(o.startsWith("#"))return o;let i=o.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)/);return i?`${i[1]}% .${i[2].replace("0.","")}`:o.length>12?o.slice(0,12)+"\u2026":o}#c(o){if(!o)return[];let i=[],e=0,t="";for(let s of o)s==="("?e++:s===")"&&e--,s===","&&e===0?(i.push(t.trim()),t=""):t+=s;return t.trim()&&i.push(t.trim()),i}#s(o){let i=o.match(/oklch\(\s*([\d.]+)%?\s/);if(i){let e=parseFloat(i[1]);return(e>1?e/100:e)>.6?"#000":"#fff"}if(o.startsWith("#")){let e=o.replace("#",""),t=parseInt(e.substring(0,2),16)/255,s=parseInt(e.substring(2,4),16)/255,r=parseInt(e.substring(4,6),16)/255;return .2126*t+.7152*s+.0722*r>.4?"#000":"#fff"}return"#000"}};g("color-palette",y);export{y as ColorPalette};
|
|
10
16
|
//# sourceMappingURL=color-palette.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var s=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,o,r){e.addEventListener(t,o,r),this.#e.push(()=>e.removeEventListener(t,o,r))}setup(){}teardown(){}};var m=window.matchMedia("(prefers-reduced-motion: reduce)");var l=new Map;function u(i,e,t={}){let o=t.priority??10,r={impl:e,bundle:t.bundle,contract:t.contract,priority:o},n=l.get(i);if(customElements.get(i)){if(!n||n.priority>=o){n&&n.priority===o&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=o){n.priority===o&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${n.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}l.set(i,r),customElements.define(i,e)}var c=class extends s{setup(){let e=document.createElement("button");e.type="button";let t=document.createElement("icon-wc");t.setAttribute("name","message-circle"),t.setAttribute("size","sm"),t.setAttribute("aria-hidden","true"),e.appendChild(t);let o=this.closest("selection-menu")?.getAttribute("for"),r=this.closest("review-surface")||(o?document.querySelector(`review-surface[for="${o}"]`):null);r?(e.setAttribute("aria-label","Add comment"),e.addEventListener("click",()=>this.#e(r))):(e.setAttribute("aria-label","Comments not available"),e.style.opacity="0.4",e.setAttribute("title","Wrap content in <review-surface> to enable comments")),this.appendChild(e)}#e(e){let t=this.closest("selection-menu");if(!t)return;let o=t.getSelection();if(!o)return;let r=o.range.getBoundingClientRect(),n=e.getBoundingClientRect(),d=(r.left+r.width/2-n.left)/n.width*100,a=(r.top-n.top)/n.height*100;typeof e.addPin=="function"&&e.addPin({x:d,y:a,text:o.text}),this.dispatchEvent(new CustomEvent("comment-wc:created",{detail:{text:o.text,x:d,y:a},bubbles:!0})),t.dismiss()}};u("comment-wc",c);
|
|
2
|
+
//# sourceMappingURL=comment-wc.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var w=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function m(t,e,n={}){let r=n.priority??10,o={impl:e,bundle:n.bundle,contract:n.contract,priority:r},s=p.get(t);if(customElements.get(t)){if(!s||s.priority>=r){s&&s.priority===r&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=r){s.priority===r&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}p.set(t,o),customElements.define(t,e)}var l=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,n,r,o){e.addEventListener(n,r,o),this.#e.push(()=>e.removeEventListener(n,r,o))}setup(){}teardown(){}};function b(){let t=globalThis.localStorage;if(!t)throw new Error("VBStore: localStorage is not available in this environment");return{async getRaw(e){return t.getItem(e)},async setRaw(e,n){t.setItem(e,n)},async removeRaw(e){t.removeItem(e)},async keys(e){let n=[];for(let r=0;r<t.length;r++){let o=t.key(r);o&&o.startsWith(e)&&n.push(o)}return n}}}var u=null;function a(){return u||(u=b()),u}function f(t,e){if(typeof t!="string"||!t)throw new TypeError("VBStore: namespace must be a non-empty string");if(typeof e!="string"||!e)throw new TypeError("VBStore: key must be a non-empty string");return`vb:${t}:${e}`}function y(t){if(typeof t!="string"||!t)throw new TypeError("VBStore: namespace must be a non-empty string");return`vb:${t}:`}function g(t){try{let e=JSON.parse(t);if(e&&typeof e=="object"&&typeof e.timestamp=="number")return e}catch{}return null}var c={configure(t={}){u=t.backend??null},async set(t,e,n){let r={data:n,timestamp:Date.now()};await a().setRaw(f(t,e),JSON.stringify(r))},async get(t,e,n){let r=await a().getRaw(f(t,e));if(r==null)return null;let o=g(r);return!o||n?.maxAge!=null&&Date.now()-o.timestamp>n.maxAge?null:o.data},async remove(t,e){await a().removeRaw(f(t,e))},async list(t){let e=y(t),n=await a().keys(e),r=[];for(let o of n){let s=await a().getRaw(o);if(s==null)continue;let i=g(s);i&&r.push({key:o.slice(e.length),data:i.data,timestamp:i.timestamp})}return r},async clear(t){let e=y(t),n=await a().keys(e);for(let r of n)await a().removeRaw(r)},async clearAll(){let t=await a().keys("vb:");for(let e of t)await a().removeRaw(e)},async setMany(t,e){for(let[n,r]of e)await c.set(t,n,r)}};var h=class extends l{#e=null;static get observedAttributes(){return["position"]}get#t(){return this.getAttribute("persist")||"banner"}get#i(){let e=this.getAttribute("expires");return e==="0"||e==="never"?0:e?parseInt(e,10):365}get#a(){let e=this.#i;return e>0?e*864e5:void 0}async setup(){if(this.#e=this.querySelector("dialog"),!this.#e)return!1;if(this.getAttribute("trigger")&&this.listen(document,"click",this.#l),await this.#o())return this.getAttribute("trigger")?this.hidden=!0:this.remove(),!1;this.#n()}#n(){(this.getAttribute("position")||"bottom")==="center"?(this.#e.showModal(),this.#e.addEventListener("cancel",this.#r)):this.#e.show(),this.addEventListener("click",this.#s)}#c(){this.#e.removeEventListener("cancel",this.#r),this.removeEventListener("click",this.#s),this.#e.close(),this.getAttribute("trigger")?this.hidden=!0:this.remove()}#r=e=>{e.preventDefault()};#s=async e=>{let n=e.target.closest("button[value]");if(!n)return;let r=n.value;if(!["accept","reject","save"].includes(r))return;let o=[...this.querySelectorAll('input[type="checkbox"]')],s={};r==="accept"?o.forEach(i=>{s[i.name]=!0}):r==="reject"?o.forEach(i=>{s[i.name]=!!i.disabled}):o.forEach(i=>{s[i.name]=i.checked}),await this.#u({preferences:s,action:r}),this.dispatchEvent(new CustomEvent("consent-banner:change",{bubbles:!0,detail:{preferences:s,action:r}})),this.#c()};#l=async e=>{let n=this.getAttribute("trigger");if(!n||!e.target.closest(n))return;e.preventDefault();let o=await this.#o();if(o?.preferences)for(let[s,i]of Object.entries(o.preferences)){let d=this.querySelector(`input[type="checkbox"][name="${CSS.escape(s)}"]`);d&&!d.disabled&&(d.checked=i)}this.hidden=!1,this.#n()};async#o(){let e=this.#a;return await c.get("consent",this.#t,e?{maxAge:e}:void 0)}async#u(e){await c.set("consent",this.#t,e)}static async reset(e="banner"){await c.remove("consent",e)}static async getConsent(e="banner"){return await c.get("consent",e)}};m("consent-banner",h);export{h as ConsentBanner};
|
|
2
2
|
//# sourceMappingURL=consent-banner.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var p=window.matchMedia("(prefers-reduced-motion: reduce)");var u=new Map;function f(s,e,t={}){let r=t.priority??10,i={impl:e,bundle:t.bundle,contract:t.contract,priority:r},n=u.get(s);if(customElements.get(s)){if(!n||n.priority>=r){n&&n.priority===r&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${s}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=r){n.priority===r&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${n.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}u.set(s,i),customElements.define(s,e)}var c=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,r,i){e.addEventListener(t,r,i),this.#e.push(()=>e.removeEventListener(t,r,i))}setup(){}teardown(){}};var a=class extends c{#e=new Map;#r="";#t=null;setup(){if(this.#i(),this.#e.size===0)return!1;this.#o(),this.#c();let e=this.#l();this.#n(e,!1)}#i(){for(let e of this.children){let t=e.getAttribute("data-lens-name");t&&this.#e.set(t,e)}}#o(){let e=this.getAttribute("data-lens-src");if(e)for(let t of this.#e.values())!t.hasAttribute("data-lens-src")&&!t.hasAttribute("src")&&t.setAttribute("data-lens-src",e)}#c(){if(this.getAttribute("data-lens-controls")==="off")return;let e=document.createElement("nav");e.setAttribute("data-content-lens-controls",""),e.setAttribute("aria-label","Switch lens");let t=document.createElement("fieldset"),r=document.createElement("legend");r.textContent="View",t.append(r);let i=`content-lens-${Math.random().toString(36).slice(2,8)}`;for(let[n,h]of this.#e){let l=document.createElement("label"),o=document.createElement("input");o.type="radio",o.name=i,o.value=n,o.addEventListener("change",()=>{o.checked&&this.#n(n,!0)});let d=document.createElement("span");d.textContent=h.getAttribute("data-lens-label")||this.#a(n),l.append(o,d),t.append(l)}e.append(t),this.prepend(e),this.#t=e}#a(e){return e.replace(/-/g," ").replace(/\b\w/g,t=>t.toUpperCase())}#s(){return`vb:content-lens:${this.getAttribute("data-lens-storage")||(typeof location<"u"?location.pathname:"default")}`}#l(){let e=(()=>{try{return typeof sessionStorage<"u"?sessionStorage.getItem(this.#s()):null}catch{return null}})();if(e&&this.#e.has(e))return e;let t=this.getAttribute("data-lens-default");return t&&this.#e.has(t)?t:[...this.#e.keys()][0]}#n(e,t){if(this.#e.has(e)){for(let[r,i]of this.#e){let n=r===e;i.toggleAttribute("hidden",!n),i.setAttribute("aria-hidden",n?"false":"true")}if(this.#t){let r=this.#t.querySelector(`input[value="${e}"]`);r&&(r.checked=!0)}if(this.#r=e,this.setAttribute("data-active-lens",e),t)try{sessionStorage.setItem(this.#s(),e)}catch{}this.dispatchEvent(new CustomEvent("content-lens:change",{detail:{lens:e},bubbles:!0}))}}get activeLens(){return this.#r}setLens(e){this.#n(e,!0)}};f("content-lens",a);export{a as ContentLens};
|
|
2
|
+
//# sourceMappingURL=content-lens.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var g=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let o of this.#t)o();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(o,e,t,s){o.addEventListener(e,t,s),this.#t.push(()=>o.removeEventListener(e,t,s))}setup(){}teardown(){}};var M=window.matchMedia("(prefers-reduced-motion: reduce)");var E=new Map;function w(f,o,e={}){let t=e.priority??10,s={impl:o,bundle:e.bundle,contract:e.contract,priority:t},n=E.get(f);if(customElements.get(f)){if(!n||n.priority>=t){n&&n.priority===t&&n.impl!==o&&console.warn(`[VB Bundle] Tag <${f}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${f}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=t){n.priority===t&&console.warn(`[VB Bundle] Tag <${f}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}E.set(f,s),customElements.define(f,o)}var b=class extends g{#t;setup(){if(this.#t=this.querySelector("ol"),!this.#t&&this.dataset.startHour==="auto"&&this.#n(),!this.#t)return!1;this.#e(),this.listen(this.#t,"click",e=>{let t=e.target.closest("calendar-event");t&&this.dispatchEvent(new CustomEvent("day-view:event-click",{bubbles:!0,detail:{time:t.querySelector("time[datetime]")?.getAttribute("datetime"),text:t.textContent.trim(),element:t,category:t.dataset.category,duration:t.dataset.duration}}))}),this.listen(this.#t,"keydown",e=>{let t=e.target.closest("calendar-event");if(!t)return;let s=[...this.#t.querySelectorAll("calendar-event")],n=s.indexOf(t);if(n===-1)return;let l;e.key==="ArrowDown"&&n<s.length-1&&(l=s[n+1]),e.key==="ArrowUp"&&n>0&&(l=s[n-1]),l&&(e.preventDefault(),l.setAttribute("tabindex","0"),t.setAttribute("tabindex","-1"),l.focus())});let o=this.#t.querySelector("calendar-event");o&&o.setAttribute("tabindex","0")}#n(){let o=[...this.querySelectorAll(":scope > calendar-event")];if(o.length===0)return;let e=new Map,t=[];if(o.forEach(r=>{let a=r.querySelector("time[datetime]");if(!a){t.push(r);return}let m=a.getAttribute("datetime").split(":"),c=parseInt(m[0],10),p=parseInt(m[1]||"0",10);if(isNaN(c)){t.push(r);return}p>=30&&!r.dataset.start&&(r.dataset.start="30"),e.has(c)||e.set(c,[]),e.get(c).push(r)}),t.length>0){let r=document.createElement("ul");r.className="all-day-events",t.forEach(a=>{let h=document.createElement("li");h.appendChild(a),r.appendChild(h)}),this.prepend(r)}let s=[...e.keys()].sort((r,a)=>r-a);if(s.length===0)return;let n=Math.max(0,s[0]-1),l=Math.min(23,s[s.length-1]+1),i=this.closest("[lang]")?.lang||navigator.language,d=new Intl.DateTimeFormat(i,{hour:"numeric"}),u=document.createElement("ol");for(let r=n;r<=l;r++){let a=document.createElement("li"),h=document.createElement("time"),m=String(r).padStart(2,"0");h.setAttribute("datetime",`${m}:00`),h.textContent=d.format(new Date(2026,0,1,r));let c=document.createElement("hour-view"),p=e.get(r)||[];p.length>1&&(c.dataset.overlap=""),p.forEach(y=>c.appendChild(y)),a.append(h,c),u.appendChild(a)}this.appendChild(u),this.#t=u}teardown(){this.querySelectorAll("calendar-event.dv-spanning").forEach(o=>{o.style.cssText="",o.classList.remove("dv-spanning")})}refresh(){this.teardown(),this.#e()}#e(){let o=this.#t,e=o.querySelectorAll("calendar-event[data-duration]");e.length!==0&&requestAnimationFrame(()=>{let t=o.getBoundingClientRect(),s=new Map,n=64;o.querySelectorAll(":scope > li").forEach(i=>{let d=i.querySelector(":scope > time");if(!d)return;let u=d.getAttribute("datetime");if(!u)return;let r=parseInt(u.split(":")[0],10),a=i.getBoundingClientRect();s.set(r,{top:a.top-t.top,height:a.height}),n=d.getBoundingClientRect().width});let l=[];e.forEach(i=>{let d=i.closest("ol > li");if(!d)return;let u=d.querySelector(":scope > time"),r=parseInt(u?.getAttribute("datetime")?.split(":")[0],10),a=parseInt(i.dataset.start||"0",10),h=i.dataset.duration,m=60,c=h.match(/(\d+)h/),p=h.match(/(\d+)m/);(c||p)&&(m=(c?parseInt(c[1],10)*60:0)+(p?parseInt(p[1],10):0));let y=s.get(r);if(!y)return;let v=a/60,S=y.top+y.height*v,x=y.height*(m/60);l.push({event:i,top:S,height:x})}),l.forEach(({event:i,top:d,height:u})=>{i.style.position="absolute",i.style.top=d+"px",i.style.height=u+"px",i.style.left=n+4+"px",i.style.right="4px",i.classList.add("dv-spanning")})})}};w("day-view",b);export{b as DayView};
|
|
2
|
+
//# sourceMappingURL=day-view.js.map
|
|
@@ -118,20 +118,35 @@ var m=`
|
|
|
118
118
|
|
|
119
119
|
a.persona-ref:hover { color: #6366f1; text-decoration: underline; }
|
|
120
120
|
|
|
121
|
-
/* \u2500\u2500 Title & summary \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
121
|
+
/* \u2500\u2500 Title & summary (slotted content) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
122
|
+
.empathy-map__title-wrap {
|
|
123
|
+
margin-block-end: var(--_space-2xs);
|
|
124
|
+
}
|
|
125
|
+
|
|
122
126
|
.empathy-map__title {
|
|
123
127
|
font-size: var(--_font-xl);
|
|
124
128
|
font-weight: 700;
|
|
125
129
|
color: var(--_text);
|
|
126
|
-
margin
|
|
130
|
+
margin: 0;
|
|
127
131
|
}
|
|
128
132
|
|
|
129
|
-
|
|
130
|
-
font-size: var(--_font-
|
|
131
|
-
|
|
133
|
+
::slotted([slot="title"]) {
|
|
134
|
+
font-size: var(--_font-xl) !important;
|
|
135
|
+
font-weight: 700 !important;
|
|
136
|
+
color: var(--_text) !important;
|
|
137
|
+
margin: 0 !important;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.empathy-map__summary-wrap {
|
|
132
141
|
max-width: 72ch;
|
|
133
142
|
}
|
|
134
143
|
|
|
144
|
+
::slotted([slot="summary"]) {
|
|
145
|
+
font-size: var(--_font-sm) !important;
|
|
146
|
+
color: var(--_muted) !important;
|
|
147
|
+
margin: 0 !important;
|
|
148
|
+
}
|
|
149
|
+
|
|
135
150
|
/* \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 */
|
|
136
151
|
.empathy-map__grid {
|
|
137
152
|
display: grid;
|
|
@@ -498,8 +513,8 @@ var m=`
|
|
|
498
513
|
.state-msg { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
|
|
499
514
|
.state-msg--error { color: #dc2626; }
|
|
500
515
|
code { font-family: Monaco, Menlo, monospace; font-size: 0.88em; }
|
|
501
|
-
`;var k=window.matchMedia("(prefers-reduced-motion: reduce)");var v=new Map;function y(
|
|
502
|
-
<article class="empathy-map${
|
|
516
|
+
`;var k=window.matchMedia("(prefers-reduced-motion: reduce)");var v=new Map;function y(i,t,e={}){let a=e.priority??10,n={impl:t,bundle:e.bundle,contract:e.contract,priority:a},r=v.get(i);if(customElements.get(i)){if(!r||r.priority>=a){r&&r.priority===a&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=a){r.priority===a&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}v.set(i,n),customElements.define(i,t)}function c(i){return String(i).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function p(i){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${i}</svg>`}var l={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"/>'},h={says:{label:"Says",icon:l.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:l.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:l.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:l.heart,color:"#ef4444"}},x={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 _=["says","thinks","does","feels"],f=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){_.includes(t)&&this.hasAttribute("editable")&&this._openEdit(t)}closeQuadrant(t){_.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 a=await e.json();if(a.persona&&this.setAttribute("persona",a.persona),a.personaId&&this.setAttribute("persona-id",a.personaId),a.title&&!this.querySelector('[slot="title"]')){let n=document.createElement("h2");n.slot="title",n.textContent=a.title,this.appendChild(n)}if(a.summary&&!this.querySelector('[slot="summary"]')){let n=document.createElement("p");n.slot="summary",n.textContent=a.summary,this.appendChild(n)}this.__quadrants=a.quadrants||null,this.__goals=a.goals||null,this.__painPoints=a.painPoints||null,this._render()}catch(e){this.shadowRoot.innerHTML=`<style>${m}</style><div class="state-msg state-msg--error">Could not load empathy map: ${c(e.message)}</div>`}}}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",a=this.hasAttribute("compact"),n=this.hasAttribute("editable"),r=!!this.querySelector('[slot="title"]')||this.#t.has("title"),s=!!this.querySelector('[slot="summary"]')||this.#t.has("summary"),d=this.__goals?.length||this.querySelector('[slot="goals"]'),o=this.__painPoints?.length||this.querySelector('[slot="pain-points"]');this.shadowRoot.innerHTML=`<style>${m}</style>
|
|
517
|
+
<article class="empathy-map${a?" empathy-map--compact":""}">
|
|
503
518
|
|
|
504
519
|
<header class="empathy-map__header">
|
|
505
520
|
<div class="empathy-map__header-top">
|
|
@@ -508,32 +523,34 @@ var m=`
|
|
|
508
523
|
</div>
|
|
509
524
|
${t?`
|
|
510
525
|
<div class="empathy-map__persona">
|
|
511
|
-
${
|
|
526
|
+
${e?`<a class="persona-ref" href="#${c(e)}">${p(l.user)} ${c(t)}</a>`:`<span class="persona-ref">${p(l.user)} ${c(t)}</span>`}
|
|
512
527
|
</div>`:""}
|
|
513
528
|
</div>
|
|
514
|
-
<
|
|
515
|
-
|
|
529
|
+
<div class="empathy-map__title-wrap">
|
|
530
|
+
<slot name="title"><h2 class="empathy-map__title">Empathy Map</h2></slot>
|
|
531
|
+
</div>
|
|
532
|
+
${s?'<div class="empathy-map__summary-wrap"><slot name="summary"></slot></div>':""}
|
|
516
533
|
</header>
|
|
517
534
|
|
|
518
535
|
<div class="empathy-map__grid">
|
|
519
|
-
${
|
|
536
|
+
${_.map(u=>this._renderQuadrant(u,n)).join("")}
|
|
520
537
|
</div>
|
|
521
538
|
|
|
522
|
-
${
|
|
539
|
+
${d||o?`
|
|
523
540
|
<footer class="empathy-map__footer">
|
|
524
541
|
${this._renderSummaryRow("goals",p(l.target),"Goals")}
|
|
525
542
|
${this._renderSummaryRow("pain-points",p(l.alertTriangle),"Pain Points")}
|
|
526
543
|
</footer>
|
|
527
544
|
`:""}
|
|
528
545
|
|
|
529
|
-
</article>`,
|
|
546
|
+
</article>`,n&&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 a=h[t],n=this.__quadrants?.[t],r=this._editingQuadrants.has(t),s=n&&n.length?t==="feels"?n.map(o=>this._renderEmotion(o)).join(""):n.map(o=>`<p>${c(o)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">Add ${a.label.toLowerCase()} items\u2026</p></slot>`,d=n?.length?n.join(`
|
|
530
547
|
`):"";return`
|
|
531
|
-
<section class="quadrant quadrant--${
|
|
548
|
+
<section class="quadrant quadrant--${t}"${r?" data-editing":""}>
|
|
532
549
|
<div class="quadrant__inner">
|
|
533
550
|
<div class="quadrant__header">
|
|
534
551
|
<div class="quadrant__icon" aria-hidden="true">${p(a.icon)}</div>
|
|
535
552
|
<span class="quadrant__label">${a.label}</span>
|
|
536
|
-
${
|
|
553
|
+
${e?`<button class="quadrant__edit-btn" data-quadrant="${t}"
|
|
537
554
|
aria-label="Edit ${a.label}" title="Edit ${a.label}">${p(l.pencil)}</button>`:""}
|
|
538
555
|
</div>
|
|
539
556
|
<div class="quadrant__faces">
|
|
@@ -542,26 +559,26 @@ var m=`
|
|
|
542
559
|
${s}
|
|
543
560
|
</div>
|
|
544
561
|
</div>
|
|
545
|
-
${
|
|
562
|
+
${e?`
|
|
546
563
|
<div class="quadrant__face quadrant__face--back"${r?"":" inert"}>
|
|
547
|
-
<textarea class="quadrant__editor" data-quadrant="${
|
|
564
|
+
<textarea class="quadrant__editor" data-quadrant="${t}"
|
|
548
565
|
placeholder="One item per line\u2026"
|
|
549
|
-
aria-label="Edit ${a.label} items">${
|
|
550
|
-
<button class="quadrant__done-btn" data-quadrant="${
|
|
566
|
+
aria-label="Edit ${a.label} items">${c(d)}</textarea>
|
|
567
|
+
<button class="quadrant__done-btn" data-quadrant="${t}"
|
|
551
568
|
aria-label="Done editing ${a.label}">${p(l.check)} Done</button>
|
|
552
569
|
</div>
|
|
553
570
|
`:""}
|
|
554
571
|
</div>
|
|
555
572
|
</div>
|
|
556
|
-
</section>`}_renderEmotion(
|
|
573
|
+
</section>`}_renderEmotion(t){let e=t.toLowerCase().trim(),a=x[e];return a?`<span class="emotion-tag" style="--ec:${a.color}"><span role="img" aria-label="${c(t)}">${a.emoji}</span> ${c(t)}</span>`:`<p>${c(t)}</p>`}_renderSummaryRow(t,e,a){let r=(t==="pain-points"?"painPoints":t)==="painPoints"?this.__painPoints:this.__goals,s=r?.length?r.map(d=>`<p>${c(d)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">No ${a.toLowerCase()} specified.</p></slot>`;return`
|
|
557
574
|
<div class="summary-row">
|
|
558
|
-
<span class="summary-row__icon" aria-hidden="true">${
|
|
575
|
+
<span class="summary-row__icon" aria-hidden="true">${e}</span>
|
|
559
576
|
<div class="summary-row__body">
|
|
560
577
|
<div class="summary-row__label">${a}</div>
|
|
561
578
|
<div class="summary-row__content">${s}</div>
|
|
562
579
|
</div>
|
|
563
|
-
</div>`}_bindEditListeners(){let
|
|
564
|
-
`);else{let
|
|
565
|
-
`)}}}r.focus()}}_closeEdit(
|
|
566
|
-
`).map(o=>o.trim()).filter(Boolean);this.__quadrants||(this.__quadrants={}),this.__quadrants[
|
|
580
|
+
</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",a=>{a.key==="Escape"&&(a.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 a=e.querySelector(".quadrant__face--front"),n=e.querySelector(".quadrant__face--back");a&&a.setAttribute("inert",""),n&&n.removeAttribute("inert");let r=e.querySelector(".quadrant__editor");if(r){let s=this.__quadrants?.[t];if(s?.length)r.value=s.join(`
|
|
581
|
+
`);else{let d=e.querySelector(`slot[name="${t}"]`);if(d){let o=d.assignedElements();if(o.length){let u=[];o.forEach(b=>{let g=b.querySelectorAll("li");g.length?g.forEach(q=>u.push(q.textContent.trim())):u.push(b.textContent.trim())}),r.value=u.filter(Boolean).join(`
|
|
582
|
+
`)}}}r.focus()}}_closeEdit(t){let e=this.shadowRoot.querySelector(`.quadrant--${t}`);if(!e)return;let a=e.querySelector(".quadrant__editor");if(a){let s=a.value.split(`
|
|
583
|
+
`).map(o=>o.trim()).filter(Boolean);this.__quadrants||(this.__quadrants={}),this.__quadrants[t]=s;let d=e.querySelector(".quadrant__content");if(d)if(s.length)d.innerHTML=t==="feels"?s.map(o=>this._renderEmotion(o)).join(""):s.map(o=>`<p>${c(o)}</p>`).join("");else{let o=h[t];d.innerHTML=`<p class="placeholder">Add ${o.label.toLowerCase()} items\u2026</p>`}}this._editingQuadrants.delete(t),e.removeAttribute("data-editing");let n=e.querySelector(".quadrant__face--front"),r=e.querySelector(".quadrant__face--back");n&&n.removeAttribute("inert"),r&&r.setAttribute("inert",""),this.dispatchEvent(new CustomEvent("empathy-map:update",{bubbles:!0,composed:!0,detail:{quadrant:t,items:this.__quadrants?.[t]||[]}}))}};y("empathy-map",f);export{f as EmpathyMap};
|
|
567
584
|
//# sourceMappingURL=empathy-map.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var E=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function b(c,t,n={}){let e=n.priority??10,s={impl:t,bundle:n.bundle,contract:n.contract,priority:e},i=p.get(c);if(customElements.get(c)){if(!i||i.priority>=e){i&&i.priority===e&&i.impl!==t&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${c}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=e){i.priority===e&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${i.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}p.set(c,s),customElements.define(c,t)}var f=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,n,e,s){t.addEventListener(n,e,s),this.#t.push(()=>t.removeEventListener(n,e,s))}setup(){}teardown(){}};var m=class extends f{static get observedAttributes(){return["src","title","compact"]}#t=null;#n=null;#e=null;#s=0;setup(){let t=this.querySelector(":scope > ol");if(!t)return!1;let n=this.#i(t);if(n.length===0)return!1;t.style.display="none",t.setAttribute("aria-hidden","true");let e=this.getAttribute("title");e&&(this.#n=document.createElement("h2"),this.#n.className="fd-title",this.#n.textContent=e,this.insertBefore(this.#n,t)),this.#t=document.createElement("div"),this.#t.className="fd-container",this.#t.setAttribute("role","img"),this.#t.setAttribute("aria-label",`Flow diagram${e?": "+e:""}`),this.#s=0,this.#o(n,this.#t);let s=document.createElement("div");s.className="fd-summary",s.textContent=`${this.#s} step${this.#s!==1?"s":""}`,this.#t.appendChild(s),this.insertBefore(this.#t,t),this.#e=document.createElement("div"),this.#e.className="fd-live",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",i=>{let o=i.target.closest(".fd-node-shape");if(!o)return;let a=o.closest(".fd-node")?.dataset.type||"action",d=o.textContent?.trim()||"";this.#l(`Selected: ${d}`),this.dispatchEvent(new CustomEvent("flow-diagram:select",{bubbles:!0,detail:{type:a,text:d}}))}),this.dispatchEvent(new CustomEvent("flow-diagram:ready",{bubbles:!0,detail:{nodeCount:this.#s}}))}teardown(){this.#n&&(this.#n.remove(),this.#n=null),this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null);let t=this.querySelector("ol");t&&(t.style.display="",t.removeAttribute("aria-hidden")),this.#s=0}attributeChangedCallback(t,n,e){n===e||!this.isConnected||(t==="src"?this._loadSrc(e):this.hasAttribute("data-upgraded")&&(this.teardown(),this.removeAttribute("data-upgraded"),this.setup()))}#i(t){let n=[];for(let e of t.querySelectorAll(":scope > li")){let s=this.#c(e);s&&n.push(s)}return n}#c(t){let n=t.dataset.type||"action",e=t.dataset.annotation||"",s=[],i=t.querySelectorAll(":scope > ol > li[data-branch]");if(i.length>0)for(let r of i){let a=r.dataset.branch||"",d=r.querySelector(":scope > ol"),l=d?this.#i(d):[];s.push({label:a,steps:l})}let o="";for(let r of t.childNodes)(r.nodeType===Node.TEXT_NODE||r.nodeType===Node.ELEMENT_NODE&&r.tagName!=="OL")&&(o+=r.textContent);return o=o.trim(),{type:n,text:o,annotation:e,branches:s}}#o(t,n){for(let e=0;e<t.length;e++){let s=t[e];e>0&&n.appendChild(this.#r());let i=this.#d(s);if(n.appendChild(i),s.branches.length>0){let o=document.createElement("div");o.className="fd-branches",o.setAttribute("data-branch-count",String(s.branches.length));let r=document.createElement("div");r.className="fd-split-line",r.setAttribute("aria-hidden","true"),o.appendChild(r);let a=document.createElement("div");a.className="fd-branch-columns";let d=(50/s.branches.length).toFixed(2);a.style.setProperty("--fd-inset",`${d}%`);for(let l of s.branches){let h=document.createElement("div");h.className="fd-branch",h.appendChild(this.#r());let u=document.createElement("span");u.className="fd-branch-label",u.textContent=l.label,u.setAttribute("data-branch",l.label.toLowerCase()),h.appendChild(u),this.#o(l.steps,h),a.appendChild(h)}o.appendChild(a),n.appendChild(o)}}}#d(t){this.#s++;let n=document.createElement("div");n.className="fd-node",n.dataset.type=t.type;let e=document.createElement("div");if(e.className="fd-node-shape",e.setAttribute("tabindex","0"),e.setAttribute("role","img"),e.setAttribute("aria-label",`${t.type}: ${t.text}`),e.textContent=t.text,n.appendChild(e),t.annotation){let s=document.createElement("div");s.className="fd-annotation",s.textContent=t.annotation,n.appendChild(s)}return n}#r(t){let n=document.createElement("div");n.className="fd-connector",n.setAttribute("aria-hidden","true");let e=document.createElement("div");if(e.className="fd-connector-line",n.appendChild(e),t){let i=document.createElement("span");i.className="fd-connector-label",i.textContent=t,n.appendChild(i)}let s=document.createElement("div");return s.className="fd-connector-arrow",n.appendChild(s),n}async _loadSrc(t){if(t)try{let n=await fetch(t);if(!n.ok)throw new Error(`HTTP ${n.status}`);let e=await n.json();for(;this.firstChild;)this.firstChild.remove();e.title&&this.setAttribute("title",e.title);let s=document.createElement("ol");this.#a(e.steps||[],s),this.appendChild(s),this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(n){console.warn(`[flow-diagram] Failed to load src="${t}":`,n)}}#a(t,n){for(let e of t){let s=document.createElement("li");if(e.type&&(s.dataset.type=e.type),e.annotation&&(s.dataset.annotation=e.annotation),s.textContent=e.text||"",e.branches&&e.branches.length>0){let i=document.createElement("ol");for(let o of e.branches){let r=document.createElement("li");r.dataset.branch=o.label||"";let a=document.createElement("ol");this.#a(o.steps||[],a),r.appendChild(a),i.appendChild(r)}s.appendChild(i)}n.appendChild(s)}}#l(t){this.#e&&(this.#e.textContent="",requestAnimationFrame(()=>{this.#e&&(this.#e.textContent=t)}))}};b("flow-diagram",m);export{m as FlowDiagram};
|
|
2
|
+
//# sourceMappingURL=flow-diagram.js.map
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
var D=window.matchMedia("(prefers-reduced-motion: reduce)");var w=new Map;function x(t,e,i={}){let o=i.priority??10,r={impl:e,bundle:i.bundle,contract:i.contract,priority:o},s=w.get(t);if(customElements.get(t)){if(!s||s.priority>=o){s&&s.priority===o&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=o){s.priority===o&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}w.set(t,r),customElements.define(t,e)}var p=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,o,r){e.addEventListener(i,o,r),this.#e.push(()=>e.removeEventListener(i,o,r))}setup(){}teardown(){}};var f=[{name:"Playfair Display",category:"serif",weights:"400;600;700;900",style:"elegant"},{name:"Merriweather",category:"serif",weights:"300;400;700;900",style:"readable"},{name:"Lora",category:"serif",weights:"400;500;600;700",style:"elegant"},{name:"Source Serif 4",category:"serif",weights:"300;400;600;700",style:"neutral"},{name:"Libre Baskerville",category:"serif",weights:"400;700",style:"classic"},{name:"Crimson Text",category:"serif",weights:"400;600;700",style:"classic"},{name:"DM Serif Display",category:"serif",weights:"400",style:"bold"},{name:"Cormorant Garamond",category:"serif",weights:"300;400;500;600;700",style:"elegant"},{name:"Inter",category:"sans-serif",weights:"300;400;500;600;700",style:"neutral"},{name:"Open Sans",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Roboto",category:"sans-serif",weights:"300;400;500;700",style:"neutral"},{name:"Lato",category:"sans-serif",weights:"300;400;700;900",style:"warm"},{name:"Nunito",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Work Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"DM Sans",category:"sans-serif",weights:"400;500;700",style:"geometric"},{name:"Plus Jakarta Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Space Grotesk",category:"sans-serif",weights:"300;400;500;600;700",style:"technical"},{name:"Manrope",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"IBM Plex Sans",category:"sans-serif",weights:"300;400;500;600",style:"technical"},{name:"Outfit",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Bebas Neue",category:"display",weights:"400",style:"bold"},{name:"Abril Fatface",category:"display",weights:"400",style:"elegant"},{name:"Oswald",category:"display",weights:"300;400;500;600;700",style:"condensed"},{name:"Sora",category:"display",weights:"300;400;500;600;700",style:"modern"},{name:"Fraunces",category:"display",weights:"300;400;500;600;700;900",style:"elegant"},{name:"JetBrains Mono",category:"monospace",weights:"400;500;600;700",style:"technical"},{name:"Fira Code",category:"monospace",weights:"300;400;500;600;700",style:"technical"},{name:"IBM Plex Mono",category:"monospace",weights:"400;500;600",style:"technical"},{name:"Source Code Pro",category:"monospace",weights:"300;400;500;600;700",style:"neutral"}],z=[["Playfair Display","Inter"],["DM Serif Display","DM Sans"],["Fraunces","Plus Jakarta Sans"],["Lora","Open Sans"],["Merriweather","Roboto"],["Oswald","Lato"],["Cormorant Garamond","Work Sans"],["Sora","Inter"],["Abril Fatface","Nunito"],["Source Serif 4","Source Code Pro"],["Space Grotesk","IBM Plex Sans"],["Outfit","Manrope"]];function g(t,e="400;700"){return`https://fonts.googleapis.com/css2?family=${t.replace(/\s+/g,"+")}:wght@${e}&display=swap`}async function k(t,e="400;700"){let i=`gf-${t.replace(/\s+/g,"-").toLowerCase()}`;if(document.getElementById(i)){await document.fonts.ready;return}let o=document.createElement("link");o.id=i,o.rel="stylesheet",o.href=g(t,e),document.head.appendChild(o),await document.fonts.ready}var n=(t,e,i,o="")=>`${o} contenteditable="plaintext-only" spellcheck="false" class="fp-editable" data-role="${i}"`,u={combined:{label:"Combined",render:(t,e)=>`
|
|
2
|
+
<p style="font-family:${t.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15"
|
|
3
|
+
${n(t.display,"p","heading")}>${e.heading}</p>
|
|
4
|
+
<h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
|
|
5
|
+
${n(t.heading,"h3","subheading")}>${e.subheading}</h3>
|
|
6
|
+
<p style="font-family:${t.body};font-size:var(--font-size-md,1rem);line-height:1.65;margin:0;color:var(--color-text-muted,#666)"
|
|
7
|
+
${n(t.body,"p","body")}>${e.body}</p>
|
|
8
|
+
<pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${n(t.code,"code","code")}>${e.code}</code></pre>`},article:{label:"Article",render:(t,e)=>`
|
|
9
|
+
<small style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600"
|
|
10
|
+
${n(t.body,"small","eyebrow")}>${e.eyebrow}</small>
|
|
11
|
+
<h2 style="font-family:${t.heading};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0;line-height:1.2"
|
|
12
|
+
${n(t.heading,"h2","heading")}>${e.heading}</h2>
|
|
13
|
+
<p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0"
|
|
14
|
+
${n(t.body,"p","byline")}>${e.byline}</p>
|
|
15
|
+
<p style="font-family:${t.body};line-height:1.7;margin:0" ${n(t.body,"p","body")}>${e.body}</p>
|
|
16
|
+
<h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
|
|
17
|
+
${n(t.heading,"h3","subheading")}>${e.subheading}</h3>
|
|
18
|
+
<p style="font-family:${t.body};line-height:1.7;margin:0" ${n(t.body,"p","body2")}>${e.body2}</p>
|
|
19
|
+
<blockquote style="font-family:${t.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)"
|
|
20
|
+
${n(t.display,"blockquote","quote")}>${e.quote}</blockquote>
|
|
21
|
+
<pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${n(t.code,"code","code")}>${e.code}</code></pre>`},"long-article":{label:"Long Article",render:(t,e)=>`
|
|
22
|
+
<small style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600">${e.eyebrow}</small>
|
|
23
|
+
<h1 style="font-family:${t.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15">${e.heading}</h1>
|
|
24
|
+
<p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">${e.byline}</p>
|
|
25
|
+
<p style="font-family:${t.body};font-size:var(--font-size-lg,1.125rem);line-height:1.6;margin:0;color:var(--color-text-muted,#666)">${e.lead}</p>
|
|
26
|
+
<h2 style="font-family:${t.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">${e.subheading}</h2>
|
|
27
|
+
<p style="font-family:${t.body};line-height:1.7;margin:0">${e.body}</p>
|
|
28
|
+
<p style="font-family:${t.body};line-height:1.7;margin:0">${e.body2}</p>
|
|
29
|
+
<blockquote style="font-family:${t.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)">${e.quote}</blockquote>
|
|
30
|
+
<h2 style="font-family:${t.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">Implementation Details</h2>
|
|
31
|
+
<p style="font-family:${t.body};line-height:1.7;margin:0">Design tokens form the atomic layer of any visual system. Colors, spacing, typography, and motion are expressed as named variables that cascade through every component. When a token changes, every surface that references it updates automatically \u2014 no find-and-replace, no missed instances.</p>
|
|
32
|
+
<pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code>${e.code}</code></pre>
|
|
33
|
+
<h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0">Key Takeaways</h3>
|
|
34
|
+
<ul style="font-family:${t.body};line-height:1.7;margin:0;padding-inline-start:1.5rem">
|
|
35
|
+
<li>Typography sets the emotional tone before a single word is read</li>
|
|
36
|
+
<li>Pair contrast with harmony \u2014 serif headings with sans-serif body</li>
|
|
37
|
+
<li>Test at real content lengths, not just sample sentences</li>
|
|
38
|
+
<li>Code fonts need clear distinction between similar glyphs</li>
|
|
39
|
+
</ul>`},card:{label:"Card UI",render:(t,e)=>`
|
|
40
|
+
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--size-m,1rem)">
|
|
41
|
+
<div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
|
|
42
|
+
<h4 style="font-family:${t.heading};font-weight:600;margin:0" ${n(t.heading,"h4","cardTitle")}>Premium Plan</h4>
|
|
43
|
+
<p style="font-family:${t.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">$49<small style="font-size:0.5em;font-weight:400">/mo</small></p>
|
|
44
|
+
<p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0" ${n(t.body,"p","cardBody")}>Everything you need to build faster.</p>
|
|
45
|
+
<code style="font-family:${t.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem" ${n(t.code,"code","cardCode")}>npm install acme</code>
|
|
46
|
+
</div>
|
|
47
|
+
<div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
|
|
48
|
+
<h4 style="font-family:${t.heading};font-weight:600;margin:0">Enterprise</h4>
|
|
49
|
+
<p style="font-family:${t.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">Custom</p>
|
|
50
|
+
<p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">Dedicated support and SLA guarantees.</p>
|
|
51
|
+
<code style="font-family:${t.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem">contact@acme.dev</code>
|
|
52
|
+
</div>
|
|
53
|
+
</div>`},hero:{label:"Hero",render:(t,e)=>`
|
|
54
|
+
<div style="text-align:center;padding:var(--size-xl,2rem) 0">
|
|
55
|
+
<p style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600;margin:0 0 var(--size-xs,0.5rem)"
|
|
56
|
+
${n(t.body,"p","eyebrow")}>${e.eyebrow}</p>
|
|
57
|
+
<h1 style="font-family:${t.display};font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:0;line-height:1.1"
|
|
58
|
+
${n(t.display,"h1","heading")}>${e.heading}</h1>
|
|
59
|
+
<p style="font-family:${t.body};font-size:var(--font-size-lg,1.125rem);color:var(--color-text-muted,#666);margin:var(--size-s,0.75rem) auto 0;max-width:40ch"
|
|
60
|
+
${n(t.body,"p","body")}>${e.body}</p>
|
|
61
|
+
</div>`}},b=class extends p{static observedAttributes=["heading-font","body-font","code-font","display-font","sample","show-export","show-suggestions","preview"];#e={heading:"",body:"",code:"",display:""};#t="combined";#i={heading:"The Art of Typography",subheading:"Building visual harmony through font pairing",body:"Good typography is invisible \u2014 it lets the content speak without distraction. The best font pairings create harmony between heading impact and body readability. Every typeface carries personality: serif fonts convey trust and tradition, while sans-serif fonts feel modern and clean.",body2:"Choosing the right pairing is about contrast and complement. A bold display font for headlines needs a quiet, readable body font to balance it. Monospace fonts ground technical content in precision. The interplay between these roles defines your brand voice.",code:`const theme = {
|
|
62
|
+
heading: "Playfair Display",
|
|
63
|
+
body: "Inter",
|
|
64
|
+
tokens: { size: 16, scale: 1.25 }
|
|
65
|
+
};`,eyebrow:"Design Systems",byline:"By Jamie Chen \xB7 April 14, 2026 \xB7 8 min read",lead:"How native CSS features and design tokens are replacing the complex tooling we thought we needed.",quote:'"Good typography is invisible \u2014 it lets the content breathe."'};setup(){this.#e.heading=this.getAttribute("heading-font")||"Playfair Display",this.#e.body=this.getAttribute("body-font")||"Inter",this.#e.code=this.getAttribute("code-font")||"JetBrains Mono",this.#e.display=this.getAttribute("display-font")||this.#e.heading,this.#t=this.getAttribute("preview")||"combined",this.#s(),this.#o()}attributeChangedCallback(e,i,o){i===o||!this.isConnected||(e==="heading-font"&&(this.#e.heading=o||"Playfair Display"),e==="body-font"&&(this.#e.body=o||"Inter"),e==="code-font"&&(this.#e.code=o||"JetBrains Mono"),e==="display-font"&&(this.#e.display=o||this.#e.heading),e==="preview"&&(this.#t=o||"combined"),this.#s(),this.#o())}async#o(){let e=Object.values(this.#e).filter(Boolean).map(i=>{let o=f.find(r=>r.name===i);return k(i,o?.weights||"400;700")});await Promise.all(e),this.#f()}#s(){let e=this.hasAttribute("show-export"),i=this.hasAttribute("show-suggestions"),o="var(--size-m, 1rem)",r="var(--size-s, 0.75rem)",s="var(--size-xs, 0.5rem)",a="var(--radius-m, 0.5rem)",c="var(--color-border, #ddd)",h="var(--color-surface, #fff)",$="var(--color-surface-raised, #f5f5f5)",m="var(--color-text-muted, #666)",S="var(--font-size-sm, 0.875rem)",l="var(--font-size-xs, 0.75rem)",E=`font:inherit;font-size:${S};padding:0.35rem 0.5rem;border:1px solid ${c};border-radius:4px;background:${h}`,C=[{key:"heading",label:"Heading"},{key:"body",label:"Body"},{key:"code",label:"Code"},{key:"display",label:"Display"}].map(d=>`
|
|
66
|
+
<label style="display:flex;flex-direction:column;gap:3px;flex:1;min-width:9rem;font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">
|
|
67
|
+
${d.label}
|
|
68
|
+
<select class="fp-select" data-role="${d.key}" style="${E}">
|
|
69
|
+
${this.#c(this.#e[d.key])}
|
|
70
|
+
</select>
|
|
71
|
+
</label>
|
|
72
|
+
`).join(""),M=Object.entries(u).map(([d,{label:y}])=>`<button type="button" class="fp-tab" data-mode="${d}"
|
|
73
|
+
style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.75rem;border-radius:999px;${d===this.#t?"background:var(--color-interactive,oklch(55% .2 260));color:white":`border:1px solid ${c}`}">${y}</button>`).join(""),A={heading:`'${this.#e.heading}', serif`,body:`'${this.#e.body}', sans-serif`,code:`'${this.#e.code}', monospace`,display:`'${this.#e.display}', serif`},T=u[this.#t]?.render(A,this.#i)||"",L=z.map(([d,y])=>`<button type="button" class="fp-suggestion" data-h="${d}" data-b="${y}"
|
|
74
|
+
style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.5rem;border:1px solid ${c};border-radius:4px;white-space:nowrap;text-align:left;line-height:1.3"
|
|
75
|
+
title="${d} + ${y}"><strong>${d}</strong><br><span style="color:${m}">${y}</span></button>`).join(""),q=this.#r(),P=`<details class="fp-code-details" style="border:1px solid ${c};border-radius:${a};overflow:hidden"${e?" open":""}>
|
|
76
|
+
<summary style="padding:${s} ${r};cursor:pointer;font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em;background:${$}">Code</summary>
|
|
77
|
+
<div style="padding:${r}">
|
|
78
|
+
<pre style="font-family:var(--font-mono,monospace);font-size:${l};margin:0;white-space:pre-wrap;word-break:break-all" class="fp-css-output">${q}</pre>
|
|
79
|
+
<div style="display:flex;gap:${s};margin-block-start:${r}">
|
|
80
|
+
<button type="button" class="fp-copy-css"
|
|
81
|
+
style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.65rem;border:1px solid ${c};border-radius:4px;background:${h}">Copy CSS</button>
|
|
82
|
+
<button type="button" class="fp-copy-import"
|
|
83
|
+
style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.65rem;border:1px solid ${c};border-radius:4px;background:${h}">Copy @import</button>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</details>`,v=`<div style="display:flex;flex-direction:column;gap:${o};flex:1;min-width:0">
|
|
87
|
+
<div style="display:flex;flex-wrap:wrap;gap:${s}">${C}</div>
|
|
88
|
+
<div style="display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center">
|
|
89
|
+
<span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em;margin-inline-end:${s}">Examples</span>
|
|
90
|
+
${M}
|
|
91
|
+
</div>
|
|
92
|
+
<div style="display:flex;flex-direction:column;gap:${s}">
|
|
93
|
+
<span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">Preview</span>
|
|
94
|
+
<div class="fp-preview" style="padding:var(--size-l,1.5rem);background:${$};border-radius:${a};border:1px solid ${c};display:flex;flex-direction:column;gap:${r};max-height:24rem;overflow-y:auto">
|
|
95
|
+
${T}
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
${P}
|
|
99
|
+
</div>`;i?this.innerHTML=`<div style="display:flex;gap:${o};flex-wrap:wrap">
|
|
100
|
+
${v}
|
|
101
|
+
<aside style="flex:0 0 11rem;display:flex;flex-direction:column;gap:${s}">
|
|
102
|
+
<span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">Pairings</span>
|
|
103
|
+
<div style="display:flex;flex-direction:column;gap:0.25rem">${L}</div>
|
|
104
|
+
</aside>
|
|
105
|
+
</div>`:this.innerHTML=v,this.#y()}#c(e){return["serif","sans-serif","display","monospace"].map(o=>{let s=f.filter(a=>a.category===o).map(a=>`<option value="${a.name}"${a.name===e?" selected":""}>${a.name}</option>`).join("");return`<optgroup label="${o}">${s}</optgroup>`}).join("")}#r(){let e=[],i={heading:"serif",body:"sans-serif",code:"monospace",display:"serif"};for(let[o,r]of Object.entries(i)){let s=this.#e[o];if(!s)continue;let a=f.find(c=>c.name===s);e.push(`--font-${o}: "${s}", ${a?.category||r};`)}return e.join(`
|
|
106
|
+
`)}#m(){let e=new Set,i=[];for(let o of Object.values(this.#e)){if(!o||e.has(o))continue;e.add(o);let r=f.find(s=>s.name===o);i.push(`@import url('${g(o,r?.weights||"400;700")}');`)}return i.join(`
|
|
107
|
+
`)}#y(){this.querySelectorAll(".fp-select").forEach(e=>{e.addEventListener("change",i=>{this.#e[i.target.dataset.role]=i.target.value,this.#o(),this.#n(),this.#a(),this.#d()})}),this.querySelectorAll(".fp-tab").forEach(e=>{e.addEventListener("click",()=>{this.#t=e.dataset.mode,this.#s(),this.#o()})}),this.querySelectorAll(".fp-suggestion").forEach(e=>{e.addEventListener("click",()=>{this.#e.heading=e.dataset.h,this.#e.body=e.dataset.b,this.#e.display=e.dataset.h,this.#s(),this.#o(),this.#d()})}),this.querySelectorAll(".fp-editable").forEach(e=>{e.addEventListener("blur",()=>{let i=e.dataset.role;i&&e.textContent.trim()&&(this.#i[i]=e.textContent.trim())})}),this.querySelector(".fp-copy-css")?.addEventListener("click",e=>{navigator.clipboard?.writeText(this.#r()),this.#l(e.target)}),this.querySelector(".fp-copy-import")?.addEventListener("click",e=>{navigator.clipboard?.writeText(this.#m()),this.#l(e.target)})}#n(){let e=this.querySelector(".fp-preview");if(!e)return;let i={heading:`'${this.#e.heading}', serif`,body:`'${this.#e.body}', sans-serif`,code:`'${this.#e.code}', monospace`,display:`'${this.#e.display}', serif`};e.innerHTML=u[this.#t]?.render(i,this.#i)||"",e.querySelectorAll(".fp-editable").forEach(o=>{o.addEventListener("blur",()=>{let r=o.dataset.role;r&&o.textContent.trim()&&(this.#i[r]=o.textContent.trim())})})}#f(){this.#n(),this.#a()}#a(){let e=this.querySelector(".fp-css-output");e&&(e.textContent=this.#r())}#l(e){let i=e.textContent;e.textContent="Copied!",setTimeout(()=>{e.textContent=i},1500)}#d(){this.dispatchEvent(new CustomEvent("font-pairer:change",{bubbles:!0,detail:{...this.#e}}))}};x("font-pairer",b);export{b as FontPairer};
|
|
108
|
+
//# sourceMappingURL=font-pairer.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var q=window.matchMedia("(prefers-reduced-motion: reduce)");var $=new Map;function k(d,t,i={}){let s=i.priority??10,r={impl:t,bundle:i.bundle,contract:i.contract,priority:s},e=$.get(d);if(customElements.get(d)){if(!e||e.priority>=s){e&&e.priority===s&&e.impl!==t&&console.warn(`[VB Bundle] Tag <${d}> already registered by "${e.bundle}" (priority ${e.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${d}> defined by "${e.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(e&&e.priority>=s){e.priority===s&&console.warn(`[VB Bundle] Tag <${d}> already registered by "${e.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}$.set(d,r),customElements.define(d,t)}var E=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,i,s,r){t.addEventListener(i,s,r),this.#t.push(()=>t.removeEventListener(i,s,r))}setup(){}teardown(){}};var w=864e5,v=w*7,C=w*30,T=w*91,x=w*365;function D(d){return typeof d=="number"?d:new Date(d).getTime()}function L(d){return d<=v*3?t=>t.toLocaleDateString(void 0,{month:"short",day:"numeric"}):d<=C*3?t=>t.toLocaleDateString(void 0,{month:"short",day:"numeric"}):d<=x?t=>t.toLocaleDateString(void 0,{month:"short",year:"2-digit"}):t=>t.toLocaleDateString(void 0,{year:"numeric"})}function I(d){return d<=v*3?"day":d<=C*3?"week":d<=x?"month":"quarter"}function N(d){return String(d).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}var A=class extends E{static get observedAttributes(){return["src","title","view","show-today","show-progress","show-dependencies","compact"]}#t=null;#s=null;#r=null;#i=[];#e=0;#a=0;#n=0;setup(){let t=this.querySelector(":scope > table");if(!t||(this.#i=this.#d(t),this.#i.length===0))return!1;this.#e=Math.min(...this.#i.map(i=>i.start)),this.#a=Math.max(...this.#i.map(i=>i.end)),this.#n=this.#a-this.#e,this.#n<=0&&(this.#n=w),this.#l(t),this.dispatchEvent(new CustomEvent("gantt-chart:ready",{bubbles:!0,detail:{taskCount:this.#i.length,dateRange:{start:new Date(this.#e).toISOString(),end:new Date(this.#a).toISOString()}}}))}teardown(){this.#r&&(this.#r.remove(),this.#r=null),this.#t&&(this.#t.remove(),this.#t=null),this.#s&&(this.#s.remove(),this.#s=null);let t=this.querySelector("table.gc-sr-only");t&&t.classList.remove("gc-sr-only"),this.#i=[]}attributeChangedCallback(t,i,s){i===s||!this.isConnected||(t==="src"?this._loadSrc(s):this.hasAttribute("data-upgraded")&&(this.teardown(),this.removeAttribute("data-upgraded"),this.setup()))}#d(t){let i=t.querySelectorAll("tbody tr"),s=[];for(let r=0;r<i.length;r++){let e=i[r],o=e.querySelectorAll("time[datetime]");if(o.length<2&&!e.hasAttribute("data-milestone"))continue;let l=o[0]?.getAttribute("datetime"),n=o.length>1?o[1].getAttribute("datetime"):l;if(!l)continue;let a=e.querySelector("progress"),u=a?a.value/(a.max||100):0,g=e.cells[0]?.textContent?.trim()||`Task ${r+1}`;s.push({id:e.dataset.taskId||`gc-task-${r}`,name:g,start:D(l),end:D(n),progress:u,group:e.dataset.group||null,depends:e.dataset.depends?e.dataset.depends.split(",").map(c=>c.trim()):[],status:e.dataset.status||null,assignee:e.dataset.assignee||null,milestone:e.hasAttribute("data-milestone"),color:e.dataset.color||null,storyIds:e.dataset.storyIds?e.dataset.storyIds.split(",").map(c=>c.trim()):[],itemIds:e.dataset.itemIds?e.dataset.itemIds.split(",").map(c=>c.trim()):[]})}return s}#l(t){let i=this.getAttribute("title"),s=this.hasAttribute("show-today"),r=this.hasAttribute("show-progress"),e=this.hasAttribute("show-dependencies");i&&(this.#r=document.createElement("h2"),this.#r.className="gc-title",this.#r.textContent=i,this.insertBefore(this.#r,t)),this.#t=document.createElement("div"),this.#t.className="gc-container",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label",`Gantt chart${i?": "+i:""}`);let o=this.#u();this.#t.appendChild(o);let l=document.createElement("div");l.className="gc-body";let n=document.createElement("div");n.className="gc-task-list";let a=document.createElement("div");a.className="gc-bars";let u=this.#h();a.appendChild(u);let g=this.#m();for(let[c,f]of g){if(g.size>1&&c){let m=document.createElement("div");m.className="gc-group-header";let h=document.createElement("span");h.className="gc-group-label",h.textContent=c,m.appendChild(h),n.appendChild(m);let p=document.createElement("div");p.className="gc-group-spacer",a.appendChild(p)}for(let m of f){let h=document.createElement("div");h.className="gc-task-row",h.setAttribute("data-task-id",m.id);let p=document.createElement("span");p.className="gc-task-name",p.textContent=m.name,h.appendChild(p);let y=document.createElement("span");y.className="gc-task-dates",y.textContent=`${new Date(m.start).toLocaleDateString()} to ${new Date(m.end).toLocaleDateString()}`,h.appendChild(y),n.appendChild(h);let b=document.createElement("div");b.className="gc-bar-row",m.milestone?b.appendChild(this.#f(m)):b.appendChild(this.#p(m,r)),a.appendChild(b)}}if(s){let c=this.#g();c&&a.appendChild(c)}e&&requestAnimationFrame(()=>{let c=this.#b(a);c&&a.appendChild(c)}),l.appendChild(n),l.appendChild(a),this.#t.appendChild(l),this.insertBefore(this.#t,t),t.classList.add("gc-sr-only"),this.#s=document.createElement("div"),this.#s.className="gc-sr-only",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",c=>{let f=c.target.closest(".gc-bar, .gc-milestone");if(!f)return;let m=f.dataset.taskId,h=this.#i.find(p=>p.id===m);h&&(this.#y(`Selected: ${h.name}`),this.dispatchEvent(new CustomEvent("gantt-chart:task-click",{bubbles:!0,detail:{task:h}})))}),this.listen(this.#t,"keydown",c=>{if(c.key==="Enter"||c.key===" "){let f=c.target.closest(".gc-bar, .gc-milestone");f&&(c.preventDefault(),f.click())}})}#u(){let t=document.createElement("div");t.className="gc-timeline-header";let i=document.createElement("div");i.className="gc-timeline-spacer",t.appendChild(i);let s=document.createElement("div");s.className="gc-timeline-dates";let r=this.#o();for(let{position:e,text:o}of r){let l=document.createElement("span");l.className="gc-date-label",l.style.left=`${e}%`,l.textContent=o,s.appendChild(l)}return t.appendChild(s),t}#o(){let t=this.getAttribute("view")||"auto",i=t==="auto"?I(this.#n):t,s=L(this.#n),r=[],e;switch(i){case"day":e=w;break;case"week":e=v;break;case"month":e=C;break;case"quarter":e=T;break;default:e=C}let o=new Date(this.#e);if(i==="week"){let a=o.getDay(),u=a===0?1:a===1?0:8-a;o.setDate(o.getDate()+u)}else if(i==="month")o.setDate(1),o.getTime()<this.#e&&o.setMonth(o.getMonth()+1);else if(i==="quarter"){let a=o.getMonth(),u=Math.ceil((a+1)/3)*3;o.setMonth(u),o.setDate(1)}let l=o.getTime();l>this.#e+e*.5&&r.push({position:0,text:s(new Date(this.#e))});let n=l;for(;n<=this.#a;){let a=(n-this.#e)/this.#n*100;if(a>=0&&a<=100&&r.push({position:a,text:s(new Date(n))}),i==="month"){let u=new Date(n);u.setMonth(u.getMonth()+1),n=u.getTime()}else if(i==="quarter"){let u=new Date(n);u.setMonth(u.getMonth()+3),n=u.getTime()}else n+=e}return r}#h(){let t=document.createElement("div");t.className="gc-grid-lines";let i=this.#o();for(let{position:s}of i){if(s<=0)continue;let r=document.createElement("div");r.className="gc-grid-line",r.style.left=`${s}%`,t.appendChild(r)}return t}#m(){let t=new Map;for(let i of this.#i){let s=i.group||"";t.has(s)||t.set(s,[]),t.get(s).push(i)}return t}#p(t,i){let s=(t.start-this.#e)/this.#n*100,r=(t.end-t.start)/this.#n*100,e=document.createElement("div");if(e.className="gc-bar",e.setAttribute("data-task-id",t.id),e.setAttribute("role","img"),e.setAttribute("tabindex","0"),e.setAttribute("aria-label",`${N(t.name)}: ${new Date(t.start).toLocaleDateString()} to ${new Date(t.end).toLocaleDateString()}`+(t.progress>0?`, ${Math.round(t.progress*100)}% complete`:"")),e.style.left=`${s}%`,e.style.width=`${Math.max(r,.5)}%`,t.status&&e.setAttribute("data-status",t.status),t.color&&e.style.setProperty("--gc-bar-color",t.color),i&&t.progress>0){let o=document.createElement("div");o.className="gc-bar-fill",o.style.width=`${Math.round(t.progress*100)}%`,e.appendChild(o)}if(r>8){let o=document.createElement("span");o.className="gc-bar-label",o.textContent=t.name,e.appendChild(o)}return e}#f(t){let i=(t.start-this.#e)/this.#n*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: ${N(t.name)}, ${new Date(t.start).toLocaleDateString()}`),s.style.left=`${i}%`,t.status&&s.setAttribute("data-status",t.status),t.color&&s.style.setProperty("--gc-bar-color",t.color),s}#g(){let t=Date.now();if(t<this.#e||t>this.#a)return null;let i=(t-this.#e)/this.#n*100,s=document.createElement("div");s.className="gc-today-line",s.style.left=`${i}%`;let r=document.createElement("span");return r.className="gc-today-label",r.textContent="Today",s.appendChild(r),s}#b(t){if(!this.#i.some(n=>n.depends.length>0))return null;let s="http://www.w3.org/2000/svg",r=document.createElementNS(s,"svg");r.setAttribute("class","gc-deps"),r.style.width="100%",r.style.height="100%";let e=document.createElementNS(s,"defs"),o=document.createElementNS(s,"marker");o.setAttribute("id","gc-arrowhead"),o.setAttribute("markerWidth","8"),o.setAttribute("markerHeight","6"),o.setAttribute("refX","8"),o.setAttribute("refY","3"),o.setAttribute("orient","auto");let l=document.createElementNS(s,"polygon");l.setAttribute("points","0 0, 8 3, 0 6"),l.setAttribute("fill","var(--color-text-muted, #666666)"),o.appendChild(l),e.appendChild(o),r.appendChild(e);for(let n of this.#i)for(let a of n.depends){let u=this.#i.find(M=>M.id===a);if(!u)continue;let g=(u.end-this.#e)/this.#n*100,c=(n.start-this.#e)/this.#n*100,f=this.#c(u.id,t),m=this.#c(n.id,t);if(f===-1||m===-1)continue;let h=36,p=f*h+h/2,y=m*h+h/2,b=document.createElementNS(s,"path"),S=g+(c-g)/2;b.setAttribute("d",`M ${g}% ${p} C ${S}% ${p}, ${S}% ${y}, ${c}% ${y}`),b.setAttribute("class","gc-dep-line"),r.appendChild(b)}return r}#c(t,i){let s=i.querySelectorAll(".gc-bar-row");for(let r=0;r<s.length;r++){let e=s[r].querySelector("[data-task-id]");if(e&&e.dataset.taskId===t)return r}return-1}async _loadSrc(t){if(t)try{let i=await fetch(t);if(!i.ok)throw new Error(`HTTP ${i.status}`);let s=await i.json();for(;this.firstChild;)this.firstChild.remove();let r=document.createElement("table"),e=document.createElement("thead"),o=document.createElement("tr");for(let n of["Task","Start","End","Progress"]){let a=document.createElement("th");a.textContent=n,o.appendChild(a)}e.appendChild(o),r.appendChild(e);let l=document.createElement("tbody");for(let n of s.tasks||[]){let a=document.createElement("tr");n.id&&(a.dataset.taskId=n.id),n.group&&(a.dataset.group=n.group),n.depends&&(a.dataset.depends=Array.isArray(n.depends)?n.depends.join(","):n.depends),n.status&&(a.dataset.status=n.status),n.assignee&&(a.dataset.assignee=n.assignee),n.milestone&&a.setAttribute("data-milestone",""),n.color&&(a.dataset.color=n.color),n.storyIds&&(a.dataset.storyIds=Array.isArray(n.storyIds)?n.storyIds.join(","):n.storyIds),n.itemIds&&(a.dataset.itemIds=Array.isArray(n.itemIds)?n.itemIds.join(","):n.itemIds);let u=document.createElement("td");u.textContent=n.name||"",a.appendChild(u);let g=document.createElement("td"),c=document.createElement("time");c.setAttribute("datetime",n.start),c.textContent=new Date(n.start).toLocaleDateString(void 0,{month:"short",day:"numeric"}),g.appendChild(c),a.appendChild(g);let f=document.createElement("td"),m=document.createElement("time");m.setAttribute("datetime",n.end||n.start),m.textContent=new Date(n.end||n.start).toLocaleDateString(void 0,{month:"short",day:"numeric"}),f.appendChild(m),a.appendChild(f);let h=document.createElement("td"),p=document.createElement("progress");p.value=n.progress||0,p.max=100,p.textContent=`${n.progress||0}%`,h.appendChild(p),a.appendChild(h),l.appendChild(a)}r.appendChild(l),this.appendChild(r),s.title&&this.setAttribute("title",s.title),this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(i){console.warn(`[gantt-chart] Failed to load src="${t}":`,i)}}#y(t){this.#s&&(this.#s.textContent="",requestAnimationFrame(()=>{this.#s&&(this.#s.textContent=t)}))}};k("gantt-chart",A);export{A as GanttChart};
|
|
2
|
+
//# sourceMappingURL=gantt-chart.js.map
|