From 44a7fb8632b7eedad8669b09524c13dae0ebe66e Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Sun, 12 May 2024 21:55:20 +0200
Subject: [PATCH 1/9] :sparkles: Initial Commit

---
 .gitignore                                    |   2 -
 .prettierrc                                   |   2 +-
 README.md                                     |   4 -
 bun.lockb                                     | Bin 123191 -> 101126 bytes
 components.json                               |  14 +
 package.json                                  |  84 ++---
 postcss.config.cjs                            |   6 -
 postcss.config.js                             |   6 +
 src/app.d.ts                                  |  16 +-
 src/app.html                                  |   8 +-
 src/app.pcss                                  | 110 ++++++
 src/app.postcss                               |  21 --
 .../ui/avatar/avatar-fallback.svelte          |  16 +
 .../components/ui/avatar/avatar-image.svelte  |  18 +
 src/lib/components/ui/avatar/avatar.svelte    |  18 +
 src/lib/components/ui/avatar/index.ts         |  13 +
 src/lib/components/ui/button/button.svelte    |  25 ++
 src/lib/components/ui/button/index.ts         |  49 +++
 .../dropdown-menu-checkbox-item.svelte        |  35 ++
 .../dropdown-menu-content.svelte              |  27 ++
 .../dropdown-menu/dropdown-menu-item.svelte   |  31 ++
 .../dropdown-menu/dropdown-menu-label.svelte  |  19 +
 .../dropdown-menu-radio-group.svelte          |  11 +
 .../dropdown-menu-radio-item.svelte           |  35 ++
 .../dropdown-menu-separator.svelte            |  14 +
 .../dropdown-menu-shortcut.svelte             |  13 +
 .../dropdown-menu-sub-content.svelte          |  30 ++
 .../dropdown-menu-sub-trigger.svelte          |  32 ++
 src/lib/components/ui/dropdown-menu/index.ts  |  48 +++
 src/lib/components/ui/tooltip/index.ts        |  15 +
 .../ui/tooltip/tooltip-content.svelte         |  28 ++
 src/lib/index.ts                              |   1 +
 src/lib/stores.ts                             |   7 -
 src/lib/types.ts                              |  75 ----
 src/lib/utils.ts                              | 113 +++---
 src/routes/+layout.svelte                     | 155 +++------
 src/routes/+layout.ts                         |   3 +-
 src/routes/+page.svelte                       | 107 +++---
 src/routes/Code.svelte                        |  81 +++++
 src/routes/builder/+page.svelte               |  75 +++-
 src/routes/builder/EditModal.svelte           | 139 --------
 src/routes/builder/Grid.svelte                | 188 ----------
 src/routes/builder/Menu.svelte                | 329 ------------------
 tailwind.config.ts                            |  96 +++--
 tsconfig.json                                 |   1 +
 vite.config.ts                                |  11 +-
 46 files changed, 1025 insertions(+), 1106 deletions(-)
 create mode 100644 components.json
 delete mode 100644 postcss.config.cjs
 create mode 100644 postcss.config.js
 create mode 100644 src/app.pcss
 delete mode 100644 src/app.postcss
 create mode 100644 src/lib/components/ui/avatar/avatar-fallback.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar-image.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar.svelte
 create mode 100644 src/lib/components/ui/avatar/index.ts
 create mode 100644 src/lib/components/ui/button/button.svelte
 create mode 100644 src/lib/components/ui/button/index.ts
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/index.ts
 create mode 100644 src/lib/components/ui/tooltip/index.ts
 create mode 100644 src/lib/components/ui/tooltip/tooltip-content.svelte
 create mode 100644 src/lib/index.ts
 delete mode 100644 src/lib/stores.ts
 delete mode 100644 src/lib/types.ts
 create mode 100644 src/routes/Code.svelte
 delete mode 100644 src/routes/builder/EditModal.svelte
 delete mode 100644 src/routes/builder/Grid.svelte
 delete mode 100644 src/routes/builder/Menu.svelte

diff --git a/.gitignore b/.gitignore
index 2677cc2..6635cf5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,8 +3,6 @@ node_modules
 /build
 /.svelte-kit
 /package
-/.vscode
-/img
 .env
 .env.*
 !.env.example
diff --git a/.prettierrc b/.prettierrc
index 9573023..8bc6e86 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,6 +3,6 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/README.md b/README.md
index 9378051..d830cb3 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,6 @@ _The UI Builder for the Flipper Zero_
 
 **Flip** is an innovative UI builder designed for creating user interfaces specifically tailored for Flipper Zero applications. This tool simplifies the process of designing, exporting, and integrating UIs into your Flipper Zero projects using Rust.
 
-## Major Note
-
-The current website is going to be reworked to be fitting more the adjoined [Rust Crate]()!
-
 ## Features
 
 - **Intuitive UI Builder**: Design your UI with an easy-to-use interface.
