@design.estate/dees-catalog 12.3.0 → 12.5.0

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);
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import type { IKanbanColumn, IKanbanComment, IKanbanPerson, IKanbanProvider, IKanbanTicket, IKanbanTicketDraft, TKanbanPriority } from '../interfaces.js';
+import type { TReferenceContent, TReferenceSearch } from '../../00group-input/dees-input-reference/interfaces.js';
+import { kanbanStyles } from '../kanban.styles.js';
+import { kanbanEvent, sortKanbanTickets, ticketDraft, ticketLabel } from '../kanban.helpers.js';
+import type { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
+import type { DeesInputTextarea } from '../../00group-input/dees-input-textarea/dees-input-textarea.js';
+import '../../00group-input/dees-input-text/dees-input-text.js';
+import '../../00group-input/dees-input-textarea/dees-input-textarea.js';
+import '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
+import '../dees-kanban-discussion/dees-kanban-discussion.js';
+
+declare global { interface HTMLElementTagNameMap { 'dees-kanban-ticket-detail': DeesKanbanTicketDetail; } }
+
+@customElement('dees-kanban-ticket-detail')
+export class DeesKanbanTicketDetail extends DeesElement {
+  @property({ attribute: false }) accessor ticket: IKanbanTicket | undefined;
+  @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({ attribute: false }) accessor draft: IKanbanTicketDraft | undefined;
+  @property({ attribute: false }) accessor commentDraft: TReferenceContent = [];
+  @property({ attribute: false }) accessor comments: IKanbanComment[] = [];
+  @property({ attribute: false }) accessor searchTickets: TReferenceSearch | undefined;
+  @property({ type: Boolean }) accessor loadingComments = false;
+  @property({ type: String }) accessor commentsError = '';
+  @property({ type: String }) accessor error = '';
+  @property({ type: Boolean }) accessor saving = false;
+  @property({ type: Boolean }) accessor canGoBack = false;
+  @state() private accessor editing = false;
+  public static styles = [...kanbanStyles, css`
+    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; }
+    .main { min-width: 0; }
+    .toolbar { margin-bottom: 16px; }
+    h2 { font-size: var(--dees-font-title2-size); line-height: 1.3; font-weight: 600; margin-bottom: 18px; overflow-wrap: anywhere; }
+    .description { white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere; margin-bottom: 24px; }
+    aside { border-left: 1px solid var(--dees-color-border-subtle); padding-left: 22px; }
+    .fields { display: grid; gap: 16px; }
+    .fields label { display: block; margin-bottom: 6px; }
+    h3 { font-size: var(--dees-font-body-size); margin-bottom: 12px; }
+    .children { margin-bottom: 24px; }
+    .child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dees-color-border-subtle); }
+    .discussion { border-top: 1px solid var(--dees-color-border-subtle); padding-top: 22px; }
+    .edit { display: grid; gap: 14px; margin-bottom: 22px; }
+    @media (max-width: 700px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } aside { grid-row: 1; border-left: 0; padding-left: 0; } .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  `];
+  public updated(changed: Map<string, unknown>): void {
+    const previous = changed.get('ticket') as IKanbanTicket | undefined;
+    if (changed.has('ticket') && previous?.id !== this.ticket?.id) this.editing = Boolean(this.draft);
+  }
+  private changeDraft(change: Partial<IKanbanTicketDraft>): void {
+    this.draft = { ...(this.draft ?? ticketDraft(this.ticket!)), ...change };
+    kanbanEvent(this, 'kanban-ticket-draft', { ticketId: this.ticket!.id, draft: this.draft });
+  }
+  private addComment = (input: Parameters<NonNullable<IKanbanProvider['addComment']>>[0]) => this.provider.addComment!(input);
+  public render() {
+    const ticket = this.ticket;
+    if (!ticket) return html``;
+    const draft = this.draft ?? ticketDraft(ticket);
+    const parent = this.tickets.find(item => item.id === ticket.parentId);
+    const children = sortKanbanTickets(this.tickets.filter(item => item.parentId === ticket.id));
+    const editable = Boolean(this.provider.updateTicket) && ticket.permissions?.edit !== false;
+    const movable = Boolean(this.provider.moveTicket) && ticket.permissions?.move !== false;
+    const parents = this.tickets.filter(item => item.kind === (ticket.kind === 'subtask' ? 'task' : 'epic'));
+    return html`<div class="toolbar row">
+      ${this.canGoBack ? html`<dees-button size="sm" type="ghost" icon="lucide:ArrowLeft" text="Back" @clicked=${() => kanbanEvent(this, 'kanban-detail-back', {})}></dees-button>` : ''}
+      <span class="badge">${ticket.kind}</span><span class="caption">${ticket.key}</span>
+      ${parent ? html`<span class="caption">/</span><button class="link caption" @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: parent.id })}>${parent.title}</button>` : ''}
+      <span class="spacer"></span>${editable && !this.editing ? html`<dees-button size="sm" type="ghost" text="Edit ticket" icon="lucide:Pencil" @clicked=${() => { this.editing = true; this.changeDraft({}); }}></dees-button>` : ''}
+    </div>
+    ${this.error ? html`<p class="error" role="alert">${this.error}</p>` : ''}
+    <div class="layout"><div class="main">
+      ${this.editing && editable ? html`<div class="edit">
+        <dees-input-text label="Title" .value=${draft.title} .disabled=${this.saving}
+          @input=${(event: Event) => this.changeDraft({ title: String((event.currentTarget as DeesInputText).value ?? '') })}></dees-input-text>
+        <dees-input-textarea label="Description" .value=${draft.description} .rows=${5} .disabled=${this.saving}
+          @input=${(event: Event) => this.changeDraft({ description: (event.currentTarget as DeesInputTextarea).value })}></dees-input-textarea>
+        <div class="row"><dees-button size="sm" type="accent" text="Save changes" .disabled=${this.saving || !draft.title.trim()} .status=${this.saving ? 'pending' : 'normal'}
+          @clicked=${() => kanbanEvent(this, 'kanban-ticket-save', { ticketId: ticket.id, draft })}></dees-button>
+          <dees-button size="sm" type="ghost" text="Cancel" .disabled=${this.saving} @clicked=${() => {
+            this.editing = false; this.draft = undefined; kanbanEvent(this, 'kanban-ticket-draft', { ticketId: ticket.id, draft: undefined });
+          }}></dees-button></div>
+      </div>` : html`<h2>${ticket.title}</h2><div class="description ${ticket.description ? '' : 'muted'}">${ticket.description || 'No description yet.'}</div>`}
+      ${ticket.kind !== 'subtask' ? html`<section class="children"><div class="row"><h3>${ticket.kind === 'epic' ? 'Tasks' : 'Subtasks'}</h3><span class="spacer"></span>
+        ${this.provider.createTicket && ticket.permissions?.createChild !== false ? html`<dees-button size="sm" type="ghost" icon="lucide:Plus" text=${ticket.kind === 'epic' ? 'Add task' : 'Add subtask'}
+          @clicked=${() => kanbanEvent(this, 'kanban-ticket-create', { kind: ticket.kind === 'epic' ? 'task' : 'subtask', parentId: ticket.id, columnId: this.columns[0]?.id ?? ticket.columnId })}></dees-button>` : ''}</div>
+        ${children.map(child => html`<div class="child"><button class="link" @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: child.id })}>${ticketLabel(child)}</button>
+          <span class="badge">${this.columns.find(column => column.id === child.columnId)?.title ?? child.columnId}</span></div>`)}
+        ${!children.length ? html`<p class="caption">No ${ticket.kind === 'epic' ? 'tasks' : 'subtasks'} yet.</p>` : ''}</section>` : ''}
+      <dees-kanban-discussion class="discussion" .ticketId=${ticket.id} .comments=${this.comments} .draft=${this.commentDraft}
+        .loading=${this.loadingComments} .error=${this.commentsError} .readOnly=${ticket.permissions?.comment === false}
+        .searchTickets=${this.searchTickets} .addComment=${this.provider.addComment ? this.addComment : undefined}></dees-kanban-discussion>
+    </div><aside><div class="fields">
+      <dees-input-dropdown label="Status" .options=${this.columns.map(column => ({ key: column.id, option: column.title }))}
+        .value=${{ key: ticket.columnId, option: this.columns.find(column => column.id === ticket.columnId)?.title ?? ticket.columnId }}
+        .disabled=${!movable || this.saving} @selectedOption=${(event: CustomEvent<{ key: string }>) => kanbanEvent(this, 'kanban-ticket-move', { ticketId: ticket.id, columnId: event.detail.key })}></dees-input-dropdown>
+      ${this.editing && editable ? html`
+        <dees-input-dropdown label="Priority" .disabled=${this.saving} .value=${{ key: draft.priority, option: draft.priority }}
+          .options=${['none', 'low', 'normal', 'high', 'urgent'].map(key => ({ key, option: key }))}
+          @selectedOption=${(event: CustomEvent<{ key: TKanbanPriority }>) => this.changeDraft({ priority: event.detail.key })}></dees-input-dropdown>
+        <dees-input-dropdown label="Assignee" .disabled=${this.saving} .value=${{ key: draft.assigneeId, option: this.people.find(person => person.id === draft.assigneeId)?.name ?? ticket.assignee?.name ?? 'Unassigned' }}
+          .options=${[{ key: '', option: 'Unassigned' }, ...this.people.map(person => ({ key: person.id, option: person.name }))]}
+          @selectedOption=${(event: CustomEvent<{ key: string }>) => this.changeDraft({ assigneeId: event.detail.key })}></dees-input-dropdown>
+        ${ticket.kind !== 'epic' ? html`<dees-input-dropdown label=${ticket.kind === 'task' ? 'Epic' : 'Parent task'} .disabled=${this.saving}
+          .value=${{ key: draft.parentId, option: parents.find(item => item.id === draft.parentId)?.title ?? 'None' }}
+          .options=${[...(ticket.kind === 'task' ? [{ key: '', option: 'None' }] : []), ...parents.map(item => ({ key: item.id, option: ticketLabel(item) }))]}
+          @selectedOption=${(event: CustomEvent<{ key: string }>) => this.changeDraft({ parentId: event.detail.key })}></dees-input-dropdown>` : ''}
+      ` : html`<div><label class="caption">Priority</label>${ticket.priority ?? 'none'}</div><div><label class="caption">Assignee</label>${ticket.assignee?.name ?? 'Unassigned'}</div>`}
+      ${ticket.labels?.length ? html`<div><label class="caption">Labels</label><div class="row">${ticket.labels.map(label => html`<span class="badge">${label}</span>`)}</div></div>` : ''}
+    </div></aside></div>`;
+  }
+  public finishEditing(): void { this.editing = false; }
+}

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

