@node-edit-utils/core 2.3.3 → 2.3.4

package/src/lib/viewport/label/setupViewportDrag.test.ts

@@ -0,0 +1,249 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DragState } from "../../helpers/createDragHandler";
+import * as createDragHandlerModule from "../../helpers/createDragHandler";
+import * as getNodeToolsModule from "../../helpers/getNodeTools";
+import * as sendPostMessageModule from "../../post-message/sendPostMessage";
+import * as getLabelPositionModule from "./helpers/getLabelPosition";
+import * as getTransformValuesModule from "./helpers/getTransformValues";
+import * as getZoomValueModule from "./helpers/getZoomValue";
+import * as selectFirstViewportNodeModule from "./helpers/selectFirstViewportNode";
+import * as setViewportDraggingModule from "./isViewportDragging";
+import { setupViewportDrag } from "./setupViewportDrag";
+
+vi.mock("../../helpers/createDragHandler");
+vi.mock("../../helpers/getNodeTools");
+vi.mock("../../post-message/sendPostMessage");
+vi.mock("./helpers/getLabelPosition");
+vi.mock("./helpers/getTransformValues");
+vi.mock("./helpers/getZoomValue");
+vi.mock("./helpers/selectFirstViewportNode");
+vi.mock("./isViewportDragging");
+
+describe("setupViewportDrag", () => {
+  let labelElement: SVGTextElement;
+  let labelGroup: SVGGElement;
+  let viewportElement: HTMLElement;
+  let mockCleanup: ReturnType<typeof vi.fn>;
+  let mockNodeTools: {
+    refreshHighlightFrame: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(() => {
+    labelGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    labelElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    labelGroup.appendChild(labelElement);
+
+    viewportElement = document.createElement("div");
+    viewportElement.style.transform = "translate3d(100px, 200px, 0px)";
+    document.body.appendChild(viewportElement);
+
+    mockCleanup = vi.fn();
+    mockNodeTools = {
+      refreshHighlightFrame: vi.fn(),
+    };
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockReturnValue(mockCleanup);
+    vi.mocked(getNodeToolsModule.getNodeTools).mockReturnValue(
+      mockNodeTools as unknown as ReturnType<typeof getNodeToolsModule.getNodeTools>
+    );
+    vi.mocked(sendPostMessageModule.sendPostMessage).mockImplementation(() => {});
+    vi.mocked(getLabelPositionModule.getLabelPosition).mockReturnValue({ x: 50, y: 100 });
+    vi.mocked(getTransformValuesModule.getTransformValues).mockReturnValue({ x: 100, y: 200 });
+    vi.mocked(getZoomValueModule.getZoomValue).mockReturnValue(1);
+    vi.mocked(selectFirstViewportNodeModule.selectFirstViewportNode).mockImplementation(() => {});
+    vi.mocked(setViewportDraggingModule.setViewportDragging).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    document.body.removeChild(viewportElement);
+    vi.clearAllMocks();
+  });
+
+  it("should return cleanup function from createDragHandler", () => {
+    const cleanup = setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    expect(cleanup).toBe(mockCleanup);
+  });
+
+  it("should set dragging to true on drag start", () => {
+    let onStartCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStartCallback = callbacks.onStart;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mousedown");
+    const mockState: DragState = { isDragging: true, hasDragged: false, startX: 0, startY: 0 };
+    onStartCallback?.(mockEvent, mockState);
+
+    expect(setViewportDraggingModule.setViewportDragging).toHaveBeenCalledWith(true);
+  });
+
+  it("should select first viewport node on drag start", () => {
+    let onStartCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStartCallback = callbacks.onStart;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mousedown");
+    const mockState: DragState = { isDragging: true, hasDragged: false, startX: 0, startY: 0 };
+    onStartCallback?.(mockEvent, mockState);
+
+    expect(selectFirstViewportNodeModule.selectFirstViewportNode).toHaveBeenCalledWith(viewportElement);
+  });
+
+  it("should update viewport and label positions during drag", () => {
+    let onStartCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+    let onDragCallback: ((event: MouseEvent, state: DragState & { deltaX: number; deltaY: number }) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStartCallback = callbacks.onStart;
+      onDragCallback = callbacks.onDrag;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    // Call onStart first to capture initial positions
+    const startEvent = new MouseEvent("mousedown");
+    const startState: DragState = { isDragging: true, hasDragged: false, startX: 0, startY: 0 };
+    onStartCallback?.(startEvent, startState);
+
+    const mockEvent = new MouseEvent("mousemove");
+    const mockState: DragState & { deltaX: number; deltaY: number } = {
+      isDragging: true,
+      hasDragged: true,
+      startX: 0,
+      startY: 0,
+      deltaX: 50,
+      deltaY: 100,
+    };
+    onDragCallback?.(mockEvent, mockState);
+
+    // Label position should use raw delta (screen space)
+    expect(labelGroup.getAttribute("transform")).toBe("translate(100, 200)");
+    // Viewport position should use zoom-adjusted delta (canvas space)
+    expect(viewportElement.style.transform).toBe("translate3d(150px, 300px, 0)");
+  });
+
+  it("should account for zoom level during drag", () => {
+    vi.mocked(getZoomValueModule.getZoomValue).mockReturnValue(2);
+
+    let onStartCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+    let onDragCallback: ((event: MouseEvent, state: DragState & { deltaX: number; deltaY: number }) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStartCallback = callbacks.onStart;
+      onDragCallback = callbacks.onDrag;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    // Call onStart first to capture initial positions
+    const startEvent = new MouseEvent("mousedown");
+    const startState: DragState = { isDragging: true, hasDragged: false, startX: 0, startY: 0 };
+    onStartCallback?.(startEvent, startState);
+
+    const mockEvent = new MouseEvent("mousemove");
+    const mockState: DragState & { deltaX: number; deltaY: number } = {
+      isDragging: true,
+      hasDragged: true,
+      startX: 0,
+      startY: 0,
+      deltaX: 100,
+      deltaY: 200,
+    };
+    onDragCallback?.(mockEvent, mockState);
+
+    // Delta should be divided by zoom (100/2 = 50, 200/2 = 100)
+    expect(viewportElement.style.transform).toBe("translate3d(150px, 300px, 0)");
+  });
+
+  it("should set dragging to false and refresh highlight on drag stop with hasDragged", () => {
+    let onStopCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStopCallback = callbacks.onStop;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mouseup");
+    const mockState: DragState = { isDragging: false, hasDragged: true, startX: 0, startY: 0 };
+    onStopCallback?.(mockEvent, mockState);
+
+    expect(setViewportDraggingModule.setViewportDragging).toHaveBeenCalledWith(false);
+    expect(mockNodeTools.refreshHighlightFrame).toHaveBeenCalled();
+  });
+
+  it("should send postMessage with final position on drag stop when hasDragged is true", () => {
+    vi.mocked(getTransformValuesModule.getTransformValues).mockReturnValue({ x: 150, y: 250 });
+
+    let onStopCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStopCallback = callbacks.onStop;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mouseup");
+    const mockState: DragState = { isDragging: false, hasDragged: true, startX: 0, startY: 0 };
+    onStopCallback?.(mockEvent, mockState);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("viewport-position-changed", {
+      viewportName: "test-viewport",
+      x: 150,
+      y: 250,
+    });
+  });
+
+  it("should send postMessage with final position on drag stop even when hasDragged is false", () => {
+    vi.mocked(getTransformValuesModule.getTransformValues).mockReturnValue({ x: 100, y: 200 });
+
+    let onStopCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStopCallback = callbacks.onStop;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mouseup");
+    const mockState: DragState = { isDragging: false, hasDragged: false, startX: 0, startY: 0 };
+    onStopCallback?.(mockEvent, mockState);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("viewport-position-changed", {
+      viewportName: "test-viewport",
+      x: 100,
+      y: 200,
+    });
+  });
+
+  it("should set dragging to false on cancel", () => {
+    let onCancelCallback: ((state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onCancelCallback = callbacks.onCancel;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockState: DragState = { isDragging: false, hasDragged: false, startX: 0, startY: 0 };
+    onCancelCallback?.(mockState);
+
+    expect(setViewportDraggingModule.setViewportDragging).toHaveBeenCalledWith(false);
+  });
+});

package/src/lib/viewport/label/{setupViewportLabelDrag.ts → setupViewportDrag.ts}

@@ -5,9 +5,9 @@ import { getLabelPosition } from "./helpers/getLabelPosition";
 import { getTransformValues } from "./helpers/getTransformValues";
 import { getZoomValue } from "./helpers/getZoomValue";
 import { selectFirstViewportNode } from "./helpers/selectFirstViewportNode";
-import { setViewportLabelDragging } from "./isViewportLabelDragging";
+import { setViewportDragging } from "./isViewportDragging";
 
-export const setupViewportLabelDrag = (labelElement: SVGTextElement, viewportElement: HTMLElement, viewportName: string): (() => void) => {
+export const setupViewportDrag = (labelElement: SVGTextElement, viewportElement: HTMLElement, viewportName: string): (() => void) => {
   // Get the parent group element that contains the label
   const labelGroup = labelElement.parentElement as unknown as SVGGElement;
 
@@ -17,7 +17,7 @@ export const setupViewportLabelDrag = (labelElement: SVGTextElement, viewportEle
 
   return createDragHandler(labelElement, {
     onStart: () => {
-      setViewportLabelDragging(true);
+      setViewportDragging(true);
       initialTransform = getTransformValues(viewportElement);
       initialLabelPosition = getLabelPosition(labelGroup);
       selectFirstViewportNode(viewportElement);
@@ -42,28 +42,28 @@ export const setupViewportLabelDrag = (labelElement: SVGTextElement, viewportEle
       viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
     },
     onStop: (_event, { hasDragged }) => {
-      setViewportLabelDragging(false);
+      setViewportDragging(false);
+
+      const finalTransform = getTransformValues(viewportElement);
 
       // If it was a drag, handle drag completion
       if (hasDragged) {
-        const finalTransform = getTransformValues(viewportElement);
-
         // Trigger refresh after drag completes to update highlight frame and labels
         const nodeTools = getNodeTools();
         if (nodeTools?.refreshHighlightFrame) {
           nodeTools.refreshHighlightFrame();
         }
-
-        // Notify parent about the new position
-        sendPostMessage("viewport-position-changed", {
-          viewportName,
-          x: finalTransform.x,
-          y: finalTransform.y,
-        });
       }
+
+      // Always notify parent about the new position on drag stop
+      sendPostMessage("viewport-position-changed", {
+        viewportName,
+        x: finalTransform.x,
+        y: finalTransform.y,
+      });
     },
     onCancel: () => {
-      setViewportLabelDragging(false);
+      setViewportDragging(false);
     },
     onPreventClick: () => {},
   });

package/src/lib/viewport/resize/createResizeHandle.test.ts

@@ -0,0 +1,37 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { createResizeHandle } from "./createResizeHandle";
+
+describe("createResizeHandle", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("should create a resize handle element", () => {
+    const handle = createResizeHandle(container);
+    expect(handle).toBeInstanceOf(HTMLElement);
+  });
+
+  it("should have the resize-handle class", () => {
+    const handle = createResizeHandle(container);
+    expect(handle.classList.contains("resize-handle")).toBe(true);
+  });
+
+  it("should append handle to container", () => {
+    const handle = createResizeHandle(container);
+    expect(container.contains(handle)).toBe(true);
+    expect(container.children).toContain(handle);
+  });
+
+  it("should return the created handle element", () => {
+    const handle = createResizeHandle(container);
+    const foundHandle = container.querySelector(".resize-handle");
+    expect(handle).toBe(foundHandle);
+  });
+});

package/src/lib/viewport/resize/createResizePresets.test.ts

@@ -0,0 +1,75 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { RESIZE_PRESETS } from "../constants";
+import { createResizePresets } from "./createResizePresets";
+
+describe("createResizePresets", () => {
+  let container: HTMLElement;
+  let resizeHandle: HTMLElement;
+  const mockUpdateWidth = vi.fn();
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    resizeHandle = document.createElement("div");
+    container.appendChild(resizeHandle);
+    document.body.appendChild(container);
+    mockUpdateWidth.mockClear();
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("should create presets container", () => {
+    const presets = createResizePresets(resizeHandle, container, mockUpdateWidth);
+    expect(presets).toBeInstanceOf(HTMLElement);
+    expect(presets.classList.contains("resize-presets")).toBe(true);
+  });
+
+  it("should append presets to resize handle", () => {
+    const presets = createResizePresets(resizeHandle, container, mockUpdateWidth);
+    expect(resizeHandle.contains(presets)).toBe(true);
+  });
+
+  it("should create buttons for all presets", () => {
+    createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const buttons = resizeHandle.querySelectorAll(".resize-preset-button");
+    expect(buttons).toHaveLength(RESIZE_PRESETS.length);
+  });
+
+  it("should set correct text content for each button", () => {
+    createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const buttons = resizeHandle.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    RESIZE_PRESETS.forEach((preset, index) => {
+      expect(buttons[index].textContent).toBe(preset.name);
+    });
+  });
+
+  it("should call updateWidth with correct rawValue when button is clicked", () => {
+    createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const buttons = resizeHandle.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+
+    const firstPreset = RESIZE_PRESETS[0];
+    buttons[0].click();
+
+    expect(mockUpdateWidth).toHaveBeenCalledTimes(1);
+    expect(mockUpdateWidth).toHaveBeenCalledWith(container, firstPreset.rawValue);
+  });
+
+  it("should handle clicks on all preset buttons", () => {
+    createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const buttons = resizeHandle.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+
+    buttons.forEach((button, index) => {
+      button.click();
+      expect(mockUpdateWidth).toHaveBeenCalledWith(container, RESIZE_PRESETS[index].rawValue);
+    });
+
+    expect(mockUpdateWidth).toHaveBeenCalledTimes(RESIZE_PRESETS.length);
+  });
+
+  it("should return the presets element", () => {
+    const presets = createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const foundPresets = resizeHandle.querySelector(".resize-presets");
+    expect(presets).toBe(foundPresets);
+  });
+});

package/src/lib/viewport/resize/updateActivePreset.test.ts

@@ -0,0 +1,92 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { RESIZE_PRESETS } from "../constants";
+import { updateActivePreset } from "./updateActivePreset";
+
+describe("updateActivePreset", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("should add is-active class to matching preset button", () => {
+    const presets = document.createElement("div");
+    RESIZE_PRESETS.forEach(() => {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    });
+    container.appendChild(presets);
+
+    const mobilePreset = RESIZE_PRESETS[0];
+    updateActivePreset(container, mobilePreset.rawValue);
+
+    const buttons = container.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    expect(buttons[0].classList.contains("is-active")).toBe(true);
+  });
+
+  it("should remove is-active class from non-matching buttons", () => {
+    const presets = document.createElement("div");
+    RESIZE_PRESETS.forEach(() => {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    });
+    container.appendChild(presets);
+
+    const buttons = container.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    buttons[0].classList.add("is-active");
+    buttons[1].classList.add("is-active");
+
+    const tabletPreset = RESIZE_PRESETS[1];
+    updateActivePreset(container, tabletPreset.rawValue);
+
+    expect(buttons[0].classList.contains("is-active")).toBe(false);
+    expect(buttons[1].classList.contains("is-active")).toBe(true);
+  });
+
+  it("should handle width that doesn't match any preset", () => {
+    const presets = document.createElement("div");
+    RESIZE_PRESETS.forEach(() => {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    });
+    container.appendChild(presets);
+
+    const buttons = container.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    buttons[0].classList.add("is-active");
+
+    updateActivePreset(container, 999);
+
+    buttons.forEach((button) => {
+      expect(button.classList.contains("is-active")).toBe(false);
+    });
+  });
+
+  it("should handle empty container", () => {
+    expect(() => {
+      updateActivePreset(container, 100);
+    }).not.toThrow();
+  });
+
+  it("should handle container with fewer buttons than presets", () => {
+    const presets = document.createElement("div");
+    // Create only 2 buttons when there are 5 presets
+    for (let i = 0; i < 2; i++) {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    }
+    container.appendChild(presets);
+
+    expect(() => {
+      updateActivePreset(container, RESIZE_PRESETS[0].rawValue);
+    }).not.toThrow();
+  });
+});

package/src/lib/viewport/width/calcConstrainedWidth.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+import { RESIZE_CONFIG } from "../constants";
+import { calcConstrainedWidth } from "./calcConstrainedWidth";
+
+describe("calcConstrainedWidth", () => {
+  it("should return startWidth + deltaX when within bounds", () => {
+    const startWidth = 100;
+    const deltaX = 50;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(150);
+  });
+
+  it("should return minWidth when result is below minimum", () => {
+    const startWidth = 10;
+    const deltaX = -10;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(RESIZE_CONFIG.minWidth);
+  });
+
+  it("should return maxWidth when result is above maximum", () => {
+    const startWidth = 2500;
+    const deltaX = 100;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(RESIZE_CONFIG.maxWidth);
+  });
+
+  it("should round the result", () => {
+    const startWidth = 100;
+    const deltaX = 50.7;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(151);
+  });
+
+  it("should handle negative deltaX correctly", () => {
+    const startWidth = 200;
+    const deltaX = -50;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(150);
+  });
+
+  it("should handle zero deltaX", () => {
+    const startWidth = 100;
+    const deltaX = 0;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(100);
+  });
+});

package/src/lib/viewport/width/calcWidth.test.ts

@@ -0,0 +1,68 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { calcWidth } from "./calcWidth";
+
+describe("calcWidth", () => {
+  beforeEach(() => {
+    // Reset zoom data attribute
+    document.body.dataset.zoom = "1";
+  });
+
+  it("should calculate width based on mouse event and start position", () => {
+    const startX = 100;
+    const startWidth = 200;
+    const event = {
+      clientX: 150,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    expect(result).toBe(250);
+  });
+
+  it("should account for zoom level", () => {
+    document.body.dataset.zoom = "2";
+    const startX = 100;
+    const startWidth = 200;
+    const event = {
+      clientX: 150,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    // deltaX = (150 - 100) / 2 = 25
+    expect(result).toBe(225);
+  });
+
+  it("should handle negative deltaX", () => {
+    const startX = 150;
+    const startWidth = 200;
+    const event = {
+      clientX: 100,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    expect(result).toBe(150);
+  });
+
+  it("should default to zoom 1 if dataset.zoom is not set", () => {
+    delete document.body.dataset.zoom;
+    const startX = 100;
+    const startWidth = 200;
+    const event = {
+      clientX: 150,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    expect(result).toBe(250);
+  });
+
+  it("should respect min and max width constraints", () => {
+    const startX = 100;
+    const startWidth = 10;
+    const event = {
+      clientX: 50,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    // Should be clamped to minWidth (4)
+    expect(result).toBe(4);
+  });
+});