@design.estate/dees-catalog 13.0.0 → 13.0.1

package/dist_bundle/bundle.js

@@ -183779,7 +183779,7 @@ var DeesTerminalView = _DeesTerminalView;
 init_dist_ts26();
 init_theme();
 var kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, i`
-  :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); }
+  :host { display: block; min-width: 0; font-family: var(--dees-font-family); color: var(--dees-color-text-primary); font-size: var(--dees-font-subhead-size); line-height: 1.5; }
   * { box-sizing: border-box; }
   h2, h3, p { margin: 0; }
   .muted { color: var(--dees-color-text-secondary); }
@@ -183791,10 +183791,20 @@ var kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, i`
   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); }
+  .badge { display: inline-flex; align-items: center; gap: 4px; background: var(--dees-color-fill-tertiary); padding: 3px 7px; border-radius: var(--dees-radius-sm); font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
+  .avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--dees-color-fill-secondary); color: var(--dees-color-text-secondary); display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; line-height: 1; }
+  .priority { display: inline-flex; align-items: center; gap: 3px; font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); text-transform: capitalize; }
+  .priority[data-priority=urgent] { color: var(--dees-color-text-error); }
+  .priority[data-priority=high] { color: var(--dees-color-text-warning); }
+  .priority dees-icon { font-size: 13px; }
+  .section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+  .section-title h3 { font-size: var(--dees-font-footnote-size); font-weight: 600; }
+  .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--dees-radius-sm); background: var(--dees-color-fill-tertiary); color: var(--dees-color-text-secondary); font-size: var(--dees-font-caption1-size); font-weight: 500; font-variant-numeric: tabular-nums; }
 `];
 
 // ts_web/elements/00group-kanban/kanban.helpers.ts
+var kanbanInitials = /* @__PURE__ */ __name((name) => name.trim().split(/\s+/).map((part) => part[0]).join("").slice(0, 2), "kanbanInitials");
+var kanbanPriorityIcon = /* @__PURE__ */ __name((priority) => priority === "urgent" ? "lucide:ChevronsUp" : priority === "high" ? "lucide:ChevronUp" : priority === "low" ? "lucide:ChevronDown" : "lucide:Minus", "kanbanPriorityIcon");
 var sortKanbanTickets = /* @__PURE__ */ __name((tickets) => [...tickets].sort((a4, b4) => a4.order - b4.order || a4.id.localeCompare(b4.id)), "sortKanbanTickets");
 var ticketLabel = /* @__PURE__ */ __name((ticket) => `#${ticket.key} ${ticket.title}`, "ticketLabel");
 var ticketDraft = /* @__PURE__ */ __name((ticket) => ({
@@ -183888,7 +183898,7 @@ var _DeesInputReference = class _DeesInputReference extends (_a104 = DeesElement
     __publicField(this, "serializedValue", "");
   }
   render() {
-    return b2`<div class="editor"></div>${this.loadError ? b2`<p class="error" role="alert">${this.loadError}</p>` : ""}`;
+    return b2`<div class="editor" part="editor"></div>${this.loadError ? b2`<p class="error" role="alert">${this.loadError}</p>` : ""}`;
   }
   async connectedCallback() {
     const connection = super.connectedCallback();
@@ -184102,11 +184112,11 @@ __publicField(_DeesInputReference, "styles", [themeDefaultStyles, cssManager.def
     :host { display: block; min-width: 0; color: var(--dees-color-text-primary); font-family: var(--dees-font-family); }
     .editor { border: 1px solid var(--dees-color-border-default); border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-primary); }
     .editor:focus-within { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 1px; }
-    .ProseMirror { padding: 12px; min-height: 84px; max-height: 260px; overflow: auto; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-font-body-size); line-height: 1.6; }
+    .ProseMirror { padding: 12px; min-height: var(--dees-reference-min-height, 84px); max-height: 260px; overflow: auto; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-reference-font-size, var(--dees-font-body-size)); line-height: 1.6; }
     .ProseMirror p { margin: 0; }
     .ProseMirror p + p { margin-top: 0; }
     .ProseMirror:has(> p:only-child > br:only-child)::before { content: attr(data-placeholder); float: left; color: var(--dees-color-text-muted); pointer-events: none; height: 0; }
-    .ProseMirror [data-reference-id] { display: inline; padding: 1px 5px; border-radius: var(--dees-radius-sm); color: var(--dees-color-link); background: var(--dees-color-badge-default-bg); cursor: pointer; font-weight: 500; }
+    .ProseMirror [data-reference-id] { display: inline; padding: 1px 5px; border-radius: var(--dees-radius-sm); color: var(--dees-color-link); background: var(--dees-color-fill-tertiary); cursor: pointer; font-weight: 500; }
     .ProseMirror [data-reference-id]:focus-visible, .ProseMirror .ProseMirror-selectednode { outline: 2px solid var(--dees-color-focus-ring); }
     .ProseMirror[contenteditable=false] { opacity: .65; }
     .error { color: var(--dees-color-text-error); font-size: var(--dees-font-footnote-size); }
@@ -184136,16 +184146,17 @@ var _DeesKanbanDiscussion = class _DeesKanbanDiscussion extends (_a105 = DeesEle
   render() {
     const pending = this.pending.has(this.ticketId);
     const comments = this.comments.filter((comment3) => comment3.ticketId === this.ticketId).slice().sort((a4, b4) => Date.parse(a4.createdAt) - Date.parse(b4.createdAt));
-    return b2`<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}
+    return b2`<header><h3>Discussion</h3><span class="count">${comments.length}</span><span class="spacer"></span>
+      <dees-button class="refresh" size="icon" type="ghost" icon="lucide:RefreshCw" text="Refresh" .disabled=${this.loading}
         @clicked=${() => kanbanEvent(this, "kanban-comments-refresh", { ticketId: this.ticketId })}></dees-button></header>
       ${this.loading ? b2`<p class="caption" role="status">Loading comments…</p>` : ""}
       ${this.error ? b2`<p class="error" role="alert">${this.error}</p>` : ""}
       <ol aria-label="Comments">${comments.map((comment3) => b2`<li>
-        <div class="row"><span class="author">${comment3.author.name}</span><time datetime=${comment3.createdAt}>${new Date(comment3.createdAt).toLocaleString()}</time></div>
+        <span class="avatar" aria-hidden="true">${kanbanInitials(comment3.author.name)}</span><div>
+        <div class="row meta"><span class="author">${comment3.author.name}</span><time datetime=${comment3.createdAt} title=${comment3.createdAt}>${new Date(comment3.createdAt).toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" })}</time></div>
         <div class="message">${comment3.body.map((part) => part.type === "text" ? part.text : b2`<button class="reference"
           @click=${() => kanbanEvent(this, "kanban-ticket-open", { ticketId: part.id })}>${part.label}</button>`)}</div>
-      </li>`)}</ol>
+      </div></li>`)}</ol>
       ${!comments.length && !this.loading && !this.error ? b2`<p class="empty">Start the conversation.</p>` : ""}
       ${this.addComment && !this.readOnly ? b2`<div class="compose">
         <dees-input-reference label="Comment" placeholder="Write a comment…" .documentKey=${this.ticketId} .value=${this.draft} .disabled=${pending}
@@ -184158,7 +184169,7 @@ var _DeesKanbanDiscussion = class _DeesKanbanDiscussion extends (_a105 = DeesEle
           @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>
+        <div class="row"><span class="caption">Type <strong>#_</strong> to link a ticket · <span class="shortcut">Ctrl/⌘ Enter to send</span></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();
@@ -184210,16 +184221,26 @@ __decorateElement(_init107, 4, "failures", _failures_dec, _DeesKanbanDiscussion,
 _DeesKanbanDiscussion = __decorateElement(_init107, 0, "DeesKanbanDiscussion", _DeesKanbanDiscussion_decorators, _DeesKanbanDiscussion);
 __name(_DeesKanbanDiscussion, "DeesKanbanDiscussion");
 __publicField(_DeesKanbanDiscussion, "styles", [...kanbanStyles, i`
-    header { display: flex; align-items: center; margin-bottom: 16px; }
-    h3 { font-size: var(--dees-font-body-size); font-weight: 600; }
+    header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+    h3 { font-size: var(--dees-font-footnote-size); font-weight: 600; }
+    .refresh::part(button) { width: 28px; height: 28px; min-height: 28px; }
     ol { list-style: none; padding: 0; margin: 0; }
-    li { padding: 0 0 20px; }
-    .author { font-weight: 550; font-size: var(--dees-font-footnote-size); }
+    li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
+    li > .avatar { width: 28px; height: 28px; margin-top: 1px; }
+    .author { font-weight: 600; font-size: var(--dees-font-footnote-size); }
+    .meta { gap: 4px 10px; }
     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; }
+    .message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-font-subhead-size); line-height: 22px; margin-top: 2px; }
+    .reference { display: inline; border: 0; border-radius: var(--dees-radius-sm); padding: 1px 5px; color: var(--dees-color-link); background: var(--dees-color-fill-tertiary); font: inherit; font-weight: 500; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
+    .compose { margin: 14px 0 0 38px; padding: 0; border: 1px solid var(--dees-color-control-border); border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-control-bg); }
+    .compose:has(dees-input-reference:focus-within) { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 1px; }
+    dees-input-reference { --dees-reference-min-height: 64px; --dees-reference-font-size: var(--dees-font-subhead-size); }
+    dees-input-reference::part(editor) { border: 0; background: transparent; outline: none; }
+    .compose .row { padding: 4px 10px 10px; gap: 8px; }
+    .compose .caption { font-size: var(--dees-font-caption1-size); }
+    .shortcut { white-space: nowrap; }
+    .compose .error { padding: 0 12px 10px; }
+    @media (max-width: 600px) { .compose { margin-left: 0; } .compose .caption { flex-basis: 100%; } }
   `]);
 __runInitializers(_init107, 1, _DeesKanbanDiscussion);
 var DeesKanbanDiscussion = _DeesKanbanDiscussion;
@@ -184227,9 +184248,9 @@ var DeesKanbanDiscussion = _DeesKanbanDiscussion;
 // ts_web/elements/00group-kanban/dees-kanban-ticket-detail/dees-kanban-ticket-detail.ts
 init_dist_ts26();
 init_dees_input_text();
-var _editing_dec3, _canGoBack_dec, _saving_dec2, _error_dec3, _commentsError_dec, _loadingComments_dec, _searchTickets_dec2, _comments_dec2, _commentDraft_dec, _draft_dec3, _provider_dec2, _people_dec, _columns_dec3, _tickets_dec, _ticket_dec, _a106, _DeesKanbanTicketDetail_decorators, _init108, _ticket, _tickets, _columns3, _people, _provider2, _draft3, _commentDraft, _comments2, _searchTickets2, _loadingComments, _commentsError, _error3, _saving2, _canGoBack, _editing3;
+var _editing_dec3, _showTicketKey_dec, _canGoBack_dec, _saving_dec2, _error_dec3, _commentsError_dec, _loadingComments_dec, _searchTickets_dec2, _comments_dec2, _commentDraft_dec, _draft_dec3, _provider_dec2, _people_dec, _columns_dec3, _tickets_dec, _ticket_dec, _a106, _DeesKanbanTicketDetail_decorators, _init108, _ticket, _tickets, _columns3, _people, _provider2, _draft3, _commentDraft, _comments2, _searchTickets2, _loadingComments, _commentsError, _error3, _saving2, _canGoBack, _showTicketKey, _editing3;
 _DeesKanbanTicketDetail_decorators = [customElement("dees-kanban-ticket-detail")];
-var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = DeesElement, _ticket_dec = [n5({ attribute: false })], _tickets_dec = [n5({ attribute: false })], _columns_dec3 = [n5({ attribute: false })], _people_dec = [n5({ attribute: false })], _provider_dec2 = [n5({ attribute: false })], _draft_dec3 = [n5({ attribute: false })], _commentDraft_dec = [n5({ attribute: false })], _comments_dec2 = [n5({ attribute: false })], _searchTickets_dec2 = [n5({ attribute: false })], _loadingComments_dec = [n5({ type: Boolean })], _commentsError_dec = [n5({ type: String })], _error_dec3 = [n5({ type: String })], _saving_dec2 = [n5({ type: Boolean })], _canGoBack_dec = [n5({ type: Boolean })], _editing_dec3 = [r5()], _a106) {
+var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = DeesElement, _ticket_dec = [n5({ attribute: false })], _tickets_dec = [n5({ attribute: false })], _columns_dec3 = [n5({ attribute: false })], _people_dec = [n5({ attribute: false })], _provider_dec2 = [n5({ attribute: false })], _draft_dec3 = [n5({ attribute: false })], _commentDraft_dec = [n5({ attribute: false })], _comments_dec2 = [n5({ attribute: false })], _searchTickets_dec2 = [n5({ attribute: false })], _loadingComments_dec = [n5({ type: Boolean })], _commentsError_dec = [n5({ type: String })], _error_dec3 = [n5({ type: String })], _saving_dec2 = [n5({ type: Boolean })], _canGoBack_dec = [n5({ type: Boolean })], _showTicketKey_dec = [n5({ type: Boolean })], _editing_dec3 = [r5()], _a106) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ticket, __runInitializers(_init108, 8, this)), __runInitializers(_init108, 11, this);
@@ -184246,7 +184267,8 @@ var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = Dee
     __privateAdd(this, _error3, __runInitializers(_init108, 52, this, "")), __runInitializers(_init108, 55, this);
     __privateAdd(this, _saving2, __runInitializers(_init108, 56, this, false)), __runInitializers(_init108, 59, this);
     __privateAdd(this, _canGoBack, __runInitializers(_init108, 60, this, false)), __runInitializers(_init108, 63, this);
-    __privateAdd(this, _editing3, __runInitializers(_init108, 64, this, false)), __runInitializers(_init108, 67, this);
+    __privateAdd(this, _showTicketKey, __runInitializers(_init108, 64, this, true)), __runInitializers(_init108, 67, this);
+    __privateAdd(this, _editing3, __runInitializers(_init108, 68, this, false)), __runInitializers(_init108, 71, this);
     __publicField(this, "addComment", /* @__PURE__ */ __name((input) => this.provider.addComment(input), "addComment"));
   }
   updated(changed2) {
@@ -184268,15 +184290,16 @@ var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = Dee
     const parents = this.tickets.filter((item) => item.kind === (ticket.kind === "subtask" ? "task" : "epic"));
     return b2`<div class="toolbar row">
       ${this.canGoBack ? b2`<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 ? b2`<span class="caption">/</span><button class="link caption" @click=${() => kanbanEvent(this, "kanban-ticket-open", { ticketId: parent.id })}>${parent.title}</button>` : ""}
+      <span class="badge">${ticket.kind}</span>
+      ${this.showTicketKey ? b2`<span class="caption ticket-key">${ticket.key}</span>` : ""}
+      ${parent ? b2`<span class="caption" aria-hidden="true">/</span><button class="link parent" title=${parent.title} @click=${() => kanbanEvent(this, "kanban-ticket-open", { ticketId: parent.id })}>${parent.title}</button>` : ""}
       <span class="spacer"></span>${editable && !this.editing ? b2`<dees-button size="sm" type="ghost" text="Edit ticket" icon="lucide:Pencil" @clicked=${() => {
       this.editing = true;
       this.changeDraft({});
     }}></dees-button>` : ""}
     </div>
     ${this.error ? b2`<p class="error" role="alert">${this.error}</p>` : ""}
-    <div class="layout"><div class="main">
+    <div class="layout"><section class="lead">
       ${this.editing && editable ? b2`<div class="edit">
         <dees-input-text label="Title" .value=${draft.title} .disabled=${this.saving}
           @input=${(event) => this.changeDraft({ title: String(event.currentTarget.value ?? "") })}></dees-input-text>
@@ -184290,33 +184313,36 @@ var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = Dee
       kanbanEvent(this, "kanban-ticket-draft", { ticketId: ticket.id, draft: void 0 });
     }}></dees-button></div>
       </div>` : b2`<h2>${ticket.title}</h2><div class="description ${ticket.description ? "" : "muted"}">${ticket.description || "No description yet."}</div>`}
-      ${ticket.kind !== "subtask" ? b2`<section class="children"><div class="row"><h3>${ticket.kind === "epic" ? "Tasks" : "Subtasks"}</h3><span class="spacer"></span>
-        ${this.provider.createTicket && ticket.permissions?.createChild !== false ? b2`<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>
-        ${children2.map((child) => b2`<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>`)}
-        ${!children2.length ? b2`<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 : void 0}></dees-kanban-discussion>
-    </div><aside><div class="fields">
-      <dees-input-dropdown label="Status" .options=${this.columns.map((column) => ({ key: column.id, option: column.title }))}
+    </section><aside><div class="fields">
+      <div><label class="caption">Status</label><dees-input-dropdown label="Status" .labelPosition=${"none"} .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) => kanbanEvent(this, "kanban-ticket-move", { ticketId: ticket.id, columnId: event.detail.key })}></dees-input-dropdown>
+        .disabled=${!movable || this.saving} @selectedOption=${(event) => kanbanEvent(this, "kanban-ticket-move", { ticketId: ticket.id, columnId: event.detail.key })}></dees-input-dropdown></div>
       ${this.editing && editable ? b2`
-        <dees-input-dropdown label="Priority" .disabled=${this.saving} .value=${{ key: draft.priority, option: draft.priority }}
+        <div><label class="caption">Priority</label><dees-input-dropdown label="Priority" .labelPosition=${"none"} .disabled=${this.saving} .value=${{ key: draft.priority, option: draft.priority }}
           .options=${["none", "low", "normal", "high", "urgent"].map((key2) => ({ key: key2, option: key2 }))}
-          @selectedOption=${(event) => 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" }}
+          @selectedOption=${(event) => this.changeDraft({ priority: event.detail.key })}></dees-input-dropdown></div>
+        <div><label class="caption">Assignee</label><dees-input-dropdown label="Assignee" .labelPosition=${"none"} .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) => this.changeDraft({ assigneeId: event.detail.key })}></dees-input-dropdown>
-        ${ticket.kind !== "epic" ? b2`<dees-input-dropdown label=${ticket.kind === "task" ? "Epic" : "Parent task"} .disabled=${this.saving}
+          @selectedOption=${(event) => this.changeDraft({ assigneeId: event.detail.key })}></dees-input-dropdown></div>
+        ${ticket.kind !== "epic" ? b2`<div><label class="caption">${ticket.kind === "task" ? "Epic" : "Parent task"}</label><dees-input-dropdown label=${ticket.kind === "task" ? "Epic" : "Parent task"} .labelPosition=${"none"} .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) => this.changeDraft({ parentId: event.detail.key })}></dees-input-dropdown>` : ""}
-      ` : b2`<div><label class="caption">Priority</label>${ticket.priority ?? "none"}</div><div><label class="caption">Assignee</label>${ticket.assignee?.name ?? "Unassigned"}</div>`}
-      ${ticket.labels?.length ? b2`<div><label class="caption">Labels</label><div class="row">${ticket.labels.map((label) => b2`<span class="badge">${label}</span>`)}</div></div>` : ""}
-    </div></aside></div>`;
+          @selectedOption=${(event) => this.changeDraft({ parentId: event.detail.key })}></dees-input-dropdown></div>` : ""}
+      ` : b2`<div><label class="caption">Priority</label><span class="priority value" data-priority=${ticket.priority ?? "none"}><dees-icon .icon=${kanbanPriorityIcon(ticket.priority)} iconSize="13" aria-hidden="true"></dees-icon>${ticket.priority ?? "none"}</span></div>
+        <div><label class="caption">Assignee</label><span class="person value"><span class="avatar" aria-hidden="true">${ticket.assignee ? kanbanInitials(ticket.assignee.name) : "\u2013"}</span>${ticket.assignee?.name ?? "Unassigned"}</span></div>`}
+      ${ticket.labels?.length ? b2`<div><label class="caption">Labels</label><div class="row value">${ticket.labels.map((label) => b2`<span class="badge">${label}</span>`)}</div></div>` : ""}
+    </div></aside><div class="body">
+      ${ticket.kind !== "subtask" ? b2`<section class="children"><div class="section-title"><h3>${ticket.kind === "epic" ? "Tasks" : "Subtasks"}</h3><span class="count">${children2.length}</span><span class="spacer"></span>
+        ${this.provider.createTicket && ticket.permissions?.createChild !== false ? b2`<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>
+        <div class="child-list">${children2.map((child) => b2`<button class="child" @click=${() => kanbanEvent(this, "kanban-ticket-open", { ticketId: child.id })}>
+          <span class="child-key">${child.key}</span><span class="child-title">${child.title}</span>
+          <span class="badge">${this.columns.find((column) => column.id === child.columnId)?.title ?? child.columnId}</span></button>`)}</div>
+        ${!children2.length ? b2`<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 : void 0}></dees-kanban-discussion>
+    </div></div>`;
   }
   finishEditing() {
     this.editing = false;
@@ -184337,6 +184363,7 @@ _commentsError = new WeakMap();
 _error3 = new WeakMap();
 _saving2 = new WeakMap();
 _canGoBack = new WeakMap();
+_showTicketKey = new WeakMap();
 _editing3 = new WeakMap();
 __decorateElement(_init108, 4, "ticket", _ticket_dec, _DeesKanbanTicketDetail, _ticket);
 __decorateElement(_init108, 4, "tickets", _tickets_dec, _DeesKanbanTicketDetail, _tickets);
@@ -184352,24 +184379,45 @@ __decorateElement(_init108, 4, "commentsError", _commentsError_dec, _DeesKanbanT
 __decorateElement(_init108, 4, "error", _error_dec3, _DeesKanbanTicketDetail, _error3);
 __decorateElement(_init108, 4, "saving", _saving_dec2, _DeesKanbanTicketDetail, _saving2);
 __decorateElement(_init108, 4, "canGoBack", _canGoBack_dec, _DeesKanbanTicketDetail, _canGoBack);
+__decorateElement(_init108, 4, "showTicketKey", _showTicketKey_dec, _DeesKanbanTicketDetail, _showTicketKey);
 __decorateElement(_init108, 4, "editing", _editing_dec3, _DeesKanbanTicketDetail, _editing3);
 _DeesKanbanTicketDetail = __decorateElement(_init108, 0, "DeesKanbanTicketDetail", _DeesKanbanTicketDetail_decorators, _DeesKanbanTicketDetail);
 __name(_DeesKanbanTicketDetail, "DeesKanbanTicketDetail");
 __publicField(_DeesKanbanTicketDetail, "styles", [...kanbanStyles, i`
-    .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; }
+    :host { padding: 24px; }
+    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-template-areas: 'lead props' 'body props'; gap: 24px; align-items: start; }
+    .lead { grid-area: lead; min-width: 0; }
+    .body { grid-area: body; min-width: 0; }
+    .toolbar { margin-bottom: 20px; flex-wrap: nowrap; min-width: 0; }
+    .toolbar .badge { text-transform: capitalize; flex-shrink: 0; }
+    .ticket-key { flex-shrink: 0; font-variant-numeric: tabular-nums; }
+    .link.parent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--dees-font-footnote-size); }
+    .toolbar dees-button { flex-shrink: 0; }
+    h2 { font-size: var(--dees-font-title2-size); line-height: 1.3; font-weight: 600; margin-bottom: 12px; letter-spacing: -.015em; overflow-wrap: anywhere; }
+    .description { white-space: pre-wrap; font-size: var(--dees-font-subhead-size); line-height: 22px; overflow-wrap: anywhere; max-width: 64ch; }
+    aside { grid-area: props; min-width: 0; padding: 14px 16px; border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-settings-group); }
+    .fields { display: grid; gap: 14px; font-size: var(--dees-font-footnote-size); font-weight: 500; }
+    .fields label { display: block; margin-bottom: 5px; font-size: var(--dees-font-caption1-size); font-weight: 400; }
+    .value { min-height: var(--dees-control-height-lg); display: flex; align-items: center; }
+    .person { display: flex; align-items: center; gap: 7px; }
     .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)); } }