@@ -0,0 +1,6 @@
+export * from './interfaces.js';
+export * from './dees-kanban/dees-kanban.js';
+export * from './dees-kanban-card/dees-kanban-card.js';
+export * from './dees-kanban-column/dees-kanban-column.js';
+export * from './dees-kanban-ticket-detail/dees-kanban-ticket-detail.js';
+export * from './dees-kanban-discussion/dees-kanban-discussion.js';

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

@@ -0,0 +1,67 @@
+import type { TReferenceContent } from '../00group-input/dees-input-reference/interfaces.js';
+
+export type TKanbanTicketKind = 'epic' | 'task' | 'subtask';
+export type TKanbanPriority = 'none' | 'low' | 'normal' | 'high' | 'urgent';
+export interface IKanbanPerson { id: string; name: string; }
+export interface IKanbanColumn { id: string; title: string; /** Marks completed subtasks. */ done?: boolean; }
+export interface IKanbanTicket {
+  id: string;
+  key: string;
+  kind: TKanbanTicketKind;
+  title: string;
+  description?: string;
+  /** Task -> epic, subtask -> task. Epics have no parent. */
+  parentId?: string;
+  columnId: string;
+  order: number;
+  priority?: TKanbanPriority;
+  assignee?: IKanbanPerson;
+  labels?: string[];
+  /** UI capabilities; the provider must enforce authorization independently. */
+  permissions?: { edit?: boolean; move?: boolean; comment?: boolean; createChild?: boolean };
+}
+export interface IKanbanComment {
+  id: string;
+  ticketId: string;
+  author: IKanbanPerson;
+  /** ISO 8601 timestamp. */
+  createdAt: string;
+  body: TReferenceContent;
+}
+export interface IKanbanTicketChanges {
+  title?: string;
+  description?: string;
+  priority?: TKanbanPriority;
+  assignee?: IKanbanPerson | null;
+  parentId?: string | null;
+}
+export interface IKanbanTicketDraft {
+  title: string;
+  description: string;
+  priority: TKanbanPriority;
+  assigneeId: string;
+  parentId: string;
+}
+export interface IKanbanMove {
+  ticketId: string;
+  columnId: string;
+  /** Omitted means append. Provider assigns ordering atomically with the move. */
+  beforeTicketId?: string;
+}
+export interface IKanbanCreate {
+  kind: TKanbanTicketKind;
+  title: string;
+  columnId: string;
+  parentId?: string;
+}
+/** Missing mutation callbacks make the corresponding controls read-only. AbortSignals cancel obsolete reads. */
+export interface IKanbanProvider {
+  getTicket?: (id: string, signal: AbortSignal) => Promise<IKanbanTicket>;
+  searchTickets?: (query: string, signal: AbortSignal) => Promise<IKanbanTicket[]>;
+  loadComments?: (ticketId: string, signal: AbortSignal) => Promise<IKanbanComment[]>;
+  addComment?: (input: { ticketId: string; body: TReferenceContent }) => Promise<IKanbanComment>;
+  updateTicket?: (input: { ticketId: string; changes: IKanbanTicketChanges }) => Promise<IKanbanTicket>;
+  /** Return all records whose order or column changed. */
+  moveTicket?: (input: IKanbanMove) => Promise<IKanbanTicket[]>;
+  createTicket?: (input: IKanbanCreate) => Promise<IKanbanTicket>;
+}

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

