@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/compare-bars.mjs

@@ -0,0 +1,118 @@
+import { cn } from "@corensystem/coren-utils";
+import { TrendingDown, TrendingUp } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/compare-bars.tsx
+const SIZES = {
+	compact: {
+		gap: "wwc:gap-2",
+		hero: "wwc:text-xl",
+		pill: "wwc:gap-0.5 wwc:rounded wwc:px-1.5 wwc:py-0.5",
+		pillText: "wwc:text-[11px]",
+		pillIcon: "wwc:size-3",
+		legendText: "wwc:text-[10px]",
+		legendDot: "wwc:size-1.5",
+		barGap: "wwc:gap-0.5",
+		bar: "wwc:h-2"
+	},
+	default: {
+		gap: "wwc:gap-2.5",
+		hero: "wwc:text-2xl",
+		pill: "wwc:gap-0.5 wwc:rounded wwc:px-2 wwc:py-0.5",
+		pillText: "wwc:text-xs",
+		pillIcon: "wwc:size-3.5",
+		legendText: "wwc:text-xs",
+		legendDot: "wwc:size-2",
+		barGap: "wwc:gap-1",
+		bar: "wwc:h-2.5"
+	}
+};
+/**
+* The dual-bar comparison primitive: two hero percentages (primary vs secondary) with a variance pill
+* between them, a two-item legend, and a pair of stacked progress bars. This is the presentational core
+* shared by the `ProgressComparison` widget — use it directly when you just need the bars block without
+* the surrounding card/stats/header.
+*/
+const CompareBars = React.forwardRef(({ className, primary, secondary, variance, size = "compact", ...props }, ref) => {
+	const sz = SIZES[size];
+	const delta = variance ?? primary.value - secondary.value;
+	const negative = delta < 0;
+	const positive = delta > 0;
+	const TrendIcon = negative ? TrendingDown : TrendingUp;
+	const clamp = (v) => Math.min(100, Math.max(0, v));
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:flex-col", sz.gap, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: cn("wwc:font-bold wwc:leading-none wwc:text-foreground", sz.hero),
+						children: [primary.value, "%"]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("wwc:flex wwc:items-center", sz.pill, negative ? "wwc:bg-destructive/10 wwc:text-destructive" : positive ? "wwc:bg-emerald-50 wwc:text-emerald-600" : "wwc:bg-muted wwc:text-muted-foreground"),
+						children: [
+							/* @__PURE__ */ jsx(TrendIcon, { className: sz.pillIcon }),
+							/* @__PURE__ */ jsxs("span", {
+								className: cn("wwc:font-semibold", sz.pillText),
+								children: [
+									delta > 0 ? "+" : "",
+									delta,
+									"%"
+								]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: sz.pillText,
+								children: "variance"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn("wwc:font-bold wwc:leading-none wwc:text-zinc-500", sz.hero),
+						children: [secondary.value, "%"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", { className: cn("wwc:rounded-sm wwc:bg-primary", sz.legendDot) }), /* @__PURE__ */ jsx("span", {
+						className: cn("wwc:text-foreground", sz.legendText),
+						children: primary.label
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", { className: cn("wwc:rounded-sm wwc:bg-zinc-500", sz.legendDot) }), /* @__PURE__ */ jsx("span", {
+						className: cn("wwc:text-zinc-500", sz.legendText),
+						children: secondary.label
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("wwc:flex wwc:flex-col", sz.barGap),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("wwc:w-full wwc:overflow-hidden wwc:rounded-sm wwc:bg-muted", sz.bar),
+					children: /* @__PURE__ */ jsx("div", {
+						className: "wwc:h-full wwc:rounded-sm wwc:bg-primary",
+						style: { width: `${clamp(primary.value)}%` }
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("wwc:w-full wwc:overflow-hidden wwc:rounded-sm wwc:bg-muted", sz.bar),
+					children: /* @__PURE__ */ jsx("div", {
+						className: "wwc:h-full wwc:rounded-sm wwc:bg-zinc-500/40",
+						style: { width: `${clamp(secondary.value)}%` }
+					})
+				})]
+			})
+		]
+	});
+});
+CompareBars.displayName = "CompareBars";
+//#endregion
+export { CompareBars };
+
+//# sourceMappingURL=compare-bars.mjs.map

package/dist/compare-bars.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-bars.mjs","names":[],"sources":["../src/compare-bars.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {TrendingDown, TrendingUp} from \"lucide-react\";\nimport * as React from \"react\";\n\n/** One source in the comparison (e.g. Approved / Planned, actual / baseline). */\nexport interface CompareBarsSource {\n\t/** Legend label, e.g. \"Approved\". */\n\tlabel: string;\n\t/** Percentage 0–100. */\n\tvalue: number;\n}\n\nexport interface CompareBarsProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Left / primary source, rendered dark — most commonly the actual / approved value. */\n\tprimary: CompareBarsSource;\n\t/** Right / secondary source, rendered lighter — most commonly the planned / baseline value. */\n\tsecondary: CompareBarsSource;\n\t/** Variance shown in the pill. Defaults to `primary.value - secondary.value`. */\n\tvariance?: number;\n\t/** Density. `compact` (default) matches the ProgressComparison panel; `default` is a touch larger. */\n\tsize?: \"compact\" | \"default\";\n}\n\ninterface Sz {\n\tgap: string;\n\thero: string;\n\tpill: string;\n\tpillText: string;\n\tpillIcon: string;\n\tlegendText: string;\n\tlegendDot: string;\n\tbarGap: string;\n\tbar: string;\n}\n\nconst SIZES: Record<\"compact\" | \"default\", Sz> = {\n\tcompact: {\n\t\tgap: \"wwc:gap-2\",\n\t\thero: \"wwc:text-xl\",\n\t\tpill: \"wwc:gap-0.5 wwc:rounded wwc:px-1.5 wwc:py-0.5\",\n\t\tpillText: \"wwc:text-[11px]\",\n\t\tpillIcon: \"wwc:size-3\",\n\t\tlegendText: \"wwc:text-[10px]\",\n\t\tlegendDot: \"wwc:size-1.5\",\n\t\tbarGap: \"wwc:gap-0.5\",\n\t\tbar: \"wwc:h-2\",\n\t},\n\tdefault: {\n\t\tgap: \"wwc:gap-2.5\",\n\t\thero: \"wwc:text-2xl\",\n\t\tpill: \"wwc:gap-0.5 wwc:rounded wwc:px-2 wwc:py-0.5\",\n\t\tpillText: \"wwc:text-xs\",\n\t\tpillIcon: \"wwc:size-3.5\",\n\t\tlegendText: \"wwc:text-xs\",\n\t\tlegendDot: \"wwc:size-2\",\n\t\tbarGap: \"wwc:gap-1\",\n\t\tbar: \"wwc:h-2.5\",\n\t},\n};\n\n/**\n * The dual-bar comparison primitive: two hero percentages (primary vs secondary) with a variance pill\n * between them, a two-item legend, and a pair of stacked progress bars. This is the presentational core\n * shared by the `ProgressComparison` widget — use it directly when you just need the bars block without\n * the surrounding card/stats/header.\n */\nconst CompareBars = React.forwardRef<HTMLDivElement, CompareBarsProps>(\n\t({className, primary, secondary, variance, size = \"compact\", ...props}, ref) => {\n\t\tconst sz = SIZES[size];\n\t\tconst delta = variance ?? primary.value - secondary.value;\n\t\tconst negative = delta < 0;\n\t\tconst positive = delta > 0;\n\t\tconst TrendIcon = negative ? TrendingDown : TrendingUp;\n\t\tconst clamp = (v: number) => Math.min(100, Math.max(0, v));\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"wwc:flex wwc:flex-col\", sz.gap, className)} {...props}>\n\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-2\">\n\t\t\t\t\t<span className={cn(\"wwc:font-bold wwc:leading-none wwc:text-foreground\", sz.hero)}>{primary.value}%</span>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:flex wwc:items-center\",\n\t\t\t\t\t\t\tsz.pill,\n\t\t\t\t\t\t\tnegative\n\t\t\t\t\t\t\t\t? \"wwc:bg-destructive/10 wwc:text-destructive\"\n\t\t\t\t\t\t\t\t: positive\n\t\t\t\t\t\t\t\t\t? \"wwc:bg-emerald-50 wwc:text-emerald-600\"\n\t\t\t\t\t\t\t\t\t: \"wwc:bg-muted wwc:text-muted-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TrendIcon className={sz.pillIcon} />\n\t\t\t\t\t\t<span className={cn(\"wwc:font-semibold\", sz.pillText)}>\n\t\t\t\t\t\t\t{delta > 0 ? \"+\" : \"\"}\n\t\t\t\t\t\t\t{delta}%\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className={sz.pillText}>variance</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span className={cn(\"wwc:font-bold wwc:leading-none wwc:text-zinc-500\", sz.hero)}>{secondary.value}%</span>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-1.5\">\n\t\t\t\t\t\t<span className={cn(\"wwc:rounded-sm wwc:bg-primary\", sz.legendDot)} />\n\t\t\t\t\t\t<span className={cn(\"wwc:text-foreground\", sz.legendText)}>{primary.label}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-1.5\">\n\t\t\t\t\t\t<span className={cn(\"wwc:rounded-sm wwc:bg-zinc-500\", sz.legendDot)} />\n\t\t\t\t\t\t<span className={cn(\"wwc:text-zinc-500\", sz.legendText)}>{secondary.label}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className={cn(\"wwc:flex wwc:flex-col\", sz.barGap)}>\n\t\t\t\t\t<div className={cn(\"wwc:w-full wwc:overflow-hidden wwc:rounded-sm wwc:bg-muted\", sz.bar)}>\n\t\t\t\t\t\t<div className=\"wwc:h-full wwc:rounded-sm wwc:bg-primary\" style={{width: `${clamp(primary.value)}%`}} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={cn(\"wwc:w-full wwc:overflow-hidden wwc:rounded-sm wwc:bg-muted\", sz.bar)}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"wwc:h-full wwc:rounded-sm wwc:bg-zinc-500/40\"\n\t\t\t\t\t\t\tstyle={{width: `${clamp(secondary.value)}%`}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nCompareBars.displayName = \"CompareBars\";\n\nexport {CompareBars};\n"],"mappings":";;;;;AAmCA,MAAM,QAA2C;CAChD,SAAS;EACR,KAAK;EACL,MAAM;EACN,MAAM;EACN,UAAU;EACV,UAAU;EACV,YAAY;EACZ,WAAW;EACX,QAAQ;EACR,KAAK;CACN;CACA,SAAS;EACR,KAAK;EACL,MAAM;EACN,MAAM;EACN,UAAU;EACV,UAAU;EACV,YAAY;EACZ,WAAW;EACX,QAAQ;EACR,KAAK;CACN;AACD;;;;;;;AAQA,MAAM,cAAc,MAAM,YACxB,EAAC,WAAW,SAAS,WAAW,UAAU,OAAO,WAAW,GAAG,SAAQ,QAAQ;CAC/E,MAAM,KAAK,MAAM;CACjB,MAAM,QAAQ,YAAY,QAAQ,QAAQ,UAAU;CACpD,MAAM,WAAW,QAAQ;CACzB,MAAM,WAAW,QAAQ;CACzB,MAAM,YAAY,WAAW,eAAe;CAC5C,MAAM,SAAS,MAAc,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC;CACzD,OACC,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,yBAAyB,GAAG,KAAK,SAAS;EAAG,GAAI;EAA9E,UAAA;GACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACC,qBAAC,QAAD;MAAM,WAAW,GAAG,sDAAsD,GAAG,IAAI;MAAjF,UAAA,CAAqF,QAAQ,OAAM,GAAO;;KAC1G,qBAAC,OAAD;MACC,WAAW,GACV,6BACA,GAAG,MACH,WACG,+CACA,WACC,2CACA,wCACL;MATD,UAAA;OAWC,oBAAC,WAAD,EAAW,WAAW,GAAG,SAAW,CAAA;OACpC,qBAAC,QAAD;QAAM,WAAW,GAAG,qBAAqB,GAAG,QAAQ;QAApD,UAAA;SACE,QAAQ,IAAI,MAAM;SAClB;SAAM;QACF;;OACN,oBAAC,QAAD;QAAM,WAAW,GAAG;QAAU,UAAA;OAAc,CAAA;MACxC;;KACL,qBAAC,QAAD;MAAM,WAAW,GAAG,oDAAoD,GAAG,IAAI;MAA/E,UAAA,CAAmF,UAAU,OAAM,GAAO;;IACtG;;GAEL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,oBAAC,QAAD,EAAM,WAAW,GAAG,iCAAiC,GAAG,SAAS,EAAI,CAAA,GACrE,oBAAC,QAAD;MAAM,WAAW,GAAG,uBAAuB,GAAG,UAAU;MAAI,UAAA,QAAQ;KAAY,CAAA,CAC5E;IACL,CAAA,GAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,oBAAC,QAAD,EAAM,WAAW,GAAG,kCAAkC,GAAG,SAAS,EAAI,CAAA,GACtE,oBAAC,QAAD;MAAM,WAAW,GAAG,qBAAqB,GAAG,UAAU;MAAI,UAAA,UAAU;KAAY,CAAA,CAC5E;IACD,CAAA,CAAA;;GAEL,qBAAC,OAAD;IAAK,WAAW,GAAG,yBAAyB,GAAG,MAAM;IAArD,UAAA,CACC,oBAAC,OAAD;KAAK,WAAW,GAAG,8DAA8D,GAAG,GAAG;KACtF,UAAA,oBAAC,OAAD;MAAK,WAAU;MAA2C,OAAO,EAAC,OAAO,GAAG,MAAM,QAAQ,KAAK,EAAE,GAAE;KAAI,CAAA;IACnG,CAAA,GACL,oBAAC,OAAD;KAAK,WAAW,GAAG,8DAA8D,GAAG,GAAG;KACtF,UAAA,oBAAC,OAAD;MACC,WAAU;MACV,OAAO,EAAC,OAAO,GAAG,MAAM,UAAU,KAAK,EAAE,GAAE;KAC3C,CAAA;IACG,CAAA,CACD;;EACD;;AAEP,CACD;AACA,YAAY,cAAc"}

package/dist/compare-view.d.mts

@@ -0,0 +1,75 @@
+import * as React from "react";
+//#region src/compare-view.d.ts
+/** How the two sources are compared. Mirrors the map toolbar's `SplitMode`. */
+export type CompareMode = "side-by-side" | "swipe";
+export interface CompareViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** First source (e.g. as-planned / yesterday). Fills the box; the two sources should be geo-aligned. */
+  before: React.ReactNode;
+  /** Second source (e.g. as-built / today). Omit to show `before` alone as a single pan/zoom map. */
+  after?: React.ReactNode;
+  /** `swipe` (default) overlays the two with a draggable reveal divider; `side-by-side` shows two panes. */
+  mode?: CompareMode;
+  /** Divider position as a percentage 0–100 (swipe mode). Controlled when provided. */
+  position?: number;
+  /** Uncontrolled starting divider position. Default 50. */
+  defaultPosition?: number;
+  /** Called with the new divider position while dragging. */
+  onPositionChange?: (position: number) => void;
+  /** Optional chip labels for each source. */
+  beforeLabel?: React.ReactNode;
+  afterLabel?: React.ReactNode;
+  /** Make the content pannable (drag) and zoomable (wheel). The two sources stay geo-aligned. */
+  interactive?: boolean;
+  /** Initial zoom (only when `interactive`). Default 1 (fit). */
+  defaultScale?: number;
+  /** Zoom bounds (only when `interactive`). Default 1 → 6. */
+  minScale?: number;
+  maxScale?: number;
+  /**
+   * Side-by-side + interactive: when locked, both panes pan/zoom together in the same coordinates.
+   * Controlled when provided; the lock toggle sits on the dividing line.
+   */
+  locked?: boolean;
+  defaultLocked?: boolean;
+  onLockedChange?: (locked: boolean) => void;
+  /** Reports the region currently visible (fractions 0–1 of the content) as it pans/zooms — feed a `MapMinimap`. */
+  onViewChange?: (view: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }) => void;
+  /**
+   * Side-by-side only: reports the *after* pane's visible region when it moves independently of the
+   * *before* pane (i.e. while the divider lock is open) — feed a second `MapMinimap`.
+   */
+  onViewChangeAfter?: (view: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }) => void;
+  /** Imperative handle for driving the view (e.g. from a minimap): `.setCenter(x, y)` recenters on a fraction. */
+  viewControllerRef?: React.MutableRefObject<CompareViewApi | null>;
+}
+/** Imperative controls exposed via `viewControllerRef`. */
+export interface CompareViewApi {
+  /** Recenter the view on a point given as fractions (0–1) of the content. */
+  setCenter: (x: number, y: number) => void;
+  /** Zoom about the center by a factor (>1 zooms in, <1 zooms out); clamped to the scale bounds. */
+  zoomBy: (factor: number) => void;
+  /** Side-by-side + unlocked: recenter the *after* pane on a fraction (0–1). Falls back to both panes when synced. */
+  setCenterAfter: (x: number, y: number) => void;
+  /** Side-by-side + unlocked: zoom the *after* pane about its center. Falls back to both panes when synced. */
+  zoomByAfter: (factor: number) => void;
+}
+/**
+ * Compares two geo-aligned sources. `swipe` stacks them and reveals more of one as you drag a
+ * center divider; `side-by-side` splits the box into two panes. With `interactive`, the content
+ * pans (drag) and zooms (wheel); in side-by-side a lock on the divider keeps both panes in sync.
+ * Pass any nodes (images, maps, canvases) for `before`/`after`.
+ */
+declare const CompareView: React.ForwardRefExoticComponent<CompareViewProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CompareView };
+//# sourceMappingURL=compare-view.d.mts.map

package/dist/compare-view.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-view.d.mts","names":[],"sources":["../src/compare-view.tsx"],"mappings":";;;YAKY;iBAEK,yBAAyB,KAAK,MAAM,eAAe;;EAEnE,QAAQ,MAAM;;EAEd,QAAQ,MAAM;;EAEd,OAAO;;EAEP;;EAEA;;EAEA,oBAAoB;;EAEpB,cAAc,MAAM;EACpB,aAAa,MAAM;;EAGnB;;EAEA;;EAEA;EACA;;;;;EAKA;EACA;EACA,kBAAkB;;EAGlB,gBAAgB;IAAO;IAAW;IAAW;IAAe;;;;;;EAK5D,qBAAqB;IAAO;IAAW;IAAW;IAAe;;;EAEjE,oBAAoB,MAAM,iBAAiB;;;iBAI3B;;EAEhB,YAAY,WAAW;;EAEvB,SAAS;;EAET,iBAAiB,WAAW;;EAE5B,cAAc;;;;;;;;cA8BT,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/compare-view.mjs

@@ -0,0 +1,383 @@
+import { cn } from "@corensystem/coren-utils";
+import { ChevronLeft, ChevronRight, Lock, LockOpen } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/compare-view.tsx
+const clampPos = (n) => Math.min(100, Math.max(0, n));
+function CornerLabel({ side, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("wwc:pointer-events-none wwc:absolute wwc:top-2 wwc:z-30 wwc:rounded-md wwc:bg-card/85 wwc:px-2 wwc:py-0.5 wwc:text-xs wwc:font-medium wwc:text-foreground wwc:shadow-sm wwc:backdrop-blur", side === "start" ? "wwc:left-2" : "wwc:right-2"),
+		children
+	});
+}
+/**
+* Compares two geo-aligned sources. `swipe` stacks them and reveals more of one as you drag a
+* center divider; `side-by-side` splits the box into two panes. With `interactive`, the content
+* pans (drag) and zooms (wheel); in side-by-side a lock on the divider keeps both panes in sync.
+* Pass any nodes (images, maps, canvases) for `before`/`after`.
+*/
+const CompareView = React.forwardRef(({ className, before, after, mode = "swipe", position: positionProp, defaultPosition = 50, onPositionChange, beforeLabel, afterLabel, interactive = false, defaultScale = 1, minScale = 1, maxScale = 6, locked: lockedProp, defaultLocked = true, onLockedChange, onViewChange, onViewChangeAfter, viewControllerRef, ...rest }, ref) => {
+	const [posInternal, setPosInternal] = React.useState(defaultPosition);
+	const position = positionProp ?? posInternal;
+	const setPosition = (p) => {
+		if (positionProp === void 0) setPosInternal(p);
+		onPositionChange?.(p);
+	};
+	const [lockedInternal, setLockedInternal] = React.useState(defaultLocked);
+	const locked = lockedProp ?? lockedInternal;
+	const setLocked = (l) => {
+		if (lockedProp === void 0) setLockedInternal(l);
+		onLockedChange?.(l);
+	};
+	const init = {
+		x: 0,
+		y: 0,
+		scale: defaultScale
+	};
+	const [tA, setTA] = React.useState(init);
+	const [tB, setTB] = React.useState(init);
+	const vpA = React.useRef(null);
+	const vpB = React.useRef(null);
+	const dividerDrag = React.useRef(false);
+	const pan = React.useRef(null);
+	const live = React.useRef({
+		tA,
+		tB,
+		locked,
+		mode,
+		minScale,
+		maxScale,
+		interactive,
+		position
+	});
+	live.current = {
+		tA,
+		tB,
+		locked,
+		mode,
+		minScale,
+		maxScale,
+		interactive,
+		position
+	};
+	const clampX = React.useCallback((t, rect) => {
+		const { minScale: mn, maxScale: mx } = live.current;
+		const scale = Math.min(mx, Math.max(mn, t.scale));
+		const minX = Math.min(0, rect.width * (1 - scale));
+		const minY = Math.min(0, rect.height * (1 - scale));
+		return {
+			scale,
+			x: Math.min(0, Math.max(minX, t.x)),
+			y: Math.min(0, Math.max(minY, t.y))
+		};
+	}, []);
+	const commit = React.useCallback((side, t) => {
+		if (live.current.mode === "swipe" || live.current.locked) {
+			setTA(t);
+			setTB(t);
+		} else if (side === "a") setTA(t);
+		else setTB(t);
+	}, []);
+	const updateDivider = React.useCallback((clientX) => {
+		const rect = vpA.current?.getBoundingClientRect();
+		if (rect) setPosition(clampPos((clientX - rect.left) / rect.width * 100));
+	}, []);
+	React.useEffect(() => {
+		const move = (e) => {
+			if (dividerDrag.current) {
+				updateDivider(e.clientX);
+				return;
+			}
+			const p = pan.current;
+			if (!p || !live.current.interactive) return;
+			const rect = (p.side === "a" ? vpA : vpB).current?.getBoundingClientRect();
+			if (!rect) return;
+			const cur = p.side === "a" ? live.current.tA : live.current.tB;
+			commit(p.side, clampX({
+				x: p.ox + (e.clientX - p.sx),
+				y: p.oy + (e.clientY - p.sy),
+				scale: cur.scale
+			}, rect));
+		};
+		const up = () => {
+			dividerDrag.current = false;
+			pan.current = null;
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+		window.addEventListener("pointercancel", up);
+		return () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			window.removeEventListener("pointercancel", up);
+		};
+	}, [
+		clampX,
+		commit,
+		updateDivider
+	]);
+	React.useEffect(() => {
+		if (!interactive) return;
+		const makeWheel = (side, el) => (e) => {
+			e.preventDefault();
+			const rect = el.getBoundingClientRect();
+			const cx = e.clientX - rect.left;
+			const cy = e.clientY - rect.top;
+			const cur = side === "a" ? live.current.tA : live.current.tB;
+			const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+			const scale = Math.min(live.current.maxScale, Math.max(live.current.minScale, cur.scale * factor));
+			const k = scale / cur.scale;
+			commit(side, clampX({
+				x: cx - (cx - cur.x) * k,
+				y: cy - (cy - cur.y) * k,
+				scale
+			}, rect));
+		};
+		const attached = [];
+		if (vpA.current) {
+			const h = makeWheel("a", vpA.current);
+			vpA.current.addEventListener("wheel", h, { passive: false });
+			attached.push([vpA.current, h]);
+		}
+		if (mode === "side-by-side" && vpB.current) {
+			const h = makeWheel("b", vpB.current);
+			vpB.current.addEventListener("wheel", h, { passive: false });
+			attached.push([vpB.current, h]);
+		}
+		return () => attached.forEach(([el, h]) => el.removeEventListener("wheel", h));
+	}, [
+		interactive,
+		mode,
+		clampX,
+		commit
+	]);
+	React.useEffect(() => {
+		if (!onViewChange) return;
+		const rect = vpA.current?.getBoundingClientRect();
+		if (!rect || !rect.width || !rect.height) return;
+		onViewChange({
+			x: -tA.x / (rect.width * tA.scale),
+			y: -tA.y / (rect.height * tA.scale),
+			width: 1 / tA.scale,
+			height: 1 / tA.scale
+		});
+	}, [tA, onViewChange]);
+	React.useEffect(() => {
+		if (!onViewChangeAfter || mode !== "side-by-side") return;
+		const rect = vpB.current?.getBoundingClientRect();
+		if (!rect || !rect.width || !rect.height) return;
+		onViewChangeAfter({
+			x: -tB.x / (rect.width * tB.scale),
+			y: -tB.y / (rect.height * tB.scale),
+			width: 1 / tB.scale,
+			height: 1 / tB.scale
+		});
+	}, [
+		tB,
+		onViewChangeAfter,
+		mode
+	]);
+	React.useEffect(() => {
+		if (!viewControllerRef) return;
+		viewControllerRef.current = {
+			setCenter: (cx, cy) => {
+				const rect = vpA.current?.getBoundingClientRect();
+				if (!rect) return;
+				const s = live.current.tA.scale;
+				commit("a", clampX({
+					x: rect.width / 2 - cx * rect.width * s,
+					y: rect.height / 2 - cy * rect.height * s,
+					scale: s
+				}, rect));
+			},
+			zoomBy: (factor) => {
+				const rect = vpA.current?.getBoundingClientRect();
+				if (!rect) return;
+				const cur = live.current.tA;
+				const scale = Math.min(live.current.maxScale, Math.max(live.current.minScale, cur.scale * factor));
+				const k = scale / cur.scale;
+				const cx = rect.width / 2;
+				const cy = rect.height / 2;
+				commit("a", clampX({
+					x: cx - (cx - cur.x) * k,
+					y: cy - (cy - cur.y) * k,
+					scale
+				}, rect));
+			},
+			setCenterAfter: (cx, cy) => {
+				const rect = vpB.current?.getBoundingClientRect();
+				if (!rect) return;
+				const s = live.current.tB.scale;
+				commit("b", clampX({
+					x: rect.width / 2 - cx * rect.width * s,
+					y: rect.height / 2 - cy * rect.height * s,
+					scale: s
+				}, rect));
+			},
+			zoomByAfter: (factor) => {
+				const rect = vpB.current?.getBoundingClientRect();
+				if (!rect) return;
+				const cur = live.current.tB;
+				const scale = Math.min(live.current.maxScale, Math.max(live.current.minScale, cur.scale * factor));
+				const k = scale / cur.scale;
+				const cx = rect.width / 2;
+				const cy = rect.height / 2;
+				commit("b", clampX({
+					x: cx - (cx - cur.x) * k,
+					y: cy - (cy - cur.y) * k,
+					scale
+				}, rect));
+			}
+		};
+		return () => {
+			if (viewControllerRef) viewControllerRef.current = null;
+		};
+	}, [
+		viewControllerRef,
+		clampX,
+		commit
+	]);
+	const xf = (t) => ({
+		transform: `translate(${t.x}px, ${t.y}px) scale(${t.scale})`,
+		transformOrigin: "0 0"
+	});
+	const startPan = (side) => (e) => {
+		if (!interactive) return;
+		const cur = side === "a" ? tA : tB;
+		pan.current = {
+			side,
+			sx: e.clientX,
+			sy: e.clientY,
+			ox: cur.x,
+			oy: cur.y
+		};
+	};
+	const paneInteractive = interactive ? "wwc:cursor-grab wwc:touch-none wwc:active:cursor-grabbing" : "";
+	if (after == null) return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:relative wwc:h-full wwc:w-full wwc:overflow-hidden", className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: vpA,
+			onPointerDown: startPan("a"),
+			className: cn("wwc:absolute wwc:inset-0", paneInteractive),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:inset-0",
+				style: interactive ? xf(tA) : void 0,
+				children: before
+			})
+		}), beforeLabel != null && /* @__PURE__ */ jsx(CornerLabel, {
+			side: "start",
+			children: beforeLabel
+		})]
+	});
+	if (mode === "side-by-side") return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:relative wwc:grid wwc:h-full wwc:w-full wwc:grid-cols-2 wwc:overflow-hidden", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: vpA,
+				onPointerDown: startPan("a"),
+				className: cn("wwc:relative wwc:overflow-hidden wwc:border-r wwc:border-border", paneInteractive),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "wwc:absolute wwc:inset-0",
+					style: interactive ? xf(tA) : void 0,
+					children: before
+				}), beforeLabel != null && /* @__PURE__ */ jsx(CornerLabel, {
+					side: "start",
+					children: beforeLabel
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: vpB,
+				onPointerDown: startPan("b"),
+				className: cn("wwc:relative wwc:overflow-hidden", paneInteractive),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "wwc:absolute wwc:inset-0",
+					style: interactive ? xf(tB) : void 0,
+					children: after
+				}), afterLabel != null && /* @__PURE__ */ jsx(CornerLabel, {
+					side: "end",
+					children: afterLabel
+				})]
+			}),
+			interactive && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setLocked(!locked),
+				"aria-pressed": locked,
+				title: locked ? "Panning & zoom are synced — click to unlock" : "Panes move independently — click to sync",
+				className: "wwc:absolute wwc:left-1/2 wwc:top-1/2 wwc:z-30 wwc:flex wwc:h-8 wwc:w-8 wwc:-translate-x-1/2 wwc:-translate-y-1/2 wwc:items-center wwc:justify-center wwc:rounded-full wwc:border wwc:border-border wwc:bg-card wwc:text-foreground wwc:shadow-md wwc:transition-colors wwc:hover:bg-accent wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring",
+				children: locked ? /* @__PURE__ */ jsx(Lock, { className: "wwc:h-4 wwc:w-4" }) : /* @__PURE__ */ jsx(LockOpen, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" })
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:relative wwc:h-full wwc:w-full wwc:select-none wwc:overflow-hidden", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: vpA,
+				onPointerDown: startPan("a"),
+				className: cn("wwc:absolute wwc:inset-0", paneInteractive),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "wwc:absolute wwc:inset-0",
+					style: interactive ? xf(tA) : void 0,
+					children: after
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "wwc:pointer-events-none wwc:absolute wwc:inset-0",
+				style: { clipPath: `inset(0 ${100 - position}% 0 0)` },
+				children: /* @__PURE__ */ jsx("div", {
+					className: "wwc:absolute wwc:inset-0",
+					style: interactive ? xf(tA) : void 0,
+					children: before
+				})
+			}),
+			beforeLabel != null && /* @__PURE__ */ jsx(CornerLabel, {
+				side: "start",
+				children: beforeLabel
+			}),
+			afterLabel != null && /* @__PURE__ */ jsx(CornerLabel, {
+				side: "end",
+				children: afterLabel
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:absolute wwc:inset-y-0 wwc:z-30 wwc:flex wwc:w-5 wwc:-translate-x-1/2 wwc:cursor-ew-resize wwc:touch-none wwc:items-center wwc:justify-center",
+				style: { left: `${position}%` },
+				onPointerDown: (e) => {
+					e.stopPropagation();
+					dividerDrag.current = true;
+					updateDivider(e.clientX);
+				},
+				children: [/* @__PURE__ */ jsx("div", { className: "wwc:h-full wwc:w-0.5 wwc:bg-white wwc:shadow-[0_0_0_1px_rgba(0,0,0,0.25)]" }), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "slider",
+					"aria-label": "Drag to compare",
+					"aria-orientation": "vertical",
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": Math.round(position),
+					onKeyDown: (e) => {
+						if (e.key === "ArrowLeft") {
+							e.preventDefault();
+							setPosition(clampPos(position - 2));
+						} else if (e.key === "ArrowRight") {
+							e.preventDefault();
+							setPosition(clampPos(position + 2));
+						}
+					},
+					className: "wwc:absolute wwc:left-1/2 wwc:top-1/2 wwc:flex wwc:h-9 wwc:w-9 wwc:-translate-x-1/2 wwc:-translate-y-1/2 wwc:items-center wwc:justify-center wwc:rounded-full wwc:border wwc:border-border wwc:bg-card wwc:text-foreground wwc:shadow-md wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring",
+					children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "wwc:-mr-1 wwc:h-3.5 wwc:w-3.5" }), /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:-ml-1 wwc:h-3.5 wwc:w-3.5" })]
+				})]
+			})
+		]
+	});
+});
+CompareView.displayName = "CompareView";
+//#endregion
+export { CompareView };
+
+//# sourceMappingURL=compare-view.mjs.map

