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/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.