@object-ui/plugin-kanban 3.3.2 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @object-ui/plugin-kanban
 
+## 3.4.0
+
+### Patch Changes
+
+- a2d7023: End-user feature batch — forms, designer history, import/export, and PWA offline sync.
+
+  **Forms (`@object-ui/fields`, `@object-ui/providers`)**
+  - `FileField`: native `<input capture="environment">` camera capture for mobile devices, plus a uploading-progress indicator driven by `UploadProvider`.
+  - `ImageField`: per-image inline crop/rotate via the lazy-loaded `ImageCropperDialog` (canvas-based, zero new deps).
+  - New `UploadProvider` in `@object-ui/providers` with pluggable adapters for S3 and Azure Blob (plus the default object-URL adapter for local previews). XHR-based with progress, abort, and retry.
+  - `LookupField`: `lookup.dependsOn: string | string[]` to chain dependent lookups (e.g. State depends on Country); the trigger is gated until parent values are present and the OData `$filter` is built automatically.
+
+  **Container-aware widget widths (`@object-ui/components`)**
+  - New `useResizeObserver(ref)` hook exposing `{ width, height }` of any element. SSR-safe; reads the initial size via `getBoundingClientRect`.
+  - `plugin-gantt` and `plugin-kanban` now react to their container size instead of `window.innerWidth`, so they behave correctly inside split panels and dashboards.
+
+  **Designer history (`@object-ui/plugin-designer`)**
+  - `useUndoRedo` (and therefore `useDesignerHistory`) gains `persistKey` + `storage` options to round-trip the undo/redo stack through `sessionStorage`, plus a `clearPersisted()` cleanup helper. Drafts now survive accidental tab refreshes.
+  - New `<HistoryPanel>` component renders the timeline visually with one-click jump-to-checkpoint via the new `jumpTo(index)` API.
+
+  **Import wizard (`@object-ui/plugin-grid`)**
+  - Saved column-mapping templates: name, save, re-apply, and delete via a new template bar in the mapping step. Persisted under `objectui:import-templates:${objectName}` (override via `templateStorageKey` / `templateStorage`).
+  - Inline validation correction: cells with errors in the preview step are now editable; corrections feed straight into the import without requiring a re-upload, with green-bar status indicators for fixed rows.
+
+  **PWA offline sync (`@object-ui/mobile`)**
+  - New `MemoryOfflineQueue` / `IndexedDbOfflineQueue` (`createOfflineQueue()` picks the best backend) backed by IndexedDB.
+  - `createOfflineDataSource(inner, { queue })` wraps any DataSource so mutations issued while offline (or that fail with a network-style error) are queued and replayed in order on reconnect. Includes `replay()`, `drop()`, `clear()`, `pending()`, an `onChange` notifier, and an opt-in `resolveConflict` hook for stale-write conflicts.
+  - New `useOfflineSync(source)` hook exposes `{ isOnline, pending, isReplaying, replay, drop, clear }` and auto-replays on the browser's `online` event.
+  - `getServiceWorkerSource(opts)` emits a customisable Service Worker that pre-caches the app shell, applies network-first to API requests, and broadcasts `REPLAY_QUEUE` to clients on Background Sync. `requestBackgroundSync(tag)` registers a one-shot sync from the page.
+
+- b2be122: fix(mobile): round 2 — kanban readability, calendar default view, timeline dot clipping
+
+  **Kanban**
+  - Remove `font-mono` from card titles, descriptions, column headers, and empty-state labels — CRM cards no longer render in a monospace font.
+  - Constrain column body height (`max-h-full min-h-0` + `h-full` on the layout root) so `ScrollArea` activates and cards don't bleed past the viewport bottom.
+  - Opportunistically derive `description` (e.g. `$60K · Acme Corp · @owner`) and up to two `badges` (priority/severity/industry/rating) in `ObjectKanban` when the schema/source omits them, giving mobile cards more context at a glance.
+
+  **Calendar**
+  - `ObjectCalendar` previously hardcoded `view={schema.defaultView ?? 'month'}`, making the view-selector dropdown a no-op. Wire the `view` state through to the `<Calendar>` prop so user selection is respected.
+  - On mobile (viewport < 768 px) coerce `day` defaults to `month` via a synchronous lazy initialiser and a resize/orientation effect — avoids the useless 24-hour empty-hour grid for date-only events.
+
+  **Timeline**
+  - Add `ml-3` to the `<Timeline>` `<ol>` so the `absolute -left-3` marker dots are no longer clipped at the scroll-container edge.
+
+- Updated dependencies [a2d7023]
+- Updated dependencies [f1ca238]
+- Updated dependencies [de881ef]
+  - @object-ui/components@3.4.0
+  - @object-ui/types@3.4.0
+  - @object-ui/core@3.4.0
+  - @object-ui/react@3.4.0
+
 ## 3.3.2
 
 ### Patch Changes

