tembro 3.1.13 → 3.1.15

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/components/notifications/notification-center.tsx

@@ -47,21 +47,21 @@ function NotificationCenter({
           render={<PopoverTrigger />}
           variant="ghost"
           size="icon"
-          className="relative rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] text-foreground shadow-sm hover:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)]"
+          className="relative rounded-full border bg-white text-foreground shadow-sm hover:bg-muted dark:bg-neutral-950"
         >
           <BellIcon className="size-5" />
           {unreadCount > 0 && (
-            <span className="absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-[color:var(--aui-brand-strong)] px-1.5 py-0.5 text-[10px] font-bold leading-none text-white shadow-[0_8px_20px_rgba(16,185,129,0.35)]">
+            <span className="absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-bold leading-none text-primary-foreground shadow-[0_8px_20px_rgba(16,185,129,0.24)]">
               {unreadCount}
               <span className="sr-only">{unreadCount} unread notifications</span>
             </span>
           )}
         </Button>
         <PopoverContent
-          className="w-[24rem] overflow-hidden rounded-3xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] p-0 shadow-[0_24px_60px_rgba(15,23,42,0.18)]"
+          className="isolate w-[24rem] overflow-hidden rounded-3xl border bg-white p-0 text-popover-foreground opacity-100 shadow-[0_24px_60px_rgba(15,23,42,0.18)] dark:bg-neutral-950"
           align="end"
         >
-          <div className="flex items-center justify-between border-b border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-5 py-4">
+          <div className="flex items-center justify-between border-b bg-white px-5 py-4 dark:bg-neutral-950">
             <div className="grid gap-0.5">
               <h4 className="font-semibold tracking-tight text-foreground">{title}</h4>
               <span className="text-xs text-muted-foreground">
@@ -73,7 +73,7 @@ function NotificationCenter({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
+                  className="h-8 rounded-full border px-3 text-xs font-semibold text-muted-foreground hover:bg-background hover:text-foreground"
                   onClick={onMarkAllRead}
                 >
                   Mark all read
@@ -83,7 +83,7 @@ function NotificationCenter({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
+                  className="h-8 rounded-full border px-3 text-xs font-semibold text-muted-foreground hover:bg-background hover:text-foreground"
                   onClick={onClearAll}
                 >
                   Clear all
@@ -91,9 +91,9 @@ function NotificationCenter({
               ) : null}
             </div>
           </div>
-          <div className="max-h-[400px] overflow-y-auto bg-[color:var(--aui-page-bg)] p-2">
+          <div className="max-h-[400px] overflow-y-auto bg-white p-2 dark:bg-neutral-950">
             {notifications.length === 0 ? (
-              <div className="rounded-2xl border border-dashed border-[color:var(--aui-surface-border)] px-6 py-10 text-center text-sm text-muted-foreground">
+              <div className="rounded-2xl border border-dashed px-6 py-10 text-center text-sm text-muted-foreground">
                 {emptyLabel}
               </div>
             ) : (
@@ -105,8 +105,8 @@ function NotificationCenter({
                       <button
                         key={notification.id}
                         className={cn(
-                          "flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]",
-                          !notification.read && "border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]"
+                          "flex flex-col gap-1 rounded-2xl border border-transparent bg-white px-4 py-3 text-left transition hover:border-border hover:bg-muted dark:bg-neutral-950 dark:hover:bg-neutral-900",
+                          !notification.read && "border-primary/20 bg-slate-50 dark:bg-neutral-900"
                         )}
                         onClick={() => onNotificationClick?.(notification)}
                       >
@@ -115,7 +115,7 @@ function NotificationCenter({
                             {notification.title}
                           </span>
                           {!notification.read && (
-                            <span className="mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]" />
+                            <span className="mt-1 flex size-2 shrink-0 rounded-full bg-primary shadow-[0_0_0_4px_color-mix(in_srgb,var(--primary)_14%,transparent)]" />
                           )}
                         </div>
                         {notification.description && (

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.15"
 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.15",
   "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.15 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.15" />
         </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.15",
           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.15",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [