feat: filter empty projects from public gallery (#125)

* feat(community): filter empty projects from public gallery Add is_empty column to projects table so the public gallery only shows projects with actual content. Scene graph emptiness is computed on save and on creation, and a backfill migration marks existing non-empty projects. Also cleans up import ordering, fixes README migration path, and removes stale feedback table migration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Use ESNext modules and bundler resolution Update packages/db tsconfig to emit ESNext modules and use 'bundler' moduleResolution. This enables modern ESM output and bundler-style resolution for the db package (keeps outDir and rootDir unchanged). * feat(editor): add dark mode theme and grid visibility toggle Add theme state to viewer store with light/dark modes, dark-aware lighting and background colors, grid show/hide toggle in settings, and theme toggle buttons in the sidebar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add ground occluder, animated lighting & UI tweaks Introduce a ground occluder and smoother animated lighting while adjusting editor UI and icons. Viewer: add GroundOccluder (uses polygon-clipping to union slab/zone polygons) and AnimatedBackground, integrate both into the Canvas; improve Lights to interpolate intensities/colors/ambient for smooth theme transitions. Editor: refactor sidebar header to support inline project title editing and move the theme toggle; replace some lucide icons with image assets and add a settings icon (apps/editor/public/icons/settings.png). Also add polygon-clipping to the viewer package dependencies. * Update dark mode background color and clean up imports Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-27 23:49:48 -05:00
parent 5077011c26
commit 98c1d5247e
25 changed files with 2775 additions and 91 deletions
@@ -1,11 +1,11 @@
 'use client'

-import Editor from '@/components/editor'
 import { useParams, useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
-import { useProjectStore } from '@/features/community/lib/projects/store'
-import { useAuth } from '@/features/community/lib/auth/hooks'
+import Editor from '@/components/editor'
 import { SceneLoader } from '@/components/ui/scene-loader'
+import { useAuth } from '@/features/community/lib/auth/hooks'
+import { useProjectStore } from '@/features/community/lib/projects/store'

 export default function EditorPage() {
  const params = useParams()
@@ -32,6 +32,12 @@ export const Grid = ({
  fadeStrength?: number
  revealRadius?: number
 }) => {
+  const theme = useViewer((state) => state.theme)
+  
+  // Use slightly lighter colors for dark mode grid to make it apparent
+  const effectiveCellColor = theme === 'dark' ? '#555566' : cellColor
+  const effectiveSectionColor = theme === 'dark' ? '#666677' : sectionColor
+  
  const cursorPositionRef = useRef(new Vector2(0, 0))

  const material = useMemo(() => {
@@ -78,13 +84,16 @@ export const Grid = ({

    // Mix colors based on section grid
    const gridColor = mix(
-      color(cellColor),
-      color(sectionColor),
+      color(effectiveCellColor),
+      color(effectiveSectionColor),
      float(sectionThickness).mul(g2).min(1),
    )

-    // Combined alpha with cursor fade
-    const alpha = g1.add(g2).mul(fade).mul(cursorFade)
+    // Baseline alpha: small amount of opacity everywhere the grid exists
+    const baseAlpha = float(0.4) // Subtle global visibility
+    
+    // Combined alpha with cursor fade and baseline minimum
+    const alpha = g1.add(g2).mul(fade).mul(cursorFade.max(baseAlpha))
    const finalAlpha = mix(alpha.mul(0.75), alpha, g2)

    return new MeshBasicNodeMaterial({
@@ -96,13 +105,14 @@ export const Grid = ({
  }, [
    cellSize,
    cellThickness,
-    cellColor,
+    effectiveCellColor,
    sectionSize,
    sectionThickness,
-    sectionColor,
+    effectiveSectionColor,
    fadeDistance,
    fadeStrength,
    revealRadius,
+    theme,
  ])

  const gridRef = useRef<Mesh>(null!)
@@ -137,8 +147,10 @@ export const Grid = ({
    setGridY(newY)
  })

+  const showGrid = useViewer((state) => state.showGrid)
+
  return (
-    <mesh rotation-x={-Math.PI / 2} material={material} ref={gridRef}>
+    <mesh rotation-x={-Math.PI / 2} material={material} ref={gridRef} visible={showGrid}>
      <planeGeometry args={[fadeDistance * 2, fadeDistance * 2]} />
    </mesh>
  )
@@ -2,7 +2,8 @@

 import { useState, useRef, useEffect, useCallback } from "react";
 import { IconRail, type PanelId } from "./icon-rail";
-import { Pencil } from "lucide-react";
+import { Pencil, Moon, Sun, Monitor } from "lucide-react";
+import { motion } from "framer-motion";

 import {
  Sidebar,
@@ -14,15 +15,23 @@ import { SettingsPanel } from "./panels/settings-panel";
 import { SitePanel } from "./panels/site-panel";
 import { useProjectStore } from "@/features/community/lib/projects/store";
 import { updateProjectName } from "@/features/community/lib/projects/actions";
+import { useViewer } from "@pascal-app/viewer";

 export function AppSidebar() {
  const [activePanel, setActivePanel] = useState<PanelId>("site");
  const activeProject = useProjectStore((s) => s.activeProject);
+  const theme = useViewer((state) => state.theme);
+  const setTheme = useViewer((state) => state.setTheme);
+  const [mounted, setMounted] = useState(false);

  const [isEditingTitle, setIsEditingTitle] = useState(false);
  const [titleValue, setTitleValue] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
  useEffect(() => {
    if (isEditingTitle) {
      setTitleValue(activeProject?.name || "Untitled Project");
@@ -93,29 +102,84 @@ export function AppSidebar() {

        {/* Panel Content */}
        <div className="flex flex-1 flex-col overflow-hidden">
-          <SidebarHeader className="flex-col items-start justify-center px-3 py-3 gap-1 border-b border-border/50">
-            {isEditingTitle ? (
-              <input
-                ref={inputRef}
-                type="text"
-                value={titleValue}
-                onChange={(e) => setTitleValue(e.target.value)}
-                onKeyDown={handleKeyDown}
-                onBlur={handleSaveTitle}
-                placeholder="Untitled Project"
-                className="w-full bg-transparent text-foreground outline-none border-b border-primary/50 focus:border-primary rounded-none px-0 py-0 m-0 h-7 font-semibold text-lg"
-              />
-            ) : (
-              <div 
-                className="flex items-center gap-2 group/title cursor-pointer w-full h-7 border-b border-transparent"
-                onClick={() => setIsEditingTitle(true)}
-              >
-                <h1 className="font-semibold text-lg truncate flex-1">
-                  {activeProject?.name || "Untitled Project"}
-                </h1>
-                <Pencil className="w-3.5 h-3.5 opacity-0 group-hover/title:opacity-100 transition-opacity text-muted-foreground shrink-0" />
+          <SidebarHeader className="flex-col items-start justify-center px-3 py-3 gap-1 border-b border-border/50 relative">
+            <div className="flex w-full items-center justify-between gap-2">
+              <div className="flex-1 min-w-0">
+                {isEditingTitle ? (
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={titleValue}
+                    onChange={(e) => setTitleValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={handleSaveTitle}
+                    placeholder="Untitled Project"
+                    className="w-full bg-transparent text-foreground outline-none border-b border-primary/50 focus:border-primary rounded-none px-0 py-0 m-0 h-7 font-semibold text-lg"
+                  />
+                ) : (
+                  <div 
+                    className="flex items-center gap-2 group/title cursor-pointer w-full h-7 border-b border-transparent"
+                    onClick={() => setIsEditingTitle(true)}
+                  >
+                    <h1 className="font-semibold text-lg truncate">
+                      {activeProject?.name || "Untitled Project"}
+                    </h1>
+                    <Pencil className="w-3.5 h-3.5 opacity-0 group-hover/title:opacity-100 transition-opacity text-muted-foreground shrink-0" />
+                  </div>
+                )}
              </div>
-            )}
+              
+              {mounted && (
+                <button
+                  className="shrink-0 flex items-center bg-accent/50 rounded-full p-1 border border-border/50 cursor-pointer"
+                  onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                  type="button"
+                  aria-label="Toggle theme"
+                >
+                  <div className="relative flex">
+                    {/* Sliding Background */}
+                    <motion.div
+                      className="absolute inset-0 bg-white shadow-sm rounded-full dark:bg-white/20"
+                      initial={false}
+                      animate={{
+                        x: theme === "light" ? "100%" : "0%",
+                      }}
+                      transition={{
+                        type: "spring",
+                        stiffness: 500,
+                        damping: 35,
+                      }}
+                      style={{ width: "50%" }}
+                    />
+
+                    {/* Dark Mode Icon */}
+                    <div
+                      className={cn(
+                        "relative z-10 flex h-6 w-8 items-center justify-center rounded-full transition-colors duration-200 pointer-events-none",
+                        theme === "dark"
+                          ? "text-foreground"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      <Moon className="h-3.5 w-3.5" />
+                    </div>
+
+                    {/* Light Mode Icon */}
+                    <div
+                      className={cn(
+                        "relative z-10 flex h-6 w-8 items-center justify-center rounded-full transition-colors duration-200 pointer-events-none",
+                        theme === "light"
+                          ? "text-foreground"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      <Sun className="h-3.5 w-3.5" />
+                    </div>
+                  </div>
+                </button>
+              )}
+            </div>
+            
            <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
              {getPanelTitle()}
            </span>
@@ -1,14 +1,16 @@
 "use client";

-import { Building2, Settings } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
+import { useEffect, useState } from "react";
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/primitives/tooltip";
 import { cn } from "@/lib/utils";
+import { useViewer } from "@pascal-app/viewer";

 export type PanelId = "site" | "settings";

@@ -18,9 +20,9 @@ interface IconRailProps {
  className?: string;
 }

-const panels: { id: PanelId; icon: typeof Building2; label: string }[] = [
-  { id: "site", icon: Building2, label: "Site" },
-  { id: "settings", icon: Settings, label: "Settings" },
+const panels: { id: PanelId; iconSrc: string; label: string }[] = [
+  { id: "site", iconSrc: "/icons/level.png", label: "Site" },
+  { id: "settings", iconSrc: "/icons/settings.png", label: "Settings" },
 ];

 export function IconRail({
@@ -28,10 +30,18 @@ export function IconRail({
  onPanelChange,
  className,
 }: IconRailProps) {
+  const theme = useViewer((state) => state.theme);
+  const setTheme = useViewer((state) => state.setTheme);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
  return (
    <div
      className={cn(
-        "flex w-11 flex-col items-center gap-1 border-border/50 border-r py-2",
+        "flex h-full w-11 flex-col items-center gap-1 border-border/50 border-r py-2",
        className,
      )}
    >
@@ -58,7 +68,6 @@ export function IconRail({
      <div className="w-8 h-px bg-border/50 mb-1" />

      {panels.map((panel) => {
-        const Icon = panel.icon;
        const isActive = activePanel === panel.id;
        return (
          <Tooltip key={panel.id}>
@@ -67,19 +76,45 @@ export function IconRail({
                className={cn(
                  "flex h-9 w-9 items-center justify-center rounded-lg transition-all",
                  isActive
-                    ? "bg-primary text-primary-foreground"
-                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                    ? "bg-accent"
+                    : "hover:bg-accent",
                )}
                onClick={() => onPanelChange(panel.id)}
                type="button"
              >
-                <Icon className="h-4 w-4" />
+                <img 
+                  src={panel.iconSrc} 
+                  alt={panel.label} 
+                  className={cn(
+                    "h-6 w-6 transition-all object-contain", 
+                    !isActive && "opacity-50 saturate-0"
+                  )} 
+                />
              </button>
            </TooltipTrigger>
            <TooltipContent side="right">{panel.label}</TooltipContent>
          </Tooltip>
        );
      })}
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Theme Toggle */}
+      {mounted && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              className="flex h-9 w-9 items-center justify-center rounded-lg transition-all text-muted-foreground hover:bg-accent hover:text-accent-foreground mb-2"
+              onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+              type="button"
+            >
+              {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Toggle theme</TooltipContent>
+        </Tooltip>
+      )}
    </div>
  );
 }
@@ -309,6 +309,18 @@ export function SettingsPanel() {
              onCheckedChange={(checked) => handleVisibilityChange('showGuidesPublic', checked)}
            />
          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm font-medium">Show Grid</div>
+              <div className="text-xs text-muted-foreground">
+                Visible only in the editor
+              </div>
+            </div>
+            <Switch
+              checked={useViewer((state) => state.showGrid)}
+              onCheckedChange={(checked) => useViewer.getState().setShowGrid(checked)}
+            />
+          </div>
        </div>
      )}

@@ -162,7 +162,7 @@ This feature requires:
  - `properties` - Property records
  - `properties_addresses` - Property addresses
  - `properties_models` - Scene graph models
- Database migrations are managed in `packages/db/supabase/migrations/`
+- Database migrations are managed in `supabase/migrations/`

 ## Development

@@ -10,6 +10,7 @@ import { createServerSupabaseClient } from '../database/server'
 import { getSession } from '../auth/server'
 import { createId } from '../utils/id-generator'
 import type { ActionResult } from '../projects/actions'
+import { isSceneGraphEmpty } from './scene-graph-utils'

 export interface SceneGraph {
  nodes: Record<AnyNodeId, AnyNode>
@@ -166,6 +167,14 @@ export async function saveProjectModel(
      }
    }

+    // Determine if scene graph is empty
+    const isEmpty = isSceneGraphEmpty(sceneGraph)
+
+    // Update the project's is_empty flag
+    await (supabase.from('projects') as any)
+      .update({ is_empty: isEmpty })
+      .eq('id', projectId)
+
    // Check if a model already exists
    const { data: existingModel } = await supabase
      .from('projects_models')
@@ -0,0 +1,25 @@
+import type { SceneGraph } from './actions'
+
+const DEFAULT_NODE_TYPES = ['site', 'building', 'level']
+
+export function isSceneGraphEmpty(sceneGraph: SceneGraph | any): boolean {
+  if (!sceneGraph?.nodes) return true
+
+  const nodes = Object.values(sceneGraph.nodes) as any[]
+
+  if (nodes.length > 3) {
+    return false
+  }
+
+  const hasNonDefaultNodes = nodes.some((n) => !DEFAULT_NODE_TYPES.includes(n.type))
+  if (hasNonDefaultNodes) {
+    return false
+  }
+
+  const levelNode = nodes.find((n) => n.type === 'level')
+  if (Array.isArray(levelNode?.children) && levelNode.children.length > 0) {
+    return false
+  }
+
+  return true
+}
@@ -8,7 +8,8 @@
 import { createServerSupabaseClient } from '../database/server'
 import { getSession } from '../auth/server'
 import { createId } from '../utils/id-generator'
-import type { CreateProjectParams, Project, Database } from './types'
+import { isSceneGraphEmpty } from '../models/scene-graph-utils'
+import type { CreateProjectParams, Project } from './types'

 export type ActionResult<T = unknown> = {
  success: boolean
@@ -250,6 +251,9 @@ export async function createProject(params: CreateProjectParams): Promise<Action
      }
    }

+    // Determine if scene graph is empty
+    const isEmpty = params.sceneGraph ? isSceneGraphEmpty(params.sceneGraph) : true
+
    // Create the project
    const projectData = {
      id: projectId,
@@ -257,6 +261,7 @@ export async function createProject(params: CreateProjectParams): Promise<Action
      address_id: addressId,
      owner_id: session.user.id,
      is_private: params.isPrivate !== undefined ? params.isPrivate : true,
+      is_empty: isEmpty,
      details_json: params.center
        ? {
            coordinates: params.center,
@@ -401,6 +406,7 @@ export async function getPublicProjects(): Promise<ActionResult<Project[]>> {
        owner:auth_users!owner_id(id, name, username, image)
      `)
      .eq('is_private', false)
+      .eq('is_empty', false)
      .order('views', { ascending: false })
      .limit(50)

@@ -13,6 +13,7 @@ export type DbProject = {
  created_at: string
  updated_at: string
  is_private: boolean
+  is_empty: boolean
  show_scans_public: boolean
  show_guides_public: boolean
  views: number
@@ -106,6 +107,7 @@ export type Project = {
  updated_at: string
  // Community features
  is_private: boolean
+  is_empty: boolean
  show_scans_public: boolean
  show_guides_public: boolean
  views: number
@@ -174,6 +174,7 @@
      "name": "@pascal-app/viewer",
      "version": "0.1.13",
      "dependencies": {
+        "polygon-clipping": "^0.15.7",
        "zustand": "^5",
      },
      "devDependencies": {
@@ -1314,6 +1315,8 @@

    "picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],

+    "polygon-clipping": ["polygon-clipping@0.15.7", "", { "dependencies": { "robust-predicates": "^3.0.2", "splaytree": "^3.1.0" } }, "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA=="],
+
    "portless": ["portless@0.4.2", "", { "dependencies": { "chalk": "^5.3.0" }, "os": [ "linux", "darwin", ], "bin": { "portless": "dist/cli.js" } }, "sha512-/G3jIeD1XokoO9KY/lUGTV9irKz3tgx8yqHkz+hvj/86QeR219GvYFB+QEfpvjRlvvLVJa5vE7BkRfBZBe/lQg=="],

    "possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
@@ -1388,6 +1391,8 @@

    "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],

+    "robust-predicates": ["robust-predicates@3.0.2", "", {}, "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="],
+
    "rou3": ["rou3@0.7.12", "", {}, "sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg=="],

    "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
@@ -1438,6 +1443,8 @@

    "source-map-support": ["source-map-support@0.5.21", "", { "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" } }, "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="],

+    "splaytree": ["splaytree@3.2.3", "", {}, "sha512-7OXrNWzy6CK+r7Ch9OLPBDTKfB6XlWHjX4P0RU5B3IgFuWPeYN0XtRtlexGRjgbQxpfaUve6jTAwBGWuGntz/w=="],
+
    "split2": ["split2@4.2.0", "", {}, "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg=="],

    "stats-gl": ["stats-gl@2.4.2", "", { "dependencies": { "@types/three": "*", "three": "^0.170.0" } }, "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ=="],
@@ -20,6 +20,7 @@ export const projects = pgTable(
    metadata: t.jsonb('metadata'),
    // Community features
    isPrivate: t.boolean('is_private').notNull().default(true),
+    isEmpty: t.boolean('is_empty').notNull().default(true),
    showScansPublic: t.boolean('show_scans_public').notNull().default(true),
    showGuidesPublic: t.boolean('show_guides_public').notNull().default(true),
    views: t.integer('views').notNull().default(0),
@@ -1,24 +0,0 @@
-- Create feedback table
-CREATE TABLE IF NOT EXISTS feedback (
-  id TEXT NOT NULL PRIMARY KEY,
-  user_id TEXT,
-  message TEXT NOT NULL,
-  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
-- Enable Row Level Security
-ALTER TABLE feedback ENABLE ROW LEVEL SECURITY;
-
-- Allow anyone (authenticated or anonymous) to submit feedback
-CREATE POLICY "Anyone can insert feedback"
-  ON feedback
-  FOR INSERT
-  TO anon, authenticated
-  WITH CHECK (true);
-
-- Allow service role full access (for admin review)
-CREATE POLICY "Service role full access"
-  ON feedback
-  TO service_role
-  USING (true)
-  WITH CHECK (true);
@@ -2,7 +2,9 @@
  "extends": "@repo/typescript-config/base.json",
  "compilerOptions": {
    "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "bundler"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
@@ -29,6 +29,7 @@
    "three": "^0.183"
  },
  "dependencies": {
+    "polygon-clipping": "^0.15.7",
    "zustand": "^5"
  },
  "devDependencies": {
@@ -0,0 +1,70 @@
+import { useScene } from '@pascal-app/core'
+import { useMemo } from 'react'
+import * as THREE from 'three'
+import useViewer from '../../store/use-viewer'
+import polygonClipping from 'polygon-clipping'
+
+export const GroundOccluder = () => {
+  const theme = useViewer((state) => state.theme)
+  const bgColor = theme === 'dark' ? '#1f2433' : '#fafafa'
+  
+  const nodes = useScene((state) => state.nodes)
+
+  const shape = useMemo(() => {
+    const s = new THREE.Shape()
+    const size = 100000
+    // Create outer infinite plane
+    s.moveTo(-size, -size)
+    s.lineTo(size, -size)
+    s.lineTo(size, size)
+    s.lineTo(-size, size)
+    s.closePath()
+
+    // Collect all polygons for slabs and zones
+    const polygons: [number, number][][] = []
+    
+    Object.values(nodes).forEach((node) => {
+      if ((node.type === 'slab' || node.type === 'zone') && node.polygon && node.polygon.length >= 3) {
+        polygons.push(node.polygon as [number, number][])
+      }
+    })
+
+    if (polygons.length > 0) {
+      // Format for polygon-clipping: [[[x, y], [x, y], ...]]
+      const multiPolygons = polygons.map(pts => {
+        const ring = pts.map(p => [p[0], -p[1]] as [number, number]) // Negate Y (which was Z)
+        return [ring]
+      })
+
+      // Union all polygons together to prevent artifacts from overlapping
+      const unionedPolygons = polygonClipping.union(multiPolygons[0]!, ...multiPolygons.slice(1))
+
+      // Add each resulting unioned polygon as a hole
+      for (const geom of unionedPolygons) {
+        // First ring in each geometry is the exterior ring
+        if (geom.length > 0) {
+          const ring = geom[0]!
+          const hole = new THREE.Path()
+          
+          if (ring.length > 0) {
+            hole.moveTo(ring[0]![0], ring[0]![1])
+            for (let i = 1; i < ring.length; i++) {
+              hole.lineTo(ring[i]![0], ring[i]![1])
+            }
+            hole.closePath()
+            s.holes.push(hole)
+          }
+        }
+      }
+    }
+
+    return s
+  }, [nodes])
+
+  return (
+    <mesh rotation-x={-Math.PI / 2} position-y={-0.05}>
+      <shapeGeometry args={[shape]} />
+      <meshBasicMaterial color={bgColor} depthWrite={true} />
+    </mesh>
+  )
+}
@@ -1,22 +1,57 @@
 'use client'

-import { CeilingSystem, DoorSystem, ItemSystem, RoofSystem, SlabSystem, WallSystem, WindowSystem } from '@pascal-app/core'
+import {
+  CeilingSystem,
+  DoorSystem,
+  ItemSystem,
+  RoofSystem,
+  SlabSystem,
+  WallSystem,
+  WindowSystem,
+} from '@pascal-app/core'
 import { Bvh } from '@react-three/drei'
-import { Canvas, extend, type ThreeToJSXElements } from '@react-three/fiber'
+import { Canvas, extend, type ThreeToJSXElements, useFrame } from '@react-three/fiber'
+import { useEffect, useMemo, useRef } from 'react'
 import * as THREE from 'three/webgpu'
+import useViewer from '../../store/use-viewer'
 import { GuideSystem } from '../../systems/guide/guide-system'
 import { LevelSystem } from '../../systems/level/level-system'
 import { ScanSystem } from '../../systems/scan/scan-system'
 import { WallCutout } from '../../systems/wall/wall-cutout'
 import { ZoneSystem } from '../../systems/zone/zone-system'
 import { SceneRenderer } from '../renderers/scene-renderer'
+import { GroundOccluder } from './ground-occluder'
 import { Lights } from './lights'
 import PostProcessing from './post-processing'
 import { SelectionManager } from './selection-manager'
 import { ViewerCamera } from './viewer-camera'

-import { useEffect } from 'react'
-import useViewer from '../../store/use-viewer'
+function AnimatedBackground({ isDark }: { isDark: boolean }) {
+  const targetColor = useMemo(() => new THREE.Color(), [])
+  const initialized = useRef(false)
+
+  useFrame(({ scene }, delta) => {
+    const dt = Math.min(delta, 0.1) * 4
+    const targetHex = isDark ? '#1f2433' : '#ffffff'
+
+    if (!scene.background || !(scene.background instanceof THREE.Color)) {
+      scene.background = new THREE.Color(targetHex)
+      initialized.current = true
+      return
+    }
+
+    if (!initialized.current) {
+      scene.background.set(targetHex)
+      initialized.current = true
+      return
+    }
+
+    targetColor.set(targetHex)
+    scene.background.lerp(targetColor, dt)
+  })
+
+  return null
+}

 declare module '@react-three/fiber' {
  interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
@@ -30,8 +65,15 @@ interface ViewerProps {
  isEditor?: boolean
 }

-const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default', isEditor = false }) => {
+const Viewer: React.FC<ViewerProps> = ({
+  children,
+  selectionManager = 'default',
+  isEditor = false,
+}) => {
  const setIsEditor = useViewer((state) => state.setIsEditor)
+  const theme = useViewer((state) => state.theme)
+
+  const bgColor = theme === 'dark' ? '#1f2433' : '#fafafa'

  useEffect(() => {
    setIsEditor(isEditor)
@@ -40,7 +82,7 @@ const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default',
  return (
    <Canvas
      dpr={[1, 1.5]}
-      className={'bg-[#fafafa]'}
+      className={`transition-colors duration-700 ${theme === 'dark' ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`}
      gl={(props) => {
        const renderer = new THREE.WebGPURenderer(props as any)
        renderer.toneMapping = THREE.ACESFilmicToneMapping
@@ -53,7 +95,8 @@ const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default',
      }}
      camera={{ position: [50, 50, 50], fov: 50 }}
    >
-      <color attach="background" args={['#fafafa']} />
+      <AnimatedBackground isDark={theme === 'dark'} />
+      <GroundOccluder />
      <ViewerCamera />

      {/* <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow
@@ -1,26 +1,100 @@
-import { useRef } from 'react'
-import type { DirectionalLight, OrthographicCamera } from 'three/webgpu'
+import { useRef, useMemo } from 'react'
+import { useFrame } from '@react-three/fiber'
+import * as THREE from 'three/webgpu'
+import type { DirectionalLight, OrthographicCamera, AmbientLight } from 'three/webgpu'
+import useViewer from '../../store/use-viewer'

 export function Lights() {
-  const lightRef = useRef<DirectionalLight>(null)
+  const theme = useViewer((state) => state.theme)
+  const isDark = theme === 'dark'
+
+  const light1Ref = useRef<DirectionalLight>(null)
  const shadowCamera = useRef<OrthographicCamera>(null)
  const shadowCameraSize = 50 // The "area" around the camera to shadow

-  // useHelper(lightRef, DirectionalLightHelper, 1, 'red')
-  // useHelper(shadowCamera, CameraHelper)
+  const light2Ref = useRef<DirectionalLight>(null)
+  const light3Ref = useRef<DirectionalLight>(null)
+  const ambientRef = useRef<AmbientLight>(null)
+
+  const initialized = useRef(false)
+  
+  const targets = useMemo(() => ({
+    l1Color: new THREE.Color(),
+    l2Color: new THREE.Color(),
+    l3Color: new THREE.Color(),
+    ambColor: new THREE.Color(),
+  }), [])
+
+  useFrame((_, delta) => {
+    // clamp delta to avoid huge jumps on tab switch
+    const dt = Math.min(delta, 0.1) * 4
+
+    if (!initialized.current) {
+      if (light1Ref.current) {
+        light1Ref.current.intensity = isDark ? 0.8 : 4
+        light1Ref.current.color.set(isDark ? '#e0e5ff' : '#ffffff')
+        // @ts-ignore
+        if (light1Ref.current.shadow) light1Ref.current.shadow.intensity = isDark ? 0.8 : 0.4
+      }
+      if (light2Ref.current) {
+        light2Ref.current.intensity = isDark ? 0.2 : 0.75
+        light2Ref.current.color.set(isDark ? '#8090ff' : '#ffffff')
+      }
+      if (light3Ref.current) {
+        light3Ref.current.intensity = isDark ? 0.3 : 1
+        light3Ref.current.color.set(isDark ? '#a0b0ff' : '#ffffff')
+      }
+      if (ambientRef.current) {
+        ambientRef.current.intensity = isDark ? 0.15 : 0.5
+        ambientRef.current.color.set(isDark ? '#a0b0ff' : '#ffffff')
+      }
+      initialized.current = true
+      return
+    }
+
+    if (light1Ref.current) {
+      light1Ref.current.intensity = THREE.MathUtils.lerp(light1Ref.current.intensity, isDark ? 0.8 : 4, dt)
+      targets.l1Color.set(isDark ? '#e0e5ff' : '#ffffff')
+      light1Ref.current.color.lerp(targets.l1Color, dt)
+      
+      if (light1Ref.current.shadow) {
+        // @ts-ignore
+        if (light1Ref.current.shadow.intensity !== undefined) {
+          // @ts-ignore
+          light1Ref.current.shadow.intensity = THREE.MathUtils.lerp(light1Ref.current.shadow.intensity, isDark ? 0.8 : 0.4, dt)
+        }
+      }
+    }
+
+    if (light2Ref.current) {
+      light2Ref.current.intensity = THREE.MathUtils.lerp(light2Ref.current.intensity, isDark ? 0.2 : 0.75, dt)
+      targets.l2Color.set(isDark ? '#8090ff' : '#ffffff')
+      light2Ref.current.color.lerp(targets.l2Color, dt)
+    }
+
+    if (light3Ref.current) {
+      light3Ref.current.intensity = THREE.MathUtils.lerp(light3Ref.current.intensity, isDark ? 0.3 : 1, dt)
+      targets.l3Color.set(isDark ? '#a0b0ff' : '#ffffff')
+      light3Ref.current.color.lerp(targets.l3Color, dt)
+    }
+
+    if (ambientRef.current) {
+      ambientRef.current.intensity = THREE.MathUtils.lerp(ambientRef.current.intensity, isDark ? 0.15 : 0.5, dt)
+      targets.ambColor.set(isDark ? '#a0b0ff' : '#ffffff')
+      ambientRef.current.color.lerp(targets.ambColor, dt)
+    }
+  })

  return (
    <>
      <directionalLight
-        ref={lightRef}
+        ref={light1Ref}
        position={[10, 10, 10]}
        castShadow
-        intensity={4}
        shadow-bias={-0.002}
        shadow-normalBias={0.3}
        shadow-mapSize={[1024, 1024]}
        shadow-radius={3}
-        shadow-intensity={0.4}
      >
        <orthographicCamera
          ref={shadowCamera}
@@ -35,18 +109,16 @@ export function Lights() {
      </directionalLight>

      <directionalLight
+        ref={light2Ref}
        position={[-10, 10, -10]}
-        intensity={0.75}
      />

      <directionalLight
+        ref={light3Ref}
        position={[-10, 10, 10]}
-        intensity={1}
      />

-      <ambientLight intensity={0.5} 
-        color='white' />
-      {/* <Environment preset="sunset" environmentIntensity={0.4} /> */}
+      <ambientLight ref={ambientRef} />
    </>
  )
 }
@@ -35,6 +35,9 @@ type ViewerState = {
  cameraMode: 'perspective' | 'orthographic'
  setCameraMode: (mode: 'perspective' | 'orthographic') => void

+  theme: 'light' | 'dark'
+  setTheme: (theme: 'light' | 'dark') => void
+
  levelMode: 'stacked' | 'exploded' | 'solo' | 'manual'
  setLevelMode: (mode: 'stacked' | 'exploded' | 'solo' | 'manual') => void

@@ -47,9 +50,12 @@ type ViewerState = {
  showGuides: boolean
  setShowGuides: (show: boolean) => void

+  showGrid: boolean
+  setShowGrid: (show: boolean) => void
+
  projectId: string | null
  setProjectId: (id: string | null) => void
-  projectPreferences: Record<string, { showScans?: boolean, showGuides?: boolean }>
+  projectPreferences: Record<string, { showScans?: boolean, showGuides?: boolean, showGrid?: boolean }>

  // Smart selection update
  setSelection: (updates: Partial<SelectionPath>) => void
@@ -77,6 +83,9 @@ const useViewer = create<ViewerState>()(
      cameraMode: "perspective",
      setCameraMode: (mode) => set({ cameraMode: mode }),

+      theme: "light",
+      setTheme: (theme) => set({ theme }),
+
      levelMode: "stacked",
      setLevelMode: (mode) => set({ levelMode: mode }),

@@ -109,6 +118,19 @@ const useViewer = create<ViewerState>()(
          return { showGuides: show, projectPreferences };
        }),

+      showGrid: true,
+      setShowGrid: (show) =>
+        set((state) => {
+          const projectPreferences = { ...(state.projectPreferences || {}) };
+          if (state.projectId) {
+            projectPreferences[state.projectId] = {
+              ...(projectPreferences[state.projectId] || {}),
+              showGrid: show,
+            };
+          }
+          return { showGrid: show, projectPreferences };
+        }),
+
      projectId: null,
      setProjectId: (id) =>
        set((state) => {
@@ -118,6 +140,7 @@ const useViewer = create<ViewerState>()(
            projectId: id,
            showScans: prefs.showScans ?? true,
            showGuides: prefs.showGuides ?? true,
+            showGrid: prefs.showGrid ?? true,
          };
        }),
      projectPreferences: {},
@@ -165,6 +188,7 @@ const useViewer = create<ViewerState>()(
      name: 'viewer-preferences',
      partialize: (state) => ({
        cameraMode: state.cameraMode,
+        theme: state.theme,
        levelMode: state.levelMode,
        wallMode: state.wallMode,
        projectPreferences: state.projectPreferences,
@@ -0,0 +1 @@
+ALTER TABLE "projects" ADD COLUMN "is_empty" boolean DEFAULT true NOT NULL;
@@ -0,0 +1,38 @@
+-- Backfill script to update the is_empty flag for existing projects
+-- This can be run multiple times safely as logic evolves
+
+UPDATE projects p
+SET is_empty = false
+FROM (
+  -- 1. Get the latest model for each project
+  SELECT DISTINCT ON (project_id) project_id, scene_graph
+  FROM projects_models
+  WHERE deleted_at IS NULL
+  ORDER BY project_id, version DESC, created_at DESC
+) latest_model
+WHERE p.id = latest_model.project_id
+AND p.is_empty = true -- Only process projects that are currently marked empty
+AND latest_model.scene_graph IS NOT NULL
+AND latest_model.scene_graph->'nodes' IS NOT NULL
+AND (
+  -- Condition 1: More than 3 nodes
+  (SELECT count(*) FROM jsonb_object_keys(latest_model.scene_graph->'nodes')) > 3
+  
+  OR 
+  
+  -- Condition 2 & 3: Iterate through nodes to check type and children
+  EXISTS (
+    SELECT 1 
+    FROM jsonb_each(latest_model.scene_graph->'nodes') AS n(key, value)
+    WHERE 
+      -- Not a default node type
+      (n.value->>'type' NOT IN ('site', 'building', 'level'))
+      OR
+      -- Or is a level node with > 0 children
+      (
+        n.value->>'type' = 'level' 
+        AND jsonb_typeof(n.value->'children') = 'array' 
+        AND jsonb_array_length(n.value->'children') > 0
+      )
+  )
+);
@@ -50,6 +50,20 @@
      "when": 1772216042000,
      "tag": "20260227173402_create_missing_storage_buckets",
      "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "7",
+      "when": 1772222557281,
+      "tag": "20260227200237_brown_quasimodo",
+      "breakpoints": true
+    },
+    {
+      "idx": 8,
+      "version": "7",
+      "when": 1772225008787,
+      "tag": "20260227204328_backfill_empty_projects",
+      "breakpoints": true
    }
  ]
 }
				`@@ -0,0 +1 @@`
				`ALTER TABLE "projects" ADD COLUMN "is_empty" boolean DEFAULT true NOT NULL;`