[Grida Canvas] RC (daily)

editor/scaffolds/sidecontrol/controls/box-shadow.tsx

@@ -15,7 +15,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { PropertyLine, PropertyLineLabel, PropertyNumber } from "../ui";
+import { PropertyLine, PropertyLineLabel } from "../ui";
+import InputPropertyNumber from "../ui/number";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { RGBAColorControl } from "./color";
 
@@ -114,10 +115,10 @@ export function BoxShadowControl({
             </PropertyLine>
             <PropertyLine>
               <PropertyLineLabel>X</PropertyLineLabel>
-              <PropertyNumber
+              <InputPropertyNumber
                 mode="fixed"
                 value={value.offset[0]}
-                onValueChange={(v) =>
+                onValueCommit={(v) =>
                   onValueChange?.({
                     ...value,
                     offset: [v || 0, value.offset[1]],
@@ -127,10 +128,10 @@ export function BoxShadowControl({
             </PropertyLine>
             <PropertyLine>
               <PropertyLineLabel>Y</PropertyLineLabel>
-              <PropertyNumber
+              <InputPropertyNumber
                 mode="fixed"
                 value={value.offset[1]}
-                onValueChange={(v) =>
+                onValueCommit={(v) =>
                   onValueChange?.({
                     ...value,
                     offset: [value.offset[0], v || 0],
@@ -140,20 +141,20 @@ export function BoxShadowControl({
             </PropertyLine>
             <PropertyLine>
               <PropertyLineLabel>Blur</PropertyLineLabel>
-              <PropertyNumber
+              <InputPropertyNumber
                 mode="fixed"
                 value={value.blur}
-                onValueChange={(v) =>
+                onValueCommit={(v) =>
                   onValueChange?.({ ...value, blur: v || 0 })
                 }
               />
             </PropertyLine>
             <PropertyLine>
               <PropertyLineLabel>Spread</PropertyLineLabel>
-              <PropertyNumber
+              <InputPropertyNumber
                 mode="fixed"
                 value={value.spread}
-                onValueChange={(v) =>
+                onValueCommit={(v) =>
                   onValueChange?.({ ...value, spread: v || 0 })
                 }
               />

editor/scaffolds/sidecontrol/controls/corner-radius.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import InputPropertyNumber from "../ui/number";
 import {
   Popover,
   PopoverContent,
@@ -15,16 +15,16 @@ import {
   CornerBottomLeftIcon,
   CornersIcon,
 } from "@radix-ui/react-icons";
-import { PropertyInput } from "../ui";
+import { PropertyInputContainer } from "../ui";
 
 export function CornerRadiusControl({
   disabled,
   value,
-  onValueChange,
+  onValueCommit,
 }: {
   disabled?: boolean;
   value?: grida.program.nodes.i.IRectangleCorner["cornerRadius"];
-  onValueChange?: (
+  onValueCommit?: (
     value: grida.program.nodes.i.IRectangleCorner["cornerRadius"]
   ) => void;
 }) {
@@ -39,17 +39,15 @@ export function CornerRadiusControl({
             size: "xs",
           })}
         >
-          <Input
+          <InputPropertyNumber
+            mode="fixed"
             disabled={disabled}
             type="number"
             value={mode === "all" ? (value as number) : ""}
             placeholder={mode === "all" ? "0" : "mixed"}
             min={0}
             step={1}
-            className={WorkbenchUI.inputVariants({ size: "xs" })}
-            onChange={(e) => {
-              onValueChange?.(parseInt(e.target.value));
-            }}
+            onValueCommit={onValueCommit}
           />
           <PopoverTrigger asChild>
             <Button
@@ -72,12 +70,12 @@ export function CornerRadiusControl({
                 ? [value, value, value, value]
                 : [0, 0, 0, 0]
           }
-          onValueChange={(v) => {
+          onValueCommit={(v) => {
             if (cg.cornerRadius4Identical(v)) {
-              onValueChange?.(v[0]);
+              onValueCommit?.(v[0]);
               return;
             }
-            onValueChange?.(v);
+            onValueCommit?.(v);
           }}
         />
       </PopoverContent>
@@ -87,49 +85,61 @@ export function CornerRadiusControl({
 
 function CornerRadius4Control({
   value,
-  onValueChange,
+  onValueCommit,
 }: {
   value: cg.CornerRadius4;
-  onValueChange?: (value: cg.CornerRadius4) => void;
+  onValueCommit?: (value: cg.CornerRadius4) => void;
 }) {
   const [topLeft, topRight, bottomRight, bottomLeft] = value;
 
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+  const onCommit = (v: number, index: number) => {
     const newValue = [...value];
-    const n = parseInt(e.target.value) || 0;
+    const n = v || 0;
     newValue[index] = n;
-    onValueChange?.(newValue as cg.CornerRadius4);
+    onValueCommit?.(newValue as cg.CornerRadius4);
   };
 
   return (
     <div className="grid gap-2">
       <div className="flex items-center gap-2">
-        <PropertyInput
-          type="number"
-          value={topLeft}
-          onChange={(e) => onChange(e, 0)}
-          icon={<CornerTopLeftIcon className="size-3" />}
-        />
-        <PropertyInput
-          type="number"
-          value={topRight}
-          onChange={(e) => onChange(e, 1)}
-          icon={<CornerTopRightIcon className="size-3" />}
-        />
+        <PropertyInputContainer>
+          <CornerTopLeftIcon className="size-3" />
+          <InputPropertyNumber
+            mode="fixed"
+            type="number"
+            value={topLeft}
+            onValueCommit={(v) => onCommit(v, 0)}
+          />
+        </PropertyInputContainer>
+        <PropertyInputContainer>
+          <CornerTopRightIcon className="size-3" />
+          <InputPropertyNumber
+            mode="fixed"
+            type="number"
+            value={topRight}
+            onValueCommit={(v) => onCommit(v, 1)}
+          />
+        </PropertyInputContainer>
       </div>
       <div className="flex items-center gap-2">
-        <PropertyInput
-          type="number"
-          value={bottomLeft}
-          onChange={(e) => onChange(e, 3)}
-          icon={<CornerBottomLeftIcon className="size-3" />}
-        />
-        <PropertyInput
-          type="number"
-          value={bottomRight}
-          onChange={(e) => onChange(e, 2)}
-          icon={<CornerBottomRightIcon className="size-3" />}
-        />
+        <PropertyInputContainer>
+          <CornerBottomLeftIcon className="size-3" />
+          <InputPropertyNumber
+            mode="fixed"
+            type="number"
+            value={bottomLeft}
+            onValueCommit={(v) => onCommit(v, 3)}
+          />
+        </PropertyInputContainer>
+        <PropertyInputContainer>
+          <CornerBottomRightIcon className="size-3" />
+          <InputPropertyNumber
+            mode="fixed"
+            type="number"
+            value={bottomRight}
+            onValueCommit={(v) => onCommit(v, 2)}
+          />
+        </PropertyInputContainer>
       </div>
     </div>
   );

editor/scaffolds/sidecontrol/controls/font-size.tsx

@@ -4,29 +4,32 @@ import {
   SelectItem,
 } from "@/components/ui-editor/select";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Button } from "@/components/ui-editor/button";
+import InputPropertyNumber from "../ui/number";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { cn } from "@/components/lib/utils";
 import type { editor } from "@/grida-canvas";
 import type { TMixed } from "./utils/types";
-import { PropertyNumber } from "../ui";
 
 export function FontSizeControl({
   value,
   onValueChange,
+  onValueCommit,
 }: {
   value?: TMixed<number>;
   onValueChange?: (change: editor.api.NumberChange) => void;
+  onValueCommit?: (change: editor.api.NumberChange) => void;
 }) {
   return (
     <div className="relative">
-      <PropertyNumber
+      <InputPropertyNumber
+        mode="auto"
         type="integer"
         value={value}
         placeholder="inherit"
         min={1}
         step={1}
         onValueChange={onValueChange}
+        onValueCommit={onValueCommit}
         className={cn(
           "overflow-hidden",
           "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"

editor/scaffolds/sidecontrol/controls/gap.tsx

@@ -1,26 +1,24 @@
-import { Input } from "@/components/ui/input";
-import { WorkbenchUI } from "@/components/workbench";
+import InputPropertyNumber from "../ui/number";
 
 export function GapControl({
   value,
-  onValueChange,
+  onValueCommit,
 }: {
   value: { mainAxisGap: number; crossAxisGap: number };
-  onValueChange?: (
+  onValueCommit?: (
     value: number | { mainAxisGap: number; crossAxisGap: number }
   ) => void;
 }) {
   return (
-    <Input
+    <InputPropertyNumber
+      mode="fixed"
       type="number"
       // TODO: individual gap control
       value={value.mainAxisGap === value.crossAxisGap ? value.mainAxisGap : ""}
       placeholder="gap"
       step={1}
-      className={WorkbenchUI.inputVariants({ size: "xs" })}
-      onChange={(e) => {
-        onValueChange?.(parseInt(e.target.value));
-      }}
+      min={0}
+      onValueCommit={onValueCommit}
     />
   );
 }

editor/scaffolds/sidecontrol/controls/gradient.tsx

@@ -1,12 +1,11 @@
 import { Input } from "@/components/ui/input";
-import grida from "@grida/schema";
 import type cg from "@grida/cg";
 import { RGBAColorControl } from "./color";
 import { WorkbenchUI } from "@/components/workbench";
 import { cn } from "@/components/lib/utils";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { PropertyNumber } from "../ui";
+import InputPropertyNumber from "../ui/number";
 import cmath from "@grida/cmath";
 import { css } from "@/grida-canvas-utils/css";
 
@@ -30,15 +29,16 @@ export function GradientControl({
       />
       <hr className="my-4 w-full" />
       <div>
-        <PropertyNumber
+        <InputPropertyNumber
+          mode="fixed"
           type="number"
           placeholder="angle"
-          mode="fixed"
           step={1}
           value={
             value.transform ? cmath.transform.angle(value.transform) : undefined
           }
-          onValueChange={(v) => {
+          onValueCommit={(v) => {
+            // change on commit
             const t = cmath.transform.computeRelativeLinearGradientTransform(v);
             onValueChange?.({
               ...value,