@@ -0,0 +1,56 @@
+import type { IKanbanColumn, IKanbanComment, IKanbanPerson, IKanbanProvider, IKanbanTicket } from './interfaces.js';
+
+export const kanbanDemoPeople: IKanbanPerson[] = [{ id: 'mara', name: 'Mara Chen' }, { id: 'jonas', name: 'Jonas Berg' }, { id: 'alex', name: 'Alex Rivera' }];
+export const kanbanDemoColumns: IKanbanColumn[] = [{ id: 'backlog', title: 'Backlog' }, { id: 'progress', title: 'In progress' }, { id: 'review', title: 'In review' }, { id: 'done', title: 'Done', done: true }];
+export const createKanbanDemo = (): { tickets: IKanbanTicket[]; provider: IKanbanProvider } => {
+  let tickets: IKanbanTicket[] = [
+    { id: 'epic-1', key: 'CAT-100', kind: 'epic', title: 'A calmer workspace', description: 'Make daily work feel focused, connected and easy to navigate.', columnId: 'progress', order: 0 },
+    { id: 'epic-2', key: 'CAT-200', kind: 'epic', title: 'Built for teams', description: 'Keep everyone close to the work and the decisions behind it.', columnId: 'progress', order: 1 },
+    { id: 'task-1', key: 'CAT-101', kind: 'task', title: 'Design the project overview', description: 'Give each project a clear home. Surface the next action, recent activity and open questions.', parentId: 'epic-1', columnId: 'backlog', order: 0, priority: 'normal', assignee: kanbanDemoPeople[0], labels: ['Design'] },
+    { id: 'task-2', key: 'CAT-102', kind: 'task', title: 'Connect related tickets', description: 'Type #_ in a comment to search for another ticket. Keep the reference connected when its title changes.', parentId: 'epic-2', columnId: 'progress', order: 0, priority: 'high', assignee: kanbanDemoPeople[1], labels: ['Collaboration'] },
+    { id: 'task-3', key: 'CAT-103', kind: 'task', title: 'Make every action keyboard accessible', description: 'Support focus, selection, navigation and moving tickets without a mouse.', parentId: 'epic-1', columnId: 'progress', order: 1, priority: 'normal', assignee: kanbanDemoPeople[2], labels: ['Accessibility'] },
+    { id: 'task-4', key: 'CAT-104', kind: 'task', title: 'Review the ticket detail experience', description: 'Check hierarchy navigation, discussion drafts and small-screen layouts.', parentId: 'epic-2', columnId: 'review', order: 0, priority: 'low', assignee: kanbanDemoPeople[0] },
+    { id: 'task-5', key: 'CAT-105', kind: 'task', title: 'Unify status and priority styles', description: 'Use shared catalog tokens in light and dark themes.', parentId: 'epic-1', columnId: 'done', order: 0, assignee: kanbanDemoPeople[2], labels: ['Foundations'] },
+    { id: 'sub-1', key: 'CAT-106', kind: 'subtask', title: 'Anchor search to the cursor', parentId: 'task-2', columnId: 'done', order: 0, assignee: kanbanDemoPeople[1] },
+    { id: 'sub-2', key: 'CAT-107', kind: 'subtask', title: 'Restore focus after selection', parentId: 'task-2', columnId: 'progress', order: 1, assignee: kanbanDemoPeople[1] },
+    { id: 'sub-3', key: 'CAT-108', kind: 'subtask', title: 'Check arrow-key navigation', parentId: 'task-3', columnId: 'done', order: 0, assignee: kanbanDemoPeople[2] },
+  ];
+  let comments: IKanbanComment[] = [
+    { id: 'comment-1', ticketId: 'task-2', author: kanbanDemoPeople[0], createdAt: '2026-09-18T09:30:00Z', body: [{ type: 'text', text: 'The picker should feel like part of the conversation. Can we check this together with ' }, { type: 'reference', id: 'task-3', label: '#CAT-103 Keyboard accessibility' }, { type: 'text', text: '?' }] },
+    { id: 'comment-2', ticketId: 'task-2', author: kanbanDemoPeople[1], createdAt: '2026-09-18T09:42:00Z', body: [{ type: 'text', text: 'Yes. Search receives focus immediately, and choosing a ticket returns you to exactly where you were writing.' }] },
+  ];
+  let nextKey = 300;
+  // Demo-only in-memory provider. Applications persist through their own authorized APIs.
+  const provider: IKanbanProvider = {
+    getTicket: async id => {
+      const ticket = tickets.find(item => item.id === id);
+      if (!ticket) throw new Error('Ticket not found.');
+      return ticket;
+    },
+    searchTickets: async query => tickets.filter(ticket => `${ticket.key} ${ticket.title}`.toLowerCase().includes(query.toLowerCase())),
+    loadComments: async id => comments.filter(comment => comment.ticketId === id),
+    addComment: async input => {
+      const comment: IKanbanComment = { ...input, id: crypto.randomUUID(), author: kanbanDemoPeople[0], createdAt: new Date().toISOString() };
+      comments = [...comments, comment]; return comment;
+    },
+    updateTicket: async ({ ticketId, changes }) => {
+      const previous = tickets.find(ticket => ticket.id === ticketId)!;
+      const ticket: IKanbanTicket = { ...previous, ...changes, assignee: changes.assignee === null ? undefined : changes.assignee ?? previous.assignee,
+        parentId: changes.parentId === null ? undefined : changes.parentId ?? previous.parentId };
+      tickets = tickets.map(item => item.id === ticketId ? ticket : item); return ticket;
+    },
+    moveTicket: async ({ ticketId, columnId, beforeTicketId }) => {
+      const ticket = tickets.find(item => item.id === ticketId)!;
+      const destination = tickets.filter(item => item.id !== ticketId && item.columnId === columnId && item.kind === ticket.kind).sort((a, b) => a.order - b.order);
+      const index = beforeTicketId ? destination.findIndex(item => item.id === beforeTicketId) : destination.length;
+      destination.splice(index < 0 ? destination.length : index, 0, { ...ticket, columnId });
+      const changed = destination.map((item, order) => ({ ...item, order }));
+      tickets = tickets.map(item => changed.find(record => record.id === item.id) ?? item); return changed;
+    },
+    createTicket: async input => {
+      const ticket: IKanbanTicket = { ...input, id: crypto.randomUUID(), key: `CAT-${nextKey++}`, order: tickets.length };
+      tickets = [...tickets, ticket]; return ticket;
+    },
+  };
+  return { tickets, provider };
+};

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

@@ -0,0 +1,13 @@
+import type { IKanbanTicket, IKanbanTicketDraft } from './interfaces.js';
+
+export const sortKanbanTickets = (tickets: readonly IKanbanTicket[]): IKanbanTicket[] =>
+  [...tickets].sort((a, b) => a.order - b.order || a.id.localeCompare(b.id));
+export const ticketLabel = (ticket: IKanbanTicket): string => `#${ticket.key} ${ticket.title}`;
+export const ticketDraft = (ticket: IKanbanTicket): IKanbanTicketDraft => ({
+  title: ticket.title, description: ticket.description ?? '', priority: ticket.priority ?? 'none',
+  assigneeId: ticket.assignee?.id ?? '', parentId: ticket.parentId ?? '',
+});
+export const kanbanEvent = <T>(owner: HTMLElement, name: string, detail: T): void => {
+  owner.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+};
+export const kanbanError = (error: unknown): string => error instanceof Error ? error.message : String(error);

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

@@ -0,0 +1,18 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../00theme.js';
+
+export const kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, css`
+  :host { display: block; min-width: 0; font-family: var(--dees-font-family); color: var(--dees-color-text-primary); font-size: var(--dees-font-body-size); }
+  * { box-sizing: border-box; }
+  h2, h3, p { margin: 0; }
+  .muted { color: var(--dees-color-text-secondary); }
+  .caption { font-size: var(--dees-font-footnote-size); color: var(--dees-color-text-secondary); }
+  .error { color: var(--dees-color-text-error); padding: 10px 0; font-size: var(--dees-font-footnote-size); }
+  .empty { padding: 24px 12px; text-align: center; color: var(--dees-color-text-secondary); font-size: var(--dees-font-footnote-size); }
+  .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .spacer { flex: 1; }
+  button.link { border: 0; background: transparent; font: inherit; color: var(--dees-color-link); padding: 2px 0; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+  button:focus-visible, summary:focus-visible { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 3px; border-radius: var(--dees-radius-sm); }
+  dees-icon { font-size: 16px; }
+  .badge { display: inline-flex; align-items: center; gap: 4px; background: var(--dees-color-badge-default-bg); padding: 3px 7px; border-radius: var(--dees-radius-sm); font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
+`];

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -109,7 +109,12 @@ export class DeesSimpleAppDash extends DeesElement {
     .controlbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid var(--dees-color-border-subtle); background: var(--dees-color-bg-secondary); font-size: 11px; color: var(--dees-color-text-secondary); }
     .control { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%; }
     .status-terminal { border-left: 1px solid var(--dees-color-border-subtle); }