diff --git a/bun.lockb b/bun.lockb
index 5c9b3d6fb5a97c41c0e0451b903a0cf4c810226e..51d5bf40023186af38c2c7d362d26c20397286e4 100755
GIT binary patch
delta 34619
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
J;P9g({{Tu)@X`PP

literal 123191
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

diff --git a/components.json b/components.json
new file mode 100644
index 0000000..e6f140c
--- /dev/null
+++ b/components.json
@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/app.css",
+		"baseColor": "zinc"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3021291..ec9383a 100644
--- a/package.json
+++ b/package.json
@@ -1,43 +1,45 @@
 {
-	"name": "flip-ui.github.io",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check .",
-		"format": "prettier --write ."
-	},
-	"devDependencies": {
-		"@skeletonlabs/skeleton": "2.6.1",
-		"@skeletonlabs/tw-plugin": "0.3.0",
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@tailwindcss/forms": "0.5.7",
-		"@tailwindcss/typography": "0.5.10",
-		"@types/node": "20.10.6",
-		"autoprefixer": "10.4.16",
-		"postcss": "8.4.32",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
-		"tailwindcss": "3.4.0",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.3",
-		"vite-plugin-tailwind-purgecss": "0.2.0"
-	},
-	"type": "module",
-	"dependencies": {
-		"@floating-ui/dom": "1.5.3",
-		"@fortawesome/fontawesome-free": "^6.5.1",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"highlight.js": "^11.9.0",
-		"svelte-grid-extended": "^1.1.4"
-	}
+  "name": "flip-ui-chad",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3",
+    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.33",
+    "autoprefixer": "^10.4.16",
+    "@tailwindcss/typography": "^0.5.10",
+    "prettier-plugin-tailwindcss": "^0.5.1"
+  },
+  "type": "module",
+  "dependencies": {
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@types/prismjs": "^1.26.4",
+    "bits-ui": "^0.21.7",
+    "clsx": "^2.1.1",
+    "install": "^0.13.0",
+    "lucide-svelte": "^0.378.0",
+    "mode-watcher": "^0.3.0",
+    "prismjs": "^1.29.0",
+    "svelte-legos": "^0.2.2",
+    "tailwind-merge": "^2.3.0",
+    "tailwind-variants": "^0.2.1"
+  }
 }
diff --git a/postcss.config.cjs b/postcss.config.cjs
deleted file mode 100644
index 054c147..0000000
--- a/postcss.config.cjs
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
-};
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..5c45a3f
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
\ No newline at end of file
diff --git a/src/app.d.ts b/src/app.d.ts
index 8f4d638..743f07b 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,9 +1,13 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-	// interface Locals {}
-	// interface PageData {}
-	// interface Error {}
-	// interface Platform {}
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
 }
+
+export {};
diff --git a/src/app.html b/src/app.html
index 6c70f72..77a5ff5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="vintage">
-		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/app.pcss b/src/app.pcss
new file mode 100644
index 0000000..65a2e4b
--- /dev/null
+++ b/src/app.pcss
@@ -0,0 +1,110 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+ 
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+ 
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+ 
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+ 
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+ 
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 240 10% 3.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+ 
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+ 
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  html,
+  body {
+    @apply h-full overflow-hidden;
+  }
+  html {
+    font-family: pixelify-sans;
+  }
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply !overflow-y-scroll bg-gradient-conic from-amber-900 via-background to-green-950 text-foreground;
+  }
+  @font-face {
+    font-family: 'pixelify-sans';
+    src: url('/PixelifySans.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+  .h1 {
+    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+  }
+  .h2 {
+    @apply scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0;
+  }
+  .h3 {
+    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+  }
+  .p {
+    @apply leading-7 [&:not(:first-child)]:mt-6;
+  }
+  .blockquote {
+    @apply mt-6 border-l-2 pl-6 italic;
+  }
+  .code {
+    @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+  }
+}
+
diff --git a/src/app.postcss b/src/app.postcss
deleted file mode 100644
index 95c0334..0000000
--- a/src/app.postcss
+++ /dev/null
@@ -1,21 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@tailwind variants;
-
-html,
-body {
-	@apply h-full overflow-hidden;
-}
-
-:root [data-theme='vintage'] {
-	--theme-font-family-base: 'Custom', pixelify-sans;
-	--theme-font-family-heading: 'Custom', pixelify-sans;
-}
-
-@font-face {
-	font-family: 'pixelify-sans';
-	src: url('/PixelifySans.ttf') format('truetype');
-	font-weight: normal;
-	font-style: normal;
-}
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..865fc40
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AvatarPrimitive.FallbackProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+	class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Fallback>
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..6558dc4
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AvatarPrimitive.ImageProps;
+
+	let className: $$Props["class"] = undefined;
+	export let src: $$Props["src"] = undefined;
+	export let alt: $$Props["alt"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+	{src}
+	{alt}
+	class={cn("aspect-square h-full w-full", className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..845d5a8
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AvatarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let delayMs: $$Props["delayMs"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+	{delayMs}
+	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Root>
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
new file mode 100644
index 0000000..d06457b
--- /dev/null
+++ b/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+};
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..86827f3
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..a927293
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000..cbca3c5
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
+	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</DropdownMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..a94b527
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.ContentProps;
+	type $$Events = DropdownMenuPrimitive.ContentEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</DropdownMenuPrimitive.Content>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..9a05d4b
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+</DropdownMenuPrimitive.Item>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..43f1527
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Label>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..1c74ae1
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</DropdownMenuPrimitive.RadioGroup>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..79a48ee
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.RadioItemProps;
+	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.RadioIndicator>
+			<Circle class="h-2 w-2 fill-current" />
+		</DropdownMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.RadioItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..e14d078
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..d8c7378
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
+	<slot />
+</span>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..ff20507
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SubContentProps;
+	type $$Events = DropdownMenuPrimitive.SubContentEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		x: -10,
+		y: 0,
+	};
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</DropdownMenuPrimitive.SubContent>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..9ba3916
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..c1749e9
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,48 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+const Trigger = DropdownMenuPrimitive.Trigger;
+const Group = DropdownMenuPrimitive.Group;
+
+export {
+	Sub,
+	Root,
+	Item,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as DropdownMenu,
+	Sub as DropdownMenuSub,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	Group as DropdownMenuGroup,
+	Content as DropdownMenuContent,
+	Trigger as DropdownMenuTrigger,
+	Shortcut as DropdownMenuShortcut,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	RadioGroup as DropdownMenuRadioGroup,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	CheckboxItem as DropdownMenuCheckboxItem,
+};
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..7d0444d
--- /dev/null
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..3c00a4e
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = TooltipPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		y: 8,
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
deleted file mode 100644
index 6979d66..0000000
--- a/src/lib/stores.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { GridController } from 'svelte-grid-extended';
-import { writable } from 'svelte/store';
-import type { Views } from './types';
-import { localStorageStore } from '@skeletonlabs/skeleton';
-
-export let gridController = writable<GridController>();
-export let views = localStorageStore<Views>('views', { pages: [], current: 0 });
diff --git a/src/lib/types.ts b/src/lib/types.ts
deleted file mode 100644
index 21ead61..0000000
--- a/src/lib/types.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-export type Option<T> = T | null;
-
-export enum GuiType {
-	Header = 0,
-	BodyText,
-	Buttons,
-	Alert
-}
-
-export enum Align {
-	Left = 0,
-	Right,
-	Top,
-	Bottom,
-	Center
-}
-
-export function alignToString(align: Align | string): string {
-	switch (align) {
-		case Align.Left:
-			return 'Left';
-		case Align.Right:
-			return 'Right';
-		case Align.Top:
-			return 'Top';
-		case Align.Bottom:
-			return 'Bottom';
-		case Align.Center:
-			return 'Center';
-		default:
-			throw new Error('Invalid Align value');
-	}
-}
-
-export type Event =
-	| {
-			View: number;
-	  }
-	| {
-			Function: string;
-	  };
-
-export interface Views {
-	pages: Page[];
-	current: number;
-}
-
-export interface Page {
-	id: string;
-	page: View[];
-}
-
-export interface View {
-	id: string;
-	name: string;
-	type: GuiType;
-	moveable: boolean;
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-	data: Data;
-}
-
-export interface Data {
-	text_value: Option<String>;
-	horizontal: Option<Align>;
-	vertical: Option<Align>;
-	actions: Option<Option<Action>[]>;
-}
-
-export interface Action {
-	text_value: String;
-	event: Event;
-}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index afc2ea1..8871245 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,57 +1,62 @@
-import type { View } from './types';
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
 
-export function keys<T extends object>(obj: T) {
-	return Object.keys(obj) as Array<keyof T>;
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
 }
 
-export function areArraysEqual(arr1: any[], arr2: any[]): boolean {
-	if (arr1.length !== arr2.length) {
-		return false;
-	}
-
-	for (let i = 0; i < arr1.length; i++) {
-		if (!areObjectsEqual(arr1[i], arr2[i])) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
-export function areObjectsEqual(obj1: any, obj2: any): boolean {
-	if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
-		return obj1 === obj2;
-	}
-
-	const keys1 = Object.keys(obj1);
-	const keys2 = Object.keys(obj2);
-
-	if (keys1.length !== keys2.length) {
-		return false;
-	}
-
-	for (const key of keys1) {
-		if (!areObjectsEqual(obj1[key], obj2[key])) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
-export function isItemColliding(item: View, otherItem: View) {
-	return (
-		item.id !== otherItem.id &&
-		item.x <= otherItem.x + otherItem.w - 1 &&
-		item.y <= otherItem.y + otherItem.h - 1 &&
-		item.x + item.w - 1 >= otherItem.x &&
-		item.y + item.h - 1 >= otherItem.y
-	);
-}
-
-export function areItemsColliding(item: View, items: View[]) {
-	for (const item2 of items) {
-		if (isItemColliding(item, item2)) return true;
-	}
-	return false;
-}
+type FlyAndScaleParams = {
+	y?: number;
+	x?: number;
+	start?: number;
+	duration?: number;
+};
+
+export const flyAndScale = (
+	node: Element,
+	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === "none" ? "" : style.transform;
+
+	const scaleConversion = (
+		valueA: number,
+		scaleA: [number, number],
+		scaleB: [number, number]
+	) => {
+		const [minA, maxA] = scaleA;
+		const [minB, maxB] = scaleB;
+
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
+
+		return valueB;
+	};
+
+	const styleToString = (
+		style: Record<string, number | string | undefined>
+	): string => {
+		return Object.keys(style).reduce((str, key) => {
+			if (style[key] === undefined) return str;
+			return str + `${key}:${style[key]};`;
+		}, "");
+	};
+
+	return {
+		duration: params.duration ?? 200,
+		delay: 0,
+		css: (t) => {
+			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8825e9d..d275267 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,109 +1,58 @@
-<script lang="ts">
-	import '../app.postcss';
-	import '@fortawesome/fontawesome-free/css/all.css';
-	import {
-		AppShell,
-		AppBar,
-		Modal,
-		Drawer,
-		type DrawerSettings,
-		getDrawerStore,
-		type ModalComponent
-	} from '@skeletonlabs/skeleton';
-
-	// stores
-	import { initializeStores } from '@skeletonlabs/skeleton';
-	initializeStores();
-
-	const modalRegistry: Record<string, ModalComponent> = {
-		editModal: { ref: EditModal }
-	};
-
-	const drawerStore = getDrawerStore();
-
-	// Floating UI for Popups
-	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
-	import { storePopup } from '@skeletonlabs/skeleton';
-	import Menu from './builder/Menu.svelte';
+<script>
+	import '../app.pcss';
+	import { ModeWatcher, toggleMode } from 'mode-watcher';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Avatar from '$lib/components/ui/avatar';
+	import { Button } from '$lib/components/ui/button';
+	import { Sun, Moon, Github, User } from 'lucide-svelte';
 	import { page } from '$app/stores';
-	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
-
-	// hljs
-	import hljs from 'highlight.js/lib/core';
-	import rust from 'highlight.js/lib/languages/rust';
-	hljs.registerLanguage('rust', rust);
-	import 'highlight.js/styles/github-dark.css';
-	import { storeHighlightJs } from '@skeletonlabs/skeleton';
-	import EditModal from './builder/EditModal.svelte';
-	storeHighlightJs.set(hljs);
-
-	// Drawer Handler
-	function drawerOpen(): void {
-		const s: DrawerSettings = { id: 'doc-sidenav' };
-		drawerStore.open(s);
-	}
 </script>
 
-<Modal components={modalRegistry} />
-<Drawer class={$drawerStore.id === 'doc-sidenav' ? 'lg:hidden' : ''}>
-	{#if $drawerStore.id === 'doc-sidenav'}
-		<Menu embedded={true} />
-	{:else}
-		<!-- Fallback Error -->
-		<div class="w-full h-full flex justify-center items-center">
-			<div class="text-center space-y-2">
-				<p>Invalid <code class="code">$drawerStore.id</code> provided.</p>
+<ModeWatcher disableTransitions={false} />
+
+<header
+	class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+>
+	<div class="container pl-4 pr-4">
+		<div class="flex h-[70px] items-center justify-between gap-3">
+			<div class="flex items-center gap-1.5">
+				<nav class="flex items-center gap-6 text-sm">
+					<a
+						href="/"
+						class="{$page.url.pathname == '/'
+							? 'text-foreground'
+							: 'text-foreground/60'}  transition-colors hover:text-foreground/80"
+						><Avatar.Root>
+							<Avatar.Image src="favicon.png" alt="flip-ui" />
+							<Avatar.Fallback>FP</Avatar.Fallback>
+						</Avatar.Root></a
+					>
+					<a
+						href="/builder"
+						class="{$page.url.pathname == '/builder'
+							? 'text-foreground'
+							: 'text-foreground/60'} transition-colors hover:text-foreground/80">Builder</a
+					>
+					<a
+						href="https://github.com/flip-ui"
+						target="_blank"
+						class="text-foreground/60 transition-colors hover:text-foreground/80">Github</a
+					>
+				</nav>
+			</div>
+			<div class="flex items-center justify-end gap-2.5">
+				<Button on:click={toggleMode} variant="outline" size="icon">
+					<Sun
+						class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+					/>
+					<Moon
+						class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+					/>
+					<span class="sr-only">Toggle theme</span>
+				</Button>
 			</div>
 		</div>
-	{/if}
-</Drawer>
-
-<!-- App Shell -->
-<AppShell slotSidebarLeft="bg-surface-50-900-token">
-	<svelte:fragment slot="header">
-		<!-- App Bar -->
-		<AppBar shadow="shadow-2xl" slotTrail="!space-x-2">
-			<svelte:fragment slot="lead">
-				<!-- Hamburger Menu -->
-				{#if $page.url.pathname == '/builder'}
-					<button on:click={drawerOpen} class="btn-icon btn-icon-sm lg:!hidden">
-						<i class="fa-solid fa-bars text-xl" />
-					</button>
-				{/if}
-				<a href="/"><h1 class="h1 scale-x-[-1] scale-y-[-1]">flip</h1></a>
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<a
-					class="btn hover:variant-soft-primary {$page.url.pathname == '/'
-						? 'bg-primary-active-token'
-						: ''}"
-					href="/"
-					data-sveltekit-preload-data="hover">Home</a
-				>
-				<a
-					class="btn hover:variant-soft-primary {$page.url.pathname == '/builder'
-						? 'bg-primary-active-token'
-						: ''}"
-					href="/builder"
-					data-sveltekit-preload-data="hover">Builder</a
-				>
-				<a
-					class="btn w-12 hover:variant-soft-primary"
-					style="padding-top: 13px; padding-bottom: 13px;"
-					href="https://github.com/flip-ui/flip-ui.github.io/"
-					target="_blank"
-					rel="noreferrer"
-					><i class="fa-brands fa-github text-lg"></i>
-				</a>
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
+	</div>
+</header>
 
-	<svelte:fragment slot="sidebarLeft">
-		{#if $page.url.pathname == '/builder'}
-			<Menu class="hidden lg:grid w-[360px] overflow-hidden" />
-		{/if}
-	</svelte:fragment>
-	<!-- Page Route Content -->
-	<slot />
-</AppShell>
+<slot />
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 0df44ad..c8cacf0 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,2 +1 @@
-export const prerender = true;
-export const ssr = true;
+export const prerender = true;
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3268334..d6f99b9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,74 +1,47 @@
-<script>
-	import { CodeBlock } from '@skeletonlabs/skeleton';
+<script lang="ts">
+	import Code from './Code.svelte';
 </script>
 
 <svelte:head>
 	<title>Home</title>
 	<meta name="description" content="Homepage" />
 </svelte:head>
-
-<div class="container h-full mx-auto flex justify-center items-center">
-	<div class="space-y-8 flex flex-col lg:w-2/3 w-11/12 pt-6 pb-6">
-		<h1 class="h1">Welcome to <span class="rotate-180 inline-block">flip</span></h1>
-		<blockquote class="blockquote">The UI Builder for the Flipper Zero</blockquote>
-		<p>Effortlessly design and export user interfaces for your Flipper Zero applications.</p>
-
-		<h2 class="h2">Getting Started</h2>
-		<p>
-			Begin by designing your UI using our intuitive builder. Once you are satisfied with the
-			design, export it as a JSON file. This JSON can be directly used with the specified Rust crate
-			to integrate into your Flipper Zero application.
-		</p>
-
-		<h3 class="h3">Variables</h3>
-		<p>
-			In all Text Input Fields, external variables that you have to define in the Rust code and
-			include in the proc macro can be referenced to in <code class="code">{'{'}{'}'}</code> - brackets.
-		</p>
-		<h3 class="h3">Actions</h3>
-		<p>
-			All buttons can have actions. An action can either be switching to a view or a custom function
-			you defined in the Rust proc macro code. The syntax is:
-			<code class="code">function_name(optional_params)</code>
-		</p>
-		<h3 class="h3">UI Items</h3>
-		<p>
-			The UI operates on the principle of views. Every view can have UI items (found under the UI <code
-				class="code">Add Items</code
-			>
-			- Tab) of one category. Using the Edit (pen icon) button, you can edit the already described properties
-			(plus, on Header and Body Text, you can also set text alignment). You can also set the position
-			of
-			<code class="code">Moveable</code> items by moving them.
-		</p>
-
-		<h3 class="h3">Integration with Rust</h3>
-		<p>
-			To integrate the exported JSON into your Flipper Zero app, use our dedicated Rust crate.
-			Simply include the crate in your project and load the JSON to render the UI components (don't
-			forget to pass in your functions and variables).
-		</p>
-		<h3 class="h3">Example:</h3>
-		<CodeBlock
-			language="rust"
-			code={`// Import the flip_ui crate
-use flip_ui;
-
-fn main() {
-	// Load the exported UI JSON file
-	let ui = flip_ui::load_from_json("path/to/your/ui.json").expect("Failed to load UI");
-
-	// Initialize the UI with the necessary variables and functions
-	// Replace \`your_function\` and \`your_variable\` with actual implementations
-	ui.init_with(|builder| {
-		builder
-			.function("your_function_name", your_function)
-			.variable("your_variable_name", your_variable)
-	});
-
-	// Add application-specific logic here
-}
-`}
-		></CodeBlock>
-	</div>
+<div class="container mx-auto flex max-w-6xl flex-col space-y-8 p-4">
+	<h1 class="h1">Welcome to <span class="inline-block rotate-180">flip-ui</span></h1>
+	<blockquote class="blockquote">The UI Builder for the Flipper Zero</blockquote>
+	<p>Effortlessly design and export user interfaces for your Flipper Zero applications.</p>
+
+	<h2 class="h2">Getting Started</h2>
+	<p>
+		Begin by designing your UI using our intuitive builder. Once you are satisfied with the design,
+		export it as a JSON file. This JSON can be directly used with the specified Rust crate to
+		integrate into your Flipper Zero application.
+	</p>
+
+	<h3 class="h3">Events</h3>
+	<p>
+		All buttons can have events. An event can be a function you defined in the Rust proc macro code
+		or a predefined event, which currently are:
+		<code class="code">next</code>, <code class="code">back</code> and
+		<code class="code">close</code>.
+	</p>
+	<h3 class="h3">UI Items</h3>
+	<p>
+		The UI operates on the principle of views. Every view can have UI items (found under the UI <code
+			class="code">Add Items</code
+		>
+		- Tab) of one category. Using the Edit (pen icon) button, you can edit the already described properties
+		(plus, on Header and Body Text, you can also set text alignment). You can also set the position of
+		<code class="code">Moveable</code> items by moving them.
+	</p>
+
+	<h3 class="h3">Integration with Rust</h3>
+	<p>
+		To integrate the exported JSON into your Flipper Zero app, use our dedicated Rust crate. Simply
+		include the crate in your project and load the JSON to render the UI components (don't forget to
+		pass in your functions).
+	</p>
+	<h3 class="h3">Example:</h3>
+
+	<Code />
 </div>
diff --git a/src/routes/Code.svelte b/src/routes/Code.svelte
new file mode 100644
index 0000000..4f4dd7e
--- /dev/null
+++ b/src/routes/Code.svelte
@@ -0,0 +1,81 @@
+<script>
+	import { clickToCopyAction } from 'svelte-legos';
+	import Prism from 'prismjs';
+	import 'prismjs/components/prism-rust';
+	import 'prismjs/themes/prism-dark.css';
+	import { Check, Copy } from 'lucide-svelte';
+
+	let copied = false;
+	let code = `#![no_main]
+#![no_std]
+
+// Required for panic handler
+extern crate flipperzero_rt;
+
+use core::ffi::CStr;
+use flip_ui_macro::flipper_ui;
+use flipperzero_rt::{entry, manifest};
+
+// Define the FAP Manifest for this application
+manifest!(
+	name = "Flipper Zero Rust",
+	app_version = 1,
+	has_icon = false,
+);
+
+// Define the entry function
+entry!(main);
+
+// Getting UI data && actions
+flipper_ui! {
+	App,
+	"src/main.json",
+	next => next,
+	close => close,
+}
+
+// Entry point
+fn main(_args: Option<&CStr>) -> i32 {
+	let mut app = App::create();
+
+	app.show();
+
+	0
+}`;
+
+	$: highlightedCode = Prism.highlight(code, Prism.languages.rust, 'rust');
+
+	function handleCopyDone() {
+		copied = true;
+		setTimeout(() => {
+			copied = false;
+		}, 1000);
+	}
+
+	function handleCopyError() {
+		console.error('Error copying');
+	}
+</script>
+
+<div class="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
+	<div class="flex h-0 flex-row justify-end">
+		<button
+			class="relative right-4 top-4 z-10 inline-flex h-6 w-6 items-center justify-center rounded-md text-sm font-medium text-zinc-50 transition-colors hover:bg-zinc-700 hover:text-zinc-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+			use:clickToCopyAction={code}
+			on:copy-done={handleCopyDone}
+			on:copy-error={handleCopyError}
+		>
+			<span class="sr-only">Copy</span>
+			{#if copied}
+				<Check class="h-3 w-3" tabindex={-1} />
+			{:else}
+				<Copy class="h-3 w-3" tabindex={-1} />
+			{/if}
+		</button>
+	</div>
+	<pre
+		bind:innerHTML={highlightedCode}
+		contenteditable="false"
+		aria-multiline="true"
+		class="text-sm mb-4 mt-6 !max-h-full overflow-x-auto whitespace-pre-wrap text-nowrap rounded-lg border bg-zinc-950 p-4 py-4 font-mono text-white dark:bg-zinc-900"></pre>
+</div>
diff --git a/src/routes/builder/+page.svelte b/src/routes/builder/+page.svelte
index 55d061e..62b301a 100644
--- a/src/routes/builder/+page.svelte
+++ b/src/routes/builder/+page.svelte
@@ -1,6 +1,7 @@
-<script lang="ts">
-	import { views } from '$lib/stores';
-	import Grid from './Grid.svelte';
+<script>
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { Plus, Layers, Download } from 'lucide-svelte';
 </script>
 
 <svelte:head>
@@ -8,17 +9,59 @@
 	<meta name="description" content="Website's specific UI-Builder" />
 </svelte:head>
 
-<h2 class="h2 m-2">{$views.pages.length != 0 ? `View ${$views.current + 1}` : 'No Views!'}</h2>
-<div
-	class="card p-4 m-2 {$views.pages.length != 0
-		? 'variant-ghost-primary'
-		: 'variant-ghost'} overflow-hidden"
->
-	<Grid />
+<div class="grid w-full pl-[336px]">
+	<aside
+		class="inset-y fixed left-0 z-20 flex h-full flex-col border-b border-border/40 bg-background/65 backdrop-blur supports-[backdrop-filter]:bg-background/30"
+	>
+		<div class="grid grid-cols-[auto_1fr]">
+			<nav class="grid gap-1 p-2">
+				<Tooltip.Root>
+					<Tooltip.Trigger asChild let:builder>
+						<Button
+							variant="ghost"
+							size="icon"
+							class="rounded-lg border border-input bg-muted"
+							aria-label="Playground"
+							builders={[builder]}
+						>
+							<Plus class="size-5" />
+						</Button>
+					</Tooltip.Trigger>
+					<Tooltip.Content side="right" sideOffset={5}>Add Items</Tooltip.Content>
+				</Tooltip.Root>
+				<Tooltip.Root>
+					<Tooltip.Trigger asChild let:builder>
+						<Button
+							variant="ghost"
+							size="icon"
+							class="rounded-lg"
+							aria-label="Models"
+							builders={[builder]}
+						>
+							<Layers class="size-5" />
+						</Button>
+					</Tooltip.Trigger>
+					<Tooltip.Content side="right" sideOffset={5}>Views</Tooltip.Content>
+				</Tooltip.Root>
+				<Tooltip.Root>
+					<Tooltip.Trigger asChild let:builder>
+						<Button
+							variant="ghost"
+							size="icon"
+							class="rounded-lg"
+							aria-label="API"
+							builders={[builder]}
+						>
+							<Download class="size-5" />
+						</Button>
+					</Tooltip.Trigger>
+					<Tooltip.Content side="right" sideOffset={5}>Export</Tooltip.Content>
+				</Tooltip.Root>
+			</nav>
+			<nav class="grid w-[280px] gap-1 overflow-y-auto p-2">
+				<Button>ASD</Button>
+			</nav>
+		</div>
+	</aside>
+	<div class="flex flex-col"></div>
 </div>
-
-<style>
-	div {
-		height: calc(100% - 64px);
-	}
-</style>
diff --git a/src/routes/builder/EditModal.svelte b/src/routes/builder/EditModal.svelte
deleted file mode 100644
index c9462da..0000000
--- a/src/routes/builder/EditModal.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-	import type { SvelteComponent } from 'svelte';
-	// Stores
-	import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
-	import { views } from '$lib/stores';
-	import { Align, alignToString, GuiType, type View, type Action } from '$lib/types';
-
-	// Props
-	/** Exposes parent props to this component. */
-	export let parent: SvelteComponent;
-
-	const modalStore = getModalStore();
-	// Base Classes
-	const cBase = 'card p-4 w-modal shadow-xl space-y-4';
-	const cHeader = 'text-2xl font-bold';
-
-	let view: View = $modalStore[0]?.meta.toChange;
-
-	// apply reactivity on close
-	modalStore.subscribe((modals: ModalSettings[]) => {
-		if (!modals.length) $views = $views;
-	});
-
-	// select shenanigans
-	let ev = new Array(view.data.actions?.length).fill('view');
-</script>
-
-<!-- @component This is an Edit Modal for the Items. -->
-
-{#if $modalStore[0]}
-	<div class={cBase}>
-		<header class={cHeader}>Edit</header>
-
-		{#if view.data.text_value != null}
-			{#if typeof view.data.text_value == 'string'}
-				<label class="label">
-					<span>Edit Text</span>
-					<input
-						class="input"
-						type="text"
-						placeholder="Text Value and/or Variable using {'{'}var_name{'}'}"
-						bind:value={view.data.text_value}
-						maxlength="70"
-					/>
-				</label>
-			{/if}
-			{#if view.data.horizontal != null && view.data.vertical != null}
-				<label class="label">
-					<span>Horizontal Align</span>
-					<select class="select" bind:value={view.data.horizontal}>
-						{#each Object.values(Align).filter((value) => typeof value === 'number') as align}
-							<option value={align}>{alignToString(align)}</option>
-						{/each}
-					</select>
-				</label>
-				<label class="label">
-					<span>Vertical Align</span>
-					<select class="select" bind:value={view.data.vertical}>
-						{#each Object.values(Align).filter((value) => typeof value === 'number') as align}
-							<option value={align}>{alignToString(align)}</option>
-						{/each}
-					</select>
-				</label>
-			{/if}
-		{/if}
-
-		{#if view.data.actions != null}
-			{#each view.data.actions as action, i}
-				{#if action != null}
-					<label class="label">
-						<span>Action {i + 1}</span>
-						<input
-							class="input"
-							type="text"
-							disabled={view.type == GuiType.Alert}
-							placeholder="Text Value and/or Variable using {'{'}var_name{'}'}"
-							bind:value={action.text_value}
-							maxlength="40"
-						/>
-						<div class="input-group input-group-divider grid-cols-[1fr_auto]">
-							{#if 'View' in action.event}
-								<input
-									type="number"
-									placeholder="Number of View (leave blank for Closing the App)"
-									bind:value={action.event.View}
-									maxlength="10"
-								/>
-							{:else}
-								<input
-									type="text"
-									placeholder="Function Name with () for Params"
-									bind:value={action.event.Function}
-									maxlength="40"
-								/>
-							{/if}
-							<select
-								bind:value={ev[i]}
-								on:change={() => {
-									if (ev[i] === 'view') {
-										if (action) action.event = { View: 1 };
-									} else if (ev[i] === 'function') {
-										if (action) action.event = { Function: '' };
-									}
-								}}
-							>
-								<option value={'view'}>View</option>
-								<option value={'function'}>Function</option>
-							</select>
-						</div>
-						<button
-							class="btn variant-filled"
-							on:click={() => (action = null)}
-							disabled={view.type == GuiType.Alert}
-							><i class="fa-solid fa-minus mr-2"></i>Remove Action</button
-						>
-					</label>
-				{:else}
-					<label class="label">
-						<div>Action {i + 1}</div>
-						<button
-							class="btn variant-filled"
-							on:click={() => {
-								action = {
-									text_value: '',
-									event: { View: 1 }
-								};
-							}}><i class="fa-solid fa-plus mr-2"></i> Add Action</button
-						>
-					</label>
-				{/if}
-			{/each}
-		{/if}
-
-		<!-- prettier-ignore -->
-		<footer class="modal-footer {parent.regionFooter}">
-        <button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>Close</button>
-    </footer>
-	</div>
-{/if}
diff --git a/src/routes/builder/Grid.svelte b/src/routes/builder/Grid.svelte
deleted file mode 100644
index 7c0bbec..0000000
--- a/src/routes/builder/Grid.svelte
+++ /dev/null
@@ -1,188 +0,0 @@
-<script lang="ts">
-	import { type ModalSettings } from '@skeletonlabs/skeleton';
-	import { fade } from 'svelte/transition';
-	import { getModalStore } from '@skeletonlabs/skeleton';
-	import { keys } from '$lib/utils';
-	import { Grid, GridItem } from 'svelte-grid-extended';
-	import { gridController, views } from '$lib/stores';
-	import { Align, GuiType, type View } from '$lib/types';
-
-	const modalStore = getModalStore();
-
-	function deleteItem(id: string) {
-		$views.pages[$views.current].page = $views.pages[$views.current].page.filter(
-			(view: { id: string }) => view.id !== id
-		);
-		$views = $views;
-	}
-
-	function editItem(toChange: View) {
-		const modal: ModalSettings = {
-			type: 'component',
-			component: 'editModal',
-			// Data
-			meta: { toChange }
-		};
-
-		$views = $views;
-		modalStore.trigger(modal);
-	}
-
-	$: verticalAlign = (align: Align) => {
-		switch (align) {
-			case Align.Left:
-				return '';
-			case Align.Right:
-				return '';
-			case Align.Top:
-				return 'items-start';
-			case Align.Bottom:
-				return 'items-end';
-			case Align.Center:
-				return 'items-center';
-		}
-	};
-	$: horizontalAlign = (align: Align) => {
-		switch (align) {
-			case Align.Left:
-				return 'justify-start';
-			case Align.Right:
-				return 'justify-end';
-			case Align.Top:
-				return '';
-			case Align.Bottom:
-				return '';
-			case Align.Center:
-				return 'justify-center';
-		}
-	};
-</script>
-
-<Grid
-	debug
-	bounds
-	cols={20}
-	rows={10}
-	collision="none"
-	bind:controller={$gridController}
-	class="z-[1]"
->
-	{#if $views.pages[$views.current]}
-		{#each $views.pages[$views.current].page as view (view.id)}
-			<div transition:fade={{ duration: 300 }}>
-				<GridItem
-					previewClass="transition-all duration-200 variant-glass rounded-md"
-					activeClass="z-[2]"
-					id={view.id}
-					bind:x={view.x}
-					bind:y={view.y}
-					bind:w={view.w}
-					bind:h={view.h}
-					movable={view.moveable}
-					resizable={false}
-					class="pt-2 pb-2 pr-5 pl-5 rounded-md variant-glass"
-				>
-					{#if view.type == GuiType.Header}
-						<div
-							class="flex {!view.data.text_value ? 'opacity-30' : ''} {verticalAlign(
-								view.data.vertical || Align.Top
-							)} {horizontalAlign(view.data.horizontal || Align.Left)} h-full"
-						>
-							<h2 class="lg:h2 h3 truncate">
-								{#if view.data.text_value}
-									{view.data.text_value}
-								{:else}
-									Unset
-								{/if}
-							</h2>
-						</div>
-					{:else if view.type == GuiType.BodyText}
-						<div
-							class="flex {!view.data.text_value ? 'opacity-30' : ''} {verticalAlign(
-								view.data.vertical || Align.Top
-							)} {horizontalAlign(view.data.horizontal || Align.Left)} h-full"
-						>
-							<p class="lg:text-base text-xs truncate">
-								{#if view.data.text_value}
-									{view.data.text_value}
-								{:else}
-									Unset
-								{/if}
-							</p>
-						</div>
-					{:else if view.type == GuiType.Buttons}
-						{#if view.data.actions}
-							<div class="flex justify-between items-center h-full">
-								{#each view.data.actions as action}
-									{#if action}
-										<span
-											class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled truncate h-fit lg:text-base text-xs"
-										>
-											{action.text_value}
-											{#if action.event}
-												<span
-													class="ml-2 badge variant-filled-tertiary z-10 place-self-center truncate lg:text-base text-xs"
-													>{Object.keys(action.event)[0]}</span
-												>
-											{/if}
-										</span>
-									{:else}
-										<span
-											class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled opacity-30 truncate h-fit lg:text-base text-xs"
-											>Unset</span
-										>
-									{/if}
-								{/each}
-							</div>
-						{/if}
-					{:else if view.type == GuiType.Alert}
-						{#if view.data.text_value}
-							<p class="truncate lg:text-base text-xs">{view.data.text_value}</p>
-						{:else}
-							<p class="opacity-30 truncate lg:text-base text-xs">Unset</p>
-						{/if}
-						<div class="flex justify-center items-end h-full">
-							{#if view.data.actions && view.data.actions[0]}
-								<span
-									class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled truncate h-fit mb-8 lg:text-base text-xs"
-								>
-									{view.data.actions[0].text_value}
-									{#if view.data.actions[0].event}
-										<span
-											class="ml-2 badge variant-filled-tertiary z-10 place-self-center truncate lg:text-base text-xs"
-											>{Object.keys(view.data.actions[0].event)[0]}</span
-										>
-									{/if}
-								</span>
-							{:else}
-								<span
-									class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled opacity-30 truncate h-fit mb-8 lg:text-base text-xs"
-									>Unset</span
-								>
-							{/if}
-						</div>
-					{:else}
-						{view.name},
-						{#each keys(view.data) as key (key)}
-							<span class="flex-auto truncate">{key}: {view.data[key]}, </span>
-						{/each}
-					{/if}
-					<span class="badge variant-filled absolute -top-4 -left-4 z-[2]">{view.name}</span>
-					<button
-						class="btn w-8 h-[24px] pt-1 pb-1 pr-2 pl-2 variant-filled-primary absolute -top-4 right-8 z-[99]"
-						title="Edit"
-						on:click={() => editItem(view)}
-						on:pointerdown={(e) => e.stopPropagation()}><i class="fa-solid fa-pen"></i></button
-					>
-					<button
-						class="btn w-8 h-[24px] pt-1 pb-1 pr-2 pl-2 variant-filled-error absolute -top-4 -right-4 z-[99]"
-						title="Delete"
-						on:click={() => deleteItem(view.id)}
-						on:pointerdown={(e) => e.stopPropagation()}
-						><i class="fa-solid fa-delete-left"></i></button
-					>
-				</GridItem>
-			</div>
-		{/each}
-	{/if}
-</Grid>
diff --git a/src/routes/builder/Menu.svelte b/src/routes/builder/Menu.svelte
deleted file mode 100644
index 67cb755..0000000
--- a/src/routes/builder/Menu.svelte
+++ /dev/null
@@ -1,329 +0,0 @@
-<script lang="ts">
-	import { gridController, views } from '$lib/stores';
-	import { AppRail, AppRailAnchor, AppRailTile, getDrawerStore } from '@skeletonlabs/skeleton';
-	import { Align, GuiType, type Option, type Views, type Data, type View } from './../../lib/types';
-	import { areItemsColliding } from '$lib/utils';
-
-	const drawerStore = getDrawerStore();
-
-	let currentTile: number = 0;
-
-	function addNewView(type: GuiType) {
-		let newView = matchTypes(type);
-
-		const pos = $gridController.getFirstAvailablePosition(newView.w, newView.h);
-		if (newView.x == 0) newView.x = pos?.x || 0;
-		if (newView.y == 0) newView.y = pos?.y || 0;
-
-		if (!areItemsColliding(newView, $views.pages[$views.current].page)) {
-			$views.pages[$views.current].page.push(newView);
-			$views.pages[$views.current] = $views.pages[$views.current];
-		}
-	}
-
-	function matchTypes(type: GuiType): View {
-		switch (type) {
-			case GuiType.Header:
-				return {
-					id: crypto.randomUUID(),
-					name: 'Header',
-					type: GuiType.Header,
-					w: 20,
-					h: 2,
-					x: 0,
-					y: 0,
-					moveable: true,
-					data: {
-						text_value: '',
-						horizontal: Align.Left,
-						vertical: Align.Center,
-						actions: null
-					}
-				};
-			case GuiType.BodyText:
-				return {
-					id: crypto.randomUUID(),
-					name: 'Body Text',
-					type: GuiType.BodyText,
-					w: 20,
-					h: 2,
-					x: 0,
-					y: 0,
-					moveable: true,
-					data: {
-						text_value: '',
-						horizontal: Align.Left,
-						vertical: Align.Center,
-						actions: null
-					}
-				};
-			case GuiType.Buttons:
-				return {
-					id: crypto.randomUUID(),
-					name: 'Buttons',
-					type: GuiType.Buttons,
-					w: 20,
-					h: 2,
-					x: 0,
-					y: 8,
-					moveable: false,
-					data: {
-						text_value: null,
-						horizontal: null,
-						vertical: null,
-						actions: [null, null, null]
-					}
-				};
-			case GuiType.Alert:
-				return {
-					id: crypto.randomUUID(),
-					name: 'Alert',
-					type: GuiType.Alert,
-					w: 20,
-					h: 10,
-					x: 0,
-					y: 0,
-					moveable: false,
-					data: {
-						text_value: '',
-						horizontal: null,
-						vertical: null,
-						actions: [
-							{
-								text_value: 'Ok',
-								event: {
-									View: 0
-								}
-							}
-						]
-					}
-				};
-		}
-	}
-
-	function convertViewsToMenu(views: Views): {
-		id: string;
-		label: number;
-		badge: string | undefined;
-		disabled: undefined | boolean;
-		select: () => void;
-		del: (id: string) => void;
-	}[] {
-		return views.pages.map((view, index) => ({
-			id: view.id,
-			label: index + 1,
-			badge: views.current == index ? 'current' : undefined,
-			disabled: undefined,
-			select: () => {
-				views.current = index;
-				$views = views;
-			},
-			del: (id: string) => {
-				if ($views.current != 0 && $views.pages.length - 1 <= $views.current) $views.current -= 1;
-				$views.pages = views.pages.filter((item) => item.id !== id);
-			}
-		}));
-	}
-
-	function downloadJson() {
-		const jsonStr = JSON.stringify($views, null, 2);
-		const blob = new Blob([jsonStr], { type: 'application/json' });
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement('a');
-		a.href = url;
-		a.download = 'data.json';
-		a.click();
-		URL.revokeObjectURL(url);
-	}
-
-	$: disabled = (views: Views, type: GuiType | undefined) => {
-		return (
-			views.pages.length == 0 ||
-			(views.pages[views.current].page.find((view) => view.type === type) != undefined ?? true)
-		);
-	};
-	$: submenu = [
-		{
-			title: 'Message',
-			tile: 0,
-			list: [
-				{
-					id: undefined,
-					label: 'Header',
-					badge: 'Moveable',
-					disabled: disabled($views, GuiType.Header),
-					select: () => addNewView(GuiType.Header),
-					del: undefined
-				},
-				{
-					id: undefined,
-					label: 'Body Text',
-					badge: 'Moveable',
-					disabled: disabled($views, GuiType.BodyText),
-					select: () => addNewView(GuiType.BodyText),
-					del: undefined
-				},
-				{
-					id: undefined,
-					label: 'Buttons',
-					badge: 'Fixed',
-					disabled: disabled($views, GuiType.Buttons),
-					select: () => addNewView(GuiType.Buttons),
-					del: undefined
-				}
-			]
-		},
-		{
-			title: 'Dialog',
-			tile: 0,
-			list: [
-				{
-					id: undefined,
-					label: 'Alert',
-					badge: 'Fixed',
-					disabled: disabled($views, GuiType.Alert),
-					select: () => addNewView(GuiType.Alert),
-					del: undefined
-				},
-				{
-					id: undefined,
-					label: 'Browser',
-					badge: 'Not yet Implemented',
-					disabled: true,
-					select: () => {},
-					del: undefined
-				}
-			]
-		},
-		{
-			title: 'Notifications',
-			tile: 0,
-			list: [
-				{
-					id: undefined,
-					label: 'LED Event',
-					badge: 'Not yet Implemented',
-					disabled: true,
-					select: () => {},
-					del: undefined
-				}
-			]
-		},
-		{
-			title: 'User Input',
-			tile: 0,
-			list: [
-				{
-					id: undefined,
-					label: 'Input',
-					badge: 'Not yet Implemented',
-					disabled: true,
-					select: () => {},
-					del: undefined
-				}
-			]
-		},
-		{
-			title: 'Views',
-			tile: 1,
-			list: [
-				...convertViewsToMenu($views),
-				{
-					id: undefined,
-					label: '<i class="fa-solid fa-plus mr-2"></i> Add View',
-					badge: undefined,
-					disabled: undefined,
-					select: () => {
-						$views.pages.push({ page: [], id: crypto.randomUUID() });
-						$views = $views;
-					},
-					del: undefined
-				}
-			]
-		},
-		{
-			title: 'Export',
-			tile: 2,
-			list: [
-				{
-					id: undefined,
-					label: '<i class="fa-solid fa-file-export mr-2"></i> Download JSON',
-					badge: undefined,
-					disabled: disabled($views, undefined),
-					select: downloadJson,
-					del: undefined
-				}
-			]
-		}
-	];
-</script>
-
-<div
-	class="grid grid-cols-[auto_1fr] h-full bg-surface-50-900-token border-r border-surface-500/30 {$$props.class ??
-		''}"
->
-	<AppRail background="bg-transparent" border="border-r border-surface-500/30">
-		<AppRailAnchor name="add-items" title="Close" on:click={drawerStore.close} class="lg:hidden">
-			<svelte:fragment slot="lead"><i class="fa-solid fa-xmark"></i></svelte:fragment>
-			<span>Close</span>
-		</AppRailAnchor>
-		<AppRailTile bind:group={currentTile} name="add-items" value={0} title="Add Items">
-			<svelte:fragment slot="lead"><i class="fa-solid fa-plus"></i></svelte:fragment>
-			<span>Add Items</span>
-		</AppRailTile>
-		<AppRailTile bind:group={currentTile} name="views" value={1} title="Views">
-			<svelte:fragment slot="lead"><i class="fa-solid fa-file"></i></svelte:fragment>
-			<span>Views</span>
-		</AppRailTile>
-		<svelte:fragment slot="trail">
-			<AppRailTile bind:group={currentTile} name="export" value={2} title="Export">
-				<svelte:fragment slot="lead"><i class="fa-solid fa-download"></i></svelte:fragment>
-				<span>Export</span>
-			</AppRailTile>
-		</svelte:fragment>
-	</AppRail>
-	<!-- Nav -->
-	<section class="p-4 pb-20 space-y-4 overflow-y-auto">
-		{#each submenu as segment, i}
-			{#if segment.tile == currentTile}
-				<!-- Title -->
-				<p class="font-bold pl-4 text-2xl">{segment.title}</p>
-				<!-- List -->
-				<ul class="list flex-auto">
-					{#each segment.list as { id, label, badge, select, disabled, del }}
-						<div class="flex flex-nowrap">
-							<button
-								{disabled}
-								type="button"
-								on:click={select}
-								class="btn variant-filled {del ? 'wtf' : 'w-full'}"
-							>
-								<span class="flex-auto text-start">{@html label}</span>
-								{#if badge}<span class="badge variant-filled-secondary">{badge}</span>{/if}
-							</button>
-							{#if del}
-								<button
-									class="ml-1 btn w-8 variant-filled-error place-self-center"
-									style="padding-top: 13px; padding-bottom: 13px;"
-									on:click={() => {
-										if (del) del(id ?? '');
-									}}><i class="fa-solid fa-delete-left"></i></button
-								>
-							{/if}
-						</div>
-					{/each}
-				</ul>
-				<!-- Divider -->
-				{#if i + 1 < submenu.filter((item) => item.tile === currentTile).length}
-					<hr class="!my-6 opacity-50" />
-				{/if}
-			{/if}
-		{/each}
-	</section>
-</div>
-
-<style>
-	.wtf {
-		width: calc(100% - 40px);
-	}
-</style>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e2a1000..a898047 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,35 +1,69 @@
-import { join } from 'path';
-import type { Config } from 'tailwindcss';
-import forms from '@tailwindcss/forms';
-import typography from '@tailwindcss/typography';
-import { skeleton } from '@skeletonlabs/tw-plugin';
+import { fontFamily } from "tailwindcss/defaultTheme";
+import type { Config } from "tailwindcss";
 
-export default {
-	darkMode: 'class',
-	content: [
-		'./src/**/*.{html,js,svelte,ts}',
-		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
-	],
+const config: Config = {
+	darkMode: ["class"],
+	content: ["./src/**/*.{html,js,svelte,ts}"],
+	safelist: ["dark"],
 	theme: {
-		extend: {}
-	},
-	plugins: [
-		forms,
-		typography,
-		skeleton({
-			themes: {
-				preset: [
-					{
-						name: 'vintage',
-						enhancements: true
-					}
-				]
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px"
+			}
+		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border) / <alpha-value>)",
+				input: "hsl(var(--input) / <alpha-value>)",
+				ring: "hsl(var(--ring) / <alpha-value>)",
+				background: "hsl(var(--background) / <alpha-value>)",
+				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				primary: {
+					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+				},
+				card: {
+					DEFAULT: "hsl(var(--card) / <alpha-value>)",
+					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+				},
+				'custom-green': 'hsla(135, 34%, 70%, 0.14)',
+				'custom-orange': 'hsla(31, 83%, 50%, 0.14)'
+			},
+			backgroundImage: {
+				'gradient-conic': 'conic-gradient(at 50% -80%, var(--tw-gradient-stops))',
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)"
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
 			}
-		})
-	],
-	extend: {
-		scale: {
-			'-1': '-1'
 		}
-	}
-} satisfies Config;
+	},
+};
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
index 82081ab..fc93cbd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,7 @@
 		"moduleResolution": "bundler"
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
 	// from the referenced tsconfig.json - TypeScript does not merge them in
diff --git a/vite.config.ts b/vite.config.ts
index a5767ee..bbf8c7d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,15 +1,6 @@
-import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [
-		sveltekit(),
-		purgeCss({
-			safelist: {
-				// any selectors that begin with "hljs-" will not be purged
-				greedy: [/^hljs-/]
-			}
-		})
-	]
+	plugins: [sveltekit()]
 });

From d8182acec9a801ddf48c3d5dc79a58059baf521a Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Sun, 12 May 2024 22:11:47 +0200
Subject: [PATCH 2/9] :wrench: Minor fixes

---
 README.md               | 2 +-
 src/routes/+page.svelte | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index d830cb3..1d8ccc5 100644
--- a/README.md
+++ b/README.md
@@ -30,4 +30,4 @@ To bring your UI to life in a Flipper Zero app:
 2. Load the JSON file to render the UI components.
 3. Pass in your functions and variables for full functionality.
 
-For examples look into the [Rust Crate Repository]()!
+For examples look into the [Rust Crate Repository](https://github.com/flip-ui/flip-ui-rs)!
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d6f99b9..9cf852d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,8 +6,9 @@
 	<title>Home</title>
 	<meta name="description" content="Homepage" />
 </svelte:head>
+
 <div class="container mx-auto flex max-w-6xl flex-col space-y-8 p-4">
-	<h1 class="h1">Welcome to <span class="inline-block rotate-180">flip-ui</span></h1>
+	<h1 class="h1">Welcome to <span class="inline-block rotate-180">flip</span></h1>
 	<blockquote class="blockquote">The UI Builder for the Flipper Zero</blockquote>
 	<p>Effortlessly design and export user interfaces for your Flipper Zero applications.</p>
 

From e4645094af3f31f819b2375c0f167a085b67a821 Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Mon, 13 May 2024 00:26:05 +0200
Subject: [PATCH 3/9] :sparkles: Added sidebar

---
 bun.lockb                                | Bin 101126 -> 101586 bytes
 package.json                             |   1 +
 src/lib/components/ui/badge/badge.svelte |  18 ++
 src/lib/components/ui/badge/index.ts     |  21 +++
 src/lib/index.ts                         |  50 +++++-
 src/lib/stores.ts                        |   4 +
 src/routes/Code.svelte                   |   2 +-
 src/routes/builder/+page.svelte          |  65 ++-----
 src/routes/builder/SideBar.svelte        | 216 +++++++++++++++++++++++
 9 files changed, 321 insertions(+), 56 deletions(-)
 create mode 100644 src/lib/components/ui/badge/badge.svelte
 create mode 100644 src/lib/components/ui/badge/index.ts
 create mode 100644 src/lib/stores.ts
 create mode 100644 src/routes/builder/SideBar.svelte

diff --git a/bun.lockb b/bun.lockb
index 51d5bf40023186af38c2c7d362d26c20397286e4..040814ed874b2463e07eae6713227794a4d289e1 100755
GIT binary patch
delta 15775
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

delta 15406
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

diff --git a/package.json b/package.json
index ec9383a..f5659d1 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "mode-watcher": "^0.3.0",
     "prismjs": "^1.29.0",
     "svelte-legos": "^0.2.2",
+    "svelte-persisted-store": "^0.9.2",
     "tailwind-merge": "^2.3.0",
     "tailwind-variants": "^0.2.1"
   }
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..e8817f4
--- /dev/null
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..e907993
--- /dev/null
+++ b/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,21 @@
+import { type VariantProps, tv } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+	base: "inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	variants: {
+		variant: {
+			default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+			secondary:
+				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			destructive:
+				"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 856f2b6..56623c7 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1,49 @@
-// place files you want to import through the `$lib` alias in this folder.
+export type Option<T> = T | null;
+
+export interface Data {
+    views: View[];
+    current: number;
+}
+
+export interface View {
+    data: MessageData | InputData | BrowserData;
+    // not to serialize
+    type: GuiType;
+}
+
+export enum GuiType {
+    Dialog = "Dialog",
+    Alert = "Alert",
+    Browser = "Browser",
+    Input = "Input"
+}
+
+export interface MessageData {
+    header: Option<Label>,
+    text: Option<Label>,
+    buttons: Option<Option<Event>[]>,
+}
+
+export interface Label {
+    text: String,
+    x: number,
+    y: number,
+    horizontal: Align,
+    vertical: Align,
+}
+
+export enum Align {
+    Left,
+    Right,
+    Top,
+    Bottom,
+    Center,
+}
+
+export interface InputData {
+    // todo
+}
+
+export interface BrowserData {
+    // todo
+}
\ No newline at end of file
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
new file mode 100644
index 0000000..d11c35c
--- /dev/null
+++ b/src/lib/stores.ts
@@ -0,0 +1,4 @@
+import type { Data } from '$lib';
+import { persisted } from 'svelte-persisted-store';
+
+export let data = persisted<Data>('data', { views: [], current: 0 });
diff --git a/src/routes/Code.svelte b/src/routes/Code.svelte
index 4f4dd7e..f5bd946 100644
--- a/src/routes/Code.svelte
+++ b/src/routes/Code.svelte
@@ -77,5 +77,5 @@ fn main(_args: Option<&CStr>) -> i32 {
 		bind:innerHTML={highlightedCode}
 		contenteditable="false"
 		aria-multiline="true"
-		class="text-sm mb-4 mt-6 !max-h-full overflow-x-auto whitespace-pre-wrap text-nowrap rounded-lg border bg-zinc-950 p-4 py-4 font-mono text-white dark:bg-zinc-900"></pre>
+		class="mb-4 mt-6 !max-h-full overflow-x-auto whitespace-pre-wrap text-nowrap rounded-lg border bg-zinc-950 p-4 py-4 font-mono text-sm text-white dark:bg-zinc-900"></pre>
 </div>
diff --git a/src/routes/builder/+page.svelte b/src/routes/builder/+page.svelte
index 62b301a..ca62d1b 100644
--- a/src/routes/builder/+page.svelte
+++ b/src/routes/builder/+page.svelte
@@ -1,7 +1,6 @@
 <script>
-	import { Button } from '$lib/components/ui/button';
-	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { Plus, Layers, Download } from 'lucide-svelte';
+	import { data } from '$lib/stores';
+	import SideBar from './SideBar.svelte';
 </script>
 
 <svelte:head>
@@ -11,57 +10,15 @@
 
 <div class="grid w-full pl-[336px]">
 	<aside
-		class="inset-y fixed left-0 z-20 flex h-full flex-col border-b border-border/40 bg-background/65 backdrop-blur supports-[backdrop-filter]:bg-background/30"
+		class="inset-y fixed left-0 z-20 flex h-full flex-col border-b border-border/40 bg-background/75 backdrop-blur supports-[backdrop-filter]:bg-background/40"
 	>
-		<div class="grid grid-cols-[auto_1fr]">
-			<nav class="grid gap-1 p-2">
-				<Tooltip.Root>
-					<Tooltip.Trigger asChild let:builder>
-						<Button
-							variant="ghost"
-							size="icon"
-							class="rounded-lg border border-input bg-muted"
-							aria-label="Playground"
-							builders={[builder]}
-						>
-							<Plus class="size-5" />
-						</Button>
-					</Tooltip.Trigger>
-					<Tooltip.Content side="right" sideOffset={5}>Add Items</Tooltip.Content>
-				</Tooltip.Root>
-				<Tooltip.Root>
-					<Tooltip.Trigger asChild let:builder>
-						<Button
-							variant="ghost"
-							size="icon"
-							class="rounded-lg"
-							aria-label="Models"
-							builders={[builder]}
-						>
-							<Layers class="size-5" />
-						</Button>
-					</Tooltip.Trigger>
-					<Tooltip.Content side="right" sideOffset={5}>Views</Tooltip.Content>
-				</Tooltip.Root>
-				<Tooltip.Root>
-					<Tooltip.Trigger asChild let:builder>
-						<Button
-							variant="ghost"
-							size="icon"
-							class="rounded-lg"
-							aria-label="API"
-							builders={[builder]}
-						>
-							<Download class="size-5" />
-						</Button>
-					</Tooltip.Trigger>
-					<Tooltip.Content side="right" sideOffset={5}>Export</Tooltip.Content>
-				</Tooltip.Root>
-			</nav>
-			<nav class="grid w-[280px] gap-1 overflow-y-auto p-2">
-				<Button>ASD</Button>
-			</nav>
-		</div>
+		<SideBar />
 	</aside>
-	<div class="flex flex-col"></div>
+	<div class="flex flex-col p-2">
+		{#if $data.views.length > 0}
+			<h2 class="h2">{$data.current + 1}. {$data.views[$data.current].type.toString()}</h2>
+		{:else}
+			<h2 class="h2">No Views</h2>
+		{/if}
+	</div>
 </div>
diff --git a/src/routes/builder/SideBar.svelte b/src/routes/builder/SideBar.svelte
new file mode 100644
index 0000000..6048f57
--- /dev/null
+++ b/src/routes/builder/SideBar.svelte
@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { Layers, Download, CircleX } from 'lucide-svelte';
+	import { data } from '$lib/stores';
+	import { GuiType, type Data } from '$lib';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import { onMount } from 'svelte';
+
+	function convertDataToMenu(data: Data) {
+		return data.views.map((view, index) => ({
+			label: index + 1 + '. ' + view.type.toString(),
+			badge: data.current == index ? 'current' : undefined,
+			dropdown: undefined,
+			disabled: false,
+			onclick: () => {
+				$data.current = index;
+			},
+			del: () => {
+				if (data.current != 0 && data.views.length - 1 <= data.current) $data.current -= 1;
+				// fix
+				$data.views.pop();
+				$data = $data;
+			}
+		}));
+	}
+
+	function downloadJson() {
+		const jsonStr = JSON.stringify($data, null, 2);
+		const blob = new Blob([jsonStr], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = 'main.json';
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+
+	let currentTile = 0;
+	$: submenu = [
+		{
+			title: 'Views',
+			tile: 0,
+			list: [
+				...convertDataToMenu($data),
+				{
+					label: 'Add View',
+					badge: undefined,
+					disabled: false,
+					dropdown: {
+						title: 'Type',
+						items: [
+							{
+								label: 'Dialog',
+								disabled: false,
+								onclick: () => {
+									$data.views.push({
+										data: {
+											header: null,
+											text: null,
+											buttons: null
+										},
+										type: GuiType.Dialog
+									});
+									$data = $data;
+								}
+							},
+							{
+								label: 'Alert',
+								disabled: false,
+								onclick: () => {
+									$data.views.push({
+										data: {},
+										type: GuiType.Alert
+									});
+									$data = $data;
+								}
+							},
+							{
+								label: 'Browser',
+								disabled: true,
+								onclick: () => {}
+							},
+							{
+								label: 'Input',
+								disabled: true,
+								onclick: () => {}
+							}
+						]
+					},
+					onclick: () => {},
+					del: undefined
+				}
+			]
+		},
+		{
+			title: 'Export',
+			tile: 1,
+			list: [
+				{
+					label: 'Download JSON',
+					badge: undefined,
+					disabled: false,
+					dropdown: undefined,
+					onclick: downloadJson,
+					del: undefined
+				}
+			]
+		}
+	];
+	onMount(() => ($data = $data));
+</script>
+
+<div class="grid h-full grid-cols-[auto_1fr]">
+	<nav class="flex flex-col gap-1 border-r p-2">
+		<Tooltip.Root>
+			<Tooltip.Trigger asChild let:builder>
+				<Button
+					variant="ghost"
+					size="icon"
+					class="rounded-lg {currentTile == 0
+						? 'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
+						: ''}"
+					aria-label="Models"
+					builders={[builder]}
+					on:click={() => (currentTile = 0)}
+				>
+					<Layers class="size-5" />
+				</Button>
+			</Tooltip.Trigger>
+			<Tooltip.Content side="right" sideOffset={5}>Views</Tooltip.Content>
+		</Tooltip.Root>
+		<Tooltip.Root>
+			<Tooltip.Trigger asChild let:builder>
+				<Button
+					variant="ghost"
+					size="icon"
+					class="rounded-lg {currentTile == 1
+						? 'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
+						: ''}"
+					aria-label="API"
+					builders={[builder]}
+					on:click={() => (currentTile = 1)}
+				>
+					<Download class="size-5" />
+				</Button>
+			</Tooltip.Trigger>
+			<Tooltip.Content side="right" sideOffset={5}>Export</Tooltip.Content>
+		</Tooltip.Root>
+	</nav>
+	<nav class="grid w-[280px] gap-1 overflow-y-auto">
+		<div class="space-y-4 overflow-y-auto p-4 pb-20">
+			{#each submenu as segment, i (i)}
+				{#if segment.tile == currentTile}
+					<!-- Title -->
+					<p class="h3">{segment.title}</p>
+					<!-- List -->
+					<ul class="flex-auto">
+						{#each segment.list as { label, badge, onclick, dropdown, disabled, del }}
+							<div class="flex flex-nowrap space-y-2">
+								{#if dropdown}
+									<DropdownMenu.Root>
+										<DropdownMenu.Trigger class="w-full" asChild let:builder>
+											<Button
+												builders={[builder]}
+												{disabled}
+												variant="outline"
+												type="button"
+												on:click={onclick}
+												class="m-2 w-full"
+												><span class="flex-auto text-start">{@html label}</span>
+											</Button>
+										</DropdownMenu.Trigger>
+										<DropdownMenu.Content align="start">
+											<DropdownMenu.Group>
+												<DropdownMenu.Label>{dropdown.title}</DropdownMenu.Label>
+												<DropdownMenu.Separator />
+												{#each dropdown.items as item}
+													<DropdownMenu.Item disabled={item.disabled} on:click={item.onclick}
+														>{item.label}</DropdownMenu.Item
+													>
+												{/each}
+											</DropdownMenu.Group>
+										</DropdownMenu.Content>
+									</DropdownMenu.Root>
+								{:else}
+									<Button
+										{disabled}
+										variant="outline"
+										type="button"
+										on:click={onclick}
+										class="m-2 w-full"
+									>
+										<span class="flex-auto text-start">{@html label}</span>
+										{#if badge}<Badge>{badge}</Badge>{/if}
+									</Button>
+								{/if}
+
+								{#if del}
+									<Button variant="destructive" size="icon" class="mr-2 p-2" on:click={() => del()}
+										><CircleX /></Button
+									>
+								{/if}
+							</div>
+						{/each}
+					</ul>
+					<!-- Divider -->
+					{#if i + 1 < submenu.filter((item) => item.tile === currentTile).length}
+						<hr class="!my-6 opacity-50" />
+					{/if}
+				{/if}
+			{/each}
+		</div>
+	</nav>
+</div>

From 77753c60839fbaa83308749756fe5c6d22073d43 Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Mon, 13 May 2024 20:53:18 +0200
Subject: [PATCH 4/9] :sparkles: Done more

---
 bun.lockb                                     | Bin 101586 -> 101586 bytes
 .../components/ui/card/card-content.svelte    |  13 ++
 .../ui/card/card-description.svelte           |  13 ++
 src/lib/components/ui/card/card-footer.svelte |  13 ++
 src/lib/components/ui/card/card-header.svelte |  13 ++
 src/lib/components/ui/card/card-title.svelte  |  21 ++++
 src/lib/components/ui/card/card.svelte        |  16 +++
 src/lib/components/ui/card/index.ts           |  24 ++++
 .../context-menu-checkbox-item.svelte         |  35 ++++++
 .../context-menu/context-menu-content.svelte  |  24 ++++
 .../ui/context-menu/context-menu-item.svelte  |  31 +++++
 .../ui/context-menu/context-menu-label.svelte |  19 +++
 .../context-menu-radio-group.svelte           |  11 ++
 .../context-menu-radio-item.svelte            |  35 ++++++
 .../context-menu-separator.svelte             |  14 +++
 .../context-menu/context-menu-shortcut.svelte |  16 +++
 .../context-menu-sub-content.svelte           |  29 +++++
 .../context-menu-sub-trigger.svelte           |  32 +++++
 src/lib/components/ui/context-menu/index.ts   |  49 ++++++++
 src/lib/index.ts                              |  11 +-
 src/routes/builder/+page.svelte               |  18 +--
 src/routes/builder/Editor.svelte              | 115 ++++++++++++++++++
 src/routes/builder/SideBar.svelte             |  22 ++--
 23 files changed, 552 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/ui/card/card-content.svelte
 create mode 100644 src/lib/components/ui/card/card-description.svelte
 create mode 100644 src/lib/components/ui/card/card-footer.svelte
 create mode 100644 src/lib/components/ui/card/card-header.svelte
 create mode 100644 src/lib/components/ui/card/card-title.svelte
 create mode 100644 src/lib/components/ui/card/card.svelte
 create mode 100644 src/lib/components/ui/card/index.ts
 create mode 100644 src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-content.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-label.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-radio-group.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-radio-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-separator.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-shortcut.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-sub-content.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
 create mode 100644 src/lib/components/ui/context-menu/index.ts
 create mode 100644 src/routes/builder/Editor.svelte

diff --git a/bun.lockb b/bun.lockb
index 040814ed874b2463e07eae6713227794a4d289e1..29ef73e3001213ba10ec4f3100fc0e4204a3b56f 100755
GIT binary patch
delta 41
mcmcaKlkL(>wuUW?p9MIW7$9K!ZvjR(P8g42yO$tiM>PQH<OweT

delta 41
vcmcaKlkL(>wuUW?p9MG=;|%nS4E4;X{}y0$;{@@H%`Nl{wtEROc2olZBJ2!p

diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..89d82b2
--- /dev/null
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..9a35919
--- /dev/null
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..32f90bb
--- /dev/null
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..e474528
--- /dev/null
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..719808e
--- /dev/null
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		tag?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let tag: $$Props["tag"] = "h3";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..b4746df
--- /dev/null
+++ b/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..bcc031d
--- /dev/null
+++ b/src/lib/components/ui/card/index.ts
@@ -0,0 +1,24 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
diff --git a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
new file mode 100644
index 0000000..452d40f
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
+	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<ContextMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</ContextMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</ContextMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-content.svelte b/src/lib/components/ui/context-menu/context-menu-content.svelte
new file mode 100644
index 0000000..952ca50
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</ContextMenuPrimitive.Content>
diff --git a/src/lib/components/ui/context-menu/context-menu-item.svelte b/src/lib/components/ui/context-menu/context-menu-item.svelte
new file mode 100644
index 0000000..cd91b8b
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = ContextMenuPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+</ContextMenuPrimitive.Item>
diff --git a/src/lib/components/ui/context-menu/context-menu-label.svelte b/src/lib/components/ui/context-menu/context-menu-label.svelte
new file mode 100644
index 0000000..5d52f79
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</ContextMenuPrimitive.Label>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
new file mode 100644
index 0000000..53fa692
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	type $$Props = ContextMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</ContextMenuPrimitive.RadioGroup>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
new file mode 100644
index 0000000..a0ef943
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.RadioItemProps;
+	type $$Events = ContextMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: ContextMenuPrimitive.RadioItemProps["value"];
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.RadioItem
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<ContextMenuPrimitive.RadioIndicator>
+			<Circle class="h-2 w-2 fill-current" />
+		</ContextMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</ContextMenuPrimitive.RadioItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-separator.svelte b/src/lib/components/ui/context-menu/context-menu-separator.svelte
new file mode 100644
index 0000000..8dc3a61
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-separator.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-border", className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
new file mode 100644
index 0000000..09ab9f8
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
new file mode 100644
index 0000000..20f7e75
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.SubContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		x: -10,
+		y: 0,
+	};
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</ContextMenuPrimitive.SubContent>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
new file mode 100644
index 0000000..2a5f7f5
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = ContextMenuPrimitive.SubTriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</ContextMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/ui/context-menu/index.ts b/src/lib/components/ui/context-menu/index.ts
new file mode 100644
index 0000000..7d4af84
--- /dev/null
+++ b/src/lib/components/ui/context-menu/index.ts
@@ -0,0 +1,49 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+import Item from "./context-menu-item.svelte";
+import Label from "./context-menu-label.svelte";
+import Content from "./context-menu-content.svelte";
+import Shortcut from "./context-menu-shortcut.svelte";
+import RadioItem from "./context-menu-radio-item.svelte";
+import Separator from "./context-menu-separator.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
+import SubContent from "./context-menu-sub-content.svelte";
+import SubTrigger from "./context-menu-sub-trigger.svelte";
+import CheckboxItem from "./context-menu-checkbox-item.svelte";
+
+const Sub = ContextMenuPrimitive.Sub;
+const Root = ContextMenuPrimitive.Root;
+const Trigger = ContextMenuPrimitive.Trigger;
+const Group = ContextMenuPrimitive.Group;
+
+export {
+	Sub,
+	Root,
+	Item,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as ContextMenu,
+	Sub as ContextMenuSub,
+	Item as ContextMenuItem,
+	Label as ContextMenuLabel,
+	Group as ContextMenuGroup,
+	Content as ContextMenuContent,
+	Trigger as ContextMenuTrigger,
+	Shortcut as ContextMenuShortcut,
+	RadioItem as ContextMenuRadioItem,
+	Separator as ContextMenuSeparator,
+	RadioGroup as ContextMenuRadioGroup,
+	SubContent as ContextMenuSubContent,
+	SubTrigger as ContextMenuSubTrigger,
+	CheckboxItem as ContextMenuCheckboxItem,
+};
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 56623c7..26e608f 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -6,7 +6,7 @@ export interface Data {
 }
 
 export interface View {
-    data: MessageData | InputData | BrowserData;
+    data: MessageData | InputData | BrowserData | any;
     // not to serialize
     type: GuiType;
 }
@@ -21,7 +21,7 @@ export enum GuiType {
 export interface MessageData {
     header: Option<Label>,
     text: Option<Label>,
-    buttons: Option<Option<Event>[]>,
+    buttons: Option<Event>[],
 }
 
 export interface Label {
@@ -40,10 +40,13 @@ export enum Align {
     Center,
 }
 
+export interface Event {
+    text: string;
+    function: string;
+}
+
 export interface InputData {
-    // todo
 }
 
 export interface BrowserData {
-    // todo
 }
\ No newline at end of file
diff --git a/src/routes/builder/+page.svelte b/src/routes/builder/+page.svelte
index ca62d1b..b154e07 100644
--- a/src/routes/builder/+page.svelte
+++ b/src/routes/builder/+page.svelte
@@ -1,6 +1,6 @@
 <script>
-	import { data } from '$lib/stores';
 	import SideBar from './SideBar.svelte';
+	import Editor from './Editor.svelte';
 </script>
 
 <svelte:head>
@@ -8,17 +8,19 @@
 	<meta name="description" content="Website's specific UI-Builder" />
 </svelte:head>
 
-<div class="grid w-full pl-[336px]">
+<div class="grid w-full pl-[336px] asd">
 	<aside
 		class="inset-y fixed left-0 z-20 flex h-full flex-col border-b border-border/40 bg-background/75 backdrop-blur supports-[backdrop-filter]:bg-background/40"
 	>
 		<SideBar />
 	</aside>
-	<div class="flex flex-col p-2">
-		{#if $data.views.length > 0}
-			<h2 class="h2">{$data.current + 1}. {$data.views[$data.current].type.toString()}</h2>
-		{:else}
-			<h2 class="h2">No Views</h2>
-		{/if}
+	<div class="p-2 h-full">
+		<Editor />
 	</div>
 </div>
+
+<style>
+	.asd {
+		height: calc(100% - 71px);
+	}
+</style>
\ No newline at end of file
diff --git a/src/routes/builder/Editor.svelte b/src/routes/builder/Editor.svelte
new file mode 100644
index 0000000..55b9a17
--- /dev/null
+++ b/src/routes/builder/Editor.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { data } from '$lib/stores';
+	import * as Card from '$lib/components/ui/card';
+	import { Align, GuiType } from '$lib';
+	import * as ContextMenu from '$lib/components/ui/context-menu';
+</script>
+
+<div class="flex h-full flex-col">
+	{#if $data.views.length > 0}
+		<h2 class="h2">{$data.current + 1}. {$data.views[$data.current].type.toString()}</h2>
+	{:else}
+		<h2 class="h2">No Views</h2>
+	{/if}
+
+	<div class="flex h-full flex-col justify-between gap-2">
+		{#if $data.views[$data.current]?.type == GuiType.Dialog}
+			<ContextMenu.Root>
+				{@const headerShown = $data.views[$data.current]?.data.header}
+				<ContextMenu.Trigger>
+					<Card.Root class="w-full {!headerShown ? 'opacity-50' : ''}">
+						<Card.Header>
+							<Card.Title>Header</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							{headerShown ? $data.views[$data.current]?.data.header.text : 'hidden'}
+						</Card.Content>
+					</Card.Root>
+				</ContextMenu.Trigger>
+				<ContextMenu.Content>
+					<ContextMenu.CheckboxItem
+						checked={headerShown}
+						on:click={() => {
+							if (!headerShown) {
+								$data.views[$data.current].data.header = {
+									text: '',
+									x: 0,
+									y: 0,
+									vertical: Align.Left,
+									horizontal: Align.Top
+								};
+							} else {
+								$data.views[$data.current].data.header = null;
+							}
+						}}>Shown</ContextMenu.CheckboxItem
+					>
+					<ContextMenu.Item inset disabled={!headerShown}>Edit</ContextMenu.Item>
+				</ContextMenu.Content>
+			</ContextMenu.Root>
+			<ContextMenu.Root>
+				{@const textShown = $data.views[$data.current]?.data.text}
+				<ContextMenu.Trigger>
+					<Card.Root class="w-full {!textShown ? 'opacity-50' : ''}">
+						<Card.Header>
+							<Card.Title>Text</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							{textShown ? $data.views[$data.current]?.data.text.text : 'hidden'}
+						</Card.Content>
+					</Card.Root>
+				</ContextMenu.Trigger>
+				<ContextMenu.Content>
+					<ContextMenu.CheckboxItem
+						checked={textShown}
+						on:click={() => {
+							if (!textShown) {
+								$data.views[$data.current].data.text = {
+									text: '',
+									x: 0,
+									y: 20,
+									vertical: Align.Left,
+									horizontal: Align.Top
+								};
+							} else {
+								$data.views[$data.current].data.text = null;
+							}
+						}}>Shown</ContextMenu.CheckboxItem
+					>
+					<ContextMenu.Item inset disabled={!textShown}>Edit</ContextMenu.Item>
+				</ContextMenu.Content>
+			</ContextMenu.Root>
+			<div class="grid w-full grid-cols-3 gap-2">
+				{#each $data.views[$data.current]?.data.buttons as button}
+					<ContextMenu.Root>
+						<ContextMenu.Trigger>
+							<Card.Root class={!button ? 'opacity-50' : ''}>
+								<Card.Header>
+									<Card.Title>Button</Card.Title>
+								</Card.Header>
+								<Card.Content>
+									{button ? button.text : 'hidden'}
+								</Card.Content>
+							</Card.Root>
+						</ContextMenu.Trigger>
+						<ContextMenu.Content>
+							<ContextMenu.CheckboxItem
+								checked={button}
+								on:click={() => {
+									if (!button) {
+										button = {
+											text: '',
+											function: ''
+										};
+									} else {
+										button = null;
+									}
+								}}>Shown</ContextMenu.CheckboxItem
+							>
+							<ContextMenu.Item inset disabled={!button}>Edit</ContextMenu.Item>
+						</ContextMenu.Content>
+					</ContextMenu.Root>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/routes/builder/SideBar.svelte b/src/routes/builder/SideBar.svelte
index 6048f57..b1b7996 100644
--- a/src/routes/builder/SideBar.svelte
+++ b/src/routes/builder/SideBar.svelte
@@ -17,10 +17,9 @@
 			onclick: () => {
 				$data.current = index;
 			},
-			del: () => {
+			del: (i: number) => {
 				if (data.current != 0 && data.views.length - 1 <= data.current) $data.current -= 1;
-				// fix
-				$data.views.pop();
+				$data.views.splice(i, 1);
 				$data = $data;
 			}
 		}));
@@ -59,7 +58,7 @@
 										data: {
 											header: null,
 											text: null,
-											buttons: null
+											buttons: [null, null, null]
 										},
 										type: GuiType.Dialog
 									});
@@ -109,11 +108,12 @@
 			]
 		}
 	];
-	onMount(() => ($data = $data));
 </script>
 
 <div class="grid h-full grid-cols-[auto_1fr]">
-	<nav class="flex flex-col gap-1 border-r p-2">
+	<nav
+		class="flex flex-col gap-1 border-r bg-background/85 p-2 backdrop-blur supports-[backdrop-filter]:bg-background/45"
+	>
 		<Tooltip.Root>
 			<Tooltip.Trigger asChild let:builder>
 				<Button
@@ -149,7 +149,9 @@
 			<Tooltip.Content side="right" sideOffset={5}>Export</Tooltip.Content>
 		</Tooltip.Root>
 	</nav>
-	<nav class="grid w-[280px] gap-1 overflow-y-auto">
+	<nav
+		class="grid w-[280px] gap-1 overflow-y-auto bg-background/50 backdrop-blur supports-[backdrop-filter]:bg-background/20"
+	>
 		<div class="space-y-4 overflow-y-auto p-4 pb-20">
 			{#each submenu as segment, i (i)}
 				{#if segment.tile == currentTile}
@@ -157,7 +159,7 @@
 					<p class="h3">{segment.title}</p>
 					<!-- List -->
 					<ul class="flex-auto">
-						{#each segment.list as { label, badge, onclick, dropdown, disabled, del }}
+						{#each segment.list as { label, badge, onclick, dropdown, disabled, del }, i}
 							<div class="flex flex-nowrap space-y-2">
 								{#if dropdown}
 									<DropdownMenu.Root>
@@ -172,7 +174,7 @@
 												><span class="flex-auto text-start">{@html label}</span>
 											</Button>
 										</DropdownMenu.Trigger>
-										<DropdownMenu.Content align="start">
+										<DropdownMenu.Content align="start" sameWidth>
 											<DropdownMenu.Group>
 												<DropdownMenu.Label>{dropdown.title}</DropdownMenu.Label>
 												<DropdownMenu.Separator />
@@ -198,7 +200,7 @@
 								{/if}
 
 								{#if del}
-									<Button variant="destructive" size="icon" class="mr-2 p-2" on:click={() => del()}
+									<Button variant="destructive" size="icon" class="mr-2 p-2" on:click={() => del(i)}
 										><CircleX /></Button
 									>
 								{/if}

From 43bf225250c3b3a825b316c5718efd3d572fc087 Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Mon, 13 May 2024 20:53:37 +0200
Subject: [PATCH 5/9] :wrench: Fmt

---
 components.json                               |   2 +-
 package.json                                  |  88 ++++----
 postcss.config.js                             |  10 +-
 src/app.pcss                                  | 201 +++++++++---------
 .../ui/avatar/avatar-fallback.svelte          |   8 +-
 .../components/ui/avatar/avatar-image.svelte  |  12 +-
 src/lib/components/ui/avatar/avatar.svelte    |  10 +-
 src/lib/components/ui/avatar/index.ts         |   8 +-
 src/lib/components/ui/badge/badge.svelte      |   8 +-
 src/lib/components/ui/badge/index.ts          |  23 +-
 src/lib/components/ui/button/button.svelte    |  14 +-
 src/lib/components/ui/button/index.ts         |  43 ++--
 .../components/ui/card/card-content.svelte    |   8 +-
 .../ui/card/card-description.svelte           |   8 +-
 src/lib/components/ui/card/card-footer.svelte |   8 +-
 src/lib/components/ui/card/card-header.svelte |   8 +-
 src/lib/components/ui/card/card-title.svelte  |  12 +-
 src/lib/components/ui/card/card.svelte        |   8 +-
 src/lib/components/ui/card/index.ts           |  16 +-
 .../context-menu-checkbox-item.svelte         |  12 +-
 .../context-menu/context-menu-content.svelte  |  12 +-
 .../ui/context-menu/context-menu-item.svelte  |  12 +-
 .../ui/context-menu/context-menu-label.svelte |  10 +-
 .../context-menu-radio-group.svelte           |   4 +-
 .../context-menu-radio-item.svelte            |  12 +-
 .../context-menu-separator.svelte             |   8 +-
 .../context-menu/context-menu-shortcut.svelte |   8 +-
 .../context-menu-sub-content.svelte           |  14 +-
 .../context-menu-sub-trigger.svelte           |  14 +-
 src/lib/components/ui/context-menu/index.ts   |  24 +--
 .../dropdown-menu-checkbox-item.svelte        |  12 +-
 .../dropdown-menu-content.svelte              |  14 +-
 .../dropdown-menu/dropdown-menu-item.svelte   |  12 +-
 .../dropdown-menu/dropdown-menu-label.svelte  |  10 +-
 .../dropdown-menu-radio-group.svelte          |   4 +-
 .../dropdown-menu-radio-item.svelte           |  12 +-
 .../dropdown-menu-separator.svelte            |   8 +-
 .../dropdown-menu-shortcut.svelte             |   8 +-
 .../dropdown-menu-sub-content.svelte          |  14 +-
 .../dropdown-menu-sub-trigger.svelte          |  14 +-
 src/lib/components/ui/dropdown-menu/index.ts  |  24 +--
 src/lib/components/ui/tooltip/index.ts        |   6 +-
 .../ui/tooltip/tooltip-content.svelte         |  16 +-
 src/lib/index.ts                              |  54 +++--
 src/lib/utils.ts                              |  24 +--
 src/routes/+layout.ts                         |   2 +-
 src/routes/builder/+page.svelte               |   6 +-
 tailwind.config.ts                            |  62 +++---
 48 files changed, 458 insertions(+), 469 deletions(-)

diff --git a/components.json b/components.json
index e6f140c..a65826c 100644
--- a/components.json
+++ b/components.json
@@ -11,4 +11,4 @@
 		"utils": "$lib/utils"
 	},
 	"typescript": true
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index f5659d1..c9e5bd9 100644
--- a/package.json
+++ b/package.json
@@ -1,46 +1,46 @@
 {
-  "name": "flip-ui-chad",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check .",
-    "format": "prettier --write ."
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.3",
-    "tailwindcss": "^3.4.1",
-    "postcss": "^8.4.33",
-    "autoprefixer": "^10.4.16",
-    "@tailwindcss/typography": "^0.5.10",
-    "prettier-plugin-tailwindcss": "^0.5.1"
-  },
-  "type": "module",
-  "dependencies": {
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@types/prismjs": "^1.26.4",
-    "bits-ui": "^0.21.7",
-    "clsx": "^2.1.1",
-    "install": "^0.13.0",
-    "lucide-svelte": "^0.378.0",
-    "mode-watcher": "^0.3.0",
-    "prismjs": "^1.29.0",
-    "svelte-legos": "^0.2.2",
-    "svelte-persisted-store": "^0.9.2",
-    "tailwind-merge": "^2.3.0",
-    "tailwind-variants": "^0.2.1"
-  }
+	"name": "flip-ui-chad",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3",
+		"tailwindcss": "^3.4.1",
+		"postcss": "^8.4.33",
+		"autoprefixer": "^10.4.16",
+		"@tailwindcss/typography": "^0.5.10",
+		"prettier-plugin-tailwindcss": "^0.5.1"
+	},
+	"type": "module",
+	"dependencies": {
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@types/prismjs": "^1.26.4",
+		"bits-ui": "^0.21.7",
+		"clsx": "^2.1.1",
+		"install": "^0.13.0",
+		"lucide-svelte": "^0.378.0",
+		"mode-watcher": "^0.3.0",
+		"prismjs": "^1.29.0",
+		"svelte-legos": "^0.2.2",
+		"svelte-persisted-store": "^0.9.2",
+		"tailwind-merge": "^2.3.0",
+		"tailwind-variants": "^0.2.1"
+	}
 }
diff --git a/postcss.config.js b/postcss.config.js
index 5c45a3f..0f77216 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-};
\ No newline at end of file
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};
diff --git a/src/app.pcss b/src/app.pcss
index 65a2e4b..d99f126 100644
--- a/src/app.pcss
+++ b/src/app.pcss
@@ -3,108 +3,107 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
- 
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
- 
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
- 
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
- 
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
- 
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 240 10% 3.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
- 
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
- 
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
- 
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 240 4.9% 83.9%;
-  }
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 240 10% 3.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 240 4.9% 83.9%;
+	}
 }
 
 @layer base {
-  html,
-  body {
-    @apply h-full overflow-hidden;
-  }
-  html {
-    font-family: pixelify-sans;
-  }
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply !overflow-y-scroll bg-gradient-conic from-amber-900 via-background to-green-950 text-foreground;
-  }
-  @font-face {
-    font-family: 'pixelify-sans';
-    src: url('/PixelifySans.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-  }
-  .h1 {
-    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
-  }
-  .h2 {
-    @apply scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0;
-  }
-  .h3 {
-    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
-  }
-  .p {
-    @apply leading-7 [&:not(:first-child)]:mt-6;
-  }
-  .blockquote {
-    @apply mt-6 border-l-2 pl-6 italic;
-  }
-  .code {
-    @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
-  }
+	html,
+	body {
+		@apply h-full overflow-hidden;
+	}
+	html {
+		font-family: pixelify-sans;
+	}
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply !overflow-y-scroll bg-gradient-conic from-amber-900 via-background to-green-950 text-foreground;
+	}
+	@font-face {
+		font-family: 'pixelify-sans';
+		src: url('/PixelifySans.ttf') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+	}
+	.h1 {
+		@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+	}
+	.h2 {
+		@apply scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0;
+	}
+	.h3 {
+		@apply scroll-m-20 text-2xl font-semibold tracking-tight;
+	}
+	.p {
+		@apply leading-7 [&:not(:first-child)]:mt-6;
+	}
+	.blockquote {
+		@apply mt-6 border-l-2 pl-6 italic;
+	}
+	.code {
+		@apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+	}
 }
