@design.estate/dees-catalog 12.4.0 → 12.5.0

package/ts_web/elements/00group-kanban/dees-kanban/dees-kanban.ts

@@ -0,0 +1,315 @@
+import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import type { IKanbanColumn, IKanbanComment, IKanbanCreate, IKanbanMove, IKanbanPerson, IKanbanProvider, IKanbanTicket, IKanbanTicketDraft } from '../interfaces.js';
+import type { TReferenceContent, TReferenceSearch } from '../../00group-input/dees-input-reference/interfaces.js';
+import type { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
+import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { DeesKanbanTicketDetail } from '../dees-kanban-ticket-detail/dees-kanban-ticket-detail.js';
+import { kanbanStyles } from '../kanban.styles.js';
+import { kanbanError, kanbanEvent, sortKanbanTickets, ticketLabel } from '../kanban.helpers.js';
+import { demoFunc } from './dees-kanban.demo.js';
+import '../dees-kanban-column/dees-kanban-column.js';
+
+declare global { interface HTMLElementTagNameMap { 'dees-kanban': DeesKanban; } }
+
+const interactionEvents = ['kanban-ticket-open', 'kanban-ticket-move', 'kanban-ticket-create', 'kanban-move-menu',
+  'kanban-ticket-save', 'kanban-ticket-draft', 'kanban-comment-draft', 'kanban-comment-added', 'kanban-comments-refresh',
+  'kanban-detail-back', 'kanban-drag-start', 'kanban-drag-end'] as const;
+
+interface IKanbanInteractionMap {
+  'kanban-ticket-open': { ticketId: string };
+  'kanban-ticket-move': IKanbanMove;
+  'kanban-ticket-create': Omit<IKanbanCreate, 'title'>;
+  'kanban-move-menu': { ticketId: string; anchor: HTMLElement };
+  'kanban-ticket-save': { ticketId: string; draft: IKanbanTicketDraft };
+  'kanban-ticket-draft': { ticketId: string; draft?: IKanbanTicketDraft };
+  'kanban-comment-draft': { ticketId: string; body: TReferenceContent };
+  'kanban-comment-added': { comment: IKanbanComment; submittedBody: TReferenceContent };
+  'kanban-comments-refresh': { ticketId: string };
+  'kanban-detail-back': Record<string, never>;
+  'kanban-drag-start': { ticketId: string };
+  'kanban-drag-end': Record<string, never>;
+}
+type TKanbanInteraction = { [K in keyof IKanbanInteractionMap]: { type: K; detail: IKanbanInteractionMap[K] } }[keyof IKanbanInteractionMap];
+
+@customElement('dees-kanban')
+export class DeesKanban extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Kanban'];
+  @property({ type: String }) accessor heading = 'Board';
+  @property({ attribute: false }) accessor tickets: IKanbanTicket[] = [];
+  @property({ attribute: false }) accessor columns: IKanbanColumn[] = [];
+  @property({ attribute: false }) accessor people: IKanbanPerson[] = [];
+  @property({ attribute: false }) accessor provider: IKanbanProvider = {};
+  @property({ type: Boolean }) accessor loading = false;
+  @property({ type: String }) accessor error = '';
+  @state() private accessor query = '';
+  @state() private accessor epicId = '';
+  @state() private accessor operationError = '';
+  @state() private accessor pendingTicketId = '';
+  @state() private accessor draggingTicketId = '';
+  @state() private accessor openingTicket = false;
+  private modal?: DeesModal;
+  private modalOpening?: Promise<DeesModal>;
+  private detail?: DeesKanbanTicketDetail;
+  private selectedId = '';
+  private history: string[] = [];
+  private openAbort?: AbortController;
+  private commentsAbort?: AbortController;
+  private commentCache = new Map<string, IKanbanComment[]>();
+  private commentRevisions = new Map<string, number>();
+  private commentDrafts = new Map<string, TReferenceContent>();
+  private ticketDrafts = new Map<string, IKanbanTicketDraft>();
+  private resolvedTickets = new Map<string, IKanbanTicket>();
+
+  public static styles = [...kanbanStyles, css`
+    :host { padding: 24px; background: var(--dees-color-bg-canvas); min-height: 100%; }
+    .heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
+    h2 { font-size: var(--dees-font-title1-size); font-weight: 650; letter-spacing: -.02em; }
+    .filters { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
+    .filters dees-input-text { flex: 1; min-width: 200px; max-width: 360px; }
+    .filters dees-input-dropdown { min-width: 200px; max-width: 320px; flex: 1; }
+    .columns { display: flex; gap: 16px; overflow-x: auto; padding: 3px 3px 16px; align-items: stretch; }
+    @media (max-width: 600px) { :host { padding: 16px; } .filters { gap: 10px; } .columns { scroll-snap-type: x proximity; } dees-kanban-column { scroll-snap-align: start; flex-basis: 85vw; } }
+  `];
+
+  public async connectedCallback(): Promise<void> {
+    const connection = super.connectedCallback();
+    for (const name of interactionEvents) this.addEventListener(name, this.handleInteraction);
+    await connection;
+  }
+  public updated(): void { this.syncDetail(); }
+  public render() {
+    const epics = sortKanbanTickets(this.tickets.filter(ticket => ticket.kind === 'epic'));
+    const query = this.query.trim().toLocaleLowerCase();
+    const tasks = this.tickets.filter(ticket => ticket.kind === 'task' && (!this.epicId || ticket.parentId === this.epicId) &&
+      (!query || [ticket.key, ticket.title, ticket.assignee?.name, ...ticket.labels ?? [],
+        ...this.tickets.filter(child => child.parentId === ticket.id).map(child => `${child.key} ${child.title}`)].join(' ').toLocaleLowerCase().includes(query)));
+    const epic = epics.find(ticket => ticket.id === this.epicId);
+    return html`<header class="heading"><h2>${this.heading}</h2><span class="caption">${tasks.length} tasks · ${epics.length} epics</span><span class="spacer"></span>
+      ${this.provider.createTicket ? html`<dees-button type="ghost" size="sm" text="New epic" .disabled=${!this.columns.length}
+        @clicked=${() => { void this.createTicket({ kind: 'epic', columnId: this.columns[0].id }); }}></dees-button>
+        <dees-button type="accent" size="sm" icon="lucide:Plus" text="New task" .disabled=${!this.columns.length}
+          @clicked=${() => { void this.createTicket({ kind: 'task', columnId: this.columns[0].id, parentId: this.epicId || undefined }); }}></dees-button>` : ''}</header>
+      <div class="filters"><dees-input-text label="Search tickets" placeholder="Title, ticket number, assignee…" .value=${this.query}
+        @input=${(event: Event) => { this.query = String((event.currentTarget as DeesInputText).value ?? ''); }}></dees-input-text>
+        <dees-input-dropdown label="Epic" .value=${{ key: this.epicId, option: epic?.title ?? 'All epics' }}
+          .options=${[{ key: '', option: 'All epics' }, ...epics.map(ticket => ({ key: ticket.id, option: ticket.title }))]}
+          @selectedOption=${(event: CustomEvent<{ key: string }>) => { this.epicId = event.detail.key; }}></dees-input-dropdown>
+        ${epic ? html`<dees-button type="ghost" size="sm" text="Open epic" @clicked=${() => { void this.openTicket(epic.id); }}></dees-button>` : ''}
+      </div>
+      ${this.loading || this.openingTicket ? html`<p class="caption" role="status">${this.loading ? 'Loading board…' : 'Opening ticket…'}</p>` : ''}
+      ${this.error || this.operationError ? html`<p class="error" role="alert">${this.error || this.operationError}</p>` : ''}
+      ${!this.columns.length ? html`<p class="empty">No columns configured.</p>` : html`<div class="columns" aria-label=${this.heading}>
+        ${this.columns.map(column => html`<dees-kanban-column .column=${column} .columns=${this.columns}
+          .tickets=${tasks.filter(ticket => ticket.columnId === column.id)} .allTickets=${this.tickets}
+          .movable=${Boolean(this.provider.moveTicket) && !this.pendingTicketId} .canCreate=${Boolean(this.provider.createTicket)}
+          .pendingTicketId=${this.pendingTicketId} .draggingTicketId=${this.draggingTicketId}></dees-kanban-column>`)}</div>`}`;
+  }
+
+  private findTicket(id: string): IKanbanTicket | undefined { return this.tickets.find(ticket => ticket.id === id) ?? this.resolvedTickets.get(id); }
+  private searchTickets: TReferenceSearch = async (query, signal) => {
+    const tickets = this.provider.searchTickets ? await this.provider.searchTickets(query, signal) :
+      this.tickets.filter(ticket => ticketLabel(ticket).toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+    if (!signal.aborted) for (const ticket of tickets) this.resolvedTickets.set(ticket.id, ticket);
+    return tickets.map(ticket => ({ id: ticket.id, label: ticketLabel(ticket) }));
+  };
+
+  /** Open a task, epic, subtask or remotely resolved linked ticket in the board's detail modal. */
+  public async openTicket(id: string, addHistory = true): Promise<void> {
+    this.openAbort?.abort();
+    const controller = this.openAbort = new AbortController();
+    this.openingTicket = true;
+    this.operationError = '';
+    try {
+      const ticket = this.provider.getTicket ? await this.provider.getTicket(id, controller.signal) : this.findTicket(id);
+      if (controller.signal.aborted || !this.isConnected) return;
+      if (!ticket || ticket.id !== id) throw new Error('This ticket is unavailable or you do not have access.');
+      this.resolvedTickets.set(ticket.id, ticket);
+      this.tickets = this.tickets.map(item => item.id === ticket.id ? ticket : item);
+      if (addHistory && this.selectedId && this.selectedId !== id && this.modal) this.history.push(this.selectedId);
+      this.selectedId = id;
+      if (!this.detail) {
+        this.detail = new DeesKanbanTicketDetail();
+        for (const name of interactionEvents) this.detail.addEventListener(name, this.handleInteraction);
+      }
+      this.detail.ticket = ticket;
+      this.detail.error = '';
+      this.syncDetail();
+      if (!this.modal && !this.modalOpening) {
+        this.modalOpening = DeesModal.createAndShow({ heading: ticket.key, width: 1000, maxWidth: 1040,
+          mobileFullscreen: true, content: html`${this.detail}`, menuOptions: [] });
+        const modal = await this.modalOpening;
+        this.modalOpening = undefined;
+        if (!this.isConnected) { await modal.destroy(); return; }
+        this.modal = modal;
+        modal.addEventListener('modal-close', () => {
+          if (this.modal !== modal) return;
+          this.modal = undefined; this.selectedId = ''; this.history = [];
+          this.commentsAbort?.abort(); this.openAbort?.abort();
+        }, { once: true });
+      } else if (this.modalOpening) await this.modalOpening;
+      this.syncDetail();
+      if (controller.signal.aborted) return;
+      kanbanEvent(this, 'kanban-ticket-opened', { ticketId: id });
+      await this.refreshComments(id);
+    } catch (error) {
+      if (!controller.signal.aborted) this.reportError(error);
+    } finally { if (this.openAbort === controller) this.openingTicket = false; }
+  }
+
+  private syncDetail(): void {
+    if (!this.detail || !this.selectedId) return;
+    const ticket = this.resolvedTickets.get(this.selectedId) ?? this.findTicket(this.selectedId);
+    if (!ticket) return;
+    // Host-fed updates take precedence for records on this board.
+    this.detail.ticket = this.tickets.find(item => item.id === this.selectedId) ?? ticket;
+    this.detail.tickets = [...this.tickets, ...[...this.resolvedTickets.values()].filter(item => !this.tickets.some(known => known.id === item.id))];
+    this.detail.columns = this.columns; this.detail.people = this.people;
+    this.detail.provider = this.provider; this.detail.searchTickets = this.searchTickets;
+    this.detail.comments = this.commentCache.get(this.selectedId) ?? [];
+    this.detail.commentDraft = this.commentDrafts.get(this.selectedId) ?? [];
+    this.detail.draft = this.ticketDrafts.get(this.selectedId);
+    this.detail.canGoBack = this.history.length > 0;
+    this.detail.saving = this.pendingTicketId === this.selectedId;
+    if (this.modal) this.modal.heading = this.detail.ticket.key;
+  }
+
+  /** Replace a ticket's discussion with an authoritative snapshot (for realtime updates). */
+  public setComments(ticketId: string, comments: IKanbanComment[]): void {
+    if (comments.some(comment => comment.ticketId !== ticketId)) throw new Error('Comment ticket IDs must match.');
+    this.commentCache.set(ticketId, [...comments]);
+    this.commentRevisions.set(ticketId, (this.commentRevisions.get(ticketId) ?? 0) + 1);
+    this.syncDetail();
+  }
+
+  public async refreshComments(ticketId = this.selectedId): Promise<void> {
+    this.commentsAbort?.abort();
+    const controller = this.commentsAbort = new AbortController();
+    if (!ticketId || !this.provider.loadComments) { if (this.detail) { this.detail.loadingComments = false; this.detail.commentsError = ''; } return; }
+    const revision = this.commentRevisions.get(ticketId) ?? 0;
+    const existingIds = new Set((this.commentCache.get(ticketId) ?? []).map(comment => comment.id));
+    if (this.detail && ticketId === this.selectedId) { this.detail.loadingComments = true; this.detail.commentsError = ''; }
+    try {
+      const comments = await this.provider.loadComments(ticketId, controller.signal);
+      if (!controller.signal.aborted && (this.commentRevisions.get(ticketId) ?? 0) === revision) {
+        const postedWhileLoading = (this.commentCache.get(ticketId) ?? []).filter(comment => !existingIds.has(comment.id) && !comments.some(item => item.id === comment.id));
+        this.setComments(ticketId, [...comments, ...postedWhileLoading]);
+      }
+    } catch (error) {
+      if (!controller.signal.aborted && this.detail && ticketId === this.selectedId) this.detail.commentsError = kanbanError(error);
+    } finally {
+      if (!controller.signal.aborted && this.detail && ticketId === this.selectedId) this.detail.loadingComments = false;
+    }
+  }
+
+  private mergeTickets(tickets: IKanbanTicket[], addToBoard = false): void {
+    for (const ticket of tickets) this.resolvedTickets.set(ticket.id, ticket);
+    this.tickets = this.tickets.map(ticket => tickets.find(item => item.id === ticket.id) ?? ticket);
+    if (addToBoard) this.tickets = [...this.tickets, ...tickets.filter(ticket => !this.tickets.some(item => item.id === ticket.id))];
+    this.syncDetail();
+    kanbanEvent(this, 'kanban-change', { tickets });
+  }
+
+  /** Provider commits the move and supplies the new ordering. Hierarchy is never part of a move request. */
+  public async moveTicket(input: IKanbanMove): Promise<void> {
+    const ticket = this.findTicket(input.ticketId);
+    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId || input.beforeTicketId === ticket.id) return;
+    if (!this.columns.some(column => column.id === input.columnId)) { this.reportError(new Error('Unknown destination column.')); return; }
+    const before = input.beforeTicketId ? this.findTicket(input.beforeTicketId) : undefined;
+    if (input.beforeTicketId && (!before || before.columnId !== input.columnId || before.kind !== ticket.kind)) { this.reportError(new Error('Invalid insertion target.')); return; }
+    this.pendingTicketId = ticket.id; this.operationError = ''; this.draggingTicketId = '';
+    try {
+      const changed = await this.provider.moveTicket(input);
+      if (!changed.some(item => item.id === ticket.id)) throw new Error('The move provider did not return the moved ticket.');
+      this.mergeTickets(changed);
+    } catch (error) { this.reportError(error); }
+    finally { this.pendingTicketId = ''; this.syncDetail(); }
+  }
+
+  private async saveTicket(ticketId: string, draft: IKanbanTicketDraft): Promise<void> {
+    const ticket = this.findTicket(ticketId);
+    if (!ticket || !this.provider.updateTicket || ticket.permissions?.edit === false || this.pendingTicketId || !draft.title.trim()) return;
+    const parent = draft.parentId ? this.findTicket(draft.parentId) : undefined;
+    if ((ticket.kind === 'subtask' && parent?.kind !== 'task') || (ticket.kind === 'task' && draft.parentId && parent?.kind !== 'epic')) {
+      this.reportError(new Error('Choose a valid parent ticket.')); return;
+    }
+    const assignee = this.people.find(person => person.id === draft.assigneeId) ?? (ticket.assignee?.id === draft.assigneeId ? ticket.assignee : undefined);
+    if (draft.assigneeId && !assignee) { this.reportError(new Error('Choose an available assignee.')); return; }
+    this.pendingTicketId = ticketId; this.operationError = ''; if (this.detail) this.detail.error = '';
+    try {
+      const saved = await this.provider.updateTicket({ ticketId, changes: { title: draft.title.trim(), description: draft.description,
+        priority: draft.priority, assignee: assignee ?? null, parentId: ticket.kind === 'epic' ? null : draft.parentId || null } });
+      if (saved.id !== ticketId) throw new Error('The update provider returned a different ticket.');
+      this.ticketDrafts.delete(ticketId);
+      this.mergeTickets([saved]);
+      if (this.selectedId === ticketId) this.detail?.finishEditing();
+    } catch (error) { this.reportError(error); }
+    finally { this.pendingTicketId = ''; this.syncDetail(); }
+  }
+
+  private async createTicket(input: Omit<IKanbanCreate, 'title'>): Promise<void> {
+    if (!this.provider.createTicket || !this.columns.some(column => column.id === input.columnId)) return;
+    const parent = input.parentId ? this.findTicket(input.parentId) : undefined;
+    if (parent?.permissions?.createChild === false) return;
+    if ((input.kind === 'subtask' && parent?.kind !== 'task') || (input.kind === 'task' && parent && parent.kind !== 'epic')) return;
+    const parentId = input.parentId ?? (input.kind === 'task' ? this.epicId || undefined : undefined);
+    await DeesModal.prompt({ heading: `New ${input.kind}`, label: 'Title', confirmLabel: 'Create', onConfirm: async title => {
+      const ticket = await this.provider.createTicket!({ ...input, parentId, title });
+      this.mergeTickets([ticket], true);
+    } });
+  }
+
+  private async openMoveMenu(ticketId: string, anchor: HTMLElement): Promise<void> {
+    const ticket = this.findTicket(ticketId);
+    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId) return;
+    const siblings = sortKanbanTickets(this.tickets.filter(item => item.columnId === ticket.columnId && item.kind === ticket.kind));
+    const index = siblings.findIndex(item => item.id === ticket.id);
+    const rect = anchor.getBoundingClientRect();
+    await DeesContextmenu.openContextMenuWithOptions(new MouseEvent('click', { clientX: rect.right, clientY: rect.bottom }), [
+      { name: 'Move up', disabled: index <= 0, action: async () => { if (index > 0) await this.moveTicket({ ticketId, columnId: ticket.columnId, beforeTicketId: siblings[index - 1].id }); } },
+      { name: 'Move down', disabled: index < 0 || index >= siblings.length - 1, action: async () => { if (index >= 0 && index < siblings.length - 1) await this.moveTicket({ ticketId, columnId: ticket.columnId, beforeTicketId: siblings[index + 2]?.id }); } },
+      { divider: true }, ...this.columns.filter(column => column.id !== ticket.columnId).map(column => ({ name: `Move to ${column.title}`, action: async () => { await this.moveTicket({ ticketId, columnId: column.id }); } })),
+    ], { ownerElement: anchor });
+  }
+
+  private reportError(error: unknown): void {
+    this.operationError = kanbanError(error);
+    if (this.detail && this.modal) this.detail.error = this.operationError;
+    kanbanEvent(this, 'kanban-error', { error, message: this.operationError });
+  }
+
+  private handleInteraction = (event: Event): void => {
+    event.stopPropagation();
+    const { type, detail } = event as unknown as TKanbanInteraction;
+    switch (type) {
+      case 'kanban-ticket-open': void this.openTicket(detail.ticketId); break;
+      case 'kanban-ticket-move': void this.moveTicket(detail); break;
+      case 'kanban-ticket-create': void this.createTicket(detail).catch(error => this.reportError(error)); break;
+      case 'kanban-move-menu': void this.openMoveMenu(detail.ticketId, detail.anchor).catch(error => this.reportError(error)); break;
+      case 'kanban-ticket-save': void this.saveTicket(detail.ticketId, detail.draft); break;
+      case 'kanban-ticket-draft':
+        if (detail.draft) this.ticketDrafts.set(detail.ticketId, detail.draft); else this.ticketDrafts.delete(detail.ticketId);
+        this.syncDetail(); break;
+      case 'kanban-comment-draft': this.commentDrafts.set(detail.ticketId, detail.body); break;
+      case 'kanban-comment-added': {
+        const { comment, submittedBody } = detail;
+        const comments = this.commentCache.get(comment.ticketId) ?? [];
+        this.commentCache.set(comment.ticketId, [...comments.filter(item => item.id !== comment.id), comment]);
+        if (JSON.stringify(this.commentDrafts.get(comment.ticketId) ?? []) === JSON.stringify(submittedBody)) this.commentDrafts.delete(comment.ticketId);
+        this.syncDetail(); kanbanEvent(this, 'kanban-comment-saved', { comment }); break;
+      }
+      case 'kanban-comments-refresh': void this.refreshComments(detail.ticketId); break;
+      case 'kanban-detail-back': { const previous = this.history.pop(); if (previous) void this.openTicket(previous, false); break; }
+      case 'kanban-drag-start': this.draggingTicketId = detail.ticketId; break;
+      case 'kanban-drag-end': this.draggingTicketId = ''; break;
+    }
+  };
+
+  public async disconnectedCallback(): Promise<void> {
+    for (const name of interactionEvents) this.removeEventListener(name, this.handleInteraction);
+    this.openAbort?.abort(); this.commentsAbort?.abort();
+    void this.modal?.destroy();
+    await super.disconnectedCallback();
+  }
+}

package/ts_web/elements/00group-kanban/dees-kanban-card/dees-kanban-card.ts

@@ -0,0 +1,58 @@
+import { DeesElement, customElement, property, html, css } from '@design.estate/dees-element';
+import type { IKanbanTicket, IKanbanColumn } from '../interfaces.js';
+import { kanbanStyles } from '../kanban.styles.js';
+import { kanbanEvent } from '../kanban.helpers.js';
+import '../../00group-button/dees-button/dees-button.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global { interface HTMLElementTagNameMap { 'dees-kanban-card': DeesKanbanCard; } }
+
+@customElement('dees-kanban-card')
+export class DeesKanbanCard extends DeesElement {
+  @property({ attribute: false }) accessor ticket: IKanbanTicket | undefined;
+  @property({ attribute: false }) accessor epic: IKanbanTicket | undefined;
+  @property({ attribute: false }) accessor subtasks: IKanbanTicket[] = [];
+  @property({ attribute: false }) accessor columns: IKanbanColumn[] = [];
+  @property({ type: Boolean }) accessor movable = false;
+  @property({ type: Boolean }) accessor pending = false;
+  public static styles = [...kanbanStyles, css`
+    article { padding: 14px; border: 1px solid var(--dees-color-border-default); border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-primary); box-shadow: var(--dees-shadow-xs); }
+    article:hover { border-color: var(--dees-color-border-strong); }
+    article[aria-busy=true] { opacity: .65; }
+    .title { display: block; width: 100%; border: 0; background: transparent; padding: 8px 0 12px; color: inherit; text-align: left; cursor: pointer; font: inherit; font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; }
+    .key { font-variant-numeric: tabular-nums; }
+    .link.epic { margin-bottom: 5px; max-width: 100%; font-size: var(--dees-font-caption1-size); }
+    .labels { margin-bottom: 10px; }
+    .priority[data-priority=urgent], .priority[data-priority=high] { color: var(--dees-color-text-warning); }
+    .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--dees-color-badge-default-bg); display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; }
+    summary { cursor: pointer; padding: 10px 0 2px; font-size: var(--dees-font-footnote-size); color: var(--dees-color-text-secondary); }
+    .subtask { display: flex; gap: 6px; align-items: baseline; padding-top: 8px; font-size: var(--dees-font-footnote-size); }
+  `];
+  private open(ticketId: string): void { kanbanEvent(this, 'kanban-ticket-open', { ticketId }); }
+  public render() {
+    const ticket = this.ticket;
+    if (!ticket) return html``;
+    const completed = this.subtasks.filter(task => this.columns.some(column => column.id === task.columnId && column.done)).length;
+    return html`<article aria-busy=${String(this.pending)} draggable=${this.movable && !this.pending ? 'true' : 'false'}
+      @dragstart=${(event: DragEvent) => {
+        if (!this.movable || this.pending || !event.dataTransfer) { event.preventDefault(); return; }
+        event.dataTransfer.setData('application/x-dees-kanban-ticket', ticket.id);
+        event.dataTransfer.effectAllowed = 'move';
+        kanbanEvent(this, 'kanban-drag-start', { ticketId: ticket.id });
+      }} @dragend=${() => kanbanEvent(this, 'kanban-drag-end', {})}>
+      ${this.epic ? html`<button class="link epic" @click=${() => this.open(this.epic!.id)}>${this.epic.title}</button>` : ''}
+      <div class="row caption"><span class="key">${ticket.key}</span><span class="spacer"></span>
+        ${ticket.priority && ticket.priority !== 'none' ? html`<span class="priority" data-priority=${ticket.priority}>${ticket.priority}</span>` : ''}</div>
+      <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>
+      ${ticket.labels?.length ? html`<div class="row labels">${ticket.labels.map(label => html`<span class="badge">${label}</span>`)}</div>` : ''}
+      <div class="row caption"><span class="avatar" title=${ticket.assignee?.name ?? 'Unassigned'}>${ticket.assignee?.name.split(/\s+/).map(part => part[0]).join('').slice(0, 2) ?? '–'}</span>
+        <span>${ticket.assignee?.name ?? 'Unassigned'}</span><span class="spacer"></span>
+        ${this.movable ? html`<dees-button size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending}
+          @clicked=${(event: Event) => kanbanEvent(this, 'kanban-move-menu', { ticketId: ticket.id, anchor: event.currentTarget as HTMLElement })}></dees-button>` : ''}
+      </div>
+      ${this.subtasks.length ? html`<details><summary>${completed}/${this.subtasks.length} subtasks complete</summary>
+        ${this.subtasks.map(task => html`<div class="subtask"><span>${this.columns.some(column => column.id === task.columnId && column.done) ? '✓' : '○'}</span>
+          <button class="link" @click=${() => this.open(task.id)}>${task.title}</button></div>`)}</details>` : ''}
+    </article>`;
+  }
+}

