@codeenvision/ui-webcomponents 1.0.0

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,63 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+export class Avatar extends BaseComponent {
+    options;
+    constructor(options) {
+        super(options.selector);
+        this.options = options;
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            return;
+        }
+        this.el.classList.add("ce-avatar");
+        const size = this.options.size ?? "md";
+        if (size !== "md") {
+            this.el.classList.add(`ce-avatar--${size}`);
+        }
+        if (this.options.shape && this.options.shape !== "circle") {
+            this.el.classList.add(`ce-avatar--${this.options.shape}`);
+        }
+        if (this.options.status) {
+            this.el.classList.add(`ce-avatar--status-${this.options.status}`);
+        }
+        this.el.innerHTML = "";
+        const img = document.createElement("img");
+        img.src = this.options.imageUrl;
+        img.alt = this.options.altText ?? "Avatar";
+        this.el.appendChild(img);
+    }
+    destroy() {
+        this.el.innerHTML = "";
+    }
+    tryHydrate() {
+        const img = this.el.querySelector("img");
+        if (!img) {
+            return false;
+        }
+        this.el.classList.add("ce-avatar");
+        this.el.classList.remove("ce-avatar--sm", "ce-avatar--lg", "ce-avatar--xl");
+        this.el.classList.remove("ce-avatar--square", "ce-avatar--rounded");
+        this.el.classList.remove("ce-avatar--status-online", "ce-avatar--status-offline");
+        const size = this.options.size ?? "md";
+        if (size !== "md") {
+            this.el.classList.add(`ce-avatar--${size}`);
+        }
+        if (this.options.shape && this.options.shape !== "circle") {
+            this.el.classList.add(`ce-avatar--${this.options.shape}`);
+        }
+        if (this.options.status) {
+            this.el.classList.add(`ce-avatar--status-${this.options.status}`);
+        }
+        if (this.options.imageUrl) {
+            img.src = this.options.imageUrl;
+        }
+        if (this.options.altText !== undefined) {
+            img.alt = this.options.altText ?? "Avatar";
+        }
+        else if (!img.alt) {
+            img.alt = "Avatar";
+        }
+        return true;
+    }
+}
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../components/Avatar/Avatar.ts"],"names":[],"mappings":"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"}

package/dist/components/Avatar/Avatar.types.d.ts

@@ -0,0 +1,10 @@
+export interface AvatarOptions {
+    selector: string;
+    imageUrl: string;
+    altText?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    shape?: "circle" | "square" | "rounded";
+    status?: "online" | "offline";
+    hydrate?: boolean;
+}
+//# sourceMappingURL=Avatar.types.d.ts.map

package/dist/components/Avatar/Avatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Avatar/Avatar.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Avatar.types.js.map

package/dist/components/Avatar/Avatar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.js","sourceRoot":"","sources":["../../../components/Avatar/Avatar.types.ts"],"names":[],"mappings":""}

package/dist/components/BacklogBoard/BacklogBoard.d.ts

@@ -0,0 +1,31 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+import type { BacklogBoardOptions } from "./BacklogBoard.types.js";
+export declare class BacklogBoard extends BaseComponent {
+    private options;
+    private columns;
+    private dragData;
+    private columnEls;
+    private boardEl?;
+    private editing;
+    private hydrated;
+    constructor(options: BacklogBoardOptions);
+    init(): void;
+    destroy(): void;
+    private tryHydrate;
+    private render;
+    private createColumn;
+    private createCard;
+    private handleDragStart;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private handleDragEnd;
+    private moveItem;
+    private refreshColumns;
+    private updateColumnTitle;
+    private updateItem;
+    private startInlineEdit;
+    private handleAddColumn;
+    private handleAddItem;
+}
+//# sourceMappingURL=BacklogBoard.d.ts.map

