@design.estate/dees-catalog 13.0.0 → 13.0.2

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;
@@ -184450,9 +184498,9 @@ var demoFunc72 = /* @__PURE__ */ __name(() => {
 init_dist_ts26();
 init_dees_button();
 init_dees_icon();
-var _pending_dec3, _movable_dec, _columns_dec4, _subtasks_dec, _epic_dec, _ticket_dec2, _a107, _DeesKanbanCard_decorators, _init109, _ticket2, _epic, _subtasks, _columns4, _movable, _pending3;
+var _pointerManaged_dec, _saving_dec3, _pending_dec3, _moveDisabled_dec, _movable_dec, _columns_dec4, _subtasks_dec, _epic_dec, _ticket_dec2, _a107, _DeesKanbanCard_decorators, _init109, _ticket2, _epic, _subtasks, _columns4, _movable, _moveDisabled, _pending3, _saving3, _pointerManaged;
 _DeesKanbanCard_decorators = [customElement("dees-kanban-card")];
-var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticket_dec2 = [n5({ attribute: false })], _epic_dec = [n5({ attribute: false })], _subtasks_dec = [n5({ attribute: false })], _columns_dec4 = [n5({ attribute: false })], _movable_dec = [n5({ type: Boolean })], _pending_dec3 = [n5({ type: Boolean })], _a107) {
+var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticket_dec2 = [n5({ attribute: false })], _epic_dec = [n5({ attribute: false })], _subtasks_dec = [n5({ attribute: false })], _columns_dec4 = [n5({ attribute: false })], _movable_dec = [n5({ type: Boolean })], _moveDisabled_dec = [n5({ type: Boolean })], _pending_dec3 = [n5({ type: Boolean })], _saving_dec3 = [n5({ type: Boolean })], _pointerManaged_dec = [n5({ attribute: false })], _a107) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ticket2, __runInitializers(_init109, 8, this)), __runInitializers(_init109, 11, this);
@@ -184460,7 +184508,10 @@ var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticke
     __privateAdd(this, _subtasks, __runInitializers(_init109, 16, this, [])), __runInitializers(_init109, 19, this);
     __privateAdd(this, _columns4, __runInitializers(_init109, 20, this, [])), __runInitializers(_init109, 23, this);
     __privateAdd(this, _movable, __runInitializers(_init109, 24, this, false)), __runInitializers(_init109, 27, this);
-    __privateAdd(this, _pending3, __runInitializers(_init109, 28, this, false)), __runInitializers(_init109, 31, this);
+    __privateAdd(this, _moveDisabled, __runInitializers(_init109, 28, this, false)), __runInitializers(_init109, 31, this);
+    __privateAdd(this, _pending3, __runInitializers(_init109, 32, this, false)), __runInitializers(_init109, 35, this);
+    __privateAdd(this, _saving3, __runInitializers(_init109, 36, this, false)), __runInitializers(_init109, 39, this);
+    __privateAdd(this, _pointerManaged, __runInitializers(_init109, 40, this, false)), __runInitializers(_init109, 43, this);
   }
   open(ticketId) {
     kanbanEvent(this, "kanban-ticket-open", { ticketId });
@@ -184469,28 +184520,32 @@ var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticke
     const ticket = this.ticket;
     if (!ticket) return b2``;
     const completed = this.subtasks.filter((task) => this.columns.some((column) => column.id === task.columnId && column.done)).length;
-    return b2`<article aria-busy=${String(this.pending)} draggable=${this.movable && !this.pending ? "true" : "false"}
+    return b2`<article aria-busy=${String(this.pending)} data-movable=${String(this.movable && !this.moveDisabled && !this.pending)}
+      draggable=${String(this.movable && !this.moveDisabled && !this.pending && !this.pointerManaged)}
       @dragstart=${(event) => {
-      if (!this.movable || this.pending || !event.dataTransfer) {
+      if (this.pointerManaged || !this.movable || this.moveDisabled || 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 ? 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}
+    }} @dragend=${() => {
+      if (!this.pointerManaged) kanbanEvent(this, "kanban-drag-end", {});
+    }}>
+      <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.saving ? b2`<span class="saving" role="status">Saving…</span>` : this.movable ? b2`<dees-button class="move" size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending || this.moveDisabled}
           @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>`;
   }
@@ -184501,36 +184556,580 @@ _epic = new WeakMap();
 _subtasks = new WeakMap();
 _columns4 = new WeakMap();
 _movable = new WeakMap();
+_moveDisabled = new WeakMap();
 _pending3 = new WeakMap();
+_saving3 = new WeakMap();
+_pointerManaged = new WeakMap();
 __decorateElement(_init109, 4, "ticket", _ticket_dec2, _DeesKanbanCard, _ticket2);
 __decorateElement(_init109, 4, "epic", _epic_dec, _DeesKanbanCard, _epic);
 __decorateElement(_init109, 4, "subtasks", _subtasks_dec, _DeesKanbanCard, _subtasks);
 __decorateElement(_init109, 4, "columns", _columns_dec4, _DeesKanbanCard, _columns4);
 __decorateElement(_init109, 4, "movable", _movable_dec, _DeesKanbanCard, _movable);
+__decorateElement(_init109, 4, "moveDisabled", _moveDisabled_dec, _DeesKanbanCard, _moveDisabled);
 __decorateElement(_init109, 4, "pending", _pending_dec3, _DeesKanbanCard, _pending3);
+__decorateElement(_init109, 4, "saving", _saving_dec3, _DeesKanbanCard, _saving3);
+__decorateElement(_init109, 4, "pointerManaged", _pointerManaged_dec, _DeesKanbanCard, _pointerManaged);
 _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); }
+    article[aria-busy=true] > :not(.meta), article[aria-busy=true] .meta > :not(.saving) { opacity: .65; }
+    article[data-movable=true] { cursor: grab; }
+    .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; }
+    .saving { margin-left: auto; font-size: var(--dees-font-caption1-size); white-space: nowrap; }
+    .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;
 
+// ts_web/elements/00group-kanban/kanban.dragcontroller.ts
+init_overlay();
+init_zindex();
+var sameMove = /* @__PURE__ */ __name((a4, b4) => a4.ticketId === b4.ticketId && a4.columnId === b4.columnId && a4.beforeTicketId === b4.beforeTicketId, "sameMove");
+var KanbanDragController = class {
+  constructor(board, commit, canMove) {
+    this.board = board;
+    this.commit = commit;
+    this.canMove = canMove;
+  }
+  board;
+  commit;
+  canMove;
+  static {
+    __name(this, "KanbanDragController");
+  }
+  gesture;
+  listeners;
+  frame = 0;
+  previousFrame = 0;
+  rendering = false;
+  scrollParents = [];
+  scrollSnap = /* @__PURE__ */ new Map();
+  animations = /* @__PURE__ */ new Map();
+  timers = /* @__PURE__ */ new Set();
+  suppressClick;
+  clickTimer;
+  resizeObserver;
+  reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+  get busy() {
+    return Boolean(this.gesture && this.gesture.phase !== "armed");
+  }
+  easing(name) {
+    return getComputedStyle(this.board).getPropertyValue(`--dees-ease-${name}`).trim();
+  }
+  get columns() {
+    return [...this.board.shadowRoot?.querySelectorAll("dees-kanban-column") ?? []];
+  }
+  connect() {
+    this.board.addEventListener("pointerdown", this.down);
+  }
+  /** Host updates can remove/filter the source or revoke its move permission during a gesture. */
+  sync() {
+    const gesture = this.gesture;
+    if (!gesture || gesture.phase === "armed") return;
+    const visible = this.columns.some((column) => column.tickets.some((ticket2) => ticket2.id === gesture.motion.ticket.id));
+    const ticket = this.board.tickets.find((item) => item.id === gesture.motion.ticket.id);
+    if (!visible || !this.columns.some((column) => column.column?.id === gesture.motion.move.columnId)) {
+      this.fadeAndClear(gesture);
+    } else if (gesture.phase === "dragging" && (!this.board.provider.moveTicket || ticket?.permissions?.move === false)) {
+      void this.cancel();
+    }
+  }
+  down = /* @__PURE__ */ __name((event) => {
+    if (this.gesture || !this.canMove() || event.button !== 0 || !event.isPrimary || event.pointerType === "touch") return;
+    const path2 = event.composedPath();
+    if (!this.columns.some((column) => path2.includes(column))) return;
+    const source = path2.find((node2) => node2 instanceof DeesKanbanCard);
+    if (!source?.ticket || !source.movable || source.moveDisabled || source.pending) return;
+    if (path2.some((node2) => node2 instanceof Element && node2 !== source && node2.matches("a, input, textarea, select, summary, dees-button, button:not(.title), [contenteditable=true]"))) return;
+    const rect = source.getBoundingClientRect();
+    this.gesture = {
+      pointerId: event.pointerId,
+      source,
+      startX: event.clientX,
+      startY: event.clientY,
+      x: event.clientX,
+      y: event.clientY,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      width: rect.width,
+      expanded: Boolean(source.shadowRoot?.querySelector("details")?.open),
+      restoreFocus: false,
+      phase: "armed",
+      flightRevision: 0,
+      motion: { ticket: source.ticket, move: this.authoritativeMove(source.ticket.id), height: rect.height, placeholder: true, dimmed: false, saving: false }
+    };
+    const signal = (this.listeners = new AbortController()).signal;
+    window.addEventListener("pointermove", this.move, { signal, passive: false });
+    window.addEventListener("pointerup", this.up, { signal });
+    window.addEventListener("pointercancel", this.pointerCancel, { signal });
+    this.board.addEventListener("lostpointercapture", this.pointerCancel, { signal });
+    window.addEventListener("keydown", this.key, { signal, capture: true });
+    window.addEventListener("blur", this.blur, { signal });
+    window.addEventListener("resize", this.blur, { signal });
+  }, "down");
+  move = /* @__PURE__ */ __name((event) => {
+    const gesture = this.gesture;
+    if (!gesture || event.pointerId !== gesture.pointerId || !["armed", "dragging"].includes(gesture.phase)) return;
+    gesture.x = event.clientX;
+    gesture.y = event.clientY;
+    if (gesture.phase === "armed") {
+      if (Math.hypot(gesture.x - gesture.startX, gesture.y - gesture.startY) < 4) return;
+      void this.lift(gesture);
+    }
+    event.preventDefault();
+    window.getSelection()?.removeAllRanges();
+  }, "move");
+  async lift(gesture) {
+    gesture.phase = "dragging";
+    gesture.restoreFocus = Boolean(gesture.source.shadowRoot?.activeElement);
+    this.board.setPointerCapture(gesture.pointerId);
+    const overlay = gesture.overlay = new DeesKanbanCard();
+    overlay.dataset.kanbanPreview = "";
+    overlay.ticket = gesture.source.ticket;
+    overlay.epic = gesture.source.epic;
+    overlay.subtasks = gesture.source.subtasks;
+    overlay.columns = gesture.source.columns;
+    overlay.movable = gesture.source.movable;
+    overlay.pointerManaged = true;
+    overlay.inert = true;
+    overlay.setAttribute("aria-hidden", "true");
+    const styles3 = getComputedStyle(gesture.source);
+    for (const name of styles3) if (name.startsWith("--dees-")) overlay.style.setProperty(name, styles3.getPropertyValue(name));
+    const zIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(overlay, zIndex);
+    Object.assign(overlay.style, { position: "fixed", margin: "0", pointerEvents: "none", width: `${gesture.width}px`, zIndex: String(zIndex), transformOrigin: "center" });
+    this.positionPreview(gesture);
+    getOverlayContainer(this.board).append(overlay);
+    this.collectScrollParents();
+    const widths = new Map(this.columns.map((column) => [column, column.getBoundingClientRect().width]));
+    this.resizeObserver = new ResizeObserver((entries) => {
+      if (entries.some((entry) => Math.abs(entry.borderBoxSize[0].inlineSize - widths.get(entry.target)) > 0.5)) void this.cancel();
+    });
+    for (const column of this.columns) this.resizeObserver.observe(column);
+    await overlay.updateComplete;
+    if (this.gesture !== gesture || gesture.phase !== "dragging") return;
+    const details = overlay.shadowRoot?.querySelector("details");
+    if (details) details.open = gesture.expanded;
+    const article = overlay.shadowRoot.querySelector("article");
+    const resting = { boxShadow: getComputedStyle(article).boxShadow, borderColor: getComputedStyle(article).borderColor };
+    article.style.borderColor = "var(--dees-color-border-strong)";
+    article.style.boxShadow = "var(--dees-shadow-lg)";
+    if (!this.reducedMotion.matches) {
+      overlay.style.transform = "scale(1.02)";
+      overlay.animate([{ transform: "scale(1)" }, { transform: "scale(1.02)" }], { duration: 120, easing: this.easing("out") });
+      gesture.elevation = article.animate([resting, { boxShadow: getComputedStyle(article).boxShadow, borderColor: getComputedStyle(article).borderColor }], { duration: 120, easing: this.easing("out") });
+    }
+    await this.renderMotion();
+    if (this.gesture === gesture && gesture.phase === "dragging") this.frame = requestAnimationFrame(this.tick);
+  }
+  positionPreview(gesture) {
+    if (!gesture.overlay) return;
+    gesture.overlay.style.left = `${gesture.x - gesture.offsetX}px`;
+    gesture.overlay.style.top = `${gesture.y - gesture.offsetY}px`;
+  }
+  tick = /* @__PURE__ */ __name((time) => {
+    const gesture = this.gesture;
+    if (!gesture || gesture.phase !== "dragging") return;
+    this.positionPreview(gesture);
+    this.autoScroll(gesture, Math.min(2, (time - (this.previousFrame || time - 16.7)) / 16.7));
+    this.previousFrame = time;
+    if (!this.rendering) {
+      const target = this.targetAt(gesture) ?? this.authoritativeMove(gesture.motion.ticket.id);
+      if (target && !sameMove(target, gesture.motion.move)) {
+        gesture.motion = { ...gesture.motion, move: target };
+        void this.renderMotion();
+      }
+    }
+    this.frame = requestAnimationFrame(this.tick);
+  }, "tick");
+  targetAt(gesture) {
+    const clip = this.visibleRect();
+    if (gesture.x < clip.left - 48 || gesture.x > clip.right + 48 || gesture.y < clip.top - 48 || gesture.y > clip.bottom + 48) return;
+    const centerX = gesture.x - gesture.offsetX + gesture.width / 2;
+    const centerY = gesture.y - gesture.offsetY + gesture.motion.height / 2;
+    const lanes = this.columns.filter((column2) => {
+      const rect = column2.getBoundingClientRect();
+      return rect.right > clip.left && rect.left < clip.right;
+    });
+    let column = lanes.sort((a4, b4) => {
+      const ar = a4.getBoundingClientRect(), br = b4.getBoundingClientRect();
+      return Math.abs(centerX - (ar.left + ar.width / 2)) - Math.abs(centerX - (br.left + br.width / 2));
+    })[0];
+    if (!column?.column) return;
+    const currentLane = lanes.find((item) => item.column?.id === gesture.motion.move.columnId);
+    if (currentLane && currentLane !== column) {
+      const currentRect = currentLane.getBoundingClientRect(), candidateRect = column.getBoundingClientRect();
+      const currentCenter = currentRect.left + currentRect.width / 2, candidateCenter = candidateRect.left + candidateRect.width / 2;
+      if (Math.abs(centerX - currentCenter) < Math.abs(candidateCenter - currentCenter) / 2 + 12) column = currentLane;
+    }
+    const columnId = column.column?.id;
+    if (!columnId) return;
+    const tickets = sortKanbanTickets(column.tickets).filter((ticket) => ticket.id !== gesture.motion.ticket.id);
+    let top = column.shadowRoot.querySelector(".stack").getBoundingClientRect().top;
+    const currentIndex = gesture.motion.move.columnId === columnId ? tickets.findIndex((ticket) => ticket.id === gesture.motion.move.beforeTicketId) : -1;
+    const current = currentIndex < 0 ? tickets.length : currentIndex;
+    let index3 = tickets.length;
+    for (let i11 = 0; i11 < tickets.length; i11++) {
+      const node2 = this.targets(column).find((target) => target.dataset.ticketId === tickets[i11].id);
+      const midpoint = top + node2.offsetHeight / 2;
+      const hysteresis = gesture.motion.move.columnId === columnId ? i11 < current ? -6 : 6 : 0;
+      if (centerY < midpoint + hysteresis) {
+        index3 = i11;
+        break;
+      }
+      top += node2.offsetHeight + 8;
+    }
+    return { ticketId: gesture.motion.ticket.id, columnId, beforeTicketId: tickets[index3]?.id };
+  }
+  up = /* @__PURE__ */ __name((event) => {
+    const gesture = this.gesture;
+    if (!gesture || gesture.pointerId !== event.pointerId || !["armed", "dragging"].includes(gesture.phase)) return;
+    if (gesture.phase === "armed") {
+      this.clear();
+      return;
+    }
+    gesture.x = event.clientX;
+    gesture.y = event.clientY;
+    this.blockClick();
+    const target = this.targetAt(gesture);
+    if (!target) {
+      void this.cancel();
+      return;
+    }
+    gesture.phase = "landing";
+    this.endPointer();
+    gesture.motion = { ...gesture.motion, move: target };
+    void this.land(gesture);
+    if (sameMove(target, this.authoritativeMove(target.ticketId))) {
+      gesture.settled = true;
+    } else {
+      void this.commit(target).then((saved) => this.settle(gesture, saved));
+    }
+  }, "up");
+  pointerCancel = /* @__PURE__ */ __name((event) => {
+    if (event.pointerId === this.gesture?.pointerId && ["armed", "dragging"].includes(this.gesture.phase)) void this.cancel();
+  }, "pointerCancel");
+  key = /* @__PURE__ */ __name((event) => {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    void this.cancel();
+  }, "key");
+  blur = /* @__PURE__ */ __name(() => {
+    void this.cancel();
+  }, "blur");
+  async cancel() {
+    const gesture = this.gesture;
+    if (!gesture || !["armed", "dragging"].includes(gesture.phase)) return;
+    if (gesture.phase === "armed") {
+      this.clear();
+      return;
+    }
+    this.blockClick();
+    gesture.phase = "landing";
+    gesture.settled = false;
+    this.endPointer();
+    const origin = this.authoritativeMove(gesture.motion.ticket.id);
+    if (!origin) {
+      this.fadeAndClear(gesture);
+      return;
+    }
+    gesture.motion = { ...gesture.motion, move: origin };
+    const column = this.columns.find((item) => item.column?.id === origin.columnId);
+    if (gesture.overlay && column) {
+      gesture.overlay.style.width = `${column.getBoundingClientRect().width}px`;
+      gesture.motion.height = gesture.overlay.offsetHeight;
+    }
+    await this.land(gesture);
+  }
+  authoritativeMove(ticketId) {
+    const ticket = this.board.tickets.find((item) => item.id === ticketId);
+    if (!ticket) return;
+    const tickets = sortKanbanTickets(this.columns.find((column) => column.column?.id === ticket.columnId)?.tickets ?? []);
+    return { ticketId, columnId: ticket.columnId, beforeTicketId: tickets[tickets.findIndex((item) => item.id === ticketId) + 1]?.id };
+  }
+  async land(gesture) {
+    const revision = ++gesture.flightRevision;
+    await this.renderMotion();
+    if (this.gesture !== gesture || gesture.flightRevision !== revision) return;
+    const target = this.allTargets().find((node2) => node2.dataset.ticketId === gesture.motion.ticket.id);
+    const overlay = gesture.overlay;
+    if (!target || !overlay) {
+      this.clear();
+      return;
+    }
+    const from3 = overlay.getBoundingClientRect(), to = target.getBoundingClientRect();
+    gesture.flight?.cancel();
+    for (const animation of overlay.getAnimations()) animation.cancel();
+    Object.assign(overlay.style, { left: `${to.left}px`, top: `${to.top}px`, width: `${to.width}px`, transform: "none" });
+    const article = overlay.shadowRoot?.querySelector("article");
+    const raised = article ? { boxShadow: getComputedStyle(article).boxShadow, borderColor: getComputedStyle(article).borderColor } : void 0;
+    gesture.elevation?.cancel();
+    if (article) {
+      article.style.boxShadow = "";
+      article.style.borderColor = "";
+    }
+    if (!this.reducedMotion.matches) {
+      const duration = Math.min(280, Math.max(160, 120 + 0.25 * Math.hypot(to.left - from3.left, to.top - from3.top)));
+      if (article && raised) gesture.elevation = article.animate([raised, { boxShadow: getComputedStyle(article).boxShadow, borderColor: getComputedStyle(article).borderColor }], { duration, easing: this.easing("spring") });
+      const flight = gesture.flight = overlay.animate([
+        { transform: `translate(${from3.left - to.left}px, ${from3.top - to.top}px) scale(${from3.width / to.width}, ${from3.height / to.height})`, transformOrigin: "top left" },
+        { transform: "none", transformOrigin: "top left" }
+      ], { duration, easing: this.easing("spring") });
+      const completed = await flight.finished.then(() => true, () => false);
+      if (!completed) return;
+    }
+    if (this.gesture !== gesture || gesture.flightRevision !== revision) return;
+    if (gesture.settled !== void 0) {
+      await this.clearMotion(gesture);
+      return;
+    }
+    gesture.phase = "pending";
+    gesture.motion = { ...gesture.motion, placeholder: false };
+    await this.renderMotion();
+    if (this.gesture !== gesture) return;
+    this.removeOverlay(gesture);
+    this.delay(() => {
+      if (this.gesture === gesture && gesture.phase === "pending") {
+        gesture.motion = { ...gesture.motion, dimmed: true };
+        void this.renderMotion();
+      }
+    }, 180);
+    this.delay(() => {
+      if (this.gesture === gesture && gesture.phase === "pending") {
+        gesture.motion = { ...gesture.motion, saving: true };
+        void this.renderMotion();
+      }
+    }, 600);
+  }
+  async settle(gesture, saved) {
+    if (this.gesture !== gesture) return;
+    gesture.settled = saved;
+    await this.board.updateComplete;
+    if (this.gesture !== gesture) return;
+    const move = this.authoritativeMove(gesture.motion.ticket.id);
+    if (!move) {
+      this.fadeAndClear(gesture);
+      return;
+    }
+    const unchanged = sameMove(move, gesture.motion.move);
+    gesture.motion = { ...gesture.motion, move, ticket: this.board.tickets.find((ticket) => ticket.id === move.ticketId), dimmed: false, saving: false };
+    if (gesture.phase === "landing") {
+      if (!unchanged) await this.land(gesture);
+    } else {
+      gesture.phase = "settling";
+      await this.clearMotion(gesture, saved ? 200 : 240);
+    }
+  }
+  targets(column) {
+    return [...column.shadowRoot?.querySelectorAll(".target") ?? []];
+  }
+  allTargets() {
+    return this.columns.flatMap((column) => this.targets(column));
+  }
+  capture() {
+    return new Map(this.allTargets().map((node2) => [node2.dataset.ticketId, node2.getBoundingClientRect()]));
+  }
+  async animateFrom(before, duration = 200) {
+    await Promise.all(this.columns.map((column) => column.updateComplete));
+    for (const animation of this.animations.values()) animation.cancel();
+    this.animations.clear();
+    if (this.reducedMotion.matches || !this.board.isConnected) return;
+    const easing = this.easing("spring");
+    for (const node2 of this.allTargets()) {
+      if (node2.querySelector(".placeholder")) continue;
+      const old = before.get(node2.dataset.ticketId), rect = node2.getBoundingClientRect();
+      if (!old || Math.abs(old.x - rect.x) + Math.abs(old.y - rect.y) < 0.5) continue;
+      const animation = node2.animate([{ transform: `translate(${old.x - rect.x}px, ${old.y - rect.y}px)` }, { transform: "none" }], { duration, easing });
+      this.animations.set(node2, animation);
+      void animation.finished.then(() => {
+        if (this.animations.get(node2) === animation) this.animations.delete(node2);
+      }, () => {
+      });
+    }
+  }
+  async renderMotion() {
+    this.rendering = true;
+    const before = this.capture();
+    for (const column of this.columns) column.motion = this.gesture?.motion;
+    await Promise.all(this.columns.map((column) => column.updateComplete));
+    const gesture = this.gesture;
+    if (gesture && !gesture.motion.placeholder) await this.restoreExpansion(gesture);
+    await this.animateFrom(before);
+    this.rendering = false;
+  }
+  async restoreExpansion(gesture) {
+    const card = this.allTargets().find((node2) => node2.dataset.ticketId === gesture.motion.ticket.id)?.querySelector("dees-kanban-card");
+    if (!card) return;
+    await card.updateComplete;
+    const details = card.shadowRoot?.querySelector("details");
+    if (details) details.open = gesture.expanded;
+  }
+  async clearMotion(gesture, duration = 200) {
+    const before = this.capture();
+    for (const column of this.columns) column.motion = void 0;
+    await Promise.all(this.columns.map((column) => column.updateComplete));
+    if (this.gesture !== gesture) return;
+    await this.restoreExpansion(gesture);
+    this.removeOverlay(gesture);
+    await this.animateFrom(before, duration);
+    await Promise.all([...this.animations.values()].map((animation) => animation.finished.catch(() => {
+    })));
+    if (this.gesture === gesture) this.clear();
+  }
+  collectScrollParents() {
+    this.scrollParents = [];
+    let node2 = this.board.shadowRoot.querySelector(".columns");
+    while (node2) {
+      if (node2 instanceof HTMLElement) {
+        const style2 = getComputedStyle(node2);
+        if (/(auto|scroll)/.test(style2.overflowX + style2.overflowY) || node2 === document.scrollingElement) {
+          this.scrollParents.push(node2);
+          this.scrollSnap.set(node2, node2.style.scrollSnapType);
+          node2.style.scrollSnapType = "none";
+        }
+      }
+      node2 = node2 instanceof Element && node2.assignedSlot || node2.parentNode || (node2 instanceof ShadowRoot ? node2.host : null);
+    }
+  }
+  visibleRect() {
+    const board = this.board.shadowRoot.querySelector(".columns").getBoundingClientRect();
+    const clip = { left: Math.max(0, board.left), right: Math.min(innerWidth, board.right), top: Math.max(0, board.top), bottom: Math.min(innerHeight, board.bottom) };
+    for (const parent of this.scrollParents) {
+      if (parent === document.scrollingElement) continue;
+      const rect = parent.getBoundingClientRect();
+      clip.left = Math.max(clip.left, rect.left);
+      clip.right = Math.min(clip.right, rect.right);
+      clip.top = Math.max(clip.top, rect.top);
+      clip.bottom = Math.min(clip.bottom, rect.bottom);
+    }
+    return clip;
+  }
+  autoScroll(gesture, elapsed) {
+    const velocity = /* @__PURE__ */ __name((point4, start, end, edge) => point4 < start + edge ? -Math.min(1, Math.max(0, (start + edge - point4) / edge)) * 14 * elapsed : point4 > end - edge ? Math.min(1, Math.max(0, (point4 - end + edge) / edge)) * 14 * elapsed : 0, "velocity");
+    let movedX = false, movedY = false;
+    for (const parent of this.scrollParents) {
+      const rect = parent === document.scrollingElement ? { left: 0, top: 0, right: innerWidth, bottom: innerHeight } : parent.getBoundingClientRect();
+      const left = Math.max(0, rect.left), top = Math.max(0, rect.top), right = Math.min(innerWidth, rect.right), bottom = Math.min(innerHeight, rect.bottom);
+      if (gesture.x < left - 48 || gesture.x > right + 48 || gesture.y < top - 56 || gesture.y > bottom + 56) continue;
+      const x3 = parent.scrollLeft, y3 = parent.scrollTop;
+      if (!movedX) parent.scrollLeft += velocity(gesture.x, left, right, 48);
+      if (!movedY) parent.scrollTop += velocity(gesture.y, top, bottom, 56);
+      movedX ||= parent.scrollLeft !== x3;
+      movedY ||= parent.scrollTop !== y3;
+    }
+  }
+  endPointer() {
+    this.listeners?.abort();
+    this.listeners = void 0;
+    cancelAnimationFrame(this.frame);
+    this.frame = 0;
+    this.previousFrame = 0;
+    if (this.gesture && this.board.hasPointerCapture(this.gesture.pointerId)) this.board.releasePointerCapture(this.gesture.pointerId);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = void 0;
+  }
+  blockClick() {
+    this.suppressClick?.abort();
+    const controller = this.suppressClick = new AbortController();
+    window.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      controller.abort();
+    }, { capture: true, once: true, signal: controller.signal });
+    clearTimeout(this.clickTimer);
+    this.clickTimer = setTimeout(() => controller.abort(), 0);
+  }
+  delay(callback, duration) {
+    const timer2 = setTimeout(() => {
+      this.timers.delete(timer2);
+      callback();
+    }, duration);
+    this.timers.add(timer2);
+  }
+  removeOverlay(gesture) {
+    if (!gesture.overlay) return;
+    gesture.elevation?.cancel();
+    zIndexRegistry.unregister(gesture.overlay);
+    gesture.overlay.remove();
+    gesture.overlay = void 0;
+  }
+  fadeAndClear(gesture) {
+    if (gesture.phase === "settling") return;
+    gesture.phase = "settling";
+    this.endPointer();
+    const element4 = gesture.overlay ?? this.allTargets().find((node2) => node2.dataset.ticketId === gesture.motion.ticket.id);
+    if (!element4 || this.reducedMotion.matches) {
+      this.clear();
+      return;
+    }
+    const transform2 = getComputedStyle(element4).transform;
+    gesture.flight?.cancel();
+    element4.style.transform = transform2;
+    const fade = gesture.flight = element4.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 120, fill: "forwards" });
+    void fade.finished.then(() => {
+      if (this.gesture === gesture) void this.clearMotion(gesture);
+    }, () => {
+    });
+  }
+  clear() {
+    const gesture = this.gesture;
+    this.endPointer();
+    this.gesture = void 0;
+    for (const [parent, value2] of this.scrollSnap) parent.style.scrollSnapType = value2;
+    this.scrollSnap.clear();
+    this.scrollParents = [];
+    for (const timer2 of this.timers) clearTimeout(timer2);
+    this.timers.clear();
+    for (const animation of this.animations.values()) animation.cancel();
+    this.animations.clear();
+    for (const column of this.columns) column.motion = void 0;
+    if (!gesture) return;
+    gesture.flight?.cancel();
+    this.removeOverlay(gesture);
+    let focused = document.activeElement;
+    while (focused?.shadowRoot?.activeElement) focused = focused.shadowRoot.activeElement;
+    if (gesture.restoreFocus && this.board.isConnected && (focused === document.body || focused === this.board)) {
+      const card = this.allTargets().find((node2) => node2.dataset.ticketId === gesture.motion.ticket.id)?.querySelector("dees-kanban-card");
+      card?.shadowRoot?.querySelector(".title")?.focus({ preventScroll: true });
+    }
+  }
+  disconnect() {
+    this.board.removeEventListener("pointerdown", this.down);
+    this.suppressClick?.abort();
+    clearTimeout(this.clickTimer);
+    this.clear();
+  }
+};
+
 // ts_web/elements/00group-kanban/dees-kanban-column/dees-kanban-column.ts
 init_dist_ts26();
-var _draggingOver_dec, _dropBefore_dec, _draggingTicketId_dec, _pendingTicketId_dec, _canCreate_dec, _movable_dec2, _columns_dec5, _allTickets_dec, _tickets_dec2, _column_dec, _a108, _DeesKanbanColumn_decorators, _init110, _column, _tickets2, _allTickets, _columns5, _movable2, _canCreate, _pendingTicketId, _draggingTicketId, _dropBefore, _draggingOver;
+var _motion_dec, _nativeOver_dec, _nativeDropBefore_dec, _pointerManaged_dec2, _draggingTicketId_dec, _pendingTicketId_dec, _canCreate_dec, _movesDisabled_dec, _movable_dec2, _columns_dec5, _allTickets_dec, _tickets_dec2, _column_dec, _a108, _DeesKanbanColumn_decorators, _init110, _column, _tickets2, _allTickets, _columns5, _movable2, _movesDisabled, _canCreate, _pendingTicketId, _draggingTicketId, _pointerManaged2, _nativeDropBefore, _nativeOver, _motion;
 _DeesKanbanColumn_decorators = [customElement("dees-kanban-column")];
-var _DeesKanbanColumn = class _DeesKanbanColumn extends (_a108 = DeesElement, _column_dec = [n5({ attribute: false })], _tickets_dec2 = [n5({ attribute: false })], _allTickets_dec = [n5({ attribute: false })], _columns_dec5 = [n5({ attribute: false })], _movable_dec2 = [n5({ type: Boolean })], _canCreate_dec = [n5({ type: Boolean })], _pendingTicketId_dec = [n5({ type: String })], _draggingTicketId_dec = [n5({ type: String })], _dropBefore_dec = [r5()], _draggingOver_dec = [r5()], _a108) {
+var _DeesKanbanColumn = class _DeesKanbanColumn extends (_a108 = DeesElement, _column_dec = [n5({ attribute: false })], _tickets_dec2 = [n5({ attribute: false })], _allTickets_dec = [n5({ attribute: false })], _columns_dec5 = [n5({ attribute: false })], _movable_dec2 = [n5({ type: Boolean })], _movesDisabled_dec = [n5({ type: Boolean })], _canCreate_dec = [n5({ type: Boolean })], _pendingTicketId_dec = [n5({ type: String })], _draggingTicketId_dec = [n5({ type: String })], _pointerManaged_dec2 = [n5({ attribute: false })], _nativeDropBefore_dec = [r5()], _nativeOver_dec = [r5()], _motion_dec = [n5({ attribute: false })], _a108) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _column, __runInitializers(_init110, 8, this)), __runInitializers(_init110, 11, this);
@@ -184538,53 +185137,66 @@ var _DeesKanbanColumn = class _DeesKanbanColumn extends (_a108 = DeesElement, _c
     __privateAdd(this, _allTickets, __runInitializers(_init110, 16, this, [])), __runInitializers(_init110, 19, this);
     __privateAdd(this, _columns5, __runInitializers(_init110, 20, this, [])), __runInitializers(_init110, 23, this);
     __privateAdd(this, _movable2, __runInitializers(_init110, 24, this, false)), __runInitializers(_init110, 27, this);
-    __privateAdd(this, _canCreate, __runInitializers(_init110, 28, this, false)), __runInitializers(_init110, 31, this);
-    __privateAdd(this, _pendingTicketId, __runInitializers(_init110, 32, this, "")), __runInitializers(_init110, 35, this);
-    __privateAdd(this, _draggingTicketId, __runInitializers(_init110, 36, this, "")), __runInitializers(_init110, 39, this);
-    __privateAdd(this, _dropBefore, __runInitializers(_init110, 40, this)), __runInitializers(_init110, 43, this);
-    __privateAdd(this, _draggingOver, __runInitializers(_init110, 44, this, false)), __runInitializers(_init110, 47, this);
+    __privateAdd(this, _movesDisabled, __runInitializers(_init110, 28, this, false)), __runInitializers(_init110, 31, this);
+    __privateAdd(this, _canCreate, __runInitializers(_init110, 32, this, false)), __runInitializers(_init110, 35, this);
+    __privateAdd(this, _pendingTicketId, __runInitializers(_init110, 36, this, "")), __runInitializers(_init110, 39, this);
+    __privateAdd(this, _draggingTicketId, __runInitializers(_init110, 40, this, "")), __runInitializers(_init110, 43, this);
+    __privateAdd(this, _pointerManaged2, __runInitializers(_init110, 44, this, false)), __runInitializers(_init110, 47, this);
+    __privateAdd(this, _nativeDropBefore, __runInitializers(_init110, 48, this)), __runInitializers(_init110, 51, this);
+    __privateAdd(this, _nativeOver, __runInitializers(_init110, 52, this, false)), __runInitializers(_init110, 55, this);
+    __privateAdd(this, _motion, __runInitializers(_init110, 56, this)), __runInitializers(_init110, 59, this);
   }
   updated() {
-    if (!this.draggingTicketId) this.draggingOver = false;
+    if (!this.draggingTicketId) this.nativeOver = false;
   }
   render() {
     if (!this.column) return b2``;
-    return b2`<section class=${this.draggingOver ? "over" : ""} aria-label=${this.column.title}
+    const motion = this.motion;
+    const tickets = sortKanbanTickets(this.tickets).filter((ticket) => ticket.id !== motion?.move.ticketId);
+    const active = motion?.move.columnId === this.column.id;
+    if (motion && active) {
+      const index3 = tickets.findIndex((ticket) => ticket.id === motion.move.beforeTicketId);
+      tickets.splice(index3 < 0 ? tickets.length : index3, 0, motion.ticket);
+    }
+    return b2`<section class=${active && motion?.placeholder || this.nativeOver ? "over" : ""} aria-label=${this.column.title}
       @dragover=${(event) => {
-      if (this.draggingTicketId && this.movable) {
+      if (!this.pointerManaged && this.draggingTicketId && this.movable && !this.movesDisabled) {
         event.preventDefault();
-        this.draggingOver = true;
+        this.nativeOver = true;
         if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
       }
     }}
       @dragleave=${(event) => {
-      if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) this.draggingOver = false;
+      if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) this.nativeOver = false;
     }}
       @drop=${(event) => {
+      if (this.pointerManaged) return;
       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 });
+      this.nativeOver = false;
+      if (this.movable && !this.movesDisabled && 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.nativeDropBefore });
     }}>
-      <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">${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="stack">${directives_exports.repeat(tickets, (ticket) => ticket.id, (ticket) => b2`
+        <div class="target ${this.nativeOver && this.nativeDropBefore === ticket.id ? "native-before" : ""}" data-ticket-id=${ticket.id}
           @dragover=${() => {
-      this.dropBefore = ticket.id;
+      if (!this.pointerManaged) this.nativeDropBefore = ticket.id;
     }}>
-          <dees-kanban-card .ticket=${ticket} .columns=${this.columns}
+          ${motion?.move.ticketId === ticket.id && motion.placeholder ? b2`<div class="placeholder" style=${`height: ${motion.height}px`} aria-label="Drop ticket here"></div>` : b2`<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>
+            .movable=${this.movable && ticket.permissions?.move !== false} .pending=${motion?.move.ticketId === ticket.id ? motion.dimmed : this.pendingTicketId === ticket.id}
+            .moveDisabled=${this.movesDisabled}
+            .saving=${motion?.move.ticketId === ticket.id && motion.saving} .pointerManaged=${this.pointerManaged}></dees-kanban-card>`}
         </div>`)}
-        ${!this.tickets.length ? b2`<div class="empty" @dragover=${() => {
-      this.dropBefore = void 0;
+        ${!tickets.length ? b2`<div class="empty" @dragover=${() => {
+      this.nativeDropBefore = void 0;
     }}>No tasks</div>` : ""}
       </div>
-      <div class="end-target ${this.draggingOver && !this.dropBefore ? "before" : ""}" @dragover=${() => {
-      this.dropBefore = void 0;
+      <div class="end-target ${this.nativeOver && !this.nativeDropBefore ? "native-before" : ""}" @dragover=${() => {
+      this.nativeDropBefore = void 0;
     }}></div>
     </section>`;
   }
@@ -184595,34 +185207,45 @@ _tickets2 = new WeakMap();
 _allTickets = new WeakMap();
 _columns5 = new WeakMap();
 _movable2 = new WeakMap();
+_movesDisabled = new WeakMap();
 _canCreate = new WeakMap();
 _pendingTicketId = new WeakMap();
 _draggingTicketId = new WeakMap();
-_dropBefore = new WeakMap();
-_draggingOver = new WeakMap();
+_pointerManaged2 = new WeakMap();
+_nativeDropBefore = new WeakMap();
+_nativeOver = new WeakMap();
+_motion = new WeakMap();
 __decorateElement(_init110, 4, "column", _column_dec, _DeesKanbanColumn, _column);
 __decorateElement(_init110, 4, "tickets", _tickets_dec2, _DeesKanbanColumn, _tickets2);
 __decorateElement(_init110, 4, "allTickets", _allTickets_dec, _DeesKanbanColumn, _allTickets);
 __decorateElement(_init110, 4, "columns", _columns_dec5, _DeesKanbanColumn, _columns5);
 __decorateElement(_init110, 4, "movable", _movable_dec2, _DeesKanbanColumn, _movable2);
+__decorateElement(_init110, 4, "movesDisabled", _movesDisabled_dec, _DeesKanbanColumn, _movesDisabled);
 __decorateElement(_init110, 4, "canCreate", _canCreate_dec, _DeesKanbanColumn, _canCreate);
 __decorateElement(_init110, 4, "pendingTicketId", _pendingTicketId_dec, _DeesKanbanColumn, _pendingTicketId);
 __decorateElement(_init110, 4, "draggingTicketId", _draggingTicketId_dec, _DeesKanbanColumn, _draggingTicketId);
-__decorateElement(_init110, 4, "dropBefore", _dropBefore_dec, _DeesKanbanColumn, _dropBefore);
-__decorateElement(_init110, 4, "draggingOver", _draggingOver_dec, _DeesKanbanColumn, _draggingOver);
+__decorateElement(_init110, 4, "pointerManaged", _pointerManaged_dec2, _DeesKanbanColumn, _pointerManaged2);
+__decorateElement(_init110, 4, "nativeDropBefore", _nativeDropBefore_dec, _DeesKanbanColumn, _nativeDropBefore);
+__decorateElement(_init110, 4, "nativeOver", _nativeOver_dec, _DeesKanbanColumn, _nativeOver);
+__decorateElement(_init110, 4, "motion", _motion_dec, _DeesKanbanColumn, _motion);
 _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); transition: background var(--dees-transition-default) var(--dees-ease-out); }
+    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; }
+    .native-before::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 2px; background: var(--dees-color-accent-primary); border-radius: 2px; }
+    .placeholder { border-radius: var(--dees-radius-xl); background: var(--dees-color-fill-tertiary); box-shadow: inset 0 0 0 1px var(--dees-color-border-default); }
+    .end-target { position: relative; min-height: 32px; margin-top: 8px; }
+    section.over { background: var(--dees-color-row-hover); }
+    @media (prefers-reduced-motion: reduce) { section { transition: none; } }
+    @media (pointer: coarse) { header dees-button::part(button) { width: 32px; height: 32px; min-height: 32px; } }
   `]);
 __runInitializers(_init110, 1, _DeesKanbanColumn);
 var DeesKanbanColumn = _DeesKanbanColumn;
@@ -184631,7 +185254,7 @@ var DeesKanbanColumn = _DeesKanbanColumn;
 init_dist_ts26();
 init_dees_modal();
 init_dees_contextmenu();
-var _openingTicket_dec, _draggingTicketId_dec2, _pendingTicketId_dec2, _operationError_dec, _epicId_dec, _query_dec2, _error_dec4, _loading_dec8, _provider_dec3, _people_dec2, _columns_dec6, _tickets_dec3, _heading_dec8, _a109, _DeesKanban_decorators, _init111, _heading8, _tickets3, _columns6, _people2, _provider3, _loading8, _error4, _query2, _epicId, _operationError, _pendingTicketId2, _draggingTicketId2, _openingTicket;
+var _openingTicket_dec, _pendingTicketId_dec2, _operationError_dec, _epicId_dec, _query_dec2, _error_dec4, _loading_dec8, _provider_dec3, _people_dec2, _columns_dec6, _tickets_dec3, _heading_dec8, _a109, _DeesKanban_decorators, _init111, _heading8, _tickets3, _columns6, _people2, _provider3, _loading8, _error4, _query2, _epicId, _operationError, _pendingTicketId2, _openingTicket;
 var interactionEvents = [
   "kanban-ticket-open",
   "kanban-ticket-move",
@@ -184642,12 +185265,10 @@ var interactionEvents = [
   "kanban-comment-draft",
   "kanban-comment-added",
   "kanban-comments-refresh",
-  "kanban-detail-back",
-  "kanban-drag-start",
-  "kanban-drag-end"
+  "kanban-detail-back"
 ];
 _DeesKanban_decorators = [customElement("dees-kanban")];
-var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8 = [n5({ type: String })], _tickets_dec3 = [n5({ attribute: false })], _columns_dec6 = [n5({ attribute: false })], _people_dec2 = [n5({ attribute: false })], _provider_dec3 = [n5({ attribute: false })], _loading_dec8 = [n5({ type: Boolean })], _error_dec4 = [n5({ type: String })], _query_dec2 = [r5()], _epicId_dec = [r5()], _operationError_dec = [r5()], _pendingTicketId_dec2 = [r5()], _draggingTicketId_dec2 = [r5()], _openingTicket_dec = [r5()], _a109) {
+var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8 = [n5({ type: String })], _tickets_dec3 = [n5({ attribute: false })], _columns_dec6 = [n5({ attribute: false })], _people_dec2 = [n5({ attribute: false })], _provider_dec3 = [n5({ attribute: false })], _loading_dec8 = [n5({ type: Boolean })], _error_dec4 = [n5({ type: String })], _query_dec2 = [r5()], _epicId_dec = [r5()], _operationError_dec = [r5()], _pendingTicketId_dec2 = [r5()], _openingTicket_dec = [r5()], _a109) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _heading8, __runInitializers(_init111, 8, this, "Board")), __runInitializers(_init111, 11, this);
@@ -184661,8 +185282,7 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
     __privateAdd(this, _epicId, __runInitializers(_init111, 40, this, "")), __runInitializers(_init111, 43, this);
     __privateAdd(this, _operationError, __runInitializers(_init111, 44, this, "")), __runInitializers(_init111, 47, this);
     __privateAdd(this, _pendingTicketId2, __runInitializers(_init111, 48, this, "")), __runInitializers(_init111, 51, this);
-    __privateAdd(this, _draggingTicketId2, __runInitializers(_init111, 52, this, "")), __runInitializers(_init111, 55, this);
-    __privateAdd(this, _openingTicket, __runInitializers(_init111, 56, this, false)), __runInitializers(_init111, 59, this);
+    __privateAdd(this, _openingTicket, __runInitializers(_init111, 52, this, false)), __runInitializers(_init111, 55, this);
     __publicField(this, "modal");
     __publicField(this, "modalOpening");
     __publicField(this, "detail");
@@ -184675,6 +185295,8 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
     __publicField(this, "commentDrafts", /* @__PURE__ */ new Map());
     __publicField(this, "ticketDrafts", /* @__PURE__ */ new Map());
     __publicField(this, "resolvedTickets", /* @__PURE__ */ new Map());
+    __publicField(this, "activeMove");
+    __publicField(this, "dragController", new KanbanDragController(this, (input) => this.persistMove(input), () => !this.pendingTicketId));
     __publicField(this, "searchTickets", /* @__PURE__ */ __name(async (query3, signal) => {
       const tickets = this.provider.searchTickets ? await this.provider.searchTickets(query3, signal) : this.tickets.filter((ticket) => ticketLabel(ticket).toLocaleLowerCase().includes(query3.toLocaleLowerCase()));
       if (!signal.aborted) for (const ticket of tickets) this.resolvedTickets.set(ticket.id, ticket);
@@ -184724,22 +185346,18 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
           if (previous3) void this.openTicket(previous3, false);
           break;
         }
-        case "kanban-drag-start":
-          this.draggingTicketId = detail.ticketId;
-          break;
-        case "kanban-drag-end":
-          this.draggingTicketId = "";
-          break;
       }
     }, "handleInteraction"));
   }
   async connectedCallback() {
     const connection = super.connectedCallback();
     for (const name of interactionEvents) this.addEventListener(name, this.handleInteraction);
+    this.dragController.connect();
     await connection;
   }
   updated() {
     this.syncDetail();
+    this.dragController.sync();
   }
   render() {
     const epics = sortKanbanTickets(this.tickets.filter((ticket) => ticket.kind === "epic"));
@@ -184752,35 +185370,37 @@ 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}>
-        ${this.columns.map((column) => b2`<dees-kanban-column .column=${column} .columns=${this.columns}
+        ${directives_exports.repeat(this.columns, (column) => column.id, (column) => b2`<dees-kanban-column .column=${column} .columns=${this.columns}
+          .pointerManaged=${true}
           .tickets=${tasks.filter((ticket) => ticket.columnId === column.id)} .allTickets=${this.tickets}
-          .movable=${Boolean(this.provider.moveTicket) && !this.pendingTicketId} .canCreate=${Boolean(this.provider.createTicket)}
-          .pendingTicketId=${this.pendingTicketId} .draggingTicketId=${this.draggingTicketId}></dees-kanban-column>`)}</div>`}`;
+          .movable=${Boolean(this.provider.moveTicket)} .canCreate=${Boolean(this.provider.createTicket)}
+          .movesDisabled=${Boolean(this.pendingTicketId)}
+          .pendingTicketId=${this.pendingTicketId}></dees-kanban-column>`)}</div>`}`;
   }
   findTicket(id) {
     return this.tickets.find((ticket) => ticket.id === id) ?? this.resolvedTickets.get(id);
@@ -184801,6 +185421,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 +185433,7 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
           width: 1e3,
           maxWidth: 1040,
           mobileFullscreen: true,
+          contentPadding: 0,
           content: b2`${this.detail}`,
           menuOptions: []
         });
@@ -184902,29 +185524,44 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
   }
   /** Provider commits the move and supplies the new ordering. Hierarchy is never part of a move request. */
   async moveTicket(input) {
+    if (this.dragController.busy) return;
+    await this.persistMove(input, true);
+  }
+  async persistMove(input, animate = false) {
     const ticket = this.findTicket(input.ticketId);
-    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId || input.beforeTicketId === ticket.id) return;
+    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId || input.beforeTicketId === ticket.id) return false;
     if (!this.columns.some((column) => column.id === input.columnId)) {
       this.reportError(new Error("Unknown destination column."));
-      return;
+      return false;
     }
     const before = input.beforeTicketId ? this.findTicket(input.beforeTicketId) : void 0;
     if (input.beforeTicketId && (!before || before.columnId !== input.columnId || before.kind !== ticket.kind)) {
       this.reportError(new Error("Invalid insertion target."));
-      return;
+      return false;
     }
+    const operation = this.activeMove = /* @__PURE__ */ Symbol();
     this.pendingTicketId = ticket.id;
     this.operationError = "";
-    this.draggingTicketId = "";
     try {
       const changed2 = await this.provider.moveTicket(input);
+      if (this.activeMove !== operation) return false;
       if (!changed2.some((item) => item.id === ticket.id)) throw new Error("The move provider did not return the moved ticket.");
+      const positions = animate ? this.dragController.capture() : void 0;
       this.mergeTickets(changed2);
+      if (positions) {
+        await this.updateComplete;
+        await this.dragController.animateFrom(positions);
+      }
+      return true;
     } catch (error) {
-      this.reportError(error);
+      if (this.activeMove === operation) this.reportError(error);
+      return false;
     } finally {
-      this.pendingTicketId = "";
-      this.syncDetail();
+      if (this.activeMove === operation) {
+        this.activeMove = void 0;
+        this.pendingTicketId = "";
+        this.syncDetail();
+      }
     }
   }
   async saveTicket(ticketId, draft) {
@@ -184999,6 +185636,11 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
   }
   async disconnectedCallback() {
     for (const name of interactionEvents) this.removeEventListener(name, this.handleInteraction);
+    this.dragController.disconnect();
+    if (this.activeMove) {
+      this.activeMove = void 0;
+      this.pendingTicketId = "";
+    }
     this.openAbort?.abort();
     this.commentsAbort?.abort();
     void this.modal?.destroy();
@@ -185017,7 +185659,6 @@ _query2 = new WeakMap();
 _epicId = new WeakMap();
 _operationError = new WeakMap();
 _pendingTicketId2 = new WeakMap();
-_draggingTicketId2 = new WeakMap();
 _openingTicket = new WeakMap();
 __decorateElement(_init111, 4, "heading", _heading_dec8, _DeesKanban, _heading8);
 __decorateElement(_init111, 4, "tickets", _tickets_dec3, _DeesKanban, _tickets3);
@@ -185030,21 +185671,33 @@ __decorateElement(_init111, 4, "query", _query_dec2, _DeesKanban, _query2);
 __decorateElement(_init111, 4, "epicId", _epicId_dec, _DeesKanban, _epicId);
 __decorateElement(_init111, 4, "operationError", _operationError_dec, _DeesKanban, _operationError);
 __decorateElement(_init111, 4, "pendingTicketId", _pendingTicketId_dec2, _DeesKanban, _pendingTicketId2);
-__decorateElement(_init111, 4, "draggingTicketId", _draggingTicketId_dec2, _DeesKanban, _draggingTicketId2);
 __decorateElement(_init111, 4, "openingTicket", _openingTicket_dec, _DeesKanban, _openingTicket);
 _DeesKanban = __decorateElement(_init111, 0, "DeesKanban", _DeesKanban_decorators, _DeesKanban);
 __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;
@@ -196809,9 +197462,9 @@ var AnnotationEditor = class _AnnotationEditor {
     } = this.getClientDimensions();
     const {
       innerHeight: innerHeight2,
-      innerWidth
+      innerWidth: innerWidth2
     } = window;
-    return left < innerWidth && right > 0 && top < innerHeight2 && bottom > 0;
+    return left < innerWidth2 && right > 0 && top < innerHeight2 && bottom > 0;
   }
   #addFocusListeners() {
     if (this.#focusAC || !this.div) {
@@ -226450,7 +227103,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "13.0.0",
+  version: "13.0.2",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };