Feature/builder functionalities

.gitignore

@@ -49,3 +49,5 @@ src/generated
 public/builder/uploads/logo/*
 WARP.md
 /public/uploads/media/*
+/src/app/generated/*
+/src/app/generated.css

src/app/admin/[adminKey]/builder/present/[id]/[breakpoint]/page.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import React, { Usable } from "react";
+import { BreakpointProvider } from "@/feature/builder/contexts/BreakpointContext";
+import { usePageFooterByPage } from "@/feature/page/_footer/queries/usePageFooter";
+import { usePageHeaderByPage } from "@/feature/page/_header/queries/usePageHeader";
+import { usePageById } from "@/feature/page/queries/usePageById";
+import { PageLight } from "@/feature/page/types/page";
+import { PageFooter, PageHeader } from "@/generated/prisma";
+import { PageRenderer } from "@/public/renderer/PageRenderer";
+
+export default function PagePresenter({
+	params,
+}: {
+	params: { id: string; breakpoint: string };
+}) {
+	const { id: idParam, breakpoint: bpParam } = React.use(
+		params as unknown as Usable<{ id: string; breakpoint: string }>,
+	);
+
+	// Support builder opening with "new" when no page exists yet
+	if (idParam === "new") {
+		const bpNum = parseInt(bpParam || "0", 10) || 0;
+		return (
+			<div style={{ padding: 16 }}>
+				<h2>Preview (new page)</h2>
+				<div
+					style={{
+						width: bpNum ? `${bpNum}px` : "100%",
+						maxWidth: bpNum ? `${bpNum}px` : "100%",
+						margin: "0 auto",
+						border: "1px solid #e5e7eb",
+						background: "white",
+						minHeight: 400,
+					}}
+				/>
+			</div>
+		);
+	}
+
+	const pageId = Number(idParam);
+	const breakpoint = Number(bpParam) || 0;
+	const bpName = breakpoint ? `bp-${breakpoint}` : "default";
+
+	const {
+		error: pageError,
+		data: page,
+		isLoading: pageLoading,
+	} = usePageById(pageId);
+	const { data: pageHeader } = usePageHeaderByPage(
+		pageId > 0 ? pageId : undefined,
+	);
+	const { data: pageFooter } = usePageFooterByPage(
+		pageId > 0 ? pageId : undefined,
+	);
+
+	if (pageLoading) {
+		return <div style={{ padding: 16 }}>Loading preview…</div>;
+	}
+
+	// Handle possible auth error response shape returned by server helpers
+	if (!page) {
+		return <div style={{ padding: 16 }}>Unable to load page.</div>;
+	}
+	if (pageError) {
+		return (
+			<div style={{ padding: 16 }}>
+				Error loading page: {pageError.message}
+			</div>
+		);
+	}
+
+	// page is expected to be a Page object at this point
+	const content = (page as PageLight).content;
+
+	return (
+		<div style={{ padding: 16 }}>
+			<h1
+				style={{
+					marginBottom: 8,
+					padding: 24,
+					color: "#fff",
+					textAlign: "center",
+					backgroundColor: "black",
+				}}
+			>
+				Preview - Page {pageId} - {breakpoint}px
+			</h1>
+			<div
+				style={{
+					width: breakpoint ? `${breakpoint}px` : "100%",
+					maxWidth: breakpoint ? `${breakpoint}px` : "100%",
+					margin: "0 auto",
+					background: "white",
+					border: "1px solid #e5e7eb",
+					minHeight: 200,
+					overflow: "hidden",
+				}}
+			>
+				<BreakpointProvider
+					value={{ name: bpName, width: breakpoint || 1440 }}
+				>
+					<PageRenderer
+						content={content}
+						footerContent={(pageFooter as PageHeader)?.content}
+						headerContent={(pageHeader as PageFooter)?.content}
+					/>
+				</BreakpointProvider>
+			</div>
+		</div>
+	);
+}

src/app/globals.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./generated.css";
 
 .dark {
 	--background: oklch(0.145 0 0);

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import "./generated.css";
 import { NextIntlClientProvider } from "next-intl";
 import { getLocale } from "next-intl/server";
 import QueryProvider from "@/providers/QueryProvider";

src/feature/builder/actions/cssActions.ts

@@ -0,0 +1,77 @@
+"use server";
+
+import { promises as fs } from "fs";
+import path from "path";
+
+export async function generateCssAction({
+	css,
+	pageId,
+	fileName,
+}: {
+	css: string;
+	pageId: number | string;
+	fileName: string; // sanitized filename computed client-side
+}): Promise<{ ok: boolean; file?: string; error?: string }> {
+	if (!css || !fileName || (!pageId && pageId !== 0)) {
+		return { ok: false, error: "Missing css, fileName, or pageId" };
+	}
+
+	try {
+		const cwd = process.cwd();
+		const appDir = path.join(cwd, "src", "app");
+		const generatedDir = path.join(appDir, "generated");
+		const generated = path.join(appDir, "generated.css");
+		const targetCssPath = path.join(generatedDir, fileName);
+
+		// Ensure generated directory exists
+		await fs.mkdir(generatedDir, { recursive: true });
+
+		// Write or replace the per-page CSS file
+		await fs.writeFile(targetCssPath, css, "utf8");
+
+		// Update globals.css to import this CSS
+		let globals = "";
+		try {
+			globals = await fs.readFile(generated, "utf8");
+		} catch (_e) {
+			// If globals.css doesn't exist, create it
+			globals = "";
+		}
+
+		const pageIdStr = String(pageId);
+		const importRegex = new RegExp(
+			String.raw`^\s*@import\s+["']\.\/generated\/page-${pageIdStr}-[^"']+["'];\s*$`,
+			"gm",
+		);
+
+		// Remove any existing imports for this page id
+		globals = globals.replace(importRegex, "").trimEnd() + "\n";
+
+		const newImport = `@import "./generated/${fileName}";`;
+
+		if (!globals.includes(newImport)) {
+			// Append the new import near the top, after existing imports if any
+			const lines = globals.split(/\r?\n/);
+			let insertIndex = 0;
+			while (
+				insertIndex < lines.length &&
+				lines[insertIndex].trim().startsWith("@import")
+			) {
+				insertIndex++;
+			}
+			lines.splice(insertIndex, 0, newImport);
+			globals = lines.join("\n");
+			await fs.writeFile(generated, globals, "utf8");
+		}
+
+		return {
+			ok: true,
+			file: `src/app/generated/${fileName}`,
+		};
+	} catch (error) {
+		return {
+			ok: false,
+			error: (error as { message: string })?.message ?? String(error),
+		};
+	}
+}

src/feature/builder/components/Builder.tsx

@@ -6,7 +6,10 @@ import { useAdminKey } from "@/feature/admin-key/lib/utils";
 import BuilderLeftSidebar from "@/feature/builder/components/ui/BuilderLeftSidebar";
 import BuilderPreview from "@/feature/builder/components/ui/BuilderPreview";
 import BuilderRightSidebar from "@/feature/builder/components/ui/BuilderRightSidebar";
+import { useActiveBreakpointStore } from "@/feature/builder/store/storeActiveBreakpoint";
+import { Breakpoint } from "@/feature/builder/types/breakpoint";
 import { useAddPage } from "@/feature/page/hooks/useAddPage";
+import { useSetting } from "@/feature/settings/queries/useSettings";
 
 export default function BuilderComponent() {
 	const searchParams = useSearchParams();
@@ -15,6 +18,8 @@ export default function BuilderComponent() {
 	const action = searchParams.get("action");
 	const hasProcessedAction = useRef(false);
 	const { addPage } = useAddPage();
+	const { active: activeBreakpoint, setActive: setActiveBreakpoint } =
+		useActiveBreakpointStore();
 
 	// Function to clean up the URL after the action
 	const clearActionFromUrl = useCallback(() => {
@@ -50,11 +55,25 @@ export default function BuilderComponent() {
 		[addPage, clearActionFromUrl],
 	);
 
+	const breakPoints = useSetting("builder_breakpoints");
+
 	useEffect(() => {
 		if (action && !hasProcessedAction.current) {
 			executeAction(action);
 		}
-	}, [action, executeAction]);
+		if (!activeBreakpoint) {
+			const bps: Breakpoint[] = breakPoints?.data?.value
+				? JSON.parse(breakPoints.data.value)
+				: [];
+			if (bps.length > 0) {
+				// set the biggest breakpoint as active
+				const sortedBps = bps.sort(
+					(a, b) => (b.width || 0) - (a.width || 0),
+				);
+				setActiveBreakpoint(sortedBps[0]);
+			}
+		}
+	}, [action, executeAction, breakPoints]);
 
 	return (
 		<div className="flex-1 flex">

src/feature/builder/components/builder_components/ui/Button.tsx

@@ -5,9 +5,19 @@ import { BuilderComponent } from "@/feature/builder/types/components/components"
 
 interface ButtonProps {
 	component: BuilderComponent;
+	className?: string;
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	onDragLeave?: React.DragEventHandler<HTMLElement>;
+	onDragOver?: React.DragEventHandler<HTMLElement>;
 }
 
-export const Button: React.FC<ButtonProps> = ({ component }) => {
+export const Button: React.FC<ButtonProps> = ({
+	component,
+	className,
+	onClick,
+	onDragLeave,
+	onDragOver,
+}) => {
 	// Extract content with sensible fallbacks
 	const text = (component.props?.content?.text as string) || "Button";
 	const href = (component.props?.content?.href as string) || "";
@@ -79,8 +89,11 @@ export const Button: React.FC<ButtonProps> = ({ component }) => {
 		...mapStylePropsToCss(component.props?.style),
 	};
 
-	const className =
+	const classNameLocal =
 		"inline-flex items-center gap-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2";
+	const mergedClassName = [classNameLocal, className]
+		.filter(Boolean)
+		.join(" ");
 
 	const handleClick = React.useCallback(
 		(e?: React.MouseEvent) => {
@@ -103,9 +116,14 @@ export const Button: React.FC<ButtonProps> = ({ component }) => {
 
 	return (
 		<ButtonShadcn
-			className={className}
+			className={mergedClassName}
 			data-href={href || undefined}
-			onClick={handleClick}
+			onClick={(e) => {
+				handleClick(e);
+				if (onClick) onClick(e);
+			}}
+			onDragLeave={onDragLeave}
+			onDragOver={onDragOver}
 			style={commonStyle}
 			type="button"
 		>

src/feature/builder/components/builder_components/ui/Checkbox.tsx

@@ -4,9 +4,19 @@ import { BuilderComponent } from "../../../types/components/components";
 
 interface CheckboxProps {
 	component: BuilderComponent;
+	className?: string;
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	onDragLeave?: React.DragEventHandler<HTMLElement>;
+	onDragOver?: React.DragEventHandler<HTMLElement>;
 }
 
-export const Checkbox: React.FC<CheckboxProps> = ({ component }) => {
+export const Checkbox: React.FC<CheckboxProps> = ({
+	component,
+	className,
+	onClick,
+	onDragLeave,
+	onDragOver,
+}) => {
 	// Default checkbox properties if not provided
 	const label = (component.props?.content?.label as string) || "Checkbox";
 	const name =
@@ -18,7 +28,12 @@ export const Checkbox: React.FC<CheckboxProps> = ({ component }) => {
 
 	return (
 		<div
-			className="flex items-start"
+			className={["flex items-start", className]
+				.filter(Boolean)
+				.join(" ")}
+			onClick={onClick}
+			onDragLeave={onDragLeave}
+			onDragOver={onDragOver}
 			style={{
 				order: component.order || 0, // Use order property for positioning
 				...mapStylePropsToCss(component.props?.style),

src/feature/builder/components/builder_components/ui/Container.tsx

@@ -12,14 +12,29 @@ import { ComponentRenderer } from "../../../lib/renderers/ComponentRenderer";
 
 interface ContainerProps {
 	component: BuilderComponent;
+	className?: string;
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	onDragLeave?: React.DragEventHandler<HTMLElement>;
+	onDragOver?: React.DragEventHandler<HTMLElement>;
 }
 
-export const Container: React.FC<ContainerProps> = ({ component }) => {
+export const Container: React.FC<ContainerProps> = ({
+	component,
+	className,
+	onClick,
+	onDragLeave,
+	onDragOver,
+}) => {
 	// Get the setTargetComponent function from context
 	const dragDropContext = useContext(DragDropContext);
 	return (
 		<div
-			className="relative container"
+			className={["relative builder-container", className]
+				.filter(Boolean)
+				.join(" ")}
+			onClick={onClick}
+			onDragLeave={onDragLeave}
+			onDragOver={onDragOver}
 			style={{
 				order: component.order || 0, // Use order property for positioning
 				...mapStylePropsToCss(component.props?.style),
@@ -59,6 +74,7 @@ export const Container: React.FC<ContainerProps> = ({ component }) => {
 										);
 									}
 								}}
+								region={"content"}
 							/>
 						))}
 				</>