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

package/dist/gantt.mjs

@@ -0,0 +1,281 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, endOfMonth, format, isToday } from "date-fns";
+//#region src/gantt.tsx
+const GanttContext = React.createContext(null);
+function useGantt() {
+	const context = React.useContext(GanttContext);
+	if (!context) throw new Error("useGantt must be used within a GanttProvider");
+	return context;
+}
+const barColors = {
+	default: "wwc:bg-primary wwc:text-primary-foreground",
+	muted: "wwc:bg-muted wwc:text-muted-foreground",
+	accent: "wwc:bg-accent wwc:text-accent-foreground",
+	chart1: "wwc:bg-chart-1 wwc:text-zinc-900",
+	chart2: "wwc:bg-chart-2 wwc:text-zinc-900",
+	chart3: "wwc:bg-chart-3 wwc:text-zinc-900",
+	chart4: "wwc:bg-chart-4 wwc:text-zinc-900",
+	chart5: "wwc:bg-chart-5 wwc:text-zinc-900"
+};
+/** Gantt chart for project timeline visualization with task dependencies. */
+const Gantt = React.forwardRef(({ className, children, startDate, endDate, columnWidth = 40, rowHeight = 50, sidebarWidth = 300, ...props }, ref) => {
+	const timelineRef = React.useRef(null);
+	const contextValue = React.useMemo(() => ({
+		startDate,
+		endDate,
+		columnWidth,
+		rowHeight,
+		sidebarWidth,
+		timelineRef
+	}), [
+		startDate,
+		endDate,
+		columnWidth,
+		rowHeight,
+		sidebarWidth
+	]);
+	return /* @__PURE__ */ jsx(GanttContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cn("wwc:flex wwc:flex-col wwc:border wwc:rounded-lg wwc:overflow-hidden", className),
+			...props,
+			children
+		})
+	});
+});
+Gantt.displayName = "Gantt";
+const GanttHeader = React.forwardRef(({ className, sidebarHeader, ...props }, ref) => {
+	const { startDate, endDate, columnWidth, sidebarWidth, timelineRef } = useGantt();
+	const months = eachMonthOfInterval({
+		start: startDate,
+		end: endDate
+	});
+	const days = eachDayOfInterval({
+		start: startDate,
+		end: endDate
+	});
+	const totalWidth = days.length * columnWidth;
+	const headerTimelineRef = React.useRef(null);
+	React.useEffect(() => {
+		const timeline = timelineRef.current;
+		const headerTimeline = headerTimelineRef.current;
+		if (!timeline || !headerTimeline) return;
+		const handleScroll = () => {
+			headerTimeline.scrollLeft = timeline.scrollLeft;
+		};
+		timeline.addEventListener("scroll", handleScroll);
+		return () => timeline.removeEventListener("scroll", handleScroll);
+	}, [timelineRef]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:border-b wwc:bg-muted/30", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "wwc:shrink-0 wwc:border-r wwc:bg-card wwc:flex wwc:items-center wwc:px-3",
+			style: { width: sidebarWidth },
+			children: sidebarHeader && /* @__PURE__ */ jsx("span", {
+				className: "wwc:text-sm wwc:font-medium wwc:text-foreground",
+				children: sidebarHeader
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			ref: headerTimelineRef,
+			className: "wwc:flex-1 wwc:overflow-hidden",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-col",
+				style: { width: totalWidth },
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:border-b",
+					children: months.map((month) => {
+						const monthStart = month < startDate ? startDate : month;
+						const monthEnd = endOfMonth(month) > endDate ? endDate : endOfMonth(month);
+						const width = (differenceInDays(monthEnd, monthStart) + 1) * columnWidth;
+						return /* @__PURE__ */ jsx("div", {
+							className: "wwc:text-xs wwc:font-medium wwc:text-muted-foreground wwc:px-2 wwc:py-1.5 wwc:border-r wwc:shrink-0 wwc:truncate wwc:overflow-hidden",
+							style: { width },
+							children: format(month, "MMMM yyyy")
+						}, month.toISOString());
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex",
+					children: days.map((day) => /* @__PURE__ */ jsx("div", {
+						className: cn("wwc:text-[10px] wwc:text-center wwc:py-1 wwc:border-r wwc:shrink-0", isToday(day) && "wwc:bg-primary wwc:text-primary-foreground wwc:font-medium", !isToday(day) && "wwc:text-muted-foreground"),
+						style: { width: columnWidth },
+						children: format(day, "d")
+					}, day.toISOString()))
+				})]
+			})
+		})]
+	});
+});
+GanttHeader.displayName = "GanttHeader";
+function flattenChildren(children) {
+	const result = [];
+	React.Children.forEach(children, (child) => {
+		if (!React.isValidElement(child)) return;
+		if (child.type === React.Fragment) {
+			const fragmentProps = child.props;
+			result.push(...flattenChildren(fragmentProps.children));
+		} else result.push(child);
+	});
+	return result;
+}
+const GanttBody = React.forwardRef(({ className, children, showTodayLine = true, ...props }, ref) => {
+	const { startDate, endDate, columnWidth, sidebarWidth, timelineRef } = useGantt();
+	const totalWidth = eachDayOfInterval({
+		start: startDate,
+		end: endDate
+	}).length * columnWidth;
+	const rowChildren = flattenChildren(children).filter((child) => child.type === GanttRow);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:overflow-hidden", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "wwc:shrink-0 wwc:border-r wwc:overflow-y-auto wwc:overflow-x-hidden",
+			style: { width: sidebarWidth },
+			children: rowChildren.map((child, index) => React.cloneElement(child, {
+				key: child.key ?? index,
+				_renderSidebar: true
+			}))
+		}), /* @__PURE__ */ jsx("div", {
+			ref: timelineRef,
+			className: "wwc:flex-1 wwc:overflow-x-auto wwc:overflow-y-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "wwc:relative",
+				style: { minWidth: totalWidth },
+				children: [showTodayLine && /* @__PURE__ */ jsx(GanttTodayLine, {}), rowChildren.map((child, index) => React.cloneElement(child, {
+					key: child.key ?? index,
+					_renderTimeline: true
+				}))]
+			})
+		})]
+	});
+});
+GanttBody.displayName = "GanttBody";
+const GanttRow = React.forwardRef(({ className, children, isGroup = false, _renderSidebar, _renderTimeline, ...props }, ref) => {
+	const { rowHeight } = useGantt();
+	let sidebarChild = null;
+	let timelineChild = null;
+	React.Children.forEach(children, (child) => {
+		if (React.isValidElement(child)) {
+			if (child.type === GanttSidebarCell) sidebarChild = child;
+			else if (child.type === GanttTimelineCell) timelineChild = child;
+		}
+	});
+	if (_renderSidebar) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:flex wwc:w-full wwc:border-b wwc:border-border wwc:hover:bg-muted/30 wwc:transition-colors", isGroup && "wwc:bg-muted/20", className),
+		style: { minHeight: rowHeight },
+		...props,
+		children: sidebarChild
+	});
+	if (_renderTimeline) return /* @__PURE__ */ jsx("div", {
+		className: cn("wwc:flex wwc:border-b wwc:border-border wwc:hover:bg-muted/30 wwc:transition-colors wwc:w-fit wwc:min-w-full", isGroup && "wwc:bg-muted/20"),
+		style: { minHeight: rowHeight },
+		children: timelineChild
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:flex wwc:border-b wwc:border-border wwc:hover:bg-muted/30 wwc:transition-colors", isGroup && "wwc:bg-muted/20", className),
+		style: { minHeight: rowHeight },
+		...props,
+		children
+	});
+});
+GanttRow.displayName = "GanttRow";
+const GanttSidebarCell = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:flex-1 wwc:px-3 wwc:py-2 wwc:flex wwc:items-center wwc:bg-card wwc:self-stretch", className),
+		...props,
+		children
+	});
+});
+GanttSidebarCell.displayName = "GanttSidebarCell";
+const GanttTimelineCell = React.forwardRef(({ className, children, ...props }, ref) => {
+	const { startDate, endDate, columnWidth } = useGantt();
+	const days = eachDayOfInterval({
+		start: startDate,
+		end: endDate
+	});
+	const totalWidth = days.length * columnWidth;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:relative", className),
+		style: { width: totalWidth },
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "wwc:absolute wwc:inset-0 wwc:flex wwc:pointer-events-none",
+			children: days.map((day) => /* @__PURE__ */ jsx("div", {
+				className: cn("wwc:border-r wwc:h-full wwc:shrink-0", isToday(day) && "wwc:bg-primary/5"),
+				style: { width: columnWidth }
+			}, day.toISOString()))
+		}), /* @__PURE__ */ jsx("div", {
+			className: "wwc:relative wwc:h-full wwc:flex wwc:items-center wwc:py-1",
+			children
+		})]
+	});
+});
+GanttTimelineCell.displayName = "GanttTimelineCell";
+const GanttBar = React.forwardRef(({ className, startDate: taskStart, endDate: taskEnd, color = "default", progress, label, showLabel = true, ...props }, ref) => {
+	const { startDate: chartStart, columnWidth } = useGantt();
+	const offsetDays = differenceInDays(taskStart, chartStart);
+	const durationDays = differenceInDays(taskEnd, taskStart) + 1;
+	const left = offsetDays * columnWidth;
+	const width = durationDays * columnWidth;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:absolute wwc:h-7 wwc:rounded-md wwc:flex wwc:items-center wwc:px-2 wwc:text-xs wwc:font-medium wwc:shadow-sm", barColors[color], className),
+		style: {
+			left,
+			width: Math.max(width, columnWidth)
+		},
+		...props,
+		children: [showLabel && label && /* @__PURE__ */ jsx("span", {
+			className: "wwc:truncate",
+			children: label
+		}), progress !== void 0 && /* @__PURE__ */ jsxs("span", {
+			className: "wwc:ml-auto wwc:text-[10px] wwc:opacity-80",
+			children: [progress, "%"]
+		})]
+	});
+});
+GanttBar.displayName = "GanttBar";
+const GanttTodayLine = React.forwardRef(({ className, ...props }, ref) => {
+	const { startDate, columnWidth } = useGantt();
+	const offsetDays = differenceInDays(/* @__PURE__ */ new Date(), startDate);
+	const left = offsetDays * columnWidth + columnWidth / 2;
+	if (offsetDays < 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:absolute wwc:top-0 wwc:bottom-0 wwc:w-0.5 wwc:bg-foreground wwc:z-50 wwc:pointer-events-none", className),
+		style: { left },
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "wwc:absolute wwc:top-2 wwc:left-1/2 wwc:-translate-x-1/2 wwc:bg-foreground wwc:text-background wwc:text-[10px] wwc:px-1.5 wwc:py-0.5 wwc:rounded wwc:font-medium wwc:whitespace-nowrap wwc:shadow-md",
+			children: "Today"
+		})
+	});
+});
+GanttTodayLine.displayName = "GanttTodayLine";
+const GanttMilestone = React.forwardRef(({ className, date, color = "default", ...props }, ref) => {
+	const { startDate: chartStart, columnWidth } = useGantt();
+	const left = differenceInDays(date, chartStart) * columnWidth + columnWidth / 2;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:absolute wwc:w-3 wwc:h-3 wwc:rotate-45", barColors[color], className),
+		style: { left: left - 6 },
+		...props
+	});
+});
+GanttMilestone.displayName = "GanttMilestone";
+function getDatePosition(date, chartStart, columnWidth) {
+	return differenceInDays(date, chartStart) * columnWidth;
+}
+//#endregion
+export { Gantt, GanttBar, GanttBody, GanttHeader, GanttMilestone, GanttRow, GanttSidebarCell, GanttTimelineCell, GanttTodayLine, getDatePosition, useGantt };
+
+//# sourceMappingURL=gantt.mjs.map

package/dist/gantt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gantt.mjs","names":[],"sources":["../src/gantt.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {differenceInDays, eachDayOfInterval, eachMonthOfInterval, endOfMonth, format, isToday} from \"date-fns\";\nimport * as React from \"react\";\n\n// Types\nexport interface GanttTask {\n\tid: string;\n\tname: string;\n\tstartDate: Date;\n\tendDate: Date;\n\tprogress?: number;\n\tcolor?: \"default\" | \"muted\" | \"accent\" | \"chart1\" | \"chart2\" | \"chart3\" | \"chart4\" | \"chart5\";\n\tchildren?: GanttTask[];\n}\n\nexport interface GanttResource {\n\tid: string;\n\tname: string;\n\tavatar?: string;\n\trole?: string;\n\tdepartment?: string;\n\ttasks: GanttTask[];\n}\n\ninterface GanttContextValue {\n\tstartDate: Date;\n\tendDate: Date;\n\tcolumnWidth: number;\n\trowHeight: number;\n\tsidebarWidth: number;\n\ttimelineRef: React.RefObject<HTMLDivElement | null>;\n}\n\nconst GanttContext = React.createContext<GanttContextValue | null>(null);\n\nfunction useGantt() {\n\tconst context = React.useContext(GanttContext);\n\tif (!context) {\n\t\tthrow new Error(\"useGantt must be used within a GanttProvider\");\n\t}\n\treturn context;\n}\n\n// Color variants for bars - aligned with design system\n// Chart colors are light orange/amber, so they need dark text for contrast\nconst barColors = {\n\tdefault: \"wwc:bg-primary wwc:text-primary-foreground\",\n\tmuted: \"wwc:bg-muted wwc:text-muted-foreground\",\n\taccent: \"wwc:bg-accent wwc:text-accent-foreground\",\n\tchart1: \"wwc:bg-chart-1 wwc:text-zinc-900\",\n\tchart2: \"wwc:bg-chart-2 wwc:text-zinc-900\",\n\tchart3: \"wwc:bg-chart-3 wwc:text-zinc-900\",\n\tchart4: \"wwc:bg-chart-4 wwc:text-zinc-900\",\n\tchart5: \"wwc:bg-chart-5 wwc:text-zinc-900\",\n};\n\n// Main Gantt Container\ninterface GanttProps extends React.HTMLAttributes<HTMLDivElement> {\n\tstartDate: Date;\n\tendDate: Date;\n\tcolumnWidth?: number;\n\trowHeight?: number;\n\tsidebarWidth?: number;\n}\n\n/** Gantt chart for project timeline visualization with task dependencies. */\nconst Gantt = React.forwardRef<HTMLDivElement, GanttProps>(\n\t({className, children, startDate, endDate, columnWidth = 40, rowHeight = 50, sidebarWidth = 300, ...props}, ref) => {\n\t\tconst timelineRef = React.useRef<HTMLDivElement>(null);\n\n\t\tconst contextValue = React.useMemo(\n\t\t\t() => ({\n\t\t\t\tstartDate,\n\t\t\t\tendDate,\n\t\t\t\tcolumnWidth,\n\t\t\t\trowHeight,\n\t\t\t\tsidebarWidth,\n\t\t\t\ttimelineRef,\n\t\t\t}),\n\t\t\t[startDate, endDate, columnWidth, rowHeight, sidebarWidth],\n\t\t);\n\n\t\treturn (\n\t\t\t<GanttContext.Provider value={contextValue}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\"wwc:flex wwc:flex-col wwc:border wwc:rounded-lg wwc:overflow-hidden\", className)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</GanttContext.Provider>\n\t\t);\n\t},\n);\nGantt.displayName = \"Gantt\";\n\n// Gantt Header with months and days\ninterface GanttHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n\tsidebarHeader?: React.ReactNode;\n}\n\nconst GanttHeader = React.forwardRef<HTMLDivElement, GanttHeaderProps>(({className, sidebarHeader, ...props}, ref) => {\n\tconst {startDate, endDate, columnWidth, sidebarWidth, timelineRef} = useGantt();\n\n\tconst months = eachMonthOfInterval({start: startDate, end: endDate});\n\tconst days = eachDayOfInterval({start: startDate, end: endDate});\n\tconst totalWidth = days.length * columnWidth;\n\n\t// Sync scroll with timeline body\n\tconst headerTimelineRef = React.useRef<HTMLDivElement>(null);\n\n\tReact.useEffect(() => {\n\t\tconst timeline = timelineRef.current;\n\t\tconst headerTimeline = headerTimelineRef.current;\n\n\t\tif (!timeline || !headerTimeline) return;\n\n\t\tconst handleScroll = () => {\n\t\t\theaderTimeline.scrollLeft = timeline.scrollLeft;\n\t\t};\n\n\t\ttimeline.addEventListener(\"scroll\", handleScroll);\n\t\treturn () => timeline.removeEventListener(\"scroll\", handleScroll);\n\t}, [timelineRef]);\n\n\treturn (\n\t\t<div ref={ref} className={cn(\"wwc:flex wwc:border-b wwc:bg-muted/30\", className)} {...props}>\n\t\t\t{/* Sidebar header - fixed */}\n\t\t\t<div\n\t\t\t\tclassName=\"wwc:shrink-0 wwc:border-r wwc:bg-card wwc:flex wwc:items-center wwc:px-3\"\n\t\t\t\tstyle={{width: sidebarWidth}}\n\t\t\t>\n\t\t\t\t{sidebarHeader && <span className=\"wwc:text-sm wwc:font-medium wwc:text-foreground\">{sidebarHeader}</span>}\n\t\t\t</div>\n\n\t\t\t{/* Timeline header - synced scroll, hidden scrollbar */}\n\t\t\t<div ref={headerTimelineRef} className=\"wwc:flex-1 wwc:overflow-hidden\">\n\t\t\t\t<div className=\"wwc:flex wwc:flex-col\" style={{width: totalWidth}}>\n\t\t\t\t\t{/* Months row */}\n\t\t\t\t\t<div className=\"wwc:flex wwc:border-b\">\n\t\t\t\t\t\t{months.map((month) => {\n\t\t\t\t\t\t\tconst monthStart = month < startDate ? startDate : month;\n\t\t\t\t\t\t\tconst monthEnd = endOfMonth(month) > endDate ? endDate : endOfMonth(month);\n\t\t\t\t\t\t\tconst daysInMonth = differenceInDays(monthEnd, monthStart) + 1;\n\t\t\t\t\t\t\tconst width = daysInMonth * columnWidth;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={month.toISOString()}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:text-xs wwc:font-medium wwc:text-muted-foreground wwc:px-2 wwc:py-1.5 wwc:border-r wwc:shrink-0 wwc:truncate wwc:overflow-hidden\"\n\t\t\t\t\t\t\t\t\tstyle={{width}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{format(month, \"MMMM yyyy\")}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Days row */}\n\t\t\t\t\t<div className=\"wwc:flex\">\n\t\t\t\t\t\t{days.map((day) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={day.toISOString()}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"wwc:text-[10px] wwc:text-center wwc:py-1 wwc:border-r wwc:shrink-0\",\n\t\t\t\t\t\t\t\t\tisToday(day) && \"wwc:bg-primary wwc:text-primary-foreground wwc:font-medium\",\n\t\t\t\t\t\t\t\t\t!isToday(day) && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{width: columnWidth}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{format(day, \"d\")}\n\t\t\t\t\t\t\t</div>\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</div>\n\t);\n});\nGanttHeader.displayName = \"GanttHeader\";\n\n// Helper to flatten children (handles fragments)\nfunction flattenChildren(children: React.ReactNode): React.ReactElement[] {\n\tconst result: React.ReactElement[] = [];\n\n\tReact.Children.forEach(children, (child) => {\n\t\tif (!React.isValidElement(child)) return;\n\n\t\t// Handle fragments\n\t\tif (child.type === React.Fragment) {\n\t\t\tconst fragmentProps = child.props as {children?: React.ReactNode};\n\t\t\tresult.push(...flattenChildren(fragmentProps.children));\n\t\t} else {\n\t\t\tresult.push(child);\n\t\t}\n\t});\n\n\treturn result;\n}\n\n// Gantt Body - contains sidebar and scrollable timeline\ninterface GanttBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n\tshowTodayLine?: boolean;\n}\n\nconst GanttBody = React.forwardRef<HTMLDivElement, GanttBodyProps>(\n\t({className, children, showTodayLine = true, ...props}, ref) => {\n\t\tconst {startDate, endDate, columnWidth, sidebarWidth, timelineRef} = useGantt();\n\n\t\t// Calculate total timeline width\n\t\tconst days = eachDayOfInterval({start: startDate, end: endDate});\n\t\tconst totalWidth = days.length * columnWidth;\n\n\t\t// Flatten children to handle fragments\n\t\tconst flatChildren = flattenChildren(children);\n\t\tconst rowChildren = flatChildren.filter((child) => child.type === GanttRow);\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"wwc:flex wwc:overflow-hidden\", className)} {...props}>\n\t\t\t\t{/* Fixed sidebar */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wwc:shrink-0 wwc:border-r wwc:overflow-y-auto wwc:overflow-x-hidden\"\n\t\t\t\t\tstyle={{width: sidebarWidth}}\n\t\t\t\t>\n\t\t\t\t\t{rowChildren.map((child, index) =>\n\t\t\t\t\t\tReact.cloneElement(child as React.ReactElement<GanttRowProps>, {\n\t\t\t\t\t\t\tkey: child.key ?? index,\n\t\t\t\t\t\t\t_renderSidebar: true,\n\t\t\t\t\t\t}),\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Scrollable timeline */}\n\t\t\t\t<div\n\t\t\t\t\tref={timelineRef as React.RefObject<HTMLDivElement>}\n\t\t\t\t\tclassName=\"wwc:flex-1 wwc:overflow-x-auto wwc:overflow-y-auto\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"wwc:relative\" style={{minWidth: totalWidth}}>\n\t\t\t\t\t\t{showTodayLine && <GanttTodayLine />}\n\t\t\t\t\t\t{rowChildren.map((child, index) =>\n\t\t\t\t\t\t\tReact.cloneElement(child as React.ReactElement<GanttRowProps>, {\n\t\t\t\t\t\t\t\tkey: child.key ?? index,\n\t\t\t\t\t\t\t\t_renderTimeline: true,\n\t\t\t\t\t\t\t}),\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);\nGanttBody.displayName = \"GanttBody\";\n\n// Gantt Row\ninterface GanttRowProps extends React.HTMLAttributes<HTMLDivElement> {\n\tisGroup?: boolean;\n\t_renderSidebar?: boolean;\n\t_renderTimeline?: boolean;\n}\n\nconst GanttRow = React.forwardRef<HTMLDivElement, GanttRowProps>(\n\t({className, children, isGroup = false, _renderSidebar, _renderTimeline, ...props}, ref) => {\n\t\tconst {rowHeight} = useGantt();\n\n\t\t// Find sidebar and timeline children\n\t\tlet sidebarChild: React.ReactNode = null;\n\t\tlet timelineChild: React.ReactNode = null;\n\n\t\tReact.Children.forEach(children, (child) => {\n\t\t\tif (React.isValidElement(child)) {\n\t\t\t\tif (child.type === GanttSidebarCell) {\n\t\t\t\t\tsidebarChild = child;\n\t\t\t\t} else if (child.type === GanttTimelineCell) {\n\t\t\t\t\ttimelineChild = child;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\t// Render only sidebar part\n\t\tif (_renderSidebar) {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:flex wwc:w-full wwc:border-b wwc:border-border wwc:hover:bg-muted/30 wwc:transition-colors\",\n\t\t\t\t\t\tisGroup && \"wwc:bg-muted/20\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{minHeight: rowHeight}}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{sidebarChild}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\t// Render only timeline part\n\t\tif (_renderTimeline) {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:flex wwc:border-b wwc:border-border wwc:hover:bg-muted/30 wwc:transition-colors wwc:w-fit wwc:min-w-full\",\n\t\t\t\t\t\tisGroup && \"wwc:bg-muted/20\",\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{minHeight: rowHeight}}\n\t\t\t\t>\n\t\t\t\t\t{timelineChild}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\t// Default: render both (for backwards compatibility)\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:flex wwc:border-b wwc:border-border wwc:hover:bg-muted/30 wwc:transition-colors\",\n\t\t\t\t\tisGroup && \"wwc:bg-muted/20\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tstyle={{minHeight: rowHeight}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nGanttRow.displayName = \"GanttRow\";\n\n// Gantt Sidebar Cell (left panel)\nconst GanttSidebarCell = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({className, children, ...props}, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"wwc:flex-1 wwc:px-3 wwc:py-2 wwc:flex wwc:items-center wwc:bg-card wwc:self-stretch\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nGanttSidebarCell.displayName = \"GanttSidebarCell\";\n\n// Gantt Timeline Cell (right panel with grid)\nconst GanttTimelineCell = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({className, children, ...props}, ref) => {\n\t\tconst {startDate, endDate, columnWidth} = useGantt();\n\t\tconst days = eachDayOfInterval({start: startDate, end: endDate});\n\t\tconst totalWidth = days.length * columnWidth;\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"wwc:relative\", className)} style={{width: totalWidth}} {...props}>\n\t\t\t\t{/* Grid lines */}\n\t\t\t\t<div className=\"wwc:absolute wwc:inset-0 wwc:flex wwc:pointer-events-none\">\n\t\t\t\t\t{days.map((day) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={day.toISOString()}\n\t\t\t\t\t\t\tclassName={cn(\"wwc:border-r wwc:h-full wwc:shrink-0\", isToday(day) && \"wwc:bg-primary/5\")}\n\t\t\t\t\t\t\tstyle={{width: columnWidth}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Content */}\n\t\t\t\t<div className=\"wwc:relative wwc:h-full wwc:flex wwc:items-center wwc:py-1\">{children}</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nGanttTimelineCell.displayName = \"GanttTimelineCell\";\n\n// Gantt Bar\ninterface GanttBarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tstartDate: Date;\n\tendDate: Date;\n\tcolor?: \"default\" | \"muted\" | \"accent\" | \"chart1\" | \"chart2\" | \"chart3\" | \"chart4\" | \"chart5\";\n\tprogress?: number;\n\tlabel?: string;\n\tshowLabel?: boolean;\n}\n\nconst GanttBar = React.forwardRef<HTMLDivElement, GanttBarProps>(\n\t(\n\t\t{className, startDate: taskStart, endDate: taskEnd, color = \"default\", progress, label, showLabel = true, ...props},\n\t\tref,\n\t) => {\n\t\tconst {startDate: chartStart, columnWidth} = useGantt();\n\n\t\tconst offsetDays = differenceInDays(taskStart, chartStart);\n\t\tconst durationDays = differenceInDays(taskEnd, taskStart) + 1;\n\n\t\tconst left = offsetDays * columnWidth;\n\t\tconst width = durationDays * columnWidth;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:absolute wwc:h-7 wwc:rounded-md wwc:flex wwc:items-center wwc:px-2 wwc:text-xs wwc:font-medium wwc:shadow-sm\",\n\t\t\t\t\tbarColors[color],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\tleft,\n\t\t\t\t\twidth: Math.max(width, columnWidth),\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{showLabel && label && <span className=\"wwc:truncate\">{label}</span>}\n\t\t\t\t{progress !== undefined && <span className=\"wwc:ml-auto wwc:text-[10px] wwc:opacity-80\">{progress}%</span>}\n\t\t\t</div>\n\t\t);\n\t},\n);\nGanttBar.displayName = \"GanttBar\";\n\n// Gantt Today Line\nconst GanttTodayLine = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({className, ...props}, ref) => {\n\t\tconst {startDate, columnWidth} = useGantt();\n\n\t\tconst today = new Date();\n\t\tconst offsetDays = differenceInDays(today, startDate);\n\t\tconst left = offsetDays * columnWidth + columnWidth / 2;\n\n\t\tif (offsetDays < 0) return null;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:absolute wwc:top-0 wwc:bottom-0 wwc:w-0.5 wwc:bg-foreground wwc:z-50 wwc:pointer-events-none\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tstyle={{left}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div className=\"wwc:absolute wwc:top-2 wwc:left-1/2 wwc:-translate-x-1/2 wwc:bg-foreground wwc:text-background wwc:text-[10px] wwc:px-1.5 wwc:py-0.5 wwc:rounded wwc:font-medium wwc:whitespace-nowrap wwc:shadow-md\">\n\t\t\t\t\tToday\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nGanttTodayLine.displayName = \"GanttTodayLine\";\n\n// Gantt Milestone (diamond marker)\ninterface GanttMilestoneProps extends React.HTMLAttributes<HTMLDivElement> {\n\tdate: Date;\n\tcolor?: \"default\" | \"muted\" | \"accent\" | \"chart1\" | \"chart2\" | \"chart3\" | \"chart4\" | \"chart5\";\n}\n\nconst GanttMilestone = React.forwardRef<HTMLDivElement, GanttMilestoneProps>(\n\t({className, date, color = \"default\", ...props}, ref) => {\n\t\tconst {startDate: chartStart, columnWidth} = useGantt();\n\n\t\tconst offsetDays = differenceInDays(date, chartStart);\n\t\tconst left = offsetDays * columnWidth + columnWidth / 2;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"wwc:absolute wwc:w-3 wwc:h-3 wwc:rotate-45\", barColors[color], className)}\n\t\t\t\tstyle={{\n\t\t\t\t\tleft: left - 6,\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nGanttMilestone.displayName = \"GanttMilestone\";\n\n// Utility function to calculate date position\nfunction getDatePosition(date: Date, chartStart: Date, columnWidth: number) {\n\tconst offsetDays = differenceInDays(date, chartStart);\n\treturn offsetDays * columnWidth;\n}\n\nexport {\n\tGantt,\n\tGanttHeader,\n\tGanttBody,\n\tGanttRow,\n\tGanttSidebarCell,\n\tGanttTimelineCell,\n\tGanttBar,\n\tGanttTodayLine,\n\tGanttMilestone,\n\tuseGantt,\n\tgetDatePosition,\n};\n\nexport type {GanttHeaderProps};\n"],"mappings":"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"}

package/dist/graph-canvas.d.mts

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { Connection, Edge, EdgeChange, EdgeProps, FinalConnectionState, Handle, MarkerType, Node, NodeChange, NodeProps, Panel, Position, ReactFlowProps, ReactFlowProvider, Viewport, XYPosition, useEdgesState, useNodesState, useReactFlow, useViewport } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+//#region src/graph-canvas.d.ts
+/**
+ * The node-and-edge surface every Core graph view had grown its own copy of.
+ *
+ * Four canvases — the process state machine, the pipeline wiring, the data lineage DAG and the
+ * ontology graph explorer — each re-typed the same provider, the same dotted background, the same
+ * `Controls`, and the same viewport defaults. They had already started to diverge: three passed
+ * `fitViewOptions={{padding: 0.12}}` and one did not, so the odd one framed its graph tighter than
+ * its siblings for no reason anybody chose.
+ *
+ * This owns only the chrome and those defaults. Nodes, edges, handlers and `nodeTypes` stay with the
+ * caller — every `ReactFlowProps` is forwarded — because that is where the domain lives.
+ *
+ * The defaults suit a **layered DAG**: `smoothstep` edges, because bezier curves swoop out of their
+ * lane and cross each other between the last two columns, while orthogonal segments stay inside the
+ * gap between layers and read as wiring. Pass `layout="free"` to drop them — a free-form radial
+ * graph wants that, and so does the process state machine, which runs backwards and loops onto
+ * itself and is on React Flow's own default bezier for exactly that reason.
+ *
+ * ```tsx
+ * <GraphCanvas nodes={nodes} edges={edges} nodeTypes={NODE_TYPES} onNodeClick={select} />
+ * ```
+ *
+ * **Nodes are the caller's.** React Flow's built-in `default` / `input` / `output` renderers print
+ * `data.label` and nothing else, so a canvas with anything more to say ships its own component. Two
+ * ways to do that, and the choice is a visual one: register it under a name of your own for a box
+ * you style end to end, or under the `default` key to keep the library's node CSS — fill, border,
+ * radius, 150px width, centred 12px text, hover and selected shadow — and supply only the content
+ * and the handles. The process state machine takes the second route; see `ProcessFlowNode`.
+ */
+export interface GraphCanvasProps extends Omit<ReactFlowProps, "children"> {
+  /**
+   * `"layered"` (default) is a left-to-right or top-down DAG: orthogonal `smoothstep` edges and a
+   * padded `fitView` that frames the whole graph on mount. `"free"` is a radial or force-placed
+   * graph the user navigates — no edge-type default and no fit padding, since there is no lane
+   * structure to respect.
+   */
+  layout?: "layered" | "free";
+  /** Show the pannable/zoomable minimap. Off by default — see the note on `MiniMap` below. */
+  showMiniMap?: boolean;
+  /**
+   * Show React Flow's own zoom/fit `Controls`. On by default. Turn it off when the surrounding
+   * chrome already owns those actions — two fit buttons on one canvas is one too many.
+   */
+  showControls?: boolean;
+  /** Called by the Controls' fit-view button, for a canvas that wants an animated re-fit. */
+  onFitView?: () => void;
+  /** Rendered inside the canvas, after the chrome — panels, overlays, legends. */
+  children?: React.ReactNode;
+  /** Wrap in a `ReactFlowProvider`. Set false when the caller already owns one. Default true. */
+  withProvider?: boolean;
+}
+/** Themed `@xyflow/react` surface: dotted background, controls, and the house viewport defaults. */
+export declare function GraphCanvas({ layout, showMiniMap, showControls, onFitView, withProvider, className, children, style, ...flow }: GraphCanvasProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { type Connection, type Edge, type EdgeChange, type EdgeProps, type FinalConnectionState, Handle, MarkerType, type Node, type NodeChange, type NodeProps, Panel, Position, ReactFlowProvider, type Viewport, type XYPosition, useEdgesState, useNodesState, useReactFlow, useViewport };
+//# sourceMappingURL=graph-canvas.d.mts.map

package/dist/graph-canvas.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-canvas.d.mts","names":[],"sources":["../src/graph-canvas.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiGiB,yBAAyB,KAAK;;;;;;;EAO9C;;EAEA;;;;;EAKA;;EAEA;;EAEA,WAAW,MAAM;;EAEjB;;;wBA2De,cACf,QACA,aACA,cACA,WACA,cACA,WACA,UACA,UACG,QACD,+CAAgB,IAAA"}

package/dist/graph-canvas.mjs

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Background, BackgroundVariant, Controls, Handle, MarkerType, MiniMap, Panel, Position, ReactFlow, ReactFlowProvider, ReactFlowProvider as ReactFlowProvider$1, useEdgesState, useNodesState, useReactFlow, useViewport } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+//#region src/graph-canvas.tsx
+/**
+* The host's colour mode, read from the `dark` class Core toggles on `<html>` and kept in sync as
+* it flips.
+*
+* React Flow scopes its own chrome — node fill and border, edge stroke, the Controls buttons, the
+* MiniMap — under `.react-flow.dark`, and its `colorMode` prop is the only supported way to put that
+* class on the canvas. A canvas whose nodes are React Flow's own (see the note below) would otherwise
+* paint white boxes with near-black borders on a near-black page. SSR-safe: resolves to "light" when
+* there is no `document`.
+*/
+function useColorMode() {
+	const [mode, setMode] = React.useState(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light");
+	React.useEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		const sync = () => setMode(root.classList.contains("dark") ? "dark" : "light");
+		sync();
+		const observer = new MutationObserver(sync);
+		observer.observe(root, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return mode;
+}
+/**
+* The canvas ground, lifted from reactflow.dev's own example theme (`xy-theme.css`), which sets
+* `--xy-background-color` to these two values.
+*
+* React Flow's library default is `transparent` in light mode — right for their white docs page, but
+* here it would show the Card underneath and leave the dotted grid sitting on nothing. Setting THEIR
+* variable rather than a `background-color` of our own keeps the library's own rule in charge, and
+* keeps the dots — which read `--xy-background-pattern-dots-color-default`, #91919a light / #555
+* dark — on the ground those greys were picked against.
+*/
+const XY_EXAMPLE_GROUND = {
+	light: "#f7f9fb",
+	dark: "#101012"
+};
+/**
+* What a SELECTED node looks like.
+*
+* React Flow's own answer is `0 0 0 0.5px #1a192b` — half a pixel of near-black, which on a white
+* node in a quiet graph is readable and on a tinted one is invisible. Clicking a node has to say so.
+*
+* Set as React Flow's OWN variable rather than a rule of ours, so nothing about how a node renders
+* changes: the library still owns when the ring appears, on which element, and at what radius. Its
+* CSS scopes this to the built-in node type names, so it reaches a node registered under `default`
+* (the process state machine's) and leaves a canvas with fully custom node components alone. The
+* same declaration covers `:focus-visible`, so a keyboard user gets the identical ring for free.
+*
+* The ring is the primary token, not a fixed colour, so it follows the theme; the lift underneath it
+* is what separates "picked" from "merely outlined" at a glance.
+*/
+const XY_NODE_SELECTED_SHADOW = "0 0 0 2px var(--wwc-color-primary), 0 2px 10px -3px rgb(0 0 0 / 0.25)";
+/** Themed `@xyflow/react` surface: dotted background, controls, and the house viewport defaults. */
+function GraphCanvas({ layout = "layered", showMiniMap = false, showControls = true, onFitView, withProvider = true, className, children, style, ...flow }) {
+	const colorMode = useColorMode();
+	const canvas = /* @__PURE__ */ jsxs(ReactFlow, {
+		...layout === "layered" ? {
+			defaultEdgeOptions: { type: "smoothstep" },
+			fitViewOptions: { padding: .12 }
+		} : {},
+		fitView: true,
+		minZoom: .2,
+		colorMode,
+		proOptions: { hideAttribution: false },
+		className,
+		style: {
+			["--xy-background-color"]: XY_EXAMPLE_GROUND[colorMode],
+			["--xy-node-boxshadow-selected"]: XY_NODE_SELECTED_SHADOW,
+			...style
+		},
+		...flow,
+		children: [
+			/* @__PURE__ */ jsx(Background, {
+				variant: BackgroundVariant.Dots,
+				gap: 16,
+				size: 1
+			}),
+			showControls ? /* @__PURE__ */ jsx(Controls, {
+				showInteractive: false,
+				onFitView
+			}) : null,
+			showMiniMap ? /* @__PURE__ */ jsx(MiniMap, {
+				pannable: true,
+				zoomable: true,
+				nodeStrokeWidth: 2,
+				className: "wwc:!bg-card"
+			}) : null,
+			children
+		]
+	});
+	return withProvider ? /* @__PURE__ */ jsx(ReactFlowProvider$1, { children: canvas }) : canvas;
+}
+//#endregion
+export { GraphCanvas, Handle, MarkerType, Panel, Position, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useViewport };
+
+//# sourceMappingURL=graph-canvas.mjs.map

package/dist/graph-canvas.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-canvas.mjs","names":["ReactFlowProvider"],"sources":["../src/graph-canvas.tsx"],"sourcesContent":["import type {ReactFlowProps} from \"@xyflow/react\";\n\nimport {Background, BackgroundVariant, Controls, MiniMap, ReactFlow, ReactFlowProvider} from \"@xyflow/react\";\nimport * as React from \"react\";\n// React Flow's own stylesheet, loaded ONCE from the module that owns the dependency. It survives the\n// tsdown build (verified in dist/graph-canvas.mjs), so a caller that renders a GraphCanvas gets it\n// without importing anything itself — which is what lets the pages in this repo stop importing it.\nimport \"@xyflow/react/dist/style.css\";\n\n// ─── The React Flow surface Core owns ────────────────────────────────────\n//\n// Everything a canvas page needs from `@xyflow/react` is re-exported here, so a page imports\n// Core and nothing else. Nothing is renamed and nothing is wrapped: these ARE React Flow's\n// primitives, and pretending otherwise behind Core-sounding aliases would only make the next\n// person open two files to find the real documentation. What changes is the DOOR — one module owns\n// the dependency, its stylesheet and its version, so a page cannot quietly pick up a second copy of\n// React Flow's context or drift onto an API this canvas has not adopted.\n//\n// The provider, the viewport defaults, the colour mode, the dotted ground and the Controls are NOT\n// here: those are the chrome, and the chrome is the component below.\n\n/** A node on the canvas. */\nexport type {Node, Edge, NodeProps, EdgeProps, Connection, FinalConnectionState} from \"@xyflow/react\";\n\n/** The engine's report of what changed about a node — a drag, a selection, a removal. */\nexport type {NodeChange, EdgeChange, Viewport, XYPosition} from \"@xyflow/react\";\n\n/**\n * `Handle` is a node's connection point; `Position` names the side it sits on. A custom node\n * component renders these itself — React Flow has no way to place them for you.\n */\nexport {Handle, Position} from \"@xyflow/react\";\n\n/** Arrowhead shapes for an edge's `markerStart` / `markerEnd`. */\nexport {MarkerType} from \"@xyflow/react\";\n\n/**\n * An overlay pinned to a corner of the canvas, above the graph and inside the pan/zoom surface.\n * Render it as a child of {@link GraphCanvas}.\n */\nexport {Panel} from \"@xyflow/react\";\n\n/**\n * The controlled node and edge collections, with the change handlers React Flow needs to own drag,\n * selection and removal while the record stays the source of truth between gestures.\n */\nexport {useNodesState, useEdgesState} from \"@xyflow/react\";\n\n/**\n * The live canvas instance — `fitView`, zoom, viewport. Only valid inside a {@link GraphCanvas},\n * which supplies the provider it reads.\n */\nexport {useReactFlow} from \"@xyflow/react\";\n\n/**\n * The current pan and zoom, re-rendering on every viewport change — what a zoom readout outside the\n * canvas reads. Like {@link useReactFlow}, only valid inside a provider.\n */\nexport {useViewport} from \"@xyflow/react\";\n\n/**\n * The canvas context. {@link GraphCanvas} mounts one itself; render this yourself only to put your\n * own chrome — a zoom control, an inspector — beside the canvas and inside the same context, then\n * pass `withProvider={false}` so there is exactly one.\n */\nexport {ReactFlowProvider} from \"@xyflow/react\";\n\n/**\n * The node-and-edge surface every Core graph view had grown its own copy of.\n *\n * Four canvases — the process state machine, the pipeline wiring, the data lineage DAG and the\n * ontology graph explorer — each re-typed the same provider, the same dotted background, the same\n * `Controls`, and the same viewport defaults. They had already started to diverge: three passed\n * `fitViewOptions={{padding: 0.12}}` and one did not, so the odd one framed its graph tighter than\n * its siblings for no reason anybody chose.\n *\n * This owns only the chrome and those defaults. Nodes, edges, handlers and `nodeTypes` stay with the\n * caller — every `ReactFlowProps` is forwarded — because that is where the domain lives.\n *\n * The defaults suit a **layered DAG**: `smoothstep` edges, because bezier curves swoop out of their\n * lane and cross each other between the last two columns, while orthogonal segments stay inside the\n * gap between layers and read as wiring. Pass `layout=\"free\"` to drop them — a free-form radial\n * graph wants that, and so does the process state machine, which runs backwards and loops onto\n * itself and is on React Flow's own default bezier for exactly that reason.\n *\n * ```tsx\n * <GraphCanvas nodes={nodes} edges={edges} nodeTypes={NODE_TYPES} onNodeClick={select} />\n * ```\n *\n * **Nodes are the caller's.** React Flow's built-in `default` / `input` / `output` renderers print\n * `data.label` and nothing else, so a canvas with anything more to say ships its own component. Two\n * ways to do that, and the choice is a visual one: register it under a name of your own for a box\n * you style end to end, or under the `default` key to keep the library's node CSS — fill, border,\n * radius, 150px width, centred 12px text, hover and selected shadow — and supply only the content\n * and the handles. The process state machine takes the second route; see `ProcessFlowNode`.\n */\n\nexport interface GraphCanvasProps extends Omit<ReactFlowProps, \"children\"> {\n\t/**\n\t * `\"layered\"` (default) is a left-to-right or top-down DAG: orthogonal `smoothstep` edges and a\n\t * padded `fitView` that frames the whole graph on mount. `\"free\"` is a radial or force-placed\n\t * graph the user navigates — no edge-type default and no fit padding, since there is no lane\n\t * structure to respect.\n\t */\n\tlayout?: \"layered\" | \"free\";\n\t/** Show the pannable/zoomable minimap. Off by default — see the note on `MiniMap` below. */\n\tshowMiniMap?: boolean;\n\t/**\n\t * Show React Flow's own zoom/fit `Controls`. On by default. Turn it off when the surrounding\n\t * chrome already owns those actions — two fit buttons on one canvas is one too many.\n\t */\n\tshowControls?: boolean;\n\t/** Called by the Controls' fit-view button, for a canvas that wants an animated re-fit. */\n\tonFitView?: () => void;\n\t/** Rendered inside the canvas, after the chrome — panels, overlays, legends. */\n\tchildren?: React.ReactNode;\n\t/** Wrap in a `ReactFlowProvider`. Set false when the caller already owns one. Default true. */\n\twithProvider?: boolean;\n}\n\n/**\n * The host's colour mode, read from the `dark` class Core toggles on `<html>` and kept in sync as\n * it flips.\n *\n * React Flow scopes its own chrome — node fill and border, edge stroke, the Controls buttons, the\n * MiniMap — under `.react-flow.dark`, and its `colorMode` prop is the only supported way to put that\n * class on the canvas. A canvas whose nodes are React Flow's own (see the note below) would otherwise\n * paint white boxes with near-black borders on a near-black page. SSR-safe: resolves to \"light\" when\n * there is no `document`.\n */\nfunction useColorMode(): \"light\" | \"dark\" {\n\tconst [mode, setMode] = React.useState<\"light\" | \"dark\">(() =>\n\t\ttypeof document !== \"undefined\" && document.documentElement.classList.contains(\"dark\") ? \"dark\" : \"light\",\n\t);\n\tReact.useEffect(() => {\n\t\tif (typeof document === \"undefined\") return;\n\t\tconst root = document.documentElement;\n\t\tconst sync = () => setMode(root.classList.contains(\"dark\") ? \"dark\" : \"light\");\n\t\tsync();\n\t\tconst observer = new MutationObserver(sync);\n\t\tobserver.observe(root, {attributes: true, attributeFilter: [\"class\"]});\n\t\treturn () => observer.disconnect();\n\t}, []);\n\treturn mode;\n}\n\n/**\n * The canvas ground, lifted from reactflow.dev's own example theme (`xy-theme.css`), which sets\n * `--xy-background-color` to these two values.\n *\n * React Flow's library default is `transparent` in light mode — right for their white docs page, but\n * here it would show the Card underneath and leave the dotted grid sitting on nothing. Setting THEIR\n * variable rather than a `background-color` of our own keeps the library's own rule in charge, and\n * keeps the dots — which read `--xy-background-pattern-dots-color-default`, #91919a light / #555\n * dark — on the ground those greys were picked against.\n */\nconst XY_EXAMPLE_GROUND = {light: \"#f7f9fb\", dark: \"#101012\"} as const;\n\n/**\n * What a SELECTED node looks like.\n *\n * React Flow's own answer is `0 0 0 0.5px #1a192b` — half a pixel of near-black, which on a white\n * node in a quiet graph is readable and on a tinted one is invisible. Clicking a node has to say so.\n *\n * Set as React Flow's OWN variable rather than a rule of ours, so nothing about how a node renders\n * changes: the library still owns when the ring appears, on which element, and at what radius. Its\n * CSS scopes this to the built-in node type names, so it reaches a node registered under `default`\n * (the process state machine's) and leaves a canvas with fully custom node components alone. The\n * same declaration covers `:focus-visible`, so a keyboard user gets the identical ring for free.\n *\n * The ring is the primary token, not a fixed colour, so it follows the theme; the lift underneath it\n * is what separates \"picked\" from \"merely outlined\" at a glance.\n */\nconst XY_NODE_SELECTED_SHADOW = \"0 0 0 2px var(--wwc-color-primary), 0 2px 10px -3px rgb(0 0 0 / 0.25)\";\n\n/** Themed `@xyflow/react` surface: dotted background, controls, and the house viewport defaults. */\nexport function GraphCanvas({\n\tlayout = \"layered\",\n\tshowMiniMap = false,\n\tshowControls = true,\n\tonFitView,\n\twithProvider = true,\n\tclassName,\n\tchildren,\n\tstyle,\n\t...flow\n}: GraphCanvasProps) {\n\tconst colorMode = useColorMode();\n\tconst canvas = (\n\t\t<ReactFlow\n\t\t\t// A layered DAG gets orthogonal wiring; a free graph keeps React Flow's own default.\n\t\t\t{...(layout === \"layered\" ? {defaultEdgeOptions: {type: \"smoothstep\"}, fitViewOptions: {padding: 0.12}} : {})}\n\t\t\tfitView\n\t\t\tminZoom={0.2}\n\t\t\t// Before the spread, so a caller can still pin a canvas to one mode.\n\t\t\tcolorMode={colorMode}\n\t\t\t// Attribution stays visible: @xyflow/react is MIT only while the credit is shown.\n\t\t\tproOptions={{hideAttribution: false}}\n\t\t\tclassName={className}\n\t\t\t// Spread last so a caller can pin its own ground; the library's rule reads this variable.\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t[\"--xy-background-color\"]: XY_EXAMPLE_GROUND[colorMode],\n\t\t\t\t\t[\"--xy-node-boxshadow-selected\"]: XY_NODE_SELECTED_SHADOW,\n\t\t\t\t\t...style,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t\t{...flow}\n\t\t>\n\t\t\t{/* No colour prop and no className: the dot fill comes from\n\t\t\t    --xy-background-pattern-dots-color-default, never from `currentColor`, so a text-colour\n\t\t\t    class here paints nothing. The default greys are the ones the examples use. */}\n\t\t\t<Background variant={BackgroundVariant.Dots} gap={16} size={1} />\n\t\t\t{showControls ? <Controls showInteractive={false} onFitView={onFitView} /> : null}\n\t\t\t{/* Off by default on purpose: a fitted DAG always frames itself, so a minimap only\n\t\t\t    duplicates what is already on screen and covers the last column. It earns its place on a\n\t\t\t    free-form graph you actually navigate. */}\n\t\t\t{showMiniMap ? <MiniMap pannable zoomable nodeStrokeWidth={2} className=\"wwc:!bg-card\" /> : null}\n\t\t\t{children}\n\t\t</ReactFlow>\n\t);\n\n\treturn withProvider ? <ReactFlowProvider>{canvas}</ReactFlowProvider> : canvas;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkIA,SAAS,eAAiC;CACzC,MAAM,CAAC,MAAM,WAAW,MAAM,eAC7B,OAAO,aAAa,eAAe,SAAS,gBAAgB,UAAU,SAAS,MAAM,IAAI,SAAS,OACnG;CACA,MAAM,gBAAgB;EACrB,IAAI,OAAO,aAAa,aAAa;EACrC,MAAM,OAAO,SAAS;EACtB,MAAM,aAAa,QAAQ,KAAK,UAAU,SAAS,MAAM,IAAI,SAAS,OAAO;EAC7E,KAAK;EACL,MAAM,WAAW,IAAI,iBAAiB,IAAI;EAC1C,SAAS,QAAQ,MAAM;GAAC,YAAY;GAAM,iBAAiB,CAAC,OAAO;EAAC,CAAC;EACrE,aAAa,SAAS,WAAW;CAClC,GAAG,CAAC,CAAC;CACL,OAAO;AACR;;;;;;;;;;;AAYA,MAAM,oBAAoB;CAAC,OAAO;CAAW,MAAM;AAAS;;;;;;;;;;;;;;;;AAiB5D,MAAM,0BAA0B;;AAGhC,SAAgB,YAAY,EAC3B,SAAS,WACT,cAAc,OACd,eAAe,MACf,WACA,eAAe,MACf,WACA,UACA,OACA,GAAG,QACiB;CACpB,MAAM,YAAY,aAAa;CAC/B,MAAM,SACL,qBAAC,WAAD;EAEC,GAAK,WAAW,YAAY;GAAC,oBAAoB,EAAC,MAAM,aAAY;GAAG,gBAAgB,EAAC,SAAS,IAAI;EAAC,IAAI,CAAC;EAC3G,SAAA;EACA,SAAS;EAEE;EAEX,YAAY,EAAC,iBAAiB,MAAK;EACxB;EAEX,OACC;IACE,0BAA0B,kBAAkB;IAC5C,iCAAiC;GAClC,GAAG;EACJ;EAED,GAAI;EAlBL,UAAA;GAuBC,oBAAC,YAAD;IAAY,SAAS,kBAAkB;IAAM,KAAK;IAAI,MAAM;GAAI,CAAA;GAC/D,eAAe,oBAAC,UAAD;IAAU,iBAAiB;IAAkB;GAAY,CAAA,IAAI;GAI5E,cAAc,oBAAC,SAAD;IAAS,UAAA;IAAS,UAAA;IAAS,iBAAiB;IAAG,WAAU;GAAgB,CAAA,IAAI;GAC3F;EACS;;CAGZ,OAAO,eAAe,oBAACA,qBAAD,EAAA,UAAoB,OAA0B,CAAA,IAAI;AACzE"}

package/dist/grid.d.mts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/grid.d.ts
+declare const gridVariants: (props?: ({
+  columns?: 1 | 2 | 3 | 4 | 6 | 5 | 12 | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+  /** Render as a different HTML element */
+  as?: React.ElementType;
+}
+/** A CSS Grid layout component for creating grid-based layouts. */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Grid, gridVariants };
+//# sourceMappingURL=grid.d.mts.map

package/dist/grid.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.mts","names":[],"sources":["../src/grid.tsx"],"mappings":";;;cAIM,eAAY;;;6CAwBhB;iBAEe,kBAAkB,MAAM,eAAe,iBAAiB,oBAAoB;;EAE5F,KAAK,MAAM;;;cAIN,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}

package/dist/grid.mjs

@@ -0,0 +1,47 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/grid.tsx
+const gridVariants = cva("wwc:grid", {
+	variants: {
+		columns: {
+			1: "wwc:grid-cols-1",
+			2: "wwc:grid-cols-2",
+			3: "wwc:grid-cols-3",
+			4: "wwc:grid-cols-4",
+			5: "wwc:grid-cols-5",
+			6: "wwc:grid-cols-6",
+			12: "wwc:grid-cols-12"
+		},
+		gap: {
+			none: "wwc:gap-0",
+			xs: "wwc:gap-1",
+			sm: "wwc:gap-2",
+			md: "wwc:gap-4",
+			lg: "wwc:gap-6",
+			xl: "wwc:gap-8"
+		}
+	},
+	defaultVariants: {
+		columns: 1,
+		gap: "md"
+	}
+});
+/** A CSS Grid layout component for creating grid-based layouts. */
+const Grid = React.forwardRef(({ className, columns, gap, as: Component = "div", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: cn(gridVariants({
+			columns,
+			gap,
+			className
+		})),
+		...props
+	});
+});
+Grid.displayName = "Grid";
+//#endregion
+export { Grid, gridVariants };
+
+//# sourceMappingURL=grid.mjs.map

package/dist/grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.mjs","names":[],"sources":["../src/grid.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport * as React from \"react\";\n\nconst gridVariants = cva(\"wwc:grid\", {\n\tvariants: {\n\t\tcolumns: {\n\t\t\t1: \"wwc:grid-cols-1\",\n\t\t\t2: \"wwc:grid-cols-2\",\n\t\t\t3: \"wwc:grid-cols-3\",\n\t\t\t4: \"wwc:grid-cols-4\",\n\t\t\t5: \"wwc:grid-cols-5\",\n\t\t\t6: \"wwc:grid-cols-6\",\n\t\t\t12: \"wwc:grid-cols-12\",\n\t\t},\n\t\tgap: {\n\t\t\tnone: \"wwc:gap-0\",\n\t\t\txs: \"wwc:gap-1\",\n\t\t\tsm: \"wwc:gap-2\",\n\t\t\tmd: \"wwc:gap-4\",\n\t\t\tlg: \"wwc:gap-6\",\n\t\t\txl: \"wwc:gap-8\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolumns: 1,\n\t\tgap: \"md\",\n\t},\n});\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {\n\t/** Render as a different HTML element */\n\tas?: React.ElementType;\n}\n\n/** A CSS Grid layout component for creating grid-based layouts. */\nconst Grid = React.forwardRef<HTMLDivElement, GridProps>(\n\t({className, columns, gap, as: Component = \"div\", ...props}, ref) => {\n\t\treturn <Component ref={ref} className={cn(gridVariants({columns, gap, className}))} {...props} />;\n\t},\n);\nGrid.displayName = \"Grid\";\n\nexport {Grid, gridVariants};\n"],"mappings":";;;;;AAIA,MAAM,eAAe,IAAI,YAAY;CACpC,UAAU;EACT,SAAS;GACR,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,IAAI;EACL;EACA,KAAK;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACL;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,KAAK;CACN;AACD,CAAC;;AAQD,MAAM,OAAO,MAAM,YACjB,EAAC,WAAW,SAAS,KAAK,IAAI,YAAY,OAAO,GAAG,SAAQ,QAAQ;CACpE,OAAO,oBAAC,WAAD;EAAgB;EAAK,WAAW,GAAG,aAAa;GAAC;GAAS;GAAK;EAAS,CAAC,CAAC;EAAG,GAAI;CAAQ,CAAA;AACjG,CACD;AACA,KAAK,cAAc"}

package/dist/heading.d.mts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/heading.d.ts
+declare const headingVariants: (props?: ({
+  level?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
+  variant?: "muted" | "default" | "accent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
+  /** Override the semantic HTML tag while keeping the visual style */
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+/** Semantic heading element with consistent typography. */
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+//#endregion
+export { Heading, headingVariants };
+//# sourceMappingURL=heading.d.mts.map

package/dist/heading.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.mts","names":[],"sources":["../src/heading.tsx"],"mappings":";;;cAIM,kBAAe;;;6CAoBnB;iBAEe,qBAAqB,MAAM,eAAe,qBAAqB,oBAAoB;;EAEnG;;;cAIK,SAAO,MAAA,0BAAA,eAAA,MAAA,cAAA"}