onlook-dev · Kitenite · Apr 23, 2025
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx
@@ -20,7 +20,7 @@ export const Border = () => {
     const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange } = useBoxControl('border');
     const editorEngine = useEditorEngine();
 
-    const [borderColor, setBorderColor] = useState(Color.from(editorEngine.style.getValue('borderColor') ?? '#080808').toHex());
+    const [borderColor, setBorderColor] = useState(Color.from(editorEngine.style.selectedStyle?.styles.borderColor ?? '#080808').toHex());
 
     useEffect(() => {
         setBorderColor(Color.from(editorEngine.style.getValue('borderColor') ?? '#080808').toHex());
@@ -32,7 +32,7 @@ export const Border = () => {
     };
 
     const borderStyle = {
-        borderWidth: boxState.border.num ? `1px`: '0px',
+        borderWidth: boxState.border.num ? `1px` : '0px',
         borderStyle: 'solid',
     };
 
@@ -46,10 +46,10 @@ export const Border = () => {
                     <Icons.BorderEdit className="h-4 w-4 min-h-4 min-w-4" />
                     <span className="text-sm">{boxState.border.value}</span>
 
-                    <div 
-                            className="w-5 h-5 rounded-md"
-                            style={borderStyle}
-                        />
+                    <div
+                        className="w-5 h-5 rounded-md"
+                        style={borderStyle}
+                    />
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">

diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx
@@ -2,77 +2,77 @@
 
 import { Button } from "@onlook/ui/button";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
 } from "@onlook/ui/dropdown-menu";
 import { Icons } from "@onlook/ui/icons";
 import { useState } from "react";
+import { useBoxControl } from "../hooks/use-box-control";
 import { InputRange } from "../inputs/input-range";
 import { SpacingInputs } from "../inputs/spacing-inputs";
-import { useBoxControl } from "../hooks/use-box-control";
 
 export const Margin = () => {
-  const [activeTab, setActiveTab] = useState("individual");
-  const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange } = useBoxControl('margin');
+    const [activeTab, setActiveTab] = useState("individual");
+    const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange, setIsUpdating } = useBoxControl('margin');
 
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          className="text-muted-foreground border-border/0 hover:bg-background-tertiary/20 hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:border-border flex cursor-pointer items-center gap-2 rounded-lg border px-3 hover:border hover:text-white focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none active:border-0 data-[state=open]:border data-[state=open]:text-white"
-        >
-          <Icons.Margin className="h-4 min-h-4 w-4 min-w-4" />
-          <span className="text-sm">{boxState.margin.value}</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="start"
-        className="mt-1 w-[280px] rounded-lg p-3"
-      >
-        <div className="mb-3 flex items-center gap-2">
-          <button
-            onClick={() => setActiveTab("all")}
-            className={`flex-1 cursor-pointer rounded-md px-4 py-1.5 text-sm transition-colors ${
-              activeTab === "all"
-                ? "bg-background-tertiary/20 text-white"
-                : "text-muted-foreground hover:bg-background-tertiary/10"
-            }`}
-          >
-            All sides
-          </button>
-          <button
-            onClick={() => setActiveTab("individual")}
-            className={`flex-1 cursor-pointer rounded-md px-4 py-1.5 text-sm transition-colors ${
-              activeTab === "individual"
-                ? "bg-background-tertiary/20 text-white"
-                : "text-muted-foreground hover:bg-background-tertiary/10"
-            }`}
-          >
-            Individual
-          </button>
-        </div>
-        {activeTab === "all" ? (
-          <InputRange
-            value={boxState.margin.num ?? 0}
-            onChange={(value) => handleBoxChange('margin', value.toString())}
-            unit={boxState.margin.unit}
-            onUnitChange={(unit) => handleUnitChange('margin', unit)}
-          />
-        ) : (
-          <SpacingInputs
-            type="margin"
-            values={{
-              top: boxState.marginTop.num ?? 0,
-              right: boxState.marginRight.num ?? 0,
-              bottom: boxState.marginBottom.num ?? 0,
-              left: boxState.marginLeft.num ?? 0
-            }}
-            onChange={handleIndividualChange}
-          />
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    className="text-muted-foreground border-border/0 hover:bg-background-tertiary/20 hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:border-border flex cursor-pointer items-center gap-2 rounded-lg border px-3 hover:border hover:text-white focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none active:border-0 data-[state=open]:border data-[state=open]:text-white"
+                >
+                    <Icons.Margin className="h-4 min-h-4 w-4 min-w-4" />
+                    <span className="text-sm">{boxState.margin.value}</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                align="start"
+                className="mt-1 w-[280px] rounded-lg p-3"
+            >
+                <div className="mb-3 flex items-center gap-2">
+                    <button
+                        onClick={() => setActiveTab("all")}
+                        className={`flex-1 cursor-pointer rounded-md px-4 py-1.5 text-sm transition-colors ${activeTab === "all"
+                            ? "bg-background-tertiary/20 text-white"
+                            : "text-muted-foreground hover:bg-background-tertiary/10"
+                            }`}
+                    >
+                        All sides
+                    </button>
+                    <button
+                        onClick={() => setActiveTab("individual")}
+                        className={`flex-1 cursor-pointer rounded-md px-4 py-1.5 text-sm transition-colors ${activeTab === "individual"
+                            ? "bg-background-tertiary/20 text-white"
+                            : "text-muted-foreground hover:bg-background-tertiary/10"
+                            }`}
+                    >
+                        Individual
+                    </button>
+                </div>
+                {activeTab === "all" ? (
+                    <InputRange
+                        value={boxState.margin.num ?? 0}
+                        onChange={(value) => handleBoxChange('margin', value.toString())}
+                        unit={boxState.margin.unit}
+                        onUnitChange={(unit) => handleUnitChange('margin', unit)}
+                        onUnitChangeStart={() => setIsUpdating(true)}
+                        onUnitChangeEnd={() => setIsUpdating(false)}
+                    />
+                ) : (
+                    <SpacingInputs
+                        type="margin"
+                        values={{
+                            top: boxState.marginTop.num ?? 0,
+                            right: boxState.marginRight.num ?? 0,
+                            bottom: boxState.marginBottom.num ?? 0,
+                            left: boxState.marginLeft.num ?? 0
+                        }}
+                        onChange={handleIndividualChange}
+                    />
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
 };
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-box-control.ts b/apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-box-control.ts
@@ -51,6 +51,7 @@ const createDefaultState = (type: BoxType): BoxStateMap => {
 
 export const useBoxControl = (type: BoxType) => {
     const editorEngine = useEditorEngine();
+    const [isUpdating, setIsUpdating] = useState(false);
 
     const getInitialState = (): BoxStateMap => {
         const defaultState = createDefaultState(type);
@@ -92,6 +93,8 @@ export const useBoxControl = (type: BoxType) => {
     const [boxState, setBoxState] = useState<BoxStateMap>(getInitialState());
 
     useEffect(() => {
+        console.log('isUpdating', isUpdating);
+        if (isUpdating) return;
         setBoxState(getInitialState());
     }, [editorEngine.style.selectedStyle]);
 
@@ -154,6 +157,8 @@ export const useBoxControl = (type: BoxType) => {
         boxState,
         handleBoxChange,
         handleUnitChange,
-        handleIndividualChange
+        handleIndividualChange,
+        isUpdating,
+        setIsUpdating
     };
 }; 
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-range.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-range.tsx
@@ -10,9 +10,11 @@ interface InputRangeProps {
     unit?: string;
     onChange?: (value: number) => void;
     onUnitChange?: (unit: string) => void;
+    onUnitChangeStart?: () => void;
+    onUnitChangeEnd?: () => void;
 }
 
-export const InputRange = ({ value, icon, unit = "px", onChange, onUnitChange }: InputRangeProps) => {
+export const InputRange = ({ value, icon, unit = "px", onChange, onUnitChange, onUnitChangeStart, onUnitChangeEnd }: InputRangeProps) => {
     const Icon = icon ? Icons[icon] : Icons.Padding;
     const [inputValue, setInputValue] = useState(String(value));
     const rangeRef = useRef<HTMLInputElement>(null);
@@ -41,6 +43,7 @@ export const InputRange = ({ value, icon, unit = "px", onChange, onUnitChange }:
 
     const handleMouseDown = (e: React.MouseEvent) => {
         if (rangeRef.current) {
+            onUnitChangeStart?.();
             setIsDragging(true);
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleMouseUp);
@@ -57,6 +60,7 @@ export const InputRange = ({ value, icon, unit = "px", onChange, onUnitChange }:
     };
 
     const handleMouseUp = () => {
+        onUnitChangeEnd?.();
         setIsDragging(false);
         document.removeEventListener('mousemove', handleMouseMove);
         document.removeEventListener('mouseup', handleMouseUp);

diff --git a/apps/web/client/src/components/store/editor/engine/style/index.ts b/apps/web/client/src/components/store/editor/engine/style/index.ts
@@ -9,7 +9,9 @@ import { makeAutoObservable, reaction } from 'mobx';
 import type { EditorEngine } from '..';
 
 export interface SelectedStyle {
-    styles: Record<string, string>;
+    styles: {
+        margin: string;
+    }
     parentRect: DOMRect;
     rect: DOMRect;
 }

diff --git a/apps/web/preload/script/api/elements/style.ts b/apps/web/preload/script/api/elements/style.ts
@@ -1,10 +1,8 @@
+import type { DomElementStyles } from '@onlook/models';
 import { jsonClone } from '@onlook/utility';
 import { getHtmlElement } from '../../helpers';
 
-export function getStyles(element: HTMLElement): {
-    defined: Record<string, string>;
-    computed: Record<string, string>;
-} {
+export function getStyles(element: HTMLElement): DomElementStyles {
     const computed = getElComputedStyle(element);
     const inline = getInlineStyles(element);
     const stylesheet = getStylesheetStyles(element);