+    .child-list { border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-settings-group); overflow: hidden; }
+    .child { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+    .child + .child { border-top: 1px solid var(--dees-color-border-subtle); }
+    .child:hover { background: var(--dees-color-row-hover); }
+    .child:focus-visible { outline-offset: -3px; }
+    .child-key { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
+    .child-title { flex: 1; min-width: 0; font-size: var(--dees-font-footnote-size); font-weight: 500; overflow-wrap: anywhere; }
+    .child .badge { flex-shrink: 0; }
+    .discussion { border-top: 1px solid var(--dees-color-border-subtle); padding-top: 20px; }
+    .edit { display: grid; gap: 14px; }
+    @media (max-width: 700px) {
+      :host { padding: 16px; }
+      .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lead' 'props' 'body'; gap: 20px; }
+      .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .toolbar { gap: 6px; margin-bottom: 16px; }
+      .child { gap: 7px; }
+    }
   `]);
 __runInitializers(_init108, 1, _DeesKanbanTicketDetail);
 var DeesKanbanTicketDetail = _DeesKanbanTicketDetail;
@@ -184479,18 +184527,19 @@ var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticke
       event.dataTransfer.effectAllowed = "move";
       kanbanEvent(this, "kanban-drag-start", { ticketId: ticket.id });
     }} @dragend=${() => kanbanEvent(this, "kanban-drag-end", {})}>
-      ${this.epic ? b2`<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" ? b2`<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 ? b2`<div class="row labels">${ticket.labels.map((label) => b2`<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) ?? "\u2013"}</span>
-        <span>${ticket.assignee?.name ?? "Unassigned"}</span><span class="spacer"></span>
-        ${this.movable ? b2`<dees-button size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending}
+      <div class="meta"><span class="key">${ticket.key}</span>
+        ${this.epic ? b2`<button class="link epic" title=${this.epic.title} @click=${() => this.open(this.epic.id)}>${this.epic.title}</button>` : ""}
+        ${this.movable ? b2`<dees-button class="move" size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending}
           @clicked=${(event) => kanbanEvent(this, "kanban-move-menu", { ticketId: ticket.id, anchor: event.currentTarget })}></dees-button>` : ""}
       </div>
-      ${this.subtasks.length ? b2`<details><summary>${completed}/${this.subtasks.length} subtasks complete</summary>
-        ${this.subtasks.map((task) => b2`<div class="subtask"><span>${this.columns.some((column) => column.id === task.columnId && column.done) ? "\u2713" : "\u25CB"}</span>
+      <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>
+      <div class="row footer">
+        ${ticket.priority && ticket.priority !== "none" ? b2`<span class="priority" data-priority=${ticket.priority}><dees-icon .icon=${kanbanPriorityIcon(ticket.priority)} iconSize="13" aria-hidden="true"></dees-icon>${ticket.priority}</span>` : ""}
+        ${ticket.labels?.map((label) => b2`<span class="badge">${label}</span>`)}
+        <span class="assignee" title=${ticket.assignee?.name ?? "Unassigned"}><span class="avatar" aria-hidden="true">${ticket.assignee ? kanbanInitials(ticket.assignee.name) : "\u2013"}</span><span class="assignee-name">${ticket.assignee?.name ?? "Unassigned"}</span></span>
+      </div>
+      ${this.subtasks.length ? b2`<details><summary><dees-icon icon="lucide:ListChecks" iconSize="14" aria-hidden="true"></dees-icon>${completed}/${this.subtasks.length} subtasks complete<dees-icon class="disclosure" icon="lucide:ChevronRight" iconSize="14" aria-hidden="true"></dees-icon></summary>
+        ${this.subtasks.map((task) => b2`<div class="subtask"><dees-icon .icon=${this.columns.some((column) => column.id === task.columnId && column.done) ? "lucide:CircleCheck" : "lucide:Circle"} iconSize="14" aria-hidden="true"></dees-icon>
           <button class="link" @click=${() => this.open(task.id)}>${task.title}</button></div>`)}</details>` : ""}
     </article>`;
   }
@@ -184511,17 +184560,32 @@ __decorateElement(_init109, 4, "pending", _pending_dec3, _DeesKanbanCard, _pendi
 _DeesKanbanCard = __decorateElement(_init109, 0, "DeesKanbanCard", _DeesKanbanCard_decorators, _DeesKanbanCard);
 __name(_DeesKanbanCard, "DeesKanbanCard");
 __publicField(_DeesKanbanCard, "styles", [...kanbanStyles, i`
-    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 { padding: 12px; border: 1px solid var(--dees-color-border-subtle); border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); 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); }
+    .meta { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
+    .key { flex-shrink: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
+    .link.epic { min-width: 0; color: var(--dees-color-text-secondary); font-size: var(--dees-font-caption1-size); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+    .link.epic:hover { color: var(--dees-color-link); text-decoration: underline; }
+    .move { flex-shrink: 0; margin-left: auto; }
+    .move::part(button) { width: 24px; height: 24px; min-height: 24px; }
+    .title { display: block; width: 100%; border: 0; background: transparent; padding: 4px 0 0; color: inherit; text-align: left; cursor: pointer; font: inherit; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
+    .title:hover { color: var(--dees-color-link); }
+    .footer { margin-top: 10px; gap: 6px; }
+    .badge { padding: 1px 6px; }
+    .assignee { display: flex; align-items: center; gap: 5px; margin-left: auto; min-width: 0; color: var(--dees-color-text-secondary); font-size: var(--dees-font-caption1-size); }
+    .assignee-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .avatar { width: 20px; height: 20px; font-size: 9px; }
+    details { border-top: 1px solid var(--dees-color-border-subtle); margin-top: 10px; }
+    summary { cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 9px 0 0; font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); list-style: none; }
+    summary::-webkit-details-marker { display: none; }
+    summary .disclosure { margin-left: auto; }
+    details[open] summary .disclosure { transform: rotate(90deg); }
+    .subtask { display: flex; gap: 7px; align-items: center; padding-top: 8px; font-size: var(--dees-font-footnote-size); }
+    .subtask dees-icon { flex-shrink: 0; color: var(--dees-color-text-secondary); font-size: 14px; }
+    .subtask .link { color: var(--dees-color-text-primary); }
+    .subtask .link:hover { color: var(--dees-color-link); }
+    @media (pointer: coarse) { .move::part(button) { width: 32px; height: 32px; min-height: 32px; } summary { min-height: 36px; } }
   `]);
 __runInitializers(_init109, 1, _DeesKanbanCard);
 var DeesKanbanCard = _DeesKanbanCard;
@@ -184566,11 +184630,11 @@ var _DeesKanbanColumn = class _DeesKanbanColumn extends (_a108 = DeesElement, _c
       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>
+      <header><span class="status ${this.column.done ? "done" : ""}" aria-hidden="true"></span><h3>${this.column.title}</h3><span class="count">${this.tickets.length}</span><span class="spacer"></span>
         ${this.canCreate ? b2`<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) => b2`
-        <div class="target ${this.draggingOver && this.dropBefore === ticket.id ? "before" : ""}"
+        <div class="target ${this.draggingOver && this.dropBefore === ticket.id ? "before" : ""} ${this.draggingTicketId === ticket.id ? "dragging" : ""}"
           @dragover=${() => {
       this.dropBefore = ticket.id;
     }}>
@@ -184613,16 +184677,20 @@ __decorateElement(_init110, 4, "draggingOver", _draggingOver_dec, _DeesKanbanCol
 _DeesKanbanColumn = __decorateElement(_init110, 0, "DeesKanbanColumn", _DeesKanbanColumn_decorators, _DeesKanbanColumn);
 __name(_DeesKanbanColumn, "DeesKanbanColumn");
 __publicField(_DeesKanbanColumn, "styles", [...kanbanStyles, i`
-    :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; }
+    :host { display: flex; flex-direction: column; min-width: 272px; max-width: 360px; flex: 1 0 272px; }
+    section { min-height: 220px; height: 100%; border-radius: var(--dees-radius-xl); }
+    header { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--dees-color-border-subtle); }
+    h3 { font-size: var(--dees-font-footnote-size); font-weight: 600; }
+    header dees-button::part(button) { width: 24px; height: 24px; min-height: 24px; }
+    .status { width: 8px; height: 8px; border: 1.5px solid var(--dees-color-text-secondary); border-radius: 50%; flex-shrink: 0; }
+    .status.done { background: var(--dees-color-accent-success); border-color: var(--dees-color-accent-success); }
+    .stack { display: grid; gap: 8px; min-height: 120px; 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; }
+    .target.dragging { opacity: .4; }
+    .target.before::before, .end-target.before::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 2px; background: var(--dees-color-accent-primary); border-radius: 2px; }
+    .end-target { position: relative; min-height: 32px; margin-top: 8px; }
+    section.over { background: var(--dees-color-row-hover); }
+    @media (pointer: coarse) { header dees-button::part(button) { width: 32px; height: 32px; min-height: 32px; } }
   `]);
 __runInitializers(_init110, 1, _DeesKanbanColumn);
 var DeesKanbanColumn = _DeesKanbanColumn;
@@ -184752,28 +184820,28 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
       ...this.tickets.filter((child) => child.parentId === ticket.id).map((child) => `${child.key} ${child.title}`)
     ].join(" ").toLocaleLowerCase().includes(query3)));
     const epic = epics.find((ticket) => ticket.id === this.epicId);
-    return b2`<header class="heading"><h2>${this.heading}</h2><span class="caption">${tasks.length} tasks · ${epics.length} epics</span><span class="spacer"></span>
-      ${this.provider.createTicket ? b2`<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 || void 0 });
-    }}></dees-button>` : ""}</header>
-      <div class="filters"><dees-input-text label="Search tickets" placeholder="Title, ticket number, assignee…" .value=${this.query}
+    return b2`<header class="heading"><div class="identity"><h2>${this.heading}</h2><span class="totals">${tasks.length} tasks · ${epics.length} epics</span></div>
+      <div class="filters"><dees-input-text label="Search tickets" .labelPosition=${"none"} placeholder="Search tickets…" .value=${this.query}
         @input=${(event) => {
       this.query = String(event.currentTarget.value ?? "");
     }}></dees-input-text>
