new lighting model

package.json

@@ -14,6 +14,8 @@
   },
   "dependencies": {
     "@derschmale/io-rgbe": "^0.1.1",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-context-menu": "^1.0.0",
     "@radix-ui/react-toolbar": "^1.0.2",
@@ -22,9 +24,7 @@
     "@react-three/postprocessing": "^2.14.9",
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
-    "immer": "^9.0.15",
-    "lamina": "^1.1.23",
-    "leva": "^0.9.34",
+    "jotai": "^2.3.0",
     "prettier": "^2.8.4",
     "prism-react-renderer": "^1.3.5",
     "r3f-perf": "^7.1.2",
@@ -34,9 +34,11 @@
     "sonner": "^0.4.0",
     "three": "^0.153.0",
     "three-stdlib": "^2.23.9",
-    "zustand": "^4.1.1"
+    "tunnel-rat": "^0.1.2",
+    "tweakpane": "^4.0.0"
   },
   "devDependencies": {
+    "@tweakpane/core": "^2.0.0",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.19",
     "@types/react-dom": "^18.0.6",

src/App.tsx

@@ -1,104 +1,18 @@
-import { Bars2Icon } from "@heroicons/react/24/outline";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { Toaster } from "sonner";
-
+import { AppContent } from "./components/AppContent";
+import { AppLayout } from "./components/AppLayout";
 import { AppToolbar } from "./components/AppToolbar";
 import { CommandPalette } from "./components/CommandPalette";
-import { Outliner } from "./components/Outliner/Outliner";
-import { Properties } from "./components/Properties";
-import { HDRIPreview } from "./components/HDRIPreview";
-import { ScenePreview } from "./components/ScenePreview";
-import { useStore } from "./hooks/useStore";
-import { Code } from "./components/Code";
 
 export default function App() {
-  const mode = useStore((state) => state.mode);
   return (
-    <div className="h-full w-full flex flex-col from-neutral-900 to-neutral-800 bg-gradient-to-t overflow-hidden text-white">
-      <Toaster theme="dark" />
-
+    <>
+      <Toaster theme="dark" richColors position="bottom-center" />
       <CommandPalette />
-
-      <AppToolbar />
-
-      <PanelGroup direction="horizontal" className="flex-1 p-2 pt-1">
-        {/* Left */}
-        <Panel
-          id="outliner"
-          order={1}
-          collapsible
-          defaultSize={15}
-          className="shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 rounded-lg"
-        >
-          <Outliner />
-        </Panel>
-
-        <PanelResizeHandle className="w-2 grid place-items-center transition-all hover:bg-white/40 rounded-sm mx-1">
-          <Bars2Icon className="rotate-90 -m-1 text-white/50" />
-        </PanelResizeHandle>
-
-        {/* Middle */}
-        <Panel id="stage" order={2} minSize={30}>
-          <PanelGroup direction="vertical">
-            <Panel
-              id="scene-preview"
-              order={1}
-              className="shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 bg-[conic-gradient(#202020_90deg,#313131_90deg_180deg,#202020_180deg_270deg,#313131_270deg)] bg-repeat bg-left-top bg-[length:20px_20px] rounded-lg"
-            >
-              <ScenePreview />
-            </Panel>
-
-            {mode.hdri && (
-              <>
-                <PanelResizeHandle className="h-2 grid place-items-center transition-all hover:bg-white/40 rounded-sm my-1">
-                  <Bars2Icon className="h-4 -m-1 text-white/50" />
-                </PanelResizeHandle>
-
-                <Panel
-                  id="hdri-preview"
-                  order={2}
-                  collapsible
-                  className="shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 bg-[conic-gradient(#202020_90deg,#313131_90deg_180deg,#202020_180deg_270deg,#313131_270deg)] bg-repeat bg-left-top bg-[length:20px_20px] rounded-lg"
-                >
-                  <HDRIPreview />
-                </Panel>
-              </>
-            )}
-
-            {mode.code && (
-              <>
-                <PanelResizeHandle className="h-2 grid place-items-center transition-all hover:bg-white/40 rounded-sm my-1">
-                  <Bars2Icon className="h-4 -m-1 text-white/50" />
-                </PanelResizeHandle>
-
-                <Panel
-                  id="code"
-                  order={3}
-                  collapsible
-                  className="shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 bg-[conic-gradient(#202020_90deg,#313131_90deg_180deg,#202020_180deg_270deg,#313131_270deg)] bg-repeat bg-left-top bg-[length:20px_20px] rounded-lg"
-                >
-                  <Code />
-                </Panel>
-              </>
-            )}
-          </PanelGroup>
-        </Panel>
-
-        <PanelResizeHandle className="w-2 grid place-items-center transition-all hover:bg-white/40 rounded-sm mx-1">
-          <Bars2Icon className="rotate-90 -m-1 text-white/50" />
-        </PanelResizeHandle>
-
-        {/* Right */}
-        <Panel
-          id="properties"
-          order={3}
-          collapsible
-          defaultSize={25}
-          className="shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 rounded-lg"
-        >
-          <Properties />
-        </Panel>
-      </PanelGroup>
-    </div>
+      <AppLayout>
+        <AppToolbar />
+        <AppContent />
+      </AppLayout>
+    </>
   );
 }

src/components/AppContent/index.tsx

@@ -0,0 +1,95 @@
+import { Bars2Icon } from "@heroicons/react/24/outline";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+
+import { Outliner } from "../Outliner/Outliner";
+import { Properties } from "../Properties";
+import { HDRIPreview } from "../HDRIPreview";
+import { ScenePreview } from "../ScenePreview";
+import { Code } from "../Code";
+import { useAtomValue } from "jotai";
+import { modeAtom } from "../../store";
+
+export function AppContent() {
+  const mode = useAtomValue(modeAtom);
+
+  return (
+    <PanelGroup direction="horizontal" className="flex-1 p-2 pt-1">
+      {/* Left */}
+      <Panel
+        id="outliner"
+        order={1}
+        collapsible
+        defaultSize={15}
+        className="isolate shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 rounded-lg"
+      >
+        <Outliner />
+      </Panel>
+
+      <PanelResizeHandle className="w-2 grid place-items-center transition-all hover:bg-white/40 rounded-sm mx-1">
+        <Bars2Icon className="rotate-90 -m-1 text-white/50" />
+      </PanelResizeHandle>
+
+      {/* Middle */}
+      <Panel id="stage" order={2} minSize={30}>
+        <PanelGroup direction="vertical">
+          <Panel
+            id="scene-preview"
+            order={1}
+            className="isolate shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 bg-[conic-gradient(#202020_90deg,#313131_90deg_180deg,#202020_180deg_270deg,#313131_270deg)] bg-repeat bg-left-top bg-[length:20px_20px] rounded-lg"
+          >
+            <ScenePreview />
+          </Panel>
+
+          {mode.hdri && (
+            <>
+              <PanelResizeHandle className="h-2 grid place-items-center transition-all hover:bg-white/40 rounded-sm my-1">
+                <Bars2Icon className="h-4 -m-1 text-white/50" />
+              </PanelResizeHandle>
+
+              <Panel
+                id="hdri-preview"
+                order={2}
+                collapsible
+                className="isolate shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 bg-[conic-gradient(#202020_90deg,#313131_90deg_180deg,#202020_180deg_270deg,#313131_270deg)] bg-repeat bg-left-top bg-[length:20px_20px] rounded-lg"
+              >
+                <HDRIPreview />
+              </Panel>
+            </>
+          )}
+
+          {mode.code && (
+            <>
+              <PanelResizeHandle className="h-2 grid place-items-center transition-all hover:bg-white/40 rounded-sm my-1">
+                <Bars2Icon className="h-4 -m-1 text-white/50" />
+              </PanelResizeHandle>
+
+              <Panel
+                id="code"
+                order={3}
+                collapsible
+                className="isolate shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 bg-[conic-gradient(#202020_90deg,#313131_90deg_180deg,#202020_180deg_270deg,#313131_270deg)] bg-repeat bg-left-top bg-[length:20px_20px] rounded-lg"
+              >
+                <Code />
+              </Panel>
+            </>
+          )}
+        </PanelGroup>
+      </Panel>
+
+      <PanelResizeHandle className="w-2 grid place-items-center transition-all hover:bg-white/40 rounded-sm mx-1">
+        <Bars2Icon className="rotate-90 -m-1 text-white/50" />
+      </PanelResizeHandle>
+
+      {/* Right */}
+      <Panel
+        id="properties"
+        order={3}
+        collapsible
+        defaultSize={25}
+        className="isolate shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20 bg-neutral-900 rounded-lg"
+      >
+        <Properties />
+      </Panel>
+    </PanelGroup>
+  );
+}

src/components/AppLayout/index.tsx

@@ -0,0 +1,7 @@
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-full w-full flex flex-col from-neutral-900 to-neutral-800 bg-gradient-to-t overflow-hidden text-white">
+      {children}
+    </div>
+  );
+}