-
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
index 865fc40..42409b5 100644
--- a/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AvatarPrimitive.FallbackProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Fallback
-	class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+	class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
index 6558dc4..95cf424 100644
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AvatarPrimitive.ImageProps;
 
-	let className: $$Props["class"] = undefined;
-	export let src: $$Props["src"] = undefined;
-	export let alt: $$Props["alt"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let src: $$Props['src'] = undefined;
+	export let alt: $$Props['alt'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Image
 	{src}
 	{alt}
-	class={cn("aspect-square h-full w-full", className)}
+	class={cn('aspect-square h-full w-full', className)}
 	{...$$restProps}
 />
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
index 845d5a8..b2e1acf 100644
--- a/src/lib/components/ui/avatar/avatar.svelte
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AvatarPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
-	export let delayMs: $$Props["delayMs"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let delayMs: $$Props['delayMs'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Root
 	{delayMs}
-	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-sm", className)}
+	class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-sm', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
index d06457b..9585f8a 100644
--- a/src/lib/components/ui/avatar/index.ts
+++ b/src/lib/components/ui/avatar/index.ts
@@ -1,6 +1,6 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
 
 export {
 	Root,
@@ -9,5 +9,5 @@ export {
 	//
 	Root as Avatar,
 	Image as AvatarImage,
-	Fallback as AvatarFallback,
+	Fallback as AvatarFallback
 };
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
index e8817f4..ba65f8c 100644
--- a/src/lib/components/ui/badge/badge.svelte
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { type Variant, badgeVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { type Variant, badgeVariants } from './index.js';
+	import { cn } from '$lib/utils.js';
 
 	let className: string | undefined | null = undefined;
 	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
+	export let variant: Variant = 'default';
 	export { className as class };
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
 	{...$$restProps}
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
index e907993..1fad281 100644
--- a/src/lib/components/ui/badge/index.ts
+++ b/src/lib/components/ui/badge/index.ts
@@ -1,21 +1,20 @@
-import { type VariantProps, tv } from "tailwind-variants";
-export { default as Badge } from "./badge.svelte";
+import { type VariantProps, tv } from 'tailwind-variants';
+export { default as Badge } from './badge.svelte';
 
 export const badgeVariants = tv({
-	base: "inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	base: 'inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
 	variants: {
 		variant: {
-			default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-			secondary:
-				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+			secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
 			destructive:
-				"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-			outline: "text-foreground",
-		},
+				'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+			outline: 'text-foreground'
+		}
 	},
 	defaultVariants: {
-		variant: "default",
-	},
+		variant: 'default'
+	}
 });
 
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export type Variant = VariantProps<typeof badgeVariants>['variant'];
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 86827f3..f578a57 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
-	import { type Events, type Props, buttonVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { Button as ButtonPrimitive } from 'bits-ui';
+	import { type Events, type Props, buttonVariants } from './index.js';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = Props;
 	type $$Events = Events;
 
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export let size: $$Props['size'] = 'default';
+	export let builders: $$Props['builders'] = [];
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index a927293..0f43874 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,34 +1,33 @@
-import { type VariantProps, tv } from "tailwind-variants";
-import type { Button as ButtonPrimitive } from "bits-ui";
-import Root from "./button.svelte";
+import { type VariantProps, tv } from 'tailwind-variants';
+import type { Button as ButtonPrimitive } from 'bits-ui';
+import Root from './button.svelte';
 
 const buttonVariants = tv({
-	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline:
-				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline",
+			default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+			destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+			outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+			secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+			ghost: 'hover:bg-accent hover:text-accent-foreground',
+			link: 'text-primary underline-offset-4 hover:underline'
 		},
 		size: {
-			default: "h-10 px-4 py-2",
-			sm: "h-9 rounded-md px-3",
-			lg: "h-11 rounded-md px-8",
-			icon: "h-10 w-10",
-		},
+			default: 'h-10 px-4 py-2',
+			sm: 'h-9 rounded-md px-3',
+			lg: 'h-11 rounded-md px-8',
+			icon: 'h-10 w-10'
+		}
 	},
 	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
+		variant: 'default',
+		size: 'default'
+	}
 });
 
-type Variant = VariantProps<typeof buttonVariants>["variant"];
-type Size = VariantProps<typeof buttonVariants>["size"];
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+type Size = VariantProps<typeof buttonVariants>['size'];
 
 type Props = ButtonPrimitive.Props & {
 	variant?: Variant;
@@ -45,5 +44,5 @@ export {
 	Root as Button,
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
-	buttonVariants,
+	buttonVariants
 };
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
index 89d82b2..52776fa 100644
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
index 9a35919..33d2930 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
 	<slot />
 </p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
index 32f90bb..c97fd43 100644
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
index e474528..43be1c6 100644
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index 719808e..5520e72 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HeadingLevel } from './index.js';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let tag: $$Props["tag"] = "h3";
+	let className: $$Props['class'] = undefined;
+	export let tag: $$Props['tag'] = 'h3';
 	export { className as class };
 </script>
 
 <svelte:element
 	this={tag}
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index b4746df..78fe4ff 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div
-	class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+	class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
index bcc031d..86c5408 100644
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@@ -1,9 +1,9 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
 
 export {
 	Root,
@@ -18,7 +18,7 @@ export {
 	Description as CardDescription,
 	Footer as CardFooter,
 	Header as CardHeader,
-	Title as CardTitle,
+	Title as CardTitle
 };
 
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
diff --git a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
index 452d40f..906cbd6 100644
--- a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import Check from "lucide-svelte/icons/check";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import Check from 'lucide-svelte/icons/check';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
 	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = undefined;
 	export { className as class };
 </script>
 
 <ContextMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/context-menu/context-menu-content.svelte b/src/lib/components/ui/context-menu/context-menu-content.svelte
index 952ca50..69a1a5e 100644
--- a/src/lib/components/ui/context-menu/context-menu-content.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = ContextMenuPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
 	export { className as class };
 </script>
 
@@ -14,7 +14,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/context-menu/context-menu-item.svelte b/src/lib/components/ui/context-menu/context-menu-item.svelte
index cd91b8b..8b54154 100644
--- a/src/lib/components/ui/context-menu/context-menu-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ContextMenuPrimitive.ItemProps & {
 		inset?: boolean;
 	};
 	type $$Events = ContextMenuPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <ContextMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
-		inset && "pl-8",
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		inset && 'pl-8',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/context-menu/context-menu-label.svelte b/src/lib/components/ui/context-menu/context-menu-label.svelte
index 5d52f79..8261607 100644
--- a/src/lib/components/ui/context-menu/context-menu-label.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ContextMenuPrimitive.LabelProps & {
 		inset?: boolean;
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <ContextMenuPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
index 53fa692..9df6e40 100644
--- a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 
 	type $$Props = ContextMenuPrimitive.RadioGroupProps;
 
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
 </script>
 
 <ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
index a0ef943..f710652 100644
--- a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import Circle from "lucide-svelte/icons/circle";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import Circle from 'lucide-svelte/icons/circle';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ContextMenuPrimitive.RadioItemProps;
 	type $$Events = ContextMenuPrimitive.RadioItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: ContextMenuPrimitive.RadioItemProps["value"];
+	let className: $$Props['class'] = undefined;
+	export let value: ContextMenuPrimitive.RadioItemProps['value'];
 	export { className as class };
 </script>
 
 <ContextMenuPrimitive.RadioItem
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{value}
diff --git a/src/lib/components/ui/context-menu/context-menu-separator.svelte b/src/lib/components/ui/context-menu/context-menu-separator.svelte
index 8dc3a61..0899c47 100644
--- a/src/lib/components/ui/context-menu/context-menu-separator.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-separator.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ContextMenuPrimitive.SeparatorProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <ContextMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-border", className)}
+	class={cn('-mx-1 my-1 h-px bg-border', className)}
 	{...$$restProps}
 />
diff --git a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
index 09ab9f8..62aa6e8 100644
--- a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <span
-	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
index 20f7e75..0816ab8 100644
--- a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = ContextMenuPrimitive.SubContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		x: -10,
-		y: 0,
+		y: 0
 	};
 	export { className as class };
 </script>
@@ -17,7 +17,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
index 2a5f7f5..e127b14 100644
--- a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ContextMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;
 	};
 	type $$Events = ContextMenuPrimitive.SubTriggerEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <ContextMenuPrimitive.SubTrigger
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
-		inset && "pl-8",
+		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
+		inset && 'pl-8',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/context-menu/index.ts b/src/lib/components/ui/context-menu/index.ts
index 7d4af84..9f3bd1f 100644
--- a/src/lib/components/ui/context-menu/index.ts
+++ b/src/lib/components/ui/context-menu/index.ts
@@ -1,15 +1,15 @@
-import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 
-import Item from "./context-menu-item.svelte";
-import Label from "./context-menu-label.svelte";
-import Content from "./context-menu-content.svelte";
-import Shortcut from "./context-menu-shortcut.svelte";
-import RadioItem from "./context-menu-radio-item.svelte";
-import Separator from "./context-menu-separator.svelte";
-import RadioGroup from "./context-menu-radio-group.svelte";
-import SubContent from "./context-menu-sub-content.svelte";
-import SubTrigger from "./context-menu-sub-trigger.svelte";
-import CheckboxItem from "./context-menu-checkbox-item.svelte";
+import Item from './context-menu-item.svelte';
+import Label from './context-menu-label.svelte';
+import Content from './context-menu-content.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import CheckboxItem from './context-menu-checkbox-item.svelte';
 
 const Sub = ContextMenuPrimitive.Sub;
 const Root = ContextMenuPrimitive.Root;
@@ -45,5 +45,5 @@ export {
 	RadioGroup as ContextMenuRadioGroup,
 	SubContent as ContextMenuSubContent,
 	SubTrigger as ContextMenuSubTrigger,
-	CheckboxItem as ContextMenuCheckboxItem,
+	CheckboxItem as ContextMenuCheckboxItem
 };
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index cbca3c5..729503d 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import Check from "lucide-svelte/icons/check";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import Check from 'lucide-svelte/icons/check';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index a94b527..f105441 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = DropdownMenuPrimitive.ContentProps;
 	type $$Events = DropdownMenuPrimitive.ContentEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
 	export { className as class };
 </script>
 
@@ -17,7 +17,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index 9a05d4b..475a077 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
 	};
 	type $$Events = DropdownMenuPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
-		inset && "pl-8",
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		inset && 'pl-8',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index 43f1527..670a686 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DropdownMenuPrimitive.LabelProps & {
 		inset?: boolean;
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
index 1c74ae1..dd67d44 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
 	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
 
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
 </script>
 
 <DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 79a48ee..58d8ab6 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import Circle from "lucide-svelte/icons/circle";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import Circle from 'lucide-svelte/icons/circle';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.RadioItem
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{value}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index e14d078..cc0197e 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DropdownMenuPrimitive.SeparatorProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	class={cn('-mx-1 my-1 h-px bg-muted', className)}
 	{...$$restProps}
 />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index d8c7378..eeeb8f7 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
+<span class={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...$$restProps}>
 	<slot />
 </span>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index ff20507..f7f05d8 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = DropdownMenuPrimitive.SubContentProps;
 	type $$Events = DropdownMenuPrimitive.SubContentEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		x: -10,
-		y: 0,
+		y: 0
 	};
 	export { className as class };
 </script>
@@ -18,7 +18,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 9ba3916..2f459f8 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;
 	};
 	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.SubTrigger
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
-		inset && "pl-8",
+		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
+		inset && 'pl-8',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
index c1749e9..52c1f3c 100644
--- a/src/lib/components/ui/dropdown-menu/index.ts
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,14 +1,14 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import Item from "./dropdown-menu-item.svelte";
-import Label from "./dropdown-menu-label.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
-import RadioItem from "./dropdown-menu-radio-item.svelte";
-import Separator from "./dropdown-menu-separator.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
-import SubContent from "./dropdown-menu-sub-content.svelte";
-import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
 
 const Sub = DropdownMenuPrimitive.Sub;
 const Root = DropdownMenuPrimitive.Root;