package/dist/compare-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-view.mjs","names":[],"sources":["../src/compare-view.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronLeft, ChevronRight, Lock, LockOpen} from \"lucide-react\";\nimport * as React from \"react\";\n\n/** How the two sources are compared. Mirrors the map toolbar's `SplitMode`. */\nexport type CompareMode = \"side-by-side\" | \"swipe\";\n\nexport interface CompareViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n\t/** First source (e.g. as-planned / yesterday). Fills the box; the two sources should be geo-aligned. */\n\tbefore: React.ReactNode;\n\t/** Second source (e.g. as-built / today). Omit to show `before` alone as a single pan/zoom map. */\n\tafter?: React.ReactNode;\n\t/** `swipe` (default) overlays the two with a draggable reveal divider; `side-by-side` shows two panes. */\n\tmode?: CompareMode;\n\t/** Divider position as a percentage 0–100 (swipe mode). Controlled when provided. */\n\tposition?: number;\n\t/** Uncontrolled starting divider position. Default 50. */\n\tdefaultPosition?: number;\n\t/** Called with the new divider position while dragging. */\n\tonPositionChange?: (position: number) => void;\n\t/** Optional chip labels for each source. */\n\tbeforeLabel?: React.ReactNode;\n\tafterLabel?: React.ReactNode;\n\n\t/** Make the content pannable (drag) and zoomable (wheel). The two sources stay geo-aligned. */\n\tinteractive?: boolean;\n\t/** Initial zoom (only when `interactive`). Default 1 (fit). */\n\tdefaultScale?: number;\n\t/** Zoom bounds (only when `interactive`). Default 1 → 6. */\n\tminScale?: number;\n\tmaxScale?: number;\n\t/**\n\t * Side-by-side + interactive: when locked, both panes pan/zoom together in the same coordinates.\n\t * Controlled when provided; the lock toggle sits on the dividing line.\n\t */\n\tlocked?: boolean;\n\tdefaultLocked?: boolean;\n\tonLockedChange?: (locked: boolean) => void;\n\n\t/** Reports the region currently visible (fractions 0–1 of the content) as it pans/zooms — feed a `MapMinimap`. */\n\tonViewChange?: (view: {x: number; y: number; width: number; height: number}) => void;\n\t/**\n\t * Side-by-side only: reports the *after* pane's visible region when it moves independently of the\n\t * *before* pane (i.e. while the divider lock is open) — feed a second `MapMinimap`.\n\t */\n\tonViewChangeAfter?: (view: {x: number; y: number; width: number; height: number}) => void;\n\t/** Imperative handle for driving the view (e.g. from a minimap): `.setCenter(x, y)` recenters on a fraction. */\n\tviewControllerRef?: React.MutableRefObject<CompareViewApi | null>;\n}\n\n/** Imperative controls exposed via `viewControllerRef`. */\nexport interface CompareViewApi {\n\t/** Recenter the view on a point given as fractions (0–1) of the content. */\n\tsetCenter: (x: number, y: number) => void;\n\t/** Zoom about the center by a factor (>1 zooms in, <1 zooms out); clamped to the scale bounds. */\n\tzoomBy: (factor: number) => void;\n\t/** Side-by-side + unlocked: recenter the *after* pane on a fraction (0–1). Falls back to both panes when synced. */\n\tsetCenterAfter: (x: number, y: number) => void;\n\t/** Side-by-side + unlocked: zoom the *after* pane about its center. Falls back to both panes when synced. */\n\tzoomByAfter: (factor: number) => void;\n}\n\ninterface XForm {\n\tx: number;\n\ty: number;\n\tscale: number;\n}\n\nconst clampPos = (n: number) => Math.min(100, Math.max(0, n));\n\nfunction CornerLabel({side, children}: {side: \"start\" | \"end\"; children: React.ReactNode}) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:pointer-events-none wwc:absolute wwc:top-2 wwc:z-30 wwc:rounded-md wwc:bg-card/85 wwc:px-2 wwc:py-0.5 wwc:text-xs wwc:font-medium wwc:text-foreground wwc:shadow-sm wwc:backdrop-blur\",\n\t\t\t\tside === \"start\" ? \"wwc:left-2\" : \"wwc:right-2\",\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n\n/**\n * Compares two geo-aligned sources. `swipe` stacks them and reveals more of one as you drag a\n * center divider; `side-by-side` splits the box into two panes. With `interactive`, the content\n * pans (drag) and zooms (wheel); in side-by-side a lock on the divider keeps both panes in sync.\n * Pass any nodes (images, maps, canvases) for `before`/`after`.\n */\nconst CompareView = React.forwardRef<HTMLDivElement, CompareViewProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tbefore,\n\t\t\tafter,\n\t\t\tmode = \"swipe\",\n\t\t\tposition: positionProp,\n\t\t\tdefaultPosition = 50,\n\t\t\tonPositionChange,\n\t\t\tbeforeLabel,\n\t\t\tafterLabel,\n\t\t\tinteractive = false,\n\t\t\tdefaultScale = 1,\n\t\t\tminScale = 1,\n\t\t\tmaxScale = 6,\n\t\t\tlocked: lockedProp,\n\t\t\tdefaultLocked = true,\n\t\t\tonLockedChange,\n\t\t\tonViewChange,\n\t\t\tonViewChangeAfter,\n\t\t\tviewControllerRef,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\t// divider position (controlled/uncontrolled)\n\t\tconst [posInternal, setPosInternal] = React.useState(defaultPosition);\n\t\tconst position = positionProp ?? posInternal;\n\t\tconst setPosition = (p: number) => {\n\t\t\tif (positionProp === undefined) setPosInternal(p);\n\t\t\tonPositionChange?.(p);\n\t\t};\n\n\t\t// lock (controlled/uncontrolled)\n\t\tconst [lockedInternal, setLockedInternal] = React.useState(defaultLocked);\n\t\tconst locked = lockedProp ?? lockedInternal;\n\t\tconst setLocked = (l: boolean) => {\n\t\t\tif (lockedProp === undefined) setLockedInternal(l);\n\t\t\tonLockedChange?.(l);\n\t\t};\n\n\t\t// pan/zoom transforms per pane\n\t\tconst init: XForm = {x: 0, y: 0, scale: defaultScale};\n\t\tconst [tA, setTA] = React.useState<XForm>(init);\n\t\tconst [tB, setTB] = React.useState<XForm>(init);\n\n\t\tconst vpA = React.useRef<HTMLDivElement | null>(null);\n\t\tconst vpB = React.useRef<HTMLDivElement | null>(null);\n\t\tconst dividerDrag = React.useRef(false);\n\t\tconst pan = React.useRef<{side: \"a\" | \"b\"; sx: number; sy: number; ox: number; oy: number} | null>(null);\n\n\t\t// Latest values for the once-attached window/native listeners.\n\t\tconst live = React.useRef({tA, tB, locked, mode, minScale, maxScale, interactive, position});\n\t\tlive.current = {tA, tB, locked, mode, minScale, maxScale, interactive, position};\n\n\t\tconst clampX = React.useCallback((t: XForm, rect: DOMRect): XForm => {\n\t\t\tconst {minScale: mn, maxScale: mx} = live.current;\n\t\t\tconst scale = Math.min(mx, Math.max(mn, t.scale));\n\t\t\tconst minX = Math.min(0, rect.width * (1 - scale));\n\t\t\tconst minY = Math.min(0, rect.height * (1 - scale));\n\t\t\treturn {scale, x: Math.min(0, Math.max(minX, t.x)), y: Math.min(0, Math.max(minY, t.y))};\n\t\t}, []);\n\n\t\tconst commit = React.useCallback((side: \"a\" | \"b\", t: XForm) => {\n\t\t\tif (live.current.mode === \"swipe\" || live.current.locked) {\n\t\t\t\tsetTA(t);\n\t\t\t\tsetTB(t);\n\t\t\t} else if (side === \"a\") setTA(t);\n\t\t\telse setTB(t);\n\t\t}, []);\n\n\t\tconst updateDivider = React.useCallback((clientX: number) => {\n\t\t\tconst rect = vpA.current?.getBoundingClientRect();\n\t\t\tif (rect) setPosition(clampPos(((clientX - rect.left) / rect.width) * 100));\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\t// window pointer handlers (attached once): divider drag + content pan\n\t\tReact.useEffect(() => {\n\t\t\tconst move = (e: PointerEvent) => {\n\t\t\t\tif (dividerDrag.current) {\n\t\t\t\t\tupdateDivider(e.clientX);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst p = pan.current;\n\t\t\t\tif (!p || !live.current.interactive) return;\n\t\t\t\tconst rect = (p.side === \"a\" ? vpA : vpB).current?.getBoundingClientRect();\n\t\t\t\tif (!rect) return;\n\t\t\t\tconst cur = p.side === \"a\" ? live.current.tA : live.current.tB;\n\t\t\t\tcommit(p.side, clampX({x: p.ox + (e.clientX - p.sx), y: p.oy + (e.clientY - p.sy), scale: cur.scale}, rect));\n\t\t\t};\n\t\t\tconst up = () => {\n\t\t\t\tdividerDrag.current = false;\n\t\t\t\tpan.current = null;\n\t\t\t};\n\t\t\twindow.addEventListener(\"pointermove\", move);\n\t\t\twindow.addEventListener(\"pointerup\", up);\n\t\t\twindow.addEventListener(\"pointercancel\", up);\n\t\t\treturn () => {\n\t\t\t\twindow.removeEventListener(\"pointermove\", move);\n\t\t\t\twindow.removeEventListener(\"pointerup\", up);\n\t\t\t\twindow.removeEventListener(\"pointercancel\", up);\n\t\t\t};\n\t\t}, [clampX, commit, updateDivider]);\n\n\t\t// native wheel-to-zoom (non-passive so we can preventDefault)\n\t\tReact.useEffect(() => {\n\t\t\tif (!interactive) return;\n\t\t\tconst makeWheel = (side: \"a\" | \"b\", el: HTMLDivElement) => (e: WheelEvent) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst rect = el.getBoundingClientRect();\n\t\t\t\tconst cx = e.clientX - rect.left;\n\t\t\t\tconst cy = e.clientY - rect.top;\n\t\t\t\tconst cur = side === \"a\" ? live.current.tA : live.current.tB;\n\t\t\t\tconst factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;\n\t\t\t\tconst scale = Math.min(live.current.maxScale, Math.max(live.current.minScale, cur.scale * factor));\n\t\t\t\tconst k = scale / cur.scale;\n\t\t\t\tcommit(side, clampX({x: cx - (cx - cur.x) * k, y: cy - (cy - cur.y) * k, scale}, rect));\n\t\t\t};\n\t\t\tconst attached: Array<[HTMLDivElement, (e: WheelEvent) => void]> = [];\n\t\t\tif (vpA.current) {\n\t\t\t\tconst h = makeWheel(\"a\", vpA.current);\n\t\t\t\tvpA.current.addEventListener(\"wheel\", h, {passive: false});\n\t\t\t\tattached.push([vpA.current, h]);\n\t\t\t}\n\t\t\tif (mode === \"side-by-side\" && vpB.current) {\n\t\t\t\tconst h = makeWheel(\"b\", vpB.current);\n\t\t\t\tvpB.current.addEventListener(\"wheel\", h, {passive: false});\n\t\t\t\tattached.push([vpB.current, h]);\n\t\t\t}\n\t\t\treturn () => attached.forEach(([el, h]) => el.removeEventListener(\"wheel\", h));\n\t\t}, [interactive, mode, clampX, commit]);\n\n\t\t// Report the visible region (fractions of the content) whenever the primary view changes.\n\t\tReact.useEffect(() => {\n\t\t\tif (!onViewChange) return;\n\t\t\tconst rect = vpA.current?.getBoundingClientRect();\n\t\t\tif (!rect || !rect.width || !rect.height) return;\n\t\t\tonViewChange({\n\t\t\t\tx: -tA.x / (rect.width * tA.scale),\n\t\t\t\ty: -tA.y / (rect.height * tA.scale),\n\t\t\t\twidth: 1 / tA.scale,\n\t\t\t\theight: 1 / tA.scale,\n\t\t\t});\n\t\t}, [tA, onViewChange]);\n\n\t\t// Report the after pane's region (side-by-side only) so a second minimap can track it independently.\n\t\tReact.useEffect(() => {\n\t\t\tif (!onViewChangeAfter || mode !== \"side-by-side\") return;\n\t\t\tconst rect = vpB.current?.getBoundingClientRect();\n\t\t\tif (!rect || !rect.width || !rect.height) return;\n\t\t\tonViewChangeAfter({\n\t\t\t\tx: -tB.x / (rect.width * tB.scale),\n\t\t\t\ty: -tB.y / (rect.height * tB.scale),\n\t\t\t\twidth: 1 / tB.scale,\n\t\t\t\theight: 1 / tB.scale,\n\t\t\t});\n\t\t}, [tB, onViewChangeAfter, mode]);\n\n\t\t// Imperative handle for external navigation (e.g. a minimap): recenter on a content fraction.\n\t\tReact.useEffect(() => {\n\t\t\tif (!viewControllerRef) return;\n\t\t\tviewControllerRef.current = {\n\t\t\t\tsetCenter: (cx, cy) => {\n\t\t\t\t\tconst rect = vpA.current?.getBoundingClientRect();\n\t\t\t\t\tif (!rect) return;\n\t\t\t\t\tconst s = live.current.tA.scale;\n\t\t\t\t\tcommit(\n\t\t\t\t\t\t\"a\",\n\t\t\t\t\t\tclampX(\n\t\t\t\t\t\t\t{x: rect.width / 2 - cx * rect.width * s, y: rect.height / 2 - cy * rect.height * s, scale: s},\n\t\t\t\t\t\t\trect,\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\tzoomBy: (factor) => {\n\t\t\t\t\tconst rect = vpA.current?.getBoundingClientRect();\n\t\t\t\t\tif (!rect) return;\n\t\t\t\t\tconst cur = live.current.tA;\n\t\t\t\t\tconst scale = Math.min(live.current.maxScale, Math.max(live.current.minScale, cur.scale * factor));\n\t\t\t\t\tconst k = scale / cur.scale;\n\t\t\t\t\tconst cx = rect.width / 2;\n\t\t\t\t\tconst cy = rect.height / 2;\n\t\t\t\t\tcommit(\"a\", clampX({x: cx - (cx - cur.x) * k, y: cy - (cy - cur.y) * k, scale}, rect));\n\t\t\t\t},\n\t\t\t\tsetCenterAfter: (cx, cy) => {\n\t\t\t\t\tconst rect = vpB.current?.getBoundingClientRect();\n\t\t\t\t\tif (!rect) return;\n\t\t\t\t\tconst s = live.current.tB.scale;\n\t\t\t\t\tcommit(\n\t\t\t\t\t\t\"b\",\n\t\t\t\t\t\tclampX(\n\t\t\t\t\t\t\t{x: rect.width / 2 - cx * rect.width * s, y: rect.height / 2 - cy * rect.height * s, scale: s},\n\t\t\t\t\t\t\trect,\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\tzoomByAfter: (factor) => {\n\t\t\t\t\tconst rect = vpB.current?.getBoundingClientRect();\n\t\t\t\t\tif (!rect) return;\n\t\t\t\t\tconst cur = live.current.tB;\n\t\t\t\t\tconst scale = Math.min(live.current.maxScale, Math.max(live.current.minScale, cur.scale * factor));\n\t\t\t\t\tconst k = scale / cur.scale;\n\t\t\t\t\tconst cx = rect.width / 2;\n\t\t\t\t\tconst cy = rect.height / 2;\n\t\t\t\t\tcommit(\"b\", clampX({x: cx - (cx - cur.x) * k, y: cy - (cy - cur.y) * k, scale}, rect));\n\t\t\t\t},\n\t\t\t};\n\t\t\treturn () => {\n\t\t\t\tif (viewControllerRef) viewControllerRef.current = null;\n\t\t\t};\n\t\t}, [viewControllerRef, clampX, commit]);\n\n\t\tconst xf = (t: XForm): React.CSSProperties => ({\n\t\t\ttransform: `translate(${t.x}px, ${t.y}px) scale(${t.scale})`,\n\t\t\ttransformOrigin: \"0 0\",\n\t\t});\n\t\tconst startPan = (side: \"a\" | \"b\") => (e: React.PointerEvent) => {\n\t\t\tif (!interactive) return;\n\t\t\tconst cur = side === \"a\" ? tA : tB;\n\t\t\tpan.current = {side, sx: e.clientX, sy: e.clientY, ox: cur.x, oy: cur.y};\n\t\t};\n\t\tconst paneInteractive = interactive ? \"wwc:cursor-grab wwc:touch-none wwc:active:cursor-grabbing\" : \"\";\n\n\t\t// No second source → a single pan/zoom map (no divider, no panes).\n\t\tif (after == null) {\n\t\t\treturn (\n\t\t\t\t<div ref={ref} className={cn(\"wwc:relative wwc:h-full wwc:w-full wwc:overflow-hidden\", className)} {...rest}>\n\t\t\t\t\t<div ref={vpA} onPointerDown={startPan(\"a\")} className={cn(\"wwc:absolute wwc:inset-0\", paneInteractive)}>\n\t\t\t\t\t\t<div className=\"wwc:absolute wwc:inset-0\" style={interactive ? xf(tA) : undefined}>\n\t\t\t\t\t\t\t{before}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{beforeLabel != null && <CornerLabel side=\"start\">{beforeLabel}</CornerLabel>}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\tif (mode === \"side-by-side\") {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\"wwc:relative wwc:grid wwc:h-full wwc:w-full wwc:grid-cols-2 wwc:overflow-hidden\", className)}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={vpA}\n\t\t\t\t\t\tonPointerDown={startPan(\"a\")}\n\t\t\t\t\t\tclassName={cn(\"wwc:relative wwc:overflow-hidden wwc:border-r wwc:border-border\", paneInteractive)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"wwc:absolute wwc:inset-0\" style={interactive ? xf(tA) : undefined}>\n\t\t\t\t\t\t\t{before}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{beforeLabel != null && <CornerLabel side=\"start\">{beforeLabel}</CornerLabel>}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={vpB}\n\t\t\t\t\t\tonPointerDown={startPan(\"b\")}\n\t\t\t\t\t\tclassName={cn(\"wwc:relative wwc:overflow-hidden\", paneInteractive)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"wwc:absolute wwc:inset-0\" style={interactive ? xf(tB) : undefined}>\n\t\t\t\t\t\t\t{after}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{afterLabel != null && <CornerLabel side=\"end\">{afterLabel}</CornerLabel>}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{interactive && (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => setLocked(!locked)}\n\t\t\t\t\t\t\taria-pressed={locked}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tlocked ? \"Panning & zoom are synced — click to unlock\" : \"Panes move independently — click to sync\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"wwc:absolute wwc:left-1/2 wwc:top-1/2 wwc:z-30 wwc:flex wwc:h-8 wwc:w-8 wwc:-translate-x-1/2 wwc:-translate-y-1/2 wwc:items-center wwc:justify-center wwc:rounded-full wwc:border wwc:border-border wwc:bg-card wwc:text-foreground wwc:shadow-md wwc:transition-colors wwc:hover:bg-accent wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{locked ? (\n\t\t\t\t\t\t\t\t<Lock className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<LockOpen className=\"wwc:h-4 wwc:w-4 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"wwc:relative wwc:h-full wwc:w-full wwc:select-none wwc:overflow-hidden\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{/* base layer: after (revealed on the right of the divider) */}\n\t\t\t\t<div ref={vpA} onPointerDown={startPan(\"a\")} className={cn(\"wwc:absolute wwc:inset-0\", paneInteractive)}>\n\t\t\t\t\t<div className=\"wwc:absolute wwc:inset-0\" style={interactive ? xf(tA) : undefined}>\n\t\t\t\t\t\t{after}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{/* top layer: before, clipped to the left of the divider (clip is in screen space) */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wwc:pointer-events-none wwc:absolute wwc:inset-0\"\n\t\t\t\t\tstyle={{clipPath: `inset(0 ${100 - position}% 0 0)`}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"wwc:absolute wwc:inset-0\" style={interactive ? xf(tA) : undefined}>\n\t\t\t\t\t\t{before}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{beforeLabel != null && <CornerLabel side=\"start\">{beforeLabel}</CornerLabel>}\n\t\t\t\t{afterLabel != null && <CornerLabel side=\"end\">{afterLabel}</CornerLabel>}\n\n\t\t\t\t{/* reveal divider + handle */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wwc:absolute wwc:inset-y-0 wwc:z-30 wwc:flex wwc:w-5 wwc:-translate-x-1/2 wwc:cursor-ew-resize wwc:touch-none wwc:items-center wwc:justify-center\"\n\t\t\t\t\tstyle={{left: `${position}%`}}\n\t\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tdividerDrag.current = true;\n\t\t\t\t\t\tupdateDivider(e.clientX);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"wwc:h-full wwc:w-0.5 wwc:bg-white wwc:shadow-[0_0_0_1px_rgba(0,0,0,0.25)]\" />\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\taria-label=\"Drag to compare\"\n\t\t\t\t\t\taria-orientation=\"vertical\"\n\t\t\t\t\t\taria-valuemin={0}\n\t\t\t\t\t\taria-valuemax={100}\n\t\t\t\t\t\taria-valuenow={Math.round(position)}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (e.key === \"ArrowLeft\") {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetPosition(clampPos(position - 2));\n\t\t\t\t\t\t\t} else if (e.key === \"ArrowRight\") {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetPosition(clampPos(position + 2));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName=\"wwc:absolute wwc:left-1/2 wwc:top-1/2 wwc:flex wwc:h-9 wwc:w-9 wwc:-translate-x-1/2 wwc:-translate-y-1/2 wwc:items-center wwc:justify-center wwc:rounded-full wwc:border wwc:border-border wwc:bg-card wwc:text-foreground wwc:shadow-md wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronLeft className=\"wwc:-mr-1 wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t<ChevronRight className=\"wwc:-ml-1 wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nCompareView.displayName = \"CompareView\";\n\nexport {CompareView};\n"],"mappings":"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"}