-        <dees-input-dropdown label="Epic" .value=${{ key: this.epicId, option: epic?.title ?? "All epics" }}
+        <dees-input-dropdown label="Epic" .labelPosition=${"none"} .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) => {
       this.epicId = event.detail.key;
     }}></dees-input-dropdown>
-        ${epic ? b2`<dees-button type="ghost" size="sm" text="Open epic" @clicked=${() => {
+        ${epic ? b2`<dees-button type="ghost" text="Open epic" @clicked=${() => {
       void this.openTicket(epic.id);
     }}></dees-button>` : ""}
       </div>
+      ${this.provider.createTicket ? b2`<div class="actions"><dees-button type="secondary" text="New epic" .disabled=${!this.columns.length}
+        @clicked=${() => {
+      void this.createTicket({ kind: "epic", columnId: this.columns[0].id });
+    }}></dees-button>
+        <dees-button type="accent" icon="lucide:Plus" text="New task" .disabled=${!this.columns.length}
+          @clicked=${() => {
+      void this.createTicket({ kind: "task", columnId: this.columns[0].id, parentId: this.epicId || void 0 });
+    }}></dees-button></div>` : ""}</header>
       ${this.loading || this.openingTicket ? b2`<p class="caption" role="status">${this.loading ? "Loading board\u2026" : "Opening ticket\u2026"}</p>` : ""}
       ${this.error || this.operationError ? b2`<p class="error" role="alert">${this.error || this.operationError}</p>` : ""}
       ${!this.columns.length ? b2`<p class="empty">No columns configured.</p>` : b2`<div class="columns" aria-label=${this.heading}>
@@ -184801,6 +184869,7 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
       this.selectedId = id;
       if (!this.detail) {
         this.detail = new DeesKanbanTicketDetail();
+        this.detail.showTicketKey = false;
         for (const name of interactionEvents) this.detail.addEventListener(name, this.handleInteraction);
       }
       this.detail.ticket = ticket;
@@ -184812,6 +184881,7 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
           width: 1e3,
           maxWidth: 1040,
           mobileFullscreen: true,
+          contentPadding: 0,
           content: b2`${this.detail}`,
           menuOptions: []
         });
@@ -185037,14 +185107,27 @@ __name(_DeesKanban, "DeesKanban");
 __publicField(_DeesKanban, "demo", demoFunc72);
 __publicField(_DeesKanban, "demoGroups", ["Kanban"]);
 __publicField(_DeesKanban, "styles", [...kanbanStyles, i`
-    :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; } }
+    :host { padding: 20px 24px; background: var(--dees-color-bg-canvas); min-height: 100%; }
+    .heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
+    .identity { display: flex; gap: 12px; align-items: baseline; flex: 1; min-width: 220px; flex-wrap: wrap; }
+    h2 { font-size: var(--dees-font-title3-size); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
+    .totals { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); white-space: nowrap; }
+    .filters { display: flex; align-items: center; gap: 8px; }
+    .filters dees-input-text { width: 230px; min-width: 140px; }
+    .filters dees-input-dropdown { width: 180px; min-width: 140px; }
+    .actions { display: flex; gap: 8px; margin-left: auto; }
+    .columns { display: flex; gap: 20px; overflow-x: auto; padding: 3px 2px 16px; align-items: stretch; }
+    @media (max-width: 1100px) { .filters { order: 3; flex-basis: 100%; } .filters dees-input-text { flex: 1; max-width: 320px; } }
+    @media (max-width: 600px) {
+      :host { padding: 12px 16px; }
+      .heading { gap: 12px 8px; }
+      .identity { min-width: 100%; gap: 6px 10px; }
+      .actions { margin-left: 0; }
+      .filters { flex-wrap: wrap; }
+      .filters dees-input-text, .filters dees-input-dropdown { flex: 1; width: auto; min-width: 130px; }
+      .columns { margin: 0 -16px; padding: 3px 16px 16px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; gap: 14px; }
+      dees-kanban-column { scroll-snap-align: start; flex: 0 0 86%; min-width: 0; max-width: none; }
+    }
   `]);
 __runInitializers(_init111, 1, _DeesKanban);
 var DeesKanban = _DeesKanban;
@@ -226450,7 +226533,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "13.0.0",
+  version: "13.0.1",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };