tembro 3.1.13 → 3.1.14

package/packages/cli/vendor/src/components/display/kanban.tsx

@@ -89,16 +89,30 @@ export type KanbanBoardProps = Omit<React.ComponentProps<"div">, "defaultValue">
   overlayClassName?: string
 }
 
-type KanbanCardViewProps = {
-  card: KanbanCard
-  column: KanbanColumn
-  index: number
-  boardDisabled: boolean
+type KanbanCardViewProps = {
+  card: KanbanCard
+  column: KanbanColumn
+  index: number
+  boardDisabled: boolean
   renderCard?: KanbanBoardProps["renderCard"]
-  onCardClick?: KanbanBoardProps["onCardClick"]
-  dragHandleLabel?: KanbanBoardProps["dragHandleLabel"]
-  cardClassName?: string
-}
+  onCardClick?: KanbanBoardProps["onCardClick"]
+  dragHandleLabel?: KanbanBoardProps["dragHandleLabel"]
+  cardClassName?: string
+  onNativeDragStart?: (source: NativeDragSource) => void
+  onNativeDragEnd?: () => void
+  onNativeDrop?: (target: NativeDropTarget) => void
+}
+
+type NativeDragSource = {
+  cardKey: string
+  columnKey: string
+  index: number
+}
+
+type NativeDropTarget = {
+  columnKey: string
+  index?: number
+}
 
 function createCardMap(columns: KanbanColumn[]) {
   return new Map(
@@ -108,10 +122,10 @@ function createCardMap(columns: KanbanColumn[]) {
   )
 }
 
-function moveKanbanCards(
-  columns: KanbanColumn[],
-  event: DragOverEvent | DragEndEvent
-) {
+function moveKanbanCards(
+  columns: KanbanColumn[],
+  event: DragOverEvent | DragEndEvent
+) {
   const cardMap = createCardMap(columns)
   const cardIdsByColumn = Object.fromEntries(
     columns.map((column) => [
@@ -126,8 +140,57 @@ function moveKanbanCards(
     cards: (movedIds[getColumnId(column.key)] ?? [])
       .map((id) => cardMap.get(String(id)))
       .filter((card): card is KanbanCard => Boolean(card)),
-  }))
-}
+  }))
+}
+
+function moveKanbanCardToTarget(
+  columns: KanbanColumn[],
+  source: NativeDragSource,
+  target: NativeDropTarget
+): { columns: KanbanColumn[]; change: KanbanCardMove } | null {
+  const sourceColumn = columns.find((column) => column.key === source.columnKey)
+  const targetColumn = columns.find((column) => column.key === target.columnKey)
+  if (!sourceColumn || !targetColumn) return null
+
+  const card = sourceColumn.cards.find((item) => item.key === source.cardKey)
+  if (!card) return null
+
+  const sourceIndex = sourceColumn.cards.findIndex((item) => item.key === source.cardKey)
+  if (sourceIndex < 0) return null
+
+  const targetCards = targetColumn.cards
+  let targetIndex = target.index ?? targetCards.length
+  if (sourceColumn.key === targetColumn.key && targetIndex > sourceIndex) {
+    targetIndex -= 1
+  }
+  targetIndex = Math.max(0, Math.min(targetIndex, targetCards.length))
+  if (sourceColumn.key === targetColumn.key && sourceIndex === targetIndex) return null
+
+  const nextColumns = columns.map((column) => {
+    if (column.key === sourceColumn.key) {
+      return { ...column, cards: column.cards.filter((item) => item.key !== source.cardKey) }
+    }
+    return column
+  }).map((column) => {
+    if (column.key !== targetColumn.key) return column
+    const nextCards = [...column.cards]
+    nextCards.splice(targetIndex, 0, card)
+    return { ...column, cards: nextCards }
+  })
+
+  const resolvedTargetColumn = nextColumns.find((column) => column.key === targetColumn.key) ?? targetColumn
+
+  return {
+    columns: nextColumns,
+    change: {
+      card,
+      fromColumn: sourceColumn,
+      toColumn: resolvedTargetColumn,
+      fromIndex: sourceIndex,
+      toIndex: targetIndex,
+    },
+  }
+}
 
 const KanbanDragHandle = React.forwardRef<HTMLButtonElement, {
   label: string
@@ -169,16 +232,19 @@ function DefaultKanbanCard({ card, handle }: { card: KanbanCard; handle: React.R
   )
 }
 
-function KanbanCardView({
-  card,
-  column,
-  index,
+function KanbanCardView({
+  card,
+  column,
+  index,
   boardDisabled,
   renderCard,
-  onCardClick,
-  dragHandleLabel,
-  cardClassName,
-}: KanbanCardViewProps) {
+  onCardClick,
+  dragHandleLabel,
+  cardClassName,
+  onNativeDragStart,
+  onNativeDragEnd,
+  onNativeDrop,
+}: KanbanCardViewProps) {
   const disabled = boardDisabled || column.disabled === true || card.disabled === true
   const { ref, handleRef, isDragging, isDropTarget } = useSortable({
     id: getCardId(card.key),
@@ -206,16 +272,17 @@ function KanbanCardView({
   }
 
   return (
-    <article
-      ref={ref as React.Ref<HTMLElement>}
-      data-slot="kanban-card"
+    <article
+      ref={ref as React.Ref<HTMLElement>}
+      data-slot="kanban-card"
       data-dragging={isDragging || undefined}
       data-drop-target={isDropTarget || undefined}
       data-disabled={disabled || undefined}
       role={onCardClick && !disabled ? "button" : undefined}
       tabIndex={onCardClick && !disabled ? 0 : undefined}
-      aria-label={typeof card.title === "string" ? card.title : undefined}
-      className={cn(
+      aria-label={typeof card.title === "string" ? card.title : undefined}
+      draggable={!disabled}
+      className={cn(
         "rounded-lg outline-none transition-[opacity,box-shadow]",
         onCardClick && !disabled && "cursor-pointer focus-visible:ring-2 focus-visible:ring-ring",
         isDropTarget && "ring-2 ring-primary/30",
@@ -223,10 +290,27 @@ function KanbanCardView({
         disabled && "opacity-55",
         cardClassName
       )}
-      onClick={() => {
-        if (!disabled) onCardClick?.(card, column)
-      }}
-      onKeyDown={(event) => {
+      onClick={() => {
+        if (!disabled) onCardClick?.(card, column)
+      }}
+      onDragStart={(event) => {
+        if (disabled) return
+        const source = { cardKey: card.key, columnKey: column.key, index }
+        event.dataTransfer.effectAllowed = "move"
+        event.dataTransfer.setData("text/plain", JSON.stringify(source))
+        onNativeDragStart?.(source)
+      }}
+      onDragEnd={onNativeDragEnd}
+      onDragOver={(event) => {
+        if (!disabled) event.preventDefault()
+      }}
+      onDrop={(event) => {
+        if (disabled) return
+        event.preventDefault()
+        event.stopPropagation()
+        onNativeDrop?.({ columnKey: column.key, index })
+      }}
+      onKeyDown={(event) => {
         if (event.target !== event.currentTarget || disabled || !onCardClick) return
         if (event.key === "Enter" || event.key === " ") {
           event.preventDefault()
@@ -246,18 +330,24 @@ function KanbanColumnView({
   onCardClick,
   dragHandleLabel,
   emptyColumn,
-  columnClassName,
-  cardClassName,
-}: {
+  columnClassName,
+  cardClassName,
+  onNativeDragStart,
+  onNativeDragEnd,
+  onNativeDrop,
+}: {
   column: KanbanColumn
   boardDisabled: boolean
   renderCard?: KanbanBoardProps["renderCard"]
   onCardClick?: KanbanBoardProps["onCardClick"]
   dragHandleLabel?: KanbanBoardProps["dragHandleLabel"]
-  emptyColumn: React.ReactNode
-  columnClassName?: string
-  cardClassName?: string
-}) {
+  emptyColumn: React.ReactNode
+  columnClassName?: string
+  cardClassName?: string
+  onNativeDragStart?: (source: NativeDragSource) => void
+  onNativeDragEnd?: () => void
+  onNativeDrop?: (target: NativeDropTarget) => void
+}) {
   const { ref, isDropTarget } = useDroppable({
     id: getColumnId(column.key),
     type: "tembro-kanban-column",
@@ -274,13 +364,21 @@ function KanbanColumnView({
       data-drop-target={isDropTarget || undefined}
       data-disabled={column.disabled || undefined}
       aria-label={typeof column.title === "string" ? column.title : undefined}
-      className={cn(
+      className={cn(
         "grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]",
         isDropTarget && "border-primary/60 bg-primary/5 ring-2 ring-primary/15",
         column.disabled && "opacity-60",
-        columnClassName
-      )}
-    >
+        columnClassName
+      )}
+      onDragOver={(event) => {
+        if (!(boardDisabled || column.disabled === true)) event.preventDefault()
+      }}
+      onDrop={(event) => {
+        if (boardDisabled || column.disabled === true) return
+        event.preventDefault()
+        onNativeDrop?.({ columnKey: column.key, index: column.cards.length })
+      }}
+    >
       <div className="flex items-start justify-between gap-3">
         <div className="grid gap-0.5">
           <h3 className="text-sm font-semibold text-foreground">{column.title}</h3>
@@ -306,9 +404,12 @@ function KanbanColumnView({
               boardDisabled={boardDisabled}
               renderCard={renderCard}
               onCardClick={onCardClick}
-              dragHandleLabel={dragHandleLabel}
-              cardClassName={cardClassName}
-            />
+              dragHandleLabel={dragHandleLabel}
+              cardClassName={cardClassName}
+              onNativeDragStart={onNativeDragStart}
+              onNativeDragEnd={onNativeDragEnd}
+              onNativeDrop={onNativeDrop}
+            />
           ))
         )}
       </div>
@@ -334,9 +435,10 @@ function KanbanBoard({
   ...props
 }: KanbanBoardProps) {
   const [internalColumns, setInternalColumns] = React.useState<KanbanColumn[]>(() => defaultColumns)
-  const [draftColumns, setDraftColumns] = React.useState<KanbanColumn[] | null>(null)
-  const [activeCardId, setActiveCardId] = React.useState<string | null>(null)
-  const draftColumnsRef = React.useRef<KanbanColumn[] | null>(null)
+  const [draftColumns, setDraftColumns] = React.useState<KanbanColumn[] | null>(null)
+  const [activeCardId, setActiveCardId] = React.useState<string | null>(null)
+  const draftColumnsRef = React.useRef<KanbanColumn[] | null>(null)
+  const nativeDragRef = React.useRef<NativeDragSource | null>(null)
   const columns = columnsProp ?? internalColumns
   const renderedColumns = draftColumns ?? columns
   const isControlled = columnsProp !== undefined
@@ -361,7 +463,7 @@ function KanbanBoard({
     setDraftColumns(nextColumns)
   }
 
-  function handleDragEnd(event: DragEndEvent) {
+  function handleDragEnd(event: DragEndEvent) {
     const source = event.operation.source
     setActiveCardId(null)
 
@@ -393,8 +495,21 @@ function KanbanBoard({
     }
     if (!isControlled) setInternalColumns(finalColumns)
     onColumnsChange?.(finalColumns, change)
-    onCardMove?.(change)
-  }
+    onCardMove?.(change)
+  }
+
+  function handleNativeDrop(target: NativeDropTarget) {
+    const source = nativeDragRef.current
+    nativeDragRef.current = null
+    if (!source) return
+
+    const result = moveKanbanCardToTarget(columns, source, target)
+    if (!result) return
+
+    if (!isControlled) setInternalColumns(result.columns)
+    onColumnsChange?.(result.columns, result.change)
+    onCardMove?.(result.change)
+  }
 
   const activeEntry = activeCardId
     ? renderedColumns
@@ -425,11 +540,14 @@ function KanbanBoard({
             boardDisabled={disabled}
             renderCard={renderCard}
             onCardClick={onCardClick}
-            dragHandleLabel={dragHandleLabel}
-            emptyColumn={emptyColumn}
-            columnClassName={columnClassName}
-            cardClassName={cardClassName}
-          />
+            dragHandleLabel={dragHandleLabel}
+            emptyColumn={emptyColumn}
+            columnClassName={columnClassName}
+            cardClassName={cardClassName}
+            onNativeDragStart={(source) => { nativeDragRef.current = source }}
+            onNativeDragEnd={() => { nativeDragRef.current = null }}
+            onNativeDrop={handleNativeDrop}
+          />
         ))}
       </div>
 

package/packages/cli/vendor/src/showcase/package-meta.ts

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

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.13",
+  "version": "3.1.14",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@3.1.13 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@3.1.14 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.13" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.14" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@3.1.13",
+          label: "tembro@3.1.14",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.13",
+  "version": "3.1.14",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [