tembro 3.1.13 → 3.1.14

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## 3.1.14 - 2026-07-16
+
+- Fixed Kanban drag-and-drop by adding a native drag/drop fallback while preserving the existing `@dnd-kit` integration.
+- Kept Kanban controlled and uncontrolled column updates in sync for drag, drop, and card move callbacks.
+- Refreshed registry/showcase package metadata for the 3.1.14 release.
+
 ## 3.1.13 - 2026-07-16
 
 - Fixed `LineChart` responsive SVG height so wide dashboard cards no longer stretch line charts into oversized panels.

package/dist/showcase/package-meta.d.ts

@@ -1,3 +1,3 @@
-export declare const PACKAGE_LATEST_VERSION = "3.1.13";
+export declare const PACKAGE_LATEST_VERSION = "3.1.14";
 export declare const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026";
-export declare const PACKAGE_DEPENDENCY_RANGE = "3.1.13";
+export declare const PACKAGE_DEPENDENCY_RANGE = "3.1.14";

package/dist/src/components/display/kanban.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../../../node_modules/@dnd-kit/helpers/dist/index.cjs"),i=require("../../../node_modules/@dnd-kit/react/index.cjs"),a=require("../../../node_modules/@dnd-kit/dom/sortable.cjs"),o=require("../../../node_modules/@dnd-kit/react/sortable.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("lucide-react"),l=require("react/jsx-runtime");var u=`tembro-kanban-card:`,d=`tembro-kanban-column:`;function f(e){return`${u}${e}`}function p(e){return`${d}${e}`}function m(e){return e.startsWith(u)?e.slice(19):e}function h(e){let t=e===void 0?``:String(e);return t.startsWith(d)?t.slice(21):t}function g(e){return new Map(e.flatMap(e=>e.cards.map(e=>[f(e.key),e])))}function _(e,t){let n=g(e),i=r.move(Object.fromEntries(e.map(e=>[p(e.key),e.cards.map(e=>f(e.key))])),t);return e.map(e=>({...e,cards:(i[p(e.key)]??[]).map(e=>n.get(String(e))).filter(e=>!!e)}))}var v=s.forwardRef(function({label:e,disabled:t},n){return(0,l.jsx)(`button`,{ref:n,type:`button`,className:`inline-flex size-8 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45`,"aria-label":e,disabled:t,onClick:e=>e.stopPropagation(),children:(0,l.jsx)(c.GripVerticalIcon,{className:`size-4`,"aria-hidden":`true`})})});function y({card:e,handle:t}){return(0,l.jsxs)(n.Card,{className:`transition-colors hover:bg-muted/40`,children:[(0,l.jsx)(n.CardHeader,{className:`p-3 pb-1`,children:(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-2`,children:[(0,l.jsx)(n.CardTitle,{className:`text-sm`,children:e.title}),(0,l.jsxs)(`div`,{className:`flex items-center gap-1`,children:[e.extra,t]})]})}),e.description||e.meta?(0,l.jsxs)(n.CardContent,{className:`grid gap-2 p-3 pt-0 text-xs text-muted-foreground`,children:[e.description,e.meta?(0,l.jsx)(`div`,{children:e.meta}):null]}):null]})}function b({card:e,column:n,index:r,boardDisabled:i,renderCard:a,onCardClick:s,dragHandleLabel:c,cardClassName:u}){let d=i||n.disabled===!0||e.disabled===!0,{ref:m,handleRef:h,isDragging:g,isDropTarget:_}=o.useSortable({id:f(e.key),index:r,group:p(n.key),type:`tembro-kanban-card`,accept:`tembro-kanban-card`,disabled:d,data:{cardKey:e.key,columnKey:n.key},transition:{duration:180,easing:`cubic-bezier(0.2, 0, 0, 1)`,idle:!0}}),b=(0,l.jsx)(v,{ref:h,label:c?.(e,n)??`Move ${String(e.title)}`,disabled:d}),x={index:r,isDragging:g,isDropTarget:_,handle:b};return(0,l.jsx)(`article`,{ref:m,"data-slot":`kanban-card`,"data-dragging":g||void 0,"data-drop-target":_||void 0,"data-disabled":d||void 0,role:s&&!d?`button`:void 0,tabIndex:s&&!d?0:void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`rounded-lg outline-none transition-[opacity,box-shadow]`,s&&!d&&`cursor-pointer focus-visible:ring-2 focus-visible:ring-ring`,_&&`ring-2 ring-primary/30`,g&&`opacity-30`,d&&`opacity-55`,u),onClick:()=>{d||s?.(e,n)},onKeyDown:t=>{t.target!==t.currentTarget||d||!s||(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),s(e,n))},children:a?.(e,n,x)??(0,l.jsx)(y,{card:e,handle:b})})}function x({column:e,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,emptyColumn:s,columnClassName:c,cardClassName:u}){let{ref:d,isDropTarget:f}=i.useDroppable({id:p(e.key),type:`tembro-kanban-column`,accept:`tembro-kanban-card`,disabled:n||e.disabled===!0,collisionPriority:1,data:{columnKey:e.key}});return(0,l.jsxs)(`section`,{ref:d,"data-slot":`kanban-column`,"data-drop-target":f||void 0,"data-disabled":e.disabled||void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]`,f&&`border-primary/60 bg-primary/5 ring-2 ring-primary/15`,e.disabled&&`opacity-60`,c),children:[(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,l.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,l.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:e.title}),e.description?(0,l.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:e.description}):null]}),(0,l.jsx)(`div`,{className:`rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground`,children:e.count??e.cards.length})]}),(0,l.jsx)(`div`,{className:`grid min-h-16 content-start gap-2`,children:e.cards.length===0?(0,l.jsxs)(`div`,{className:`grid min-h-20 place-items-center rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground`,children:[(0,l.jsx)(`span`,{children:s}),(0,l.jsx)(`span`,{className:`sr-only`,children:`No cards yet.`})]}):e.cards.map((t,i)=>(0,l.jsx)(b,{card:t,column:e,index:i,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,cardClassName:u},t.key))})]})}function S({columns:e,defaultColumns:n=[],onColumnsChange:r,onCardMove:o,renderCard:c,onCardClick:u,disabled:d=!1,emptyColumn:p=`Drop cards here.`,dragHandleLabel:g,columnClassName:v,cardClassName:b,overlayClassName:S,className:C,"aria-label":w=`Kanban board`,...T}){let[E,D]=s.useState(()=>n),[O,k]=s.useState(null),[A,j]=s.useState(null),M=s.useRef(null),N=e??E,P=O??N,F=e!==void 0;function I(e){let t=e.operation.source;if(!t)return;let n=String(t.id);M.current=N,k(N),j(n)}function L(e){let t=e.operation.source;if(!t||!a.isSortable(t))return;let n=_(M.current??N,e);M.current=n,k(n)}function R(e){let t=e.operation.source;if(j(null),e.canceled||!t||!a.isSortable(t)){M.current=null,k(null);return}let n=M.current??_(N,e),i=m(String(t.id)),s=h(t.initialGroup),c=h(t.group),l=N.find(e=>e.key===s),u=n.find(e=>e.key===c),d=l?.cards.find(e=>e.key===i);if(M.current=null,k(null),!d||!l||!u)return;let f={card:d,fromColumn:l,toColumn:u,fromIndex:t.initialIndex,toIndex:t.index};F||D(n),r?.(n,f),o?.(f)}let z=A?P.flatMap(e=>e.cards.map(t=>({card:t,column:e}))).find(({card:e})=>f(e.key)===A):void 0;return(0,l.jsxs)(i.DragDropProvider,{onDragStart:I,onDragOver:L,onDragEnd:R,children:[(0,l.jsx)(`div`,{...T,role:`group`,"aria-label":w,"data-slot":`kanban-board`,className:t.cn(`grid gap-4 sm:auto-cols-[minmax(280px,1fr)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2`,C),children:P.map(e=>(0,l.jsx)(x,{column:e,boardDisabled:d,renderCard:c,onCardClick:u,dragHandleLabel:g,emptyColumn:p,columnClassName:v,cardClassName:b},e.key))}),(0,l.jsx)(i.DragOverlay,{children:z?(0,l.jsx)(`div`,{className:t.cn(`min-w-64 rotate-1 opacity-95 shadow-2xl`,S),children:c?.(z.card,z.column,{index:z.column.cards.findIndex(e=>e.key===z.card.key),isDragging:!0,isDropTarget:!1,handle:null})??(0,l.jsx)(y,{card:z.card,handle:null})}):null})]})}exports.KanbanBoard=S;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../../../node_modules/@dnd-kit/helpers/dist/index.cjs"),i=require("../../../node_modules/@dnd-kit/react/index.cjs"),a=require("../../../node_modules/@dnd-kit/dom/sortable.cjs"),o=require("../../../node_modules/@dnd-kit/react/sortable.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("lucide-react"),l=require("react/jsx-runtime");var u=`tembro-kanban-card:`,d=`tembro-kanban-column:`;function f(e){return`${u}${e}`}function p(e){return`${d}${e}`}function m(e){return e.startsWith(u)?e.slice(19):e}function h(e){let t=e===void 0?``:String(e);return t.startsWith(d)?t.slice(21):t}function g(e){return new Map(e.flatMap(e=>e.cards.map(e=>[f(e.key),e])))}function _(e,t){let n=g(e),i=r.move(Object.fromEntries(e.map(e=>[p(e.key),e.cards.map(e=>f(e.key))])),t);return e.map(e=>({...e,cards:(i[p(e.key)]??[]).map(e=>n.get(String(e))).filter(e=>!!e)}))}function v(e,t,n){let r=e.find(e=>e.key===t.columnKey),i=e.find(e=>e.key===n.columnKey);if(!r||!i)return null;let a=r.cards.find(e=>e.key===t.cardKey);if(!a)return null;let o=r.cards.findIndex(e=>e.key===t.cardKey);if(o<0)return null;let s=i.cards,c=n.index??s.length;if(r.key===i.key&&c>o&&--c,c=Math.max(0,Math.min(c,s.length)),r.key===i.key&&o===c)return null;let l=e.map(e=>e.key===r.key?{...e,cards:e.cards.filter(e=>e.key!==t.cardKey)}:e).map(e=>{if(e.key!==i.key)return e;let t=[...e.cards];return t.splice(c,0,a),{...e,cards:t}});return{columns:l,change:{card:a,fromColumn:r,toColumn:l.find(e=>e.key===i.key)??i,fromIndex:o,toIndex:c}}}var y=s.forwardRef(function({label:e,disabled:t},n){return(0,l.jsx)(`button`,{ref:n,type:`button`,className:`inline-flex size-8 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45`,"aria-label":e,disabled:t,onClick:e=>e.stopPropagation(),children:(0,l.jsx)(c.GripVerticalIcon,{className:`size-4`,"aria-hidden":`true`})})});function b({card:e,handle:t}){return(0,l.jsxs)(n.Card,{className:`transition-colors hover:bg-muted/40`,children:[(0,l.jsx)(n.CardHeader,{className:`p-3 pb-1`,children:(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-2`,children:[(0,l.jsx)(n.CardTitle,{className:`text-sm`,children:e.title}),(0,l.jsxs)(`div`,{className:`flex items-center gap-1`,children:[e.extra,t]})]})}),e.description||e.meta?(0,l.jsxs)(n.CardContent,{className:`grid gap-2 p-3 pt-0 text-xs text-muted-foreground`,children:[e.description,e.meta?(0,l.jsx)(`div`,{children:e.meta}):null]}):null]})}function x({card:e,column:n,index:r,boardDisabled:i,renderCard:a,onCardClick:s,dragHandleLabel:c,cardClassName:u,onNativeDragStart:d,onNativeDragEnd:m,onNativeDrop:h}){let g=i||n.disabled===!0||e.disabled===!0,{ref:_,handleRef:v,isDragging:x,isDropTarget:S}=o.useSortable({id:f(e.key),index:r,group:p(n.key),type:`tembro-kanban-card`,accept:`tembro-kanban-card`,disabled:g,data:{cardKey:e.key,columnKey:n.key},transition:{duration:180,easing:`cubic-bezier(0.2, 0, 0, 1)`,idle:!0}}),C=(0,l.jsx)(y,{ref:v,label:c?.(e,n)??`Move ${String(e.title)}`,disabled:g}),w={index:r,isDragging:x,isDropTarget:S,handle:C};return(0,l.jsx)(`article`,{ref:_,"data-slot":`kanban-card`,"data-dragging":x||void 0,"data-drop-target":S||void 0,"data-disabled":g||void 0,role:s&&!g?`button`:void 0,tabIndex:s&&!g?0:void 0,"aria-label":typeof e.title==`string`?e.title:void 0,draggable:!g,className:t.cn(`rounded-lg outline-none transition-[opacity,box-shadow]`,s&&!g&&`cursor-pointer focus-visible:ring-2 focus-visible:ring-ring`,S&&`ring-2 ring-primary/30`,x&&`opacity-30`,g&&`opacity-55`,u),onClick:()=>{g||s?.(e,n)},onDragStart:t=>{if(g)return;let i={cardKey:e.key,columnKey:n.key,index:r};t.dataTransfer.effectAllowed=`move`,t.dataTransfer.setData(`text/plain`,JSON.stringify(i)),d?.(i)},onDragEnd:m,onDragOver:e=>{g||e.preventDefault()},onDrop:e=>{g||(e.preventDefault(),e.stopPropagation(),h?.({columnKey:n.key,index:r}))},onKeyDown:t=>{t.target!==t.currentTarget||g||!s||(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),s(e,n))},children:a?.(e,n,w)??(0,l.jsx)(b,{card:e,handle:C})})}function S({column:e,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,emptyColumn:s,columnClassName:c,cardClassName:u,onNativeDragStart:d,onNativeDragEnd:f,onNativeDrop:m}){let{ref:h,isDropTarget:g}=i.useDroppable({id:p(e.key),type:`tembro-kanban-column`,accept:`tembro-kanban-card`,disabled:n||e.disabled===!0,collisionPriority:1,data:{columnKey:e.key}});return(0,l.jsxs)(`section`,{ref:h,"data-slot":`kanban-column`,"data-drop-target":g||void 0,"data-disabled":e.disabled||void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]`,g&&`border-primary/60 bg-primary/5 ring-2 ring-primary/15`,e.disabled&&`opacity-60`,c),onDragOver:t=>{n||e.disabled===!0||t.preventDefault()},onDrop:t=>{n||e.disabled===!0||(t.preventDefault(),m?.({columnKey:e.key,index:e.cards.length}))},children:[(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,l.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,l.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:e.title}),e.description?(0,l.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:e.description}):null]}),(0,l.jsx)(`div`,{className:`rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground`,children:e.count??e.cards.length})]}),(0,l.jsx)(`div`,{className:`grid min-h-16 content-start gap-2`,children:e.cards.length===0?(0,l.jsxs)(`div`,{className:`grid min-h-20 place-items-center rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground`,children:[(0,l.jsx)(`span`,{children:s}),(0,l.jsx)(`span`,{className:`sr-only`,children:`No cards yet.`})]}):e.cards.map((t,i)=>(0,l.jsx)(x,{card:t,column:e,index:i,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,cardClassName:u,onNativeDragStart:d,onNativeDragEnd:f,onNativeDrop:m},t.key))})]})}function C({columns:e,defaultColumns:n=[],onColumnsChange:r,onCardMove:o,renderCard:c,onCardClick:u,disabled:d=!1,emptyColumn:p=`Drop cards here.`,dragHandleLabel:g,columnClassName:y,cardClassName:x,overlayClassName:C,className:w,"aria-label":T=`Kanban board`,...E}){let[D,O]=s.useState(()=>n),[k,A]=s.useState(null),[j,M]=s.useState(null),N=s.useRef(null),P=s.useRef(null),F=e??D,I=k??F,L=e!==void 0;function R(e){let t=e.operation.source;if(!t)return;let n=String(t.id);N.current=F,A(F),M(n)}function z(e){let t=e.operation.source;if(!t||!a.isSortable(t))return;let n=_(N.current??F,e);N.current=n,A(n)}function B(e){let t=e.operation.source;if(M(null),e.canceled||!t||!a.isSortable(t)){N.current=null,A(null);return}let n=N.current??_(F,e),i=m(String(t.id)),s=h(t.initialGroup),c=h(t.group),l=F.find(e=>e.key===s),u=n.find(e=>e.key===c),d=l?.cards.find(e=>e.key===i);if(N.current=null,A(null),!d||!l||!u)return;let f={card:d,fromColumn:l,toColumn:u,fromIndex:t.initialIndex,toIndex:t.index};L||O(n),r?.(n,f),o?.(f)}function V(e){let t=P.current;if(P.current=null,!t)return;let n=v(F,t,e);n&&(L||O(n.columns),r?.(n.columns,n.change),o?.(n.change))}let H=j?I.flatMap(e=>e.cards.map(t=>({card:t,column:e}))).find(({card:e})=>f(e.key)===j):void 0;return(0,l.jsxs)(i.DragDropProvider,{onDragStart:R,onDragOver:z,onDragEnd:B,children:[(0,l.jsx)(`div`,{...E,role:`group`,"aria-label":T,"data-slot":`kanban-board`,className:t.cn(`grid gap-4 sm:auto-cols-[minmax(280px,1fr)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2`,w),children:I.map(e=>(0,l.jsx)(S,{column:e,boardDisabled:d,renderCard:c,onCardClick:u,dragHandleLabel:g,emptyColumn:p,columnClassName:y,cardClassName:x,onNativeDragStart:e=>{P.current=e},onNativeDragEnd:()=>{P.current=null},onNativeDrop:V},e.key))}),(0,l.jsx)(i.DragOverlay,{children:H?(0,l.jsx)(`div`,{className:t.cn(`min-w-64 rotate-1 opacity-95 shadow-2xl`,C),children:c?.(H.card,H.column,{index:H.column.cards.findIndex(e=>e.key===H.card.key),isDragging:!0,isDropTarget:!1,handle:null})??(0,l.jsx)(b,{card:H.card,handle:null})}):null})]})}exports.KanbanBoard=C;

package/dist/src/components/display/kanban.js

@@ -33,7 +33,38 @@ function S(e, t) {
 		cards: (r[v(e.key)] ?? []).map((e) => n.get(String(e))).filter((e) => !!e)
 	}));
 }
-var C = d.forwardRef(function({ label: e, disabled: t }, n) {
+function C(e, t, n) {
+	let r = e.find((e) => e.key === t.columnKey), i = e.find((e) => e.key === n.columnKey);
+	if (!r || !i) return null;
+	let a = r.cards.find((e) => e.key === t.cardKey);
+	if (!a) return null;
+	let o = r.cards.findIndex((e) => e.key === t.cardKey);
+	if (o < 0) return null;
+	let s = i.cards, c = n.index ?? s.length;
+	if (r.key === i.key && c > o && --c, c = Math.max(0, Math.min(c, s.length)), r.key === i.key && o === c) return null;
+	let l = e.map((e) => e.key === r.key ? {
+		...e,
+		cards: e.cards.filter((e) => e.key !== t.cardKey)
+	} : e).map((e) => {
+		if (e.key !== i.key) return e;
+		let t = [...e.cards];
+		return t.splice(c, 0, a), {
+			...e,
+			cards: t
+		};
+	});
+	return {
+		columns: l,
+		change: {
+			card: a,
+			fromColumn: r,
+			toColumn: l.find((e) => e.key === i.key) ?? i,
+			fromIndex: o,
+			toIndex: c
+		}
+	};
+}
+var w = d.forwardRef(function({ label: e, disabled: t }, n) {
 	return /* @__PURE__ */ p("button", {
 		ref: n,
 		type: "button",
@@ -47,7 +78,7 @@ var C = d.forwardRef(function({ label: e, disabled: t }, n) {
 		})
 	});
 });
-function w({ card: e, handle: a }) {
+function T({ card: e, handle: a }) {
 	return /* @__PURE__ */ m(t, {
 		className: "transition-colors hover:bg-muted/40",
 		children: [/* @__PURE__ */ p(r, {
@@ -68,14 +99,14 @@ function w({ card: e, handle: a }) {
 		}) : null]
 	});
 }
-function T({ card: t, column: n, index: r, boardDisabled: i, renderCard: a, onCardClick: o, dragHandleLabel: s, cardClassName: c }) {
-	let l = i || n.disabled === !0 || t.disabled === !0, { ref: d, handleRef: f, isDragging: m, isDropTarget: h } = u({
+function E({ card: t, column: n, index: r, boardDisabled: i, renderCard: a, onCardClick: o, dragHandleLabel: s, cardClassName: c, onNativeDragStart: l, onNativeDragEnd: d, onNativeDrop: f }) {
+	let m = i || n.disabled === !0 || t.disabled === !0, { ref: h, handleRef: g, isDragging: y, isDropTarget: b } = u({
 		id: _(t.key),
 		index: r,
 		group: v(n.key),
 		type: "tembro-kanban-card",
 		accept: "tembro-kanban-card",
-		disabled: l,
+		disabled: m,
 		data: {
 			cardKey: t.key,
 			columnKey: n.key
@@ -85,40 +116,60 @@ function T({ card: t, column: n, index: r, boardDisabled: i, renderCard: a, onCa
 			easing: "cubic-bezier(0.2, 0, 0, 1)",
 			idle: !0
 		}
-	}), g = /* @__PURE__ */ p(C, {
-		ref: f,
+	}), x = /* @__PURE__ */ p(w, {
+		ref: g,
 		label: s?.(t, n) ?? `Move ${String(t.title)}`,
-		disabled: l
-	}), y = {
+		disabled: m
+	}), S = {
 		index: r,
-		isDragging: m,
-		isDropTarget: h,
-		handle: g
+		isDragging: y,
+		isDropTarget: b,
+		handle: x
 	};
 	return /* @__PURE__ */ p("article", {
-		ref: d,
+		ref: h,
 		"data-slot": "kanban-card",
-		"data-dragging": m || void 0,
-		"data-drop-target": h || void 0,
-		"data-disabled": l || void 0,
-		role: o && !l ? "button" : void 0,
-		tabIndex: o && !l ? 0 : void 0,
+		"data-dragging": y || void 0,
+		"data-drop-target": b || void 0,
+		"data-disabled": m || void 0,
+		role: o && !m ? "button" : void 0,
+		tabIndex: o && !m ? 0 : void 0,
 		"aria-label": typeof t.title == "string" ? t.title : void 0,
-		className: e("rounded-lg outline-none transition-[opacity,box-shadow]", o && !l && "cursor-pointer focus-visible:ring-2 focus-visible:ring-ring", h && "ring-2 ring-primary/30", m && "opacity-30", l && "opacity-55", c),
+		draggable: !m,
+		className: e("rounded-lg outline-none transition-[opacity,box-shadow]", o && !m && "cursor-pointer focus-visible:ring-2 focus-visible:ring-ring", b && "ring-2 ring-primary/30", y && "opacity-30", m && "opacity-55", c),
 		onClick: () => {
-			l || o?.(t, n);
+			m || o?.(t, n);
+		},
+		onDragStart: (e) => {
+			if (m) return;
+			let i = {
+				cardKey: t.key,
+				columnKey: n.key,
+				index: r
+			};
+			e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", JSON.stringify(i)), l?.(i);
+		},
+		onDragEnd: d,
+		onDragOver: (e) => {
+			m || e.preventDefault();
+		},
+		onDrop: (e) => {
+			m || (e.preventDefault(), e.stopPropagation(), f?.({
+				columnKey: n.key,
+				index: r
+			}));
 		},
 		onKeyDown: (e) => {
-			e.target !== e.currentTarget || l || !o || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(t, n));
+			e.target !== e.currentTarget || m || !o || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(t, n));
 		},
-		children: a?.(t, n, y) ?? /* @__PURE__ */ p(w, {
+		children: a?.(t, n, S) ?? /* @__PURE__ */ p(T, {
 			card: t,
-			handle: g
+			handle: x
 		})
 	});
 }
-function E({ column: t, boardDisabled: n, renderCard: r, onCardClick: i, dragHandleLabel: a, emptyColumn: o, columnClassName: s, cardClassName: l }) {
-	let { ref: u, isDropTarget: d } = c({
+function D({ column: t, boardDisabled: n, renderCard: r, onCardClick: i, dragHandleLabel: a, emptyColumn: o, columnClassName: s, cardClassName: l, onNativeDragStart: u, onNativeDragEnd: d, onNativeDrop: f }) {
+	let { ref: h, isDropTarget: g } = c({
 		id: v(t.key),
 		type: "tembro-kanban-column",
 		accept: "tembro-kanban-card",
@@ -127,12 +178,21 @@ function E({ column: t, boardDisabled: n, renderCard: r, onCardClick: i, dragHan
 		data: { columnKey: t.key }
 	});
 	return /* @__PURE__ */ m("section", {
-		ref: u,
+		ref: h,
 		"data-slot": "kanban-column",
-		"data-drop-target": d || void 0,
+		"data-drop-target": g || void 0,
 		"data-disabled": t.disabled || void 0,
 		"aria-label": typeof t.title == "string" ? t.title : void 0,
-		className: e("grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]", d && "border-primary/60 bg-primary/5 ring-2 ring-primary/15", t.disabled && "opacity-60", s),
+		className: e("grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]", g && "border-primary/60 bg-primary/5 ring-2 ring-primary/15", t.disabled && "opacity-60", s),
+		onDragOver: (e) => {
+			n || t.disabled === !0 || e.preventDefault();
+		},
+		onDrop: (e) => {
+			n || t.disabled === !0 || (e.preventDefault(), f?.({
+				columnKey: t.key,
+				index: t.cards.length
+			}));
+		},
 		children: [/* @__PURE__ */ m("div", {
 			className: "flex items-start justify-between gap-3",
 			children: [/* @__PURE__ */ m("div", {
@@ -156,7 +216,7 @@ function E({ column: t, boardDisabled: n, renderCard: r, onCardClick: i, dragHan
 					className: "sr-only",
 					children: "No cards yet."
 				})]
-			}) : t.cards.map((e, o) => /* @__PURE__ */ p(T, {
+			}) : t.cards.map((e, o) => /* @__PURE__ */ p(E, {
 				card: e,
 				column: t,
 				index: o,
@@ -164,33 +224,36 @@ function E({ column: t, boardDisabled: n, renderCard: r, onCardClick: i, dragHan
 				renderCard: r,
 				onCardClick: i,
 				dragHandleLabel: a,
-				cardClassName: l
+				cardClassName: l,
+				onNativeDragStart: u,
+				onNativeDragEnd: d,
+				onNativeDrop: f
 			}, e.key))
 		})]
 	});
 }
-function D({ columns: t, defaultColumns: n = [], onColumnsChange: r, onCardMove: i, renderCard: a, onCardClick: c, disabled: u = !1, emptyColumn: f = "Drop cards here.", dragHandleLabel: h, columnClassName: g, cardClassName: v, overlayClassName: x, className: C, "aria-label": T = "Kanban board", ...D }) {
-	let [O, k] = d.useState(() => n), [A, j] = d.useState(null), [M, N] = d.useState(null), P = d.useRef(null), F = t ?? O, I = A ?? F, L = t !== void 0;
-	function R(e) {
+function O({ columns: t, defaultColumns: n = [], onColumnsChange: r, onCardMove: i, renderCard: a, onCardClick: c, disabled: u = !1, emptyColumn: f = "Drop cards here.", dragHandleLabel: h, columnClassName: g, cardClassName: v, overlayClassName: x, className: w, "aria-label": E = "Kanban board", ...O }) {
+	let [k, A] = d.useState(() => n), [j, M] = d.useState(null), [N, P] = d.useState(null), F = d.useRef(null), I = d.useRef(null), L = t ?? k, R = j ?? L, z = t !== void 0;
+	function B(e) {
 		let t = e.operation.source;
 		if (!t) return;
 		let n = String(t.id);
-		P.current = F, j(F), N(n);
+		F.current = L, M(L), P(n);
 	}
-	function z(e) {
+	function V(e) {
 		let t = e.operation.source;
 		if (!t || !l(t)) return;
-		let n = S(P.current ?? F, e);
-		P.current = n, j(n);
+		let n = S(F.current ?? L, e);
+		F.current = n, M(n);
 	}
-	function B(e) {
+	function H(e) {
 		let t = e.operation.source;
-		if (N(null), e.canceled || !t || !l(t)) {
-			P.current = null, j(null);
+		if (P(null), e.canceled || !t || !l(t)) {
+			F.current = null, M(null);
 			return;
 		}
-		let n = P.current ?? S(F, e), a = y(String(t.id)), o = b(t.initialGroup), s = b(t.group), c = F.find((e) => e.key === o), u = n.find((e) => e.key === s), d = c?.cards.find((e) => e.key === a);
-		if (P.current = null, j(null), !d || !c || !u) return;
+		let n = F.current ?? S(L, e), a = y(String(t.id)), o = b(t.initialGroup), s = b(t.group), c = L.find((e) => e.key === o), u = n.find((e) => e.key === s), d = c?.cards.find((e) => e.key === a);
+		if (F.current = null, M(null), !d || !c || !u) return;
 		let f = {
 			card: d,
 			fromColumn: c,
@@ -198,23 +261,29 @@ function D({ columns: t, defaultColumns: n = [], onColumnsChange: r, onCardMove:
 			fromIndex: t.initialIndex,
 			toIndex: t.index
 		};
-		L || k(n), r?.(n, f), i?.(f);
+		z || A(n), r?.(n, f), i?.(f);
+	}
+	function U(e) {
+		let t = I.current;
+		if (I.current = null, !t) return;
+		let n = C(L, t, e);
+		n && (z || A(n.columns), r?.(n.columns, n.change), i?.(n.change));
 	}
-	let V = M ? I.flatMap((e) => e.cards.map((t) => ({
+	let W = N ? R.flatMap((e) => e.cards.map((t) => ({
 		card: t,
 		column: e
-	}))).find(({ card: e }) => _(e.key) === M) : void 0;
+	}))).find(({ card: e }) => _(e.key) === N) : void 0;
 	return /* @__PURE__ */ m(o, {
-		onDragStart: R,
-		onDragOver: z,
-		onDragEnd: B,
+		onDragStart: B,
+		onDragOver: V,
+		onDragEnd: H,
 		children: [/* @__PURE__ */ p("div", {
-			...D,
+			...O,
 			role: "group",
-			"aria-label": T,
+			"aria-label": E,
 			"data-slot": "kanban-board",
-			className: e("grid gap-4 sm:auto-cols-[minmax(280px,1fr)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2", C),
-			children: I.map((e) => /* @__PURE__ */ p(E, {
+			className: e("grid gap-4 sm:auto-cols-[minmax(280px,1fr)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2", w),
+			children: R.map((e) => /* @__PURE__ */ p(D, {
 				column: e,
 				boardDisabled: u,
 				renderCard: a,
@@ -222,21 +291,28 @@ function D({ columns: t, defaultColumns: n = [], onColumnsChange: r, onCardMove:
 				dragHandleLabel: h,
 				emptyColumn: f,
 				columnClassName: g,
-				cardClassName: v
+				cardClassName: v,
+				onNativeDragStart: (e) => {
+					I.current = e;
+				},
+				onNativeDragEnd: () => {
+					I.current = null;
+				},
+				onNativeDrop: U
 			}, e.key))
-		}), /* @__PURE__ */ p(s, { children: V ? /* @__PURE__ */ p("div", {
+		}), /* @__PURE__ */ p(s, { children: W ? /* @__PURE__ */ p("div", {
 			className: e("min-w-64 rotate-1 opacity-95 shadow-2xl", x),
-			children: a?.(V.card, V.column, {
-				index: V.column.cards.findIndex((e) => e.key === V.card.key),
+			children: a?.(W.card, W.column, {
+				index: W.column.cards.findIndex((e) => e.key === W.card.key),
 				isDragging: !0,
 				isDropTarget: !1,
 				handle: null
-			}) ?? /* @__PURE__ */ p(w, {
-				card: V.card,
+			}) ?? /* @__PURE__ */ p(T, {
+				card: W.card,
 				handle: null
 			})
 		}) : null })]
 	});
 }
 //#endregion
-export { D as KanbanBoard };
+export { O as KanbanBoard };

package/dist/src/showcase/package-meta.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`3.1.13`,t=`July 15, 2026`,n=e;exports.PACKAGE_DEPENDENCY_RANGE=n,exports.PACKAGE_LATEST_RELEASE_DATE=t,exports.PACKAGE_LATEST_VERSION=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`3.1.14`,t=`July 15, 2026`,n=e;exports.PACKAGE_DEPENDENCY_RANGE=n,exports.PACKAGE_LATEST_RELEASE_DATE=t,exports.PACKAGE_LATEST_VERSION=e;

package/dist/src/showcase/package-meta.js

@@ -1,4 +1,4 @@
 //#region src/showcase/package-meta.ts
-var e = "3.1.13", t = "July 15, 2026", n = e;
+var e = "3.1.14", t = "July 15, 2026", n = e;
 //#endregion
 export { n as PACKAGE_DEPENDENCY_RANGE, t as PACKAGE_LATEST_RELEASE_DATE, e as PACKAGE_LATEST_VERSION };