Fixed original bug associated with loading the images to ensure that the screen renders the images on addition.

color picker ux (#422 )
![image](https://github.com/user-attachments/assets/8544977e-5d4c-4ad6-bfaa-a7bc500a3c83) changes: - active styling and circular preview - if paint brush button is active, hovering over the button will open the color picker automatically and when mouse leaves the picker popover panel, it closes and confirms. Reduces multiple clicks for a better experience.
2026-10-20 17:02:53 -04:00 · 2025-02-23 21:27:01 -05:00 · 2025-02-23 17:58:33 -05:00 · 2025-02-23 02:53:30 -08:00 · 2025-02-23 02:51:59 -08:00 · 2025-02-23 02:51:41 -08:00
39 changed files with 622 additions and 282 deletions
@@ -1,6 +1,5 @@
 import Konva from "konva";

-
 import { uiAccess, uiEvents } from "~/signals";
 import { ShapeNode } from "./Nodes";

@@ -99,7 +98,6 @@ export class Engine {
    this.stage.add(this.nodeIsolationLayer);
    this.stage.add(this.uiLayer);

-
    // Konva Transformer
    this.nodeTransformer = new NodeTransformer();
    this.uiLayer.add(this.nodeTransformer.getKonvaNode());
@@ -120,7 +118,7 @@ export class Engine {
      height: VideoResolutions.SQUARE_1024.height,
      mediaLayerRef: this.mediaLayer,
      bgLayerRef: this.bgLayer,
-      offScreenCanvas: this.offScreenCanvas
+      offScreenCanvas: this.offScreenCanvas,
    });

    // Collection of all Nodes
@@ -180,13 +178,8 @@ export class Engine {
    // hence, lastly, setup these events
    this.setupEventSystem();
    this.setAppMode(AppModes.SELECT);
-
-
-
  }

-
-
  private setAppMode(newAppMode: AppModes) {
    this.appMode = newAppMode;
    switch (this.appMode) {
@@ -368,7 +361,18 @@ export class Engine {

    uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
      await this.realTimeDrawEngine.saveOutput();
+    });

+    uiEvents.toolbarMain.SELECT.onClick(() => {
+      console.log("Toolbar Main >> Select");
+    });
+
+    uiEvents.toolbarMain.PAINT.onClick(() => {
+      console.log("Toolbar Main >> Paint");
+    });
+
+    uiEvents.toolbarMain.ERASER.onClick(() => {
+      console.log("Toolbar Main >> Eraser");
    });

    uiEvents.toolbarMain.PREVIEW.onClick(async () => {
@@ -399,8 +403,6 @@ export class Engine {
      this.addImage(image);
    });

-
-
    uiEvents.onAddTextToEngine((textdata) => {
      this.addText(textdata);
    });
@@ -465,7 +467,7 @@ export class Engine {
        return;
      }
      this.changeNodeColor(nodeColor);
-    })
+    });
  }

  disableAllButtons() {
@@ -501,7 +503,7 @@ export class Engine {
  }

  // Sandbox is quickly a way to test your idea.
-  public async sandbox() { }
+  public async sandbox() {}

  public onMessage(event: MessageEvent) {
    console.log("Message From Shared Worker");
@@ -529,9 +531,9 @@ export class Engine {
      x: 10,
      y: 80,
      text: "",
-      fontSize: 24,
+      fontSize: 18,
      fontFamily: "Source Sans 3",
-      fill: "black",
+      fill: "white",
    });
    const anim = new Konva.Animation((frame) => {
      if (frame && import.meta.env.DEV) {
@@ -549,28 +551,30 @@ export class Engine {
  }

  private changeNodeColor(nodeColor: NodeColor) {
-    console.log('Changing node color:', nodeColor);
+    console.log("Changing node color:", nodeColor);
    // Find the node that is selected with the id
-    const idSelector = '#' + nodeColor.kNodeId;
+    const idSelector = "#" + nodeColor.kNodeId;
    const selectedNode = this.mediaLayer.findOne(idSelector);
-    console.log('Selected node:', selectedNode);
-    console.log('ID selector:', idSelector);
-    console.log('Media layer:', this.mediaLayer);
+    console.log("Selected node:", selectedNode);
+    console.log("ID selector:", idSelector);
+    console.log("Media layer:", this.mediaLayer);
    // TODO: Change the color of the node
    // Turns out shapes are image nodes... how do we change the image's fill??
    if (selectedNode) {
      // Get the shape node from the real time drawing engine's image nodes
-      const shapeNode = this.realTimeDrawEngine.findImageNodeById(nodeColor.kNodeId);
+      const shapeNode = this.realTimeDrawEngine.findImageNodeById(
+        nodeColor.kNodeId,
+      );
      if (shapeNode && shapeNode instanceof ShapeNode) {
        // Create new shape node with updated color
        const newShapeNode = new ShapeNode({
          canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-          canvasSize: this.realTimeDrawEngine.captureCanvas.size(), 
+          canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
          shapeType: shapeNode.shapeType,
          size: shapeNode.size,
          color: nodeColor.color,
          mediaLayerRef: this.mediaLayer,
-          selectionManagerRef: this.selectionManager
+          selectionManagerRef: this.selectionManager,
        });
        newShapeNode.kNode.position(shapeNode.kNode.position());
        newShapeNode.kNode.zIndex(shapeNode.kNode.zIndex());
@@ -601,14 +605,20 @@ export class Engine {
      size: size,
      color: color,
      mediaLayerRef: this.mediaLayer,
-      selectionManagerRef: this.selectionManager
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+    },
    });
    shapeNode.kNode.zIndex(1); // Replace desiredZIndex with a number

    this.commandManager.createNode(shapeNode);
+
+
    console.debug("Added shapenode:", shapeNode);
    console.debug("Added node's ID:", shapeNode.kNode._id);
-    //this.realTimeDrawEngine.addNodes(shapeNode);
+
+    this.realTimeDrawEngine.addNodes(shapeNode);
  }

  public addImage(imageFile: File) {
@@ -618,10 +628,14 @@ export class Engine {
      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
      imageFile: imageFile,
      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+      },
    });
    imageNode.kNode.zIndex(1);
    this.commandManager.createNode(imageNode);
-    //this.realTimeDrawEngine.addNodes(imageNode);
+
+    this.realTimeDrawEngine.addNodes(imageNode);
  }

  public addVideo(
@@ -665,7 +679,7 @@ export class Engine {
          if (
            longestVideoNode === undefined ||
            node.videoComponent.duration >
-            longestVideoNode.videoComponent.duration
+              longestVideoNode.videoComponent.duration
          ) {
            longestVideoNode = node;
          }
@@ -68,7 +68,7 @@ export abstract class BaseNode {
    if (this.kNode instanceof Konva.Group) {
      const wrapperRect = this.kNode.findOne(".wrapper") as Konva.Rect;
      console.log("Wrapper rect:", wrapperRect);
-      if (wrapperRect !=null) {
+      if (wrapperRect != null) {
        wrapperRect.stroke(primaryOrange);
        wrapperRect.strokeWidth(highlightStrokeWidth);
      }
@@ -89,8 +89,8 @@ export abstract class BaseNode {
    }
    if (this.kNode instanceof Konva.Group) {
      const wrapperRect = this.kNode.findOne(".wrapper") as Konva.Rect;
-      console.log("Wrapper rect:", wrapperRect); 
-      if (wrapperRect !=null) {
+      console.log("Wrapper rect:", wrapperRect);
+      if (wrapperRect != null) {
        // Issue investigate
        wrapperRect.strokeWidth(0);
      }
@@ -138,7 +138,7 @@ export abstract class BaseNode {
      // console.log("handle select");
      if (!isMultiSelect) {
        // clear selection if not multislect
-        //console.log("No Shift >> no multiselect");
+        console.log("No Shift >> no multiselect");
        this.selectionManagerRef.clearSelection();
      }
      if (this.selectionManagerRef.isNodeSelected(this)) {
@@ -151,8 +151,25 @@ export abstract class BaseNode {
      }
    };

+    const handleRightClick = () => {
+      this.selectionManagerRef.clearSelection();
+      this.selectionManagerRef.selectNode(this, undefined, true);
+    }
+
+    this.kNode.on("contextmenu", (e) => {
+      console.log("CONTEXT MENU", e);
+      e.evt.preventDefault();
+      handleRightClick();
+    });
+
    this.kNode.on("mousedown", (e) => {
-      // console.log("MOUSE DOWN");
+      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
+      // 3: Right mouse button
+      // If right click, let context event handle it
+      if (e.evt.button === 3) {
+        return;
+      }
+
      // Selection of Node
      if (!this.selectionManagerRef.isNodeSelected(this)) {
        this.isSelecting = true;
@@ -162,7 +179,13 @@ export abstract class BaseNode {
    });

    this.kNode.on("mouseup", (e) => {
-      // console.log("MOUSE UP");
+      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
+      // 3: Right mouse button
+      // If right click, let context event handle it
+      if (e.evt.button === 3) {
+        return;
+      }
+
      // just coming out of dragging or selecting mode
      // no need to handle select
      if (this.selectionManagerRef.isDragging() || this.isSelecting) {
@@ -17,12 +17,13 @@ interface ImageNodeContructor {
  transform?: TransformationData;
  mediaLayerRef: Konva.Layer;
  selectionManagerRef: SelectionManager;
+  loaded: () => Promise<void>;
 }

 export class ImageNode extends NetworkedNode {
  public kNode: Konva.Image;
  public imageSize?: Size;
-
+  private loaded!: () => Promise<void>;
  constructor({
    canvasPosition,
    canvasSize,
@@ -32,6 +33,7 @@ export class ImageNode extends NetworkedNode {
    transform: existingTransform,
    mediaLayerRef,
    selectionManagerRef,
+    loaded,
  }: ImageNodeContructor) {
    // kNodes need to be created first to guaruntee
    // that it is not undefined in parent's context
@@ -53,6 +55,7 @@ export class ImageNode extends NetworkedNode {
      localFile: imageFile,
    });
    this.kNode = kNode;
+    this.loaded = loaded;
    // this.imageSize = minNodeSize;
    this.mediaLayerRef.add(this.kNode);

@@ -108,6 +111,7 @@ export class ImageNode extends NetworkedNode {
      this.listenToBaseKNode();
      this.mediaLayerRef.draw();
      //this.uploadImage(imageFile);
+      this.loaded();
    };
    imageComponent.onerror = () => {
      //this.setProgress({ progress: 0, status: UploadStatus.ERROR_ON_FILE });
@@ -20,10 +20,10 @@ interface ShapeNodeConstructor {
  transform?: TransformationData;
  mediaLayerRef: Konva.Layer;
  selectionManagerRef: SelectionManager;
+  loaded: () => Promise<void>;
 }

 export class ShapeNode extends NetworkedNode {
-  
  retry(): void {
    throw new Error("Method not implemented.");
  }
@@ -36,10 +36,11 @@ export class ShapeNode extends NetworkedNode {
    canvasSize,
    shapeType,
    size,
-    color = "#ff0000", // Default red if no color provided
+    color = "#2D81FF", // Default red if no color provided
    transform: existingTransform,
    mediaLayerRef,
    selectionManagerRef,
+    loaded,
  }: ShapeNodeConstructor) {
    // Create the actual shape inside the group
    const transform = NodeUtilities.getInitialTransform({
@@ -49,7 +50,7 @@ export class ShapeNode extends NetworkedNode {
    });

    let shape = null;
-    
+
    switch (shapeType) {
      case ShapeType.CIRCLE:
        const circleShape = new Konva.Circle({
@@ -72,13 +73,14 @@ export class ShapeNode extends NetworkedNode {
          width: circleShape.width(),
          height: circleShape.height(),
          ...transform,
-          fill: 'transparent',
+          fill: "transparent",
          strokeScaleEnabled: false,
          draggable: true,
        });

        imageObj.onload = () => {
          this.mediaLayerRef.draw();
+          loaded();
        };

        // Clean up the temporary circle
@@ -107,13 +109,14 @@ export class ShapeNode extends NetworkedNode {
          width: squareShape.width(),
          height: squareShape.height(),
          ...transform,
-          fill: 'transparent',
+          fill: "transparent",
          strokeScaleEnabled: false,
          draggable: true,
        });

        squareImageObj.onload = () => {
          this.mediaLayerRef.draw();
+          loaded()
        };

        // Clean up the temporary square
@@ -142,13 +145,14 @@ export class ShapeNode extends NetworkedNode {
          width: triangleShape.width(),
          height: triangleShape.height(),
          ...transform,
-          fill: 'transparent',
+          fill: "transparent",
          strokeScaleEnabled: false,
          draggable: true,
        });

        triangleImageObj.onload = () => {
          this.mediaLayerRef.draw();
+          loaded()
        };

        // Clean up the temporary triangle
@@ -4,12 +4,12 @@ export enum NodeType {
  IMAGE = "image",
  TEXT = "text",
  VIDEO = "video",
-  SHAPE = "shape"
+  SHAPE = "shape",
 }
 export const transparent = Colors.transparent;
 export const primaryOrange = Colors.primaryOrange;

-export const highlightStrokeWidth = 10;
+export const highlightStrokeWidth = 2;
 export const minNodeSize = {
  width: 200,
  height: 200,
@@ -80,7 +80,7 @@ export class SelectionManager {
  public isDisabled() {
    return this.disable;
  }
-  public selectNode(node: MediaNode, doNotDraw?: boolean): boolean {
+  public selectNode(node: MediaNode, doNotDraw?: boolean, showContextMenu = false): boolean {
    if (
      this.disabled || // no-op when disabled
      this.selectedNodes.has(node) || // if the node is already selected
@@ -100,7 +100,11 @@ export class SelectionManager {
    this.selectedNodes.add(node);
    this.updateNodeTransformer();
    this.updateContextComponents();
-    this.showContextComponents();
+
+    console.log("SelectionManager > selectNode > showContextMenu", showContextMenu);
+    if (showContextMenu) {
+      this.showContextComponents();
+    }

    if (!doNotDraw) {
      this.mediaLayerRef.batchDraw();
@@ -189,8 +193,8 @@ export class SelectionManager {
    // done, clear data and show menu
    this.initialPositions.clear();
    this.updateContextComponents();
-    this.showContextComponents();
  }
+
  private getKNodeTransformation(kNode: Konva.Node) {
    return {
      kNodeId: kNode._id,
@@ -40,8 +40,9 @@ export class SelectorSquare {
    stageRef: Konva.Stage;
  }) {
    this.kSquare = new Konva.Rect({
-      fill: "	rgb(250, 128, 114, 0.3)",
-      stroke: "salmon",
+      fill: "rgba(45, 129, 255, 0.3)",
+      stroke: "#00a1ff",
+      strokeWidth: 1,
      visible: false,
      // disable events to not interrupt with events
      listening: false,
@@ -327,6 +327,7 @@ export class RealTimeDrawEngine {
  private handleNodeDragEnd = async () => {
    // Clean up any existing state
    if (this.isProcessing) {
+      console.log("isProcessing Returning")
      return;
    }
    console.log("Node drag ended");
@@ -334,7 +335,7 @@ export class RealTimeDrawEngine {
    await this.render();
  };
  
-  public addNodes(node: MediaNode) {
+  public async addNodes(node: MediaNode) {
   
    if (node instanceof ImageNode || node instanceof TextNode || node instanceof ShapeNode) {
      console.debug("Adding node:", node);
@@ -342,6 +343,7 @@ export class RealTimeDrawEngine {
      console.log(this.imageNodes)
      node.kNode.on("dragend", this.handleNodeDragEnd);
    }
+   
  }

  public removeNodes(node: MediaNode) {
@@ -512,6 +514,7 @@ export class RealTimeDrawEngine {

  public async render() {
    // only pick nodes that intersect wi th the canvas on screen bounds to freeze.
+    
    this.mediaLayerRef.draw();
    // Output all nodes in mediaLayerRef
    const nodes = this.mediaLayerRef.getChildren();
@@ -2,6 +2,8 @@ export enum AppModes {
  INIT = "INIT",
  PREVIEW = "PREVIEW",
  SELECT = "SELECT",
+  PAINT = "PAINT",
+  ERASER = "ERASER",
  RENDERING = "RENDERING",
 }

@@ -14,5 +16,5 @@ export const VideoResolutions = {
 export const Colors = {
  transparent: "rgba(0,0,0,0)",
  translucentBlack: "rgba(0,0,0,0.3)",
-  primaryOrange: "rgba(230,100,98,1)",
+  primaryOrange: "rgba(45, 129, 255, 1)",
 };
@@ -1,22 +1,28 @@
-
 import { useSignalEffect } from "@preact/signals-react";
-import { Slider } from "~/components/ui"
-import { dispatchUiEvents } from "~/signals"
+import { Slider } from "~/components/ui";
+import { dispatchUiEvents } from "~/signals";
 import { promptStrength } from "~/signals/uiEvents/promptSettings";

 export const SignaledPromptSlider = () => {
+  const sliderValue = promptStrength.value;
+  const onSliderValueChanged =
+    dispatchUiEvents.promptSettings.setPromptStrength;

-    const sliderValue = promptStrength.value
-    const onSliderValueChanged = dispatchUiEvents.promptSettings.setPromptStrength
+  // This makes component re-render whenever the signal value changes
+  useSignalEffect(() => {
+    promptStrength.value;
+  });

-    // This makes component re-render whenever the signal value changes
-    useSignalEffect(() => {
-        promptStrength.value;
-    })
-
-    return (
-        <div className="fixed bottom-80 left-1/2 -translate-x-1/2 h-4 w-96">
-            <Slider min={0} max={100} value={sliderValue} onChange={onSliderValueChanged} step={1} />
-        </div>
-    )
-}
+  return (
+    <div className="fixed bottom-[138px] left-1/2 h-4 w-[400px] -translate-x-1/2 shadow-lg">
+      <Slider
+        min={0}
+        max={100}
+        value={sliderValue}
+        onChange={onSliderValueChanged}
+        step={1}
+        innerLabel={`Strength - ${sliderValue}%`}
+      />
+    </div>
+  );
+};
@@ -1,31 +1,17 @@
 import { useSignalEffect } from "@preact/signals-react";
-import { useCallback, useEffect, useRef } from "react";
+import { useRef } from "react";
 import { ResizeType, Textarea } from "~/components/ui";
 import { dispatchUiEvents } from "~/signals";
 import { promptText } from "~/signals/uiEvents/promptSettings";

-export const SignaledPromptText = ({
-}) => {
+export const SignaledPromptText = ({}) => {
  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const focusOnTextArea = useCallback(() => {
-    if (textAreaRef.current === null) {
-      return;
-    }
-    textAreaRef.current.focus();
-  }, []);
-  
-  useEffect(() => {
-    focusOnTextArea();
-  }, []);

  const TextAreaStates = {
-    style: {
-      width: "530px",
-      height: "200px",
-    },
-    placeholder: "",
+    placeholder: "Type your prompt here...",
    label: "",
    resize: "none" as ResizeType,
+    rows: 3,
  };

  const textContent = promptText.value;
@@ -36,11 +22,18 @@ export const SignaledPromptText = ({
  // This makes component re-render whenever the signal value changes
  useSignalEffect(() => {
    promptText.value;
-  })
+  });

  return (
-    <div className="fixed bottom-24 left-1/2 -translate-x-1/2">
-      <Textarea {...TextAreaStates} ref={textAreaRef} onChange={onTextChanged} value={textContent} />
+    <div className="fixed bottom-5 left-1/2 w-[400px] -translate-x-1/2 text-[16px] font-medium shadow-lg">
+      <Textarea
+        className="glass rounded-xl"
+        {...TextAreaStates}
+        ref={textAreaRef}
+        onChange={onTextChanged}
+        value={textContent}
+        spellCheck={false}
+      />
    </div>
  );
 };
@@ -50,6 +50,13 @@ export const SignaledToolbarMain = ({
        return () => dispatchUiEvents.addShapeToEngine({ shape: "triangle" });
      case ToolbarMainButtonNames.ADD_SQUARE:
        return () => dispatchUiEvents.addShapeToEngine({ shape: "square" });
+      case ToolbarMainButtonNames.SELECT:
+      case ToolbarMainButtonNames.ERASER:
+      case ToolbarMainButtonNames.PAINT:
+        return (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          toolbarMain.setMode(buttonName);
+          dispatchers[buttonName](e);
+        };
      default:
        return dispatchers[buttonName];
    }
@@ -76,7 +83,7 @@ export const SignaledToolbarMain = ({
    dispatchers.loadingBarRetry(e);
  };
  return (
-    <div className="fixed bottom-4 left-1/2 -translate-x-1/2">
+    <div className="fixed left-4 top-1/2 -translate-y-1/2">
      <Transition
        as="div"
        className={twMerge(
@@ -4,10 +4,11 @@

@layer base {
  :root {
-    @apply bg-ui-background font-sans text-[#222222];
+    @apply bg-ui-background font-sans text-white;
  }
  .pegboard {
-    background-image: radial-gradient(#3f3f466b 1px, transparent 0);
+    background-image: radial-gradient(#ffffff25 1px, transparent 0);
+    background-color: #1b1b1f;
    background-size: 36px 36px;
    @apply bg-center;
  }
@@ -41,7 +42,24 @@
  }

  input {
-    @apply border-0 px-2 py-1 outline-none -outline-offset-2 focus:outline-primary-500 focus:ring-0;
+    @apply bg-ui-controls border-0 px-2 py-1 outline-none -outline-offset-2 focus:outline-primary-500 focus:ring-0;
+  }
+
+  textarea {
+    @apply bg-ui-controls placeholder:text-white/50;
+
+    /* Webkit scrollbar styles */
+    &::-webkit-scrollbar {
+      @apply w-1;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply rounded-full bg-white/20 hover:bg-white/30;
+    }
  }
 }

@@ -87,6 +105,11 @@
    background-position: 100% 0;
    animation: highlight-sweep 3s infinite linear;
  }
+
+  .glass {
+    @apply relative border border-ui-border shadow-lg backdrop-blur-xl transition-colors duration-300;
+    @apply bg-ui-controls/50 hover:bg-ui-controls/90 !important;
+  }
 }

@keyframes glow {
@@ -8,6 +8,7 @@ import { ToolbarUserProfile } from "~/components/features";
 //Components of the Konva App are all in the KonvaComponent
 import { KonvaRootComponent } from "~/KonvaRootComponent";
 import { ToolbarTopLeft } from "~/components/features/ToolbarTopLeft";
+import { ToolbarTopRight } from "~/components/features/ToolbarTopRight";

 export const Main = withProtectionRoute(() => {
  // This is a hook that will log the number of times the component has rerendered
@@ -25,6 +26,7 @@ export const Main = withProtectionRoute(() => {
      />
      <div className="absolute top-0 flex w-full justify-between px-2">
        <ToolbarTopLeft />
+        <ToolbarTopRight />
        {/* <ToolbarUserProfile /> */}
      </div>
    </div>
@@ -52,7 +52,7 @@ export const DialogAddImage = ({
            "w-full max-w-2xl",
          )}
        >
-          <DialogTitle className="text-3xl font-bold">Upload Image</DialogTitle>
+          <DialogTitle className="text-2xl font-bold">Upload Image</DialogTitle>
          <div className="flex flex-col rounded-lg border-2 border-dashed border-ui-border">
            <FileUploader
              title=""
@@ -73,7 +73,7 @@ export const DialogEditText = ({
    <Dialog open={isOpen} onClose={closeCallback} className="relative z-50">
      <div className={dialogBackgroundStyles}>
        <DialogPanel className={twMerge(paperWrapperStyles, dialogPanelStyles)}>
-          <DialogTitle className="text-3xl font-bold">Edit Text</DialogTitle>
+          <DialogTitle className="text-2xl font-bold">Edit Text</DialogTitle>
          <TextEditor
            text={text}
            formatData={textFormatData}
@@ -24,7 +24,7 @@ export const DragAndDropZone = ({ file, fileTypes }: Props) => {

  // const fileName = file && getFileName(file).toUpperCase();
  const wrapperClassName = twMerge(
-    "group cursor-pointer px-6 py-12 bg-gray-100 hover:bg-gray-200/60 transition-colors duration-150 ease-in-out",
+    "group cursor-pointer px-6 py-12 bg-ui-controls hover:bg-white/25 transition-colors duration-150 ease-in-out rounded-lg",
    !file && "flex flex-col items-center justify-center gap-",
    file && "flex items-center gap-2 py-6",
    // "rounded-lg border-2 border-dashed border-ui-border",
@@ -44,12 +44,12 @@ export const ToolbarButton = ({
  }

  const mergedButtonClasses = twMerge(
-    "rounded-lg py-2 px-3 hover:bg-gray-200/50 transition-all duration-100",
-    children ? "w-fit flex items-center gap-2 text-nowrap" : "size-10",
-    active && "pointer-events-none text-primary ",
+    "rounded-lg hover:bg-white/15 transition-all duration-100 border-2 border-transparent text-white/80 px-2",
+    children ? "w-fit flex items-center gap-2.5 text-nowrap" : "size-10",
+    active && "bg-primary/30 border-2 border-primary hover:bg-primary/30",
    disabled && "pointer-events-none text-secondary-300",
    buttonProps.prominent &&
-      "highlight-button border border-primary-400/30 text-primary-500 hover:bg-primary-100/40 hover:border-primary-400/60",
+      "border border-primary-400/30 text-primary-500 hover:bg-primary-100/40 hover:border-primary-400/60",
    customButtonClassNames,
  );

@@ -57,6 +57,7 @@ export const ToolbarButton = ({
    <button
      className={mergedButtonClasses}
      disabled={disabled}
+      autoFocus={false}
      {...restButtonProps}
      onClick={(e) => {
        e.preventDefault();
@@ -73,7 +74,11 @@ export const ToolbarButton = ({
    </button>
  );
  if (tooltip) {
-    return <Tooltip tip={tooltip}>{Button}</Tooltip>;
+    return (
+      <Tooltip position="right" tip={tooltip}>
+        {Button}
+      </Tooltip>
+    );
  }
  return Button;
 };
@@ -1,29 +1,30 @@
-import { Fragment, MouseEventHandler } from "react";
-import { twMerge } from "tailwind-merge";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
  faArrowRotateLeft,
  faArrowRotateRight,
  faCircle,
+  faEraser,
  faFilePlus,
-  faFilm,
-  faFloppyDisk,
  faImage,
  faLocationArrow,
-  faMagicWandSparkles,
+  faPaintbrush,
  faShapes,
  faSquare,
  faText,
  faTriangle,
 } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { Fragment, MouseEventHandler } from "react";
+import { twMerge } from "tailwind-merge";

 import { ToolbarButton } from "../ToolbarButton";

 // style and constants
 import { paperWrapperStyles, toolTipStyles } from "~/components/styles";
 import { ToolbarMainButtonNames } from "./enum";
-import { ButtonPreviewAndRender } from "./ButtonPreviewAndRender";
+import { dispatchUiEvents, uiEvents } from "~/signals/uiEvents";
+import { paintColor } from "~/signals/uiEvents/toolbarMain/paintMode";
+import { ColorPicker } from "~/components/ui/TextEditor/ColorPicker";

 export const ToolbarMain = ({
  disabled = false,
@@ -42,13 +43,14 @@ export const ToolbarMain = ({
    <>
      <div
        className={twMerge(
-          "flex w-fit items-center divide-x divide-ui-border",
+          "flex h-fit flex-col items-center gap-y-2",
          paperWrapperStyles,
+          "glass",
          disabled &&
-          "pointer-events-none cursor-default bg-ui-border shadow-md",
+            "pointer-events-none cursor-default bg-ui-border shadow-md",
        )}
      >
-        <div className="flex items-center gap-2 pr-2">
+        <div className="flex flex-col items-center gap-2">
          <ToolbarButton
            icon={faLocationArrow}
            iconProps={{ className: "fa-flip-horizontal" }}
@@ -62,62 +64,135 @@ export const ToolbarMain = ({
          />

          <Popover className="relative">
-            <PopoverButton as={Fragment}>
-              <button
-                data-tooltip="Add Shapes"
-                className={twMerge(
-                  "size-10 rounded-lg p-2 hover:bg-gray-200/50",
-                  toolTipStyles,
-                )}
-              >
-                <FontAwesomeIcon icon={faShapes} />
-              </button>
-            </PopoverButton>
-            <PopoverPanel
-              anchor="bottom"
-              className={twMerge(
-                // "absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2",
-                "flex flex-col [--anchor-gap:16px]",
-                paperWrapperStyles,
-              )}
-            >
-              <ToolbarButton icon={faSquare} buttonProps={buttonProps.ADD_SQUARE} />
-              <ToolbarButton icon={faCircle} buttonProps={buttonProps.ADD_CIRCLE} />
-              <ToolbarButton icon={faTriangle} buttonProps={buttonProps.ADD_TRIANGLE} />
-            </PopoverPanel>
+            {({ close }) => (
+              <>
+                <PopoverButton as={Fragment}>
+                  <button
+                    data-tooltip="Add Shapes"
+                    className={twMerge(
+                      "size-10 rounded-lg border-2 border-transparent text-white/80 transition-all duration-100 hover:bg-white/15",
+                      toolTipStyles.base,
+                      toolTipStyles.right,
+                    )}
+                  >
+                    <FontAwesomeIcon icon={faShapes} />
+                  </button>
+                </PopoverButton>
+                <PopoverPanel
+                  anchor="right"
+                  className={twMerge(
+                    "flex flex-row [--anchor-gap:12px]",
+                    paperWrapperStyles,
+                  )}
+                >
+                  <ToolbarButton
+                    icon={faSquare}
+                    buttonProps={{
+                      ...buttonProps.ADD_SQUARE,
+                      onClick: (e) => {
+                        buttonProps.ADD_SQUARE.onClick?.(e);
+                        close();
+                      },
+                    }}
+                  />
+                  <ToolbarButton
+                    icon={faCircle}
+                    buttonProps={{
+                      ...buttonProps.ADD_CIRCLE,
+                      onClick: (e) => {
+                        buttonProps.ADD_CIRCLE.onClick?.(e);
+                        close();
+                      },
+                    }}
+                  />
+                  <ToolbarButton
+                    icon={faTriangle}
+                    buttonProps={{
+                      ...buttonProps.ADD_TRIANGLE,
+                      onClick: (e) => {
+                        buttonProps.ADD_TRIANGLE.onClick?.(e);
+                        close();
+                      },
+                    }}
+                  />
+                </PopoverPanel>
+              </>
+            )}
          </Popover>

          <Popover className="relative">
            <PopoverButton as={Fragment}>
              <button
-                data-tooltip="Add..."
+                data-tooltip="Add Media"
                className={twMerge(
-                  "size-10 rounded-lg p-2 hover:bg-gray-200/50",
-                  toolTipStyles,
+                  "size-10 rounded-lg border-2 border-transparent text-white/80 transition-all duration-100 hover:bg-white/15",
+                  toolTipStyles.base,
+                  toolTipStyles.right,
                )}
              >
                <FontAwesomeIcon icon={faFilePlus} />
              </button>
            </PopoverButton>
            <PopoverPanel
-              anchor="bottom"
+              anchor="right"
              className={twMerge(
                // "absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2",
-                "flex flex-col [--anchor-gap:16px]",
+                "flex [--anchor-gap:12px]",
                paperWrapperStyles,
              )}
            >
              <ToolbarButton icon={faImage} buttonProps={buttonProps.ADD_IMAGE}>
-                Add Image
+                <span className="text-[16px]">Add Image</span>
              </ToolbarButton>
              {/* <ToolbarButton icon={faFilm} buttonProps={buttonProps.ADD_VIDEO}>
                Add Video
              </ToolbarButton> */}
            </PopoverPanel>
          </Popover>
-
        </div>
-        <div className="flex items-center gap-2 pl-2">
+
+        <hr className="w-full border-t border-white/15" />
+
+        <div className="flex flex-col items-center gap-2">
+          <div className="flex flex-col items-center gap-2">
+            {buttonProps.PAINT.active ? (
+              <div className="relative">
+                <ColorPicker
+                  color={paintColor.value}
+                  onChange={dispatchUiEvents.toolbarMain.setPaintColor}
+                  faIcon={faPaintbrush}
+                  borderStyle="border-2  bg-primary/30 border-2 border-primary hover:bg-primary/30 text-white"
+                  showBar={false}
+                  staticIconColor="white"
+                  streamChanges
+                  defaultOpen={true}
+                  anchor="right"
+                  anchorGap={12}
+                  closeOnMouseLeave={true}
+                />
+                <div
+                  className="pointer-events-none absolute -bottom-1.5 -right-1.5 h-[18px] w-[18px] rounded-full border border-gray-400"
+                  style={{ backgroundColor: paintColor.value }}
+                />
+              </div>
+            ) : (
+              <ToolbarButton
+                icon={faPaintbrush}
+                buttonProps={buttonProps.PAINT}
+                tooltip="Paint Brush"
+              />
+            )}
+            <ToolbarButton
+              icon={faEraser}
+              buttonProps={buttonProps.ERASER}
+              tooltip="Eraser"
+            />
+          </div>
+        </div>
+
+        <hr className="w-full border-t border-white/15" />
+
+        <div className="flex flex-col items-center gap-2">
          <ToolbarButton
            icon={faArrowRotateLeft}
            buttonProps={buttonProps.UNDO}
@@ -128,15 +203,11 @@ export const ToolbarMain = ({
            buttonProps={buttonProps.REDO}
            tooltip="Redo"
          />
-          <ToolbarButton
+          {/* <ToolbarButton
            icon={faFloppyDisk}
            buttonProps={buttonProps.SAVE}
            tooltip="Save"
-          />
-          <ButtonPreviewAndRender
-            buttonPreviewProps={buttonProps.PREVIEW}
-            buttonRenderProps={buttonProps.DOWNLOAD}
-          />
+          /> */}
        </div>
      </div>
    </>
@@ -7,6 +7,8 @@ export enum ToolbarMainButtonNames {
  ADD_CIRCLE = "ADD_CIRCLE",
  ADD_TRIANGLE = "ADD_TRIANGLE",
  ADD_SQUARE = "ADD_SQUARE",
+  PAINT = "PAINT",
+  ERASER = "ERASER",
  AI_STYLIZE = "AI_STYLIZE",
  UNDO = "UNDO",
  REDO = "REDO",
@@ -54,7 +54,7 @@ export const ToolbarNode = ({
      className={twMerge(
        paperWrapperStyles,
        disabled && "pointer-events-none cursor-default bg-ui-border shadow-md",
-        "flex gap-2 transition",
+        "flex flex-col gap-2 transition",
      )}
    >
      <ToolbarButton
@@ -1,28 +1,27 @@
 import { twMerge } from "tailwind-merge";

-import { paperWrapperStyles } from "~/components/styles";
-import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
-import { ToolbarButton } from "~/components/features/ToolbarButton";
+// import { paperWrapperStyles } from "~/components/styles";
+// import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
+// import { ToolbarButton } from "~/components/features/ToolbarButton";

 export const ToolbarTopLeft = () => {
  return (
    <div
      className={twMerge(
-        paperWrapperStyles,
        "z-20 mt-2 flex h-fit w-fit items-center gap-1 py-2.5 pl-4",
      )}
    >
      <img
-        src="/brand/Storyteller-Logo-Black.png"
+        src="/brand/mira-logo.png"
        alt="logo"
-        className="mr-4 h-8"
+        className="h-[30px] select-none pb-1"
      />
-      <ToolbarButton icon={faPlus}>
+      {/* <ToolbarButton icon={faPlus}>
        <span className="font-semibold">New Board</span>
      </ToolbarButton>
      <ToolbarButton icon={faQuestion}>
        <span className="font-semibold">Help</span>
-      </ToolbarButton>
+      </ToolbarButton> */}
    </div>
  );
 };
@@ -0,0 +1,31 @@
+import { faSave } from "@fortawesome/pro-solid-svg-icons";
+import { twMerge } from "tailwind-merge";
+import { Button } from "~/components/ui/Button";
+import { toolbarMain } from "~/signals/uiAccess/toolbarMain";
+import { dispatchers } from "~/signals/uiEvents/toolbarMain";
+import { ToolbarMainButtonNames } from "../ToolbarMain/enum";
+
+// import { paperWrapperStyles } from "~/components/styles";
+// import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
+// import { ToolbarButton } from "~/components/features/ToolbarButton";
+
+export const ToolbarTopRight = () => {
+  const saveButtonState =
+    toolbarMain.signal.value.buttonStates[ToolbarMainButtonNames.SAVE];
+
+  return (
+    <div
+      className={twMerge(
+        "z-20 mt-2 flex h-fit w-fit items-center gap-1 p-4 py-2.5",
+      )}
+    >
+      <Button
+        icon={faSave}
+        onClick={dispatchers[ToolbarMainButtonNames.SAVE]}
+        disabled={saveButtonState?.disabled}
+      >
+        Save Image
+      </Button>
+    </div>
+  );
+};
@@ -1,26 +1,35 @@
 import { twMerge } from "tailwind-merge";

 export const paperWrapperStyles =
-  "rounded-xl border border-ui-border bg-ui-panel p-2 shadow-lg";
+  "rounded-xl border border-ui-border p-1.5 shadow-lg bg-ui-panel";

 export const transitionTimingStyles = "transition duration-150 ease-in-out";

 export const dialogBackgroundStyles =
  "fixed inset-0 flex w-screen items-center justify-center bg-black/50";

-export const toolTipStyles = twMerge(
-  "relative",
-  "before:w-0 before:h-0 before:absolute",
-  "before:left-1/2 before:bottom-full before:mb-[1px] before:-translate-x-1/2 before:z-50",
-  "before:border-l-8 before:border-l-transparent",
-  "before:border-r-8 before:border-r-transparent",
-  "before:border-t-8 before:border-t-white",
-  "after:absolute after:left-1/2 after:bottom-full after:-translate-x-1/2 after:z-40",
-  "after:content-[attr(data-tooltip)] after:text-black after:text-nowrap",
-  "after:rounded-lg after:border after:border-ui-border after:bg-ui-panel after:px-2.5 after:py-1.5 after:mb-2 after:shadow-xl",
-  "after:hidden before:hidden hover:after:block hover:before:block",
-);
+export const toolTipStyles = {
+  base: twMerge(
+    "relative",
+    "after:absolute after:z-40",
+    "after:content-[attr(data-tooltip)] after:text-black after:text-nowrap after:text-sm after:font-medium after:text-white/80 after:glass",
+    "after:rounded-lg after:border after:border-ui-border after:bg-ui-panel after:px-2.5 after:py-1 after:shadow-xl",
+    "after:hidden hover:after:block",
+  ),
+  top: twMerge(
+    "after:left-1/2 after:bottom-full after:-translate-x-1/2 after:mb-3.5",
+  ),
+  bottom: twMerge(
+    "after:left-1/2 after:top-full after:-translate-x-1/2 after:mt-3.5",
+  ),
+  left: twMerge(
+    "after:top-1/2 after:right-full after:-translate-y-1/2 after:mr-3.5",
+  ),
+  right: twMerge(
+    "after:top-1/2 after:left-full after:-translate-y-1/2 after:ml-3.5",
+  ),
+};

 export const dialogPanelStyles = twMerge(
-  "flex max-w-5xl flex-col justify-between gap-4 p-6",
+  "flex max-w-5xl flex-col justify-between gap-4 p-6 bg-[#1C1C20]",
 );
@@ -31,14 +31,14 @@ export const Button = ({
        return "bg-tertiary hover:bg-tertiary-400 text-white focus-visible:outline-tertiary-600";
      }
      case "secondary": {
-        return "bg-gray-600 hover:bg-gray-500 text-white focus-visible:outline-secondary";
+        return "bg-ui-controls hover:bg-ui-controls/80 text-white focus-visible:outline-secondary";
      }
      case "action": {
        return " bg-action hover:bg-action-500 text-white focus-visible:outline-action";
      }
      case "primary":
      default: {
-        return "bg-primary hover:bg-primary-400 text-white focus-visible:outline-primary-600";
+        return "bg-primary hover:bg-primary-600 text-white focus-visible:outline-primary-600";
      }
    }
  }
@@ -29,25 +29,25 @@ export const Combobox = ({ options, value, onChange }: ComboBoxInterface) => {
      onChange={onChange}
      onClose={() => setQuery("")}
    >
-      <div className="relative flex h-10 rounded-md border">
+      <div className="relative flex h-10 rounded-md border border-ui-border">
        <ComboboxInput
-          className="rounded-md"
+          className="rounded-lg px-3"
          displayValue={(font: string) => font}
          onChange={(event) => setQuery(event.target.value)}
        />
-        <ComboboxButton className="absolute right-0 top-0 flex h-10 items-center justify-center hover:text-primary">
-          <FontAwesomeIcon icon={faChevronDown} className="size-4 p-2" />
+        <ComboboxButton className="absolute right-0 top-0 flex h-10 items-center justify-center px-3 transition-colors duration-300 hover:text-primary">
+          <FontAwesomeIcon icon={faChevronDown} className="size-4" />
        </ComboboxButton>
      </div>
      <ComboboxOptions
        anchor="bottom"
-        className="mt-1 w-[var(--input-width)] rounded-lg border empty:invisible"
+        className="mt-1 w-[var(--input-width)] rounded-lg border border-ui-border empty:invisible"
      >
        {filteredOptions.map((option, idx) => (
          <ComboboxOption
            key={idx}
            value={option}
-            className="cursor-pointer bg-white p-2 data-[focus]:bg-primary-200 data-[selected]:font-medium"
+            className="bg-ui-controls cursor-pointer px-3 py-2 data-[focus]:bg-gray-600 data-[selected]:font-medium"
          >
            {option}
          </ComboboxOption>
@@ -12,6 +12,7 @@ interface SliderProps {
  showTooltip?: boolean;
  tooltipContent?: ReactNode;
  suffix?: string;
+  innerLabel?: string;
 }

 export const Slider = ({
@@ -24,6 +25,7 @@ export const Slider = ({
  showTooltip,
  tooltipContent,
  suffix,
+  innerLabel,
 }: SliderProps) => {
  const [localValue, setLocalValue] = useState(value);
  const sliderRef = useRef<HTMLDivElement>(null);
@@ -88,25 +90,40 @@ export const Slider = ({
    <div
      ref={sliderRef}
      className={twMerge(
-        "relative h-2.5 w-full cursor-pointer rounded-full bg-gray-500",
+        "glass group relative h-7 w-full cursor-pointer overflow-hidden rounded-lg border border-ui-border",
+        isDragging && "!bg-ui-controls/90",
        className,
      )}
      onMouseDown={handleMouseDown}
    >
-      <div
-        className="absolute h-2.5 rounded-full bg-primary"
-        style={{ width: `${percentage}%` }}
-      ></div>
      <div
        className={twMerge(
-          "absolute -top-1 h-[18px] w-[18px] -translate-x-1/2 transform rounded-full bg-gray-200 transition-colors",
-          isDragging ? "bg-white" : "bg-gray-300 hover:bg-white",
+          "absolute h-7 bg-primary/30 transition-colors duration-300 group-hover:bg-primary/50",
+          isDragging && "!bg-primary/50",
        )}
-        style={{ left: `${percentage}%` }}
-        onMouseDown={handleMouseDown}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      />
+        style={{ width: `${percentage}%` }}
+      >
+        {innerLabel && (
+          <span
+            className={twMerge(
+              "absolute top-1/2 ml-2.5 -translate-y-1/2 text-nowrap text-sm font-medium text-white/60 transition-colors duration-300 group-hover:text-white",
+              isDragging && "!text-white",
+            )}
+          >
+            {innerLabel}
+          </span>
+        )}
+        <div
+          className={twMerge(
+            "absolute right-0 top-1/2 mr-1.5 h-3.5 w-0.5 -translate-y-1/2",
+            isDragging ? "bg-white" : "bg-white/50",
+          )}
+          onMouseDown={handleMouseDown}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        />
+      </div>
+
      {showTooltip && (
        <Transition
          as={"div"}
@@ -15,7 +15,7 @@ const resizeStyles = {
  horizontal: "resize-x",
  vertical: "resize-y",
  undefined: "",
-}
+};

 export interface TextareaInterface
  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -27,7 +27,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaInterface>(
    { className, label, resize = "vertical", id, ...rest }: TextareaInterface,
    ref,
  ) => {
-
    const resizeStyle = resizeStyles[resize];

    return (
@@ -38,17 +37,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaInterface>(
          ref={ref}
          id={id ? id : label ? kebabCase(label) : undefined}
          className={twMerge(
-            "border-ui-panel-border bg-ui-controls rounded-lg border px-3 py-2",
+            "rounded-lg border border-ui-border px-4 py-2.5 text-white outline-none focus:outline-none",
            className,
            resizeStyle,
          )}
          style={{
            outline: "2px solid transparent",
-            transition: "outline-color 0.15s ease-in-out",
          }}
          onFocus={(e) => {
            // disableHotkeyInput(DomLevels.INPUT);
-            e.currentTarget.style.outlineColor = "#e66462";
+            e.currentTarget.style.outlineColor = "#2d81ff";
          }}
          onBlur={(e) => {
            // enableHotkeyInput(DomLevels.INPUT);
@@ -1,6 +1,6 @@
 import {
  faAlignCenter,
-  faAlignJustify,
+  // faAlignJustify,
  faAlignLeft,
  faAlignRight,
 } from "@fortawesome/pro-solid-svg-icons";
@@ -1,6 +1,10 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useState, useEffect } from "react";
 import { twMerge } from "tailwind-merge";
-import { faFont, faHashtag, IconDefinition } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faFont,
+  faHashtag,
+  IconDefinition,
+} from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { HexColorPicker } from "react-colorful";
@@ -13,15 +17,30 @@ export const ColorPicker = ({
  color: prevColor,
  onChange,
  faIcon = faFont,
-  borderStyle = "border",
+  borderStyle,
  showBar = true,
+  anchor = "bottom",
+  anchorGap = 0,
+  fillBg = false,
+  staticIconColor,
+  streamChanges = false,
+  defaultOpen = false,
+  closeOnMouseLeave = false,
 }: {
  color: string;
  onChange: (newColor: string) => void;
  faIcon?: IconDefinition;
  borderStyle?: string;
  showBar?: boolean;
+  anchor?: "top" | "right" | "bottom" | "left";
+  anchorGap?: number;
+  fillBg?: boolean;
+  staticIconColor?: string;
+  streamChanges?: boolean;
+  defaultOpen?: boolean;
+  closeOnMouseLeave?: boolean;
 }) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
  const [{ currColor, textInput }, setStates] = useState<{
    currColor: string;
    textInput: string;
@@ -30,13 +49,18 @@ export const ColorPicker = ({
    textInput: prevColor.substring(1),
  });

-  const handleSelectColor = (newColor: string) => {
-    setStates({ currColor: newColor, textInput: newColor.substring(1) });
-  };
-  const isHexColorCode = (color: string) => {
-    const hexColorRegex = /^(?:[0-9a-fA-F]{3}){1,2}$/;
-    return hexColorRegex.test(color);
+  useEffect(() => {
+    setIsOpen(defaultOpen);
+  }, [defaultOpen]);
+
+  const handleMouseLeave = (close: () => void) => {
+    if (closeOnMouseLeave) {
+      onChange(currColor);
+      setIsOpen(false);
+      close();
+    }
  };
+
  const handleTextInput = (e: ChangeEvent<HTMLInputElement>) => {
    if (isHexColorCode(e.target.value)) {
      setStates({
@@ -51,58 +75,100 @@ export const ColorPicker = ({
    }
  };

+  const isHexColorCode = (color: string) => {
+    const hexColorRegex = /^(?:[0-9a-fA-F]{3}){1,2}$/;
+    return hexColorRegex.test(color);
+  };
+
  return (
    <Popover className="relative">
-      <PopoverButton className={twMerge(
-        "flex size-10 flex-col items-center gap-1 rounded-md p-2",
-        borderStyle
-      )}>
-        <FontAwesomeIcon icon={faIcon} color={prevColor} />
-        {showBar && <span className="h-1 w-full" style={{ backgroundColor: prevColor }} />}
-      </PopoverButton>
-      <PopoverPanel
-        anchor="bottom"
-        className={twMerge(
-          paperWrapperStyles,
-          "flex flex-col items-center gap-2",
-        )}
-      >
-        {({ close }) => {
-          return (
-            <>
-              <HexColorPicker color={currColor} onChange={handleSelectColor} />
-              <Input
-                style={{ width: "198px" }}
-                icon={faHashtag}
-                value={textInput}
-                onChange={handleTextInput}
+      {({ open, close }) => (
+        <>
+          <PopoverButton
+            className={twMerge(
+              "flex size-10 items-center gap-1 rounded-lg bg-ui-controls p-2",
+              borderStyle,
+              showBar ? "flex-col" : "justify-center",
+            )}
+            style={fillBg ? { backgroundColor: prevColor } : {}}
+            onMouseEnter={() => defaultOpen && setIsOpen(true)}
+          >
+            <FontAwesomeIcon
+              icon={faIcon}
+              color={staticIconColor ?? (fillBg ? undefined : prevColor)}
+            />
+            {showBar && (
+              <span
+                className="h-1 w-full"
+                style={{ backgroundColor: prevColor }}
              />
-              <div className="flex w-full justify-center gap-2">
-                <Button
-                  variant="secondary"
-                  onClick={() => {
+            )}
+          </PopoverButton>
+          {(open || isOpen) && (
+            <div onMouseLeave={() => handleMouseLeave(close)}>
+              <PopoverPanel
+                anchor={anchor}
+                className={twMerge(
+                  paperWrapperStyles,
+                  "flex flex-col items-center gap-2 overflow-hidden",
+                )}
+                style={
+                  {
+                    "--anchor-gap": `${anchorGap}px`,
+                  } as React.CSSProperties
+                }
+                static
+              >
+                <HexColorPicker
+                  className="overflow-hidden"
+                  color={currColor}
+                  onChange={(color) => {
                    setStates({
-                      currColor: prevColor,
-                      textInput: prevColor.substring(1),
+                      currColor: color,
+                      textInput: color.substring(1),
                    });
-                    close();
+                    if (streamChanges) {
+                      onChange(color);
+                    }
                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  onClick={() => {
-                    onChange(currColor);
-                    close();
-                  }}
-                >
-                  OK
-                </Button>
-              </div>
-            </>
-          );
-        }}
-      </PopoverPanel>
+                />
+                <Input
+                  style={{ width: "198px" }}
+                  icon={faHashtag}
+                  value={textInput}
+                  onChange={handleTextInput}
+                />
+                {!closeOnMouseLeave && (
+                  <div className="flex w-full justify-center gap-2">
+                    <Button
+                      variant="secondary"
+                      onClick={() => {
+                        setStates({
+                          currColor: prevColor,
+                          textInput: prevColor.substring(1),
+                        });
+                        setIsOpen(false);
+                        close();
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        onChange(currColor);
+                        setIsOpen(false);
+                        close();
+                      }}
+                    >
+                      OK
+                    </Button>
+                  </div>
+                )}
+              </PopoverPanel>
+            </div>
+          )}
+        </>
+      )}
    </Popover>
  );
 };
@@ -151,7 +151,11 @@ export const TextEditor = ({
          onChangeTextDecoration={onChangeTextDecoration}
        />
      </div>
-      <Textarea {...unionedTextAreaProps} ref={textAreaRef} />
+      <Textarea
+        className="bg-white"
+        {...unionedTextAreaProps}
+        ref={textAreaRef}
+      />
    </div>
  );
 };
@@ -1,4 +1,4 @@
 export const buttonGroupButton =
-  "size-10 rounded-none bg-white text-black hover:bg-gray-200 data-[selected=true]:text-primary-400 disabled:hover:bg-transparent disabled:text-gray-400";
+  "size-10 rounded-none bg-ui-controls text-white/80 hover:bg-white/30 data-[selected=true]:text-white data-[selected=true]:bg-primary/30 disabled:hover:bg-transparent disabled:text-gray-400 border border-ui-border";
 export const buttonGroupGrouper =
-  "flex divide-x overflow-hidden rounded-md border";
+  "flex divide-x overflow-hidden rounded-md border border-ui-border";
@@ -7,15 +7,18 @@ export const Tooltip = ({
  tip,
  children,
  forceShow,
+  position = "top",
 }: {
  tip: string;
  children: ReactElement<any, string | JSXElementConstructor<any>>;
  forceShow?: boolean;
+  position?: "top" | "bottom" | "left" | "right";
 }) => {
  const clonedChildren = cloneElement(children, {
    "data-tooltip": tip,
    className: twMerge(
-      toolTipStyles,
+      toolTipStyles.base,
+      toolTipStyles[position],
      forceShow && "after:block before:block",
      children.props.className,
    ),
@@ -1,5 +1,6 @@
 import { signal } from "@preact/signals-react";
 import { ToolbarMainButtonNames } from "~/components/features/ToolbarMain/enum";
+import { isToolbarMode } from "~/signals/uiEvents/toolbarMain/toolbarMain";

 interface ToolbarMainSignalInterface {
  disabled: boolean;
@@ -42,6 +43,17 @@ export const toolbarMain = {
      },
    };
  },
+
+  setMode(mode: ToolbarMainButtonNames) {
+    if (!isToolbarMode(mode)) {
+      return;
+    }
+
+    this.changeButtonState(ToolbarMainButtonNames.SELECT, { active: false });
+    this.changeButtonState(ToolbarMainButtonNames.ERASER, { active: false });
+    this.changeButtonState(ToolbarMainButtonNames.PAINT, { active: false });
+    this.changeButtonState(mode, { active: true });
+  }
 };

 function initButtonStates() {
@@ -3,11 +3,14 @@ import {
  loadingBarRetryDispatch,
  loadingBarRetryEventHandler,
 } from "./loadingBar";
+import { onPaintColorChanged, setPaintColor } from "./paintMode";
 export const dispatchers = {
  ...buttonDispatchers,
  loadingBarRetry: loadingBarRetryDispatch,
+  setPaintColor,
 };
 export const eventsHandlers = {
  ...buttonEventsHandlers,
  loadingBarRetry: loadingBarRetryEventHandler,
+  onPaintColorChanged
 };
@@ -0,0 +1,19 @@
+// Prompt settings
+// - Prompt text
+
+import { effect, signal } from "@preact/signals-react";
+
+// - Prompt strength
+export const DEFAULT_PAINT_COLOR: string = "#ff0000";
+export const paintColor = signal<string>(DEFAULT_PAINT_COLOR);
+export const setPaintColor = (data: string) => {
+  paintColor.value = data;
+};
+
+export const onPaintColorChanged = (callback: (data: string) => void) => {
+  effect(() => {
+    if (paintColor.value) {
+      callback(paintColor.value);
+    }
+  });
+};
@@ -2,6 +2,7 @@ import { MouseEventHandler } from "react";
 import { signal, effect, Signal } from "@preact/signals-react";

 import { ToolbarMainButtonNames } from "~/components/features/ToolbarMain/enum";
+import { AppModes } from "~/KonvaApp/constants";

 const events = Object.values(ToolbarMainButtonNames).reduce(
  (acc, buttonName) => {
@@ -25,22 +26,35 @@ const effectsCleanups = Object.values(ToolbarMainButtonNames).reduce(
    [key in ToolbarMainButtonNames]: (() => void) | undefined;
  },
 );
+
+export const isToolbarMode = (buttonName: ToolbarMainButtonNames) => {
+  return appModeMap[buttonName] !== undefined;
+}
+
+export const appModeMap: Record<string, AppModes> = {
+  [ToolbarMainButtonNames.SELECT]: AppModes.SELECT,
+  [ToolbarMainButtonNames.ERASER]: AppModes.ERASER,
+  [ToolbarMainButtonNames.PAINT]: AppModes.PAINT,
+}
+
+const defaultHandler = (buttonName: ToolbarMainButtonNames, callback: MouseEventHandler<HTMLButtonElement>) => {
+  if (effectsCleanups[buttonName]) {
+    effectsCleanups[buttonName]();
+  }
+  effectsCleanups[buttonName] = effect(() => {
+    if (events[buttonName].value) {
+      callback(events[buttonName].value);
+      events[buttonName].value = undefined;
+    }
+  });
+}
+
 export const buttonEventsHandlers = Object.values(
  ToolbarMainButtonNames,
 ).reduce(
  (acc, buttonName) => {
    acc[buttonName] = {
-      onClick: (callback: MouseEventHandler<HTMLButtonElement>) => {
-        if (effectsCleanups[buttonName]) {
-          effectsCleanups[buttonName]();
-        }
-        effectsCleanups[buttonName] = effect(() => {
-          if (events[buttonName].value) {
-            callback(events[buttonName].value);
-            events[buttonName].value = undefined;
-          }
-        });
-      },
+      onClick: (callback: MouseEventHandler<HTMLButtonElement>) => { defaultHandler(buttonName, callback) },
    };
    return acc;
  },
@@ -44,14 +44,15 @@ export default {
      info: colors.sky[500],

      // brand colors
-      primary: storytellerColors.sunglo,
+      primary: storytellerColors.azureRadiance,
      secondary: storytellerColors.gunpowder,
      tertiary: storytellerColors.aquamarineBlue,

      ui: {
-        background: colors.zinc[100],
-        panel: colors.white,
-        border: colors.zinc[200],
+        background: "#101014",
+        panel: "#3E3E41",
+        border: "#FFFFFF0D",
+        controls: "#3E3E41",
      },
    },
    backgroundImage: {
@@ -1,19 +1,19 @@
 export const storytellerColors = {
-  sunglo: {
-    //sunglo
-    DEFAULT: "#e66462", //=500
-    50: "#fdf3f3",
-    100: "#fce4e4",
-    200: "#facfce",
-    300: "#f6acab",
-    400: "#ef7c7a",
-    500: "#e66462",
-    600: "#cf3533",
-    700: "#ae2927",
-    800: "#902624",
-    900: "#782524",
-    950: "#410f0e",
+  azureRadiance: {
+    DEFAULT: "#2d81ff", //=500
+    50: "#eef6ff",
+    100: "#d9ebff",
+    200: "#bcdcff",
+    300: "#8ec7ff",
+    400: "#59a7ff",
+    500: "#2d81ff",
+    600: "#1b63f5",
+    700: "#144ee1",
+    800: "#173fb6",
+    900: "#19398f",
+    950: "#142457",
  },
+
  gunpowder: {
    DEFAULT: "#39394c", //=950
    50: "#f5f6f9",
Author	SHA1	Message	Date
CrossPr0duct	3b4afd5f67	Fixed original bug associated with loading the images to ensure that the screen renders the images on addition.	2025-02-23 21:27:01 -05:00
BFlat	a6489b3252	color picker ux (#422 ) ![image](https://github.com/user-attachments/assets/8544977e-5d4c-4ad6-bfaa-a7bc500a3c83) changes: - active styling and circular preview - if paint brush button is active, hovering over the button will open the color picker automatically and when mouse leaves the picker popover panel, it closes and confirms. Reduces multiple clicks for a better experience.	2025-02-23 17:58:33 -05:00
Tanish Manku	bbcd64fab4	Hack: Conditionally show color picker button based on mode This needs further design review. Ideally I'd write a proper separate component that handles the mode selection as well as color picker/hover logic but we're moving fast.	2025-02-23 02:53:30 -08:00
Tanish Manku	7f2a082027	Modify ColorPicker to fit toolbar style with props	2025-02-23 02:51:59 -08:00
Tanish Manku	67a5ea44c1	Add paint color signal events	2025-02-23 02:51:41 -08:00
Tanish Manku	54261d86da	Make context menu vertical	2025-02-23 01:41:28 -08:00
Tanish Manku	ae71762044	Make context menu only appear on right-click	2025-02-23 01:41:15 -08:00
BFlat	20fd9006fe	everything restyled (#421 ) everything restyled: - prompt box - new slider - color scheme/theme - moved save button to top right of screen	2025-02-22 15:04:04 +07:00
Tanish Manku	95c4293fe8	Engine: Add placeholder event listeners for modes	2025-02-21 17:05:28 -08:00
Tanish Manku	737edda502	Setup select, paint and eraser modes	2025-02-21 17:04:03 -08:00
Tanish Manku	d7092e9492	Replace dividers with rule tags for symmetry	2025-02-21 15:54:51 -08:00
Tanish Manku	c121d1ac8c	Add paint button to main toolbar	2025-02-21 15:54:35 -08:00
Tanish Manku	40ceb2e08b	Add an Eraser button to Toolbar	2025-02-21 15:49:03 -08:00
Tanish Manku	fb2ec6baa4	Make main toolbar appear on the left	2025-02-21 15:39:09 -08:00