@xincli/opentui-core 0.4.6 → 0.4.7

package/src/lib/objects-in-viewport.test.ts

@@ -1,789 +0,0 @@
-import { test, expect, describe } from "bun:test"
-import { getObjectsInViewport } from "./objects-in-viewport.js"
-import type { ViewportBounds } from "../types.js"
-
-interface TestObject {
-  x: number
-  y: number
-  screenX: number
-  screenY: number
-  width: number
-  height: number
-  zIndex: number
-  id: string
-}
-
-function createObject(id: string, x: number, y: number, width: number, height: number, zIndex: number = 0): TestObject {
-  return { id, x, y, screenX: x, screenY: y, width, height, zIndex }
-}
-
-describe("getObjectsInViewport", () => {
-  describe("basic functionality", () => {
-    test("returns empty array for empty input", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 100, height: 100 }
-      const result = getObjectsInViewport(viewport, [])
-      expect(result).toEqual([])
-    })
-
-    test("returns all objects when count is below minTriggerSize", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 100, height: 100 }
-      const objects = [createObject("1", 0, 0, 10, 10), createObject("2", 200, 200, 10, 10)]
-      const result = getObjectsInViewport(viewport, objects, "column", 10, 16)
-      expect(result).toEqual(objects)
-    })
-
-    test("filters objects outside viewport in column direction", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("obj-5")
-      expect(visibleIds).toContain("obj-6")
-      expect(visibleIds).toContain("obj-9")
-      expect(visibleIds).not.toContain("obj-0")
-      expect(visibleIds).not.toContain("obj-15")
-    })
-
-    test("filters objects outside viewport in row direction", () => {
-      const viewport: ViewportBounds = { x: 100, y: 0, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, i * 20, 0, 20, 100))
-
-      const result = getObjectsInViewport(viewport, objects, "row", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("obj-5")
-      expect(visibleIds).toContain("obj-6")
-      expect(visibleIds).toContain("obj-9")
-      expect(visibleIds).not.toContain("obj-0")
-      expect(visibleIds).not.toContain("obj-15")
-    })
-  })
-
-  describe("padding behavior", () => {
-    test("includes objects within padding distance", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 20, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("obj-4")
-      expect(visibleIds).toContain("obj-10")
-    })
-
-    test("respects custom padding values", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = Array.from({ length: 30 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20))
-
-      const resultNoPadding = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const resultWithPadding = getObjectsInViewport(viewport, objects, "column", 50, 16)
-
-      expect(resultWithPadding.length).toBeGreaterThan(resultNoPadding.length)
-    })
-  })
-
-  describe("zIndex sorting", () => {
-    test("sorts visible objects by zIndex", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 10, 100, 10, 20 - i))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      for (let i = 1; i < result.length; i++) {
-        expect(result[i].zIndex).toBeGreaterThanOrEqual(result[i - 1].zIndex)
-      }
-    })
-
-    test("handles objects with same zIndex", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 10, 100, 10, 5))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      expect(result.every((obj) => obj.zIndex === 5)).toBe(true)
-    })
-
-    test("handles mixed zIndex values", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 10, 100, 10, i % 3))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      for (let i = 1; i < result.length; i++) {
-        expect(result[i].zIndex).toBeGreaterThanOrEqual(result[i - 1].zIndex)
-      }
-    })
-  })
-
-  describe("edge cases - boundary conditions", () => {
-    test("includes object that starts at viewport top", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("obj-5")
-    })
-
-    test("excludes object that ends exactly at viewport start (no padding)", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = [
-        createObject("before", 0, 50, 100, 50),
-        ...Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, (i + 5) * 20, 100, 20)),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).not.toContain("before")
-    })
-
-    test("excludes object that starts exactly at viewport end (no padding)", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = [
-        createObject("after", 0, 200, 100, 20),
-        ...Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20)),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).not.toContain("after")
-    })
-  })
-
-  describe("cross-axis filtering", () => {
-    test("filters objects outside viewport on cross-axis (column mode)", () => {
-      const viewport: ViewportBounds = { x: 50, y: 100, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) =>
-        createObject(`obj-${i}`, i % 2 === 0 ? 0 : 60, i * 20, 40, 20),
-      )
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      result.forEach((obj) => {
-        const objectRight = obj.x + obj.width
-        expect(objectRight).toBeGreaterThan(viewport.x)
-        expect(obj.x).toBeLessThan(viewport.x + viewport.width)
-      })
-    })
-
-    test("filters objects outside viewport on cross-axis (row mode)", () => {
-      const viewport: ViewportBounds = { x: 100, y: 50, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) =>
-        createObject(`obj-${i}`, i * 20, i % 2 === 0 ? 0 : 60, 20, 40),
-      )
-
-      const result = getObjectsInViewport(viewport, objects, "row", 0, 16)
-
-      result.forEach((obj) => {
-        const objectBottom = obj.y + obj.height
-        expect(objectBottom).toBeGreaterThan(viewport.y)
-        expect(obj.y).toBeLessThan(viewport.y + viewport.height)
-      })
-    })
-  })
-
-  describe("scrolling simulation - vertical", () => {
-    const createScrollList = () => {
-      return Array.from({ length: 100 }, (_, i) => createObject(`item-${i}`, 0, i * 50, 200, 50, i % 10))
-    }
-
-    test("viewport at top", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 200, height: 300 }
-      const objects = createScrollList()
-
-      const result = getObjectsInViewport(viewport, objects, "column", 10, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("item-0")
-      expect(visibleIds).toContain("item-5")
-      expect(visibleIds).not.toContain("item-20")
-    })
-
-    test("viewport scrolled to middle", () => {
-      const viewport: ViewportBounds = { x: 0, y: 2000, width: 200, height: 300 }
-      const objects = createScrollList()
-
-      const result = getObjectsInViewport(viewport, objects, "column", 10, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("item-40")
-      expect(visibleIds).toContain("item-45")
-      expect(visibleIds).not.toContain("item-0")
-      expect(visibleIds).not.toContain("item-99")
-    })
-
-    test("viewport at bottom", () => {
-      const viewport: ViewportBounds = { x: 0, y: 4700, width: 200, height: 300 }
-      const objects = createScrollList()
-
-      const result = getObjectsInViewport(viewport, objects, "column", 10, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("item-94")
-      expect(visibleIds).toContain("item-99")
-      expect(visibleIds).not.toContain("item-0")
-      expect(visibleIds).not.toContain("item-50")
-    })
-
-    test("small incremental scrolls", () => {
-      const objects = createScrollList()
-
-      for (let scrollY = 0; scrollY < 1000; scrollY += 10) {
-        const viewport: ViewportBounds = { x: 0, y: scrollY, width: 200, height: 300 }
-        const result = getObjectsInViewport(viewport, objects, "column", 10, 16)
-
-        result.forEach((obj) => {
-          const objectBottom = obj.y + obj.height
-          expect(objectBottom).toBeGreaterThan(viewport.y - 10)
-          expect(obj.y).toBeLessThan(viewport.y + viewport.height + 10)
-        })
-      }
-    })
-  })
-
-  describe("scrolling simulation - horizontal", () => {
-    const createHorizontalList = () => {
-      return Array.from({ length: 100 }, (_, i) => createObject(`item-${i}`, i * 50, 0, 50, 200, i % 10))
-    }
-
-    test("viewport at left", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 300, height: 200 }
-      const objects = createHorizontalList()
-
-      const result = getObjectsInViewport(viewport, objects, "row", 10, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("item-0")
-      expect(visibleIds).toContain("item-5")
-      expect(visibleIds).not.toContain("item-20")
-    })
-
-    test("viewport scrolled to middle", () => {
-      const viewport: ViewportBounds = { x: 2000, y: 0, width: 300, height: 200 }
-      const objects = createHorizontalList()
-
-      const result = getObjectsInViewport(viewport, objects, "row", 10, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("item-40")
-      expect(visibleIds).toContain("item-45")
-      expect(visibleIds).not.toContain("item-0")
-      expect(visibleIds).not.toContain("item-99")
-    })
-
-    test("viewport at right", () => {
-      const viewport: ViewportBounds = { x: 4700, y: 0, width: 300, height: 200 }
-      const objects = createHorizontalList()
-
-      const result = getObjectsInViewport(viewport, objects, "row", 10, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("item-94")
-      expect(visibleIds).toContain("item-99")
-      expect(visibleIds).not.toContain("item-0")
-    })
-  })
-
-  describe("large objects", () => {
-    test("handles objects much larger than viewport", () => {
-      const viewport: ViewportBounds = { x: 0, y: 500, width: 100, height: 100 }
-      const objects = [
-        ...Array.from({ length: 20 }, (_, i) => createObject(`filler-${i}`, 0, i * 100, 100, 50)),
-        createObject("huge", 0, 100, 100, 1000),
-        createObject("tiny-after", 0, 1200, 100, 10),
-      ].sort((a, b) => a.y - b.y)
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("huge")
-    })
-
-    test("large object with many small items before viewport (realistic background panel)", () => {
-      // Simulates a background panel spanning entire list with small list items
-      const objects = [
-        createObject("background-panel", 0, 0, 100, 3000), // Large spanning background
-        ...Array.from({ length: 30 }, (_, i) => createObject(`item-${i}`, 0, i * 60, 100, 50)), // List items
-        ...Array.from({ length: 20 }, (_, i) => createObject(`filler-${i}`, 0, i * 100 + 3000, 100, 50)),
-      ]
-
-      // Viewport at y=1500, background spans 0-3000, with ~25 items between them
-      const viewport: ViewportBounds = { x: 0, y: 1500, width: 100, height: 100 }
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("background-panel")
-    })
-
-    test("handles very tall objects in vertical scroll", () => {
-      const objects = [
-        createObject("small-1", 0, 0, 100, 50),
-        createObject("tall-1", 0, 100, 100, 500),
-        createObject("small-2", 0, 650, 100, 50),
-        createObject("tall-2", 0, 750, 100, 800),
-        createObject("small-3", 0, 1600, 100, 50),
-        ...Array.from({ length: 20 }, (_, i) => createObject(`filler-${i}`, 0, i * 100 + 2000, 100, 50)),
-      ]
-
-      for (let scrollY = 0; scrollY < 2000; scrollY += 100) {
-        const viewport: ViewportBounds = { x: 0, y: scrollY, width: 100, height: 200 }
-        const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-        result.forEach((obj) => {
-          const objectBottom = obj.y + obj.height
-          expect(objectBottom).toBeGreaterThan(viewport.y)
-          expect(obj.y).toBeLessThan(viewport.y + viewport.height)
-        })
-      }
-    })
-
-    test("handles very wide objects in horizontal scroll", () => {
-      const objects = [
-        createObject("small-1", 0, 0, 50, 100),
-        createObject("wide-1", 100, 0, 500, 100),
-        createObject("small-2", 650, 0, 50, 100),
-        createObject("wide-2", 750, 0, 800, 100),
-        ...Array.from({ length: 20 }, (_, i) => createObject(`filler-${i}`, i * 100 + 2000, 0, 50, 100)),
-      ]
-
-      for (let scrollX = 0; scrollX < 2000; scrollX += 100) {
-        const viewport: ViewportBounds = { x: scrollX, y: 0, width: 200, height: 100 }
-        const result = getObjectsInViewport(viewport, objects, "row", 0, 16)
-
-        result.forEach((obj) => {
-          const objectRight = obj.x + obj.width
-          expect(objectRight).toBeGreaterThan(viewport.x)
-          expect(obj.x).toBeLessThan(viewport.x + viewport.width)
-        })
-      }
-    })
-  })
-
-  describe("viewport size variations", () => {
-    const objects = Array.from({ length: 100 }, (_, i) => createObject(`item-${i}`, 0, i * 30, 200, 30, i % 5))
-
-    test("very small viewport", () => {
-      const viewport: ViewportBounds = { x: 0, y: 500, width: 50, height: 50 }
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      expect(result.length).toBeGreaterThan(0)
-      expect(result.length).toBeLessThan(10)
-    })
-
-    test("very large viewport", () => {
-      const viewport: ViewportBounds = { x: 0, y: 500, width: 1000, height: 1000 }
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      expect(result.length).toBeGreaterThan(30)
-    })
-
-    test("viewport larger than all objects", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 500, height: 5000 }
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      expect(result.length).toBe(objects.length)
-    })
-  })
-
-  describe("negative coordinates", () => {
-    test("handles negative viewport coordinates", () => {
-      const viewport: ViewportBounds = { x: -50, y: -50, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, -100, i * 20 - 100, 200, 20))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      result.forEach((obj) => {
-        const objectBottom = obj.y + obj.height
-        expect(objectBottom).toBeGreaterThan(viewport.y)
-        expect(obj.y).toBeLessThan(viewport.y + viewport.height)
-      })
-    })
-
-    test("handles negative object coordinates", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 100, height: 100 }
-      const objects = [createObject("negative-y", 0, -50, 100, 100), createObject("positive-y", 0, 50, 100, 100)]
-      objects.push(...Array.from({ length: 20 }, (_, i) => createObject(`filler-${i}`, 0, i * 20, 100, 20)))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("negative-y")
-      expect(visibleIds).toContain("positive-y")
-    })
-  })
-
-  describe("sparse object distributions", () => {
-    test("handles large gaps between objects", () => {
-      const viewport: ViewportBounds = { x: 0, y: 5000, width: 100, height: 100 }
-      const objects = Array.from({ length: 50 }, (_, i) => createObject(`obj-${i}`, 0, i * 1000, 100, 50))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("obj-5")
-      expect(result.length).toBeLessThan(5)
-    })
-
-    test("handles clustered objects", () => {
-      const viewport: ViewportBounds = { x: 0, y: 500, width: 100, height: 100 }
-      const objects = [
-        ...Array.from({ length: 10 }, (_, i) => createObject(`cluster-${i}`, 0, 490 + i * 2, 100, 2)),
-        ...Array.from({ length: 10 }, (_, i) => createObject(`filler-${i}`, 0, i * 100, 100, 20)),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      expect(result.length).toBeGreaterThan(5)
-    })
-  })
-
-  describe("minTriggerSize parameter", () => {
-    test("bypasses optimization when object count is below threshold", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 100, height: 100 }
-      const objects = [createObject("far-away", 0, 10000, 100, 100), createObject("visible", 0, 50, 100, 100)]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 100)
-      expect(result.length).toBe(2)
-      expect(result.map((o) => o.id)).toContain("far-away")
-    })
-
-    test("applies optimization when object count meets threshold", () => {
-      const viewport: ViewportBounds = { x: 0, y: 0, width: 100, height: 100 }
-      const objects = [
-        ...Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20)),
-        createObject("far-away", 0, 10000, 100, 100),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      expect(result.map((o) => o.id)).not.toContain("far-away")
-    })
-
-    test("performs overlap checks when minTriggerSize is 0", () => {
-      const viewport: ViewportBounds = { x: 0, y: 10, width: 40, height: 1 }
-      const objects = [createObject("above-viewport", 0, 0, 40, 5), createObject("in-viewport", 0, 10, 40, 1)]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 0)
-      expect(result.length).toBe(1)
-      expect(result[0].id).toBe("in-viewport")
-    })
-
-    test("filters out objects outside viewport when minTriggerSize is 0", () => {
-      const viewport: ViewportBounds = { x: 0, y: 10, width: 40, height: 5 }
-      const objects = [
-        createObject("above-1", 0, 0, 40, 3),
-        createObject("above-2", 0, 5, 40, 4),
-        createObject("in-viewport", 0, 12, 40, 2),
-        createObject("below", 0, 20, 40, 5),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 0)
-      expect(result.length).toBe(1)
-      expect(result[0].id).toBe("in-viewport")
-    })
-
-    test("respects exact boundary conditions with minTriggerSize 0", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = [
-        createObject("ends-at-start", 0, 50, 100, 50),
-        createObject("overlaps-start", 0, 50, 100, 51),
-        createObject("inside", 0, 150, 100, 20),
-        createObject("overlaps-end", 0, 199, 100, 10),
-        createObject("starts-at-end", 0, 200, 100, 50),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 0)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).not.toContain("ends-at-start")
-      expect(visibleIds).toContain("overlaps-start")
-      expect(visibleIds).toContain("inside")
-      expect(visibleIds).toContain("overlaps-end")
-      expect(visibleIds).not.toContain("starts-at-end")
-    })
-  })
-
-  describe("overlapping objects", () => {
-    test("handles completely overlapping objects", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = [
-        ...Array.from({ length: 10 }, (_, i) => createObject(`filler-before-${i}`, 0, i * 20, 100, 20)),
-        createObject("back", 0, 100, 100, 100, 0),
-        createObject("middle", 0, 100, 100, 100, 1),
-        createObject("front", 0, 100, 100, 100, 2),
-        ...Array.from({ length: 10 }, (_, i) => createObject(`filler-after-${i}`, 0, (i + 10) * 20, 100, 20)),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const overlapping = result.filter(
-        (obj) => obj.id.includes("back") || obj.id.includes("middle") || obj.id.includes("front"),
-      )
-
-      expect(overlapping[0].id).toBe("back")
-      expect(overlapping[1].id).toBe("middle")
-      expect(overlapping[2].id).toBe("front")
-    })
-
-    test("handles partially overlapping objects", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = Array.from({ length: 30 }, (_, i) => createObject(`obj-${i}`, 0, i * 15, 100, 30, i % 3))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      for (let i = 1; i < result.length; i++) {
-        expect(result[i].zIndex).toBeGreaterThanOrEqual(result[i - 1].zIndex)
-      }
-    })
-  })
-
-  describe("extreme values", () => {
-    test("zero-sized viewport returns empty array (zero width)", () => {
-      const viewport: ViewportBounds = { x: 100, y: 100, width: 0, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      expect(result.length).toBe(0)
-    })
-
-    test("zero-sized viewport returns empty array (zero height)", () => {
-      const viewport: ViewportBounds = { x: 100, y: 100, width: 100, height: 0 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      expect(result.length).toBe(0)
-    })
-
-    test("zero-sized viewport returns empty array (both zero)", () => {
-      const viewport: ViewportBounds = { x: 100, y: 100, width: 0, height: 0 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 20))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      expect(result.length).toBe(0)
-    })
-
-    test("handles zero-sized objects", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = Array.from({ length: 20 }, (_, i) => createObject(`obj-${i}`, 0, i * 20, 100, 0))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      expect(result).toBeDefined()
-    })
-
-    test("handles very large coordinates", () => {
-      const viewport: ViewportBounds = { x: 1000000, y: 1000000, width: 100, height: 100 }
-      const objects = Array.from({ length: 50 }, (_, i) => createObject(`obj-${i}`, 1000000, 1000000 + i * 20, 100, 20))
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      expect(result.length).toBeGreaterThan(0)
-    })
-  })
-
-  describe("performance characteristics", () => {
-    test("handles 1000 objects efficiently", () => {
-      const viewport: ViewportBounds = { x: 0, y: 50000, width: 100, height: 100 }
-      const objects = Array.from({ length: 1000 }, (_, i) => createObject(`obj-${i}`, 0, i * 100, 100, 100, i % 10))
-
-      const start = performance.now()
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const duration = performance.now() - start
-
-      expect(result.length).toBeGreaterThan(0)
-      expect(result.length).toBeLessThan(20)
-      expect(duration).toBeLessThan(10)
-    })
-
-    test("handles 10000 objects efficiently", () => {
-      const viewport: ViewportBounds = { x: 0, y: 500000, width: 100, height: 100 }
-      const objects = Array.from({ length: 10000 }, (_, i) => createObject(`obj-${i}`, 0, i * 100, 100, 100, i % 10))
-
-      const start = performance.now()
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const duration = performance.now() - start
-
-      expect(result.length).toBeGreaterThan(0)
-      expect(result.length).toBeLessThan(20)
-      expect(duration).toBeLessThan(50)
-    })
-  })
-
-  describe("additional edge cases", () => {
-    test("object that starts before viewport and extends through it", () => {
-      const viewport: ViewportBounds = { x: 0, y: 500, width: 100, height: 100 }
-      const objects = Array.from({ length: 30 }, (_, i) => {
-        if (i === 2) {
-          return createObject("spanning", 0, 200, 100, 500)
-        }
-        return createObject(`obj-${i}`, 0, i * 50, 100, 40)
-      })
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      expect(visibleIds).toContain("spanning")
-    })
-
-    test("multiple large overlapping objects during scroll", () => {
-      const objects = [
-        createObject("bg-1", 0, 0, 200, 1000, 0),
-        createObject("bg-2", 0, 500, 200, 1000, 0),
-        createObject("bg-3", 0, 1000, 200, 1000, 0),
-        ...Array.from({ length: 50 }, (_, i) => createObject(`small-${i}`, 0, i * 50, 200, 40, 1)),
-      ]
-
-      for (let scrollY = 0; scrollY <= 1500; scrollY += 100) {
-        const viewport: ViewportBounds = { x: 0, y: scrollY, width: 200, height: 300 }
-        const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-        result.forEach((obj) => {
-          const objectBottom = obj.y + obj.height
-          expect(objectBottom).toBeGreaterThan(viewport.y)
-          expect(obj.y).toBeLessThan(viewport.y + viewport.height)
-        })
-      }
-    })
-
-    test("viewport moves down through very tall object", () => {
-      const objects = [
-        ...Array.from({ length: 5 }, (_, i) => createObject(`before-${i}`, 0, i * 50, 100, 40)),
-        createObject("very-tall", 0, 300, 100, 2000),
-        ...Array.from({ length: 20 }, (_, i) => createObject(`after-${i}`, 0, 2400 + i * 50, 100, 40)),
-      ]
-
-      for (let scrollY = 0; scrollY <= 2500; scrollY += 200) {
-        const viewport: ViewportBounds = { x: 0, y: scrollY, width: 100, height: 200 }
-        const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-        if (scrollY >= 100 && scrollY <= 2100) {
-          const visibleIds = result.map((o) => o.id)
-          expect(visibleIds).toContain("very-tall")
-        }
-      }
-    })
-
-    test("objects with zero width or height", () => {
-      const viewport: ViewportBounds = { x: 0, y: 100, width: 100, height: 100 }
-      const objects = [
-        createObject("zero-height", 0, 150, 100, 0),
-        createObject("zero-width", 0, 160, 0, 40),
-        createObject("point", 0, 170, 0, 0),
-        ...Array.from({ length: 20 }, (_, i) => createObject(`normal-${i}`, 0, i * 20, 100, 15)),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      expect(result).toBeDefined()
-    })
-
-    test("viewport positioned between objects (should return empty)", () => {
-      const viewport: ViewportBounds = { x: 0, y: 1000, width: 100, height: 100 }
-      const objects = [
-        ...Array.from({ length: 10 }, (_, i) => createObject(`before-${i}`, 0, i * 50, 100, 40)),
-        ...Array.from({ length: 10 }, (_, i) => createObject(`after-${i}`, 0, 2000 + i * 50, 100, 40)),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      expect(result.length).toBe(0)
-    })
-
-    test("single pixel gaps between objects and viewport", () => {
-      const viewport: ViewportBounds = { x: 0, y: 1000, width: 100, height: 100 }
-      const objects = [
-        createObject("one-pixel-before", 0, 899, 100, 100), // ends at 999, gap of 1px
-        createObject("touching-before", 0, 999, 100, 1), // ends exactly at 1000
-        createObject("inside", 0, 1050, 100, 10), // fully inside
-        createObject("touching-after", 0, 1100, 100, 1), // starts exactly at 1100
-        createObject("one-pixel-after", 0, 1101, 100, 100), // starts at 1101, gap of 1px
-        ...Array.from({ length: 20 }, (_, i) => createObject(`filler-${i}`, 0, i * 100, 100, 50)),
-      ]
-
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-      const visibleIds = result.map((o) => o.id)
-
-      // Objects with even 1px gap should be excluded (no overlap)
-      expect(visibleIds).not.toContain("one-pixel-before")
-      expect(visibleIds).not.toContain("touching-before")
-      expect(visibleIds).toContain("inside")
-      expect(visibleIds).not.toContain("touching-after")
-      expect(visibleIds).not.toContain("one-pixel-after")
-    })
-  })
-
-  describe("stress test - continuous scrolling", () => {
-    test("scrolling through 1000 objects with varying heights", () => {
-      const heights = [20, 50, 30, 100, 40, 60, 25, 80, 35, 70]
-      let currentY = 0
-      const objects = Array.from({ length: 1000 }, (_, i) => {
-        const height = heights[i % heights.length]
-        const obj = createObject(`item-${i}`, 0, currentY, 200, height, i % 5)
-        currentY += height + 2
-        return obj
-      })
-
-      const totalHeight = currentY
-      const viewportHeight = 400
-
-      for (let scrollY = 0; scrollY < totalHeight - viewportHeight; scrollY += 100) {
-        const viewport: ViewportBounds = { x: 0, y: scrollY, width: 200, height: viewportHeight }
-        const result = getObjectsInViewport(viewport, objects, "column", 50, 16)
-
-        result.forEach((obj) => {
-          const objectBottom = obj.y + obj.height
-          expect(objectBottom).toBeGreaterThan(viewport.y - 50)
-          expect(obj.y).toBeLessThan(viewport.y + viewport.height + 50)
-        })
-
-        expect(result.length).toBeGreaterThan(0)
-        expect(result.length).toBeLessThan(50)
-      }
-    })
-  })
-
-  describe("realistic scroll scenarios", () => {
-    test("chat-like interface with variable height messages", () => {
-      const heights = [30, 60, 45, 90, 120, 35, 50, 75, 40, 100]
-      let currentY = 0
-      const objects = Array.from({ length: 100 }, (_, i) => {
-        const height = heights[i % heights.length]
-        const obj = createObject(`msg-${i}`, 0, currentY, 300, height, 0)
-        currentY += height + 5
-        return obj
-      })
-
-      for (let scroll = 0; scroll < currentY - 500; scroll += 50) {
-        const viewport: ViewportBounds = { x: 0, y: scroll, width: 300, height: 500 }
-        const result = getObjectsInViewport(viewport, objects, "column", 20, 16)
-
-        result.forEach((obj) => {
-          const objectBottom = obj.y + obj.height
-          expect(objectBottom).toBeGreaterThan(viewport.y - 20)
-          expect(obj.y).toBeLessThan(viewport.y + viewport.height + 20)
-        })
-      }
-    })
-
-    test("grid layout with multiple columns", () => {
-      const objects = Array.from({ length: 200 }, (_, i) => {
-        const col = i % 4
-        const row = Math.floor(i / 4)
-        return createObject(`item-${i}`, col * 110, row * 110, 100, 100, 0)
-      })
-
-      const viewport: ViewportBounds = { x: 0, y: 1000, width: 440, height: 400 }
-      const result = getObjectsInViewport(viewport, objects, "column", 0, 16)
-
-      expect(result.length).toBeGreaterThan(0)
-      expect(result.length).toBeLessThan(30)
-
-      result.forEach((obj) => {
-        expect(obj.y + obj.height).toBeGreaterThan(viewport.y)
-        expect(obj.y).toBeLessThan(viewport.y + viewport.height)
-        expect(obj.x + obj.width).toBeGreaterThan(viewport.x)
-        expect(obj.x).toBeLessThan(viewport.x + viewport.width)
-      })
-    })
-  })
-})