feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

2026-05-24 17:37:21 +03:30
parent d962483359
commit c61f587767
295 changed files with 29797 additions and 265 deletions
@@ -0,0 +1,125 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { ArrowDown, ArrowUp, Trash2 } from "lucide-react";
+
+import {
+  AspectRatioLockButton,
+  PanelSection,
+  PropertyNumberInput,
+} from "@/components/studio/properties/PropertyControls";
+import { useLayerUpdater } from "@/components/studio/properties/useLayerUpdater";
+import type { Layer } from "@/lib/studio-types";
+import { useStudioStore } from "@/lib/studio-store";
+
+interface CommonLayerControlsProps {
+  layer: Layer;
+}
+
+export function CommonLayerControls({ layer }: CommonLayerControlsProps) {
+  const [aspectLocked, setAspectLocked] = useState(false);
+  const aspectRatioRef = useRef(layer.width / layer.height || 1);
+  const { update } = useLayerUpdater(layer);
+  const deleteLayer = useStudioStore((state) => state.deleteLayer);
+  const moveLayerToFront = useStudioStore((state) => state.moveLayerToFront);
+  const moveLayerToBack = useStudioStore((state) => state.moveLayerToBack);
+
+  const aspectRatio = aspectRatioRef.current;
+
+  const setWidth = (width: number) => {
+    if (aspectLocked) {
+      update({ width, height: Math.max(8, width / aspectRatio) });
+      return;
+    }
+    update({ width: Math.max(8, width) });
+  };
+
+  const setHeight = (height: number) => {
+    if (aspectLocked) {
+      update({ height, width: Math.max(8, height * aspectRatio) });
+      return;
+    }
+    update({ height: Math.max(8, height) });
+  };
+
+  return (
+    <>
+      <PanelSection title="Transform">
+        <div className="grid grid-cols-2 gap-2">
+          <PropertyNumberInput
+            label="X"
+            value={layer.x}
+            onChange={(x) => update({ x })}
+          />
+          <PropertyNumberInput
+            label="Y"
+            value={layer.y}
+            onChange={(y) => update({ y })}
+          />
+        </div>
+        <div className="flex items-end gap-2">
+          <div className="grid flex-1 grid-cols-2 gap-2">
+            <PropertyNumberInput
+              label="Width"
+              value={layer.width}
+              min={8}
+              onChange={setWidth}
+            />
+            <PropertyNumberInput
+              label="Height"
+              value={layer.height}
+              min={8}
+              onChange={setHeight}
+            />
+          </div>
+          <AspectRatioLockButton
+            locked={aspectLocked}
+            onToggle={() => {
+              setAspectLocked((locked) => {
+                if (!locked) {
+                  aspectRatioRef.current = layer.width / layer.height || 1;
+                }
+                return !locked;
+              });
+            }}
+          />
+        </div>
+        <PropertyNumberInput
+          label="Rotation (°)"
+          value={layer.rotation}
+          onChange={(rotation) => update({ rotation })}
+        />
+      </PanelSection>
+
+      <PanelSection title="Layer order">
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            onClick={() => moveLayerToFront(layer.id)}
+            className="flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          >
+            <ArrowUp className="h-3.5 w-3.5" aria-hidden />
+            To front
+          </button>
+          <button
+            type="button"
+            onClick={() => moveLayerToBack(layer.id)}
+            className="flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          >
+            <ArrowDown className="h-3.5 w-3.5" aria-hidden />
+            To back
+          </button>
+        </div>
+      </PanelSection>
+
+      <button
+        type="button"
+        onClick={() => deleteLayer(layer.id)}
+        className="flex w-full items-center justify-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-xs font-medium text-red-500 transition-colors hover:border-red-300 hover:bg-red-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500"
+      >
+        <Trash2 className="h-3.5 w-3.5" aria-hidden />
+        Delete layer
+      </button>
+    </>
+  );
+}