@@ -44,5 +44,5 @@ export {
 	RadioGroup as DropdownMenuRadioGroup,
 	SubContent as DropdownMenuSubContent,
 	SubTrigger as DropdownMenuSubTrigger,
-	CheckboxItem as DropdownMenuCheckboxItem,
+	CheckboxItem as DropdownMenuCheckboxItem
 };
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
index 7d0444d..243cd02 100644
--- a/src/lib/components/ui/tooltip/index.ts
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -1,5 +1,5 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
-import Content from "./tooltip-content.svelte";
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
 
 const Root = TooltipPrimitive.Root;
 const Trigger = TooltipPrimitive.Trigger;
@@ -11,5 +11,5 @@ export {
 	//
 	Root as Tooltip,
 	Content as TooltipContent,
-	Trigger as TooltipTrigger,
+	Trigger as TooltipTrigger
 };
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
index 3c00a4e..905013f 100644
--- a/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = TooltipPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		y: 8,
-		duration: 150,
+		duration: 150
 	};
 	export { className as class };
 </script>
@@ -19,7 +19,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+		'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 26e608f..0a6b19d 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,52 +1,50 @@
 export type Option<T> = T | null;
 
 export interface Data {
-    views: View[];
-    current: number;
+	views: View[];
+	current: number;
 }
 
 export interface View {
-    data: MessageData | InputData | BrowserData | any;
-    // not to serialize
-    type: GuiType;
+	data: MessageData | InputData | BrowserData | any;
+	// not to serialize
+	type: GuiType;
 }
 
 export enum GuiType {
-    Dialog = "Dialog",
-    Alert = "Alert",
-    Browser = "Browser",
-    Input = "Input"
+	Dialog = 'Dialog',
+	Alert = 'Alert',
+	Browser = 'Browser',
+	Input = 'Input'
 }
 
 export interface MessageData {
-    header: Option<Label>,
-    text: Option<Label>,
-    buttons: Option<Event>[],
+	header: Option<Label>;
+	text: Option<Label>;
+	buttons: Option<Event>[];
 }
 
 export interface Label {
-    text: String,
-    x: number,
-    y: number,
-    horizontal: Align,
-    vertical: Align,
+	text: String;
+	x: number;
+	y: number;
+	horizontal: Align;
+	vertical: Align;
 }
 
 export enum Align {
-    Left,
-    Right,
-    Top,
-    Bottom,
-    Center,
+	Left,
+	Right,
+	Top,
+	Bottom,
+	Center
 }
 
 export interface Event {
-    text: string;
-    function: string;
+	text: string;
+	function: string;
 }
 
-export interface InputData {
-}
+export interface InputData {}
 
-export interface BrowserData {
-}
\ No newline at end of file
+export interface BrowserData {}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8871245..eba19d8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,7 +1,7 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { cubicOut } from "svelte/easing";
-import type { TransitionConfig } from "svelte/transition";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cubicOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
@@ -19,13 +19,9 @@ export const flyAndScale = (
 	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
 ): TransitionConfig => {
 	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
+	const transform = style.transform === 'none' ? '' : style.transform;
 
-	const scaleConversion = (
-		valueA: number,
-		scaleA: [number, number],
-		scaleB: [number, number]
-	) => {
+	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
 		const [minA, maxA] = scaleA;
 		const [minB, maxB] = scaleB;
 
@@ -35,13 +31,11 @@ export const flyAndScale = (
 		return valueB;
 	};
 
-	const styleToString = (
-		style: Record<string, number | string | undefined>
-	): string => {
+	const styleToString = (style: Record<string, number | string | undefined>): string => {
 		return Object.keys(style).reduce((str, key) => {
 			if (style[key] === undefined) return str;
 			return str + `${key}:${style[key]};`;
-		}, "");
+		}, '');
 	};
 
 	return {
@@ -59,4 +53,4 @@ export const flyAndScale = (
 		},
 		easing: cubicOut
 	};
-};
\ No newline at end of file
+};
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index c8cacf0..189f71e 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1 +1 @@
-export const prerender = true;
\ No newline at end of file
+export const prerender = true;
diff --git a/src/routes/builder/+page.svelte b/src/routes/builder/+page.svelte
index b154e07..0252b7d 100644
--- a/src/routes/builder/+page.svelte
+++ b/src/routes/builder/+page.svelte
@@ -8,13 +8,13 @@
 	<meta name="description" content="Website's specific UI-Builder" />
 </svelte:head>
 
-<div class="grid w-full pl-[336px] asd">
+<div class="asd grid w-full pl-[336px]">
 	<aside
 		class="inset-y fixed left-0 z-20 flex h-full flex-col border-b border-border/40 bg-background/75 backdrop-blur supports-[backdrop-filter]:bg-background/40"
 	>
 		<SideBar />
 	</aside>
-	<div class="p-2 h-full">
+	<div class="h-full p-2">
 		<Editor />
 	</div>
 </div>
@@ -23,4 +23,4 @@
 	.asd {
 		height: calc(100% - 71px);
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a898047..d8dd761 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,69 +1,69 @@
-import { fontFamily } from "tailwindcss/defaultTheme";
-import type { Config } from "tailwindcss";
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
-	darkMode: ["class"],
-	content: ["./src/**/*.{html,js,svelte,ts}"],
-	safelist: ["dark"],
+	darkMode: ['class'],
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	safelist: ['dark'],
 	theme: {
 		container: {
 			center: true,
-			padding: "2rem",
+			padding: '2rem',
 			screens: {
-				"2xl": "1400px"
+				'2xl': '1400px'
 			}
 		},
 		extend: {
 			colors: {
-				border: "hsl(var(--border) / <alpha-value>)",
-				input: "hsl(var(--input) / <alpha-value>)",
-				ring: "hsl(var(--ring) / <alpha-value>)",
-				background: "hsl(var(--background) / <alpha-value>)",
-				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				border: 'hsl(var(--border) / <alpha-value>)',
+				input: 'hsl(var(--input) / <alpha-value>)',
+				ring: 'hsl(var(--ring) / <alpha-value>)',
+				background: 'hsl(var(--background) / <alpha-value>)',
+				foreground: 'hsl(var(--foreground) / <alpha-value>)',
 				primary: {
-					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+					DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+					foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
 				},
 				secondary: {
-					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+					DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
+					foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
 				},
 				destructive: {
-					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+					DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+					foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
 				},
 				muted: {
-					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+					DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+					foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
 				},
 				accent: {
-					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+					DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+					foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
 				},
 				popover: {
-					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+					DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
+					foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
 				},
 				card: {
-					DEFAULT: "hsl(var(--card) / <alpha-value>)",
-					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+					DEFAULT: 'hsl(var(--card) / <alpha-value>)',
+					foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
 				},
 				'custom-green': 'hsla(135, 34%, 70%, 0.14)',
 				'custom-orange': 'hsla(31, 83%, 50%, 0.14)'
 			},
 			backgroundImage: {
-				'gradient-conic': 'conic-gradient(at 50% -80%, var(--tw-gradient-stops))',
+				'gradient-conic': 'conic-gradient(at 50% -80%, var(--tw-gradient-stops))'
 			},
 			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)'
 			},
 			fontFamily: {
 				sans: [...fontFamily.sans]
 			}
 		}
-	},
+	}
 };
 
 export default config;

From 0a03151a3a87579fd6a50c351f4e8eaa4d262df9 Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Mon, 13 May 2024 23:38:04 +0200
Subject: [PATCH 6/9] :sparkles: Added mobile support

---
 src/lib/components/ui/sheet/index.ts          | 106 ++++++++++++++++++
 .../components/ui/sheet/sheet-content.svelte  |  47 ++++++++
 .../ui/sheet/sheet-description.svelte         |  13 +++
 .../components/ui/sheet/sheet-footer.svelte   |  16 +++
 .../components/ui/sheet/sheet-header.svelte   |  13 +++
 .../components/ui/sheet/sheet-overlay.svelte  |  21 ++++
 .../components/ui/sheet/sheet-portal.svelte   |  13 +++
 .../components/ui/sheet/sheet-title.svelte    |  16 +++
 src/routes/+layout.svelte                     |  26 ++++-
 src/routes/builder/+page.svelte               |   4 +-
 src/routes/builder/SideBar.svelte             |  13 ++-
 11 files changed, 280 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/components/ui/sheet/index.ts
 create mode 100644 src/lib/components/ui/sheet/sheet-content.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-description.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-footer.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-header.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-overlay.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-portal.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-title.svelte

