@open-mercato/core 0.6.3-develop.3651.1.d3a548a5f1 → 0.6.3-develop.3653.1.b8558737ae

package/src/modules/customers/backend/customers/deals/pipeline/components/Lane.tsx

@@ -0,0 +1,378 @@
+"use client"
+
+import * as React from 'react'
+import { useDroppable } from '@dnd-kit/core'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import type { RowActionItem } from '@open-mercato/ui/backend/RowActions'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+import type { FilterOptionTone } from '@open-mercato/shared/lib/query/advanced-filter'
+import { DealCard, type DealCardData } from './DealCard'
+import { DashedTileButton } from './DashedTileButton'
+import { LANE_WIDTH_PX } from './constants'
+import { LaneCurrencyBreakdown } from './LaneCurrencyBreakdown'
+import { LaneResizeHandle } from './LaneResizeHandle'
+
+export type LaneStage = {
+  id: string
+  label: string
+  tone: FilterOptionTone | null
+}
+
+export type LaneAggregateProp = {
+  count: number
+  totalInBaseCurrency: number
+  byCurrency: Array<{ currency: string; total: number; count: number }>
+  baseCurrencyCode: string | null
+  /** `true` when every currency in `byCurrency` was convertible to the base currency. */
+  convertedAll: boolean
+  /** Currencies present in `byCurrency` that lack an FX rate to base — excluded from totals. */
+  missingRateCurrencies: string[]
+}
+
+type LaneProps = {
+  stage: LaneStage
+  deals: DealCardData[]
+  /** Server-side aggregate for accurate counts/totals across all deals in this stage, not just loaded ones */
+  aggregate?: LaneAggregateProp | null
+  selectedDealIds: Set<string>
+  buildMenuItems: (deal: DealCardData) => RowActionItem[]
+  activeDragDealId?: string | null
+  isLoadingMore?: boolean
+  /** Pixel width override (when the user has resized the column). Falls back to the default class. */
+  width?: number | null
+  onToggleSelect: (dealId: string) => void
+  onComposeActivity: (dealId: string, type: 'call' | 'email' | 'note') => void
+  onOpenDetail: (dealId: string) => void
+  onQuickAddClick: (stageId: string) => void
+  onLoadMore?: (stageId: string) => void
+  /** Drag-resize callbacks. When provided, a vertical drag handle is rendered on the lane edge. */
+  onResize?: (stageId: string, deltaPx: number) => void
+  onResizeEnd?: (stageId: string) => void
+  onResetWidth?: (stageId: string) => void
+}
+
+// 4px color bar tone — uses saturated icon tokens so the bar is visibly colored, not pale
+const ACCENT_TONE_CLASS: Record<FilterOptionTone, string> = {
+  success: 'bg-status-success-icon',
+  error: 'bg-status-error-icon',
+  warning: 'bg-status-warning-icon',
+  info: 'bg-status-info-icon',
+  neutral: 'bg-status-neutral-icon',
+  brand: 'bg-brand-violet',
+  pink: 'bg-status-pink-icon',
+}
+
+// Count pill bg uses very-light status background, text uses status text color
+const COUNT_BADGE_TONE_CLASS: Record<FilterOptionTone, string> = {
+  success: 'bg-status-success-bg text-status-success-text',
+  error: 'bg-status-error-bg text-status-error-text',
+  warning: 'bg-status-warning-bg text-status-warning-text',
+  info: 'bg-status-info-bg text-status-info-text',
+  neutral: 'bg-status-neutral-bg text-status-neutral-text',
+  brand: 'bg-brand-violet/14 text-brand-violet',
+  pink: 'bg-status-pink-bg text-status-pink-text',
+}
+
+function getAccentClass(tone: FilterOptionTone | null): string {
+  if (tone && tone in ACCENT_TONE_CLASS) return ACCENT_TONE_CLASS[tone]
+  return 'bg-border'
+}
+
+function getCountBadgeClass(tone: FilterOptionTone | null): string {
+  if (tone && tone in COUNT_BADGE_TONE_CLASS) return COUNT_BADGE_TONE_CLASS[tone]
+  return 'bg-muted text-muted-foreground'
+}
+
+function compactCurrency(amount: number): string {
+  if (amount >= 1_000_000) {
+    const value = amount / 1_000_000
+    return value >= 100 ? `${Math.round(value)}M` : `${value.toFixed(1).replace(/\.0$/, '')}M`
+  }
+  if (amount >= 1_000) {
+    const value = amount / 1_000
+    return value >= 100 ? `${Math.round(value)}k` : `${value.toFixed(1).replace(/\.0$/, '')}k`
+  }
+  return String(Math.round(amount))
+}
+
+type CurrencyRow = { currency: string; total: number; count: number }
+
+type LaneStats = {
+  count: number
+  /** Headline amount and the currency it is denominated in (largest single currency, raw, never converted). */
+  primaryAmount: number
+  primaryCurrency: string | null
+  /** Per-currency rows sorted desc by total — the popover renders these one per line. */
+  rows: CurrencyRow[]
+  /** Sum of `rows` converted to base currency (zero when no base is configured / nothing converted). */
+  totalInBaseCurrency: number
+  baseCurrencyCode: string | null
+  convertedAll: boolean
+  missingRateCurrencies: string[]
+}
+
+/**
+ * Build display stats.
+ * - If a server aggregate is provided, prefer it (covers all deals, converts to tenant base currency).
+ * - Otherwise fall back to summing loaded deals (used before aggregate query loads).
+ *
+ * The headline currency on the lane header is intentionally the LARGEST raw currency
+ * (not the base-currency converted total) because the converted total can be misleading
+ * when FX rates are missing — operators see a smaller number than the headline suggests.
+ * The base-currency converted total is reserved for the breakdown popover footer, where
+ * a partial-conversion indicator can disclose what's excluded.
+ */
+function buildLaneStats(deals: DealCardData[], aggregate?: LaneAggregateProp | null): LaneStats {
+  if (aggregate) {
+    const rows = aggregate.byCurrency
+    // Pick the single currency with the largest raw total to surface in the header. This
+    // is always honest: the operator sees the actual largest cluster of value rather than
+    // a synthetic base-currency total that may be partial.
+    const headline = rows.length > 0 ? rows[0] : null
+    return {
+      count: aggregate.count,
+      primaryAmount: headline ? headline.total : 0,
+      primaryCurrency: headline ? headline.currency : null,
+      rows,
+      totalInBaseCurrency: aggregate.totalInBaseCurrency,
+      baseCurrencyCode: aggregate.baseCurrencyCode,
+      convertedAll: aggregate.convertedAll,
+      missingRateCurrencies: aggregate.missingRateCurrencies,
+    }
+  }
+  const totalsByCurrency = new Map<string, { total: number; count: number }>()
+  for (const deal of deals) {
+    if (typeof deal.valueAmount !== 'number' || !Number.isFinite(deal.valueAmount)) continue
+    const code = deal.valueCurrency && deal.valueCurrency.length === 3
+      ? deal.valueCurrency.toUpperCase()
+      : 'USD'
+    const entry = totalsByCurrency.get(code) ?? { total: 0, count: 0 }
+    entry.total += deal.valueAmount
+    entry.count += 1
+    totalsByCurrency.set(code, entry)
+  }
+  const rows: CurrencyRow[] = Array.from(totalsByCurrency.entries())
+    .map(([currency, value]) => ({ currency, total: value.total, count: value.count }))
+    .sort((a, b) => b.total - a.total)
+  if (rows.length === 0) {
+    return {
+      count: deals.length,
+      primaryAmount: 0,
+      primaryCurrency: null,
+      rows,
+      totalInBaseCurrency: 0,
+      baseCurrencyCode: null,
+      convertedAll: true,
+      missingRateCurrencies: [],
+    }
+  }
+  return {
+    count: deals.length,
+    primaryAmount: rows[0].total,
+    primaryCurrency: rows[0].currency,
+    rows,
+    totalInBaseCurrency: 0,
+    baseCurrencyCode: null,
+    // We don't have rates client-side; mark as "not converted" only when there are
+    // multiple currencies so the popover can show a "configure FX rates" hint.
+    convertedAll: rows.length === 1,
+    missingRateCurrencies: rows.length > 1 ? rows.slice(1).map((row) => row.currency) : [],
+  }
+}
+
+function LaneImpl({
+  stage,
+  deals,
+  aggregate,
+  selectedDealIds,
+  buildMenuItems,
+  activeDragDealId,
+  isLoadingMore = false,
+  width,
+  onToggleSelect,
+  onComposeActivity,
+  onOpenDetail,
+  onQuickAddClick,
+  onLoadMore,
+  onResize,
+  onResizeEnd,
+  onResetWidth,
+}: LaneProps): React.ReactElement {
+  const t = useT()
+  const { setNodeRef, isOver } = useDroppable({
+    id: `lane:${stage.id}`,
+    data: { type: 'lane', stageId: stage.id },
+  })
+  const isDragActive = !!activeDragDealId
+  const sourceLane = isDragActive && deals.some((deal) => deal.id === activeDragDealId)
+  // Highlight drop zone when:
+  //  - the lane has the pointer over it during a drag, OR
+  //  - any drag is active and this lane is not the source (so all candidate targets are clearly tagged)
+  const showDropHighlight = isOver || (isDragActive && !sourceLane)
+  const stats = React.useMemo(() => buildLaneStats(deals, aggregate), [deals, aggregate])
+  // Pull boolean out of the Set so each DealCard receives a stable primitive — that lets
+  // React.memo on DealCard skip re-renders when the Set reference changes but its emptiness
+  // does not. Flipping false→true (first selection) or true→false (last cleared) forces a
+  // full pass over the lane's cards so their checkbox visibility updates atomically.
+  const bulkSelectionActive = selectedDealIds.size > 0
+  const totalLabel = stats.primaryAmount > 0 && stats.primaryCurrency
+    ? `${compactCurrency(stats.primaryAmount)} ${stats.primaryCurrency}`
+    : null
+  const visibleCount = deals.length
+  const totalCount = stats.count
+  const hasMoreDeals = totalCount > visibleCount
+  const accentClass = getAccentClass(stage.tone)
+  const countBadgeClass = getCountBadgeClass(stage.tone)
+
+  const handleQuickAdd = React.useCallback(() => {
+    onQuickAddClick(stage.id)
+  }, [onQuickAddClick, stage.id])
+
+  return (
+    <div
+      className="relative flex flex-none flex-col gap-3"
+      style={{ width: typeof width === 'number' && Number.isFinite(width) ? `${width}px` : `${LANE_WIDTH_PX}px` }}
+    >
+      <div className="flex flex-col gap-2.5 overflow-clip rounded-lg bg-muted/40 px-4 py-3.5">
+        <div className={`h-1.5 w-full rounded-sm ${accentClass}`} aria-hidden="true" />
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-2.5">
+            <span className="truncate text-sm font-bold uppercase leading-normal text-foreground">
+              {stage.label}
+            </span>
+            <span
+              className={`inline-flex shrink-0 items-center rounded-full px-2 py-1 text-xs font-bold leading-normal ${countBadgeClass}`}
+              title={
+                hasMoreDeals
+                  ? translateWithFallback(
+                      t,
+                      'customers.deals.kanban.lane.aria.partialCount',
+                      'Showing {visible} of {total}',
+                      { visible: visibleCount, total: totalCount },
+                    )
+                  : undefined
+              }
+            >
+              {totalCount}
+            </span>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            {totalLabel ? (
+              <span className="text-sm font-bold leading-normal text-foreground">
+                {totalLabel}
+              </span>
+            ) : null}
+            {stats.rows.length > 1 ? (
+              <LaneCurrencyBreakdown
+                rows={stats.rows}
+                baseCurrencyCode={stats.baseCurrencyCode}
+                totalInBaseCurrency={stats.totalInBaseCurrency}
+                convertedAll={stats.convertedAll}
+                missingRateCurrencies={stats.missingRateCurrencies}
+                triggerLabel={`+${stats.rows.length - 1}`}
+                headingLabel={stage.label.toUpperCase()}
+                headingCount={totalCount}
+              />
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      <DashedTileButton
+        onClick={handleQuickAdd}
+        className="h-11"
+        ariaLabel={translateWithFallback(
+          t,
+          'customers.deals.kanban.lane.aria.quickAdd',
+          'Quickly add a deal to {stage}',
+          { stage: stage.label },
+        )}
+      >
+        <span className="text-base font-bold leading-none">+</span>
+        <span>{translateWithFallback(t, 'customers.deals.kanban.cta.quickDeal', 'Quick deal')}</span>
+      </DashedTileButton>
+
+      <div
+        ref={setNodeRef}
+        className={`flex min-h-[40vh] flex-col gap-3 rounded-lg p-1.5 ${
+          isOver
+            ? 'bg-accent-indigo/10 outline-dashed outline-2 outline-accent-indigo -outline-offset-[2px]'
+            : showDropHighlight
+              ? 'bg-muted/40 outline-dashed outline-1 outline-muted-foreground/40 -outline-offset-[2px]'
+              : ''
+        }`}
+      >
+        {deals.length === 0 ? (
+          <EmptyState
+            size="sm"
+            title={translateWithFallback(
+              t,
+              'customers.deals.kanban.lane.empty',
+              'No deals in this stage yet.',
+            )}
+          />
+        ) : (
+          deals.map((deal) => (
+            <DealCard
+              key={deal.id}
+              deal={deal}
+              selected={selectedDealIds.has(deal.id)}
+              bulkSelectionActive={bulkSelectionActive}
+              buildMenuItems={buildMenuItems}
+              isActiveDrag={activeDragDealId === deal.id}
+              onToggleSelect={onToggleSelect}
+              onComposeActivity={onComposeActivity}
+              onOpenDetail={onOpenDetail}
+            />
+          ))
+        )}
+        {hasMoreDeals && onLoadMore ? (
+          <DashedTileButton
+            onClick={() => onLoadMore(stage.id)}
+            disabled={isLoadingMore}
+            className="mt-0.75 px-3 py-2.5 text-muted-foreground"
+            ariaLabel={translateWithFallback(
+              t,
+              'customers.deals.kanban.lane.aria.loadMore',
+              'Load more deals in {stage}',
+              { stage: stage.label },
+            )}
+          >
+            {isLoadingMore
+              ? translateWithFallback(t, 'customers.deals.kanban.lane.loadingMore', 'Loading…')
+              : translateWithFallback(
+                  t,
+                  'customers.deals.kanban.lane.loadMore',
+                  'Show more ({remaining})',
+                  { remaining: totalCount - visibleCount },
+                )}
+          </DashedTileButton>
+        ) : null}
+      </div>
+      {onResize ? (
+        <LaneResizeHandle
+          onResize={(delta) => onResize(stage.id, delta)}
+          onResizeEnd={() => onResizeEnd?.(stage.id)}
+          onReset={() => onResetWidth?.(stage.id)}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+// Memoize the lane so changes in a different lane (or in the active drag) don't re-render us.
+// Page passes booleans (isDragActive) instead of activeDragDealId so most lanes can skip re-rendering.
+export const Lane = React.memo(LaneImpl, (prev, next) => {
+  if (prev.stage !== next.stage) return false
+  if (prev.deals !== next.deals) return false
+  if (prev.aggregate !== next.aggregate) return false
+  if (prev.selectedDealIds !== next.selectedDealIds) return false
+  if (prev.buildMenuItems !== next.buildMenuItems) return false
+  if (prev.activeDragDealId !== next.activeDragDealId) return false
+  if (prev.isLoadingMore !== next.isLoadingMore) return false
+  if (prev.width !== next.width) return false
+  return true
+})
+
+export default Lane

package/src/modules/customers/backend/customers/deals/pipeline/components/LaneCurrencyBreakdown.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from 'react'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@open-mercato/ui/primitives/popover'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { X } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+import { CurrencyBreakdownTable, type CurrencyBreakdownRow } from './CurrencyBreakdownTable'
+
+type LaneCurrencyBreakdownProps = {
+  /** Per-currency breakdown rows (already sorted desc by total in the API response). */
+  rows: CurrencyBreakdownRow[]
+  /** Tenant base currency code, or `null` when none is configured. */
+  baseCurrencyCode: string | null
+  /** Sum of `rows` converted to the base currency (only rows with a usable FX rate are included). */
+  totalInBaseCurrency: number
+  /** Whether every row in `rows` was either already base-currency or had an FX rate. */
+  convertedAll: boolean
+  /** Currencies in `rows` that have no FX rate to base — they are excluded from `totalInBaseCurrency`. */
+  missingRateCurrencies: string[]
+  /** Visible chip label shown in the lane header (e.g. "+3"). */
+  triggerLabel: string
+  /** Optional className for the trigger chip. */
+  triggerClassName?: string
+  /**
+   * Heading shown above the table (e.g. lane stage label or `"PIPELINE"` for the
+   * board-level breakdown). Rendered in overline style above the headline total.
+   */
+  headingLabel: string
+  /** Total deal count shown next to the heading label (e.g. `"49 deals"`). */
+  headingCount: number
+}
+
+/**
+ * Read-only per-currency breakdown popover.
+ *
+ * Reused by:
+ *   - lane header `+N` chip (lane-scoped)
+ *   - page-level Breakdown button (pipeline-scoped)
+ *
+ * Visual design from SPEC-048 Figma node 1251:610 — bordered white header bar with bold title +
+ * close button, overline heading + large total amount, currency table with thin row dividers,
+ * BASE pill on the base-currency row, and a muted "NBP mid rate · {date}" footer credit.
+ *
+ * The body (column header + currency rows + BASE pill + footer credit) lives in
+ * `CurrencyBreakdownTable` so the filter variant (`CurrencyFilterPopover`) can reuse the same
+ * row composition without duplicating styling.
+ */
+export function LaneCurrencyBreakdown({
+  rows,
+  baseCurrencyCode,
+  totalInBaseCurrency,
+  convertedAll,
+  missingRateCurrencies,
+  triggerLabel,
+  triggerClassName,
+  headingLabel,
+  headingCount,
+}: LaneCurrencyBreakdownProps): React.ReactElement {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+
+  const closeLabel = translateWithFallback(t, 'customers.deals.kanban.filter.close', 'Close')
+  const titleLabel = translateWithFallback(
+    t,
+    'customers.deals.kanban.currencyBreakdown.title',
+    'Lane breakdown',
+  )
+  const headingCountLabel = translateWithFallback(
+    t,
+    'customers.deals.kanban.currencyBreakdown.headingCount',
+    '({count} deals)',
+    { count: headingCount },
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          aria-label={translateWithFallback(
+            t,
+            'customers.deals.kanban.lane.currencyBreakdown.trigger',
+            'Show per-currency breakdown ({count} currencies)',
+            { count: rows.length },
+          )}
+          className={
+            triggerClassName ??
+            'inline-flex shrink-0 items-center rounded-full bg-muted px-2 py-1 text-xs font-bold leading-normal text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+          }
+        >
+          {triggerLabel}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className="w-80 rounded-2xl border-border bg-transparent p-0 shadow-xl"
+        onCloseAutoFocus={(event) => event.preventDefault()}
+      >
+        {/*
+          Solid `bg-card` (no opacity modifier) on the outer wrapper: floating overlays must not
+          let underlying card content bleed through. Round-2 UX review item 33 — same class of
+          bug as item 6 in the shared FilterPopoverShell, but in popovers that hand-roll their
+          chrome instead of using the shell.
+        */}
+        <div className="flex flex-col overflow-hidden rounded-2xl bg-card">
+          <div className="flex items-center justify-between border-b border-border bg-card px-5 py-4">
+            <span className="text-base font-bold leading-normal text-foreground">{titleLabel}</span>
+            <IconButton
+              variant="ghost"
+              size="xs"
+              onClick={() => setOpen(false)}
+              aria-label={closeLabel}
+              className="flex size-7 items-center justify-center rounded-md border border-border bg-card text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              <X className="size-3.5" aria-hidden="true" />
+            </IconButton>
+          </div>
+
+          <div className="flex flex-col gap-1.5 bg-card px-6 pt-3.5 pb-2">
+            <span className="text-overline font-semibold uppercase tracking-wider text-muted-foreground">
+              {headingLabel} {headingCountLabel}
+            </span>
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl font-bold leading-normal text-foreground">
+                {formatAmount(totalInBaseCurrency)}
+              </span>
+              {baseCurrencyCode ? (
+                <span className="text-sm font-normal leading-normal text-muted-foreground">
+                  {baseCurrencyCode}
+                </span>
+              ) : null}
+            </div>
+          </div>
+
+          <CurrencyBreakdownTable
+            rows={rows}
+            baseCurrencyCode={baseCurrencyCode}
+            missingRateCurrencies={missingRateCurrencies}
+          />
+
+          <div className="bg-card px-6 pt-3 pb-3.5">
+            <p className="text-xs font-normal leading-normal text-muted-foreground">
+              {translateWithFallback(
+                t,
+                'customers.deals.kanban.currencyBreakdown.footerCredit',
+                'NBP mid rate · {date}',
+                { date: formatToday() },
+              )}
+            </p>
+            {!convertedAll && missingRateCurrencies.length > 0 ? (
+              <p className="mt-2 text-xs leading-normal text-muted-foreground">
+                {translateWithFallback(
+                  t,
+                  'customers.deals.kanban.lane.currencyBreakdown.missingRatesHint',
+                  'Missing FX rates for {currencies} — excluded from total. Configure exchange rates to see the full converted value.',
+                  { currencies: missingRateCurrencies.join(', ') },
+                )}
+              </p>
+            ) : null}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function formatAmount(amount: number): string {
+  return new Intl.NumberFormat(undefined, {
+    style: 'decimal',
+    maximumFractionDigits: 0,
+    useGrouping: true,
+  }).format(Math.round(amount))
+}
+
+function formatToday(): string {
+  return new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+  }).format(new Date())
+}
+
+export default LaneCurrencyBreakdown

package/src/modules/customers/backend/customers/deals/pipeline/components/LaneResizeHandle.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+
+type LaneResizeHandleProps = {
+  /** Called with the cumulative delta (px) as the user drags. */
+  onResize: (deltaPx: number) => void
+  /** Called once when the drag ends. */
+  onResizeEnd?: () => void
+  /** Called on double-click — convention is "reset this lane to default width". */
+  onReset?: () => void
+}
+
+/**
+ * Thin vertical drag handle that sits on the right edge of a kanban lane.
+ *
+ * UX (matches Monday / Asana / ClickUp):
+ * - Hover: 4 px column highlights, cursor flips to `col-resize`
+ * - Drag: lane width updates live via `onResize`
+ * - Double-click: emits `onReset` (the lane resets to its default width)
+ *
+ * The pointer listeners attach to `window` during the drag so the handle keeps tracking
+ * even when the cursor moves off the handle's narrow hit area.
+ */
+export function LaneResizeHandle({ onResize, onResizeEnd, onReset }: LaneResizeHandleProps): React.ReactElement {
+  const t = useT()
+  const dragStateRef = React.useRef<{ lastX: number } | null>(null)
+  const [isActive, setIsActive] = React.useState(false)
+
+  const stopDrag = React.useCallback(
+    (handlers: { move: (e: PointerEvent) => void; up: () => void }) => {
+      window.removeEventListener('pointermove', handlers.move)
+      window.removeEventListener('pointerup', handlers.up)
+      window.removeEventListener('pointercancel', handlers.up)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      setIsActive(false)
+      onResizeEnd?.()
+      dragStateRef.current = null
+    },
+    [onResizeEnd],
+  )
+
+  const handlePointerDown = React.useCallback(
+    (event: React.PointerEvent) => {
+      // Only respond to primary (left) mouse button / touch / pen
+      if (event.button !== 0 && event.pointerType === 'mouse') return
+      event.preventDefault()
+      event.stopPropagation()
+      setIsActive(true)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      dragStateRef.current = { lastX: event.clientX }
+
+      const handlers = {
+        move: (e: PointerEvent) => {
+          if (!dragStateRef.current) return
+          const delta = e.clientX - dragStateRef.current.lastX
+          if (delta !== 0) {
+            dragStateRef.current.lastX = e.clientX
+            onResize(delta)
+          }
+        },
+        up: () => stopDrag(handlers),
+      }
+      window.addEventListener('pointermove', handlers.move)
+      window.addEventListener('pointerup', handlers.up)
+      window.addEventListener('pointercancel', handlers.up)
+    },
+    [onResize, stopDrag],
+  )
+
+  const handleDoubleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      onReset?.()
+    },
+    [onReset],
+  )
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={translateWithFallback(
+        t,
+        'customers.deals.kanban.lane.resizeHandle',
+        'Drag to resize column. Double-click to reset width.',
+      )}
+      onPointerDown={handlePointerDown}
+      onDoubleClick={handleDoubleClick}
+      title={translateWithFallback(
+        t,
+        'customers.deals.kanban.lane.resizeHandle',
+        'Drag to resize · double-click to reset',
+      )}
+      className={`absolute -right-0.5 top-0 z-20 h-full w-1.5 cursor-col-resize touch-none select-none ${
+        isActive ? 'bg-accent-indigo/40' : 'bg-transparent hover:bg-accent-indigo/20'
+      }`}
+    />
+  )
+}
+
+export default LaneResizeHandle