src/components/AppToolbar/index.tsx

@@ -5,12 +5,13 @@ import {
   PhotoIcon,
 } from "@heroicons/react/24/solid";
 import * as Toolbar from "@radix-ui/react-toolbar";
-import { useStore } from "../../hooks/useStore";
+import { activeModesAtom, modeAtom } from "../../store";
 import { Logo } from "./Logo";
+import { useAtomValue, useSetAtom } from "jotai";
 
 export function AppToolbar() {
-  const mode = useStore((state) => state.mode);
-  const setMode = useStore((state) => state.setMode);
+  const setMode = useSetAtom(modeAtom);
+  const activeModes = useAtomValue(activeModesAtom);
 
   return (
     <Toolbar.Root
@@ -26,9 +27,7 @@ export function AppToolbar() {
         type="multiple"
         aria-label="Tools"
         className="flex divide-x divide-white/10 bg-neutral-900 rounded-md overflow-hidden shadow-inner shadow-white/5 ring-offset-white/10 ring-offset-1 ring-1 ring-black/20"
-        value={Object.keys(mode).filter(
-          (key) => mode[key as keyof typeof mode]
-        )}
+        value={activeModes}
         onValueChange={(modes) =>
           setMode(
             modes.reduce((acc, mode) => ({ ...acc, [mode]: true }), {

src/components/Code/index.tsx

@@ -1,11 +1,13 @@
-import { useStore } from "../../hooks/useStore";
 import { format } from "prettier";
 import parserBabel from "prettier/parser-babel";
 import theme from "prism-react-renderer/themes/vsDark";
 import Highlight, { defaultProps } from "prism-react-renderer";
+import { useAtomValue } from "jotai";
+import { lightsAtom } from "../../store";
+import { latlonToPhiTheta } from "../../utils/coordinates";
 
 export function Code() {
-  const lights = useStore((state) => state.lights);
+  const lights = useAtomValue(lightsAtom);
 
   const code = `
 import React from "react";
@@ -21,16 +23,17 @@ export function Env() {
             {/* Lights */}
             ${lights
               .map((light) => {
+                const { phi, theta } = latlonToPhiTheta(light.latlon);
                 return `
 {/* ${light.name} */}
 <Lightformer
     visible={${light.visible}}
     form="${light.shape}"
     intensity={${light.intensity}}
     position={new THREE.Vector3().setFromSphericalCoords(
-        ${light.distance}, // distance
-        ${light.phi},    // phi
-        ${light.theta}  // theta
+        3, // distance
+        ${phi},    // phi
+        ${theta}  // theta
     )}
     rotation={[${light.rotation}, 0, 0]}
     scale={[${light.scale * light.scaleX}, ${light.scale * light.scaleY}, ${