layer panel with took left

src/pages/editor/components/LayersPanel.tsx

@@ -1,6 +1,9 @@
-import { DocumentText, Layer, Eye, EyeSlash, Lock1, Lock, Trash, ArrowRight2, Text, Shapes } from 'iconsax-react'
+import { DocumentText, Layer, Eye, Lock, Trash, ArrowRight2, Text, Shapes, Add, Copy } from 'iconsax-react'
 import { useEditorStore } from '../store/editorStore'
 import { clx } from '@/helpers/utils'
+import { useState } from 'react'
+
+type TabType = 'pages' | 'layers'
 
 type LayersPanelProps = {
   isOpen: boolean
@@ -8,7 +11,16 @@ type LayersPanelProps = {
 }
 
 const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
+  const [activeTab, setActiveTab] = useState<TabType>('pages')
   const { objects, selectedObjectId, setSelectedObjectId, deleteObject } = useEditorStore()
+  const {
+    pages,
+    currentPageId,
+    setCurrentPage,
+    addPage,
+    duplicatePage,
+    deletePage,
+  } = useEditorStore()
 
   const getLayerIcon = (type: string) => {
     switch (type) {
@@ -36,19 +48,39 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
     }
   }
 
+  const handleAddPage = () => {
+    addPage()
+  }
+
+  const handleDuplicatePage = (pageId: string) => {
+    duplicatePage(pageId)
+  }
+
+  const handleDeletePage = (pageId: string) => {
+    if (pages.length > 1) {
+      deletePage(pageId)
+    }
+  }
+
   if (!isOpen) {
     return (
       <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
         <div className="bg-white rounded-t-[32px] rounded-b-[32px] w-16 h-full flex flex-col items-center gap-4 p-4">
           <button
-            onClick={() => setIsOpen(true)}
+            onClick={() => {
-            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+              setActiveTab('pages')
+              setIsOpen(true)
+            }}
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
           >
             <DocumentText size={24} color="black" />
           </button>
           <button
-            onClick={() => setIsOpen(true)}
+            onClick={() => {
-            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+              setActiveTab('layers')
+              setIsOpen(true)
+            }}
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
           >
             <Layer size={24} color="black" />
           </button>
@@ -58,78 +90,172 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
   }
 
   return (
-    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
+    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
-      <div className="bg-white rounded-t-[32px] rounded-b-[32px] flex flex-col h-full">
+      <div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
-        <div className="flex items-center justify-between p-4 border-b border-border">
+        <button
-          <div className="flex items-center gap-3">
+          onClick={() => {
-            <button
+            setActiveTab('pages')
-              onClick={() => setIsOpen(false)}
+          }}
-              className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+          className={clx(
-            >
+            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
-              <ArrowRight2 size={20} color="black" />
+            activeTab === 'pages' ? 'bg-white' : 'hover:bg-gray-200'
-            </button>
+          )}
-            <h2 className="text-lg font-medium">لایه ها</h2>
+        >
-          </div>
+          <DocumentText size={24} color="black" />
-        </div>
+        </button>
+        <button
+          onClick={() => {
+            setActiveTab('layers')
+          }}
+          className={clx(
+            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
+            activeTab === 'layers' ? 'bg-white' : 'hover:bg-gray-200'
+          )}
+        >
+          <Layer size={24} color="black" />
+        </button>
+      </div>
 
-        <div className="flex-1 overflow-y-auto p-4">
+      <div className="fixed border-l border-border left-20 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
-          <div className="flex flex-col gap-2">
+        <div className="bg-white rounded-r-4xl flex flex-col h-full">
-            {objects.length === 0 ? (
+          <div className="flex items-center justify-between p-4 border-b border-border">
-              <div className="text-sm text-gray-500 text-center py-8">
+            <div className="flex items-center gap-3">
-                لایه‌ای وجود ندارد
+              <button
-              </div>
+                onClick={() => setIsOpen(false)}
-            ) : (
+                className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
-              objects.map((obj) => {
+              >
-                const isSelected = selectedObjectId === obj.id
+                <ArrowRight2 size={20} color="black" />
-                return (
+              </button>
-                  <div
+              <h2 className="text-lg font-medium">
-                    key={obj.id}
+                {activeTab === 'pages' ? 'صفحات' : 'لایه ها'}
-                    onClick={() => setSelectedObjectId(obj.id)}
+              </h2>
-                    className={clx(
+            </div>
-                      'flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors',
-                      isSelected ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'
-                    )}
-                  >
-                    <div className="flex-shrink-0">
-                      {getLayerIcon(obj.type)}
-                    </div>
-                    <div className="flex-1 text-sm font-medium">
-                      {getLayerLabel(obj.type)}
-                    </div>
-                    <div className="flex items-center gap-1.5">
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          // TODO: Toggle visibility
-                        }}
-                        className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
-                      >
-                        <Eye size={16} color="black" />
-                      </button>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          // TODO: Toggle lock
-                        }}
-                        className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
-                      >
-                        <Lock size={16} color="black" />
-                      </button>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          deleteObject(obj.id)
-                        }}
-                        className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-red-100 transition-colors"
-                      >
-                        <Trash size={16} color="#FF3B30" />
-                      </button>
-                    </div>
-                  </div>
-                )
-              })
-            )}
           </div>