package/ts_web/elements/00group-kanban/dees-kanban-column/dees-kanban-column.ts

@@ -0,0 +1,60 @@
+import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import type { IKanbanColumn, IKanbanTicket } from '../interfaces.js';
+import { kanbanStyles } from '../kanban.styles.js';
+import { kanbanEvent, sortKanbanTickets } from '../kanban.helpers.js';
+import '../dees-kanban-card/dees-kanban-card.js';
+
+declare global { interface HTMLElementTagNameMap { 'dees-kanban-column': DeesKanbanColumn; } }
+
+@customElement('dees-kanban-column')
+export class DeesKanbanColumn extends DeesElement {
+  @property({ attribute: false }) accessor column: IKanbanColumn | undefined;
+  @property({ attribute: false }) accessor tickets: IKanbanTicket[] = [];
+  @property({ attribute: false }) accessor allTickets: IKanbanTicket[] = [];
+  @property({ attribute: false }) accessor columns: IKanbanColumn[] = [];
+  @property({ type: Boolean }) accessor movable = false;
+  @property({ type: Boolean }) accessor canCreate = false;
+  @property({ type: String }) accessor pendingTicketId = '';
+  @property({ type: String }) accessor draggingTicketId = '';
+  @state() private accessor dropBefore: string | undefined;
+  @state() private accessor draggingOver = false;
+  public static styles = [...kanbanStyles, css`
+    :host { display: flex; flex-direction: column; width: 300px; min-width: 270px; flex: 1 0 270px; }
+    section { min-height: 220px; height: 100%; border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-secondary); padding: 10px; }
+    header { display: flex; align-items: center; gap: 8px; padding: 3px 3px 12px; }
+    h3 { font-size: var(--dees-font-body-size); font-weight: 600; }
+    .count { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
+    .stack { display: grid; gap: 10px; min-height: 80px; align-content: start; }
+    .target { position: relative; }
+    .target.before::before, .end-target.before::before { content: ''; display: block; height: 3px; background: var(--dees-color-accent-primary); border-radius: 2px; margin-bottom: 7px; }
+    .end-target { min-height: 20px; padding-top: 10px; }
+    section.over { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 1px; }
+  `];
+  public updated(): void { if (!this.draggingTicketId) this.draggingOver = false; }
+  public render() {
+    if (!this.column) return html``;
+    return html`<section class=${this.draggingOver ? 'over' : ''} aria-label=${this.column.title}
+      @dragover=${(event: DragEvent) => { if (this.draggingTicketId && this.movable) { event.preventDefault(); this.draggingOver = true; if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'; } }}
+      @dragleave=${(event: DragEvent) => { if (!(event.relatedTarget instanceof Node) || !(event.currentTarget as Node).contains(event.relatedTarget)) this.draggingOver = false; }}
+      @drop=${(event: DragEvent) => {
+        event.preventDefault(); this.draggingOver = false;
+        if (this.movable && this.draggingTicketId && event.dataTransfer?.getData('application/x-dees-kanban-ticket') === this.draggingTicketId)
+          kanbanEvent(this, 'kanban-ticket-move', { ticketId: this.draggingTicketId, columnId: this.column!.id, beforeTicketId: this.dropBefore });
+      }}>
+      <header><h3>${this.column.title}</h3><span class="count">${this.tickets.length}</span><span class="spacer"></span>
+        ${this.canCreate ? html`<dees-button type="ghost" size="icon" icon="lucide:Plus" text=${`Add task to ${this.column.title}`}
+          @clicked=${() => kanbanEvent(this, 'kanban-ticket-create', { kind: 'task', columnId: this.column!.id })}></dees-button>` : ''}</header>
+      <div class="stack">${sortKanbanTickets(this.tickets).map(ticket => html`
+        <div class="target ${this.draggingOver && this.dropBefore === ticket.id ? 'before' : ''}"
+          @dragover=${() => { this.dropBefore = ticket.id; }}>
+          <dees-kanban-card .ticket=${ticket} .columns=${this.columns}
+            .epic=${this.allTickets.find(item => item.id === ticket.parentId && item.kind === 'epic')}
+            .subtasks=${sortKanbanTickets(this.allTickets.filter(item => item.parentId === ticket.id && item.kind === 'subtask'))}
+            .movable=${this.movable && ticket.permissions?.move !== false} .pending=${this.pendingTicketId === ticket.id}></dees-kanban-card>
+        </div>`)}
+        ${!this.tickets.length ? html`<div class="empty" @dragover=${() => { this.dropBefore = undefined; }}>No tasks</div>` : ''}
+      </div>
+      <div class="end-target ${this.draggingOver && !this.dropBefore ? 'before' : ''}" @dragover=${() => { this.dropBefore = undefined; }}></div>
+    </section>`;
+  }
+}

package/ts_web/elements/00group-kanban/dees-kanban-discussion/dees-kanban-discussion.ts

@@ -0,0 +1,81 @@
+import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import type { IKanbanComment, IKanbanProvider } from '../interfaces.js';
+import { kanbanStyles } from '../kanban.styles.js';
+import { kanbanError, kanbanEvent } from '../kanban.helpers.js';
+import { referenceText, type TReferenceContent, type TReferenceSearch } from '../../00group-input/dees-input-reference/index.js';
+import '../../00group-button/dees-button/dees-button.js';
+
+declare global { interface HTMLElementTagNameMap { 'dees-kanban-discussion': DeesKanbanDiscussion; } }
+
+@customElement('dees-kanban-discussion')
+export class DeesKanbanDiscussion extends DeesElement {
+  @property({ type: String }) accessor ticketId = '';
+  @property({ attribute: false }) accessor comments: IKanbanComment[] = [];
+  @property({ attribute: false }) accessor draft: TReferenceContent = [];
+  @property({ attribute: false }) accessor searchTickets: TReferenceSearch | undefined;
+  @property({ attribute: false }) accessor addComment: IKanbanProvider['addComment'];
+  @property({ type: Boolean }) accessor loading = false;
+  @property({ type: Boolean }) accessor readOnly = false;
+  @property({ type: String }) accessor error = '';
+  @state() private accessor pending = new Set<string>();
+  @state() private accessor failures = new Map<string, string>();
+  public static styles = [...kanbanStyles, css`
+    header { display: flex; align-items: center; margin-bottom: 16px; }
+    h3 { font-size: var(--dees-font-body-size); font-weight: 600; }
+    ol { list-style: none; padding: 0; margin: 0; }
+    li { padding: 0 0 20px; }
+    .author { font-weight: 550; font-size: var(--dees-font-footnote-size); }
+    time { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
+    .message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin-top: 6px; }
+    .reference { display: inline; border: 0; border-radius: var(--dees-radius-sm); padding: 1px 4px; color: var(--dees-color-link); background: var(--dees-color-badge-default-bg); font: inherit; cursor: pointer; }
+    .compose { padding-top: 4px; }
+    .compose .row { padding-top: 8px; }
+  `];
+  public render() {
+    const pending = this.pending.has(this.ticketId);
+    const comments = this.comments.filter(comment => comment.ticketId === this.ticketId)
+      .slice().sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt));
+    return html`<header><h3>Discussion <span class="caption">${comments.length}</span></h3><span class="spacer"></span>
+      <dees-button size="sm" type="ghost" icon="lucide:RefreshCw" text="Refresh" .disabled=${this.loading}
+        @clicked=${() => kanbanEvent(this, 'kanban-comments-refresh', { ticketId: this.ticketId })}></dees-button></header>
+      ${this.loading ? html`<p class="caption" role="status">Loading comments…</p>` : ''}
+      ${this.error ? html`<p class="error" role="alert">${this.error}</p>` : ''}
+      <ol aria-label="Comments">${comments.map(comment => html`<li>
+        <div class="row"><span class="author">${comment.author.name}</span><time datetime=${comment.createdAt}>${new Date(comment.createdAt).toLocaleString()}</time></div>
+        <div class="message">${comment.body.map(part => part.type === 'text' ? part.text : html`<button class="reference"
+          @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: part.id })}>${part.label}</button>`)}</div>
+      </li>`)}</ol>
+      ${!comments.length && !this.loading && !this.error ? html`<p class="empty">Start the conversation.</p>` : ''}
+      ${this.addComment && !this.readOnly ? html`<div class="compose">
+        <dees-input-reference label="Comment" placeholder="Write a comment…" .documentKey=${this.ticketId} .value=${this.draft} .disabled=${pending}
+          .searchReferences=${this.searchTickets}
+          @reference-input=${(event: CustomEvent<{ value: TReferenceContent }>) => {
+            this.draft = event.detail.value;
+            kanbanEvent(this, 'kanban-comment-draft', { ticketId: this.ticketId, body: this.draft });
+          }}
+          @reference-open=${(event: CustomEvent<{ id: string }>) => kanbanEvent(this, 'kanban-ticket-open', { ticketId: event.detail.id })}
+          @reference-submit=${() => { void this.submit(); }}></dees-input-reference>
+        <div class="row"><span class="caption">Type #_ to link a ticket · Ctrl/⌘ Enter to send</span><span class="spacer"></span>
+          <dees-button type="accent" size="sm" text="Comment" .disabled=${pending || !referenceText(this.draft).trim()}
+            .status=${pending ? 'pending' : 'normal'} @clicked=${() => { void this.submit(); }}></dees-button></div>
+        ${this.failures.get(this.ticketId) ? html`<p class="error" role="alert">${this.failures.get(this.ticketId)}</p>` : ''}
+      </div>` : html`<p class="caption">Comments are read-only.</p>`}`;
+  }
+  public async submit(): Promise<void> {
+    const ticketId = this.ticketId;
+    if (!ticketId || !this.addComment || this.readOnly || this.pending.has(ticketId) || !referenceText(this.draft).trim()) return;
+    const body = this.draft.map(part => ({ ...part }));
+    this.pending = new Set(this.pending).add(ticketId);
+    this.failures = new Map(this.failures); this.failures.delete(ticketId);
+    try {
+      const comment = await this.addComment({ ticketId, body });
+      if (comment.ticketId !== ticketId) throw new Error('The saved comment belongs to a different ticket.');
+      if (this.ticketId === ticketId && JSON.stringify(this.draft) === JSON.stringify(body)) this.draft = [];
+      kanbanEvent(this, 'kanban-comment-added', { comment, submittedBody: body });
+    } catch (error) {
+      this.failures = new Map(this.failures).set(ticketId, kanbanError(error));
+    } finally {
+      this.pending = new Set(this.pending); this.pending.delete(ticketId);
+    }
+  }
+}