From adc8cb37fcec21afac848b1e5dd724394c344050 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 27 Aug 2025 00:52:39 +0200
Subject: another huge refactor

---
 .../editor/properties-panel/text-properties.tsx    | 412 +++++++++++----------
 1 file changed, 226 insertions(+), 186 deletions(-)

(limited to 'apps/web/src/components/editor/properties-panel/text-properties.tsx')

diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index 744c2be5..139c7005 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -6,8 +6,14 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch"; // Add Switch import
+import { Switch } from "@/components/ui/switch";
 import { useState, useRef } from "react";
+import { PanelBaseView } from "@/components/editor/panel-base-view";
+import {
+  TEXT_PROPERTIES_TABS,
+  isTextPropertiesTab,
+  useTextPropertiesStore,
+} from "@/stores/text-properties-store";
 import {
   PropertyItem,
   PropertyItemLabel,
@@ -22,6 +28,7 @@ export function TextProperties({
   trackId: string;
 }) {
   const { updateTextElement } = useTimelineStore();
+  const { activeTab, setActiveTab } = useTextPropertiesStore();
 
   // Local state for input values to allow temporary empty/invalid states
   const [fontSizeInput, setFontSizeInput] = useState(
@@ -105,199 +112,232 @@ export function TextProperties({
   };
 
   return (
-    <div className="space-y-6 p-5">
-      <Textarea
-        placeholder="Name"
-        defaultValue={element.content}
-        className="min-h-18 resize-none bg-background/50"
-        onChange={(e) =>
-          updateTextElement(trackId, element.id, { content: e.target.value })
-        }
-      />
-      <PropertyItem direction="row">
-        <PropertyItemLabel>Font</PropertyItemLabel>
-        <PropertyItemValue>
-          <FontPicker
-            defaultValue={element.fontFamily}
-            onValueChange={(value: FontFamily) =>
-              updateTextElement(trackId, element.id, { fontFamily: value })
-            }
-          />
-        </PropertyItemValue>
-      </PropertyItem>
-      <PropertyItem direction="column">
-        <PropertyItem direction="row">
-          <PropertyItemLabel>Style</PropertyItemLabel>
-          <PropertyItemValue>
-            <div className="flex items-center gap-2">
-              <Button
-                variant={element.fontWeight === "bold" ? "default" : "outline"}
-                size="sm"
-                onClick={() =>
-                  updateTextElement(trackId, element.id, {
-                    fontWeight:
-                      element.fontWeight === "bold" ? "normal" : "bold",
-                  })
-                }
-                className="h-8 px-3 font-bold"
-              >
-                B
-              </Button>
-              <Button
-                variant={element.fontStyle === "italic" ? "default" : "outline"}
-                size="sm"
-                onClick={() =>
-                  updateTextElement(trackId, element.id, {
-                    fontStyle:
-                      element.fontStyle === "italic" ? "normal" : "italic",
-                  })
-                }
-                className="h-8 px-3 italic"
-              >
-                I
-              </Button>
-              <Button
-                variant={
-                  element.textDecoration === "underline" ? "default" : "outline"
-                }
-                size="sm"
-                onClick={() =>
+    <PanelBaseView
+      defaultTab="transform"
+      value={activeTab}
+      onValueChange={(v) => {
+        if (isTextPropertiesTab(v)) setActiveTab(v);
+      }}
+      tabs={TEXT_PROPERTIES_TABS.map((t) => ({
+        value: t.value,
+        label: t.label,
+        content:
+          t.value === "transform" ? (
+            <div className="space-y-6"></div>
+          ) : (
+            <div className="space-y-6">
+              <Textarea
+                placeholder="Name"
+                defaultValue={element.content}
+                className="min-h-18 resize-none bg-background/50"
+                onChange={(e) =>
                   updateTextElement(trackId, element.id, {
-                    textDecoration:
-                      element.textDecoration === "underline"
-                        ? "none"
-                        : "underline",
+                    content: e.target.value,
                   })
                 }
-                className="h-8 px-3 underline"
-              >
-                U
-              </Button>
-              <Button
-                variant={
-                  element.textDecoration === "line-through"
-                    ? "default"
-                    : "outline"
-                }
-                size="sm"
-                onClick={() =>
-                  updateTextElement(trackId, element.id, {
-                    textDecoration:
-                      element.textDecoration === "line-through"
-                        ? "none"
-                        : "line-through",
-                  })
-                }
-                className="h-8 px-3 line-through"
-              >
-                S
-              </Button>
-            </div>
-          </PropertyItemValue>
-        </PropertyItem>
-        <PropertyItemLabel>Font size</PropertyItemLabel>
-        <PropertyItemValue>
-          <div className="flex items-center gap-2">
-            <Slider
-              value={[element.fontSize]}
-              min={8}
-              max={300}
-              step={1}
-              onValueChange={([value]) => {
-                updateTextElement(trackId, element.id, { fontSize: value });
-                setFontSizeInput(value.toString());
-              }}
-              className="w-full"
-            />
-            <Input
-              type="number"
-              value={fontSizeInput}
-              min={8}
-              max={300}
-              onChange={(e) => handleFontSizeChange(e.target.value)}
-              onBlur={handleFontSizeBlur}
-              className="w-12 !text-xs h-7 rounded-sm text-center
+              />
+              <PropertyItem direction="row">
+                <PropertyItemLabel>Font</PropertyItemLabel>
+                <PropertyItemValue>
+                  <FontPicker
+                    defaultValue={element.fontFamily}
+                    onValueChange={(value: FontFamily) =>
+                      updateTextElement(trackId, element.id, {
+                        fontFamily: value,
+                      })
+                    }
+                  />
+                </PropertyItemValue>
+              </PropertyItem>
+              <PropertyItem direction="column">
+                <PropertyItem direction="row">
+                  <PropertyItemLabel>Style</PropertyItemLabel>
+                  <PropertyItemValue>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant={
+                          element.fontWeight === "bold" ? "default" : "outline"
+                        }
+                        size="sm"
+                        onClick={() =>
+                          updateTextElement(trackId, element.id, {
+                            fontWeight:
+                              element.fontWeight === "bold" ? "normal" : "bold",
+                          })
+                        }
+                        className="h-8 px-3 font-bold"
+                      >
+                        B
+                      </Button>
+                      <Button
+                        variant={
+                          element.fontStyle === "italic" ? "default" : "outline"
+                        }
+                        size="sm"
+                        onClick={() =>
+                          updateTextElement(trackId, element.id, {
+                            fontStyle:
+                              element.fontStyle === "italic"
+                                ? "normal"
+                                : "italic",
+                          })
+                        }
+                        className="h-8 px-3 italic"
+                      >
+                        I
+                      </Button>
+                      <Button
+                        variant={
+                          element.textDecoration === "underline"
+                            ? "default"
+                            : "outline"
+                        }
+                        size="sm"
+                        onClick={() =>
+                          updateTextElement(trackId, element.id, {
+                            textDecoration:
+                              element.textDecoration === "underline"
+                                ? "none"
+                                : "underline",
+                          })
+                        }
+                        className="h-8 px-3 underline"
+                      >
+                        U
+                      </Button>
+                      <Button
+                        variant={
+                          element.textDecoration === "line-through"
+                            ? "default"
+                            : "outline"
+                        }
+                        size="sm"
+                        onClick={() =>
+                          updateTextElement(trackId, element.id, {
+                            textDecoration:
+                              element.textDecoration === "line-through"
+                                ? "none"
+                                : "line-through",
+                          })
+                        }
+                        className="h-8 px-3 line-through"
+                      >
+                        S
+                      </Button>
+                    </div>
+                  </PropertyItemValue>
+                </PropertyItem>
+                <PropertyItemLabel>Font size</PropertyItemLabel>
+                <PropertyItemValue>
+                  <div className="flex items-center gap-2">
+                    <Slider
+                      value={[element.fontSize]}
+                      min={8}
+                      max={300}
+                      step={1}
+                      onValueChange={([value]) => {
+                        updateTextElement(trackId, element.id, {
+                          fontSize: value,
+                        });
+                        setFontSizeInput(value.toString());
+                      }}
+                      className="w-full"
+                    />
+                    <Input
+                      type="number"
+                      value={fontSizeInput}
+                      min={8}
+                      max={300}
+                      onChange={(e) => handleFontSizeChange(e.target.value)}
+                      onBlur={handleFontSizeBlur}
+                      className="w-12 !text-xs h-7 rounded-sm text-center
                [appearance:textfield]
                [&::-webkit-outer-spin-button]:appearance-none
                [&::-webkit-inner-spin-button]:appearance-none"
-            />
-          </div>
-        </PropertyItemValue>
-      </PropertyItem>
-      <PropertyItem direction="row">
-        <PropertyItemLabel>Color</PropertyItemLabel>
-        <PropertyItemValue>
-          <Input
-            type="color"
-            value={element.color || "#ffffff"}
-            onChange={(e) => {
-              const color = e.target.value;
-              updateTextElement(trackId, element.id, { color });
-            }}
-            className="w-full cursor-pointer rounded-full"
-          />
-        </PropertyItemValue>
-      </PropertyItem>
-      <PropertyItem direction="column">
-        <div className="flex items-center justify-between">
-          <PropertyItemLabel>Background</PropertyItemLabel>
-          <div className="flex items-center space-x-2">
-            <Switch
-              id="transparent-bg-toggle"
-              checked={element.backgroundColor === "transparent"}
-              onCheckedChange={handleTransparentToggle}
-            />
-            <label htmlFor="transparent-bg-toggle" className="text-sm font-medium">
-              Transparent
-            </label>
-          </div>
-        </div>
-        <PropertyItemValue>
-          <Input
-            type="color"
-            value={
-              element.backgroundColor === "transparent"
-                ? lastSelectedColor.current
-                : element.backgroundColor || "#000000"
-            }
-            onChange={(e) => handleColorChange(e.target.value)}
-            className="w-full cursor-pointer rounded-full"
-            disabled={element.backgroundColor === "transparent"}
-          />
-        </PropertyItemValue>
-      </PropertyItem>
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Opacity</PropertyItemLabel>
-        <PropertyItemValue>
-          <div className="flex items-center gap-2">
-            <Slider
-              value={[element.opacity * 100]}
-              min={0}
-              max={100}
-              step={1}
-              onValueChange={([value]) => {
-                updateTextElement(trackId, element.id, {
-                  opacity: value / 100,
-                });
-                setOpacityInput(value.toString());
-              }}
-              className="w-full"
-            />
-            <Input
-              type="number"
-              value={opacityInput}
-              min={0}
-              max={100}
-              onChange={(e) => handleOpacityChange(e.target.value)}
-              onBlur={handleOpacityBlur}
-              className="w-12 !text-xs h-7 rounded-sm text-center
+                    />
+                  </div>
+                </PropertyItemValue>
+              </PropertyItem>
+              <PropertyItem direction="row">
+                <PropertyItemLabel>Color</PropertyItemLabel>
+                <PropertyItemValue>
+                  <Input
+                    type="color"
+                    value={element.color || "#ffffff"}
+                    onChange={(e) => {
+                      const color = e.target.value;
+                      updateTextElement(trackId, element.id, { color });
+                    }}
+                    className="w-full cursor-pointer rounded-full"
+                  />
+                </PropertyItemValue>
+              </PropertyItem>
+              <PropertyItem direction="column">
+                <PropertyItemLabel>Opacity</PropertyItemLabel>
+                <PropertyItemValue>
+                  <div className="flex items-center gap-2">
+                    <Slider
+                      value={[element.opacity * 100]}
+                      min={0}
+                      max={100}
+                      step={1}
+                      onValueChange={([value]) => {
+                        updateTextElement(trackId, element.id, {
+                          opacity: value / 100,
+                        });
+                        setOpacityInput(value.toString());
+                      }}
+                      className="w-full"
+                    />
+                    <Input
+                      type="number"
+                      value={opacityInput}
+                      min={0}
+                      max={100}
+                      onChange={(e) => handleOpacityChange(e.target.value)}
+                      onBlur={handleOpacityBlur}
+                      className="w-12 !text-xs h-7 rounded-sm text-center
                [appearance:textfield]
                [&::-webkit-outer-spin-button]:appearance-none
                [&::-webkit-inner-spin-button]:appearance-none"
-            />
-          </div>
-        </PropertyItemValue>
-      </PropertyItem>
-    </div>
+                    />
+                  </div>
+                </PropertyItemValue>
+              </PropertyItem>
+              <PropertyItem direction="column">
+                <div className="flex items-center justify-between">
+                  <PropertyItemLabel>Background</PropertyItemLabel>
+                  <div className="flex items-center space-x-2">
+                    <Switch
+                      id="transparent-bg-toggle"
+                      checked={element.backgroundColor === "transparent"}
+                      onCheckedChange={handleTransparentToggle}
+                    />
+                    <label
+                      htmlFor="transparent-bg-toggle"
+                      className="text-sm font-medium"
+                    >
+                      Transparent
+                    </label>
+                  </div>
+                </div>
+                <PropertyItemValue>
+                  <Input
+                    type="color"
+                    value={
+                      element.backgroundColor === "transparent"
+                        ? lastSelectedColor.current
+                        : element.backgroundColor || "#000000"
+                    }
+                    onChange={(e) => handleColorChange(e.target.value)}
+                    className="w-full cursor-pointer rounded-full"
+                    disabled={element.backgroundColor === "transparent"}
+                  />
+                </PropertyItemValue>
+              </PropertyItem>
+            </div>
+          ),
+      }))}
+    />
   );
 }
-- 
cgit v1.3.1


From ebe1b38bdf572b5aa787e21218022f209720b17a Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 27 Aug 2025 11:26:28 +0200
Subject: style: properties panel

---
 .../editor/properties-panel/text-properties.tsx    | 162 ++++++++++-----------
 apps/web/src/components/ui/font-picker.tsx         |   2 +-
 apps/web/src/components/ui/textarea.tsx            |   4 +-
 3 files changed, 85 insertions(+), 83 deletions(-)

(limited to 'apps/web/src/components/editor/properties-panel/text-properties.tsx')

diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index 139c7005..5f0e3706 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -129,14 +129,14 @@ export function TextProperties({
               <Textarea
                 placeholder="Name"
                 defaultValue={element.content}
-                className="min-h-18 resize-none bg-background/50"
+                className="min-h-18 resize-none bg-panel-accent"
                 onChange={(e) =>
                   updateTextElement(trackId, element.id, {
                     content: e.target.value,
                   })
                 }
               />
-              <PropertyItem direction="row">
+              <PropertyItem direction="column">
                 <PropertyItemLabel>Font</PropertyItemLabel>
                 <PropertyItemValue>
                   <FontPicker
@@ -150,83 +150,83 @@ export function TextProperties({
                 </PropertyItemValue>
               </PropertyItem>
               <PropertyItem direction="column">
-                <PropertyItem direction="row">
-                  <PropertyItemLabel>Style</PropertyItemLabel>
-                  <PropertyItemValue>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant={
-                          element.fontWeight === "bold" ? "default" : "outline"
-                        }
-                        size="sm"
-                        onClick={() =>
-                          updateTextElement(trackId, element.id, {
-                            fontWeight:
-                              element.fontWeight === "bold" ? "normal" : "bold",
-                          })
-                        }
-                        className="h-8 px-3 font-bold"
-                      >
-                        B
-                      </Button>
-                      <Button
-                        variant={
-                          element.fontStyle === "italic" ? "default" : "outline"
-                        }
-                        size="sm"
-                        onClick={() =>
-                          updateTextElement(trackId, element.id, {
-                            fontStyle:
-                              element.fontStyle === "italic"
-                                ? "normal"
-                                : "italic",
-                          })
-                        }
-                        className="h-8 px-3 italic"
-                      >
-                        I
-                      </Button>
-                      <Button
-                        variant={
-                          element.textDecoration === "underline"
-                            ? "default"
-                            : "outline"
-                        }
-                        size="sm"
-                        onClick={() =>
-                          updateTextElement(trackId, element.id, {
-                            textDecoration:
-                              element.textDecoration === "underline"
-                                ? "none"
-                                : "underline",
-                          })
-                        }
-                        className="h-8 px-3 underline"
-                      >
-                        U
-                      </Button>
-                      <Button
-                        variant={
-                          element.textDecoration === "line-through"
-                            ? "default"
-                            : "outline"
-                        }
-                        size="sm"
-                        onClick={() =>
-                          updateTextElement(trackId, element.id, {
-                            textDecoration:
-                              element.textDecoration === "line-through"
-                                ? "none"
-                                : "line-through",
-                          })
-                        }
-                        className="h-8 px-3 line-through"
-                      >
-                        S
-                      </Button>
-                    </div>
-                  </PropertyItemValue>
-                </PropertyItem>
+                <PropertyItemLabel>Style</PropertyItemLabel>
+                <PropertyItemValue>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant={
+                        element.fontWeight === "bold" ? "default" : "outline"
+                      }
+                      size="sm"
+                      onClick={() =>
+                        updateTextElement(trackId, element.id, {
+                          fontWeight:
+                            element.fontWeight === "bold" ? "normal" : "bold",
+                        })
+                      }
+                      className="h-8 px-3 font-bold"
+                    >
+                      B
+                    </Button>
+                    <Button
+                      variant={
+                        element.fontStyle === "italic" ? "default" : "outline"
+                      }
+                      size="sm"
+                      onClick={() =>
+                        updateTextElement(trackId, element.id, {
+                          fontStyle:
+                            element.fontStyle === "italic"
+                              ? "normal"
+                              : "italic",
+                        })
+                      }
+                      className="h-8 px-3 italic"
+                    >
+                      I
+                    </Button>
+                    <Button
+                      variant={
+                        element.textDecoration === "underline"
+                          ? "default"
+                          : "outline"
+                      }
+                      size="sm"
+                      onClick={() =>
+                        updateTextElement(trackId, element.id, {
+                          textDecoration:
+                            element.textDecoration === "underline"
+                              ? "none"
+                              : "underline",
+                        })
+                      }
+                      className="h-8 px-3 underline"
+                    >
+                      U
+                    </Button>
+                    <Button
+                      variant={
+                        element.textDecoration === "line-through"
+                          ? "default"
+                          : "outline"
+                      }
+                      size="sm"
+                      onClick={() =>
+                        updateTextElement(trackId, element.id, {
+                          textDecoration:
+                            element.textDecoration === "line-through"
+                              ? "none"
+                              : "line-through",
+                        })
+                      }
+                      className="h-8 px-3 line-through"
+                    >
+                      S
+                    </Button>
+                  </div>
+                </PropertyItemValue>
+              </PropertyItem>
+              <PropertyItem direction="column">
                 <PropertyItemLabel>Font size</PropertyItemLabel>
                 <PropertyItemValue>
                   <div className="flex items-center gap-2">
@@ -250,7 +250,7 @@ export function TextProperties({
                       max={300}
                       onChange={(e) => handleFontSizeChange(e.target.value)}
                       onBlur={handleFontSizeBlur}
-                      className="w-12 !text-xs h-7 rounded-sm text-center
+                      className="w-12 px-2 !text-xs h-7 rounded-sm text-center
                [appearance:textfield]
                [&::-webkit-outer-spin-button]:appearance-none
                [&::-webkit-inner-spin-button]:appearance-none"
@@ -258,7 +258,7 @@ export function TextProperties({
                   </div>
                 </PropertyItemValue>
               </PropertyItem>
-              <PropertyItem direction="row">
+              <PropertyItem direction="column">
                 <PropertyItemLabel>Color</PropertyItemLabel>
                 <PropertyItemValue>
                   <Input
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index 479a5f0c..7bb11274 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -20,7 +20,7 @@ export function FontPicker({
 }: FontPickerProps) {
   return (
     <Select defaultValue={defaultValue} onValueChange={onValueChange}>
-      <SelectTrigger className={`w-full text-xs ${className || ""}`}>
+      <SelectTrigger className={`w-full bg-panel-accent h-8 text-xs ${className || ""}`}>
         <SelectValue placeholder="Select a font" />
       </SelectTrigger>
       <SelectContent>
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index b9004a34..d9ae9ea6 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -9,7 +9,9 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-[60px] w-full rounded-md border bg-accent/50 px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       ref={ref}
-- 
cgit v1.3.1


From f9170dcf09571b617bce9895f9c72efda8544b4c Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 27 Aug 2025 17:23:16 +0200
Subject: style: re-design colors in text properties panel

---
 .../editor/properties-panel/text-properties.tsx    | 101 ++++---
 apps/web/src/components/ui/color-picker.tsx        | 325 +++++++++++++++++++++
 apps/web/src/lib/utils.ts                          |   4 +
 bun.lock                                           |   8 +-
 4 files changed, 400 insertions(+), 38 deletions(-)
 create mode 100644 apps/web/src/components/ui/color-picker.tsx

(limited to 'apps/web/src/components/editor/properties-panel/text-properties.tsx')

diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index 5f0e3706..deaee157 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -6,7 +6,6 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
 import { useState, useRef } from "react";
 import { PanelBaseView } from "@/components/editor/panel-base-view";
 import {
@@ -19,6 +18,14 @@ import {
   PropertyItemLabel,
   PropertyItemValue,
 } from "./property-item";
+import { ColorPicker } from "@/components/ui/color-picker";
+import { cn, uppercase } from "@/lib/utils";
+import { Grid2x2 } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export function TextProperties({
   element,
@@ -29,7 +36,7 @@ export function TextProperties({
 }) {
   const { updateTextElement } = useTimelineStore();
   const { activeTab, setActiveTab } = useTextPropertiesStore();
-
+  const containerRef = useRef<HTMLDivElement>(null);
   // Local state for input values to allow temporary empty/invalid states
   const [fontSizeInput, setFontSizeInput] = useState(
     element.fontSize.toString()
@@ -118,6 +125,7 @@ export function TextProperties({
       onValueChange={(v) => {
         if (isTextPropertiesTab(v)) setActiveTab(v);
       }}
+      ref={containerRef}
       tabs={TEXT_PROPERTIES_TABS.map((t) => ({
         value: t.value,
         label: t.label,
@@ -250,7 +258,7 @@ export function TextProperties({
                       max={300}
                       onChange={(e) => handleFontSizeChange(e.target.value)}
                       onBlur={handleFontSizeBlur}
-                      className="w-12 px-2 !text-xs h-7 rounded-sm text-center
+                      className="w-12 px-2 !text-xs h-7 rounded-sm text-center bg-panel-accent
                [appearance:textfield]
                [&::-webkit-outer-spin-button]:appearance-none
                [&::-webkit-inner-spin-button]:appearance-none"
@@ -261,14 +269,16 @@ export function TextProperties({
               <PropertyItem direction="column">
                 <PropertyItemLabel>Color</PropertyItemLabel>
                 <PropertyItemValue>
-                  <Input
-                    type="color"
-                    value={element.color || "#ffffff"}
-                    onChange={(e) => {
-                      const color = e.target.value;
-                      updateTextElement(trackId, element.id, { color });
+                  <ColorPicker
+                    value={uppercase(
+                      (element.color || "FFFFFF").replace("#", "")
+                    )}
+                    onChange={(color) => {
+                      updateTextElement(trackId, element.id, {
+                        color: `#${color}`,
+                      });
                     }}
-                    className="w-full cursor-pointer rounded-full"
+                    containerRef={containerRef}
                   />
                 </PropertyItemValue>
               </PropertyItem>
@@ -296,7 +306,7 @@ export function TextProperties({
                       max={100}
                       onChange={(e) => handleOpacityChange(e.target.value)}
                       onBlur={handleOpacityBlur}
-                      className="w-12 !text-xs h-7 rounded-sm text-center
+                      className="w-12 !text-xs h-7 rounded-sm text-center bg-panel-accent
                [appearance:textfield]
                [&::-webkit-outer-spin-button]:appearance-none
                [&::-webkit-inner-spin-button]:appearance-none"
@@ -305,34 +315,51 @@ export function TextProperties({
                 </PropertyItemValue>
               </PropertyItem>
               <PropertyItem direction="column">
-                <div className="flex items-center justify-between">
-                  <PropertyItemLabel>Background</PropertyItemLabel>
-                  <div className="flex items-center space-x-2">
-                    <Switch
-                      id="transparent-bg-toggle"
-                      checked={element.backgroundColor === "transparent"}
-                      onCheckedChange={handleTransparentToggle}
+                <PropertyItemLabel>Background</PropertyItemLabel>
+                <PropertyItemValue>
+                  <div className="flex items-center gap-2">
+                    <ColorPicker
+                      value={uppercase(
+                        element.backgroundColor === "transparent"
+                          ? lastSelectedColor.current.replace("#", "")
+                          : (element.backgroundColor || "#000000").replace(
+                              "#",
+                              ""
+                            )
+                      )}
+                      onChange={(color) => handleColorChange(`#${color}`)}
+                      containerRef={containerRef}
+                      className={
+                        element.backgroundColor === "transparent"
+                          ? "opacity-50 pointer-events-none"
+                          : ""
+                      }
                     />
-                    <label
-                      htmlFor="transparent-bg-toggle"
-                      className="text-sm font-medium"
-                    >
-                      Transparent
-                    </label>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          onClick={() =>
+                            handleTransparentToggle(
+                              element.backgroundColor !== "transparent"
+                            )
+                          }
+                          className="size-9 rounded-full bg-panel-accent p-0 overflow-hidden"
+                        >
+                          <Grid2x2
+                            className={cn(
+                              "text-foreground",
+                              element.backgroundColor === "transparent" &&
+                                "text-primary"
+                            )}
+                          />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Transparent background</TooltipContent>
+                    </Tooltip>
                   </div>
-                </div>
-                <PropertyItemValue>
-                  <Input
-                    type="color"
-                    value={
-                      element.backgroundColor === "transparent"
-                        ? lastSelectedColor.current
-                        : element.backgroundColor || "#000000"
-                    }
-                    onChange={(e) => handleColorChange(e.target.value)}
-                    className="w-full cursor-pointer rounded-full"
-                    disabled={element.backgroundColor === "transparent"}
-                  />
                 </PropertyItemValue>
               </PropertyItem>
             </div>
diff --git a/apps/web/src/components/ui/color-picker.tsx b/apps/web/src/components/ui/color-picker.tsx
new file mode 100644
index 00000000..6a309d5a
--- /dev/null
+++ b/apps/web/src/components/ui/color-picker.tsx
@@ -0,0 +1,325 @@
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/utils";
+import { Input } from "./input";
+
+interface ColorPickerProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+  containerRef?: React.RefObject<HTMLDivElement>;
+}
+
+const hexToHsv = (hex: string) => {
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+
+  let h = 0;
+  let s = max === 0 ? 0 : diff / max;
+  let v = max;
+
+  if (diff !== 0) {
+    switch (max) {
+      case r:
+        h = ((g - b) / diff) % 6;
+        break;
+      case g:
+        h = (b - r) / diff + 2;
+        break;
+      case b:
+        h = (r - g) / diff + 4;
+        break;
+    }
+  }
+
+  return [h * 60, s, v];
+};
+
+const hsvToHex = (h: number, s: number, v: number) => {
+  const c = v * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = v - c;
+
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+
+  r = Math.round((r + m) * 255);
+  g = Math.round((g + m) * 255);
+  b = Math.round((b + m) * 255);
+
+  return [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
+};
+
+const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
+  ({ className, value = "FFFFFF", onChange, containerRef, ...props }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [isDragging, setIsDragging] = React.useState<
+      "saturation" | "hue" | null
+    >(null);
+    const [pickerPosition, setPickerPosition] = React.useState({
+      right: 0,
+      bottom: 0,
+    });
+    const pickerRef = React.useRef<HTMLDivElement>(null);
+    const saturationRef = React.useRef<HTMLDivElement>(null);
+    const hueRef = React.useRef<HTMLDivElement>(null);
+    const triggerRef = React.useRef<HTMLDivElement>(null);
+
+    const [h, s, v] = hexToHsv(value);
+
+    React.useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          pickerRef.current &&
+          !pickerRef.current.contains(event.target as Node)
+        ) {
+          setIsOpen(false);
+        }
+      };
+
+      if (isOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+          document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, [isOpen]);
+
+    React.useEffect(() => {
+      const handleMouseMove = (e: MouseEvent) => {
+        if (!isDragging) return;
+
+        if (isDragging === "saturation" && saturationRef.current) {
+          const rect = saturationRef.current.getBoundingClientRect();
+          const x = Math.max(
+            0,
+            Math.min(1, (e.clientX - rect.left) / rect.width)
+          );
+          const y = Math.max(
+            0,
+            Math.min(1, (e.clientY - rect.top) / rect.height)
+          );
+
+          const newS = x;
+          const newV = 1 - y;
+          const newHex = hsvToHex(h, newS, newV);
+          onChange?.(newHex);
+        }
+
+        if (isDragging === "hue" && hueRef.current) {
+          const rect = hueRef.current.getBoundingClientRect();
+          const x = Math.max(
+            0,
+            Math.min(1, (e.clientX - rect.left) / rect.width)
+          );
+          const newH = x * 360;
+          const newHex = hsvToHex(newH, s, v);
+          onChange?.(newHex);
+        }
+      };
+
+      const handleMouseUp = () => {
+        setIsDragging(null);
+      };
+
+      if (isDragging) {
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+          document.removeEventListener("mousemove", handleMouseMove);
+          document.removeEventListener("mouseup", handleMouseUp);
+        };
+      }
+    }, [isDragging, h, s, v, onChange]);
+
+    const handleSaturationMouseDown = (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsDragging("saturation");
+
+      const rect = saturationRef.current!.getBoundingClientRect();
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+      const newS = x;
+      const newV = 1 - y;
+      const newHex = hsvToHex(h, newS, newV);
+      onChange?.(newHex);
+    };
+
+    const handleHueMouseDown = (e: React.MouseEvent) => {
+      setIsDragging("hue");
+
+      const rect = hueRef.current!.getBoundingClientRect();
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const newH = x * 360;
+      const newHex = hsvToHex(newH, s, v);
+      onChange?.(newHex);
+    };
+
+    const [inputValue, setInputValue] = React.useState(value);
+
+    React.useEffect(() => {
+      setInputValue(value);
+    }, [value]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const hex = e.target.value.replace("#", "");
+      setInputValue(hex);
+    };
+
+    const handleInputBlur = () => {
+      onChange?.(inputValue);
+    };
+
+    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        onChange?.(inputValue);
+        e.currentTarget.blur();
+      }
+    };
+
+    const saturationStyle = {
+      background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${h}, 100%, 50%))`,
+    };
+
+    const hueStyle = {
+      background:
+        "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+    };
+
+    return (
+      <div className="relative">
+        <div
+          ref={ref}
+          className={cn(
+            "bg-panel-accent h-9 rounded-full flex items-center gap-2 px-[0.45rem]",
+            className
+          )}
+          {...props}
+        >
+          <div
+            ref={triggerRef}
+            className="size-6 rounded-full cursor-pointer hover:ring-2 hover:ring-white/20 transition-all"
+            style={{ backgroundColor: `#${value}` }}
+            onClick={() => {
+              if (!isOpen && triggerRef.current && containerRef?.current) {
+                const containerRect =
+                  containerRef.current.getBoundingClientRect();
+
+                setPickerPosition({
+                  right: window.innerWidth - containerRect.left - 8,
+                  bottom: window.innerHeight - containerRect.bottom,
+                });
+              }
+              setIsOpen(!isOpen);
+            }}
+          />
+          <div className="flex-1 flex items-center">
+            <Input
+              className="bg-transparent p-0 !ring-0 !ring-offset-0 !border-0 "
+              containerClassName="w-full"
+              value={inputValue}
+              onChange={handleInputChange}
+              onBlur={handleInputBlur}
+              onKeyDown={handleInputKeyDown}
+            />
+          </div>
+        </div>
+
+        {isOpen &&
+          createPortal(
+            <div
+              ref={pickerRef}
+              className="fixed z-50 p-4 bg-popover border border-border rounded-lg shadow-lg select-none"
+              style={{
+                right: pickerPosition.right,
+                bottom: pickerPosition.bottom,
+              }}
+            >
+              <div
+                ref={saturationRef}
+                className="relative w-48 h-32 cursor-crosshair mb-3"
+                style={saturationStyle}
+                onMouseDown={handleSaturationMouseDown}
+              >
+                <ColorCircle
+                  size="sm"
+                  position={{ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }}
+                  color={`#${value}`}
+                />
+              </div>
+
+              <div
+                ref={hueRef}
+                className="relative w-48 h-4 rounded-lg cursor-pointer"
+                style={hueStyle}
+                onMouseDown={handleHueMouseDown}
+              >
+                <ColorCircle
+                  size="md"
+                  position={{ left: `${(h / 360) * 100}%`, top: "50%" }}
+                  color={`#${value}`}
+                />
+              </div>
+            </div>,
+            document.body
+          )}
+      </div>
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+
+const ColorCircle = ({
+  size,
+  position,
+  color,
+}: {
+  size: "sm" | "md";
+  position: { left: string; top: string };
+  color: string;
+}) => (
+  <div
+    className={`absolute border-3 border-accent rounded-full shadow-lg pointer-events-none ${
+      size === "sm" ? "w-3 h-3" : "w-4 h-4"
+    }`}
+    style={{
+      left: position.left,
+      top: position.top,
+      transform: "translate(-50%, -50%)",
+      backgroundColor: color,
+    }}
+  />
+);
+
+export { ColorPicker };
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index 8d2ee03a..42159b2e 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -7,6 +7,10 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+export function uppercase(str: string) {
+  return str.toUpperCase();
+}
+
 /**
  * Generates a UUID v4 string
  * Uses crypto.randomUUID() if available, otherwise falls back to a custom implementation
diff --git a/bun.lock b/bun.lock
index 95f7c874..659110a6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -533,7 +533,7 @@
 
     "@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],
 
-    "@types/bun": ["@types/bun@1.2.19", "", { "dependencies": { "bun-types": "1.2.19" } }, "sha512-d9ZCmrH3CJ2uYKXQIUuZ/pUnTqIvLDS0SK7pFmbx8ma+ziH/FRMoAq5bYpRG7y+w1gl+HgyNZbtqgMq4W4e2Lg=="],
+    "@types/bun": ["@types/bun@1.2.21", "", { "dependencies": { "bun-types": "1.2.21" } }, "sha512-NiDnvEqmbfQ6dmZ3EeUO577s4P5bf4HCTXtI6trMc6f6RzirY5IrF3aIookuSpyslFzrnvv2lmEWv5HyC1X79A=="],
 
     "@types/chai": ["@types/chai@5.2.2", "", { "dependencies": { "@types/deep-eql": "*" } }, "sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg=="],
 
@@ -1257,6 +1257,8 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@types/bun/bun-types": ["bun-types@1.2.21", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-sa2Tj77Ijc/NTLS0/Odjq/qngmEPZfbfnOERi0KRUYhT9R8M4VBioWVmMWE5GrYbKMc+5lVybXygLdibHaqVqw=="],
+
     "better-auth/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
     "motion/framer-motion": ["framer-motion@12.23.6", "", { "dependencies": { "motion-dom": "^12.23.6", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-dsJ389QImVE3lQvM8Mnk99/j8tiZDM/7706PCqvkQ8sSCnpmWxsgX+g0lj7r5OBVL0U36pIecCTBoIWcM2RuKw=="],
@@ -1323,6 +1325,8 @@
 
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ=="],
 
+    "@types/bun/bun-types/@types/node": ["@types/node@24.2.1", "", { "dependencies": { "undici-types": "~7.10.0" } }, "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ=="],
+
     "motion/framer-motion/motion-dom": ["motion-dom@12.23.6", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-G2w6Nw7ZOVSzcQmsdLc0doMe64O/Sbuc2bVAbgMz6oP/6/pRStKRiVRV4bQfHp5AHYAKEGhEdVHTM+R3FDgi5w=="],
 
     "motion/framer-motion/motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="],
@@ -1351,6 +1355,8 @@
 
     "opencut/next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
+    "@types/bun/bun-types/@types/node/undici-types": ["undici-types@7.10.0", "", {}, "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="],
+
     "opencut/next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
   }
 }
-- 
cgit v1.3.1