+
+          {activeTab === 'pages' ? (
+            <>
+              <div className="flex-1 overflow-y-auto p-4">
+                <div className="flex flex-col gap-3">
+                  {pages.length === 0 ? (
+                    <div className="text-sm text-gray-500 text-center py-8">
+                      صفحه‌ای وجود ندارد
+                    </div>
+                  ) : (
+                    pages.map((page) => {
+                      const isSelected = currentPageId === page.id
+                      return (
+                        <div
+                          key={page.id}
+                          onClick={() => setCurrentPage(page.id)}
+                          className={clx(
+                            'flex flex-col gap-2 p-3 rounded-lg cursor-pointer transition-colors',
+                            isSelected
+                              ? 'bg-blue-50 border border-blue-200'
+                              : 'bg-gray-50 hover:bg-gray-100'
+                          )}
+                        >
+                          <div className="w-full aspect-4/3 bg-gray-100 rounded-lg flex items-center justify-center">
+                            <DocumentText size={32} color="#666" />
+                          </div>
+                          <div className="text-sm font-medium text-center">
+                            {page.name}
+                          </div>
+                        </div>
+                      )
+                    })
+                  )}
+                </div>
+              </div>
+
+              <div className="p-4 border-t border-border bg-gray-50 rounded-b-[32px]">
+                <div className="flex items-center justify-center gap-3">
+                  <button
+                    onClick={handleAddPage}
+                    className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors border border-gray-200"
+                  >
+                    <Add size={20} color="black" />
+                  </button>
+                  {currentPageId && (
+                    <>
+                      <button
+                        onClick={() => handleDuplicatePage(currentPageId)}
+                        className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors border border-gray-200"
+                      >
+                        <Copy size={20} color="black" />
+                      </button>
+                      <button
+                        onClick={() => handleDeletePage(currentPageId)}
+                        disabled={pages.length <= 1}
+                        className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-red-100 transition-colors border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        <Trash size={20} color="#FF3B30" />
+                      </button>
+                    </>
+                  )}
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 overflow-y-auto p-4">
+              <div className="flex flex-col gap-2">
+                {objects.length === 0 ? (
+                  <div className="text-sm text-gray-500 text-center py-8">
+                    لایه‌ای وجود ندارد
+                  </div>
+                ) : (
+                  objects.map((obj) => {
+                    const isSelected = selectedObjectId === obj.id
+                    return (
+                      <div
+                        key={obj.id}
+                        onClick={() => setSelectedObjectId(obj.id)}
+                        className={clx(
+                          'flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors',
+                          isSelected ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'
+                        )}
+                      >
+                        <div className="shrink-0">
+                          {getLayerIcon(obj.type)}
+                        </div>
+                        <div className="flex-1 text-sm font-medium">
+                          {getLayerLabel(obj.type)}
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              // TODO: Toggle visibility
+                            }}
+                            className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
+                          >
+                            <Eye size={16} color="black" />
+                          </button>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              // TODO: Toggle lock
+                            }}
+                            className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
+                          >
+                            <Lock size={16} color="black" />
+                          </button>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              deleteObject(obj.id)
+                            }}
+                            className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-red-100 transition-colors"
+                          >
+                            <Trash size={16} color="#FF3B30" />
+                          </button>
+                        </div>
+                      </div>
+                    )
+                  })
+                )}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

src/pages/editor/store/editorStore.ts

@@ -61,6 +61,12 @@ export type EditorObject = {
   tableData?: TableData;
 };
 
+export type Page = {
+  id: string;
+  name: string;
+  objects: EditorObject[];
+};
+
 type EditorStoreType = {
   tool: ToolType;
   setTool: (tool: ToolType) => void;
@@ -74,16 +80,38 @@ type EditorStoreType = {
   setSelectedTableId: (id: string | null) => void;
   selectedCellId: string | null;
   setSelectedCellId: (id: string | null) => void;
-  editingCell: { tableId: string; cellId: string; x: number; y: number; value: string } | null;
+  editingCell: {
-  setEditingCell: (cell: { tableId: string; cellId: string; x: number; y: number; value: string } | null) => void;
+    tableId: string;
+    cellId: string;
+    x: number;
+    y: number;
+    value: string;
+  } | null;
+  setEditingCell: (
+    cell: {
+      tableId: string;
+      cellId: string;
+      x: number;
+      y: number;
+      value: string;
+    } | null
+  ) => void;
   addTable: (x: number, y: number, rows?: number, cols?: number) => void;
   addRow: (tableId: string) => void;
   addColumn: (tableId: string) => void;
   removeRow: (tableId: string) => void;
   removeColumn: (tableId: string) => void;
   updateCellValue: (tableId: string, cellId: string, text: string) => void;
-  changeCellBackground: (tableId: string, cellId: string, color: string) => void;
+  changeCellBackground: (
-  applyTableResize: (tableId: string, newWidth: number, newHeight: number) => void;
+    tableId: string,
+    cellId: string,
+    color: string
+  ) => void;
+  applyTableResize: (
+    tableId: string,
+    newWidth: number,
+    newHeight: number
+  ) => void;
   stageRef: React.RefObject<Konva.Stage | null> | null;
   setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
   layerRef: React.RefObject<Konva.Layer | null> | null;
@@ -92,11 +120,23 @@ type EditorStoreType = {
   setZoom: (zoom: number) => void;
   zoomIn: () => void;
   zoomOut: () => void;
+  pages: Page[];
+  currentPageId: string | null;
+  addPage: (name?: string) => void;
+  duplicatePage: (pageId: string) => void;
+  deletePage: (pageId: string) => void;
+  setCurrentPage: (pageId: string) => void;
+  updatePageName: (pageId: string, name: string) => void;
 };
 
 const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;
 
-const createInitialCells = (rows: number, cols: number, cellWidth: number, cellHeight: number): Record<string, TableCell> => {
+const createInitialCells = (
+  rows: number,
+  cols: number,
+  cellWidth: number,
+  cellHeight: number
+): Record<string, TableCell> => {
   const cells: Record<string, TableCell> = {};
   for (let row = 0; row < rows; row++) {
     for (let col = 0; col < cols; col++) {
@@ -113,257 +153,401 @@ const createInitialCells = (rows: number, cols: number, cellWidth: number, cellH
   return cells;
 };
 
-export const useEditorStore = create<EditorStoreType>((set, get) => ({
+const createInitialPage = (name: string): Page => ({
-  tool: "select",
+  id: `page-${crypto.randomUUID()}`,
-  setTool: (tool) =>
+  name,
-    set((state) => ({
-      tool,
-      selectedObjectId: tool === "select" ? state.selectedObjectId : null,
-    })),
   objects: [],
-  addObject: (object) =>
+});
-    set((state) => ({ objects: [...state.objects, object] })),
-  updateObject: (id, updates) =>
-    set((state) => ({
-      objects: state.objects.map((obj) =>
-        obj.id === id ? { ...obj, ...updates } : obj
-      ),
-    })),
-  deleteObject: (id) =>
-    set((state) => ({
-      objects: state.objects.filter((obj) => obj.id !== id),
-      selectedObjectId:
-        state.selectedObjectId === id ? null : state.selectedObjectId,
-      selectedTableId: state.selectedTableId === id ? null : state.selectedTableId,
-    })),
-  selectedObjectId: null,
-  setSelectedObjectId: (id) => set({ selectedObjectId: id }),
-  selectedTableId: null,
-  setSelectedTableId: (id) => set({ selectedTableId: id }),
-  selectedCellId: null,
-  setSelectedCellId: (id) => set({ selectedCellId: id }),
-  editingCell: null,
-  setEditingCell: (cell) => set({ editingCell: cell }),
-  addTable: (x, y, rows = 4, cols = 5) => {
-    const tableId = `table-${crypto.randomUUID()}`;
-    const cellWidth = 100;
-    const cellHeight = 50;
-    const tableData: TableData = {
-      id: tableId,
-      rows,
-      cols,
-      cellWidth,
-      cellHeight,
-      cells: createInitialCells(rows, cols, cellWidth, cellHeight),
-      stroke: "#808080",
-      strokeWidth: 1,
-    };
-    const tableObject: EditorObject = {
-      id: tableId,
-      type: "grid",
-      x,
-      y,
-      width: cols * cellWidth,
-      height: rows * cellHeight,
-      tableData,
-    };
-    get().addObject(tableObject);
-    get().setSelectedObjectId(tableId);
-    get().setSelectedTableId(tableId);
-  },
-  addRow: (tableId) => {
-    const state = get();
-    const obj = state.objects.find((o) => o.id === tableId);
-    if (!obj || !obj.tableData) return;
 
-    const { tableData } = obj;
+export const useEditorStore = create<EditorStoreType>((set, get) => {
-    const newRow = tableData.rows;
+  const initialPage = createInitialPage("جلد");
-    const newCells = { ...tableData.cells };
+  return {
-
+    tool: "select",
-    for (let col = 0; col < tableData.cols; col++) {
+    setTool: (tool) =>
-      const cellId = createTableCellId(newRow, col);
+      set((state) => ({
-      newCells[cellId] = {
+        tool,
-        id: cellId,
+        selectedObjectId: tool === "select" ? state.selectedObjectId : null,
-        text: "",
+      })),
-        background: "#f5f5f5",
+    objects: [],
-        width: tableData.cellWidth,
+    addObject: (object) => {
-        height: tableData.cellHeight,
+      const state = get();
+      if (state.currentPageId) {
+        const currentPage = state.pages.find(
+          (p) => p.id === state.currentPageId
+        );
+        if (currentPage) {
+          set((state) => ({
+            objects: [...state.objects, object],
+            pages: state.pages.map((p) =>
+              p.id === state.currentPageId
+                ? { ...p, objects: [...p.objects, object] }
+                : p
+            ),
+          }));
+          return;
+        }
+      }
+      set((state) => ({ objects: [...state.objects, object] }));
+    },
+    updateObject: (id, updates) => {
+      const state = get();
+      if (state.currentPageId) {
+        set((state) => ({
+          objects: state.objects.map((obj) =>
+            obj.id === id ? { ...obj, ...updates } : obj
+          ),
+          pages: state.pages.map((p) =>
+            p.id === state.currentPageId
+              ? {
+                  ...p,
+                  objects: p.objects.map((obj) =>
+                    obj.id === id ? { ...obj, ...updates } : obj
+                  ),
+                }
+              : p
+          ),
+        }));
+        return;
+      }
+      set((state) => ({
+        objects: state.objects.map((obj) =>
+          obj.id === id ? { ...obj, ...updates } : obj
+        ),
+      }));
+    },
+    deleteObject: (id) => {
+      const state = get();
+      if (state.currentPageId) {
+        set((state) => ({
+          objects: state.objects.filter((obj) => obj.id !== id),
+          pages: state.pages.map((p) =>
+            p.id === state.currentPageId
+              ? { ...p, objects: p.objects.filter((obj) => obj.id !== id) }
+              : p
+          ),
+          selectedObjectId:
+            state.selectedObjectId === id ? null : state.selectedObjectId,
+          selectedTableId:
+            state.selectedTableId === id ? null : state.selectedTableId,
+        }));
+        return;
+      }
+      set((state) => ({
+        objects: state.objects.filter((obj) => obj.id !== id),
+        selectedObjectId:
+          state.selectedObjectId === id ? null : state.selectedObjectId,
+        selectedTableId:
+          state.selectedTableId === id ? null : state.selectedTableId,
+      }));
+    },
+    selectedObjectId: null,
+    setSelectedObjectId: (id) => set({ selectedObjectId: id }),
+    selectedTableId: null,
+    setSelectedTableId: (id) => set({ selectedTableId: id }),
+    selectedCellId: null,
+    setSelectedCellId: (id) => set({ selectedCellId: id }),
+    editingCell: null,
+    setEditingCell: (cell) => set({ editingCell: cell }),
+    addTable: (x, y, rows = 4, cols = 5) => {
+      const tableId = `table-${crypto.randomUUID()}`;
+      const cellWidth = 100;
+      const cellHeight = 50;
+      const tableData: TableData = {
+        id: tableId,
+        rows,
+        cols,
+        cellWidth,
+        cellHeight,
+        cells: createInitialCells(rows, cols, cellWidth, cellHeight),
+        stroke: "#808080",
+        strokeWidth: 1,
       };
-    }
+      const tableObject: EditorObject = {
-
+        id: tableId,
-    state.updateObject(tableId, {
+        type: "grid",
-      tableData: {
+        x,
-        ...tableData,
+        y,
-        rows: tableData.rows + 1,
+        width: cols * cellWidth,
-        cells: newCells,
+        height: rows * cellHeight,
-      },
+        tableData,
-      height: (tableData.rows + 1) * tableData.cellHeight,
-    });
-  },
-  addColumn: (tableId) => {
-    const state = get();
-    const obj = state.objects.find((o) => o.id === tableId);
-    if (!obj || !obj.tableData) return;
-
-    const { tableData } = obj;
-    const newCol = tableData.cols;
-    const newCells = { ...tableData.cells };
-
-    for (let row = 0; row < tableData.rows; row++) {
-      const cellId = createTableCellId(row, newCol);
-      newCells[cellId] = {
-        id: cellId,
-        text: "",
-        background: "#f5f5f5",
-        width: tableData.cellWidth,
-        height: tableData.cellHeight,
       };
-    }
+      get().addObject(tableObject);
+      get().setSelectedObjectId(tableId);
+      get().setSelectedTableId(tableId);
+    },
+    addRow: (tableId) => {
+      const state = get();
+      const obj = state.objects.find((o) => o.id === tableId);
+      if (!obj || !obj.tableData) return;
 
-    state.updateObject(tableId, {
+      const { tableData } = obj;
-      tableData: {
+      const newRow = tableData.rows;
-        ...tableData,
+      const newCells = { ...tableData.cells };
-        cols: tableData.cols + 1,
-        cells: newCells,
-      },
-      width: (tableData.cols + 1) * tableData.cellWidth,
-    });
-  },
-  removeRow: (tableId) => {
-    const state = get();
-    const obj = state.objects.find((o) => o.id === tableId);
-    if (!obj || !obj.tableData) return;
 
-    const { tableData } = obj;
-    if (tableData.rows <= 1) return;
-
-    const newCells = { ...tableData.cells };
-    for (let col = 0; col < tableData.cols; col++) {
-      const cellId = createTableCellId(tableData.rows - 1, col);
-      delete newCells[cellId];
-    }
-
-    state.updateObject(tableId, {
-      tableData: {
-        ...tableData,
-        rows: tableData.rows - 1,
-        cells: newCells,
-      },
-      height: (tableData.rows - 1) * tableData.cellHeight,
-    });
-  },
-  removeColumn: (tableId) => {
-    const state = get();
-    const obj = state.objects.find((o) => o.id === tableId);
-    if (!obj || !obj.tableData) return;
-
-    const { tableData } = obj;
-    if (tableData.cols <= 1) return;
-
-    const newCells = { ...tableData.cells };
-    for (let row = 0; row < tableData.rows; row++) {
-      const cellId = createTableCellId(row, tableData.cols - 1);
-      delete newCells[cellId];
-    }
-
-    state.updateObject(tableId, {
-      tableData: {
-        ...tableData,
-        cols: tableData.cols - 1,
-        cells: newCells,
-      },
-      width: (tableData.cols - 1) * tableData.cellWidth,
-    });
-  },
-  updateCellValue: (tableId, cellId, text) => {
-    const state = get();
-    const obj = state.objects.find((o) => o.id === tableId);
-    if (!obj || !obj.tableData) return;
-
-    const { tableData } = obj;
-    const updatedCells = {
-      ...tableData.cells,
-      [cellId]: {
-        ...tableData.cells[cellId],
-        text,
-      },
-    };
-
-    state.updateObject(tableId, {
-      tableData: {
-        ...tableData,
-        cells: updatedCells,
-      },
-    });
-  },
-  changeCellBackground: (tableId, cellId, color) => {
-    const state = get();
-    const obj = state.objects.find((o) => o.id === tableId);
-    if (!obj || !obj.tableData) return;
-
-    const { tableData } = obj;
-    const updatedCells = {
-      ...tableData.cells,
-      [cellId]: {
-        ...tableData.cells[cellId],
-        background: color,
-      },
-    };
-
-    state.updateObject(tableId, {
-      tableData: {
-        ...tableData,
-        cells: updatedCells,
-      },
-    });
-  },
-  applyTableResize: (tableId, newWidth, newHeight) => {
-    const state = get();
-    const obj = state.objects.find((o) => o.id === tableId);
-    if (!obj || !obj.tableData) return;
-
-    const { tableData } = obj;
-    const newCellWidth = newWidth / tableData.cols;
-    const newCellHeight = newHeight / tableData.rows;
-
-    const updatedCells: Record<string, TableCell> = {};
-    for (let row = 0; row < tableData.rows; row++) {
       for (let col = 0; col < tableData.cols; col++) {
-        const cellId = createTableCellId(row, col);
+        const cellId = createTableCellId(newRow, col);
-        const oldCell = tableData.cells[cellId];
+        newCells[cellId] = {
-        updatedCells[cellId] = {
+          id: cellId,
-          ...oldCell,
+          text: "",
-          width: newCellWidth,
+          background: "#f5f5f5",
-          height: newCellHeight,
+          width: tableData.cellWidth,
+          height: tableData.cellHeight,
         };
       }
-    }
 
-    state.updateObject(tableId, {
+      state.updateObject(tableId, {
-      width: newWidth,
+        tableData: {
-      height: newHeight,
+          ...tableData,
-      tableData: {
+          rows: tableData.rows + 1,
-        ...tableData,
+          cells: newCells,
-        cellWidth: newCellWidth,
+        },
-        cellHeight: newCellHeight,
+        height: (tableData.rows + 1) * tableData.cellHeight,
-        cells: updatedCells,
+      });
-      },
+    },
-    });
+    addColumn: (tableId) => {
-  },
+      const state = get();
-  stageRef: null,
+      const obj = state.objects.find((o) => o.id === tableId);
-  setStageRef: (ref) => set({ stageRef: ref }),
+      if (!obj || !obj.tableData) return;
-  layerRef: null,
+
-  setLayerRef: (ref) => set({ layerRef: ref }),
+      const { tableData } = obj;
-  zoom: 1,
+      const newCol = tableData.cols;
-  setZoom: (zoom) => set({ zoom }),
+      const newCells = { ...tableData.cells };
-  zoomIn: () => {
+
-    const state = get();
+      for (let row = 0; row < tableData.rows; row++) {
-    const newZoom = Math.min(state.zoom + 0.1, 2);
+        const cellId = createTableCellId(row, newCol);
-    set({ zoom: newZoom });
+        newCells[cellId] = {
-  },
+          id: cellId,
-  zoomOut: () => {
+          text: "",
-    const state = get();
+          background: "#f5f5f5",
-    const newZoom = Math.max(state.zoom - 0.1, 0.5);
+          width: tableData.cellWidth,
-    set({ zoom: newZoom });
+          height: tableData.cellHeight,
-  },
+        };
-}));
+      }
+
+      state.updateObject(tableId, {
+        tableData: {
+          ...tableData,
+          cols: tableData.cols + 1,
+          cells: newCells,
+        },
+        width: (tableData.cols + 1) * tableData.cellWidth,
+      });
+    },
+    removeRow: (tableId) => {
+      const state = get();
+      const obj = state.objects.find((o) => o.id === tableId);
+      if (!obj || !obj.tableData) return;
+
+      const { tableData } = obj;
+      if (tableData.rows <= 1) return;
+
+      const newCells = { ...tableData.cells };
+      for (let col = 0; col < tableData.cols; col++) {
+        const cellId = createTableCellId(tableData.rows - 1, col);
+        delete newCells[cellId];
+      }
+
+      state.updateObject(tableId, {
+        tableData: {
+          ...tableData,
+          rows: tableData.rows - 1,
+          cells: newCells,
+        },
+        height: (tableData.rows - 1) * tableData.cellHeight,
+      });
+    },
+    removeColumn: (tableId) => {
+      const state = get();
+      const obj = state.objects.find((o) => o.id === tableId);
+      if (!obj || !obj.tableData) return;
+
+      const { tableData } = obj;
+      if (tableData.cols <= 1) return;
+
+      const newCells = { ...tableData.cells };
+      for (let row = 0; row < tableData.rows; row++) {
+        const cellId = createTableCellId(row, tableData.cols - 1);
+        delete newCells[cellId];
+      }
+
+      state.updateObject(tableId, {
+        tableData: {
+          ...tableData,
+          cols: tableData.cols - 1,
+          cells: newCells,
+        },
+        width: (tableData.cols - 1) * tableData.cellWidth,
+      });
+    },
+    updateCellValue: (tableId, cellId, text) => {
+      const state = get();
+      const obj = state.objects.find((o) => o.id === tableId);
+      if (!obj || !obj.tableData) return;
+
+      const { tableData } = obj;
+      const updatedCells = {
+        ...tableData.cells,
+        [cellId]: {
+          ...tableData.cells[cellId],
+          text,
+        },
+      };
+
+      state.updateObject(tableId, {
+        tableData: {
+          ...tableData,
+          cells: updatedCells,
+        },
+      });
+    },
+    changeCellBackground: (tableId, cellId, color) => {
+      const state = get();
+      const obj = state.objects.find((o) => o.id === tableId);
+      if (!obj || !obj.tableData) return;
+
+      const { tableData } = obj;
+      const updatedCells = {
+        ...tableData.cells,
+        [cellId]: {
+          ...tableData.cells[cellId],
+          background: color,
+        },
+      };
+
+      state.updateObject(tableId, {
+        tableData: {
+          ...tableData,
+          cells: updatedCells,
+        },
+      });
+    },
+    applyTableResize: (tableId, newWidth, newHeight) => {
+      const state = get();
+      const obj = state.objects.find((o) => o.id === tableId);
+      if (!obj || !obj.tableData) return;
+
+      const { tableData } = obj;
+      const newCellWidth = newWidth / tableData.cols;
+      const newCellHeight = newHeight / tableData.rows;
+
+      const updatedCells: Record<string, TableCell> = {};
+      for (let row = 0; row < tableData.rows; row++) {
+        for (let col = 0; col < tableData.cols; col++) {
+          const cellId = createTableCellId(row, col);
+          const oldCell = tableData.cells[cellId];
+          updatedCells[cellId] = {
+            ...oldCell,
+            width: newCellWidth,
+            height: newCellHeight,
+          };
+        }
+      }
+
+      state.updateObject(tableId, {
+        width: newWidth,
+        height: newHeight,
+        tableData: {
+          ...tableData,
+          cellWidth: newCellWidth,
+          cellHeight: newCellHeight,
+          cells: updatedCells,
+        },
+      });
+    },
+    stageRef: null,
+    setStageRef: (ref) => set({ stageRef: ref }),
+    layerRef: null,
+    setLayerRef: (ref) => set({ layerRef: ref }),
+    zoom: 1,
+    setZoom: (zoom) => set({ zoom }),
+    zoomIn: () => {
+      const state = get();
+      const newZoom = Math.min(state.zoom + 0.1, 2);
+      set({ zoom: newZoom });
+    },
+    zoomOut: () => {
+      const state = get();
+      const newZoom = Math.max(state.zoom - 0.1, 0.5);
+      set({ zoom: newZoom });
+    },
+    pages: [initialPage],
+    currentPageId: initialPage.id,
+    addPage: (name) => {
+      const state = get();
+      const pageNumber = state.pages.length + 1;
+      const newPage = createInitialPage(name || `${pageNumber}`);
+      set((state) => ({
+        pages: [...state.pages, newPage],
+        currentPageId: newPage.id,
+        objects: [],
+        selectedObjectId: null,
+      }));
+    },
+    duplicatePage: (pageId) => {
+      const state = get();
+      const pageToDuplicate = state.pages.find((p) => p.id === pageId);
+      if (!pageToDuplicate) return;
+
+      const duplicatedObjects = pageToDuplicate.objects.map((obj) => ({
+        ...obj,
+        id: `${obj.id}-${crypto.randomUUID()}`,
+      }));
+
+      const newPage: Page = {
+        id: `page-${crypto.randomUUID()}`,
+        name: `${pageToDuplicate.name} (کپی)`,
+        objects: duplicatedObjects,
+      };
+
+      set((state) => ({
+        pages: [...state.pages, newPage],
+      }));
+    },
+    deletePage: (pageId) => {
+      const state = get();
+      if (state.pages.length <= 1) return;
+
+      const newPages = state.pages.filter((p) => p.id !== pageId);
+      const newCurrentPageId =
+        state.currentPageId === pageId
+          ? newPages[0]?.id || null
+          : state.currentPageId;
+
+      const newCurrentPage = newPages.find((p) => p.id === newCurrentPageId);
+
+      set({
+        pages: newPages,
+        currentPageId: newCurrentPageId,
+        objects: newCurrentPage?.objects || [],
+        selectedObjectId: null,
+      });
+    },
+    setCurrentPage: (pageId) => {
+      const state = get();
+      const targetPage = state.pages.find((p) => p.id === pageId);
+      if (!targetPage) return;
+
+      // Save current objects to current page before switching
+      const updatedPages = state.currentPageId
+        ? state.pages.map((p) =>
+            p.id === state.currentPageId ? { ...p, objects: state.objects } : p
+          )
+        : state.pages;
+
+      const targetPageFromUpdated = updatedPages.find((p) => p.id === pageId);
+      if (!targetPageFromUpdated) return;
+
+      set({
+        pages: updatedPages,
+        currentPageId: pageId,
+        objects: targetPageFromUpdated.objects,
+        selectedObjectId: null,
+      });
+    },
+    updatePageName: (pageId, name) => {
+      set((state) => ({
+        pages: state.pages.map((p) => (p.id === pageId ? { ...p, name } : p)),
+      }));
+    },
+  };
+});