[dyad] Added image scaling and position controls - wrote 2 file(s)

src/components/object-position-control.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+type Position =
+  | "left top"
+  | "center top"
+  | "right top"
+  | "left center"
+  | "center center"
+  | "right center"
+  | "left bottom"
+  | "center bottom"
+  | "right bottom";
+
+const positions: Position[] = [
+  "left top", "center top", "right top",
+  "left center", "center center", "right center",
+  "left bottom", "center bottom", "right bottom",
+];
+
+interface ObjectPositionControlProps {
+  value: string;
+  onChange: (value: Position) => void;
+}
+
+export function ObjectPositionControl({ value, onChange }: ObjectPositionControlProps) {
+  return (
+    <div className="grid grid-cols-3 gap-1 w-24 h-24 p-1 rounded-md bg-muted">
+      {positions.map((pos) => (
+        <button
+          key={pos}
+          type="button"
+          onClick={() => onChange(pos)}
+          className={cn(
+            "rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            value === pos
+              ? "bg-primary"
+              : "bg-muted-foreground/20 hover:bg-muted-foreground/40"
+          )}
+          aria-label={`Set object position to ${pos.replace(' ', ' ')}`}
+        />
+      ))}
+    </div>
+  );
+}