paint

src/pages/editor/components/sidebar/ObjectSettings.tsx

@@ -77,7 +77,7 @@ const ObjectSettings = ({ selectedObject, pageWidth, pageHeight, onUpdate, onDel
 
       {roundedSelectedObject.type === "rectangle" && <ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
 
-      {(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow") && <LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
+      {(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow" || roundedSelectedObject.type === "pencil") && <LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
 
       {roundedSelectedObject.type === "image" && <SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
 

src/pages/editor/components/sidebar/ToolInstructions.tsx

@@ -37,6 +37,7 @@ const ToolInstructions = ({ tool }: ToolInstructionsProps) => {
         rectangle: <RectangleInstruction />,
         line: <RectangleInstruction />,
         arrow: <RectangleInstruction />,
+        pencil: <RectangleInstruction />,
         "custom-shape": <RectangleInstruction />,
         text: <TextInstruction />,
         sticker: <StickerInstruction />,

src/pages/editor/components/sidebar/ToolsBar.tsx

@@ -35,7 +35,7 @@ const ToolsBar = ({ tool, onToolClick }: ToolsBarProps) => {
             {tools.map((item, index) => {
                 const isActive =
                     item.tool === "rectangle"
-                        ? tool === "rectangle" || tool === "line" || tool === "arrow" || tool === "custom-shape"
+                        ? tool === "rectangle" || tool === "line" || tool === "arrow" || tool === "custom-shape" || tool === "pencil"
                         : tool === item.tool;
                 const iconColor = "black";
                 const iconVariant: "Bold" | "Outline" | "Broken" | "Bulk" | "Linear" | "TwoTone" | undefined = isActive ? "Bold" : "Outline";

src/pages/editor/components/sidebar/instructions/CustomShapeInstruction.tsx

@@ -1,12 +1,15 @@
 const CustomShapeInstruction = () => (
   <div className="space-y-2 text-sm text-gray-600">
-    <p className="font-medium text-gray-700">رسم شکل سفارشی</p>
+    <p className="font-medium text-gray-700">رسم نقطه‌به‌نقطه (Pen)</p>
     <ul className="space-y-1">
       <li>• روی کانوس کلیک کنید تا نقاط اضافه شود</li>
       <li>• روی نقطه اول کلیک کنید تا شکل بسته شود</li>
       <li>• دوبار کلیک کنید تا شکل تکمیل شود</li>
       <li>• Escape را بزنید تا لغو شود</li>
     </ul>
+    <p className="text-xs text-gray-500 pt-1">
+      برای نقاشی آزاد (کلیک و بکش) از ابزار «قلم» استفاده کنید.
+    </p>
   </div>
 );
 

src/pages/editor/components/sidebar/instructions/PencilInstruction.tsx

@@ -0,0 +1,43 @@
+import ColorPicker from "@/components/ColorPicker";
+import Input from "@/components/Input";
+import { usePencilDefaultsStore } from "@/pages/editor/store/pencilDefaultsStore";
+import { Brush } from "iconsax-react";
+import { type FC } from "react";
+
+const PencilInstruction: FC = () => {
+  const { defaults, updateDefaults } = usePencilDefaultsStore();
+
+  return (
+    <div className="mt-9 space-y-4">
+      <div className="flex items-start gap-2 text-sm text-gray-600">
+        <Brush size={18} color="#666" variant="Outline" className="mt-0.5 shrink-0" />
+        <div className="space-y-1">
+          <p>کلیک کرده و بکشید تا آزاد نقاشی کنید (مانند Pencil در Figma).</p>
+          <p className="text-xs text-gray-500">
+            برای رسم نقطه‌به‌نقطه از ابزار «سفارشی» استفاده کنید.
+          </p>
+        </div>
+      </div>
+
+      <ColorPicker
+        label="رنگ قلم"
+        value={defaults.stroke}
+        onChange={(value) => updateDefaults({ stroke: value })}
+      />
+      <Input
+        label="ضخامت قلم"
+        type="number"
+        min={1}
+        max={50}
+        value={defaults.strokeWidth}
+        onChange={(e) =>
+          updateDefaults({
+            strokeWidth: Math.max(1, parseInt(e.target.value) || 1),
+          })
+        }
+      />
+    </div>
+  );
+};
+
+export default PencilInstruction;

src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx

@@ -6,9 +6,10 @@ import { Switch } from "@/components/ui/switch";
 import { clx } from "@/helpers/utils";
 import { useEditorStore } from "@/pages/editor/store/editorStore";
 import { useShapeStore, type ShapeType } from "@/pages/editor/store/shapeStore";
-import { ArrowLeft, Minus, PenTool } from "iconsax-react";
+import { ArrowLeft, Brush, Minus, PenTool } from "iconsax-react";
 import { type FC } from "react";
 import CustomShapeInstruction from "./CustomShapeInstruction";
+import PencilInstruction from "./PencilInstruction";
 
 const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: string }> = [
   { id: "square", label: "مربع", icon: SquareIcon, alt: "square" },
@@ -18,6 +19,7 @@ const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: str
 ];
 
 const drawOptions = [
+  { tool: "pencil" as const, label: "قلم", Icon: Brush },
   { tool: "line" as const, label: "خط", Icon: Minus },
   { tool: "arrow" as const, label: "پیکان", Icon: ArrowLeft },
   { tool: "custom-shape" as const, label: "سفارشی", Icon: PenTool },
@@ -81,6 +83,8 @@ const RectangleInstruction: FC = () => {
         <p className="mt-9 text-sm text-gray-600">{tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}</p>
       )}
 
+      {tool === "pencil" && <PencilInstruction />}
+
       {tool === "custom-shape" && (
         <div className="mt-9">
           <CustomShapeInstruction />