package/dist/{KanbanEnhanced-Do9ZB1Mh.js → KanbanEnhanced-4myt_u5S.js}

@@ -592,10 +592,10 @@ function Y({ card: e, conditionalFormatting: t }) {
 				/* @__PURE__ */ (0, K.jsxs)(x, {
 					className: "p-4",
 					children: [/* @__PURE__ */ (0, K.jsx)(S, {
-						className: "text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors",
+						className: "text-sm font-medium tracking-tight text-foreground group-hover:text-primary transition-colors",
 						children: e.title
 					}), e.description && /* @__PURE__ */ (0, K.jsx)(b, {
-						className: "text-xs text-muted-foreground font-mono",
+						className: "text-xs text-muted-foreground",
 						children: e.description
 					})]
 				}),
@@ -693,13 +693,13 @@ function Q({ column: e, cards: t, onToggle: n, enableVirtual: i, quickAdd: a, on
 					onClick: () => n(!e.collapsed),
 					children: e.collapsed ? /* @__PURE__ */ (0, K.jsx)(T, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, K.jsx)(r, { className: "h-4 w-4" })
 				}), !e.collapsed && /* @__PURE__ */ (0, K.jsxs)(K.Fragment, { children: [/* @__PURE__ */ (0, K.jsx)("h3", {
-					className: "font-mono text-sm font-semibold tracking-wider text-primary/90 uppercase truncate",
+					className: " text-sm font-semibold tracking-wider text-primary/90 uppercase truncate",
 					children: e.title
 				}), /* @__PURE__ */ (0, K.jsxs)("div", {
 					className: "flex items-center gap-2",
 					children: [
 						/* @__PURE__ */ (0, K.jsxs)("span", {
-							className: q("font-mono text-xs", m ? "text-destructive" : v ? "text-yellow-500" : "text-muted-foreground"),
+							className: q(" text-xs", m ? "text-destructive" : v ? "text-yellow-500" : "text-muted-foreground"),
 							children: [l.length, e.limit && ` / ${e.limit}`]
 						}),
 						m && /* @__PURE__ */ (0, K.jsx)(g, {
@@ -713,7 +713,7 @@ function Q({ column: e, cards: t, onToggle: n, enableVirtual: i, quickAdd: a, on
 			}), e.collapsed && /* @__PURE__ */ (0, K.jsxs)("div", {
 				className: "flex flex-col items-center gap-1",
 				children: [/* @__PURE__ */ (0, K.jsx)("span", {
-					className: "font-mono text-xs font-bold text-primary/90 [writing-mode:vertical-rl] rotate-180",
+					className: " text-xs font-bold text-primary/90 [writing-mode:vertical-rl] rotate-180",
 					children: e.title
 				}), /* @__PURE__ */ (0, K.jsx)(g, {
 					variant: "secondary",

package/dist/{KanbanImpl-BdocXM5T.js → KanbanImpl-bLXoKZb7.js}

@@ -2,10 +2,10 @@ import { r as e, t } from "./plus-CHsXVJSY.js";
 import { a as n, c as r, d as i, f as a, i as o, l as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./sortable.esm-LJG1TjKd.js";
 import * as m from "react";
 import { useDnd as h, useHasDndProvider as g } from "@object-ui/react";
-import { Badge as _, Button as v, Card as y, CardContent as b, CardDescription as x, CardHeader as S, CardTitle as C, Input as w, ScrollArea as T } from "@object-ui/components";
+import { Badge as _, Button as v, Card as y, CardContent as b, CardDescription as x, CardHeader as S, CardTitle as C, Input as w, ScrollArea as T, useResizeObserver as E } from "@object-ui/components";
 //#region src/KanbanImpl.tsx
-var E = e(), D = (...e) => e.filter(Boolean).join(" "), O = "Uncategorized";
-function k(e, t) {
+var D = e(), O = (...e) => e.filter(Boolean).join(" "), k = "Uncategorized";
+function A(e, t) {
 	if (!t || t.length === 0) return {};
 	for (let n of t) {
 		let t = e[n.field];
@@ -32,13 +32,13 @@ function k(e, t) {
 	}
 	return {};
 }
-function A({ card: e, onCardClick: t, conditionalFormatting: n }) {
+function j({ card: e, onCardClick: t, conditionalFormatting: n }) {
 	let { attributes: r, listeners: i, setNodeRef: o, transform: s, transition: c, isDragging: l } = u({ id: e.id }), d = {
 		transform: a.Transform.toString(s),
 		transition: c,
 		opacity: l ? .5 : void 0
-	}, f = k(e, n);
-	return /* @__PURE__ */ (0, E.jsx)("div", {
+	}, f = A(e, n);
+	return /* @__PURE__ */ (0, D.jsx)("div", {
 		ref: o,
 		style: d,
 		...r,
@@ -46,34 +46,34 @@ function A({ card: e, onCardClick: t, conditionalFormatting: n }) {
 		role: "listitem",
 		"aria-label": e.title,
 		onClick: () => t?.(e),
-		children: /* @__PURE__ */ (0, E.jsxs)(y, {
+		children: /* @__PURE__ */ (0, D.jsxs)(y, {
 			className: "mb-2 cursor-grab active:cursor-grabbing border-border border-l-4 border-l-primary/40 bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group touch-manipulation",
 			style: f,
 			children: [
-				e.coverImage && /* @__PURE__ */ (0, E.jsx)("div", {
+				e.coverImage && /* @__PURE__ */ (0, D.jsx)("div", {
 					className: "w-full h-32 overflow-hidden rounded-t-lg",
-					children: /* @__PURE__ */ (0, E.jsx)("img", {
+					children: /* @__PURE__ */ (0, D.jsx)("img", {
 						src: e.coverImage,
 						alt: "",
 						className: "w-full h-full object-cover",
 						loading: "lazy"
 					})
 				}),
-				/* @__PURE__ */ (0, E.jsxs)(S, {
+				/* @__PURE__ */ (0, D.jsxs)(S, {
 					className: "p-2 sm:p-4",
-					children: [/* @__PURE__ */ (0, E.jsx)(C, {
-						className: "text-xs sm:text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors",
+					children: [/* @__PURE__ */ (0, D.jsx)(C, {
+						className: "text-xs sm:text-sm font-medium tracking-tight text-foreground group-hover:text-primary transition-colors",
 						children: e.title
-					}), e.description && /* @__PURE__ */ (0, E.jsx)(x, {
-						className: "text-xs text-muted-foreground font-mono line-clamp-2 sm:line-clamp-none",
+					}), e.description && /* @__PURE__ */ (0, D.jsx)(x, {
+						className: "text-xs text-muted-foreground line-clamp-2 sm:line-clamp-none",
 						children: e.description
 					})]
 				}),
-				e.badges && e.badges.length > 0 && /* @__PURE__ */ (0, E.jsx)(b, {
+				e.badges && e.badges.length > 0 && /* @__PURE__ */ (0, D.jsx)(b, {
 					className: "p-2 sm:p-4 pt-0",
-					children: /* @__PURE__ */ (0, E.jsx)("div", {
+					children: /* @__PURE__ */ (0, D.jsx)("div", {
 						className: "flex flex-wrap gap-1",
-						children: e.badges.map((e, t) => /* @__PURE__ */ (0, E.jsx)(_, {
+						children: e.badges.map((e, t) => /* @__PURE__ */ (0, D.jsx)(_, {
 							variant: e.variant || "default",
 							className: "text-xs",
 							children: e.label
@@ -84,14 +84,14 @@ function A({ card: e, onCardClick: t, conditionalFormatting: n }) {
 		})
 	});
 }
-function j({ columnId: e, onAdd: n }) {
+function M({ columnId: e, onAdd: n }) {
 	let [r, i] = m.useState(!1), [a, o] = m.useState(""), s = m.useRef(null), c = () => {
 		let t = a.trim();
 		t && (n(e, t), o("")), i(!1);
 	};
-	return r ? /* @__PURE__ */ (0, E.jsx)("div", {
+	return r ? /* @__PURE__ */ (0, D.jsx)("div", {
 		className: "mt-2 space-y-2",
-		children: /* @__PURE__ */ (0, E.jsx)(w, {
+		children: /* @__PURE__ */ (0, D.jsx)(w, {
 			ref: s,
 			value: a,
 			onChange: (e) => o(e.target.value),
@@ -103,80 +103,81 @@ function j({ columnId: e, onAdd: n }) {
 			className: "text-sm",
 			autoFocus: !0
 		})
-	}) : /* @__PURE__ */ (0, E.jsxs)(v, {
+	}) : /* @__PURE__ */ (0, D.jsxs)(v, {
 		variant: "ghost",
 		size: "sm",
 		className: "w-full mt-2 text-muted-foreground hover:text-foreground",
 		onClick: () => {
 			i(!0), setTimeout(() => s.current?.focus(), 0);
 		},
-		children: [/* @__PURE__ */ (0, E.jsx)(t, { className: "h-4 w-4 mr-1" }), "Add Card"]
+		children: [/* @__PURE__ */ (0, D.jsx)(t, { className: "h-4 w-4 mr-1" }), "Add Card"]
 	});
 }
-function M({ column: e, cards: t, onCardClick: n, quickAdd: r, onQuickAdd: i, conditionalFormatting: a }) {
-	let s = t || [], { setNodeRef: c } = u({
+function N({ column: e, cards: t, onCardClick: n, quickAdd: r, onQuickAdd: i, conditionalFormatting: a, columnStyle: s }) {
+	let c = t || [], { setNodeRef: l } = u({
 		id: e.id,
 		data: { type: "column" }
-	}), l = e.limit && s.length >= e.limit;
-	return /* @__PURE__ */ (0, E.jsxs)("div", {
-		ref: c,
+	}), d = e.limit && c.length >= e.limit, p = s && s.width != null ? "flex-shrink-0" : "w-[85vw] sm:w-80 flex-shrink-0";
+	return /* @__PURE__ */ (0, D.jsxs)("div", {
+		ref: l,
 		role: "group",
 		"aria-label": e.title,
-		className: D("flex flex-col w-[85vw] sm:w-80 flex-shrink-0 rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl snap-start", e.className),
-		children: [/* @__PURE__ */ (0, E.jsx)("div", {
+		style: s,
+		className: O("flex flex-col rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl snap-start max-h-full min-h-0", p, e.className),
+		children: [/* @__PURE__ */ (0, D.jsx)("div", {
 			className: "p-3 sm:p-4 border-b border-border/50 bg-muted/30 rounded-t-lg",
-			children: /* @__PURE__ */ (0, E.jsxs)("div", {
+			children: /* @__PURE__ */ (0, D.jsxs)("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ (0, E.jsx)("h3", {
+				children: [/* @__PURE__ */ (0, D.jsx)("h3", {
 					id: `kanban-col-${e.id}`,
-					className: "font-mono text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase truncate",
+					className: " text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase truncate",
 					children: e.title
-				}), /* @__PURE__ */ (0, E.jsxs)("div", {
+				}), /* @__PURE__ */ (0, D.jsxs)("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, E.jsxs)(_, {
+					children: [/* @__PURE__ */ (0, D.jsxs)(_, {
 						variant: "secondary",
-						className: "text-xs font-mono tabular-nums",
-						children: [s.length, e.limit && ` / ${e.limit}`]
-					}), l && /* @__PURE__ */ (0, E.jsx)(_, {
+						className: "text-xs tabular-nums",
+						children: [c.length, e.limit && ` / ${e.limit}`]
+					}), d && /* @__PURE__ */ (0, D.jsx)(_, {
 						variant: "destructive",
 						className: "text-xs",
 						children: "Full"
 					})]
 				})]
 			})
-		}), /* @__PURE__ */ (0, E.jsxs)(T, {
+		}), /* @__PURE__ */ (0, D.jsxs)(T, {
 			className: "flex-1 p-4",
-			children: [/* @__PURE__ */ (0, E.jsx)(f, {
-				items: s.map((e) => e.id),
+			children: [/* @__PURE__ */ (0, D.jsx)(f, {
+				items: c.map((e) => e.id),
 				strategy: o,
-				children: /* @__PURE__ */ (0, E.jsxs)("div", {
+				children: /* @__PURE__ */ (0, D.jsxs)("div", {
 					className: "space-y-2",
 					role: "list",
 					"aria-label": `${e.title} cards`,
-					children: [s.length === 0 && /* @__PURE__ */ (0, E.jsx)("div", {
+					children: [c.length === 0 && /* @__PURE__ */ (0, D.jsx)("div", {
 						className: "flex flex-col items-center justify-center py-8 text-muted-foreground/50",
-						children: /* @__PURE__ */ (0, E.jsx)("span", {
-							className: "text-xs font-mono",
+						children: /* @__PURE__ */ (0, D.jsx)("span", {
+							className: "text-xs",
 							children: "No cards"
 						})
-					}), s.map((e) => /* @__PURE__ */ (0, E.jsx)(A, {
+					}), c.map((e) => /* @__PURE__ */ (0, D.jsx)(j, {
 						card: e,
 						onCardClick: n,
 						conditionalFormatting: a
 					}, e.id))]
 				})
-			}), r && i && /* @__PURE__ */ (0, E.jsx)(j, {
+			}), r && i && /* @__PURE__ */ (0, D.jsx)(M, {
 				columnId: e.id,
 				onAdd: i
 			})]
 		})]
 	});
 }
-function N({ children: e }) {
-	return /* @__PURE__ */ (0, E.jsx)(E.Fragment, { children: e(h()) });
+function P({ children: e }) {
+	return /* @__PURE__ */ (0, D.jsx)(D.Fragment, { children: e(h()) });
 }
-function P({ columns: e, onCardMove: t, onCardClick: n, className: r, quickAdd: i, onQuickAdd: a, coverImageField: o, conditionalFormatting: s, swimlaneField: c }) {
-	return g() ? /* @__PURE__ */ (0, E.jsx)(N, { children: (l) => /* @__PURE__ */ (0, E.jsx)(F, {
+function F({ columns: e, onCardMove: t, onCardClick: n, className: r, quickAdd: i, onQuickAdd: a, coverImageField: o, conditionalFormatting: s, swimlaneField: c }) {
+	return g() ? /* @__PURE__ */ (0, D.jsx)(P, { children: (l) => /* @__PURE__ */ (0, D.jsx)(I, {
 		columns: e,
 		onCardMove: t,
 		onCardClick: n,
@@ -187,7 +188,7 @@ function P({ columns: e, onCardMove: t, onCardClick: n, className: r, quickAdd:
 		coverImageField: o,
 		conditionalFormatting: s,
 		swimlaneField: c
-	}) }) : /* @__PURE__ */ (0, E.jsx)(F, {
+	}) }) : /* @__PURE__ */ (0, D.jsx)(I, {
 		columns: e,
 		onCardMove: t,
 		onCardClick: n,
@@ -200,46 +201,46 @@ function P({ columns: e, onCardMove: t, onCardClick: n, className: r, quickAdd:
 		swimlaneField: c
 	});
 }
-function F({ columns: e, onCardMove: t, onCardClick: a, className: u, dnd: h, quickAdd: g, onQuickAdd: _, coverImageField: v, conditionalFormatting: y, swimlaneField: b }) {
-	let [x, S] = m.useState(null), C = b ? `objectui:kanban-collapsed:${b}` : null, [w, T] = m.useState(() => {
-		if (!C) return /* @__PURE__ */ new Set();
+function I({ columns: e, onCardMove: t, onCardClick: a, className: u, dnd: h, quickAdd: g, onQuickAdd: _, coverImageField: v, conditionalFormatting: y, swimlaneField: b }) {
+	let [x, S] = m.useState(null), C = m.useRef(null), { width: w } = E(C), T = m.useMemo(() => w ? w < 480 ? { width: Math.max(w - 32, 220) } : w < 720 ? { width: 280 } : { width: 320 } : {}, [w]), A = b ? `objectui:kanban-collapsed:${b}` : null, [M, P] = m.useState(() => {
+		if (!A) return /* @__PURE__ */ new Set();
 		try {
-			let e = localStorage.getItem(C);
+			let e = localStorage.getItem(A);
 			if (e) {
 				let t = JSON.parse(e);
 				if (Array.isArray(t)) return new Set(t.filter((e) => typeof e == "string"));
 			}
 		} catch {}
 		return /* @__PURE__ */ new Set();
-	}), k = m.useMemo(() => (e || []).map((e) => ({
+	}), F = m.useMemo(() => (e || []).map((e) => ({
 		...e,
 		cards: e.cards || []
-	})), [e]), [j, N] = m.useState(k);
+	})), [e]), [I, L] = m.useState(F);
 	m.useEffect(() => {
-		N(k);
-	}, [k]);
-	let P = m.useMemo(() => {
+		L(F);
+	}, [F]);
+	let R = m.useMemo(() => {
 		if (!b) return null;
-		let e = j.flatMap((e) => e.cards), t = /* @__PURE__ */ new Set();
+		let e = I.flatMap((e) => e.cards), t = /* @__PURE__ */ new Set();
 		return e.forEach((e) => {
 			let n = e[b];
-			t.add(n == null ? O : String(n));
+			t.add(n == null ? k : String(n));
 		}), Array.from(t).sort();
-	}, [j, b]), F = m.useCallback((e) => {
-		T((t) => {
+	}, [I, b]), z = m.useCallback((e) => {
+		P((t) => {
 			let n = new Set(t);
-			if (n.has(e) ? n.delete(e) : n.add(e), C) try {
-				localStorage.setItem(C, JSON.stringify([...n]));
+			if (n.has(e) ? n.delete(e) : n.add(e), A) try {
+				localStorage.setItem(A, JSON.stringify([...n]));
 			} catch {}
 			return n;
 		});
-	}, [C]), I = i(p(d, { activationConstraint: { distance: 5 } }), p(r, { activationConstraint: {
+	}, [A]), B = i(p(d, { activationConstraint: { distance: 5 } }), p(r, { activationConstraint: {
 		delay: 200,
 		tolerance: 5
-	} })), L = (e) => {
-		let { active: t } = e, n = z(t.id);
+	} })), V = (e) => {
+		let { active: t } = e, n = U(t.id);
 		if (S(n), h && n) {
-			let e = B(n.id);
+			let e = W(n.id);
 			e && h.startDrag({
 				id: n.id,
 				type: "kanban-card",
@@ -247,7 +248,7 @@ function F({ columns: e, onCardMove: t, onCardClick: a, className: u, dnd: h, qu
 				sourceId: e.id
 			});
 		}
-	}, R = (e) => {
+	}, H = (e) => {
 		let { active: n, over: r } = e;
 		if (S(null), !r) {
 			h && h.endDrag();
@@ -258,20 +259,20 @@ function F({ columns: e, onCardMove: t, onCardClick: a, className: u, dnd: h, qu
 			h && h.endDrag();
 			return;
 		}
-		let o = B(i), s = B(a) || V(a);
+		let o = W(i), s = W(a) || G(a);
 		if (!o || !s) {
 			h && h.endDrag();
 			return;
 		}
 		if (o.id === s.id) {
 			let e = [...o.cards], t = c(e, e.findIndex((e) => e.id === i), e.findIndex((e) => e.id === a));
-			N((e) => e.map((e) => e.id === o.id ? {
+			L((e) => e.map((e) => e.id === o.id ? {
 				...e,
 				cards: t
 			} : e));
 		} else {
 			let e = [...o.cards], n = [...s.cards], r = e.findIndex((e) => e.id === i), c = a === s.id ? n.length : n.findIndex((e) => e.id === a), [l] = e.splice(r, 1);
-			n.splice(c, 0, l), N((t) => t.map((t) => t.id === o.id ? {
+			n.splice(c, 0, l), L((t) => t.map((t) => t.id === o.id ? {
 				...t,
 				cards: e
 			} : t.id === s.id ? {
@@ -280,36 +281,37 @@ function F({ columns: e, onCardMove: t, onCardClick: a, className: u, dnd: h, qu
 			} : t)), t && t(i, o.id, s.id, c);
 		}
 		h && h.endDrag(s.id);
-	}, z = m.useCallback((e) => {
-		for (let t of j) {
+	}, U = m.useCallback((e) => {
+		for (let t of I) {
 			let n = t.cards.find((t) => t.id === e);
 			if (n) return n;
 		}
 		return null;
-	}, [j]), B = m.useCallback((e) => j.find((t) => t.cards.some((t) => t.id === e)) || null, [j]), V = m.useCallback((e) => j.find((t) => t.id === e) || null, [j]);
-	return /* @__PURE__ */ (0, E.jsxs)(n, {
-		sensors: I,
+	}, [I]), W = m.useCallback((e) => I.find((t) => t.cards.some((t) => t.id === e)) || null, [I]), G = m.useCallback((e) => I.find((t) => t.id === e) || null, [I]);
+	return /* @__PURE__ */ (0, D.jsxs)(n, {
+		sensors: B,
 		collisionDetection: s,
-		onDragStart: L,
-		onDragEnd: R,
-		children: [
-			/* @__PURE__ */ (0, E.jsxs)("div", {
+		onDragStart: V,
+		onDragEnd: H,
+		children: [/* @__PURE__ */ (0, D.jsxs)("div", {
+			ref: C,
+			className: "flex flex-col min-w-0 min-h-0 h-full",
+			children: [/* @__PURE__ */ (0, D.jsxs)("div", {
 				className: "flex sm:hidden items-center justify-between px-3 pb-2 text-xs text-muted-foreground",
-				children: [/* @__PURE__ */ (0, E.jsxs)("span", { children: [j.length, " columns"] }), /* @__PURE__ */ (0, E.jsx)("span", { children: "← Swipe to navigate →" })]
-			}),
-			P ? /* @__PURE__ */ (0, E.jsxs)("div", {
-				className: D("flex flex-col gap-1 p-2 sm:p-4 min-w-0 overflow-hidden", u),
+				children: [/* @__PURE__ */ (0, D.jsxs)("span", { children: [I.length, " columns"] }), /* @__PURE__ */ (0, D.jsx)("span", { children: "← Swipe to navigate →" })]
+			}), R ? /* @__PURE__ */ (0, D.jsxs)("div", {
+				className: O("flex flex-col gap-1 p-2 sm:p-4 min-w-0 overflow-hidden", u),
 				role: "region",
 				"aria-label": "Kanban board with swimlanes",
-				children: [/* @__PURE__ */ (0, E.jsx)("div", {
+				children: [/* @__PURE__ */ (0, D.jsx)("div", {
 					className: "flex gap-3 sm:gap-4 pl-36 sm:pl-44 overflow-x-auto",
-					children: j.map((e) => /* @__PURE__ */ (0, E.jsxs)("div", {
+					children: I.map((e) => /* @__PURE__ */ (0, D.jsxs)("div", {
 						className: "w-[85vw] sm:w-80 flex-shrink-0 text-center",
-						children: [/* @__PURE__ */ (0, E.jsx)("span", {
-							className: "font-mono text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase",
+						children: [/* @__PURE__ */ (0, D.jsx)("span", {
+							className: " text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase",
 							children: e.title
-						}), /* @__PURE__ */ (0, E.jsxs)("span", {
-							className: "ml-2 font-mono text-xs text-muted-foreground",
+						}), /* @__PURE__ */ (0, D.jsxs)("span", {
+							className: "ml-2 text-xs text-muted-foreground",
 							children: [
 								"(",
 								e.cards.length,
@@ -317,25 +319,25 @@ function F({ columns: e, onCardMove: t, onCardClick: a, className: u, dnd: h, qu
 							]
 						})]
 					}, e.id))
-				}), P.map((e) => {
-					let t = w.has(e), n = j.reduce((t, n) => t + n.cards.filter((t) => (t[b] == null ? O : String(t[b])) === e).length, 0);
-					return /* @__PURE__ */ (0, E.jsxs)("div", {
+				}), R.map((e) => {
+					let t = M.has(e), n = I.reduce((t, n) => t + n.cards.filter((t) => (t[b] == null ? k : String(t[b])) === e).length, 0);
+					return /* @__PURE__ */ (0, D.jsxs)("div", {
 						className: "border rounded-lg bg-muted/10",
-						children: [/* @__PURE__ */ (0, E.jsxs)("button", {
+						children: [/* @__PURE__ */ (0, D.jsxs)("button", {
 							className: "w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-muted/30 transition-colors",
-							onClick: () => F(e),
+							onClick: () => z(e),
 							"aria-expanded": !t,
 							children: [
-								/* @__PURE__ */ (0, E.jsx)("span", {
-									className: D("transition-transform text-xs", t ? "" : "rotate-90"),
+								/* @__PURE__ */ (0, D.jsx)("span", {
+									className: O("transition-transform text-xs", t ? "" : "rotate-90"),
 									children: "▶"
 								}),
-								/* @__PURE__ */ (0, E.jsx)("span", {
-									className: "font-mono text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+								/* @__PURE__ */ (0, D.jsx)("span", {
+									className: " text-xs font-semibold text-muted-foreground uppercase tracking-wider",
 									children: e
 								}),
-								/* @__PURE__ */ (0, E.jsxs)("span", {
-									className: "font-mono text-xs text-muted-foreground",
+								/* @__PURE__ */ (0, D.jsxs)("span", {
+									className: " text-xs text-muted-foreground",
 									children: [
 										"(",
 										n,
@@ -343,20 +345,20 @@ function F({ columns: e, onCardMove: t, onCardClick: a, className: u, dnd: h, qu
 									]
 								})
 							]
-						}), !t && /* @__PURE__ */ (0, E.jsx)("div", {
+						}), !t && /* @__PURE__ */ (0, D.jsx)("div", {
 							className: "flex gap-3 sm:gap-4 overflow-x-auto px-2 pb-3 pl-36 sm:pl-44",
-							children: j.map((t) => {
-								let n = t.cards.filter((t) => (t[b] == null ? O : String(t[b])) === e);
-								return /* @__PURE__ */ (0, E.jsx)("div", {
+							children: I.map((t) => {
+								let n = t.cards.filter((t) => (t[b] == null ? k : String(t[b])) === e);
+								return /* @__PURE__ */ (0, D.jsx)("div", {
 									className: "w-[85vw] sm:w-80 flex-shrink-0 min-h-[60px] rounded-md bg-card/20 p-2",
-									children: /* @__PURE__ */ (0, E.jsx)(f, {
+									children: /* @__PURE__ */ (0, D.jsx)(f, {
 										items: n.map((e) => e.id),
 										strategy: o,
-										children: /* @__PURE__ */ (0, E.jsx)("div", {
+										children: /* @__PURE__ */ (0, D.jsx)("div", {
 											className: "space-y-2",
 											role: "list",
 											"aria-label": `${t.title} - ${e} cards`,
-											children: n.map((e) => /* @__PURE__ */ (0, E.jsx)(A, {
+											children: n.map((e) => /* @__PURE__ */ (0, D.jsx)(j, {
 												card: e,
 												onCardClick: a,
 												conditionalFormatting: y
@@ -368,29 +370,29 @@ function F({ columns: e, onCardMove: t, onCardClick: a, className: u, dnd: h, qu
 						})]
 					}, e);
 				})]
-			}) : /* @__PURE__ */ (0, E.jsx)("div", {
-				className: D("flex gap-3 sm:gap-4 overflow-x-auto snap-x snap-mandatory p-2 sm:p-4 bg-muted/10 rounded-lg [-webkit-overflow-scrolling:touch] min-w-0", u),
+			}) : /* @__PURE__ */ (0, D.jsx)("div", {
+				className: O("flex gap-3 sm:gap-4 overflow-x-auto snap-x snap-mandatory p-2 sm:p-4 bg-muted/10 rounded-lg [-webkit-overflow-scrolling:touch] min-w-0 min-h-0 h-full", u),
 				role: "region",
 				"aria-label": "Kanban board",
-				children: j.map((e) => /* @__PURE__ */ (0, E.jsx)(M, {
+				children: I.map((e) => /* @__PURE__ */ (0, D.jsx)(N, {
 					column: e,
 					cards: e.cards,
 					onCardClick: a,
 					quickAdd: g,
 					onQuickAdd: _,
-					conditionalFormatting: y
+					conditionalFormatting: y,
+					columnStyle: T
 				}, e.id))
-			}),
-			/* @__PURE__ */ (0, E.jsx)(l, { children: /* @__PURE__ */ (0, E.jsx)("div", {
-				"aria-live": "assertive",
-				"aria-label": x ? `Dragging ${x.title}` : void 0,
-				children: x ? /* @__PURE__ */ (0, E.jsx)(A, {
-					card: x,
-					conditionalFormatting: y
-				}) : null
-			}) })
-		]
+			})]
+		}), /* @__PURE__ */ (0, D.jsx)(l, { children: /* @__PURE__ */ (0, D.jsx)("div", {
+			"aria-live": "assertive",
+			"aria-label": x ? `Dragging ${x.title}` : void 0,
+			children: x ? /* @__PURE__ */ (0, D.jsx)(j, {
+				card: x,
+				conditionalFormatting: y
+			}) : null
+		}) })]
 	});
 }
 //#endregion
-export { P as default };
+export { F as default };