@design.estate/dees-catalog 13.0.0 → 13.0.2

package/dist_ts_web/elements/00group-kanban/kanban.helpers.js

@@ -1,3 +1,5 @@
+export const kanbanInitials = (name) => name.trim().split(/\s+/).map(part => part[0]).join('').slice(0, 2);
+export const kanbanPriorityIcon = (priority) => priority === 'urgent' ? 'lucide:ChevronsUp' : priority === 'high' ? 'lucide:ChevronUp' : priority === 'low' ? 'lucide:ChevronDown' : 'lucide:Minus';
 export const sortKanbanTickets = (tickets) => [...tickets].sort((a, b) => a.order - b.order || a.id.localeCompare(b.id));
 export const ticketLabel = (ticket) => `#${ticket.key} ${ticket.title}`;
 export const ticketDraft = (ticket) => ({
@@ -8,4 +10,4 @@ export const kanbanEvent = (owner, name, detail) => {
     owner.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
 };
 export const kanbanError = (error) => error instanceof Error ? error.message : String(error);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2FuYmFuLmhlbHBlcnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1rYW5iYW4va2FuYmFuLmhlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxPQUFpQyxFQUFtQixFQUFFLENBQ3RGLENBQUMsR0FBRyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxLQUFLLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7QUFDN0UsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLENBQUMsTUFBcUIsRUFBVSxFQUFFLENBQUMsSUFBSSxNQUFNLENBQUMsR0FBRyxJQUFJLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQztBQUMvRixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsQ0FBQyxNQUFxQixFQUFzQixFQUFFLENBQUMsQ0FBQztJQUN6RSxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxDQUFDLFdBQVcsSUFBSSxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sQ0FBQyxRQUFRLElBQUksTUFBTTtJQUMvRixVQUFVLEVBQUUsTUFBTSxDQUFDLFFBQVEsRUFBRSxFQUFFLElBQUksRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLENBQUMsUUFBUSxJQUFJLEVBQUU7Q0FDdkUsQ0FBQyxDQUFDO0FBQ0gsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLENBQUksS0FBa0IsRUFBRSxJQUFZLEVBQUUsTUFBUyxFQUFRLEVBQUU7SUFDbEYsS0FBSyxDQUFDLGFBQWEsQ0FBQyxJQUFJLFdBQVcsQ0FBQyxJQUFJLEVBQUUsRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0FBQ3hGLENBQUMsQ0FBQztBQUNGLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxDQUFDLEtBQWMsRUFBVSxFQUFFLENBQUMsS0FBSyxZQUFZLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2FuYmFuLmhlbHBlcnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1rYW5iYW4va2FuYmFuLmhlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLENBQUMsSUFBWSxFQUFVLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0FBQzNILE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLENBQUMsUUFBMEIsRUFBVSxFQUFFLENBQ3ZFLFFBQVEsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLG1CQUFtQixDQUFDLENBQUMsQ0FBQyxRQUFRLEtBQUssTUFBTSxDQUFDLENBQUMsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsUUFBUSxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxDQUFDLGNBQWMsQ0FBQztBQUV0SixNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLE9BQWlDLEVBQW1CLEVBQUUsQ0FDdEYsQ0FBQyxHQUFHLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEtBQUssSUFBSSxDQUFDLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztBQUM3RSxNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsQ0FBQyxNQUFxQixFQUFVLEVBQUUsQ0FBQyxJQUFJLE1BQU0sQ0FBQyxHQUFHLElBQUksTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDO0FBQy9GLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxDQUFDLE1BQXFCLEVBQXNCLEVBQUUsQ0FBQyxDQUFDO0lBQ3pFLEtBQUssRUFBRSxNQUFNLENBQUMsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLENBQUMsV0FBVyxJQUFJLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxDQUFDLFFBQVEsSUFBSSxNQUFNO0lBQy9GLFVBQVUsRUFBRSxNQUFNLENBQUMsUUFBUSxFQUFFLEVBQUUsSUFBSSxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sQ0FBQyxRQUFRLElBQUksRUFBRTtDQUN2RSxDQUFDLENBQUM7QUFDSCxNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsQ0FBSSxLQUFrQixFQUFFLElBQVksRUFBRSxNQUFTLEVBQVEsRUFBRTtJQUNsRixLQUFLLENBQUMsYUFBYSxDQUFDLElBQUksV0FBVyxDQUFDLElBQUksRUFBRSxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUM7QUFDeEYsQ0FBQyxDQUFDO0FBQ0YsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLENBQUMsS0FBYyxFQUFVLEVBQUUsQ0FBQyxLQUFLLFlBQVksS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMifQ==

package/dist_ts_web/elements/00group-kanban/kanban.styles.js

@@ -1,7 +1,7 @@
 import { css, cssManager } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../00theme.js';
 export const kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, css `
-  :host { display: block; min-width: 0; font-family: var(--dees-font-family); color: var(--dees-color-text-primary); font-size: var(--dees-font-body-size); }
+  :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); }
@@ -13,6 +13,14 @@ export const kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, css `
   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; }
 `];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2FuYmFuLnN0eWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWthbmJhbi9rYW5iYW4uc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDOUQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRW5ELE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFDLGtCQUFrQixFQUFFLFVBQVUsQ0FBQyxhQUFhLEVBQUUsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7OztDQWM3RSxDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2FuYmFuLnN0eWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWthbmJhbi9rYW5iYW4uc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDOUQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRW5ELE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFDLGtCQUFrQixFQUFFLFVBQVUsQ0FBQyxhQUFhLEVBQUUsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBc0I3RSxDQUFDLENBQUMifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "13.0.0",
+  "version": "13.0.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

package/readme.md

@@ -2642,9 +2642,15 @@ must enforce the same permissions.
 Provider reads receive an `AbortSignal`; obsolete reads cannot overwrite a newer
 selection. Reject mutations with an `Error` to show the failure and preserve the
 draft. Successful callbacks supply authoritative records to the component.
-Moves are awaited before changing the board; the provider must assign ordering
-atomically. Omitting `beforeTicketId` appends. Cards support drag-and-drop and a
-keyboard-accessible Move menu with within-column ordering and column selection.
+Moves are awaited before changing `.tickets` or emitting `kanban-change`; the
+provider must assign ordering atomically. Omitting `beforeTicketId` appends.
+Mouse and pen dragging shows a card-sized drop slot, animates neighboring cards,
+and lands the preview into position. A render-only placement stays visible while
+saving; slow saves show a status, and failures animate back to the saved position.
+Escape or dropping outside the board cancels. Edge scrolling works inside scroll
+containers, and reduced motion removes lift, rearrangement and landing animation.
+Touch retains normal scrolling. The keyboard-accessible Move menu supports both
+within-column ordering and column selection.
 
 Hierarchy is independent of workflow: tasks optionally belong to epics, and
 subtasks belong to tasks. Each ticket has its own `columnId`; moving a parent
@@ -2671,7 +2677,8 @@ Public methods and events:
 
 `dees-kanban-column` accepts `.column`, `.tickets`, `.allTickets`, `.columns`,
 `.movable`, `.canCreate`, `.pendingTicketId` and `.draggingTicketId`. It composes
-cards and emits `kanban-ticket-move` with the destination and insertion target.
+cards and forwards their open, create and Move menu requests. Standalone columns
+retain native dragging and emit `kanban-ticket-move` with the insertion target.
 Use it through `dees-kanban` for provider handling and board-local drag ownership.
 
 #### DeesKanbanCard
@@ -2689,6 +2696,8 @@ discussion. It accepts `.ticket`, `.tickets`, `.columns`, `.people`, `.provider`
 `.draft`, `.comments` and `.commentDraft`. It emits `kanban-ticket-save` and
 `kanban-ticket-draft` intents; `dees-kanban` owns persistence, navigation and draft
 caching. `finishEditing()` returns to the saved view after a successful update.
+The ticket key is visible by default. Set `.showTicketKey = false` only when the
+containing surface already displays it, as the board's modal heading does.
 
 #### DeesKanbanDiscussion
 
@@ -2733,6 +2742,12 @@ and cancels obsolete searches. References participate in editor undo and clipboa
 operations. Changing `.documentKey` resets history so undo cannot cross tickets.
 
 Set `.trigger`, `.label`, `.placeholder`, `.searchLabel` and `.disabled` as needed.
+For an integrated composer, style `::part(editor)` and set
+`--dees-reference-min-height` (default `84px`) or `--dees-reference-font-size`
+(default `var(--dees-font-body-size)`). Keep a visible focus indicator when
+overriding the editor's border or outline; the Kanban discussion applies it to
+the surrounding composer.
+
 `reference-input` emits `{ value }`, `reference-open` emits `{ id, label }`, and
 `reference-submit` requests submission on Ctrl/⌘ Enter. `referenceText(value)`
 returns a plain-text representation. No callback means no reference picker.

package/scripts/check-packed-consumer.mjs

@@ -30,7 +30,7 @@ writeFileSync(join(consumer, 'package.json'), JSON.stringify({
 }, null, 2));
 writeFileSync(join(consumer, 'pnpm-workspace.yaml'), 'packages:\n  - "."\n');
 // Run the same regressions against installed JavaScript, not sources.
-const browserTests = ['table-construction', 'datepicker-validation', 'textarea', 'composer-attachments', 'kanban'];
+const browserTests = ['table-construction', 'datepicker-validation', 'textarea', 'composer-attachments', 'kanban', 'kanban-motion'];
 for (const name of browserTests) {
   const browserTest = readFileSync(join(root, `test/test.${name}.browser.ts`), 'utf8')
     .replaceAll('../ts_web/', '@design.estate/dees-catalog/dist_ts_web/');

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const 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.'
 }

package/ts_web/elements/00group-input/dees-input-reference/dees-input-reference.ts

@@ -35,18 +35,18 @@ export class DeesInputReference extends DeesElement {
     :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); }
   `];
 
   public render() {
-    return html`<div class="editor"></div>${this.loadError ? html`<p class="error" role="alert">${this.loadError}</p>` : ''}`;
+    return html`<div class="editor" part="editor"></div>${this.loadError ? html`<p class="error" role="alert">${this.loadError}</p>` : ''}`;
   }
 
   public async connectedCallback(): Promise<void> {

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

@@ -1,4 +1,4 @@
-import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import { DeesElement, customElement, property, state, html, css, directives } from '@design.estate/dees-element';
 import type { IKanbanColumn, IKanbanComment, IKanbanCreate, IKanbanMove, IKanbanPerson, IKanbanProvider, IKanbanTicket, IKanbanTicketDraft } from '../interfaces.js';
 import type { TReferenceContent, TReferenceSearch } from '../../00group-input/dees-input-reference/interfaces.js';
 import type { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
@@ -8,13 +8,14 @@ import { DeesKanbanTicketDetail } from '../dees-kanban-ticket-detail/dees-kanban
 import { kanbanStyles } from '../kanban.styles.js';
 import { kanbanError, kanbanEvent, sortKanbanTickets, ticketLabel } from '../kanban.helpers.js';
 import { demoFunc } from './dees-kanban.demo.js';
+import { KanbanDragController } from '../kanban.dragcontroller.js';
 import '../dees-kanban-column/dees-kanban-column.js';
 
 declare global { interface HTMLElementTagNameMap { 'dees-kanban': DeesKanban; } }
 
 const interactionEvents = ['kanban-ticket-open', 'kanban-ticket-move', 'kanban-ticket-create', 'kanban-move-menu',
   'kanban-ticket-save', 'kanban-ticket-draft', 'kanban-comment-draft', 'kanban-comment-added', 'kanban-comments-refresh',
-  'kanban-detail-back', 'kanban-drag-start', 'kanban-drag-end'] as const;
+  'kanban-detail-back'] as const;
 
 interface IKanbanInteractionMap {
   'kanban-ticket-open': { ticketId: string };
@@ -27,8 +28,6 @@ interface IKanbanInteractionMap {
   'kanban-comment-added': { comment: IKanbanComment; submittedBody: TReferenceContent };
   'kanban-comments-refresh': { ticketId: string };
   'kanban-detail-back': Record<string, never>;
-  'kanban-drag-start': { ticketId: string };
-  'kanban-drag-end': Record<string, never>;
 }
 type TKanbanInteraction = { [K in keyof IKanbanInteractionMap]: { type: K; detail: IKanbanInteractionMap[K] } }[keyof IKanbanInteractionMap];
 
@@ -47,7 +46,6 @@ export class DeesKanban extends DeesElement {
   @state() private accessor epicId = '';
   @state() private accessor operationError = '';
   @state() private accessor pendingTicketId = '';
-  @state() private accessor draggingTicketId = '';
   @state() private accessor openingTicket = false;
   private modal?: DeesModal;
   private modalOpening?: Promise<DeesModal>;
@@ -61,24 +59,40 @@ export class DeesKanban extends DeesElement {
   private commentDrafts = new Map<string, TReferenceContent>();
   private ticketDrafts = new Map<string, IKanbanTicketDraft>();
   private resolvedTickets = new Map<string, IKanbanTicket>();
+  private activeMove?: symbol;
+  private readonly dragController = new KanbanDragController(this, input => this.persistMove(input), () => !this.pendingTicketId);
 
   public static styles = [...kanbanStyles, css`
-    :host { padding: 24px; background: var(--dees-color-bg-canvas); min-height: 100%; }
-    .heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
-    h2 { font-size: var(--dees-font-title1-size); font-weight: 650; letter-spacing: -.02em; }
-    .filters { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
-    .filters dees-input-text { flex: 1; min-width: 200px; max-width: 360px; }
-    .filters dees-input-dropdown { min-width: 200px; max-width: 320px; flex: 1; }
-    .columns { display: flex; gap: 16px; overflow-x: auto; padding: 3px 3px 16px; align-items: stretch; }
-    @media (max-width: 600px) { :host { padding: 16px; } .filters { gap: 10px; } .columns { scroll-snap-type: x proximity; } dees-kanban-column { scroll-snap-align: start; flex-basis: 85vw; } }
+    :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; }
+    }
   `];
 
   public async connectedCallback(): Promise<void> {
     const connection = super.connectedCallback();
     for (const name of interactionEvents) this.addEventListener(name, this.handleInteraction);
+    this.dragController.connect();
     await connection;
   }
-  public updated(): void { this.syncDetail(); }
+  public updated(): void { this.syncDetail(); this.dragController.sync(); }
   public render() {
     const epics = sortKanbanTickets(this.tickets.filter(ticket => ticket.kind === 'epic'));
     const query = this.query.trim().toLocaleLowerCase();
@@ -86,25 +100,27 @@ export class DeesKanban extends DeesElement {
       (!query || [ticket.key, ticket.title, ticket.assignee?.name, ...ticket.labels ?? [],
         ...this.tickets.filter(child => child.parentId === ticket.id).map(child => `${child.key} ${child.title}`)].join(' ').toLocaleLowerCase().includes(query)));
     const epic = epics.find(ticket => ticket.id === this.epicId);
-    return html`<header class="heading"><h2>${this.heading}</h2><span class="caption">${tasks.length} tasks · ${epics.length} epics</span><span class="spacer"></span>
-      ${this.provider.createTicket ? html`<dees-button type="ghost" size="sm" text="New epic" .disabled=${!this.columns.length}
-        @clicked=${() => { void this.createTicket({ kind: 'epic', columnId: this.columns[0].id }); }}></dees-button>
-        <dees-button type="accent" size="sm" icon="lucide:Plus" text="New task" .disabled=${!this.columns.length}
-          @clicked=${() => { void this.createTicket({ kind: 'task', columnId: this.columns[0].id, parentId: this.epicId || undefined }); }}></dees-button>` : ''}</header>
-      <div class="filters"><dees-input-text label="Search tickets" placeholder="Title, ticket number, assignee…" .value=${this.query}
+    return html`<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: Event) => { this.query = String((event.currentTarget as DeesInputText).value ?? ''); }}></dees-input-text>
-        <dees-input-dropdown label="Epic" .value=${{ key: this.epicId, option: epic?.title ?? 'All epics' }}
+        <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: CustomEvent<{ key: string }>) => { this.epicId = event.detail.key; }}></dees-input-dropdown>
-        ${epic ? html`<dees-button type="ghost" size="sm" text="Open epic" @clicked=${() => { void this.openTicket(epic.id); }}></dees-button>` : ''}
+        ${epic ? html`<dees-button type="ghost" text="Open epic" @clicked=${() => { void this.openTicket(epic.id); }}></dees-button>` : ''}
       </div>
+      ${this.provider.createTicket ? html`<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 || undefined }); }}></dees-button></div>` : ''}</header>
       ${this.loading || this.openingTicket ? html`<p class="caption" role="status">${this.loading ? 'Loading board…' : 'Opening ticket…'}</p>` : ''}
       ${this.error || this.operationError ? html`<p class="error" role="alert">${this.error || this.operationError}</p>` : ''}
       ${!this.columns.length ? html`<p class="empty">No columns configured.</p>` : html`<div class="columns" aria-label=${this.heading}>
-        ${this.columns.map(column => html`<dees-kanban-column .column=${column} .columns=${this.columns}
+        ${directives.repeat(this.columns, column => column.id, column => html`<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>`}`;
   }
 
   private findTicket(id: string): IKanbanTicket | undefined { return this.tickets.find(ticket => ticket.id === id) ?? this.resolvedTickets.get(id); }
@@ -131,6 +147,7 @@ export class DeesKanban extends DeesElement {
       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;
@@ -138,7 +155,7 @@ export class DeesKanban extends DeesElement {
       this.syncDetail();
       if (!this.modal && !this.modalOpening) {
         this.modalOpening = DeesModal.createAndShow({ heading: ticket.key, width: 1000, maxWidth: 1040,
-          mobileFullscreen: true, content: html`${this.detail}`, menuOptions: [] });
+          mobileFullscreen: true, contentPadding: 0, content: html`${this.detail}`, menuOptions: [] });
         const modal = await this.modalOpening;
         this.modalOpening = undefined;
         if (!this.isConnected) { await modal.destroy(); return; }
@@ -213,18 +230,28 @@ export class DeesKanban extends DeesElement {
 
   /** Provider commits the move and supplies the new ordering. Hierarchy is never part of a move request. */
   public async moveTicket(input: IKanbanMove): Promise<void> {
+    if (this.dragController.busy) return;
+    await this.persistMove(input, true);
+  }
+
+  private async persistMove(input: IKanbanMove, animate = false): Promise<boolean> {
     const ticket = this.findTicket(input.ticketId);
-    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId || input.beforeTicketId === ticket.id) return;
-    if (!this.columns.some(column => column.id === input.columnId)) { this.reportError(new Error('Unknown destination column.')); return; }
+    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 false; }
     const before = input.beforeTicketId ? this.findTicket(input.beforeTicketId) : undefined;
-    if (input.beforeTicketId && (!before || before.columnId !== input.columnId || before.kind !== ticket.kind)) { this.reportError(new Error('Invalid insertion target.')); return; }
-    this.pendingTicketId = ticket.id; this.operationError = ''; this.draggingTicketId = '';
+    if (input.beforeTicketId && (!before || before.columnId !== input.columnId || before.kind !== ticket.kind)) { this.reportError(new Error('Invalid insertion target.')); return false; }
+    const operation = this.activeMove = Symbol();
+    this.pendingTicketId = ticket.id; this.operationError = '';
     try {
       const changed = await this.provider.moveTicket(input);
+      if (this.activeMove !== operation) return false;
       if (!changed.some(item => item.id === ticket.id)) throw new Error('The move provider did not return the moved ticket.');
+      const positions = animate ? this.dragController.capture() : undefined;
       this.mergeTickets(changed);
-    } catch (error) { this.reportError(error); }
-    finally { this.pendingTicketId = ''; this.syncDetail(); }
+      if (positions) { await this.updateComplete; await this.dragController.animateFrom(positions); }
+      return true;
+    } catch (error) { if (this.activeMove === operation) this.reportError(error); return false; }
+    finally { if (this.activeMove === operation) { this.activeMove = undefined; this.pendingTicketId = ''; this.syncDetail(); } }
   }
 
   private async saveTicket(ticketId: string, draft: IKanbanTicketDraft): Promise<void> {
@@ -301,13 +328,13 @@ export class DeesKanban extends DeesElement {
       }
       case 'kanban-comments-refresh': void this.refreshComments(detail.ticketId); break;
       case 'kanban-detail-back': { const previous = this.history.pop(); if (previous) void this.openTicket(previous, false); break; }
-      case 'kanban-drag-start': this.draggingTicketId = detail.ticketId; break;
-      case 'kanban-drag-end': this.draggingTicketId = ''; break;
     }
   };
 
   public async disconnectedCallback(): Promise<void> {
     for (const name of interactionEvents) this.removeEventListener(name, this.handleInteraction);
+    this.dragController.disconnect();
+    if (this.activeMove) { this.activeMove = undefined; this.pendingTicketId = ''; }
     this.openAbort?.abort(); this.commentsAbort?.abort();
     void this.modal?.destroy();
     await super.disconnectedCallback();

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

@@ -1,7 +1,7 @@
 import { DeesElement, customElement, property, html, css } from '@design.estate/dees-element';
 import type { IKanbanTicket, IKanbanColumn } from '../interfaces.js';
 import { kanbanStyles } from '../kanban.styles.js';
-import { kanbanEvent } from '../kanban.helpers.js';
+import { kanbanEvent, kanbanInitials, kanbanPriorityIcon } from '../kanban.helpers.js';
 import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
@@ -14,44 +14,67 @@ export class DeesKanbanCard extends DeesElement {
   @property({ attribute: false }) accessor subtasks: IKanbanTicket[] = [];
   @property({ attribute: false }) accessor columns: IKanbanColumn[] = [];
   @property({ type: Boolean }) accessor movable = false;
+  @property({ type: Boolean }) accessor moveDisabled = false;
   @property({ type: Boolean }) accessor pending = false;
+  @property({ type: Boolean }) accessor saving = false;
+  /** The assembled board owns pointer previews; standalone cards retain native drag events. */
+  @property({ attribute: false }) accessor pointerManaged = false;
   public static styles = [...kanbanStyles, css`
-    article { padding: 14px; border: 1px solid var(--dees-color-border-default); border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-primary); box-shadow: var(--dees-shadow-xs); }
+    article { 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; } }
   `];
   private open(ticketId: string): void { kanbanEvent(this, 'kanban-ticket-open', { ticketId }); }
   public render() {
     const ticket = this.ticket;
     if (!ticket) return html``;
     const completed = this.subtasks.filter(task => this.columns.some(column => column.id === task.columnId && column.done)).length;
-    return html`<article aria-busy=${String(this.pending)} draggable=${this.movable && !this.pending ? 'true' : 'false'}
+    return html`<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: DragEvent) => {
-        if (!this.movable || this.pending || !event.dataTransfer) { event.preventDefault(); return; }
+        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 ? html`<button class="link epic" @click=${() => this.open(this.epic!.id)}>${this.epic.title}</button>` : ''}
-      <div class="row caption"><span class="key">${ticket.key}</span><span class="spacer"></span>
-        ${ticket.priority && ticket.priority !== 'none' ? html`<span class="priority" data-priority=${ticket.priority}>${ticket.priority}</span>` : ''}</div>
-      <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>
-      ${ticket.labels?.length ? html`<div class="row labels">${ticket.labels.map(label => html`<span class="badge">${label}</span>`)}</div>` : ''}
-      <div class="row caption"><span class="avatar" title=${ticket.assignee?.name ?? 'Unassigned'}>${ticket.assignee?.name.split(/\s+/).map(part => part[0]).join('').slice(0, 2) ?? '–'}</span>
-        <span>${ticket.assignee?.name ?? 'Unassigned'}</span><span class="spacer"></span>
-        ${this.movable ? html`<dees-button size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending}
+      }} @dragend=${() => { if (!this.pointerManaged) kanbanEvent(this, 'kanban-drag-end', {}); }}>
+      <div class="meta"><span class="key">${ticket.key}</span>
+        ${this.epic ? html`<button class="link epic" title=${this.epic.title} @click=${() => this.open(this.epic!.id)}>${this.epic.title}</button>` : ''}
+        ${this.saving ? html`<span class="saving" role="status">Saving…</span>` : this.movable ? html`<dees-button class="move" size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending || this.moveDisabled}
           @clicked=${(event: Event) => kanbanEvent(this, 'kanban-move-menu', { ticketId: ticket.id, anchor: event.currentTarget as HTMLElement })}></dees-button>` : ''}
       </div>
-      ${this.subtasks.length ? html`<details><summary>${completed}/${this.subtasks.length} subtasks complete</summary>
-        ${this.subtasks.map(task => html`<div class="subtask"><span>${this.columns.some(column => column.id === task.columnId && column.done) ? '✓' : '○'}</span>
+      <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>
+      <div class="row footer">
+        ${ticket.priority && ticket.priority !== 'none' ? html`<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 => html`<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) : '–'}</span><span class="assignee-name">${ticket.assignee?.name ?? 'Unassigned'}</span></span>
+      </div>
+      ${this.subtasks.length ? html`<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 => html`<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>`;
   }

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

@@ -1,5 +1,6 @@
-import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import { DeesElement, customElement, property, state, html, css, directives } from '@design.estate/dees-element';
 import type { IKanbanColumn, IKanbanTicket } from '../interfaces.js';
+import type { IKanbanMotion } from '../kanban.dragcontroller.js';
 import { kanbanStyles } from '../kanban.styles.js';
 import { kanbanEvent, sortKanbanTickets } from '../kanban.helpers.js';
 import '../dees-kanban-card/dees-kanban-card.js';
@@ -13,48 +14,67 @@ export class DeesKanbanColumn extends DeesElement {
   @property({ attribute: false }) accessor allTickets: IKanbanTicket[] = [];
   @property({ attribute: false }) accessor columns: IKanbanColumn[] = [];
   @property({ type: Boolean }) accessor movable = false;
+  @property({ type: Boolean }) accessor movesDisabled = false;
   @property({ type: Boolean }) accessor canCreate = false;
   @property({ type: String }) accessor pendingTicketId = '';
   @property({ type: String }) accessor draggingTicketId = '';
-  @state() private accessor dropBefore: string | undefined;
-  @state() private accessor draggingOver = false;
+  @property({ attribute: false }) accessor pointerManaged = false;
+  @state() private accessor nativeDropBefore: string | undefined;
+  @state() private accessor nativeOver = false;
+  /** Internal render projection; provider-owned ticket data remains unchanged until saved. */
+  @property({ attribute: false }) accessor motion: IKanbanMotion | undefined;
   public static styles = [...kanbanStyles, css`
-    :host { display: flex; flex-direction: column; width: 300px; min-width: 270px; flex: 1 0 270px; }
-    section { min-height: 220px; height: 100%; border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-secondary); padding: 10px; }
-    header { display: flex; align-items: center; gap: 8px; padding: 3px 3px 12px; }
-    h3 { font-size: var(--dees-font-body-size); font-weight: 600; }
-    .count { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
-    .stack { display: grid; gap: 10px; min-height: 80px; align-content: start; }
+    :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; } }
   `];
-  public updated(): void { if (!this.draggingTicketId) this.draggingOver = false; }
+  public updated(): void { if (!this.draggingTicketId) this.nativeOver = false; }
   public render() {
     if (!this.column) return html``;
-    return html`<section class=${this.draggingOver ? 'over' : ''} aria-label=${this.column.title}
-      @dragover=${(event: DragEvent) => { if (this.draggingTicketId && this.movable) { event.preventDefault(); this.draggingOver = true; if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'; } }}
-      @dragleave=${(event: DragEvent) => { if (!(event.relatedTarget instanceof Node) || !(event.currentTarget as Node).contains(event.relatedTarget)) this.draggingOver = false; }}
+    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 index = tickets.findIndex(ticket => ticket.id === motion.move.beforeTicketId);
+      tickets.splice(index < 0 ? tickets.length : index, 0, motion.ticket);
+    }
+    return html`<section class=${active && motion?.placeholder || this.nativeOver ? 'over' : ''} aria-label=${this.column.title}
+      @dragover=${(event: DragEvent) => { if (!this.pointerManaged && this.draggingTicketId && this.movable && !this.movesDisabled) { event.preventDefault(); this.nativeOver = true; if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'; } }}
+      @dragleave=${(event: DragEvent) => { if (!(event.relatedTarget instanceof Node) || !(event.currentTarget as Node).contains(event.relatedTarget)) this.nativeOver = false; }}
       @drop=${(event: DragEvent) => {
-        event.preventDefault(); this.draggingOver = false;
-        if (this.movable && this.draggingTicketId && event.dataTransfer?.getData('application/x-dees-kanban-ticket') === this.draggingTicketId)
-          kanbanEvent(this, 'kanban-ticket-move', { ticketId: this.draggingTicketId, columnId: this.column!.id, beforeTicketId: this.dropBefore });
+        if (this.pointerManaged) return;
+        event.preventDefault(); 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 ? html`<dees-button type="ghost" size="icon" icon="lucide:Plus" text=${`Add task to ${this.column.title}`}
           @clicked=${() => kanbanEvent(this, 'kanban-ticket-create', { kind: 'task', columnId: this.column!.id })}></dees-button>` : ''}</header>
-      <div class="stack">${sortKanbanTickets(this.tickets).map(ticket => html`
-        <div class="target ${this.draggingOver && this.dropBefore === ticket.id ? 'before' : ''}"
-          @dragover=${() => { this.dropBefore = ticket.id; }}>
-          <dees-kanban-card .ticket=${ticket} .columns=${this.columns}
+      <div class="stack">${directives.repeat(tickets, ticket => ticket.id, ticket => html`
+        <div class="target ${this.nativeOver && this.nativeDropBefore === ticket.id ? 'native-before' : ''}" data-ticket-id=${ticket.id}
+          @dragover=${() => { if (!this.pointerManaged) this.nativeDropBefore = ticket.id; }}>
+          ${motion?.move.ticketId === ticket.id && motion.placeholder ? html`<div class="placeholder" style=${`height: ${motion.height}px`} aria-label="Drop ticket here"></div>` : html`<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 ? html`<div class="empty" @dragover=${() => { this.dropBefore = undefined; }}>No tasks</div>` : ''}
+        ${!tickets.length ? html`<div class="empty" @dragover=${() => { this.nativeDropBefore = undefined; }}>No tasks</div>` : ''}
       </div>
-      <div class="end-target ${this.draggingOver && !this.dropBefore ? 'before' : ''}" @dragover=${() => { this.dropBefore = undefined; }}></div>
+      <div class="end-target ${this.nativeOver && !this.nativeDropBefore ? 'native-before' : ''}" @dragover=${() => { this.nativeDropBefore = undefined; }}></div>
     </section>`;
   }
 }