diff --git a/src/lib/components/ui/sheet/index.ts b/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..88f1180
--- /dev/null
+++ b/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,106 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import { type VariantProps, tv } from 'tailwind-variants';
+
+import Portal from './sheet-portal.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription
+};
+
+export const sheetVariants = tv({
+	base: 'fixed z-50 gap-4 bg-background p-6 shadow-lg',
+	variants: {
+		side: {
+			top: 'inset-x-0 top-0 border-b',
+			bottom: 'inset-x-0 bottom-0 border-t',
+			left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+			right: 'inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm'
+		}
+	},
+	defaultVariants: {
+		side: 'right'
+	}
+});
+
+export const sheetTransitions = {
+	top: {
+		in: {
+			y: '-100%',
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			y: '-100%',
+			duration: 300,
+			opacity: 1
+		}
+	},
+	bottom: {
+		in: {
+			y: '100%',
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			y: '100%',
+			duration: 300,
+			opacity: 1
+		}
+	},
+	left: {
+		in: {
+			x: '-100%',
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			x: '-100%',
+			duration: 300,
+			opacity: 1
+		}
+	},
+	right: {
+		in: {
+			x: '100%',
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			x: '100%',
+			duration: 300,
+			opacity: 1
+		}
+	}
+};
+
+export type Side = VariantProps<typeof sheetVariants>['side'];
diff --git a/src/lib/components/ui/sheet/sheet-content.svelte b/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..dd6ba01
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import X from 'lucide-svelte/icons/x';
+	import { fly } from 'svelte/transition';
+	import {
+		SheetOverlay,
+		SheetPortal,
+		type Side,
+		sheetTransitions,
+		sheetVariants
+	} from './index.js';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SheetPrimitive.ContentProps & {
+		side?: Side;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export let side: $$Props['side'] = 'right';
+	export { className as class };
+	export let inTransition: $$Props['inTransition'] = fly;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] =
+		sheetTransitions[side ?? 'right'].in;
+	export let outTransition: $$Props['outTransition'] = fly;
+	export let outTransitionConfig: $$Props['outTransitionConfig'] =
+		sheetTransitions[side ?? 'right'].out;
+</script>
+
+<SheetPortal>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		{inTransition}
+		{inTransitionConfig}
+		{outTransition}
+		{outTransitionConfig}
+		class={cn(sheetVariants({ side }), className)}
+		{...$$restProps}
+	>
+		<slot />
+		<SheetPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/src/lib/components/ui/sheet/sheet-description.svelte b/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..44184db
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SheetPrimitive.DescriptionProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Description>
diff --git a/src/lib/components/ui/sheet/sheet-footer.svelte b/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..329304a
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/sheet/sheet-header.svelte b/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..434c29c
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/sheet/sheet-overlay.svelte b/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..d9e3859
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { fade } from 'svelte/transition';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SheetPrimitive.OverlayProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 150
+	};
+	export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-portal.svelte b/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..7f62f70
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SheetPrimitive.PortalProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Portal>
diff --git a/src/lib/components/ui/sheet/sheet-title.svelte b/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..e670e39
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SheetPrimitive.TitleProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Title
+	class={cn('text-lg font-semibold text-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</SheetPrimitive.Title>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d275267..2e2eade 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,12 @@
 <script>
 	import '../app.pcss';
 	import { ModeWatcher, toggleMode } from 'mode-watcher';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Avatar from '$lib/components/ui/avatar';
+	import * as Sheet from '$lib/components/ui/sheet';
 	import { Button } from '$lib/components/ui/button';
-	import { Sun, Moon, Github, User } from 'lucide-svelte';
+	import { Sun, Moon, Github, User, Menu } from 'lucide-svelte';
 	import { page } from '$app/stores';
+	import SideBar from './builder/SideBar.svelte';
 </script>
 
 <ModeWatcher disableTransitions={false} />
@@ -17,6 +18,27 @@
 		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<nav class="flex items-center gap-6 text-sm">
+					<Sheet.Root>
+						<Sheet.Trigger asChild let:builder hidden={$page.url.pathname != '/builder'}>
+							<Button
+								builders={[builder]}
+								variant="ghost"
+								size="icon"
+								class="rounded-lg md:hidden {$page.url.pathname == '/builder' ? 'flex' : 'hidden'}"
+								aria-label="Models"
+							>
+								<Menu scale="5" />
+							</Button>
+						</Sheet.Trigger>
+						<Sheet.Content side="left" class="w-[400px]">
+							<Sheet.Header class="h-full">
+								<!-- <Sheet.Title>Are you sure absolutely sure?</Sheet.Title> -->
+								<Sheet.Description class="flex h-full">
+									<SideBar />
+								</Sheet.Description>
+							</Sheet.Header>
+						</Sheet.Content>
+					</Sheet.Root>
 					<a
 						href="/"
 						class="{$page.url.pathname == '/'
diff --git a/src/routes/builder/+page.svelte b/src/routes/builder/+page.svelte
index 0252b7d..8fd38de 100644
--- a/src/routes/builder/+page.svelte
+++ b/src/routes/builder/+page.svelte
@@ -8,9 +8,9 @@
 	<meta name="description" content="Website's specific UI-Builder" />
 </svelte:head>
 
-<div class="asd grid w-full pl-[336px]">
+<div class="asd grid w-full md:pl-[336px]">
 	<aside
-		class="inset-y fixed left-0 z-20 flex h-full flex-col border-b border-border/40 bg-background/75 backdrop-blur supports-[backdrop-filter]:bg-background/40"
+		class="inset-y fixed left-0 z-20 hidden h-full flex-col border-b border-border/40 bg-background/75 backdrop-blur supports-[backdrop-filter]:bg-background/40 md:flex"
 	>
 		<SideBar />
 	</aside>
diff --git a/src/routes/builder/SideBar.svelte b/src/routes/builder/SideBar.svelte
index b1b7996..757e4fa 100644
--- a/src/routes/builder/SideBar.svelte
+++ b/src/routes/builder/SideBar.svelte
@@ -6,7 +6,8 @@
 	import { data } from '$lib/stores';
 	import { GuiType, type Data } from '$lib';
 	import Badge from '$lib/components/ui/badge/badge.svelte';
-	import { onMount } from 'svelte';
+
+	export let backdrop = false;
 
 	function convertDataToMenu(data: Data) {
 		return data.views.map((view, index) => ({
@@ -110,9 +111,11 @@
 	];
 </script>
 
-<div class="grid h-full grid-cols-[auto_1fr]">
+<div class="grid h-full grid-cols-[auto_1fr] text-black dark:text-white">
 	<nav
-		class="flex flex-col gap-1 border-r bg-background/85 p-2 backdrop-blur supports-[backdrop-filter]:bg-background/45"
+		class="flex flex-col gap-1 border-r p-2 {backdrop
+			? 'bg-background/85 backdrop-blur supports-[backdrop-filter]:bg-background/45'
+			: ''} "
 	>
 		<Tooltip.Root>
 			<Tooltip.Trigger asChild let:builder>
@@ -150,7 +153,9 @@
 		</Tooltip.Root>
 	</nav>
 	<nav
-		class="grid w-[280px] gap-1 overflow-y-auto bg-background/50 backdrop-blur supports-[backdrop-filter]:bg-background/20"
+		class="grid w-[280px] gap-1 overflow-y-auto {backdrop
+			? 'bg-background/50 backdrop-blur supports-[backdrop-filter]:bg-background/20'
+			: ''}"
 	>
 		<div class="space-y-4 overflow-y-auto p-4 pb-20">
 			{#each submenu as segment, i (i)}

From e80c268c73d626428cacfdf020fa94a46a0d740a Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Fri, 17 May 2024 21:40:15 +0200
Subject: [PATCH 7/9] :sparkles: Finished Rework so far

---
 .../ui/alert/alert-description.svelte         |  13 +
 .../components/ui/alert/alert-title.svelte    |  21 ++
 src/lib/components/ui/alert/alert.svelte      |  17 +
 src/lib/components/ui/alert/index.ts          |  33 ++
 .../context-menu-checkbox-item.svelte         |  35 --
 .../context-menu/context-menu-content.svelte  |  24 --
 .../ui/context-menu/context-menu-item.svelte  |  31 --
 .../ui/context-menu/context-menu-label.svelte |  19 -
 .../context-menu-radio-group.svelte           |  11 -
 .../context-menu-radio-item.svelte            |  35 --
 .../context-menu-separator.svelte             |  14 -
 .../context-menu-sub-content.svelte           |  29 --
 .../context-menu-sub-trigger.svelte           |  32 --
 src/lib/components/ui/context-menu/index.ts   |  49 ---
 .../ui/dialog/dialog-content.svelte           |  36 ++
 .../ui/dialog/dialog-description.svelte       |  16 +
 .../dialog-footer.svelte}                     |   8 +-
 .../components/ui/dialog/dialog-header.svelte |  13 +
 .../ui/dialog/dialog-overlay.svelte           |  21 ++
 .../components/ui/dialog/dialog-portal.svelte |   8 +
 .../components/ui/dialog/dialog-title.svelte  |  16 +
 src/lib/components/ui/dialog/index.ts         |  37 ++
 src/lib/components/ui/input/index.ts          |  29 ++
 src/lib/components/ui/input/input.svelte      |  42 +++
 src/lib/components/ui/label/index.ts          |   7 +
 src/lib/components/ui/label/label.svelte      |  21 ++
 src/lib/components/ui/select/index.ts         |  34 ++
 .../ui/select/select-content.svelte           |  39 ++
 .../components/ui/select/select-item.svelte   |  40 ++
 .../components/ui/select/select-label.svelte  |  16 +
 .../ui/select/select-separator.svelte         |  11 +
 .../ui/select/select-trigger.svelte           |  27 ++
 src/lib/index.ts                              |  32 +-
 src/routes/+page.svelte                       |  27 +-
 src/routes/Code.svelte                        |   4 +-
 src/routes/builder/+page.svelte               |   4 +-
 src/routes/builder/Editor.svelte              | 352 +++++++++++++-----
 src/routes/builder/EventDialog.svelte         |  48 +++
 src/routes/builder/LabelDialog.svelte         |  98 +++++
 src/routes/builder/SideBar.svelte             |  34 +-
 src/routes/builder/TextDialog.svelte          |  34 ++
 41 files changed, 1006 insertions(+), 411 deletions(-)
 create mode 100644 src/lib/components/ui/alert/alert-description.svelte
 create mode 100644 src/lib/components/ui/alert/alert-title.svelte
 create mode 100644 src/lib/components/ui/alert/alert.svelte
 create mode 100644 src/lib/components/ui/alert/index.ts
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-content.svelte
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-item.svelte
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-label.svelte
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-radio-group.svelte
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-radio-item.svelte
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-separator.svelte
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-sub-content.svelte
 delete mode 100644 src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
 delete mode 100644 src/lib/components/ui/context-menu/index.ts
 create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte
 rename src/lib/components/ui/{context-menu/context-menu-shortcut.svelte => dialog/dialog-footer.svelte} (61%)
 create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 src/lib/components/ui/dialog/index.ts
 create mode 100644 src/lib/components/ui/input/index.ts
 create mode 100644 src/lib/components/ui/input/input.svelte
 create mode 100644 src/lib/components/ui/label/index.ts
 create mode 100644 src/lib/components/ui/label/label.svelte
 create mode 100644 src/lib/components/ui/select/index.ts
 create mode 100644 src/lib/components/ui/select/select-content.svelte
 create mode 100644 src/lib/components/ui/select/select-item.svelte
 create mode 100644 src/lib/components/ui/select/select-label.svelte
 create mode 100644 src/lib/components/ui/select/select-separator.svelte
 create mode 100644 src/lib/components/ui/select/select-trigger.svelte
 create mode 100644 src/routes/builder/EventDialog.svelte
 create mode 100644 src/routes/builder/LabelDialog.svelte
 create mode 100644 src/routes/builder/TextDialog.svelte

diff --git a/src/lib/components/ui/alert/alert-description.svelte b/src/lib/components/ui/alert/alert-description.svelte
new file mode 100644
index 0000000..06d344c
--- /dev/null
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 0000000..c63089b
--- /dev/null
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HeadingLevel } from './index.js';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export let level: $$Props['level'] = 'h5';
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn('mb-1 font-medium leading-none tracking-tight', className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 0000000..0bf6eec
--- /dev/null
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { type Variant, alertVariants } from './index.js';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export { className as class };
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+	<slot />
+</div>
diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts
new file mode 100644
index 0000000..87f42b7
--- /dev/null
+++ b/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,33 @@
+import { type VariantProps, tv } from 'tailwind-variants';
+
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+
+export const alertVariants = tv({
+	base: 'relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+
+	variants: {
+		variant: {
+			default: 'bg-background text-foreground',
+			destructive:
+				'border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive'
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+export type Variant = VariantProps<typeof alertVariants>['variant'];
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle
+};
diff --git a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
deleted file mode 100644
index 906cbd6..0000000
--- a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import Check from 'lucide-svelte/icons/check';
-	import { cn } from '$lib/utils.js';
-
-	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
-	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
-
-	let className: $$Props['class'] = undefined;
-	export let checked: $$Props['checked'] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.CheckboxItem
-	bind:checked
-	class={cn(
-		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.CheckboxIndicator>
-			<Check class="h-4 w-4" />
-		</ContextMenuPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
-</ContextMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-content.svelte b/src/lib/components/ui/context-menu/context-menu-content.svelte
deleted file mode 100644
index 69a1a5e..0000000
--- a/src/lib/components/ui/context-menu/context-menu-content.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn, flyAndScale } from '$lib/utils.js';
-
-	type $$Props = ContextMenuPrimitive.ContentProps;
-
-	let className: $$Props['class'] = undefined;
-	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props['transitionConfig'] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.Content
-	{transition}
-	{transitionConfig}
-	class={cn(
-		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
-		className
-	)}
-	{...$$restProps}
-	on:keydown
->
-	<slot />
-</ContextMenuPrimitive.Content>
diff --git a/src/lib/components/ui/context-menu/context-menu-item.svelte b/src/lib/components/ui/context-menu/context-menu-item.svelte
deleted file mode 100644
index 8b54154..0000000
--- a/src/lib/components/ui/context-menu/context-menu-item.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
-
-	type $$Props = ContextMenuPrimitive.ItemProps & {
-		inset?: boolean;
-	};
-	type $$Events = ContextMenuPrimitive.ItemEvents;
-
-	let className: $$Props['class'] = undefined;
-	export let inset: $$Props['inset'] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.Item
-	class={cn(
-		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
-		inset && 'pl-8',
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<slot />
-</ContextMenuPrimitive.Item>
diff --git a/src/lib/components/ui/context-menu/context-menu-label.svelte b/src/lib/components/ui/context-menu/context-menu-label.svelte
deleted file mode 100644
index 8261607..0000000
--- a/src/lib/components/ui/context-menu/context-menu-label.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
-
-	type $$Props = ContextMenuPrimitive.LabelProps & {
-		inset?: boolean;
-	};
-
-	let className: $$Props['class'] = undefined;
-	export let inset: $$Props['inset'] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.Label
-	class={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
-	{...$$restProps}
->
-	<slot />
-</ContextMenuPrimitive.Label>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
deleted file mode 100644
index 9df6e40..0000000
--- a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-
-	type $$Props = ContextMenuPrimitive.RadioGroupProps;
-
-	export let value: $$Props['value'] = undefined;
-</script>
-
-<ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
-</ContextMenuPrimitive.RadioGroup>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
deleted file mode 100644
index f710652..0000000
--- a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import Circle from 'lucide-svelte/icons/circle';
-	import { cn } from '$lib/utils.js';
-
-	type $$Props = ContextMenuPrimitive.RadioItemProps;
-	type $$Events = ContextMenuPrimitive.RadioItemEvents;
-
-	let className: $$Props['class'] = undefined;
-	export let value: ContextMenuPrimitive.RadioItemProps['value'];
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.RadioItem
-	class={cn(
-		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
-		className
-	)}
-	{value}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.RadioIndicator>
-			<Circle class="h-2 w-2 fill-current" />
-		</ContextMenuPrimitive.RadioIndicator>
-	</span>
-	<slot />
-</ContextMenuPrimitive.RadioItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-separator.svelte b/src/lib/components/ui/context-menu/context-menu-separator.svelte
deleted file mode 100644
index 0899c47..0000000
--- a/src/lib/components/ui/context-menu/context-menu-separator.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
-
-	type $$Props = ContextMenuPrimitive.SeparatorProps;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.Separator
-	class={cn('-mx-1 my-1 h-px bg-border', className)}
-	{...$$restProps}
-/>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
deleted file mode 100644
index 0816ab8..0000000
--- a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn, flyAndScale } from '$lib/utils.js';
-
-	type $$Props = ContextMenuPrimitive.SubContentProps;
-
-	let className: $$Props['class'] = undefined;
-	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props['transitionConfig'] = {
-		x: -10,
-		y: 0
-	};
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.SubContent
-	{transition}
-	{transitionConfig}
-	class={cn(
-		'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
-		className
-	)}
-	{...$$restProps}
-	on:keydown
-	on:focusout
-	on:pointermove
->
-	<slot />
-</ContextMenuPrimitive.SubContent>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
deleted file mode 100644
index e127b14..0000000
--- a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import ChevronRight from 'lucide-svelte/icons/chevron-right';
-	import { cn } from '$lib/utils.js';
-
-	type $$Props = ContextMenuPrimitive.SubTriggerProps & {
-		inset?: boolean;
-	};
-	type $$Events = ContextMenuPrimitive.SubTriggerEvents;
-
-	let className: $$Props['class'] = undefined;
-	export let inset: $$Props['inset'] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.SubTrigger
-	class={cn(
-		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
-		inset && 'pl-8',
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
->
-	<slot />
-	<ChevronRight class="ml-auto h-4 w-4" />
-</ContextMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/ui/context-menu/index.ts b/src/lib/components/ui/context-menu/index.ts
deleted file mode 100644
index 9f3bd1f..0000000
--- a/src/lib/components/ui/context-menu/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-
-import Item from './context-menu-item.svelte';
-import Label from './context-menu-label.svelte';
-import Content from './context-menu-content.svelte';
-import Shortcut from './context-menu-shortcut.svelte';
-import RadioItem from './context-menu-radio-item.svelte';
-import Separator from './context-menu-separator.svelte';
-import RadioGroup from './context-menu-radio-group.svelte';
-import SubContent from './context-menu-sub-content.svelte';
-import SubTrigger from './context-menu-sub-trigger.svelte';
-import CheckboxItem from './context-menu-checkbox-item.svelte';
-
-const Sub = ContextMenuPrimitive.Sub;
-const Root = ContextMenuPrimitive.Root;
-const Trigger = ContextMenuPrimitive.Trigger;
-const Group = ContextMenuPrimitive.Group;
-
-export {
-	Sub,
-	Root,
-	Item,
-	Label,
-	Group,
-	Trigger,
-	Content,
-	Shortcut,
-	Separator,
-	RadioItem,
-	SubContent,
-	SubTrigger,
-	RadioGroup,
-	CheckboxItem,
-	//
-	Root as ContextMenu,
-	Sub as ContextMenuSub,
-	Item as ContextMenuItem,
-	Label as ContextMenuLabel,
-	Group as ContextMenuGroup,
-	Content as ContextMenuContent,
-	Trigger as ContextMenuTrigger,
-	Shortcut as ContextMenuShortcut,
-	RadioItem as ContextMenuRadioItem,
-	Separator as ContextMenuSeparator,
-	RadioGroup as ContextMenuRadioGroup,
-	SubContent as ContextMenuSubContent,
-	SubTrigger as ContextMenuSubTrigger,
-	CheckboxItem as ContextMenuCheckboxItem
-};
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..491bb1d
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import X from 'lucide-svelte/icons/x';
+	import * as Dialog from './index.js';
+	import { cn, flyAndScale } from '$lib/utils.js';
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 200
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..e8d11b8
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn('text-sm text-muted-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>
diff --git a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
similarity index 61%
rename from src/lib/components/ui/context-menu/context-menu-shortcut.svelte
rename to src/lib/components/ui/dialog/dialog-footer.svelte
index 62aa6e8..329304a 100644
--- a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -2,15 +2,15 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
+	type $$Props = HTMLAttributes<HTMLDivElement>;
 
 	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<span
-	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+<div
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />
-</span>
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..ac663bc
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..c490ab2
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { fade } from 'svelte/transition';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 150
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..00774dd
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..e111dd7
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..6cbc5a7
--- /dev/null
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+import Title from './dialog-title.svelte';
+import Portal from './dialog-portal.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose
+};
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..1c8bcb7
--- /dev/null
+++ b/src/lib/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from './input.svelte';
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..7e8f33c
--- /dev/null
+++ b/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { InputEvents } from './index.js';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props['readonly'] = undefined;
+</script>
+
+<input
+	class={cn(
+		'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000..808d141
--- /dev/null
+++ b/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+	Root,
+	//
+	Root as Label
+};
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..ca4b30d
--- /dev/null
+++ b/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = LabelPrimitive.Props;
+	type $$Events = LabelPrimitive.Events;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		className
+	)}
+	{...$$restProps}
+	on:mousedown
+>
+	<slot />
+</LabelPrimitive.Root>
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..6b2ec20
--- /dev/null
+++ b/src/lib/components/ui/select/index.ts
@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator
+};
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..ff135c3
--- /dev/null
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { scale } from 'svelte/transition';
+	import { cn, flyAndScale } from '$lib/utils.js';
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let inTransition: $$Props['inTransition'] = flyAndScale;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
+	export let outTransition: $$Props['outTransition'] = scale;
+	export let outTransitionConfig: $$Props['outTransitionConfig'] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50
+	};
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..42c9f8e
--- /dev/null
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Check from 'lucide-svelte/icons/check';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export let label: $$Props['label'] = undefined;
+	export let disabled: $$Props['disabled'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot>
+		{label || value}
+	</slot>
+</SelectPrimitive.Item>
diff --git a/src/lib/components/ui/select/select-label.svelte b/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..424bc64
--- /dev/null
+++ b/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>
diff --git a/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..64d1886
--- /dev/null
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..a5ead7d
--- /dev/null
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0a6b19d..a67de60 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -6,7 +6,7 @@ export interface Data {
 }
 
 export interface View {
-	data: MessageData | InputData | BrowserData | any;
+	data: MessageData | AlertData | BrowserData | InputData | any;
 	// not to serialize
 	type: GuiType;
 }
@@ -22,6 +22,22 @@ export interface MessageData {
 	header: Option<Label>;
 	text: Option<Label>;
 	buttons: Option<Event>[];
+	back_function: string;
+}
+
+export interface AlertData {
+	text: string;
+	function: string;
+	back_function: string;
+}
+
+export interface BrowserData {}
+
+export interface InputData {}
+
+export interface Event {
+	text: string;
+	function: string;
 }
 
 export interface Label {
@@ -33,18 +49,14 @@ export interface Label {
 }
 
 export enum Align {
-	Left,
-	Right,
-	Top,
-	Bottom,
-	Center
+	Left = 'Left',
+	Right = 'Right',
+	Top = 'Top',
+	Bottom = 'Bottom',
+	Center = 'Center'
 }
 
 export interface Event {
 	text: string;
 	function: string;
 }
-
-export interface InputData {}
-
-export interface BrowserData {}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9cf852d..a2581b9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <svelte:head>
-	<title>Home</title>
+	<title>flip</title>
 	<meta name="description" content="Homepage" />
 </svelte:head>
 
@@ -21,26 +21,23 @@
 
 	<h3 class="h3">Events</h3>
 	<p>
-		All buttons can have events. An event can be a function you defined in the Rust proc macro code
-		or a predefined event, which currently are:
-		<code class="code">next</code>, <code class="code">back</code> and
+		All buttons can have events. An event can be a function you defined in your Rust code or a
+		predefined event (in the proc macro), which currently are:
+		<code class="code">none</code>, <code class="code">next</code>, <code class="code">back</code>
+		and
 		<code class="code">close</code>.
 	</p>
 	<h3 class="h3">UI Items</h3>
-	<p>
-		The UI operates on the principle of views. Every view can have UI items (found under the UI <code
-			class="code">Add Items</code
-		>
-		- Tab) of one category. Using the Edit (pen icon) button, you can edit the already described properties
-		(plus, on Header and Body Text, you can also set text alignment). You can also set the position of
-		<code class="code">Moveable</code> items by moving them.
-	</p>
+	<p>// Todo new explanation</p>
 
 	<h3 class="h3">Integration with Rust</h3>
 	<p>
-		To integrate the exported JSON into your Flipper Zero app, use our dedicated Rust crate. Simply
-		include the crate in your project and load the JSON to render the UI components (don't forget to
-		pass in your functions).
+		To integrate the exported JSON into your Flipper Zero app, use <a
+			href="https://github.com/flip-ui/flip-ui-rs"
+			target="_blank"
+			class="text-primary underline underline-offset-4">our dedicated Rust crate</a
+		>. Simply include the crate in your project and load the JSON to render the UI components (don't
+		forget to pass in your functions).
 	</p>
 	<h3 class="h3">Example:</h3>
 
diff --git a/src/routes/Code.svelte b/src/routes/Code.svelte
index f5bd946..815b940 100644
--- a/src/routes/Code.svelte
+++ b/src/routes/Code.svelte
@@ -26,11 +26,13 @@ manifest!(
 // Define the entry function
 entry!(main);
 
-// Getting UI data && actions
+// Getting UI data && events
 flipper_ui! {
 	App,
 	"src/main.json",
+	none => none,
 	next => next,
+	back => back,
 	close => close,
 }
 
diff --git a/src/routes/builder/+page.svelte b/src/routes/builder/+page.svelte
index 8fd38de..dfba501 100644
--- a/src/routes/builder/+page.svelte
+++ b/src/routes/builder/+page.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <svelte:head>
-	<title>Builder</title>
+	<title>Builder - flip</title>
 	<meta name="description" content="Website's specific UI-Builder" />
 </svelte:head>
 
@@ -12,7 +12,7 @@
 	<aside
 		class="inset-y fixed left-0 z-20 hidden h-full flex-col border-b border-border/40 bg-background/75 backdrop-blur supports-[backdrop-filter]:bg-background/40 md:flex"
 	>
-		<SideBar />
+		<SideBar backdrop />
 	</aside>
 	<div class="h-full p-2">
 		<Editor />
diff --git a/src/routes/builder/Editor.svelte b/src/routes/builder/Editor.svelte
index 55b9a17..b868400 100644
--- a/src/routes/builder/Editor.svelte
+++ b/src/routes/builder/Editor.svelte
@@ -2,114 +2,276 @@
 	import { data } from '$lib/stores';
 	import * as Card from '$lib/components/ui/card';
 	import { Align, GuiType } from '$lib';
-	import * as ContextMenu from '$lib/components/ui/context-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { CircleAlert, Eye, EyeOff, Pencil, SquareChevronLeft } from 'lucide-svelte';
+	import { Button } from '$lib/components/ui/button';
+	import LabelDialog from './LabelDialog.svelte';
+	import EventDialog from './EventDialog.svelte';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import * as Alert from '$lib/components/ui/alert';
+	import TextDialog from './TextDialog.svelte';
 </script>
 
 <div class="flex h-full flex-col">
-	{#if $data.views.length > 0}
-		<h2 class="h2">{$data.current + 1}. {$data.views[$data.current].type.toString()}</h2>
-	{:else}
-		<h2 class="h2">No Views</h2>
-	{/if}
+	<div class="pb-2 pt-2">
+		{#if $data.views.length > 0}
+			<div class="flex items-center justify-between">
+				<h2 class="h2">{$data.current + 1}. {$data.views[$data.current].type.toString()}</h2>
+				<Tooltip.Root>
+					<Tooltip.Trigger asChild let:builder={tooltip}>
+						<TextDialog
+							bind:text={$data.views[$data.current].data.back_function}
+							label="Back Button Event"
+							description={`Define here your custom/generic event: <code class="code">none</code>,
+								<code class="code">next</code>, <code class="code">back</code>
+								or
+								<code class="code">close</code>. The Back Button Event will be triggered when
+								the back button is pressed.`}
+							let:dialog
+						>
+							<Button builders={[tooltip, dialog]} variant="outline" size="icon"
+								><SquareChevronLeft class="h-5 w-5" /></Button
+							>
+						</TextDialog>
+					</Tooltip.Trigger>
+					<Tooltip.Content side="left" sideOffset={5}>Back Button Event</Tooltip.Content>
+				</Tooltip.Root>
+			</div>
+		{:else}
+			<h2 class="h2">No Views</h2>
+		{/if}
+	</div>
 
 	<div class="flex h-full flex-col justify-between gap-2">
 		{#if $data.views[$data.current]?.type == GuiType.Dialog}
-			<ContextMenu.Root>
-				{@const headerShown = $data.views[$data.current]?.data.header}
-				<ContextMenu.Trigger>
-					<Card.Root class="w-full {!headerShown ? 'opacity-50' : ''}">
-						<Card.Header>
-							<Card.Title>Header</Card.Title>
-						</Card.Header>
-						<Card.Content>
-							{headerShown ? $data.views[$data.current]?.data.header.text : 'hidden'}
-						</Card.Content>
-					</Card.Root>
-				</ContextMenu.Trigger>
-				<ContextMenu.Content>
-					<ContextMenu.CheckboxItem
-						checked={headerShown}
-						on:click={() => {
-							if (!headerShown) {
-								$data.views[$data.current].data.header = {
-									text: '',
-									x: 0,
-									y: 0,
-									vertical: Align.Left,
-									horizontal: Align.Top
-								};
-							} else {
-								$data.views[$data.current].data.header = null;
-							}
-						}}>Shown</ContextMenu.CheckboxItem
-					>
-					<ContextMenu.Item inset disabled={!headerShown}>Edit</ContextMenu.Item>
-				</ContextMenu.Content>
-			</ContextMenu.Root>
-			<ContextMenu.Root>
-				{@const textShown = $data.views[$data.current]?.data.text}
-				<ContextMenu.Trigger>
-					<Card.Root class="w-full {!textShown ? 'opacity-50' : ''}">
+			{@const headerShown = $data.views[$data.current]?.data.header}
+			<Card.Root class="w-full {!headerShown ? 'opacity-50' : ''}">
+				<Card.Header>
+					<Card.Title>
+						<div class="flex items-center justify-between">
+							<span>
+								Header
+								{#if headerShown}
+									<Badge>x: {$data.views[$data.current]?.data.header?.x}</Badge>
+									<Badge>y: {$data.views[$data.current]?.data.header?.y}</Badge>
+								{/if}
+							</span>
+							<div class="flex space-x-1">
+								<LabelDialog
+									bind:label={$data.views[$data.current].data.header}
+									type={'Header'}
+									let:dialog
+								>
+									<Button size="icon" variant="ghost" disabled={!headerShown} builders={[dialog]}>
+										<Pencil class="h-4 w-4" />
+									</Button>
+								</LabelDialog>
+								<Button
+									size="icon"
+									variant="ghost"
+									on:click={() => {
+										if (!headerShown) {
+											$data.views[$data.current].data.header = {
+												text: '',
+												x: 0,
+												y: 0,
+												vertical: Align.Left,
+												horizontal: Align.Top
+											};
+										} else {
+											$data.views[$data.current].data.header = null;
+										}
+									}}
+								>
+									{#if headerShown}
+										<Eye class="h-4 w-4" />
+									{:else}
+										<EyeOff class="h-4 w-4" />
+									{/if}
+								</Button>
+							</div>
+						</div>
+					</Card.Title>
+				</Card.Header>
+				<Card.Content>
+					<div class="grid">
+						<span class="truncate"
+							>{headerShown ? $data.views[$data.current]?.data.header.text : 'hidden'}</span
+						>
+					</div>
+				</Card.Content>
+			</Card.Root>
+			{@const textShown = $data.views[$data.current]?.data.text}
+			<Card.Root class="w-full {!textShown ? 'opacity-50' : ''}">
+				<Card.Header>
+					<Card.Title>
+						<div class="flex items-center justify-between">
+							<span
+								>Text
+								{#if textShown}
+									<Badge>x: {$data.views[$data.current]?.data.text?.x}</Badge>
+									<Badge>y: {$data.views[$data.current]?.data.text?.y}</Badge>
+								{/if}
+							</span>
+							<div class="flex space-x-1">
+								<LabelDialog
+									bind:label={$data.views[$data.current].data.text}
+									type={'Text'}
+									let:dialog
+								>
+									<Button size="icon" variant="ghost" disabled={!textShown} builders={[dialog]}>
+										<Pencil class="h-4 w-4" />
+									</Button>
+								</LabelDialog>
+								<Button
+									size="icon"
+									variant="ghost"
+									on:click={() => {
+										if (!textShown) {
+											$data.views[$data.current].data.text = {
+												text: '',
+												x: 64,
+												y: 0,
+												vertical: Align.Left,
+												horizontal: Align.Top
+											};
+										} else {
+											$data.views[$data.current].data.text = null;
+										}
+									}}
+								>
+									{#if textShown}
+										<Eye class="h-4 w-4" />
+									{:else}
+										<EyeOff class="h-4 w-4" />
+									{/if}
+								</Button>
+							</div>
+						</div>
+					</Card.Title>
+				</Card.Header>
+				<Card.Content>
+					<div class="grid">
+						<span class="truncate"
+							>{textShown ? $data.views[$data.current]?.data.text.text : 'hidden'}</span
+						>
+					</div>
+				</Card.Content>
+			</Card.Root>
+			<div class="grid w-full grid-cols-3 gap-2">
+				{#each $data.views[$data.current]?.data.buttons as event}
+					<Card.Root class="w-full {!event ? 'opacity-50' : ''}">
 						<Card.Header>
-							<Card.Title>Text</Card.Title>
+							<Card.Title>
+								<div class="flex items-center justify-between">
+									<span class="items-center truncate">
+										Button
+										{#if event && event.function}
+											<Badge>{event.function}</Badge>
+										{/if}
+									</span>
+									<div
+										class="flex flex-col-reverse items-center space-y-1 xl:flex-row xl:space-x-1"
+									>
+										<EventDialog bind:event let:dialog>
+											<Button size="icon" variant="ghost" disabled={!event} builders={[dialog]}>
+												<Pencil class="h-4 w-4" />
+											</Button>
+										</EventDialog>
+										<Button
+											size="icon"
+											variant="ghost"
+											on:click={() => {
+												if (!event) {
+													event = {
+														text: '',
+														function: ''
+													};
+												} else {
+													event = null;
+												}
+											}}
+										>
+											{#if event}
+												<Eye class="h-4 w-4" />
+											{:else}
+												<EyeOff class="h-4 w-4" />
+											{/if}
+										</Button>
+									</div>
+								</div>
+							</Card.Title>
 						</Card.Header>
 						<Card.Content>
-							{textShown ? $data.views[$data.current]?.data.text.text : 'hidden'}
+							<div class="grid">
+								<span class="truncate"> {event ? event.text : 'hidden'} </span>
+							</div>
 						</Card.Content>
 					</Card.Root>
-				</ContextMenu.Trigger>
-				<ContextMenu.Content>
-					<ContextMenu.CheckboxItem
-						checked={textShown}
-						on:click={() => {
-							if (!textShown) {
-								$data.views[$data.current].data.text = {
-									text: '',
-									x: 0,
-									y: 20,
-									vertical: Align.Left,
-									horizontal: Align.Top
-								};
-							} else {
-								$data.views[$data.current].data.text = null;
-							}
-						}}>Shown</ContextMenu.CheckboxItem
-					>
-					<ContextMenu.Item inset disabled={!textShown}>Edit</ContextMenu.Item>
-				</ContextMenu.Content>
-			</ContextMenu.Root>
-			<div class="grid w-full grid-cols-3 gap-2">
-				{#each $data.views[$data.current]?.data.buttons as button}
-					<ContextMenu.Root>
-						<ContextMenu.Trigger>
-							<Card.Root class={!button ? 'opacity-50' : ''}>
-								<Card.Header>
-									<Card.Title>Button</Card.Title>
-								</Card.Header>
-								<Card.Content>
-									{button ? button.text : 'hidden'}
-								</Card.Content>
-							</Card.Root>
-						</ContextMenu.Trigger>
-						<ContextMenu.Content>
-							<ContextMenu.CheckboxItem
-								checked={button}
-								on:click={() => {
-									if (!button) {
-										button = {
-											text: '',
-											function: ''
-										};
-									} else {
-										button = null;
-									}
-								}}>Shown</ContextMenu.CheckboxItem
-							>
-							<ContextMenu.Item inset disabled={!button}>Edit</ContextMenu.Item>
-						</ContextMenu.Content>
-					</ContextMenu.Root>
 				{/each}
 			</div>
+		{:else if $data.views[$data.current]?.type == GuiType.Alert}
+			<Card.Root class="w-full">
+				<Card.Header>
+					<Card.Title>
+						<div class="flex items-center justify-between">
+							<span> Text </span>
+							<TextDialog
+								bind:text={$data.views[$data.current].data.text}
+								label="Text"
+								description="Edit the text of the Alert View."
+								let:dialog
+							>
+								<Button size="icon" variant="ghost" builders={[dialog]}>
+									<Pencil class="h-4 w-4" />
+								</Button>
+							</TextDialog>
+						</div>
+					</Card.Title>
+				</Card.Header>
+				<Card.Content>
+					<div class="grid">
+						<span class="truncate">{$data.views[$data.current]?.data.text}</span>
+					</div>
+				</Card.Content>
+			</Card.Root>
+			<Card.Root class="w-full pt-1">
+				<Card.Header>
+					<Card.Title>
+						<div class="flex items-center justify-between">
+							<span class="items-center truncate pb-1">
+								Button
+								{#if $data.views[$data.current].data && $data.views[$data.current].data.function}
+									<Badge>{$data.views[$data.current].data.function}</Badge>
+								{/if}
+							</span>
+							<TextDialog
+								bind:text={$data.views[$data.current].data.function}
+								label="Button Event"
+								description={`Define here your button text and custom/generic event: <code class="code">none</code>,
+								<code class="code">next</code>, <code class="code">back</code>
+								or
+								<code class="code">close</code>. The Button Event will be triggered when the Ok/Middle button is
+								pressed.`}
+								let:dialog
+							>
+								<Button size="icon" variant="ghost" builders={[dialog]}>
+									<Pencil class="h-4 w-4" />
+								</Button>
+							</TextDialog>
+						</div>
+					</Card.Title>
+				</Card.Header>
+				<Card.Content>Ok</Card.Content>
+			</Card.Root>
+		{:else if $data.views.length > 0}
+			<Alert.Root variant="destructive">
+				<CircleAlert class="h-4 w-4" />
+				<Alert.Title>Error</Alert.Title>
+				<Alert.Description
+					>This View isn't implemented yet. Just wait until I've done my work!</Alert.Description
+				>
+			</Alert.Root>
 		{/if}
 	</div>
 </div>
diff --git a/src/routes/builder/EventDialog.svelte b/src/routes/builder/EventDialog.svelte
new file mode 100644
index 0000000..4d57351
--- /dev/null
+++ b/src/routes/builder/EventDialog.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { type Event } from '$lib';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+
+	export let event: Event;
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger asChild let:builder={dialog}>
+		<slot {dialog} />
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Edit Button Event</Dialog.Title>
+			<Dialog.Description>
+				Define here your button text and custom/generic event: <code class="code">none</code>,
+				<code class="code">next</code>, <code class="code">back</code>
+				or
+				<code class="code">close</code>. The Button Event will be triggered when the button is
+				pressed.
+			</Dialog.Description>
+			<div class="grid gap-4">
+				<div class="space-y-1">
+					<Label for="text" class="text-right">Text</Label>
+					<Input
+						bind:value={event.text}
+						id="text"
+						placeholder="Add text..."
+						class="col-span-3"
+						type="text"
+					/>
+				</div>
+				<div class="space-y-1">
+					<Label for="function" class="text-right">Event</Label>
+					<Input
+						bind:value={event.function}
+						id="function"
+						placeholder="Add event..."
+						class="col-span-3"
+						type="text"
+					/>
+				</div>
+			</div>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/routes/builder/LabelDialog.svelte b/src/routes/builder/LabelDialog.svelte
new file mode 100644
index 0000000..8ce0c4d
--- /dev/null
+++ b/src/routes/builder/LabelDialog.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Align, type Label } from '$lib';
+	import * as T from '$lib/components/ui/label';
+	import * as Select from '$lib/components/ui/select';
+	import { Input } from '$lib/components/ui/input';
+
+	export let label: Label;
+	export let type: 'Header' | 'Text';
+
+	function setHorizontal(align: string) {
+		label.horizontal = align as Align;
+	}
+
+	function setVertical(align: string) {
+		label.vertical = align as Align;
+	}
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger asChild let:builder={dialog}>
+		<slot {dialog} />
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Edit {type}</Dialog.Title>
+			<Dialog.Description>
+				Edit the {type} properties. You can change the text, position and alignment of it.
+			</Dialog.Description>
+			<div class="grid gap-4">
+				<div class="space-y-1">
+					<T.Label for="text" class="text-right">Text</T.Label>
+					<Input
+						bind:value={label.text}
+						id="text"
+						placeholder="Add text..."
+						class="col-span-3"
+						type="text"
+					/>
+				</div>
+				<div class="grid grid-cols-2 space-x-1">
+					<div class="space-y-1">
+						<T.Label for="x" class="text-right">x (0-128)</T.Label>
+						<Input
+							bind:value={label.x}
+							id="x"
+							placeholder="Add x..."
+							class="col-span-3"
+							type="number"
+						/>
+					</div>
+					<div class="space-y-1">
+						<T.Label for="y" class="text-right">y (0-64)</T.Label>
+						<Input
+							bind:value={label.y}
+							id="y"
+							placeholder="Add y..."
+							class="col-span-3"
+							type="number"
+						/>
+					</div>
+				</div>
+				<div class="grid grid-cols-2 space-x-1">
+					<div class="space-y-1">
+						<T.Label for="horizontal" class="text-right">Horizontal</T.Label>
+						<Select.Root selected={{ value: label.horizontal, label: label.horizontal }}>
+							<Select.Trigger id="horizontal" class="w-full">
+								<Select.Value placeholder="Select Alignment" />
+							</Select.Trigger>
+							<Select.Content>
+								{#each Object.keys(Align) as align}
+									<Select.Item value={align} on:click={() => setHorizontal(align)}
+										>{align}</Select.Item
+									>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+					<div class="space-y-1">
+						<T.Label for="vertical" class="text-right">Vertical</T.Label>
+						<Select.Root selected={{ value: label.vertical, label: label.vertical }}>
+							<Select.Trigger id="vertical" class="w-full">
+								<Select.Value placeholder="Select Alignment" />
+							</Select.Trigger>
+							<Select.Content>
+								{#each Object.keys(Align) as align}
+									<Select.Item value={align} on:click={() => setVertical(align)}
+										>{align}</Select.Item
+									>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+				</div>
+			</div>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/routes/builder/SideBar.svelte b/src/routes/builder/SideBar.svelte
index 757e4fa..afeb92a 100644
--- a/src/routes/builder/SideBar.svelte
+++ b/src/routes/builder/SideBar.svelte
@@ -6,6 +6,7 @@
 	import { data } from '$lib/stores';
 	import { GuiType, type Data } from '$lib';
 	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import { onMount } from 'svelte';
 
 	export let backdrop = false;
 
@@ -26,8 +27,23 @@
 		}));
 	}
 
+	function replacer(key: string, value: any) {
+		if (key === 'current') {
+			return undefined;
+		}
+		if (key === 'views' && Array.isArray(value)) {
+			return value.map((view) => {
+				if (view && typeof view === 'object' && 'type' in view && 'data' in view) {
+					return { [view.type.toLowerCase()]: view.data };
+				}
+				return view;
+			});
+		}
+		return value;
+	}
+
 	function downloadJson() {
-		const jsonStr = JSON.stringify($data, null, 2);
+		const jsonStr = JSON.stringify($data, replacer, 2);
 		const blob = new Blob([jsonStr], { type: 'application/json' });
 		const url = URL.createObjectURL(blob);
 		const a = document.createElement('a');
@@ -37,7 +53,7 @@
 		URL.revokeObjectURL(url);
 	}
 
-	let currentTile = 0;
+	let currentTile = -1;
 	$: submenu = [
 		{
 			title: 'Views',
@@ -59,7 +75,8 @@
 										data: {
 											header: null,
 											text: null,
-											buttons: [null, null, null]
+											buttons: [null, null, null],
+											back_function: 'close'
 										},
 										type: GuiType.Dialog
 									});
@@ -71,7 +88,11 @@
 								disabled: false,
 								onclick: () => {
 									$data.views.push({
-										data: {},
+										data: {
+											text: '',
+											function: '',
+											back_function: 'close'
+										},
 										type: GuiType.Alert
 									});
 									$data = $data;
@@ -109,6 +130,9 @@
 			]
 		}
 	];
+	onMount(() => {
+		currentTile = 0;
+	});
 </script>
 
 <div class="grid h-full grid-cols-[auto_1fr] text-black dark:text-white">
@@ -154,7 +178,7 @@
 	</nav>
 	<nav
 		class="grid w-[280px] gap-1 overflow-y-auto {backdrop
-			? 'bg-background/50 backdrop-blur supports-[backdrop-filter]:bg-background/20'
+			? 'border-r bg-background/50 backdrop-blur supports-[backdrop-filter]:bg-background/20'
 			: ''}"
 	>
 		<div class="space-y-4 overflow-y-auto p-4 pb-20">
diff --git a/src/routes/builder/TextDialog.svelte b/src/routes/builder/TextDialog.svelte
new file mode 100644
index 0000000..7a53b01
--- /dev/null
+++ b/src/routes/builder/TextDialog.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/ui/badge';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+
+	export let text: string;
+	export let label: string;
+	export let description: string;
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger asChild let:builder={dialog}>
+		<slot {dialog} />
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>
+				Edit {label}
+			</Dialog.Title>
+			<Dialog.Description>{@html description}</Dialog.Description>
+		</Dialog.Header>
+		<div class="space-y-1">
+			<Label for="text" class="text-right">{label}</Label>
+			<Input
+				bind:value={text}
+				id="text"
+				placeholder="Add {label.toLowerCase()}..."
+				class="col-span-3"
+				type="text"
+			/>
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

From 7d05a25c0956ed6c3360799a6ff2e7b05361da3f Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Fri, 17 May 2024 22:50:52 +0200
Subject: [PATCH 8/9] :sparkles: Finishing touches

---
 README.md                            |   8 ++
 src/routes/+page.svelte              |  12 ++-
 src/routes/builder/Editor.svelte     | 119 +--------------------------
 src/routes/builder/LabelItem.svelte  | 103 +++++++++++++++++++++++
 src/routes/builder/TextDialog.svelte |   1 -
 5 files changed, 125 insertions(+), 118 deletions(-)
 create mode 100644 src/routes/builder/LabelItem.svelte

diff --git a/README.md b/README.md
index 1d8ccc5..794954f 100644
--- a/README.md
+++ b/README.md
@@ -31,3 +31,11 @@ To bring your UI to life in a Flipper Zero app:
 3. Pass in your functions and variables for full functionality.
 
 For examples look into the [Rust Crate Repository](https://github.com/flip-ui/flip-ui-rs)!
+
+## Todos
+
+- [ ] Add virtual presentation of positioning
+- [ ] Add Browser View
+- [ ] Add Input View
+
+> Some minor Todos, will be done in the future
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a2581b9..d464e09 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,6 +19,16 @@
 		integrate into your Flipper Zero application.
 	</p>
 
+	<h3 class="h3">Views</h3>
+	<p>
+		Every possible user interface is build from multiple Views. That's like a slide a in a
+		presentation and multiple Slides are building the whole presentation. A View can be different
+		types: Either a <code class="code">Dialog</code>,
+		<code class="code">Alert</code>, <code class="code">Browser</code> or
+		<code class="code">Input</code>. Every View comes with their own UI Elements which can be hidden
+		(dialog) or just edited (all).
+	</p>
+
 	<h3 class="h3">Events</h3>
 	<p>
 		All buttons can have events. An event can be a function you defined in your Rust code or a
@@ -27,8 +37,6 @@
 		and
 		<code class="code">close</code>.
 	</p>
-	<h3 class="h3">UI Items</h3>
-	<p>// Todo new explanation</p>
 
 	<h3 class="h3">Integration with Rust</h3>
 	<p>
diff --git a/src/routes/builder/Editor.svelte b/src/routes/builder/Editor.svelte
index b868400..2acfef8 100644
--- a/src/routes/builder/Editor.svelte
+++ b/src/routes/builder/Editor.svelte
@@ -10,6 +10,7 @@
 	import Badge from '$lib/components/ui/badge/badge.svelte';
 	import * as Alert from '$lib/components/ui/alert';
 	import TextDialog from './TextDialog.svelte';
+	import LabelItem from './LabelItem.svelte';
 </script>
 
 <div class="flex h-full flex-col">
@@ -44,120 +45,8 @@
 
 	<div class="flex h-full flex-col justify-between gap-2">
 		{#if $data.views[$data.current]?.type == GuiType.Dialog}
-			{@const headerShown = $data.views[$data.current]?.data.header}
-			<Card.Root class="w-full {!headerShown ? 'opacity-50' : ''}">
-				<Card.Header>
-					<Card.Title>
-						<div class="flex items-center justify-between">
-							<span>
-								Header
-								{#if headerShown}
-									<Badge>x: {$data.views[$data.current]?.data.header?.x}</Badge>
-									<Badge>y: {$data.views[$data.current]?.data.header?.y}</Badge>
-								{/if}
-							</span>
-							<div class="flex space-x-1">
-								<LabelDialog
-									bind:label={$data.views[$data.current].data.header}
-									type={'Header'}
-									let:dialog
-								>
-									<Button size="icon" variant="ghost" disabled={!headerShown} builders={[dialog]}>
-										<Pencil class="h-4 w-4" />
-									</Button>
-								</LabelDialog>
-								<Button
-									size="icon"
-									variant="ghost"
-									on:click={() => {
-										if (!headerShown) {
-											$data.views[$data.current].data.header = {
-												text: '',
-												x: 0,
-												y: 0,
-												vertical: Align.Left,
-												horizontal: Align.Top
-											};
-										} else {
-											$data.views[$data.current].data.header = null;
-										}
-									}}
-								>
-									{#if headerShown}
-										<Eye class="h-4 w-4" />
-									{:else}
-										<EyeOff class="h-4 w-4" />
-									{/if}
-								</Button>
-							</div>
-						</div>
-					</Card.Title>
-				</Card.Header>
-				<Card.Content>
-					<div class="grid">
-						<span class="truncate"
-							>{headerShown ? $data.views[$data.current]?.data.header.text : 'hidden'}</span
-						>
-					</div>
-				</Card.Content>
-			</Card.Root>
-			{@const textShown = $data.views[$data.current]?.data.text}
-			<Card.Root class="w-full {!textShown ? 'opacity-50' : ''}">
-				<Card.Header>
-					<Card.Title>
-						<div class="flex items-center justify-between">
-							<span
-								>Text
-								{#if textShown}
-									<Badge>x: {$data.views[$data.current]?.data.text?.x}</Badge>
-									<Badge>y: {$data.views[$data.current]?.data.text?.y}</Badge>
-								{/if}
-							</span>
-							<div class="flex space-x-1">
-								<LabelDialog
-									bind:label={$data.views[$data.current].data.text}
-									type={'Text'}
-									let:dialog
-								>
-									<Button size="icon" variant="ghost" disabled={!textShown} builders={[dialog]}>
-										<Pencil class="h-4 w-4" />
-									</Button>
-								</LabelDialog>
-								<Button
-									size="icon"
-									variant="ghost"
-									on:click={() => {
-										if (!textShown) {
-											$data.views[$data.current].data.text = {
-												text: '',
-												x: 64,
-												y: 0,
-												vertical: Align.Left,
-												horizontal: Align.Top
-											};
-										} else {
-											$data.views[$data.current].data.text = null;
-										}
-									}}
-								>
-									{#if textShown}
-										<Eye class="h-4 w-4" />
-									{:else}
-										<EyeOff class="h-4 w-4" />
-									{/if}
-								</Button>
-							</div>
-						</div>
-					</Card.Title>
-				</Card.Header>
-				<Card.Content>
-					<div class="grid">
-						<span class="truncate"
-							>{textShown ? $data.views[$data.current]?.data.text.text : 'hidden'}</span
-						>
-					</div>
-				</Card.Content>
-			</Card.Root>
+			<LabelItem bind:label={$data.views[$data.current].data.header} type="Header" />
+			<LabelItem bind:label={$data.views[$data.current].data.text} type="Text" />
 			<div class="grid w-full grid-cols-3 gap-2">
 				{#each $data.views[$data.current]?.data.buttons as event}
 					<Card.Root class="w-full {!event ? 'opacity-50' : ''}">
@@ -230,7 +119,7 @@
 					</Card.Title>
 				</Card.Header>
 				<Card.Content>
-					<div class="grid">
+					<div class="grid h-12">
 						<span class="truncate">{$data.views[$data.current]?.data.text}</span>
 					</div>
 				</Card.Content>
diff --git a/src/routes/builder/LabelItem.svelte b/src/routes/builder/LabelItem.svelte
new file mode 100644
index 0000000..bb89603
--- /dev/null
+++ b/src/routes/builder/LabelItem.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Align, type Option } from '$lib';
+	import { Button } from '$lib/components/ui/button';
+	import { Badge } from '$lib/components/ui/badge';
+	import LabelDialog from './LabelDialog.svelte';
+	import { type Label } from '$lib';
+	import { Eye, EyeOff, Pencil } from 'lucide-svelte';
+
+	export let label: Option<Label>;
+	export let type: 'Header' | 'Text';
+
+	$: verticalAlign = (align: Align | undefined) => {
+		switch (align) {
+			case Align.Left:
+				return '';
+			case Align.Right:
+				return '';
+			case Align.Top:
+				return 'items-start';
+			case Align.Bottom:
+				return 'items-end';
+			case Align.Center:
+				return 'items-center';
+			default:
+				return '';
+		}
+	};
+
+	$: horizontalAlign = (align: Align | undefined) => {
+		switch (align) {
+			case Align.Left:
+				return 'justify-start';
+			case Align.Right:
+				return 'justify-end';
+			case Align.Top:
+				return '';
+			case Align.Bottom:
+				return '';
+			case Align.Center:
+				return 'justify-center';
+			default:
+				return '';
+		}
+	};
+</script>
+
+<Card.Root class="w-full {!label ? 'opacity-50' : ''}">
+	<Card.Header>
+		<Card.Title>
+			<div class="flex items-center justify-between">
+				<span>
+					{type}
+					{#if label}
+						<Badge>x: {label?.x}</Badge>
+						<Badge>y: {label?.y}</Badge>
+					{/if}
+				</span>
+				<div class="flex space-x-1">
+					{#if label}
+						<LabelDialog bind:label {type} let:dialog>
+							<Button size="icon" variant="ghost" builders={[dialog]}>
+								<Pencil class="h-4 w-4" />
+							</Button>
+						</LabelDialog>
+					{:else}
+						<Button size="icon" variant="ghost" disabled={true}>
+							<Pencil class="h-4 w-4" />
+						</Button>
+					{/if}
+					<Button
+						size="icon"
+						variant="ghost"
+						on:click={() => {
+							if (!label) {
+								label = {
+									text: '',
+									x: type == 'Header' ? 0 : 64,
+									y: 0,
+									horizontal: Align.Left,
+									vertical: Align.Top
+								};
+							} else {
+								label = null;
+							}
+						}}
+					>
+						{#if label}
+							<Eye class="h-4 w-4" />
+						{:else}
+							<EyeOff class="h-4 w-4" />
+						{/if}
+					</Button>
+				</div>
+			</div>
+		</Card.Title>
+	</Card.Header>
+	<Card.Content>
+		<div class="grid {horizontalAlign(label?.horizontal)} {verticalAlign(label?.vertical)} h-12">
+			<span class="truncate">{label ? label.text : 'hidden'}</span>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/src/routes/builder/TextDialog.svelte b/src/routes/builder/TextDialog.svelte
index 7a53b01..21452c6 100644
--- a/src/routes/builder/TextDialog.svelte
+++ b/src/routes/builder/TextDialog.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { Badge } from '$lib/components/ui/badge';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';

From e9e9ae2b961fc17b4f1a61c3cb52bcf9c89544f4 Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Fri, 17 May 2024 22:52:08 +0200
Subject: [PATCH 9/9] :wrench: Updated Build

---
 .github/workflows/deploy.yml | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 975a01d..845de82 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -2,19 +2,20 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: 'main'
+    branches: ['main']
+  workflow_dispatch: {}
 
 jobs:
   build_site:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Bun
         uses: oven-sh/setup-bun@v1
         with:
-          node-version: 'latest'
+          bun-version: 'latest'
 
       - name: Install dependencies
         run: bun install