performant rendering of 30k

infinity mirror effect
solid canvas prototpye
2025-12-29 18:35:37 -06:00 · 2025-12-29 18:13:03 -06:00 · 2025-12-29 06:03:50 -06:00 · 2025-12-29 03:03:49 -06:00 · 2025-12-28 06:49:06 -06:00 · 2025-12-28 06:49:04 -06:00
18 changed files with 498 additions and 410 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 package-lock.json
 master.forms
+forms/app.log
--- a/server/index.html
+++ b/server/index.html
@@ -25,6 +25,6 @@
 </head>
 <body>
    <div class="draggable"></div>
-    <webview src="http://localhost:80" style="width:100vw; height:100vh;"></webview>
+    <webview src="http://localhost:10001" style="width:100vw; height:100vh;"></webview>
 </body>
 </html>
--- a/app.js
+++ b/app.js
@@ -1,17 +1,20 @@
 import { app, BrowserWindow, globalShortcut } from 'electron';
 import paths from 'path'
-import Server from "./server/index.js"
+import { spawn } from 'child_process'
+import fs from 'fs'

-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = paths.dirname(__filename);
+import util from './flame/util.js'
+import Server from "./flame/index.js"

 const WINDOW_SHORTCUTS = [
    process.platform === "darwin" ? "Command+R" : "Control+R",
    "\\"
 ];

-function createWindow({onTop = false}) {
+class App {
+    devToolsOpened = false;
+
+    createWindow({onTop = false}) {
        const win = new BrowserWindow({
            width: 1200,
            height: 800,
@@ -30,7 +33,7 @@ function createWindow({onTop = false}) {
            win.setAlwaysOnTop(true, 'screen-saver', 1); // necessary so it doesn't bring you back out of full screen when spawned
        }

-    win.loadFile('server/index.html');
+        win.loadFile('app.html');

        win.on("focus", () => {
            win.setVibrancy("appearance-based"); // full colors
@@ -53,33 +56,58 @@ function createWindow({onTop = false}) {
                globalShortcut.unregister(key);
            }
        });
-}
+    }

-let devToolsOpened = false;
+    spawnFlame(spawnForms) {
+        new Server(spawnForms, 10001)
+    }
    
-function toggleDevTools(win) {
-    if (devToolsOpened) {
+    async spawnForms() {
+        const logPath = paths.join(util.FORMS_PATH, "app.log");
+        const out = fs.openSync(logPath, "a");
+        const err = fs.openSync(logPath, "a");
+
+        const child = spawn(
+            process.execPath,
+            [paths.join(util.FORMS_PATH, "kernel/kernel.js")],
+            {
+                detached: true,
+                stdio: [
+                    "ignore",
+                    out,
+                    err
+                ],
+                cwd: process.cwd(),
+                env: process.env
+            }
+        );
+        
+        child.unref();
+    }
+
+    toggleDevTools(win) {
+        if (this.devToolsOpened) {
            win.closeDevTools();
        } else {
            win.openDevTools();
        }
-    devToolsOpened = !devToolsOpened;
-}
+        this.devToolsOpened = !this.devToolsOpened;
+    }
    
-app.on("ready", async () => {
-    // await Forms.init();
-    // createWindow({onTop: false});
-    new Server()
-
-    globalShortcut.register('CommandOrControl+Shift+Space', () => {
-        createWindow({onTop: true});
+    registerShortcuts() {
+        globalShortcut.register('CommandOrControl+Shift+Space', function CreateWindow() {
+            this.createWindow({onTop: true});
        });

-    // Register global shortcuts
-    app.on("browser-window-focus", () => {
+        app.on("browser-window-focus", function RegisterWindowOnFocus() {
            const focused = BrowserWindow.getFocusedWindow();
            if (!focused) return;

+            let WINDOW_SHORTCUTS = [
+                process.platform === "darwin" ? "Command+R" : "Control+R",
+                "\\"
+            ];
+
            // Reload
            globalShortcut.register(WINDOW_SHORTCUTS[0], () => {
                focused.reload();
@@ -91,19 +119,30 @@ app.on("ready", async () => {
            });
        });

-    app.on("browser-window-blur", () => {
+        app.on("browser-window-blur", function UnregisterWindowOnUnfocus() {
            for (const key of WINDOW_SHORTCUTS) {
                globalShortcut.unregister(key);
            }    
        });
-});
-
-app.on("activate", () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-        createWindow({onTop: false});
    }
-});

-app.on('window-all-closed', () => {
+    constructor() {
+        app.on("activate", () => {
+            if (BrowserWindow.getAllWindows().length === 0) {
+                this.createWindow({onTop: false});
+            }
+        });
+
+        app.on('window-all-closed', () => {
            if (process.platform !== 'darwin') app.quit();
-});
+        });
+
+        app.on("ready", async () => {
+            this.createWindow({onTop: false});
+            this.spawnFlame(this.spawnForms)
+            this.registerShortcuts()
+        });
+    }
+}
+
+new App()
--- a/cave/_/code/quill.js
+++ b/cave/_/code/quill.js
--- a/cave/_/code/shared.css
+++ b/cave/_/code/shared.css
@@ -1,5 +1,5 @@
 :root {
-    --main: #BD410D;
+    --main: #FFBB7C;
    --accent: var(--tan);
    --accent2: var(--brown);

@@ -8,7 +8,8 @@
    --green: #0B5538;
    --red: #BC1C02;
    --brown: #c6a476;
-    --darkbrown: #60320c;
+    --rust: #BD410D;
+    --darkbrown: #6A2C1C;
    --darkred: #7f0b09;
    --darkorange: #b15900;
    --orange: #FE9201;
@@ -18,7 +19,7 @@

@media (prefers-color-scheme: dark) {
 :root {
-    --main: #6A2C1C;
+    --main: var(--darkbrown);
    --accent: var(--tan);
    --accent2: var(--green);
    --accent3: #c74109
--- a/cave/_/icons/logo.png
+++ b/cave/_/icons/logo.png
--- a/cave/index.html
+++ b/cave/index.html
@@ -7,7 +7,21 @@
    <link rel="stylesheet" href="/_/code/shared.css"></script>
    <script src="/_/code/quill.js"></script>
    <script type="module" src="/75820185/index.js"></script>
+    <style>
+        :root {
+            --main: #6A2C1C;
+            --accent: #FEB279;
+        }
+
+        html, body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background: var(--main);
+        }
+    </style>
 </head>
 <body style="margin: 0px;">
+
 </body>
 </html>
--- a/cave/index.js
+++ b/cave/index.js
@@ -0,0 +1,184 @@
+/*
+Samuel Russell
+Captured Sun
+12.29.2025
+*/
+
+class Canvas {
+    STROKE_COLOR = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim();
+    c = document.createElement("canvas")
+    ctx;
+
+    /* -----------------------------
+    Camera
+    ----------------------------- */
+    camera = {
+        x: 0,
+        y: 0,
+        scale: 1,
+        ZOOM_SPEED: 0.016,
+        PAN_SPEED: 1.5,
+        FOCUS_THRESHOLD: 4.0
+    }
+
+    /* -----------------------------
+    Rectangle
+    ----------------------------- */
+    rects = [];
+
+    resize = () => {
+        // Make Canvas Fill Screen
+        this.c.style.width = window.innerWidth + "px";
+        this.c.style.height = window.innerHeight + "px";
+
+        // Set Internal Render Size by DPR
+        const dpr = window.devicePixelRatio || 1;
+        this.c.width = window.innerWidth * dpr;
+        this.c.height = window.innerHeight * dpr;
+        this.ctx.scale(dpr, dpr);
+    }
+
+    onWheel = (e) => {
+        e.preventDefault();
+        let camera = this.camera
+
+        const rectCanvas = this.c.getBoundingClientRect();
+        const mouseX = e.clientX - rectCanvas.left;
+        const mouseY = e.clientY - rectCanvas.top;
+
+        if (!e.ctrlKey) {
+            const dpr = window.devicePixelRatio || 1;
+
+            // Two-finger pan in world coordinates
+            camera.x += (e.deltaX * dpr) * camera.PAN_SPEED / camera.scale;
+            camera.y += (e.deltaY * dpr) * camera.PAN_SPEED / camera.scale;
+            return;
+        }
+
+        const dpr = window.devicePixelRatio || 1;
+
+        const worldX = (
+            mouseX - 
+            (this.c.width / dpr) / 2 // X coordinate of canvas center in CSS pixels
+        ) // Mouse offset from canvas center in CSS pixels
+        / camera.scale  // Account for Zoom: shift by camera's zoom position
+        + camera.x;     // Account for Pan: shift by camera’s world X position
+
+        const worldY = (
+            mouseY - 
+            (this.c.height / dpr) / 2
+        )
+        / camera.scale
+        + camera.y;
+
+        // Apply zoom
+        const zoomFactor = Math.exp(-e.deltaY * camera.ZOOM_SPEED);
+        camera.scale *= zoomFactor;
+        camera.scale = Math.max(0.04, Math.min(10, camera.scale));
+
+        // Adjust camera to keep cursor fixed
+        camera.x = worldX - (mouseX - (this.c.width / dpr) / 2) / camera.scale;
+        camera.y = worldY - (mouseY - (this.c.height / dpr) / 2) / camera.scale;
+    }
+
+    draw = () => {
+        let ctx = this.ctx
+        let rect = this.rect
+        let camera = this.camera
+        let scale = camera.scale
+        requestAnimationFrame(this.draw);
+
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, this.c.width, this.c.height);
+
+        let drawMenus = () => {
+            ctx.fillStyle = "#FEB279";
+            ctx.strokeRect(20,20,220,100);
+
+            ctx.fillStyle = "#000";
+            ctx.font = "60px arial";
+            // ctx.fillText("Button 1", 20, 100);
+        }
+
+        let drawSpaces = () => {
+            ctx.translate(this.c.width / 2, this.c.height / 2);
+            ctx.scale(scale, scale);
+            ctx.translate(-camera.x, -camera.y);
+
+            ctx.strokeStyle = this.STROKE_COLOR;
+            ctx.lineWidth = 0.5 / scale;
+
+            const baseRadius = 40;     // distance of first ring
+            const ringSpacing = 70;   // distance between rings
+            const dotRadius = 18;     // circle size
+
+            let index = 0;
+            let ring = 0;
+
+            while (index < this.rects.length) {
+                // how many items fit on this ring
+                const circumference = 2 * Math.PI * (baseRadius + ring * ringSpacing);
+                const itemsInRing = Math.max(6, Math.floor(circumference / (dotRadius * 2.5)));
+
+                for (let i = 0; i < itemsInRing && index < this.rects.length; i++) {
+                    const angle = (i / itemsInRing) * Math.PI * 2;
+
+                    const r = baseRadius + ring * ringSpacing;
+                    const x = Math.cos(angle) * r;
+                    const y = Math.sin(angle) * r;
+
+                    ctx.beginPath();
+                    ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
+                    ctx.stroke();
+
+                    const cssDiameter = dotRadius * 2 * scale;
+
+                    if (cssDiameter >= 30) {
+                        ctx.fillStyle = "#000";
+                        ctx.font = `${3}px Arial`;
+                        ctx.textAlign = "center";
+                        ctx.textBaseline = "middle";
+                        ctx.fillText(this.rects[index].name, x, y);
+                    }
+
+
+                    index++;
+                }
+
+                ring++;
+            }
+        };
+
+
+        ctx.save()
+
+        drawSpaces()
+
+        ctx.restore()
+
+        drawMenus(ctx);
+    }
+
+    async fetchDownloads() {
+        let res = await fetch("/downloads", {method: "GET"})
+        console.log(res)
+        let json = await res.json()
+        console.log(json)
+        this.rects = json
+    }
+
+    constructor() {
+        document.body.appendChild(this.c)
+        this.ctx = this.c.getContext("2d");
+
+        window.addEventListener("resize", this.resize);
+        this.resize();
+
+        this.c.addEventListener("wheel", this.onWheel, { passive: false });
+        this.draw()
+
+        this.fetchDownloads()
+    }
+}
+
+new Canvas()
--- a/server/getDownloads.js
+++ b/server/getDownloads.js
--- a/flame/index.js
+++ b/flame/index.js
@@ -0,0 +1,122 @@
+import path from 'path';
+import express from 'express';
+import cors from 'cors'
+import http from 'http'
+import chalk from 'chalk'
+import * as z from 'zod';
+import forms from 'forms'
+
+import { initWebSocket } from './ws.js'
+import util from './util.js'
+import getAllDownloadsFiles from "./getDownloads.js"
+
+export default class Server {
+    store;
+
+    registerRoutes(router) {
+        router.get('/downloads', this.getDownloads)
+        router.get('/*', this.get)
+        return router
+    }
+
+    getDownloads = async (req, res) => {
+        let arr = await getAllDownloadsFiles()
+        console.log(arr)
+        res.json(arr)
+    }
+
+    get = async (req, res) => {
+        let url = req.url
+        let filePath;
+        if(url.startsWith("/_")) {
+            filePath = path.join(util.CAVE_PATH, url);
+        } else if(url.includes("75820185")) {
+            filePath = path.join(util.CAVE_PATH, url.split("75820185")[1]);
+        } else {
+            filePath = path.join(util.CAVE_PATH, "index.html");
+        }
+
+        res.sendFile(filePath);
+    }
+
+    async connectToForms(spawnForms) {
+        try {
+            await this.store.connect()
+        }
+        catch(e) { 
+            try {
+                await spawnForms()
+                await this.store.connect()
+            } 
+            catch(e) { 
+                try {
+                    let tryReconnect = async (attempts = 5, interval = 100) => {
+                        for (let i = 0; i < attempts; i++) {
+                            try {
+                                return await this.store.connect();
+                            } catch (e) {
+                                if (i === attempts - 1) {throw e;}
+                                await new Promise(resolve => setTimeout(resolve, interval));
+                            }
+                        }
+                    }
+                    await tryReconnect(5, 100)
+                } 
+                catch(e) {
+                    console.error("Could not spawn forms: ", e)
+                    return
+                }
+            }
+        }
+
+        this.store.register("log", z.toJSONSchema(z.object({
+            time: z.string(),
+            host: z.string(),
+            ip: z.string(),
+            path: z.string(),
+            method: z.string()
+        })))
+        this.store.add("log", {
+            time: "0100",
+            host: "parchment.page",
+            ip: "0.0.0.1",
+            path: "/asd",
+            method: "GET"
+        })
+    }
+
+    constructor(spawnForms, port) {
+        const app = express();
+        app.use(cors({ origin: '*' }));
+        app.use(express.json());
+
+        app.use(util.logRequest);
+        app.use(util.logResponse);
+
+        let router = express.Router();
+        this.registerRoutes(router)
+        app.use('/', router);
+
+        this.store = new forms.client()
+        this.connectToForms(spawnForms)
+
+        const server = http.createServer(app);
+        initWebSocket(server);
+
+        server.listen(port, () => {
+            console.log("\n")
+            console.log(chalk.yellow("**************Parchment****************"))
+            console.log(chalk.yellowBright(`Server is running on port ${port}: http://localhost`));
+            console.log(chalk.yellow("***************************************"))
+            console.log("\n")
+        });
+
+        process.on('SIGINT', async () => {
+            console.log(chalk.red('Closing server...'));
+            console.log(chalk.green('Database connection closed.'));
+            process.exit(0);
+        });
+
+        Object.preventExtensions(this);
+    }
+}
--- a/flame/util.js
+++ b/flame/util.js
@@ -0,0 +1,40 @@
+import moment from 'moment'
+import chalk from 'chalk'
+import paths from 'path'
+
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname =  paths.dirname(__filename);
+
+export default class util {
+
+    static APP_PATH = paths.join(__dirname, "..")
+    static CAVE_PATH = paths.join(__dirname, "../cave")
+    static FLAME_PATH = __dirname
+    static FORMS_PATH = paths.join(__dirname, "../forms")
+
+    static logRequest(req, res, next) {
+        const formattedDate = moment().format('M.D');
+        const formattedTime = moment().format('h:mma');
+        if(req.url.includes("/api/")) {
+            console.log(chalk.blue(`       ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
+        } else {
+            if(req.url === "/")
+                console.log(chalk.gray(`       ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
+        }
+        next(); 
+    }
+
+    static logResponse(req, res, next) {
+        const originalSend = res.send;
+        res.send = function (body) {
+            if(res.statusCode >= 400) {
+                console.log(chalk.blue( `<-${chalk.red(res.statusCode)}- ${req.method} ${req.url} | ${chalk.red(body)}`));
+            } else {
+                console.log(chalk.blue(`<-${res.statusCode}- ${req.method} ${req.url}`));
+            }
+            originalSend.call(this, body);
+        };
+        next();
+    }
+}
--- a/server/ws.js
+++ b/server/ws.js
--- a/server/index.js
+++ b/server/index.js
@@ -1,137 +0,0 @@
-import path from 'path';
-import fs from 'fs/promises'
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-import express from 'express';
-import cors from 'cors'
-import http from 'http'
-import chalk from 'chalk'
-import moment from 'moment'
-import * as z from "zod";
-
-import { initWebSocket } from './ws.js'
-import getAllDownloadsFiles from "./getDownloads.js"
-import forms from "forms"
-
-export default class Server {
-    store;
-    UIPath = path.join(__dirname, '../ui')
-
-    registerRoutes(router) {
-        router.get('/*', this.get)
-        return router
-    }
-
-    index = async (req, res) => {
-        let filePath = path.join(this.UIPath, "index.html");
-        res.sendFile(filePath)
-        return
-        
-        let html = await fs.readFile(filePath, 'utf-8');
-
-        let downloads = await getAllDownloadsFiles()
-        const jsonString = JSON.stringify(downloads, null, 2); // pretty-print optional
-        const scriptTag = `<script type="application/json" id="jsonData">\n${jsonString}\n</script>`;
-
-        const headEndRegex = /<\/head\s*>/i;
-
-        const match = html.match(headEndRegex);
-        const insertPos = match.index;
-        let result = html.slice(0, insertPos) + scriptTag + '\n' + html.slice(insertPos);
-        res.type('html').send(result);
-    }
-
-    get = async (req, res) => {
-        let url = req.url
-        let filePath;
-        if(url.startsWith("/_")) {
-            filePath = path.join(this.UIPath, url);
-        } else if(url.includes("75820185")) {
-            filePath = path.join(this.UIPath, url.split("75820185")[1]);
-        } else {
-            filePath = path.join(this.UIPath, "index.html");
-        }
-
-        res.sendFile(filePath);
-    }
-
-    logRequest(req, res, next) {
-        const formattedDate = moment().format('M.D');
-        const formattedTime = moment().format('h:mma');
-        if(req.url.includes("/api/")) {
-            console.log(chalk.blue(`       ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
-        } else {
-            if(req.url === "/")
-                console.log(chalk.gray(`       ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
-        }
-        next(); 
-    }
-
-    logResponse(req, res, next) {
-        const originalSend = res.send;
-        res.send = function (body) {
-            if(res.statusCode >= 400) {
-                console.log(chalk.blue( `<-${chalk.red(res.statusCode)}- ${req.method} ${req.url} | ${chalk.red(body)}`));
-            } else {
-                console.log(chalk.blue(`<-${res.statusCode}- ${req.method} ${req.url}`));
-            }
-            originalSend.call(this, body);
-        };
-        next();
-    }
-
-    async connectToForms() {
-        await this.store.connect()
-        this.store.register("log", z.toJSONSchema(z.object({
-            time: z.string(),
-            host: z.string(),
-            ip: z.string(),
-            path: z.string(),
-            method: z.string()
-        })))
-        this.store.add("log", {
-            time: "0100",
-            host: "parchment.page",
-            ip: "0.0.0.1",
-            path: "/asd",
-            method: "GET"
-        })
-    }
-
-    constructor() {
-        const app = express();
-        app.use(cors({ origin: '*' }));
-        app.use(express.json());
-
-        app.use(this.logRequest);
-        app.use(this.logResponse);
-
-        let router = express.Router();
-        this.registerRoutes(router)
-        app.use('/', router);
-
-        this.store = new forms.client()
-        this.connectToForms()
-
-        const server = http.createServer(app);
-        initWebSocket(server);
-        const PORT = 80;
-        server.listen(PORT, () => {
-            console.log("\n")
-            console.log(chalk.yellow("**************Parchment****************"))
-            console.log(chalk.yellowBright(`Server is running on port ${PORT}: http://localhost`));
-            console.log(chalk.yellow("***************************************"))
-            console.log("\n")
-        });
-
-        process.on('SIGINT', async () => {
-            console.log(chalk.red('Closing server...'));
-            console.log(chalk.green('Database connection closed.'));
-            process.exit(0);
-        });
-
-        Object.preventExtensions(this);
-    }
-}
--- a/ui/components/DownloadsPanel.js
+++ b/ui/components/DownloadsPanel.js
@@ -1,94 +0,0 @@
-class DownloadsPanel extends Shadow {
-    render() {
-        ZStack(() => {
-            input("", "60vw")
-                .backgroundColor("var(--accent3)")
-                .color("var(--accent)")
-                .border("none")
-                .borderTop("1px solid var(--accent)")
-                .borderBottom("1px solid var(--accent)")
-                .outline("0.5px solid black")
-                .borderRadius(7, px)
-                .transition("padding .2s")
-                .padding(0.5, em)
-                .position("absolute")
-                .x(50, vw).y(7, em)
-                .transform("translate(-50%, -50%)")
-                .onInput(() => {
-                    console.log('typing')
-                })
-                .onFocus(function (focusing) {
-                    if(focusing) {
-                        this.style.padding = "1em"
-                        this.style.borderColor = "var(--darkred)"
-                    } else {
-                        this.style.padding = "0.5em"
-                        this.style.borderColor = "var(--accent)"
-                    }
-                })
-            
-            // VStack(() => {
-            //     const json = this.getJSONData()
-
-            //     p(json.length + " Entries")
-            //         .marginBottom(2, em)
-
-            //     // Split into two alternating columns
-            //     const left = []
-            //     const right = []
-                
-            //     for (let i = 0; i < 200; i++) {
-            //         if (i % 2 === 0) {
-            //             left.push(json[i])
-            //         } else {
-            //             right.push(json[i])
-            //         }
-            //     }
-                
-            //     console.log(left)
-            //     HStack(() => {
-            //         // LEFT COLUMN
-            //         VStack(() => {
-            //             for (let item of left) {
-            //                 p(item.name)
-            //                     .marginLeft(0, em)
-            //                     .marginBottom(0.1, em)
-            //             }
-            //         })
-
-            //         // RIGHT COLUMN
-            //         VStack(() => {
-            //             for (let item of right) {
-            //                 p(item.name)
-            //                     .marginLeft(0, em)
-            //                     .marginBottom(0.1, em)
-            //             }
-            //         })
-            //         .marginLeft(3, em) // spacing between columns
-            //     })
-            // })
-            // .paddingLeft(5, em)
-            // .paddingTop(10, em)
-        })
-    }
-
-    getJSONData() {
-        const script = document.getElementById('jsonData');
-        if (!script) {
-            console.warn('initial-data script not found');
-            return null;
-        }
-
-        try {
-            // script.textContent is the raw JSON string
-            const data = JSON.parse(script.textContent);
-            console.log(data)
-            return data;
-        } catch (err) {
-            console.error('Failed to parse initial-data JSON:', err);
-            return null;
-        }
-    }
-}
-
-register(DownloadsPanel)
--- a/ui/components/Home.js
+++ b/ui/components/Home.js
@@ -1,36 +0,0 @@
-import "./NavMenu.js"
-import "./HomePanel.js"
-import "./DownloadsPanel.js"
-
-class Home extends Shadow {
-
-    render() {
-        ZStack(() => {
-
-            NavMenu()
-
-            switch(window.location.pathname) {
-                case "/":
-                    HomePanel()
-                    break;
-                case "/downloads":
-                    DownloadsPanel()
-                    break;
-            }
-        })
-        .backgroundColor("var(--main)")
-        .display("block")
-        .width(100, vw).height("auto")
-        .color("var(--accent)")
-        .fontFamily("Arial")
-        .onAppear(() => {
-            document.body.style.backgroundColor = "var(--main)"
-        })
-        .onNavigate(() => {
-            console.log("navved")
-            this.rerender()
-        })
-    }
-}
-
-register(Home)
--- a/ui/components/HomePanel.js
+++ b/ui/components/HomePanel.js
@@ -1,7 +0,0 @@
-class HomePanel extends Shadow {
-    render() {
-
-    }
-}
-
-register(HomePanel)
--- a/ui/components/NavMenu.js
+++ b/ui/components/NavMenu.js
@@ -1,37 +0,0 @@
-class NavMenu extends Shadow {
-
-    NavButton(text) {
-        return p(text)
-            .cursor("default")
-            .onAppear(function () {
-                console.log(window.location.pathname, "/" + this.innerText.toLowerCase())
-                if(window.location.pathname === ("/" + this.innerText.toLowerCase())) {
-                    this.style.textDecoration = "underline"
-                }
-            })
-            .onHover(function (hovering) {
-                if(hovering) {
-                    this.style.textDecoration = "underline"
-                } else {
-                    this.style.textDecoration = ""
-                }
-            })
-            .onClick(function (done) {
-                if(done) {
-                    window.navigateTo(this.innerText === "Home" ? "/" : this.innerText.toLowerCase())
-                }
-            })
-    }
-
-    render() {
-        HStack(() => {
-            this.NavButton("Home")
-            this.NavButton("Downloads")
-        })
-        .gap(2, em)
-        .x(50, vw).y(5, vh)
-        .center()
-    }
-}
-
-register(NavMenu)
--- a/ui/index.js
+++ b/ui/index.js
@@ -1,2 +0,0 @@
-import "./components/Home.js"
-Home()
Author	SHA1	Message	Date
metacryst	51ec1161ad	performant rendering of 30k	2025-12-29 18:35:37 -06:00
metacryst	b4e388b14d	infinity mirror effect	2025-12-29 18:13:03 -06:00
metacryst	39959246cd	solid canvas prototpye	2025-12-29 06:03:50 -06:00
metacryst	a21e651484	small organization, different port	2025-12-29 03:03:49 -06:00
metacryst	71984ddd67	Merge branch 'main' of https://git.sun.museum/sam/Downloads	2025-12-28 06:49:06 -06:00
metacryst	263a9795b9	renaming, spawning forms if it does not exist, simplifying	2025-12-28 06:49:04 -06:00