package/dist/components/BacklogBoard/BacklogBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BacklogBoard.d.ts","sourceRoot":"","sources":["../../../components/BacklogBoard/BacklogBoard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,KAAK,EACV,mBAAmB,EAIpB,MAAM,yBAAyB,CAAC;AAOjC,qBAAa,YAAa,SAAQ,aAAa;IAC7C,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAuC;IACxD,OAAO,CAAC,OAAO,CAAC,CAAc;IAC9B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,QAAQ,CAAS;gBAEb,OAAO,EAAE,mBAAmB;IAWxC,IAAI,IAAI,IAAI;IASZ,OAAO,IAAI,IAAI;IAOf,OAAO,CAAC,UAAU;IAqLlB,OAAO,CAAC,MAAM;IAwBd,OAAO,CAAC,YAAY;IAqDpB,OAAO,CAAC,UAAU;IAgIlB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,QAAQ;IAoBhB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,eAAe;IA8CvB,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,aAAa;CActB"}

package/dist/components/BacklogBoard/BacklogBoard.js

@@ -0,0 +1,524 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+export class BacklogBoard extends BaseComponent {
+    options;
+    columns;
+    dragData = null;
+    columnEls = new Map();
+    boardEl;
+    editing = false;
+    hydrated = false;
+    constructor(options) {
+        super(options.selector);
+        this.options = {
+            theme: "light",
+            draggable: true,
+            allowInlineEdit: false,
+            ...options,
+        };
+        this.columns = structuredClone(options.columns ?? []);
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            this.hydrated = true;
+            return;
+        }
+        this.destroy();
+        this.render();
+    }
+    destroy() {
+        this.el.innerHTML = "";
+        this.columnEls.clear();
+        this.dragData = null;
+        this.editing = false;
+    }
+    tryHydrate() {
+        const board = this.el.matches?.(".ce-backlog")
+            ? this.el
+            : this.el.querySelector(".ce-backlog");
+        if (!board) {
+            return false;
+        }
+        this.boardEl = board;
+        board.classList.add("ce-backlog");
+        board.classList.toggle("ce-backlog--dark", this.options.theme === "dark");
+        const columnEls = Array.from(board.querySelectorAll(".ce-backlog__column"));
+        if (!columnEls.length) {
+            return false;
+        }
+        const parsedColumns = columnEls.map((colEl, index) => {
+            const fallback = this.columns[index];
+            const colId = colEl.dataset.columnId || fallback?.id || `col-${index + 1}`;
+            colEl.dataset.columnId = colId;
+            const titleEl = colEl.querySelector(".ce-backlog__column-title");
+            const title = titleEl?.textContent?.trim() || fallback?.title || `Column ${index + 1}`;
+            const list = colEl.querySelector(".ce-backlog__list");
+            if (list) {
+                list.dataset.columnId = colId;
+            }
+            const cards = list ? Array.from(list.querySelectorAll(".ce-backlog__card")) : [];
+            const items = cards.map((card, itemIndex) => {
+                const fallbackItem = fallback?.items?.[itemIndex];
+                const itemId = card.dataset.itemId || fallbackItem?.id || `item-${colId}-${itemIndex + 1}`;
+                card.dataset.itemId = itemId;
+                card.dataset.columnId = colId;
+                const titleText = card.querySelector(".ce-backlog__card-title")?.textContent?.trim();
+                const descText = card.querySelector(".ce-backlog__card-desc")?.textContent?.trim();
+                const chips = Array.from(card.querySelectorAll(".ce-backlog__chip"));
+                const tags = chips
+                    .filter((chip) => chip.classList.contains("ce-backlog__chip--tag"))
+                    .map((chip) => chip.textContent?.trim() ?? "")
+                    .filter(Boolean);
+                const pointsChip = chips.find((chip) => chip.textContent?.trim().endsWith(" pts"));
+                const points = pointsChip
+                    ? Number(pointsChip.textContent?.replace(" pts", "").trim())
+                    : fallbackItem?.points;
+                const assigneeChip = chips.find((chip) => !chip.classList.contains("ce-backlog__chip--tag") && chip !== pointsChip);
+                const assignee = assigneeChip?.textContent?.trim() || fallbackItem?.assignee;
+                return {
+                    id: itemId,
+                    title: titleText || fallbackItem?.title || "",
+                    description: descText || fallbackItem?.description,
+                    assignee,
+                    points: Number.isFinite(points) ? points : undefined,
+                    tags: tags.length ? tags : fallbackItem?.tags,
+                };
+            });
+            return {
+                id: colId,
+                title,
+                items,
+            };
+        });
+        this.columns = parsedColumns;
+        this.columnEls.clear();
+        parsedColumns.forEach((column, index) => {
+            const colEl = columnEls[index];
+            this.columnEls.set(column.id, colEl);
+            const headerTitle = colEl.querySelector(".ce-backlog__column-title");
+            if (headerTitle && this.options.allowInlineEdit) {
+                headerTitle.tabIndex = 0;
+                const editHandler = (e) => this.startInlineEdit(e, headerTitle, (val) => this.updateColumnTitle(column.id, val));
+                headerTitle.addEventListener("click", editHandler);
+                headerTitle.addEventListener("keydown", (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        editHandler(e);
+                    }
+                });
+            }
+            const countEl = colEl.querySelector(".ce-backlog__column-count");
+            if (countEl) {
+                countEl.textContent = String(column.items.length);
+            }
+            const list = colEl.querySelector(".ce-backlog__list");
+            if (list) {
+                if (this.options.draggable) {
+                    list.addEventListener("dragover", (e) => this.handleDragOver(e));
+                    list.addEventListener("drop", (e) => this.handleDrop(e, column.id));
+                    list.addEventListener("dragleave", (e) => this.handleDragLeave(e));
+                }
+                const cards = Array.from(list.querySelectorAll(".ce-backlog__card"));
+                cards.forEach((cardEl, itemIndex) => {
+                    const item = column.items[itemIndex];
+                    if (!item) {
+                        return;
+                    }
+                    if (this.options.draggable) {
+                        cardEl.addEventListener("dragstart", (e) => this.handleDragStart(e, item.id, column.id));
+                        cardEl.addEventListener("dragend", () => this.handleDragEnd());
+                    }
+                    cardEl.addEventListener("click", () => this.options.onSelect?.(item));
+                    if (this.options.allowInlineEdit) {
+                        const titleEl = cardEl.querySelector(".ce-backlog__card-title");
+                        if (titleEl) {
+                            titleEl.tabIndex = 0;
+                            const editTitle = (e) => this.startInlineEdit(e, titleEl, (val) => this.updateItem(item.id, column.id, { title: val }));
+                            titleEl.addEventListener("click", editTitle);
+                            titleEl.addEventListener("keydown", (e) => {
+                                if (e.key === "Enter") {
+                                    e.preventDefault();
+                                    editTitle(e);
+                                }
+                            });
+                        }
+                        const descEl = cardEl.querySelector(".ce-backlog__card-desc");
+                        if (descEl) {
+                            descEl.tabIndex = 0;
+                            const editDesc = (e) => this.startInlineEdit(e, descEl, (val) => this.updateItem(item.id, column.id, { description: val }));
+                            descEl.addEventListener("click", editDesc);
+                            descEl.addEventListener("keydown", (e) => {
+                                if (e.key === "Enter") {
+                                    e.preventDefault();
+                                    editDesc(e);
+                                }
+                            });
+                        }
+                        const tagGroup = cardEl.querySelector(".ce-backlog__tag-group");
+                        if (tagGroup) {
+                            tagGroup.tabIndex = 0;
+                            const editTags = (e) => this.startInlineEdit(e, tagGroup, (val) => this.updateItem(item.id, column.id, {
+                                tags: val.split(",").map((t) => t.trim()).filter(Boolean),
+                            }), item.tags?.join(", ") ?? "");
+                            tagGroup.addEventListener("click", editTags);
+                            tagGroup.addEventListener("keydown", (e) => {
+                                if (e.key === "Enter") {
+                                    e.preventDefault();
+                                    editTags(e);
+                                }
+                            });
+                        }
+                    }
+                });
+            }
+            if (this.options.allowAddItem) {
+                const addItem = colEl.querySelector(".ce-backlog__add-card");
+                if (addItem) {
+                    addItem.addEventListener("click", () => this.handleAddItem(column.id));
+                }
+            }
+        });
+        if (this.options.allowAddColumn) {
+            const addColumn = board.querySelector(".ce-backlog__add-column");
+            if (addColumn) {
+                addColumn.addEventListener("click", () => this.handleAddColumn());
+            }
+        }
+        return true;
+    }
+    render() {
+        const board = document.createElement("div");
+        board.className = "ce-backlog";
+        board.classList.toggle("ce-backlog--dark", this.options.theme === "dark");
+        this.boardEl = board;
+        this.columns.forEach((column) => {
+            const columnEl = this.createColumn(column);
+            board.appendChild(columnEl);
+            this.columnEls.set(column.id, columnEl);
+        });
+        if (this.options.allowAddColumn) {
+            const addCol = document.createElement("button");
+            addCol.type = "button";
+            addCol.className = "ce-backlog__add-column";
+            addCol.textContent = "+ Add column";
+            addCol.addEventListener("click", () => this.handleAddColumn());
+            board.appendChild(addCol);
+        }
+        this.el.appendChild(board);
+    }
+    createColumn(column) {
+        const col = document.createElement("section");
+        col.className = "ce-backlog__column";
+        col.dataset.columnId = column.id;
+        const header = document.createElement("header");
+        header.className = "ce-backlog__column-header";
+        const titleEl = document.createElement("span");
+        titleEl.className = "ce-backlog__column-title";
+        titleEl.textContent = column.title;
+        if (this.options.allowInlineEdit) {
+            titleEl.tabIndex = 0;
+            titleEl.addEventListener("click", (e) => this.startInlineEdit(e, titleEl, (val) => this.updateColumnTitle(column.id, val)));
+            titleEl.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") {
+                    e.preventDefault();
+                    this.startInlineEdit(e, titleEl, (val) => this.updateColumnTitle(column.id, val));
+                }
+            });
+        }
+        const countEl = document.createElement("span");
+        countEl.className = "ce-backlog__column-count";
+        countEl.textContent = String(column.items.length);
+        header.append(titleEl, countEl);
+        col.appendChild(header);
+        const list = document.createElement("div");
+        list.className = "ce-backlog__list";
+        list.dataset.columnId = column.id;
+        column.items.forEach((item) => {
+            list.appendChild(this.createCard(item, column.id));
+        });
+        if (this.options.draggable) {
+            list.addEventListener("dragover", (e) => this.handleDragOver(e));
+            list.addEventListener("drop", (e) => this.handleDrop(e, column.id));
+            list.addEventListener("dragleave", (e) => this.handleDragLeave(e));
+        }
+        if (this.options.allowAddItem) {
+            const addItem = document.createElement("button");
+            addItem.type = "button";
+            addItem.className = "ce-backlog__add-card";
+            addItem.textContent = "+ Add item";
+            addItem.addEventListener("click", () => this.handleAddItem(column.id));
+            col.appendChild(addItem);
+        }
+        col.appendChild(list);
+        return col;
+    }
+    createCard(item, columnId) {
+        const card = document.createElement("article");
+        card.className = "ce-backlog__card";
+        card.dataset.itemId = item.id;
+        card.dataset.columnId = columnId;
+        card.draggable = Boolean(this.options.draggable);
+        const title = document.createElement("div");
+        title.className = "ce-backlog__card-title";
+        title.textContent = item.title;
+        if (this.options.allowInlineEdit) {
+            title.tabIndex = 0;
+            title.addEventListener("click", (e) => this.startInlineEdit(e, title, (val) => this.updateItem(item.id, columnId, { title: val })));
+            title.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") {
+                    e.preventDefault();
+                    this.startInlineEdit(e, title, (val) => this.updateItem(item.id, columnId, { title: val }));
+                }
+            });
+        }
+        card.appendChild(title);
+        if (item.description) {
+            const desc = document.createElement("div");
+            desc.className = "ce-backlog__card-desc";
+            desc.textContent = item.description;
+            if (this.options.allowInlineEdit) {
+                desc.tabIndex = 0;
+                desc.addEventListener("click", (e) => this.startInlineEdit(e, desc, (val) => this.updateItem(item.id, columnId, { description: val })));
+                desc.addEventListener("keydown", (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        this.startInlineEdit(e, desc, (val) => this.updateItem(item.id, columnId, { description: val }));
+                    }
+                });
+            }
+            card.appendChild(desc);
+        }
+        const meta = document.createElement("div");
+        meta.className = "ce-backlog__card-meta";
+        if (item.assignee) {
+            const assignee = document.createElement("span");
+            assignee.className = "ce-backlog__chip";
+            assignee.textContent = item.assignee;
+            if (this.options.allowInlineEdit) {
+                assignee.tabIndex = 0;
+                assignee.addEventListener("click", (e) => this.startInlineEdit(e, assignee, (val) => this.updateItem(item.id, columnId, { assignee: val })));
+                assignee.addEventListener("keydown", (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        this.startInlineEdit(e, assignee, (val) => this.updateItem(item.id, columnId, { assignee: val }));
+                    }
+                });
+            }
+            meta.appendChild(assignee);
+        }
+        if (typeof item.points === "number") {
+            const points = document.createElement("span");
+            points.className = "ce-backlog__chip";
+            points.textContent = `${item.points} pts`;
+            if (this.options.allowInlineEdit) {
+                points.tabIndex = 0;
+                points.addEventListener("click", (e) => this.startInlineEdit(e, points, (val) => this.updateItem(item.id, columnId, { points: Number(val) || item.points })));
+                points.addEventListener("keydown", (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        this.startInlineEdit(e, points, (val) => this.updateItem(item.id, columnId, { points: Number(val) || item.points }));
+                    }
+                });
+            }
+            meta.appendChild(points);
+        }
+        const tagsContainer = document.createElement("span");
+        tagsContainer.className = "ce-backlog__tag-group";
+        if (item.tags?.length) {
+            item.tags.forEach((tag) => {
+                const chip = document.createElement("span");
+                chip.className = "ce-backlog__chip ce-backlog__chip--tag";
+                chip.textContent = tag;
+                tagsContainer.appendChild(chip);
+            });
+        }
+        if (this.options.allowInlineEdit) {
+            tagsContainer.tabIndex = 0;
+            const editTags = (e) => this.startInlineEdit(e, tagsContainer, (val) => this.updateItem(item.id, columnId, { tags: val.split(",").map((t) => t.trim()).filter(Boolean) }), item.tags?.join(", ") ?? "");
+            tagsContainer.addEventListener("click", editTags);
+            tagsContainer.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") {
+                    e.preventDefault();
+                    editTags(e);
+                }
+            });
+        }
+        if (tagsContainer.childElementCount || this.options.allowInlineEdit) {
+            meta.appendChild(tagsContainer);
+        }
+        if (meta.childElementCount) {
+            card.appendChild(meta);
+        }
+        if (this.options.draggable) {
+            card.addEventListener("dragstart", (e) => this.handleDragStart(e, item.id, columnId));
+            card.addEventListener("dragend", () => this.handleDragEnd());
+        }
+        card.addEventListener("click", () => this.options.onSelect?.(item));
+        return card;
+    }
+    handleDragStart(event, itemId, columnId) {
+        if (!event.dataTransfer)
+            return;
+        this.dragData = { itemId, fromColumnId: columnId };
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", JSON.stringify(this.dragData));
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+        const target = event.currentTarget;
+        target.classList.add("is-drag-over");
+    }
+    handleDragLeave(event) {
+        const target = event.currentTarget;
+        target.classList.remove("is-drag-over");
+    }
+    handleDrop(event, toColumnId) {
+        event.preventDefault();
+        const targetList = event.currentTarget;
+        targetList.classList.remove("is-drag-over");
+        let payload = this.dragData;
+        if (!payload && event.dataTransfer?.getData("text/plain")) {
+            try {
+                payload = JSON.parse(event.dataTransfer.getData("text/plain"));
+            }
+            catch {
+                payload = null;
+            }
+        }
+        if (!payload)
+            return;
+        const cardEl = event.target instanceof HTMLElement ? event.target.closest(".ce-backlog__card") : null;
+        const insertIndex = cardEl ? Array.from(targetList.children).indexOf(cardEl) : targetList.children.length;
+        this.moveItem(payload, toColumnId, insertIndex);
+    }
+    handleDragEnd() {
+        this.dragData = null;
+        this.el.querySelectorAll(".is-drag-over").forEach((el) => el.classList.remove("is-drag-over"));
+    }
+    moveItem(payload, toColumnId, toIndex) {
+        const fromCol = this.columns.find((col) => col.id === payload.fromColumnId);
+        const toCol = this.columns.find((col) => col.id === toColumnId);
+        if (!fromCol || !toCol)
+            return;
+        const itemIndex = fromCol.items.findIndex((item) => item.id === payload.itemId);
+        if (itemIndex === -1)
+            return;
+        const [item] = fromCol.items.splice(itemIndex, 1);
+        toCol.items.splice(toIndex, 0, item);
+        this.refreshColumns([fromCol, toCol]);
+        const detail = {
+            item,
+            fromColumnId: payload.fromColumnId,
+            toColumnId,
+            toIndex,
+        };
+        this.options.onMove?.(detail);
+    }
+    refreshColumns(columns) {
+        columns.forEach((col) => {
+            const colEl = this.columnEls.get(col.id);
+            if (!colEl)
+                return;
+            const countEl = colEl.querySelector(".ce-backlog__column-count");
+            if (countEl)
+                countEl.textContent = String(col.items.length);
+            const list = colEl.querySelector(".ce-backlog__list");
+            if (!list)
+                return;
+            list.innerHTML = "";
+            col.items.forEach((item) => {
+                list.appendChild(this.createCard(item, col.id));
+            });
+        });
+    }
+    updateColumnTitle(columnId, title) {
+        const col = this.columns.find((c) => c.id === columnId);
+        if (!col)
+            return;
+        col.title = title || col.title;
+        this.refreshColumns([col]);
+    }
+    updateItem(itemId, columnId, patch) {
+        const col = this.columns.find((c) => c.id === columnId);
+        if (!col)
+            return;
+        const item = col.items.find((i) => i.id === itemId);
+        if (!item)
+            return;
+        Object.assign(item, patch);
+        this.refreshColumns([col]);
+    }
+    startInlineEdit(event, targetEl, onCommit, initialOverride) {
+        event.stopPropagation();
+        if (!this.options.allowInlineEdit || this.editing)
+            return;
+        this.editing = true;
+        const currentValue = initialOverride ?? (targetEl.textContent ?? "");
+        const input = document.createElement("input");
+        input.type = "text";
+        input.value = currentValue;
+        input.className = "ce-backlog__edit-input";
+        targetEl.replaceWith(input);
+        input.focus();
+        input.select();
+        const commit = () => {
+            const val = input.value.trim();
+            const display = document.createElement(targetEl.tagName.toLowerCase());
+            display.className = targetEl.className;
+            display.textContent = val || currentValue;
+            input.replaceWith(display);
+            this.editing = false;
+            onCommit(val || currentValue);
+        };
+        const cancel = () => {
+            input.replaceWith(targetEl);
+            this.editing = false;
+        };
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+            }
+            if (e.key === "Escape") {
+                e.preventDefault();
+                cancel();
+            }
+        });
+        input.addEventListener("blur", commit);
+    }
+    handleAddColumn() {
+        const created = this.options.onAddColumn?.();
+        const newColumn = created ?? {
+            id: `col-${Date.now().toString(36)}`,
+            title: "New column",
+            items: [],
+        };
+        this.columns.push(newColumn);
+        if (this.boardEl) {
+            const colEl = this.createColumn(newColumn);
+            // insert before add button if present
+            const addBtn = this.boardEl.querySelector(".ce-backlog__add-column");
+            if (addBtn) {
+                this.boardEl.insertBefore(colEl, addBtn);
+            }
+            else {
+                this.boardEl.appendChild(colEl);
+            }
+            this.columnEls.set(newColumn.id, colEl);
+        }
+    }
+    handleAddItem(columnId) {
+        const column = this.columns.find((c) => c.id === columnId);
+        if (!column)
+            return;
+        const created = this.options.onAddItem?.(columnId);
+        const newItem = created ?? {
+            id: `item-${Date.now().toString(36)}`,
+            title: "New backlog item",
+            description: "Describe the work",
+            tags: ["new"],
+        };
+        column.items.push(newItem);
+        this.refreshColumns([column]);
+    }
+}
+//# sourceMappingURL=BacklogBoard.js.map