+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/panel/index.tsx b/src/app/interface/panel/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4d2fa2301bd1ade9d08df456e6fd18312de81485
--- /dev/null
+++ b/src/app/interface/panel/index.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import { useEffect, useRef, useState, useTransition } from "react"
+
+import { Preset } from "@/app/engine/presets"
+
+import { RenderedScene } from "@/types"
+import { cn } from "@/lib/utils"
+import { FontName } from "@/lib/fonts"
+import { getRender, newRender } from "../../engine/render"
+import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
+// import { Bubble } from "./bubble"
+
+export default function Panel({
+ prompt = "",
+ font,
+ preset,
+ className = "",
+ width = 1,
+ height = 1,
+ delay = 0,
+}: {
+ prompt?: string
+ font: FontName
+ preset: Preset
+ className?: string
+ width?: number
+ height?: number
+ delay?: number
+ }) {
+
+ const [_isPending, startTransition] = useTransition()
+ const [isLoading, setLoading] = useState
+
+
+ {children}
+
+
+ {rendered.assetUrl ? 
: null}
+
+ {/*
+ Hello, world!
+
+ */}
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/progress/index.tsx b/src/app/interface/progress/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b2d62a57e6734cf99b3c17b68a77c23b91e49233
--- /dev/null
+++ b/src/app/interface/progress/index.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react"
+
+import { ProgressBar } from "./progress-bar"
+import { cn } from "@/lib/utils"
+
+export function Progress({
+ isLoading,
+ resetKey = "", // when this key change, this will re-spawn the progress bar
+ className = "",
+}: {
+ isLoading: boolean
+ resetKey: string
+ className?: string
+}) {
+ const timeoutRef = useRef
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/progress/progress-bar.tsx b/src/app/interface/progress/progress-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0e926d05419cecc6d4a4964d53a8dad6e07a4102
--- /dev/null
+++ b/src/app/interface/progress/progress-bar.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { CircularProgressbar, buildStyles } from "react-circular-progressbar"
+import "react-circular-progressbar/dist/styles.css"
+
+export function ProgressBar ({
+ className,
+ progressPercentage,
+ text
+}: {
+ className?: string
+ progressPercentage?: number
+ text?: string
+}) {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/top-menu/index.tsx b/src/app/interface/top-menu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7350985a4c05c89f832d85e3b43216a9cc05eef3
--- /dev/null
+++ b/src/app/interface/top-menu/index.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+import { FontName, fontList, fonts } from "@/lib/fonts"
+import { Input } from "@/components/ui/input"
+import { Preset, PresetName, presets } from "@/app/engine/presets"
+import { useState } from "react"
+
+export function TopMenu({
+ defaultPreset,
+ preset,
+ onChangePreset,
+ font,
+ onChangeFont,
+ prompt,
+ onChangePrompt,
+}: {
+ defaultPreset: PresetName
+ preset: Preset
+ onChangePreset: (newPresetName: PresetName) => void
+ font: FontName
+ onChangeFont: (newFontName: FontName) => void
+ prompt: string
+ onChangePrompt: (newPrompt: string) => void
+}) {
+ const [draft, setDraft] = useState("")
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..12e2fae0d41e4a6f3967a9f375c56f5fb0f1efcb
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,24 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+ title: 'Comic Factory: generate your own comics!',
+ description: 'Comic Factory: generate your own comits!',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/main.tsx b/src/app/main.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5ba7f7fd9f3db05263926695e3ebb000e8c9c215
--- /dev/null
+++ b/src/app/main.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { useState, useTransition } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+
+import "react-virtualized/styles.css" // only needs to be imported once
+
+import { Preset, PresetName, defaultPreset, getPreset } from "@/app/engine/presets"
+
+import { cn } from "@/lib/utils"
+import { TopMenu } from "./interface/top-menu"
+import { FontName } from "@/lib/fonts"
+import Panel from "./interface/panel"
+
+export default function Main() {
+ const [_isPending, startTransition] = useTransition()
+ const [isLoading, setLoading] = useState
+
+
+
+
+ {
+ setDraft(e.target.value)
+ }}
+ onBlur={(e) => {
+ if (draft !== prompt) {
+ onChangePrompt(draft)
+ }
+ }}
+ onKeyDown={({ key }) => {
+ if (key === 'Enter') {
+ if (draft.trim() !== prompt.trim()) {
+ onChangePrompt(draft.trim())
+ }
+ }
+ }}
+ value={draft}
+ />
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f3dc36ec97a1782ef32c28611e1f64df9ae1a44f
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,28 @@
+"use server"
+
+import Head from "next/head"
+
+import Main from "./main"
+import { TooltipProvider } from "@/components/ui/tooltip"
+
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
+
+export default async function IndexPage({ params: { ownerId } }: { params: { ownerId: string }}) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes