feat: extend theme builder with block visibility, layout, effects, media, and custom CSS tabs

- Add theme-blocks.ts registry with 24 themeable blocks across 4 categories
- Extend resolver to resolve blocks, layout, effects, media, and custom CSS per scope
- Add data-theme-block attributes to all site layout blocks
- Extend ScopedThemeVars to generate CSS for block visibility, layout vars, effect vars, media vars, and custom CSS
- Rewrite admin UI with 6 tabs: Colors, Blocks, Layout, Effects, Media, Custom
- Extend server actions to save/load all new setting types
- No database migration needed - uses existing theme_scope_values table with prefixed keys

src/app/(site)/layout.tsx

@@ -22,20 +22,35 @@ export default async function SiteLayout({
 		<>
 			{session?.user?.id ? (
 				<>
+					<div data-theme-block="top_header">
 						<TopHeader session={session} />
+					</div>
+					<div data-theme-block="site_header">
 						<SiteHeader />
+					</div>
+					<div data-theme-block="navigation">
 						<Navigation session={session} />
+					</div>
 				</>
 			) : null}
 			<main>
-				<div className="mx-auto mt-4 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-5 px-3 py-3 sm:px-4 sm:py-4 md:mt-0 md:px-6 md:py-6 md:gap-y-6">
+				<div
+					data-theme-block="content_grid"
+					className="mx-auto mt-4 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-5 px-3 py-3 sm:px-4 sm:py-4 md:mt-0 md:px-6 md:py-6 md:gap-y-6"
+				>
 					<div className="col-span-12 min-w-0">
+						<div data-theme-block="page_transition">
 							<MotionPageWrapper>{children}</MotionPageWrapper>
 						</div>
 					</div>
+				</div>
 			</main>
+			<div data-theme-block="footer">
 				<SiteFooter />
+			</div>
+			<div data-theme-block="radio_player">
 				<RadioPlayerGate />
+			</div>
 		</>
 	);
 }

src/app/admin/theme-builder/page.tsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import { getThemeBuilderData } from "@/actions/theme-builder";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { getFullScopeValues } from "@/lib/theme-resolver";
 import { ScopeForm } from "./scope-form";
 import { ScopeTree } from "./scope-tree";
 import { ThemeEditor } from "./theme-editor";
@@ -22,6 +23,18 @@ export default async function ThemeBuilderPage({
 
 	const selectedId = sp.scope ? Number(sp.scope) : (scopes[0]?.id ?? null);
 
+	const values = selectedId
+		? await getFullScopeValues(selectedId)
+		: {
+				light: {},
+				dark: {},
+				blocks: {},
+				layout: {},
+				effects: {},
+				media: {},
+				custom: {},
+			};
+
 	return (
 		<div>
 			<h1 className="admin-section-title mb-4">Theme Builder</h1>
@@ -66,7 +79,7 @@ export default async function ThemeBuilderPage({
 
 				<div className="lg:col-span-9">
 					{selectedId ? (
-						<ThemeEditor scopeId={selectedId} scopes={scopes} />
+						<ThemeEditor scopeId={selectedId} scopes={scopes} values={values} />
 					) : (
 						<div className="admin-card p-8 text-center text-[var(--admin-text-muted)]">
 							Select or create a scope to start editing.