-    .status-terminal[aria-pressed='true'] { color: var(--dees-color-accent-primary); background: var(--dees-color-nav-selected); }
+    /* The on face is the catalog's toggle-on face: the shared selected surface plus the accent
+       *text* colour, not --dees-color-accent-primary, which only reaches 3.6:1 as a label. The
+       hovered rule exists because the shared button:hover rule below outranks a plain
+       [aria-pressed] rule and would wash the on state away under the pointer. */
+    .status-terminal[aria-pressed='true'] { color: var(--dees-color-link); background: var(--dees-color-nav-selected); }
+    .status-terminal[aria-pressed='true']:hover { color: var(--dees-color-link); background: color-mix(in srgb, var(--dees-color-nav-selected) 88%, var(--dees-color-text-primary)); }
     .collapsed .sidebar-header { justify-content: center; padding: 0; }
     .collapsed .sidebar-header > dees-icon, .collapsed .appName, .collapsed .section-label, .collapsed .viewTab span, .collapsed .viewTab .chevron, .collapsed .action span { display: none; }
     .collapsed .collapseToggle { margin: 0; width: 40px; height: 38px; }

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

@@ -281,8 +281,8 @@ export class DeesWorkspace extends DeesElement {
           <span class="save-state" role="status">${this.isInitializing ? 'Starting…' : this.initializationError ? 'Connection failed' : !ready ? 'Not connected' : modifiedCount ? `${modifiedCount} unsaved` : 'All changes saved'}</span>
           <div class="toolbar-actions">
             <button class="panel-action" type="button" aria-label="Save all files" title="Save all files" ?disabled=${!ready || !modifiedCount} @click=${this.saveAllFiles}><dees-icon icon="lucide:Save" iconSize="16"></dees-icon></button>
-            ${this.showFileTree ? html`<button class="panel-action" type="button" aria-label="Toggle files" aria-controls="workspace-files" aria-expanded=${!this.isFileTreeCollapsed} aria-pressed=${!this.isFileTreeCollapsed} title="Toggle files" @click=${() => this.isFileTreeCollapsed = !this.isFileTreeCollapsed}><dees-icon icon="lucide:PanelLeft" iconSize="16"></dees-icon></button>` : ''}
-            ${this.showTerminal ? html`<button class="panel-action" type="button" aria-label="Toggle terminal" aria-controls="workspace-terminal" aria-expanded=${!this.isTerminalCollapsed} aria-pressed=${!this.isTerminalCollapsed} title="Toggle terminal" @click=${this.toggleTerminal}><dees-icon icon="lucide:PanelBottom" iconSize="16"></dees-icon></button>` : ''}
+            ${this.showFileTree ? html`<button class="panel-action panel-toggle" type="button" aria-label="Toggle files" aria-controls="workspace-files" aria-expanded=${!this.isFileTreeCollapsed} title="Toggle files" @click=${() => this.isFileTreeCollapsed = !this.isFileTreeCollapsed}><dees-icon icon="lucide:PanelLeft" iconSize="16"></dees-icon></button>` : ''}
+            ${this.showTerminal ? html`<button class="panel-action panel-toggle" type="button" aria-label="Toggle terminal" aria-controls="workspace-terminal" aria-expanded=${!this.isTerminalCollapsed} title="Toggle terminal" @click=${this.toggleTerminal}><dees-icon icon="lucide:PanelBottom" iconSize="16"></dees-icon></button>` : ''}
             <button class="panel-action" type="button" aria-label="Editor options" aria-haspopup="menu" title="Editor options" @click=${this.showEditorMenu}><dees-icon icon="lucide:Ellipsis" iconSize="16"></dees-icon></button>
           </div>
         </header>

package/ts_web/elements/00group-workspace/dees-workspace/styles.ts

@@ -15,7 +15,15 @@ export const workspaceStyles = css`
   .toolbar-actions, .panel-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
   .panel-action { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--dees-radius-md); color: var(--dees-color-text-secondary); transition: color 140ms ease, background-color 140ms ease; }
   .panel-action:hover:not(:disabled) { color: var(--dees-color-text-primary); background: var(--dees-color-hover); }
-  .panel-action[aria-pressed=true] { color: var(--dees-color-link); background: var(--dees-color-hover); }
+  /* A panel toggle announces one state, aria-expanded, and paints it with the shared selected
+     surface — the same wash and accent label dees-button gives its pressed state. It cannot
+     reuse the hover background: an expanded toggle would then be indistinguishable from a
+     hovered collapsed one. Both on-state rules repeat the hover rule's :not(:disabled), which
+     puts them at (0,4,0) and (0,5,0) against that rule's (0,3,0), so the on face outranks hover
+     on specificity instead of on source order, and the hovered-expanded rule keeps it under the
+     pointer. A disabled toggle falls back to the base face, the way it does for hover. */
+  .panel-action.panel-toggle[aria-expanded='true']:not(:disabled) { color: var(--dees-color-link); background: var(--dees-color-nav-selected); }
+  .panel-action.panel-toggle[aria-expanded='true']:not(:disabled):hover { color: var(--dees-color-link); background: color-mix(in srgb, var(--dees-color-nav-selected) 88%, var(--dees-color-text-primary)); }
   .workspace-container { display: flex; flex: 1; min-height: 0; min-width: 0; position: relative; }
   .editor-area { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
   .filetree-panel { position: relative; flex-shrink: 0; min-width: 0; overflow: hidden; background: var(--dees-color-bg-secondary); }

package/ts_web/elements/index.ts

@@ -10,6 +10,7 @@ export * from './00group-dataview/index.js';
 export * from './00group-feedback/index.js';
 export * from './00group-form/index.js';
 export * from './00group-harness/index.js';
+export * from './00group-kanban/index.js';
 export * from './00group-input/index.js';
 export * from './00group-layout/index.js';
 export * from './00group-media/index.js';

package/ts_web/services/DeesServiceLibLoader.ts

@@ -101,6 +101,7 @@ export interface IEchartsBundle {
  */
 export interface ITiptapBundle {
   Editor: typeof Editor;
+  Node: typeof import('@tiptap/core').Node;
   StarterKit: { configure: (options?: Partial<StarterKitOptions>) => any };
   Underline: { configure: (options?: Partial<UnderlineOptions>) => any };
   TextAlign: { configure: (options?: Partial<TextAlignOptions>) => any };
@@ -464,6 +465,7 @@ export class DeesServiceLibLoader {
 
         this.tiptapLib = {
           Editor: coreModule.Editor,
+          Node: coreModule.Node,
           StarterKit: starterKitModule.default || starterKitModule.StarterKit,
           Underline: underlineModule.default || underlineModule.Underline,
           TextAlign: textAlignModule.default || textAlignModule.TextAlign,