@designbasekorea/ui-wc 0.5.5 → 0.5.6

package/dist/esm/components/db-gantt.js

@@ -1 +1,882 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["day","week"],a=["#86efac","#fde047","#93c5fd","#c4b5fd","#f9a8d4","#5eead4","#fdba74","#a5b4fc"],s=["일","월","화","수","목","금","토"],r=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function parseDate(e){const[t,a,s]=e.split("-").map(Number);return new Date(t,a-1,s)}function toDateKey(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`}function addDays(e,t){const a=new Date(e);return a.setDate(a.getDate()+t),a}function daysBetween(e,t){const a=Date.UTC(e.getFullYear(),e.getMonth(),e.getDate()),s=Date.UTC(t.getFullYear(),t.getMonth(),t.getDate());return Math.round((s-a)/864e5)}function clampDate(e,t,a){return e<t?new Date(t):e>a?new Date(a):e}class DbGantt extends HTMLElement{constructor(){super(...arguments),this.collapsedGroups=new Set,this.dragState=null,this.reorderState=null,this.reorderDropIndex=null,this.suppressRender=!1,this.didDrag=!1,this.handlePointerMove=e=>{if(this.reorderState&&e.pointerId===this.reorderState.pointerId)return void this.updateReorderDropTarget(e.clientY);if(!this.dragState||e.pointerId!==this.dragState.pointerId)return;const a=this.getOption("scale",t,"day"),s=this.getNumber("cell-width","week"===a?72:44),{start:r,end:n}=this.getViewRange(),i=Math.round((e.clientX-this.dragState.startX)/s);0!==i&&(this.didDrag=!0);let d=new Date(this.dragState.originalStart),o=new Date(this.dragState.originalEnd);if("move"===this.dragState.mode?(d=addDays(this.dragState.originalStart,i),o=addDays(this.dragState.originalEnd,i)):"resize-start"===this.dragState.mode?(d=addDays(this.dragState.originalStart,i),d>o&&(d=new Date(o))):(o=addDays(this.dragState.originalEnd,i),o<d&&(o=new Date(d))),d=clampDate(d,r,n),o=clampDate(o,r,n),d>o)return;const l=this.items.find(e=>e.id===this.dragState.itemId);l&&this.applyBarGeometry(this.dragState.barEl,{...l,startDate:toDateKey(d),endDate:toDateKey(o)},r,s)},this.handlePointerUp=e=>{if(this.reorderState&&e.pointerId===this.reorderState.pointerId)return void this.finishReorderDrag(e);if(!this.dragState||e.pointerId!==this.dragState.pointerId)return;const a=this.getOption("scale",t,"day"),s=this.getNumber("cell-width","week"===a?72:44),{start:r,end:n}=this.getViewRange(),i=Math.round((e.clientX-this.dragState.startX)/s);let d=new Date(this.dragState.originalStart),o=new Date(this.dragState.originalEnd);const l=this.dragState.mode,c=this.dragState.itemId;"move"===l?(d=addDays(this.dragState.originalStart,i),o=addDays(this.dragState.originalEnd,i)):"resize-start"===l?(d=addDays(this.dragState.originalStart,i),d>o&&(d=new Date(o))):(o=addDays(this.dragState.originalEnd,i),o<d&&(o=new Date(d))),d=clampDate(d,r,n),o=clampDate(o,r,n),this.dragState.barEl.releasePointerCapture(e.pointerId),this.dragState.barEl.classList.remove("designbase-wc-gantt__bar--dragging"),this.dragState=null;const g=this.items.find(e=>e.id===c);if(!g)return;const p=toDateKey(d),h=toDateKey(o);p===g.startDate&&h===g.endDate||(this.updateItem(c,{startDate:p,endDate:h},"move"===l?"move":"resize"),this.render())}}static get observedAttributes(){return["groups","rows","items","start-date","end-date","today","scale","cell-width","show-weekends","show-today","sidebar-label","full-width","disabled","draggable","reorderable","locale"]}get groups(){return this.parseJson("groups",[])}set groups(e){this.setAttribute("groups","string"==typeof e?e:JSON.stringify(e))}get rows(){return this.parseJson("rows",[])}set rows(e){this.setAttribute("rows","string"==typeof e?e:JSON.stringify(e))}get items(){return this.parseJson("items",[])}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.setAttribute("role","region"),this.setAttribute("aria-label","프로젝트 타임라인"),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.render()}disconnectedCallback(){this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp)}attributeChangedCallback(){!this.isConnected||this.suppressRender||this.dragState||this.reorderState||this.render()}parseJson(e,t){try{return JSON.parse(this.getAttribute(e)||"null")??t}catch{return t}}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const a=this.getAttribute(e);return""===a||"true"===a}getNumber(e,t){const a=Number(this.getAttribute(e));return Number.isFinite(a)&&a>0?a:t}getOption(e,t,a){const s=this.getAttribute(e);return s&&t.includes(s)?s:a}getLocale(){return this.getAttribute("locale")||"ko-KR"}getWeekdays(){return this.getLocale().startsWith("ko")?s:r}getViewRange(){const e=this.getAttribute("start-date"),t=this.getAttribute("end-date");if(e&&t)return{start:parseDate(e),end:parseDate(t)};const a=this.items.flatMap(e=>[parseDate(e.startDate),parseDate(e.endDate)]);if(0===a.length){const e=new Date,t=new Date(e.getFullYear(),e.getMonth(),1);return{start:t,end:addDays(t,29)}}const s=new Date(Math.min(...a.map(e=>e.getTime()))),r=new Date(Math.max(...a.map(e=>e.getTime())));return{start:addDays(s,-2),end:addDays(r,2)}}getTodayDate(){const e=this.getAttribute("today");return e?parseDate(e):new Date}getDateColumns(e,t){const a=daysBetween(e,t)+1;return Array.from({length:a},(t,a)=>addDays(e,a))}getVisibleRows(){const e=this.groups,t=this.rows;if(0===e.length)return t.map(e=>({type:"row",row:e}));const a=[];for(const s of e)a.push({type:"group",group:s}),this.collapsedGroups.has(s.id)||t.filter(e=>e.groupId===s.id).forEach(e=>a.push({type:"row",row:e}));return t.filter(t=>!t.groupId||!e.some(e=>e.id===t.groupId)).forEach(e=>a.push({type:"row",row:e})),a}getMonthSegments(e){const t=[];let a="",s=0;for(const r of e){const e=`${r.getFullYear()}-${r.getMonth()}`;e!==a?(s>0&&t.push({label:a,span:s}),a=e,s=1):s+=1}return s>0&&t.push({label:a,span:s}),t.map(e=>{const[t,a]=e.label.split("-").map(Number);return{label:new Date(t,a,1).toLocaleDateString(this.getLocale(),{year:"numeric",month:"long"}),span:e.span}})}getInitials(e){return e.initials?e.initials:e.name.split(/\s+/).map(e=>e[0]).join("").slice(0,2).toUpperCase()}updateItem(e,t,a){const s=this.items.map(a=>a.id===e?{...a,...t}:a);this.emitItemsChange(s,a,e)}emitItemsChange(e,t,a){this.suppressRender=!0,this.items=e,this.suppressRender=!1;const s=e.find(e=>e.id===a);this.dispatchEvent(new CustomEvent("db-item-change",{detail:{item:s,items:e,action:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{groups:this.groups,rows:this.rows,items:e},bubbles:!0,composed:!0}))}applyBarGeometry(e,t,a,s){const r=parseDate(t.startDate),n=parseDate(t.endDate),i=daysBetween(a,r),d=daysBetween(r,n)+1;e.style.left=i*s+2+"px",e.style.width=`${Math.max(d*s-4,s-4)}px`}startBarDrag(e,t,a,s){!this.getBool("draggable",!0)||this.getBool("disabled")||t.disabled||(e.preventDefault(),e.stopPropagation(),this.didDrag=!1,s.setPointerCapture(e.pointerId),s.classList.add("designbase-wc-gantt__bar--dragging"),this.dragState={itemId:t.id,mode:a,pointerId:e.pointerId,startX:e.clientX,originalStart:parseDate(t.startDate),originalEnd:parseDate(t.endDate),barEl:s})}canReorder(){return this.getBool("reorderable",!0)&&!this.getBool("disabled")}createDragHandle(t,a,s){const r=document.createElement("span");return r.className="designbase-wc-gantt__drag-handle",r.setAttribute("role","button"),r.setAttribute("aria-label","group"===t?"그룹 순서 변경":"행 순서 변경"),r.append(e("grip-vertical",12)),this.canReorder()?(r.addEventListener("pointerdown",e=>{e.preventDefault(),e.stopPropagation(),this.startReorderDrag(e,t,a,s,r)}),r):r}getGroupIndex(e){return this.groups.findIndex(t=>t.id===e)}getRowScope(e){return this.rows.filter(t=>(t.groupId||"")===(e||""))}getRowIndexInScope(e,t){return this.getRowScope(t).findIndex(t=>t.id===e)}getReorderTargets(e,t){return Array.from(this.querySelectorAll("group"===e?".designbase-wc-gantt__label-cell--group":`.designbase-wc-gantt__label-cell--row[data-group-id="${t||""}"]`))}startReorderDrag(e,t,a,s,r){const n="group"===t?this.getGroupIndex(a):this.getRowIndexInScope(a,s);n<0||(r.setPointerCapture(e.pointerId),this.reorderState={kind:t,id:a,groupId:s,pointerId:e.pointerId,startY:e.clientY,fromIndex:n,captureEl:r},this.classList.add("designbase-wc-gantt--reordering"),this.updateReorderDropTarget(e.clientY))}updateReorderDropTarget(e){if(!this.reorderState)return;const t=this.getReorderTargets(this.reorderState.kind,this.reorderState.groupId);let a=null;t.forEach((t,s)=>{const r=t.getBoundingClientRect(),n=r.top+r.height/2,i=e>=r.top&&e<=r.bottom,d=e>n;t.classList.toggle("designbase-wc-gantt__label-cell--drag-over",i),t.classList.toggle("designbase-wc-gantt__label-cell--drag-over-before",i&&!d),t.classList.toggle("designbase-wc-gantt__label-cell--drag-over-after",i&&d),i&&(a=d?s+1:s)}),this.reorderDropIndex=a}clearReorderIndicators(){this.querySelectorAll(".designbase-wc-gantt__label-cell--drag-over").forEach(e=>{e.classList.remove("designbase-wc-gantt__label-cell--drag-over","designbase-wc-gantt__label-cell--drag-over-before","designbase-wc-gantt__label-cell--drag-over-after")})}finishReorderDrag(e){if(!this.reorderState)return;const{kind:t,id:a,groupId:s,fromIndex:r,captureEl:n}=this.reorderState;try{n.releasePointerCapture(this.reorderState.pointerId)}catch{}const i=this.reorderDropIndex;if(this.reorderState=null,this.reorderDropIndex=null,this.classList.remove("designbase-wc-gantt--reordering"),this.clearReorderIndicators(),null===i)return;const d=i>r?i-1:i;d<0||d===r||("group"===t?this.reorderGroups(r,d,a):this.reorderRows(r,d,a,s))}emitStructureChange(e,t,a,s){this.suppressRender=!0,this.groups=e,this.rows=t,this.suppressRender=!1,this.dispatchEvent(new CustomEvent(s,{detail:{...a,groups:e,rows:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{groups:e,rows:t,items:this.items},bubbles:!0,composed:!0})),this.render()}reorderGroups(e,t,a){const s=[...this.groups],[r]=s.splice(e,1);r&&(s.splice(t,0,r),this.emitStructureChange(s,this.rows,{groupId:a,fromIndex:e,toIndex:t},"db-group-reorder"))}reorderRows(e,t,a,s){const r=this.getRowScope(s),n=[...r],[i]=n.splice(e,1);if(!i)return;n.splice(t,0,i);const d=new Set(r.map(e=>e.id)),o=[];let l=!1;for(const e of this.rows)d.has(e.id)?l||(o.push(...n),l=!0):o.push(e);l||o.push(...n),this.emitStructureChange(this.groups,o,{rowId:a,groupId:s,fromIndex:e,toIndex:t},"db-row-reorder")}createGroupBadge(e){const t=document.createElement("db-badge");return t.className="designbase-wc-gantt__group-badge",t.setAttribute("badge-style","dot"),t.setAttribute("size","s"),t.setAttribute("variant","primary"),t.setAttribute("aria-hidden","true"),e&&t.style.setProperty("--db-gantt-badge-color",e),t}createGroupChevron(t){const a=document.createElement("span");return a.className=["designbase-wc-gantt__group-chevron",t?"designbase-wc-gantt__group-chevron--collapsed":""].filter(Boolean).join(" "),a.append(e("chevron-down",12)),a}createAssignee(e){const t=document.createElement("span");if(t.className="designbase-wc-gantt__assignee",t.title=e.name,e.avatar){const a=document.createElement("img");a.src=e.avatar,a.alt=e.name,t.appendChild(a)}else t.textContent=this.getInitials(e);return t}createStatusIcon(e){const t=document.createElement("span");return t.className=`designbase-wc-gantt__status designbase-wc-gantt__status--${e}`,t.setAttribute("aria-hidden","true"),t.textContent="completed"===e?"✓":"!",t}deriveSummaryColor(e,t){if(0===e.length)return t||a[0];const s=e.filter(e=>e.color);if(0===s.length)return t||a[0];return s.reduce((e,t)=>{const a=daysBetween(parseDate(e.startDate),parseDate(e.endDate));return daysBetween(parseDate(t.startDate),parseDate(t.endDate))>a?t:e}).color||t||a[0]}getGroupSummary(e,t){const a=this.rows.filter(t=>t.groupId===e),s=this.items.filter(e=>a.some(t=>t.id===e.rowId));if(0===s.length)return null;const r=s.map(e=>parseDate(e.startDate).getTime()),n=s.map(e=>parseDate(e.endDate).getTime()),i=s.map(e=>e.progress).filter(e=>"number"==typeof e);return{startDate:toDateKey(new Date(Math.min(...r))),endDate:toDateKey(new Date(Math.max(...n))),color:this.deriveSummaryColor(s,t),progress:i.length>0?i.reduce((e,t)=>e+t,0)/i.length:0,count:s.length}}applyBarTone(e,t){const a=function deriveBarTone(e){return{base:`color-mix(in srgb, ${e} 42%, white)`,progress:`color-mix(in srgb, ${e} 58%, white)`}}(t);e.style.setProperty("--db-gantt-bar-color",t),e.style.setProperty("--db-gantt-bar-bg",a.base),e.style.setProperty("--db-gantt-bar-progress-bg",a.progress)}createGroupSummaryBar(e,t,a,s){const r=clampDate(parseDate(e.startDate),t,a),n=clampDate(parseDate(e.endDate),t,a);if(n<t||r>a)return null;const i=daysBetween(t,r),d=daysBetween(r,n)+1,o=Math.min(100,Math.max(0,e.progress)),l=document.createElement("div");if(l.className="designbase-wc-gantt__group-summary",l.setAttribute("aria-hidden","true"),l.title=`${e.count}개 태스크`,this.applyBarTone(l,e.color),l.style.left=i*s+2+"px",l.style.width=`${Math.max(d*s-4,s-4)}px`,o>0){const e=document.createElement("span");e.className="designbase-wc-gantt__group-summary-progress",e.style.width=`${o}%`,l.appendChild(e)}return l}createBar(e,t,s,r){const n=e.color||a[r%a.length],i=document.createElement("div");i.className="designbase-wc-gantt__bar",i.setAttribute("role","button"),i.setAttribute("tabindex",e.disabled?"-1":"0"),i.setAttribute("aria-label",`${e.title}, ${e.startDate} – ${e.endDate}`),this.applyBarTone(i,n),e.disabled&&i.classList.add("designbase-wc-gantt__bar--disabled"),this.applyBarGeometry(i,e,t,s);const d="number"==typeof e.progress?Math.min(100,Math.max(0,e.progress)):0;if(d>0){const e=document.createElement("span");e.className="designbase-wc-gantt__bar-progress",e.style.width=`${d}%`,i.appendChild(e)}const o=document.createElement("div");o.className="designbase-wc-gantt__bar-body","delayed"!==e.status&&"at-risk"!==e.status||o.appendChild(this.createStatusIcon(e.status));const l=document.createElement("span");l.className="designbase-wc-gantt__bar-label",l.textContent=e.title,o.appendChild(l),e.assignee&&o.appendChild(this.createAssignee(e.assignee));const c=document.createElement("span");c.className="designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--start",c.setAttribute("aria-hidden","true");const g=document.createElement("span");return g.className="designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--end",g.setAttribute("aria-hidden","true"),i.append(c,o,g),e.disabled||!this.getBool("draggable",!0)||this.getBool("disabled")||(c.addEventListener("pointerdown",t=>this.startBarDrag(t,e,"resize-start",i)),g.addEventListener("pointerdown",t=>this.startBarDrag(t,e,"resize-end",i)),o.addEventListener("pointerdown",t=>{t.target.closest(".designbase-wc-gantt__bar-handle")||this.startBarDrag(t,e,"move",i)})),i.addEventListener("click",t=>{this.dragState||this.didDrag?this.didDrag=!1:(t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:e},bubbles:!0,composed:!0})))}),i}toggleGroup(e){this.collapsedGroups.has(e)?this.collapsedGroups.delete(e):this.collapsedGroups.add(e),this.dispatchEvent(new CustomEvent("db-group-toggle",{detail:{groupId:e,collapsed:this.collapsedGroups.has(e)},bubbles:!0,composed:!0})),this.render()}render(){const e=this.items,s=this.getOption("scale",t,"day"),r=this.getNumber("cell-width","week"===s?72:44),n=this.getBool("show-weekends",!0),i=this.getBool("show-today",!0),d=this.getAttribute("sidebar-label")||"할 일",o=this.getBool("disabled"),l=this.getBool("full-width",!0),c=this.getWeekdays(),{start:g,end:p}=this.getViewRange(),h=this.getDateColumns(g,p),u=toDateKey(this.getTodayDate()),m=h.findIndex(e=>toDateKey(e)===u),b=this.getVisibleRows(),w=h.length*r,D=document.createElement("div");D.className=["designbase-wc-gantt",l?"designbase-wc-gantt--full-width":"",o?"designbase-wc-gantt--disabled":"",this.getBool("draggable",!0)?"designbase-wc-gantt--draggable":""].filter(Boolean).join(" ");const y=document.createElement("div");y.className="designbase-wc-gantt__viewport";const _=document.createElement("div");_.className="designbase-wc-gantt__grid",_.style.setProperty("--db-gantt-chart-width",`${w}px`),_.style.setProperty("--db-gantt-cell-width",`${r}px`);const f=document.createElement("div");f.className="designbase-wc-gantt__corner",f.textContent=d,_.appendChild(f);const v=document.createElement("div");v.className="designbase-wc-gantt__date-header";const E=document.createElement("div");E.className="designbase-wc-gantt__month-row";for(const e of this.getMonthSegments(h)){const t=document.createElement("div");t.className="designbase-wc-gantt__month-cell",t.style.width=e.span*r+"px",t.textContent=e.label,E.appendChild(t)}v.appendChild(E);const S=document.createElement("div");S.className="designbase-wc-gantt__day-row";for(const e of h){const t=toDateKey(e)===u,a=0===e.getDay()||6===e.getDay(),s=document.createElement("div");s.className=["designbase-wc-gantt__day-cell",t&&i?"designbase-wc-gantt__day-cell--today":"",a&&n?"designbase-wc-gantt__day-cell--weekend":""].filter(Boolean).join(" "),s.style.width=`${r}px`;const d=document.createElement("span");d.className="designbase-wc-gantt__day-num",d.textContent=String(e.getDate());const o=document.createElement("span");o.className="designbase-wc-gantt__day-name",o.textContent=c[e.getDay()],s.append(d,o),S.appendChild(s)}v.appendChild(S),_.appendChild(v);const C=new Map;e.forEach((e,t)=>{const s=C.get(e.rowId)||[];s.push({...e,color:e.color||a[t%a.length]}),C.set(e.rowId,s)});let I=0;for(const e of b){if("group"===e.type){const{group:t}=e,a=this.collapsedGroups.has(t.id),s=document.createElement("button");s.type="button",s.className="designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--group",s.setAttribute("aria-expanded",String(!a)),s.dataset.groupId=t.id;const i=document.createElement("span");i.className="designbase-wc-gantt__group-title",i.textContent=t.title,s.append(this.createDragHandle("group",t.id),this.createGroupChevron(a),this.createGroupBadge(t.color),i),s.addEventListener("click",e=>{e.target.closest(".designbase-wc-gantt__drag-handle")||this.toggleGroup(t.id)}),_.appendChild(s);const d=document.createElement("div");if(d.className="designbase-wc-gantt__track-cell designbase-wc-gantt__track-cell--group",a){const e=this.getGroupSummary(t.id,t.color);if(e){const t=document.createElement("div");t.className="designbase-wc-gantt__grid-bg",h.forEach(e=>{const a=document.createElement("div"),s=0===e.getDay()||6===e.getDay();a.className=["designbase-wc-gantt__grid-cell",s&&n?"designbase-wc-gantt__grid-cell--weekend":""].filter(Boolean).join(" "),a.style.width=`${r}px`,t.appendChild(a)}),d.appendChild(t);const a=document.createElement("div");a.className="designbase-wc-gantt__group-summary-wrap";const s=this.createGroupSummaryBar(e,g,p,r);s&&a.appendChild(s),d.appendChild(a)}}_.appendChild(d);continue}const{row:t}=e,a=document.createElement("button");a.type="button",a.className="designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--row",a.dataset.groupId=t.groupId||"",a.dataset.rowId=t.id;const s=document.createElement("span");s.className="designbase-wc-gantt__row-title",s.textContent=t.label,a.append(this.createDragHandle("row",t.id,t.groupId),s),a.addEventListener("click",e=>{e.target.closest(".designbase-wc-gantt__drag-handle")||this.dispatchEvent(new CustomEvent("db-row-click",{detail:{row:t},bubbles:!0,composed:!0}))}),_.appendChild(a);const i=document.createElement("div");i.className="designbase-wc-gantt__track-cell";const d=document.createElement("div");d.className="designbase-wc-gantt__grid-bg",h.forEach(e=>{const t=document.createElement("div"),a=0===e.getDay()||6===e.getDay();t.className=["designbase-wc-gantt__grid-cell",a&&n?"designbase-wc-gantt__grid-cell--weekend":""].filter(Boolean).join(" "),t.style.width=`${r}px`,d.appendChild(t)}),i.appendChild(d);const o=document.createElement("div");o.className="designbase-wc-gantt__bars",(C.get(t.id)||[]).forEach(e=>{const t=clampDate(parseDate(e.startDate),g,p),a=clampDate(parseDate(e.endDate),g,p);a<g||t>p||o.appendChild(this.createBar({...e,startDate:toDateKey(t),endDate:toDateKey(a)},g,r,I++))}),i.appendChild(o),_.appendChild(i)}if(y.appendChild(_),i&&m>=0){const e=document.createElement("div");e.className="designbase-wc-gantt__today-line",e.style.left=`calc(var(--db-gantt-label-width) + ${m*r+r/2}px)`,_.appendChild(e)}D.appendChild(y),this.replaceChildren(D)}}customElements.get("db-gantt")||customElements.define("db-gantt",DbGantt);export{DbGantt};
+import { createDbIcon } from './db-icons.js';
+
+const SCALES = ['day', 'week'];
+const BAR_COLORS = ['#86efac', '#fde047', '#93c5fd', '#c4b5fd', '#f9a8d4', '#5eead4', '#fdba74', '#a5b4fc'];
+const WEEKDAY_KO = ['일', '월', '화', '수', '목', '금', '토'];
+const WEEKDAY_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+function parseDate(value) {
+    const [year, month, day] = value.split('-').map(Number);
+    return new Date(year, month - 1, day);
+}
+function toDateKey(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+function addDays(date, days) {
+    const next = new Date(date);
+    next.setDate(next.getDate() + days);
+    return next;
+}
+function daysBetween(start, end) {
+    const startUtc = Date.UTC(start.getFullYear(), start.getMonth(), start.getDate());
+    const endUtc = Date.UTC(end.getFullYear(), end.getMonth(), end.getDate());
+    return Math.round((endUtc - startUtc) / (1000 * 60 * 60 * 24));
+}
+function clampDate(date, min, max) {
+    if (date < min)
+        return new Date(min);
+    if (date > max)
+        return new Date(max);
+    return date;
+}
+function deriveBarTone(color) {
+    return {
+        /** 바 전체 배경 — 숫자를 올리면 더 진해짐 */
+        base: `color-mix(in srgb, ${color} 42%, white)`,
+        /** 진행 구간 — base보다 살짝만 진하게 (black 대신 white 믹스로 연하게) */
+        progress: `color-mix(in srgb, ${color} 58%, white)`,
+    };
+}
+class DbGantt extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.collapsedGroups = new Set();
+        this.dragState = null;
+        this.reorderState = null;
+        this.reorderDropIndex = null;
+        this.suppressRender = false;
+        this.didDrag = false;
+        this.handlePointerMove = (event) => {
+            if (this.reorderState && event.pointerId === this.reorderState.pointerId) {
+                this.updateReorderDropTarget(event.clientY);
+                return;
+            }
+            if (!this.dragState || event.pointerId !== this.dragState.pointerId)
+                return;
+            const scale = this.getOption('scale', SCALES, 'day');
+            const cellWidth = this.getNumber('cell-width', scale === 'week' ? 72 : 44);
+            const { start: viewStart, end: viewEnd } = this.getViewRange();
+            const dayDelta = Math.round((event.clientX - this.dragState.startX) / cellWidth);
+            if (dayDelta !== 0)
+                this.didDrag = true;
+            let nextStart = new Date(this.dragState.originalStart);
+            let nextEnd = new Date(this.dragState.originalEnd);
+            if (this.dragState.mode === 'move') {
+                nextStart = addDays(this.dragState.originalStart, dayDelta);
+                nextEnd = addDays(this.dragState.originalEnd, dayDelta);
+            }
+            else if (this.dragState.mode === 'resize-start') {
+                nextStart = addDays(this.dragState.originalStart, dayDelta);
+                if (nextStart > nextEnd)
+                    nextStart = new Date(nextEnd);
+            }
+            else {
+                nextEnd = addDays(this.dragState.originalEnd, dayDelta);
+                if (nextEnd < nextStart)
+                    nextEnd = new Date(nextStart);
+            }
+            nextStart = clampDate(nextStart, viewStart, viewEnd);
+            nextEnd = clampDate(nextEnd, viewStart, viewEnd);
+            if (nextStart > nextEnd)
+                return;
+            const item = this.items.find((entry) => entry.id === this.dragState.itemId);
+            if (!item)
+                return;
+            this.applyBarGeometry(this.dragState.barEl, { ...item, startDate: toDateKey(nextStart), endDate: toDateKey(nextEnd) }, viewStart, cellWidth);
+        };
+        this.handlePointerUp = (event) => {
+            if (this.reorderState && event.pointerId === this.reorderState.pointerId) {
+                this.finishReorderDrag(event);
+                return;
+            }
+            if (!this.dragState || event.pointerId !== this.dragState.pointerId)
+                return;
+            const scale = this.getOption('scale', SCALES, 'day');
+            const cellWidth = this.getNumber('cell-width', scale === 'week' ? 72 : 44);
+            const { start: viewStart, end: viewEnd } = this.getViewRange();
+            const dayDelta = Math.round((event.clientX - this.dragState.startX) / cellWidth);
+            let nextStart = new Date(this.dragState.originalStart);
+            let nextEnd = new Date(this.dragState.originalEnd);
+            const mode = this.dragState.mode;
+            const itemId = this.dragState.itemId;
+            if (mode === 'move') {
+                nextStart = addDays(this.dragState.originalStart, dayDelta);
+                nextEnd = addDays(this.dragState.originalEnd, dayDelta);
+            }
+            else if (mode === 'resize-start') {
+                nextStart = addDays(this.dragState.originalStart, dayDelta);
+                if (nextStart > nextEnd)
+                    nextStart = new Date(nextEnd);
+            }
+            else {
+                nextEnd = addDays(this.dragState.originalEnd, dayDelta);
+                if (nextEnd < nextStart)
+                    nextEnd = new Date(nextStart);
+            }
+            nextStart = clampDate(nextStart, viewStart, viewEnd);
+            nextEnd = clampDate(nextEnd, viewStart, viewEnd);
+            this.dragState.barEl.releasePointerCapture(event.pointerId);
+            this.dragState.barEl.classList.remove('designbase-wc-gantt__bar--dragging');
+            this.dragState = null;
+            const originalItem = this.items.find((entry) => entry.id === itemId);
+            if (!originalItem)
+                return;
+            const startKey = toDateKey(nextStart);
+            const endKey = toDateKey(nextEnd);
+            if (startKey === originalItem.startDate && endKey === originalItem.endDate)
+                return;
+            this.updateItem(itemId, { startDate: startKey, endDate: endKey }, mode === 'move' ? 'move' : 'resize');
+            this.render();
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'groups',
+            'rows',
+            'items',
+            'start-date',
+            'end-date',
+            'today',
+            'scale',
+            'cell-width',
+            'show-weekends',
+            'show-today',
+            'sidebar-label',
+            'full-width',
+            'disabled',
+            'draggable',
+            'reorderable',
+            'locale',
+        ];
+    }
+    get groups() {
+        return this.parseJson('groups', []);
+    }
+    set groups(value) {
+        this.setAttribute('groups', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get rows() {
+        return this.parseJson('rows', []);
+    }
+    set rows(value) {
+        this.setAttribute('rows', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get items() {
+        return this.parseJson('items', []);
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    connectedCallback() {
+        this.setAttribute('role', 'region');
+        this.setAttribute('aria-label', '프로젝트 타임라인');
+        this.addEventListener('pointermove', this.handlePointerMove);
+        this.addEventListener('pointerup', this.handlePointerUp);
+        this.addEventListener('pointercancel', this.handlePointerUp);
+        this.render();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('pointermove', this.handlePointerMove);
+        this.removeEventListener('pointerup', this.handlePointerUp);
+        this.removeEventListener('pointercancel', this.handlePointerUp);
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && !this.suppressRender && !this.dragState && !this.reorderState) {
+            this.render();
+        }
+    }
+    parseJson(name, fallback) {
+        try {
+            const parsed = JSON.parse(this.getAttribute(name) || 'null');
+            return parsed ?? fallback;
+        }
+        catch {
+            return fallback;
+        }
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    getNumber(name, fallback) {
+        const value = Number(this.getAttribute(name));
+        return Number.isFinite(value) && value > 0 ? value : fallback;
+    }
+    getOption(name, values, fallback) {
+        const value = this.getAttribute(name);
+        return value && values.includes(value) ? value : fallback;
+    }
+    getLocale() {
+        return this.getAttribute('locale') || 'ko-KR';
+    }
+    getWeekdays() {
+        return this.getLocale().startsWith('ko') ? WEEKDAY_KO : WEEKDAY_EN;
+    }
+    getViewRange() {
+        const explicitStart = this.getAttribute('start-date');
+        const explicitEnd = this.getAttribute('end-date');
+        if (explicitStart && explicitEnd) {
+            return { start: parseDate(explicitStart), end: parseDate(explicitEnd) };
+        }
+        const dates = this.items.flatMap((item) => [parseDate(item.startDate), parseDate(item.endDate)]);
+        if (dates.length === 0) {
+            const today = new Date();
+            const start = new Date(today.getFullYear(), today.getMonth(), 1);
+            const end = addDays(start, 29);
+            return { start, end };
+        }
+        const min = new Date(Math.min(...dates.map((d) => d.getTime())));
+        const max = new Date(Math.max(...dates.map((d) => d.getTime())));
+        return { start: addDays(min, -2), end: addDays(max, 2) };
+    }
+    getTodayDate() {
+        const attr = this.getAttribute('today');
+        return attr ? parseDate(attr) : new Date();
+    }
+    getDateColumns(start, end) {
+        const total = daysBetween(start, end) + 1;
+        return Array.from({ length: total }, (_, index) => addDays(start, index));
+    }
+    getVisibleRows() {
+        const groups = this.groups;
+        const rows = this.rows;
+        if (groups.length === 0) {
+            return rows.map((row) => ({ type: 'row', row }));
+        }
+        const result = [];
+        for (const group of groups) {
+            result.push({ type: 'group', group });
+            if (this.collapsedGroups.has(group.id))
+                continue;
+            rows
+                .filter((row) => row.groupId === group.id)
+                .forEach((row) => result.push({ type: 'row', row }));
+        }
+        rows
+            .filter((row) => !row.groupId || !groups.some((group) => group.id === row.groupId))
+            .forEach((row) => result.push({ type: 'row', row }));
+        return result;
+    }
+    getMonthSegments(dates) {
+        const segments = [];
+        let currentKey = '';
+        let currentSpan = 0;
+        for (const date of dates) {
+            const key = `${date.getFullYear()}-${date.getMonth()}`;
+            if (key !== currentKey) {
+                if (currentSpan > 0) {
+                    segments.push({ label: currentKey, span: currentSpan });
+                }
+                currentKey = key;
+                currentSpan = 1;
+            }
+            else {
+                currentSpan += 1;
+            }
+        }
+        if (currentSpan > 0) {
+            segments.push({ label: currentKey, span: currentSpan });
+        }
+        return segments.map((segment) => {
+            const [year, month] = segment.label.split('-').map(Number);
+            const label = new Date(year, month, 1).toLocaleDateString(this.getLocale(), {
+                year: 'numeric',
+                month: 'long',
+            });
+            return { label, span: segment.span };
+        });
+    }
+    getInitials(assignee) {
+        if (assignee.initials)
+            return assignee.initials;
+        return assignee.name
+            .split(/\s+/)
+            .map((part) => part[0])
+            .join('')
+            .slice(0, 2)
+            .toUpperCase();
+    }
+    updateItem(itemId, patch, action) {
+        const next = this.items.map((item) => item.id === itemId ? { ...item, ...patch } : item);
+        this.emitItemsChange(next, action, itemId);
+    }
+    emitItemsChange(items, action, itemId) {
+        this.suppressRender = true;
+        this.items = items;
+        this.suppressRender = false;
+        const item = items.find((entry) => entry.id === itemId);
+        this.dispatchEvent(new CustomEvent('db-item-change', {
+            detail: { item, items, action },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: { groups: this.groups, rows: this.rows, items },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    applyBarGeometry(barEl, item, viewStart, cellWidth) {
+        const itemStart = parseDate(item.startDate);
+        const itemEnd = parseDate(item.endDate);
+        const offset = daysBetween(viewStart, itemStart);
+        const duration = daysBetween(itemStart, itemEnd) + 1;
+        const gap = 2;
+        barEl.style.left = `${offset * cellWidth + gap}px`;
+        barEl.style.width = `${Math.max(duration * cellWidth - gap * 2, cellWidth - gap * 2)}px`;
+    }
+    startBarDrag(event, item, mode, barEl) {
+        if (!this.getBool('draggable', true) || this.getBool('disabled') || item.disabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.didDrag = false;
+        barEl.setPointerCapture(event.pointerId);
+        barEl.classList.add('designbase-wc-gantt__bar--dragging');
+        this.dragState = {
+            itemId: item.id,
+            mode,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            originalStart: parseDate(item.startDate),
+            originalEnd: parseDate(item.endDate),
+            barEl,
+        };
+    }
+    canReorder() {
+        return this.getBool('reorderable', true) && !this.getBool('disabled');
+    }
+    createDragHandle(kind, id, groupId) {
+        const handle = document.createElement('span');
+        handle.className = 'designbase-wc-gantt__drag-handle';
+        handle.setAttribute('role', 'button');
+        handle.setAttribute('aria-label', kind === 'group' ? '그룹 순서 변경' : '행 순서 변경');
+        handle.append(createDbIcon('grip-vertical', 12));
+        if (!this.canReorder())
+            return handle;
+        handle.addEventListener('pointerdown', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.startReorderDrag(event, kind, id, groupId, handle);
+        });
+        return handle;
+    }
+    getGroupIndex(groupId) {
+        return this.groups.findIndex((group) => group.id === groupId);
+    }
+    getRowScope(groupId) {
+        return this.rows.filter((row) => (row.groupId || '') === (groupId || ''));
+    }
+    getRowIndexInScope(rowId, groupId) {
+        return this.getRowScope(groupId).findIndex((row) => row.id === rowId);
+    }
+    getReorderTargets(kind, groupId) {
+        return Array.from(this.querySelectorAll(kind === 'group'
+            ? '.designbase-wc-gantt__label-cell--group'
+            : `.designbase-wc-gantt__label-cell--row[data-group-id="${groupId || ''}"]`));
+    }
+    startReorderDrag(event, kind, id, groupId, handleEl) {
+        const fromIndex = kind === 'group' ? this.getGroupIndex(id) : this.getRowIndexInScope(id, groupId);
+        if (fromIndex < 0)
+            return;
+        handleEl.setPointerCapture(event.pointerId);
+        this.reorderState = {
+            kind,
+            id,
+            groupId,
+            pointerId: event.pointerId,
+            startY: event.clientY,
+            fromIndex,
+            captureEl: handleEl,
+        };
+        this.classList.add('designbase-wc-gantt--reordering');
+        this.updateReorderDropTarget(event.clientY);
+    }
+    updateReorderDropTarget(clientY) {
+        if (!this.reorderState)
+            return;
+        const targets = this.getReorderTargets(this.reorderState.kind, this.reorderState.groupId);
+        let nextDrop = null;
+        targets.forEach((el, index) => {
+            const rect = el.getBoundingClientRect();
+            const mid = rect.top + rect.height / 2;
+            const isOver = clientY >= rect.top && clientY <= rect.bottom;
+            const placeAfter = clientY > mid;
+            el.classList.toggle('designbase-wc-gantt__label-cell--drag-over', isOver);
+            el.classList.toggle('designbase-wc-gantt__label-cell--drag-over-before', isOver && !placeAfter);
+            el.classList.toggle('designbase-wc-gantt__label-cell--drag-over-after', isOver && placeAfter);
+            if (isOver) {
+                nextDrop = placeAfter ? index + 1 : index;
+            }
+        });
+        this.reorderDropIndex = nextDrop;
+    }
+    clearReorderIndicators() {
+        this.querySelectorAll('.designbase-wc-gantt__label-cell--drag-over').forEach((el) => {
+            el.classList.remove('designbase-wc-gantt__label-cell--drag-over', 'designbase-wc-gantt__label-cell--drag-over-before', 'designbase-wc-gantt__label-cell--drag-over-after');
+        });
+    }
+    finishReorderDrag(event) {
+        if (!this.reorderState)
+            return;
+        const { kind, id, groupId, fromIndex, captureEl } = this.reorderState;
+        try {
+            captureEl.releasePointerCapture(this.reorderState.pointerId);
+        }
+        catch {
+            /* ignore */
+        }
+        const dropIndex = this.reorderDropIndex;
+        this.reorderState = null;
+        this.reorderDropIndex = null;
+        this.classList.remove('designbase-wc-gantt--reordering');
+        this.clearReorderIndicators();
+        if (dropIndex === null)
+            return;
+        const adjustedDrop = dropIndex > fromIndex ? dropIndex - 1 : dropIndex;
+        if (adjustedDrop < 0 || adjustedDrop === fromIndex)
+            return;
+        if (kind === 'group') {
+            this.reorderGroups(fromIndex, adjustedDrop, id);
+        }
+        else {
+            this.reorderRows(fromIndex, adjustedDrop, id, groupId);
+        }
+    }
+    emitStructureChange(groups, rows, detail, eventName) {
+        this.suppressRender = true;
+        this.groups = groups;
+        this.rows = rows;
+        this.suppressRender = false;
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: { ...detail, groups, rows },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: { groups, rows, items: this.items },
+            bubbles: true,
+            composed: true,
+        }));
+        this.render();
+    }
+    reorderGroups(fromIndex, toIndex, groupId) {
+        const next = [...this.groups];
+        const [moved] = next.splice(fromIndex, 1);
+        if (!moved)
+            return;
+        next.splice(toIndex, 0, moved);
+        this.emitStructureChange(next, this.rows, { groupId, fromIndex, toIndex }, 'db-group-reorder');
+    }
+    reorderRows(fromIndex, toIndex, rowId, groupId) {
+        const scope = this.getRowScope(groupId);
+        const nextScope = [...scope];
+        const [moved] = nextScope.splice(fromIndex, 1);
+        if (!moved)
+            return;
+        nextScope.splice(toIndex, 0, moved);
+        const scopeIds = new Set(scope.map((row) => row.id));
+        const nextRows = [];
+        let scopeInserted = false;
+        for (const row of this.rows) {
+            if (!scopeIds.has(row.id)) {
+                nextRows.push(row);
+                continue;
+            }
+            if (!scopeInserted) {
+                nextRows.push(...nextScope);
+                scopeInserted = true;
+            }
+        }
+        if (!scopeInserted)
+            nextRows.push(...nextScope);
+        this.emitStructureChange(this.groups, nextRows, { rowId, groupId, fromIndex, toIndex }, 'db-row-reorder');
+    }
+    createGroupBadge(color) {
+        const badge = document.createElement('db-badge');
+        badge.className = 'designbase-wc-gantt__group-badge';
+        badge.setAttribute('badge-style', 'dot');
+        badge.setAttribute('size', 's');
+        badge.setAttribute('variant', 'primary');
+        badge.setAttribute('aria-hidden', 'true');
+        if (color)
+            badge.style.setProperty('--db-gantt-badge-color', color);
+        return badge;
+    }
+    createGroupChevron(collapsed) {
+        const chevron = document.createElement('span');
+        chevron.className = [
+            'designbase-wc-gantt__group-chevron',
+            collapsed ? 'designbase-wc-gantt__group-chevron--collapsed' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        chevron.append(createDbIcon('chevron-down', 12));
+        return chevron;
+    }
+    createAssignee(assignee) {
+        const el = document.createElement('span');
+        el.className = 'designbase-wc-gantt__assignee';
+        el.title = assignee.name;
+        if (assignee.avatar) {
+            const img = document.createElement('img');
+            img.src = assignee.avatar;
+            img.alt = assignee.name;
+            el.appendChild(img);
+        }
+        else {
+            el.textContent = this.getInitials(assignee);
+        }
+        return el;
+    }
+    createStatusIcon(status) {
+        const el = document.createElement('span');
+        el.className = `designbase-wc-gantt__status designbase-wc-gantt__status--${status}`;
+        el.setAttribute('aria-hidden', 'true');
+        el.textContent = status === 'completed' ? '✓' : '!';
+        return el;
+    }
+    deriveSummaryColor(items, fallback) {
+        if (items.length === 0)
+            return fallback || BAR_COLORS[0];
+        const withColor = items.filter((item) => item.color);
+        if (withColor.length === 0)
+            return fallback || BAR_COLORS[0];
+        const longest = withColor.reduce((current, item) => {
+            const currentDays = daysBetween(parseDate(current.startDate), parseDate(current.endDate));
+            const itemDays = daysBetween(parseDate(item.startDate), parseDate(item.endDate));
+            return itemDays > currentDays ? item : current;
+        });
+        return longest.color || fallback || BAR_COLORS[0];
+    }
+    getGroupSummary(groupId, groupColor) {
+        const groupRows = this.rows.filter((row) => row.groupId === groupId);
+        const groupItems = this.items.filter((item) => groupRows.some((row) => row.id === item.rowId));
+        if (groupItems.length === 0)
+            return null;
+        const starts = groupItems.map((item) => parseDate(item.startDate).getTime());
+        const ends = groupItems.map((item) => parseDate(item.endDate).getTime());
+        const progressValues = groupItems
+            .map((item) => item.progress)
+            .filter((value) => typeof value === 'number');
+        return {
+            startDate: toDateKey(new Date(Math.min(...starts))),
+            endDate: toDateKey(new Date(Math.max(...ends))),
+            color: this.deriveSummaryColor(groupItems, groupColor),
+            progress: progressValues.length > 0
+                ? progressValues.reduce((sum, value) => sum + value, 0) / progressValues.length
+                : 0,
+            count: groupItems.length,
+        };
+    }
+    applyBarTone(el, color) {
+        const tone = deriveBarTone(color);
+        el.style.setProperty('--db-gantt-bar-color', color);
+        el.style.setProperty('--db-gantt-bar-bg', tone.base);
+        el.style.setProperty('--db-gantt-bar-progress-bg', tone.progress);
+    }
+    createGroupSummaryBar(summary, viewStart, viewEnd, cellWidth) {
+        const clampedStart = clampDate(parseDate(summary.startDate), viewStart, viewEnd);
+        const clampedEnd = clampDate(parseDate(summary.endDate), viewStart, viewEnd);
+        if (clampedEnd < viewStart || clampedStart > viewEnd)
+            return null;
+        const offset = daysBetween(viewStart, clampedStart);
+        const duration = daysBetween(clampedStart, clampedEnd) + 1;
+        const gap = 2;
+        const progress = Math.min(100, Math.max(0, summary.progress));
+        const bar = document.createElement('div');
+        bar.className = 'designbase-wc-gantt__group-summary';
+        bar.setAttribute('aria-hidden', 'true');
+        bar.title = `${summary.count}개 태스크`;
+        this.applyBarTone(bar, summary.color);
+        bar.style.left = `${offset * cellWidth + gap}px`;
+        bar.style.width = `${Math.max(duration * cellWidth - gap * 2, cellWidth - gap * 2)}px`;
+        if (progress > 0) {
+            const progressEl = document.createElement('span');
+            progressEl.className = 'designbase-wc-gantt__group-summary-progress';
+            progressEl.style.width = `${progress}%`;
+            bar.appendChild(progressEl);
+        }
+        return bar;
+    }
+    createBar(item, viewStart, cellWidth, colorIndex) {
+        const barColor = item.color || BAR_COLORS[colorIndex % BAR_COLORS.length];
+        const bar = document.createElement('div');
+        bar.className = 'designbase-wc-gantt__bar';
+        bar.setAttribute('role', 'button');
+        bar.setAttribute('tabindex', item.disabled ? '-1' : '0');
+        bar.setAttribute('aria-label', `${item.title}, ${item.startDate} – ${item.endDate}`);
+        this.applyBarTone(bar, barColor);
+        if (item.disabled) {
+            bar.classList.add('designbase-wc-gantt__bar--disabled');
+        }
+        this.applyBarGeometry(bar, item, viewStart, cellWidth);
+        const progress = typeof item.progress === 'number' ? Math.min(100, Math.max(0, item.progress)) : 0;
+        if (progress > 0) {
+            const progressEl = document.createElement('span');
+            progressEl.className = 'designbase-wc-gantt__bar-progress';
+            progressEl.style.width = `${progress}%`;
+            bar.appendChild(progressEl);
+        }
+        const body = document.createElement('div');
+        body.className = 'designbase-wc-gantt__bar-body';
+        if (item.status === 'delayed' || item.status === 'at-risk') {
+            body.appendChild(this.createStatusIcon(item.status));
+        }
+        const label = document.createElement('span');
+        label.className = 'designbase-wc-gantt__bar-label';
+        label.textContent = item.title;
+        body.appendChild(label);
+        if (item.assignee) {
+            body.appendChild(this.createAssignee(item.assignee));
+        }
+        const resizeStart = document.createElement('span');
+        resizeStart.className = 'designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--start';
+        resizeStart.setAttribute('aria-hidden', 'true');
+        const resizeEnd = document.createElement('span');
+        resizeEnd.className = 'designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--end';
+        resizeEnd.setAttribute('aria-hidden', 'true');
+        bar.append(resizeStart, body, resizeEnd);
+        if (!item.disabled && this.getBool('draggable', true) && !this.getBool('disabled')) {
+            resizeStart.addEventListener('pointerdown', (event) => this.startBarDrag(event, item, 'resize-start', bar));
+            resizeEnd.addEventListener('pointerdown', (event) => this.startBarDrag(event, item, 'resize-end', bar));
+            body.addEventListener('pointerdown', (event) => {
+                if (event.target.closest('.designbase-wc-gantt__bar-handle'))
+                    return;
+                this.startBarDrag(event, item, 'move', bar);
+            });
+        }
+        bar.addEventListener('click', (event) => {
+            if (this.dragState || this.didDrag) {
+                this.didDrag = false;
+                return;
+            }
+            event.stopPropagation();
+            this.dispatchEvent(new CustomEvent('db-item-click', {
+                detail: { item },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        return bar;
+    }
+    toggleGroup(groupId) {
+        if (this.collapsedGroups.has(groupId)) {
+            this.collapsedGroups.delete(groupId);
+        }
+        else {
+            this.collapsedGroups.add(groupId);
+        }
+        this.dispatchEvent(new CustomEvent('db-group-toggle', {
+            detail: { groupId, collapsed: this.collapsedGroups.has(groupId) },
+            bubbles: true,
+            composed: true,
+        }));
+        this.render();
+    }
+    render() {
+        const items = this.items;
+        const scale = this.getOption('scale', SCALES, 'day');
+        const cellWidth = this.getNumber('cell-width', scale === 'week' ? 72 : 44);
+        const showWeekends = this.getBool('show-weekends', true);
+        const showToday = this.getBool('show-today', true);
+        const sidebarLabel = this.getAttribute('sidebar-label') || '할 일';
+        const disabled = this.getBool('disabled');
+        const fullWidth = this.getBool('full-width', true);
+        const weekdays = this.getWeekdays();
+        const { start: viewStart, end: viewEnd } = this.getViewRange();
+        const dates = this.getDateColumns(viewStart, viewEnd);
+        const today = this.getTodayDate();
+        const todayKey = toDateKey(today);
+        const todayOffset = dates.findIndex((date) => toDateKey(date) === todayKey);
+        const visibleRows = this.getVisibleRows();
+        const chartWidth = dates.length * cellWidth;
+        const root = document.createElement('div');
+        root.className = [
+            'designbase-wc-gantt',
+            fullWidth ? 'designbase-wc-gantt--full-width' : '',
+            disabled ? 'designbase-wc-gantt--disabled' : '',
+            this.getBool('draggable', true) ? 'designbase-wc-gantt--draggable' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const viewport = document.createElement('div');
+        viewport.className = 'designbase-wc-gantt__viewport';
+        const grid = document.createElement('div');
+        grid.className = 'designbase-wc-gantt__grid';
+        grid.style.setProperty('--db-gantt-chart-width', `${chartWidth}px`);
+        grid.style.setProperty('--db-gantt-cell-width', `${cellWidth}px`);
+        const corner = document.createElement('div');
+        corner.className = 'designbase-wc-gantt__corner';
+        corner.textContent = sidebarLabel;
+        grid.appendChild(corner);
+        const dateHeader = document.createElement('div');
+        dateHeader.className = 'designbase-wc-gantt__date-header';
+        const monthRow = document.createElement('div');
+        monthRow.className = 'designbase-wc-gantt__month-row';
+        for (const segment of this.getMonthSegments(dates)) {
+            const cell = document.createElement('div');
+            cell.className = 'designbase-wc-gantt__month-cell';
+            cell.style.width = `${segment.span * cellWidth}px`;
+            cell.textContent = segment.label;
+            monthRow.appendChild(cell);
+        }
+        dateHeader.appendChild(monthRow);
+        const dayRow = document.createElement('div');
+        dayRow.className = 'designbase-wc-gantt__day-row';
+        for (const date of dates) {
+            const key = toDateKey(date);
+            const isToday = key === todayKey;
+            const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+            const cell = document.createElement('div');
+            cell.className = [
+                'designbase-wc-gantt__day-cell',
+                isToday && showToday ? 'designbase-wc-gantt__day-cell--today' : '',
+                isWeekend && showWeekends ? 'designbase-wc-gantt__day-cell--weekend' : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            cell.style.width = `${cellWidth}px`;
+            const dayNum = document.createElement('span');
+            dayNum.className = 'designbase-wc-gantt__day-num';
+            dayNum.textContent = String(date.getDate());
+            const dayName = document.createElement('span');
+            dayName.className = 'designbase-wc-gantt__day-name';
+            dayName.textContent = weekdays[date.getDay()];
+            cell.append(dayNum, dayName);
+            dayRow.appendChild(cell);
+        }
+        dateHeader.appendChild(dayRow);
+        grid.appendChild(dateHeader);
+        const itemsByRow = new Map();
+        items.forEach((item, index) => {
+            const list = itemsByRow.get(item.rowId) || [];
+            list.push({ ...item, color: item.color || BAR_COLORS[index % BAR_COLORS.length] });
+            itemsByRow.set(item.rowId, list);
+        });
+        let colorIndex = 0;
+        for (const entry of visibleRows) {
+            if (entry.type === 'group') {
+                const { group } = entry;
+                const collapsed = this.collapsedGroups.has(group.id);
+                const labelCell = document.createElement('button');
+                labelCell.type = 'button';
+                labelCell.className = 'designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--group';
+                labelCell.setAttribute('aria-expanded', String(!collapsed));
+                labelCell.dataset.groupId = group.id;
+                const title = document.createElement('span');
+                title.className = 'designbase-wc-gantt__group-title';
+                title.textContent = group.title;
+                labelCell.append(this.createDragHandle('group', group.id), this.createGroupChevron(collapsed), this.createGroupBadge(group.color), title);
+                labelCell.addEventListener('click', (event) => {
+                    if (event.target.closest('.designbase-wc-gantt__drag-handle'))
+                        return;
+                    this.toggleGroup(group.id);
+                });
+                grid.appendChild(labelCell);
+                const trackCell = document.createElement('div');
+                trackCell.className =
+                    'designbase-wc-gantt__track-cell designbase-wc-gantt__track-cell--group';
+                if (collapsed) {
+                    const summary = this.getGroupSummary(group.id, group.color);
+                    if (summary) {
+                        const gridBg = document.createElement('div');
+                        gridBg.className = 'designbase-wc-gantt__grid-bg';
+                        dates.forEach((date) => {
+                            const cell = document.createElement('div');
+                            const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+                            cell.className = [
+                                'designbase-wc-gantt__grid-cell',
+                                isWeekend && showWeekends
+                                    ? 'designbase-wc-gantt__grid-cell--weekend'
+                                    : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' ');
+                            cell.style.width = `${cellWidth}px`;
+                            gridBg.appendChild(cell);
+                        });
+                        trackCell.appendChild(gridBg);
+                        const summaryWrap = document.createElement('div');
+                        summaryWrap.className = 'designbase-wc-gantt__group-summary-wrap';
+                        const summaryBar = this.createGroupSummaryBar(summary, viewStart, viewEnd, cellWidth);
+                        if (summaryBar)
+                            summaryWrap.appendChild(summaryBar);
+                        trackCell.appendChild(summaryWrap);
+                    }
+                }
+                grid.appendChild(trackCell);
+                continue;
+            }
+            const { row } = entry;
+            const labelCell = document.createElement('button');
+            labelCell.type = 'button';
+            labelCell.className = 'designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--row';
+            labelCell.dataset.groupId = row.groupId || '';
+            labelCell.dataset.rowId = row.id;
+            const rowTitle = document.createElement('span');
+            rowTitle.className = 'designbase-wc-gantt__row-title';
+            rowTitle.textContent = row.label;
+            labelCell.append(this.createDragHandle('row', row.id, row.groupId), rowTitle);
+            labelCell.addEventListener('click', (event) => {
+                if (event.target.closest('.designbase-wc-gantt__drag-handle'))
+                    return;
+                this.dispatchEvent(new CustomEvent('db-row-click', {
+                    detail: { row },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+            grid.appendChild(labelCell);
+            const trackCell = document.createElement('div');
+            trackCell.className = 'designbase-wc-gantt__track-cell';
+            const gridBg = document.createElement('div');
+            gridBg.className = 'designbase-wc-gantt__grid-bg';
+            dates.forEach((date) => {
+                const cell = document.createElement('div');
+                const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+                cell.className = [
+                    'designbase-wc-gantt__grid-cell',
+                    isWeekend && showWeekends ? 'designbase-wc-gantt__grid-cell--weekend' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                cell.style.width = `${cellWidth}px`;
+                gridBg.appendChild(cell);
+            });
+            trackCell.appendChild(gridBg);
+            const bars = document.createElement('div');
+            bars.className = 'designbase-wc-gantt__bars';
+            (itemsByRow.get(row.id) || []).forEach((item) => {
+                const clampedStart = clampDate(parseDate(item.startDate), viewStart, viewEnd);
+                const clampedEnd = clampDate(parseDate(item.endDate), viewStart, viewEnd);
+                if (clampedEnd < viewStart || clampedStart > viewEnd)
+                    return;
+                bars.appendChild(this.createBar({
+                    ...item,
+                    startDate: toDateKey(clampedStart),
+                    endDate: toDateKey(clampedEnd),
+                }, viewStart, cellWidth, colorIndex++));
+            });
+            trackCell.appendChild(bars);
+            grid.appendChild(trackCell);
+        }
+        viewport.appendChild(grid);
+        if (showToday && todayOffset >= 0) {
+            const todayLine = document.createElement('div');
+            todayLine.className = 'designbase-wc-gantt__today-line';
+            todayLine.style.left = `calc(var(--db-gantt-label-width) + ${todayOffset * cellWidth + cellWidth / 2}px)`;
+            grid.appendChild(todayLine);
+        }
+        root.appendChild(viewport);
+        this.replaceChildren(root);
+    }
+}
+if (!customElements.get('db-gantt'))
+    customElements.define('db-gantt', DbGantt);
+
+export { DbGantt };