petersburg 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 xfaSts9cwY6VqLNTMAtR
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,155 @@
+# Petersburg
+
+A React layout library implementing Hermitage-style 2D bin-packing for picture arrangement.
+
+Named after the Hermitage Museum in St. Petersburg, where curators arrange paintings tetris-style to maximize limited wall space.
+
+## Features
+
+- **MaxRects bin-packing algorithm** — efficient 2D rectangle packing
+- **Multiple sort strategies** — optimize for packing efficiency or preserve input order
+- **Responsive** — auto-measures container and recalculates on resize
+- **Accessible** — DOM order matches visual flow for proper tab navigation
+- **Lightweight** — no dependencies beyond React
+
+## Installation
+
+```bash
+npm install petersburg
+```
+
+## Basic Usage
+
+```tsx
+import { HermitageLayout } from 'petersburg';
+
+const items = [
+  { id: '1', width: 200, height: 150, content: <img src="..." /> },
+  { id: '2', width: 100, height: 100, content: <img src="..." /> },
+  { id: '3', width: 150, height: 200, content: <img src="..." /> },
+];
+
+function Gallery() {
+  return (
+    <HermitageLayout
+      items={items}
+      gap={8}
+      sortStrategy="ordered"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `LayoutItem[]` | required | Array of items to layout |
+| `containerWidth` | `number` | auto | Fixed width in pixels. If omitted, measures parent container. |
+| `gap` | `number` | `8` | Gap between items in pixels |
+| `sortStrategy` | `SortStrategy` | `"none"` | How to order items during packing |
+| `className` | `string` | — | CSS class for the container |
+
+## Types
+
+```tsx
+interface LayoutItem {
+  id: string;
+  width: number;
+  height: number;
+  content: ReactNode;
+}
+
+type SortStrategy =
+  | "none"        // Keep input order
+  | "height-desc" // Sort by height descending (best packing)
+  | "ordered";    // Row 1 strict order, row 2+ flexible
+```
+
+## Sort Strategies
+
+### `none`
+Items are placed in input order using the MaxRects algorithm. Good for when your input is already sorted (e.g., by date) and you want to preserve that order as much as possible.
+
+### `height-desc`
+Items are sorted by height (tallest first) before packing. This typically produces the most compact layout with minimal wasted space.
+
+### `ordered`
+A hybrid approach for galleries where order matters at the top but efficiency matters overall:
+- **Row 1**: Items placed strictly left-to-right in input order
+- **Row 2**: Next batch of items, can be reordered within the row to fill gaps
+- **Row 3+**: Full algorithmic freedom for optimal packing
+
+This is ideal for "newest items at top" layouts where the first row should show items 1, 2, 3... in order, but lower rows can be optimized.
+
+## Responsive Layouts
+
+Omit `containerWidth` to enable responsive mode:
+
+```tsx
+<div style={{ width: '100%' }}>
+  <HermitageLayout items={items} gap={8} />
+</div>
+```
+
+The component will measure its parent container and recalculate the layout when the container resizes.
+
+## Fixed Width
+
+For fixed-width layouts, provide `containerWidth`:
+
+```tsx
+<HermitageLayout
+  items={items}
+  containerWidth={800}
+  gap={8}
+/>
+```
+
+## Styling Items
+
+Each item is rendered in an absolutely-positioned wrapper. Style your content to fill it:
+
+```tsx
+const items = [
+  {
+    id: '1',
+    width: 200,
+    height: 150,
+    content: (
+      <img
+        src="..."
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+      />
+    ),
+  },
+];
+```
+
+## Animations
+
+Petersburg intentionally doesn't include animations to stay lightweight. Add your own with CSS transitions:
+
+```css
+.my-gallery img {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+```
+
+Or use your preferred animation library on the item content.
+
+## How It Works
+
+Petersburg uses the **MaxRects** bin-packing algorithm:
+
+1. Start with the full container as free space
+2. For each item, find the best position (topmost, then leftmost)
+3. Place the item and split the remaining free space into new rectangles
+4. Prune redundant free rectangles
+5. Repeat until all items are placed
+
+This produces efficient layouts where items fill gaps left by differently-sized neighbors.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface LayoutItem {
+    id: string;
+    width: number;
+    height: number;
+    content: ReactNode;
+}
+type SortStrategy = "none" | "height-desc" | "ordered";
+interface HermitageLayoutProps {
+    items: LayoutItem[];
+    /** Fixed width. If omitted, component auto-measures its container. */
+    containerWidth?: number;
+    gap?: number;
+    sortStrategy?: SortStrategy;
+    className?: string;
+}
+
+declare function HermitageLayout({ items, containerWidth: fixedWidth, gap, sortStrategy, className, }: HermitageLayoutProps): react_jsx_runtime.JSX.Element;
+
+export { HermitageLayout, type HermitageLayoutProps, type LayoutItem, type SortStrategy };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface LayoutItem {
+    id: string;
+    width: number;
+    height: number;
+    content: ReactNode;
+}
+type SortStrategy = "none" | "height-desc" | "ordered";
+interface HermitageLayoutProps {
+    items: LayoutItem[];
+    /** Fixed width. If omitted, component auto-measures its container. */
+    containerWidth?: number;
+    gap?: number;
+    sortStrategy?: SortStrategy;
+    className?: string;
+}
+
+declare function HermitageLayout({ items, containerWidth: fixedWidth, gap, sortStrategy, className, }: HermitageLayoutProps): react_jsx_runtime.JSX.Element;
+
+export { HermitageLayout, type HermitageLayoutProps, type LayoutItem, type SortStrategy };

package/dist/index.js

@@ -0,0 +1,363 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  HermitageLayout: () => HermitageLayout
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/HermitageLayout.tsx
+var import_react = require("react");
+
+// src/maxrects.ts
+function calcMaxHeight(items, gap) {
+  const totalHeight = items.reduce((sum, item) => sum + item.height + gap, 0);
+  return Math.max(totalHeight, 1e3);
+}
+function sortItems(items, strategy) {
+  if (strategy === "none" || strategy === "ordered") {
+    return items;
+  }
+  const sorted = [...items];
+  switch (strategy) {
+    case "height-desc":
+      sorted.sort((a, b) => b.height - a.height);
+      break;
+  }
+  return sorted;
+}
+function pack(items, containerWidth, gap = 0, sortStrategy = "none") {
+  if (sortStrategy === "ordered") {
+    return packOrdered(items, containerWidth, gap);
+  }
+  const sortedItems = sortItems(items, sortStrategy);
+  const maxHeight = calcMaxHeight(sortedItems, gap);
+  const freeRects = [
+    { x: 0, y: 0, width: containerWidth, height: maxHeight }
+  ];
+  const placements = [];
+  let maxY = 0;
+  for (const item of sortedItems) {
+    const paddedWidth = item.width + gap;
+    const paddedHeight = item.height + gap;
+    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);
+    if (position) {
+      const placement = {
+        id: item.id,
+        x: position.x,
+        y: position.y,
+        width: item.width,
+        height: item.height
+      };
+      placements.push(placement);
+      maxY = Math.max(maxY, position.y + item.height);
+      const placedRect = {
+        x: position.x,
+        y: position.y,
+        width: paddedWidth,
+        height: paddedHeight
+      };
+      splitFreeRects(freeRects, placedRect);
+      pruneFreeRects(freeRects);
+    }
+  }
+  return {
+    placements,
+    totalHeight: maxY
+  };
+}
+function packOrdered(items, containerWidth, gap) {
+  const maxHeight = calcMaxHeight(items, gap);
+  const freeRects = [
+    { x: 0, y: 0, width: containerWidth, height: maxHeight }
+  ];
+  const placements = [];
+  let maxY = 0;
+  let itemIndex = 0;
+  let row1NextX = 0;
+  const row1Count = countRow1Items(items, containerWidth, gap);
+  for (let i = 0; i < row1Count; i++) {
+    const item = items[itemIndex];
+    const paddedWidth = item.width + gap;
+    const paddedHeight = item.height + gap;
+    const placement = {
+      id: item.id,
+      x: row1NextX,
+      y: 0,
+      width: item.width,
+      height: item.height
+    };
+    placements.push(placement);
+    maxY = Math.max(maxY, item.height);
+    const placedRect = {
+      x: row1NextX,
+      y: 0,
+      width: paddedWidth,
+      height: paddedHeight
+    };
+    splitFreeRects(freeRects, placedRect);
+    pruneFreeRects(freeRects);
+    row1NextX += paddedWidth;
+    itemIndex++;
+  }
+  const remainingItems = items.slice(itemIndex);
+  if (remainingItems.length === 0) {
+    return { placements, totalHeight: maxY };
+  }
+  const row2CandidateCount = Math.min(row1Count, remainingItems.length);
+  const row2Candidates = remainingItems.slice(0, row2CandidateCount);
+  const row3Items = remainingItems.slice(row2CandidateCount);
+  const row2Sorted = [...row2Candidates].sort((a, b) => b.height - a.height);
+  for (const item of row2Sorted) {
+    const paddedWidth = item.width + gap;
+    const paddedHeight = item.height + gap;
+    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);
+    if (position) {
+      const placement = {
+        id: item.id,
+        x: position.x,
+        y: position.y,
+        width: item.width,
+        height: item.height
+      };
+      placements.push(placement);
+      maxY = Math.max(maxY, position.y + item.height);
+      const placedRect = {
+        x: position.x,
+        y: position.y,
+        width: paddedWidth,
+        height: paddedHeight
+      };
+      splitFreeRects(freeRects, placedRect);
+      pruneFreeRects(freeRects);
+    }
+  }
+  const row3Sorted = [...row3Items].sort((a, b) => b.height - a.height);
+  for (const item of row3Sorted) {
+    const paddedWidth = item.width + gap;
+    const paddedHeight = item.height + gap;
+    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);
+    if (position) {
+      const placement = {
+        id: item.id,
+        x: position.x,
+        y: position.y,
+        width: item.width,
+        height: item.height
+      };
+      placements.push(placement);
+      maxY = Math.max(maxY, position.y + item.height);
+      const placedRect = {
+        x: position.x,
+        y: position.y,
+        width: paddedWidth,
+        height: paddedHeight
+      };
+      splitFreeRects(freeRects, placedRect);
+      pruneFreeRects(freeRects);
+    }
+  }
+  return {
+    placements,
+    totalHeight: maxY
+  };
+}
+function countRow1Items(items, containerWidth, gap) {
+  let x = 0;
+  let count = 0;
+  for (const item of items) {
+    const paddedWidth = item.width + gap;
+    if (x + paddedWidth > containerWidth + gap) {
+      break;
+    }
+    x += paddedWidth;
+    count++;
+  }
+  return count;
+}
+function findBestPosition(width, height, freeRects) {
+  let bestY = Infinity;
+  let bestX = Infinity;
+  let bestPosition = null;
+  for (const rect of freeRects) {
+    if (width <= rect.width && height <= rect.height) {
+      const x = rect.x;
+      const y = rect.y;
+      if (y < bestY || y === bestY && x < bestX) {
+        bestY = y;
+        bestX = x;
+        bestPosition = { x, y };
+      }
+    }
+  }
+  return bestPosition;
+}
+function splitFreeRects(freeRects, placedRect) {
+  const newRects = [];
+  for (let i = freeRects.length - 1; i >= 0; i--) {
+    const freeRect = freeRects[i];
+    if (!rectsOverlap(freeRect, placedRect)) {
+      continue;
+    }
+    freeRects.splice(i, 1);
+    if (placedRect.x > freeRect.x) {
+      newRects.push({
+        x: freeRect.x,
+        y: freeRect.y,
+        width: placedRect.x - freeRect.x,
+        height: freeRect.height
+      });
+    }
+    const placedRight = placedRect.x + placedRect.width;
+    const freeRight = freeRect.x + freeRect.width;
+    if (placedRight < freeRight) {
+      newRects.push({
+        x: placedRight,
+        y: freeRect.y,
+        width: freeRight - placedRight,
+        height: freeRect.height
+      });
+    }
+    if (placedRect.y > freeRect.y) {
+      newRects.push({
+        x: freeRect.x,
+        y: freeRect.y,
+        width: freeRect.width,
+        height: placedRect.y - freeRect.y
+      });
+    }
+    const placedBottom = placedRect.y + placedRect.height;
+    const freeBottom = freeRect.y + freeRect.height;
+    if (placedBottom < freeBottom) {
+      newRects.push({
+        x: freeRect.x,
+        y: placedBottom,
+        width: freeRect.width,
+        height: freeBottom - placedBottom
+      });
+    }
+  }
+  freeRects.push(...newRects);
+}
+function pruneFreeRects(freeRects) {
+  for (let i = freeRects.length - 1; i >= 0; i--) {
+    for (let j = 0; j < freeRects.length; j++) {
+      if (i === j) continue;
+      if (rectContains(freeRects[j], freeRects[i])) {
+        freeRects.splice(i, 1);
+        break;
+      }
+    }
+  }
+}
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+function rectContains(outer, inner) {
+  return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+}
+
+// src/HermitageLayout.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function HermitageLayout({
+  items,
+  containerWidth: fixedWidth,
+  gap = 8,
+  sortStrategy = "none",
+  className
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const [measuredWidth, setMeasuredWidth] = (0, import_react.useState)(0);
+  const containerWidth = fixedWidth ?? measuredWidth;
+  (0, import_react.useEffect)(() => {
+    if (fixedWidth !== void 0) {
+      return;
+    }
+    const element = containerRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        setMeasuredWidth(width);
+      }
+    });
+    observer.observe(element);
+    setMeasuredWidth(element.getBoundingClientRect().width);
+    return () => observer.disconnect();
+  }, [fixedWidth]);
+  const { placements, totalHeight } = (0, import_react.useMemo)(() => {
+    if (containerWidth === 0) {
+      return { placements: [], totalHeight: 0 };
+    }
+    return pack(items, containerWidth, gap, sortStrategy);
+  }, [items, containerWidth, gap, sortStrategy]);
+  const placementMap = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const p of placements) {
+      map.set(p.id, { x: p.x, y: p.y });
+    }
+    return map;
+  }, [placements]);
+  const sortedItems = (0, import_react.useMemo)(() => {
+    return [...items].sort((a, b) => {
+      const posA = placementMap.get(a.id);
+      const posB = placementMap.get(b.id);
+      if (!posA || !posB) return 0;
+      if (posA.y !== posB.y) return posA.y - posB.y;
+      return posA.x - posB.x;
+    });
+  }, [items, placementMap]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        width: fixedWidth ?? "100%",
+        height: totalHeight || void 0
+      },
+      children: sortedItems.map((item) => {
+        const position = placementMap.get(item.id);
+        if (!position) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: position.x,
+              top: position.y,
+              width: item.width,
+              height: item.height
+            },
+            children: item.content
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HermitageLayout
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/HermitageLayout.tsx","../src/maxrects.ts"],"sourcesContent":["export { HermitageLayout } from \"./HermitageLayout\";\nexport type { HermitageLayoutProps, LayoutItem, SortStrategy } from \"./types\";\n","import { useMemo, useRef, useState, useEffect } from \"react\";\nimport { HermitageLayoutProps } from \"./types\";\nimport { pack } from \"./maxrects\";\n\nexport function HermitageLayout({\n  items,\n  containerWidth: fixedWidth,\n  gap = 8,\n  sortStrategy = \"none\",\n  className,\n}: HermitageLayoutProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [measuredWidth, setMeasuredWidth] = useState<number>(0);\n\n  // Use fixed width if provided, otherwise use measured width\n  const containerWidth = fixedWidth ?? measuredWidth;\n\n  // Measure container width using ResizeObserver\n  useEffect(() => {\n    if (fixedWidth !== undefined) {\n      // Fixed width provided, no need to measure\n      return;\n    }\n\n    const element = containerRef.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const width = entry.contentRect.width;\n        setMeasuredWidth(width);\n      }\n    });\n\n    observer.observe(element);\n\n    // Initial measurement\n    setMeasuredWidth(element.getBoundingClientRect().width);\n\n    return () => observer.disconnect();\n  }, [fixedWidth]);\n\n  const { placements, totalHeight } = useMemo(() => {\n    if (containerWidth === 0) {\n      // Not yet measured, return empty layout\n      return { placements: [], totalHeight: 0 };\n    }\n    return pack(items, containerWidth, gap, sortStrategy);\n  }, [items, containerWidth, gap, sortStrategy]);\n\n  // Create a map for quick lookup of placements by id\n  const placementMap = useMemo(() => {\n    const map = new Map<string, { x: number; y: number }>();\n    for (const p of placements) {\n      map.set(p.id, { x: p.x, y: p.y });\n    }\n    return map;\n  }, [placements]);\n\n  // Sort items by visual position (y, then x) for proper tab order\n  const sortedItems = useMemo(() => {\n    return [...items].sort((a, b) => {\n      const posA = placementMap.get(a.id);\n      const posB = placementMap.get(b.id);\n      if (!posA || !posB) return 0;\n      if (posA.y !== posB.y) return posA.y - posB.y;\n      return posA.x - posB.x;\n    });\n  }, [items, placementMap]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={{\n        position: \"relative\",\n        width: fixedWidth ?? \"100%\",\n        height: totalHeight || undefined,\n      }}\n    >\n      {sortedItems.map((item) => {\n        const position = placementMap.get(item.id);\n        if (!position) return null;\n\n        return (\n          <div\n            key={item.id}\n            style={{\n              position: \"absolute\",\n              left: position.x,\n              top: position.y,\n              width: item.width,\n              height: item.height,\n            }}\n          >\n            {item.content}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","import { Rect, PlacedItem, PackResult, SortStrategy } from \"./types\";\n\ninterface PackInput {\n  id: string;\n  width: number;\n  height: number;\n}\n\n/**\n * Calculate a safe maximum height for the packing area.\n * Uses sum of all item heights as worst-case (vertical stack).\n */\nfunction calcMaxHeight(items: PackInput[], gap: number): number {\n  const totalHeight = items.reduce((sum, item) => sum + item.height + gap, 0);\n  return Math.max(totalHeight, 1000); // At least 1000px\n}\n\nfunction sortItems(items: PackInput[], strategy: SortStrategy): PackInput[] {\n  if (strategy === \"none\" || strategy === \"ordered\") {\n    // \"ordered\" uses a different placement approach, not pre-sorting\n    return items;\n  }\n\n  const sorted = [...items];\n\n  switch (strategy) {\n    case \"height-desc\":\n      sorted.sort((a, b) => b.height - a.height);\n      break;\n  }\n\n  return sorted;\n}\n\n/**\n * MaxRects bin-packing algorithm.\n * Places rectangles in a container, minimizing wasted space.\n */\nexport function pack(\n  items: PackInput[],\n  containerWidth: number,\n  gap: number = 0,\n  sortStrategy: SortStrategy = \"none\"\n): PackResult {\n  if (sortStrategy === \"ordered\") {\n    return packOrdered(items, containerWidth, gap);\n  }\n\n  const sortedItems = sortItems(items, sortStrategy);\n\n  // Start with one large free rectangle\n  const maxHeight = calcMaxHeight(sortedItems, gap);\n  const freeRects: Rect[] = [\n    { x: 0, y: 0, width: containerWidth, height: maxHeight },\n  ];\n\n  const placements: PlacedItem[] = [];\n  let maxY = 0;\n\n  for (const item of sortedItems) {\n    // Account for gap in item dimensions during placement\n    const paddedWidth = item.width + gap;\n    const paddedHeight = item.height + gap;\n\n    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);\n\n    if (position) {\n      const placement: PlacedItem = {\n        id: item.id,\n        x: position.x,\n        y: position.y,\n        width: item.width,\n        height: item.height,\n      };\n      placements.push(placement);\n\n      // Track the maximum Y extent\n      maxY = Math.max(maxY, position.y + item.height);\n\n      // Split free rects around the placed item (using padded dimensions)\n      const placedRect: Rect = {\n        x: position.x,\n        y: position.y,\n        width: paddedWidth,\n        height: paddedHeight,\n      };\n      splitFreeRects(freeRects, placedRect);\n      pruneFreeRects(freeRects);\n    }\n  }\n\n  return {\n    placements,\n    totalHeight: maxY,\n  };\n}\n\n/**\n * Ordered packing strategy:\n * - Row 1 (y=0): Strict input order, left-to-right, no gap filling\n * - Row 2: Next batch of items (in input order), can be reordered for better fit\n * - Row 3+: Full algorithmic freedom (height-desc sorting)\n */\nfunction packOrdered(\n  items: PackInput[],\n  containerWidth: number,\n  gap: number\n): PackResult {\n  // Start with full container as free space\n  const maxHeight = calcMaxHeight(items, gap);\n  const freeRects: Rect[] = [\n    { x: 0, y: 0, width: containerWidth, height: maxHeight },\n  ];\n\n  const placements: PlacedItem[] = [];\n  let maxY = 0;\n  let itemIndex = 0;\n\n  // --- Row 1: Strict left-to-right order at y=0 ---\n  let row1NextX = 0;\n  const row1Count = countRow1Items(items, containerWidth, gap);\n\n  for (let i = 0; i < row1Count; i++) {\n    const item = items[itemIndex];\n    const paddedWidth = item.width + gap;\n    const paddedHeight = item.height + gap;\n\n    const placement: PlacedItem = {\n      id: item.id,\n      x: row1NextX,\n      y: 0,\n      width: item.width,\n      height: item.height,\n    };\n    placements.push(placement);\n\n    maxY = Math.max(maxY, item.height);\n\n    // Update freeRects to account for this placement\n    const placedRect: Rect = {\n      x: row1NextX,\n      y: 0,\n      width: paddedWidth,\n      height: paddedHeight,\n    };\n    splitFreeRects(freeRects, placedRect);\n    pruneFreeRects(freeRects);\n\n    row1NextX += paddedWidth;\n    itemIndex++;\n  }\n\n  // Remaining items after row 1\n  const remainingItems = items.slice(itemIndex);\n\n  if (remainingItems.length === 0) {\n    return { placements, totalHeight: maxY };\n  }\n\n  // --- Row 2: Next batch of items, reorderable for better fit ---\n  // Take roughly the same count as row 1 (or remaining, whichever is smaller)\n  const row2CandidateCount = Math.min(row1Count, remainingItems.length);\n  const row2Candidates = remainingItems.slice(0, row2CandidateCount);\n  const row3Items = remainingItems.slice(row2CandidateCount);\n\n  // Sort row 2 candidates by height-desc for better gap filling\n  const row2Sorted = [...row2Candidates].sort((a, b) => b.height - a.height);\n\n  for (const item of row2Sorted) {\n    const paddedWidth = item.width + gap;\n    const paddedHeight = item.height + gap;\n\n    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);\n\n    if (position) {\n      const placement: PlacedItem = {\n        id: item.id,\n        x: position.x,\n        y: position.y,\n        width: item.width,\n        height: item.height,\n      };\n      placements.push(placement);\n\n      maxY = Math.max(maxY, position.y + item.height);\n\n      const placedRect: Rect = {\n        x: position.x,\n        y: position.y,\n        width: paddedWidth,\n        height: paddedHeight,\n      };\n      splitFreeRects(freeRects, placedRect);\n      pruneFreeRects(freeRects);\n    }\n  }\n\n  // --- Row 3+: Full freedom, height-desc sorting ---\n  const row3Sorted = [...row3Items].sort((a, b) => b.height - a.height);\n\n  for (const item of row3Sorted) {\n    const paddedWidth = item.width + gap;\n    const paddedHeight = item.height + gap;\n\n    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);\n\n    if (position) {\n      const placement: PlacedItem = {\n        id: item.id,\n        x: position.x,\n        y: position.y,\n        width: item.width,\n        height: item.height,\n      };\n      placements.push(placement);\n\n      maxY = Math.max(maxY, position.y + item.height);\n\n      const placedRect: Rect = {\n        x: position.x,\n        y: position.y,\n        width: paddedWidth,\n        height: paddedHeight,\n      };\n      splitFreeRects(freeRects, placedRect);\n      pruneFreeRects(freeRects);\n    }\n  }\n\n  return {\n    placements,\n    totalHeight: maxY,\n  };\n}\n\n/**\n * Count how many items fit in row 1 (strict left-to-right at y=0).\n */\nfunction countRow1Items(\n  items: PackInput[],\n  containerWidth: number,\n  gap: number\n): number {\n  let x = 0;\n  let count = 0;\n\n  for (const item of items) {\n    const paddedWidth = item.width + gap;\n    if (x + paddedWidth > containerWidth + gap) {\n      break;\n    }\n    x += paddedWidth;\n    count++;\n  }\n\n  return count;\n}\n\n/**\n * Find a position for an item, but only accept positions at a specific y.\n */\nfunction findPositionAtY(\n  width: number,\n  height: number,\n  freeRects: Rect[],\n  targetY: number\n): { x: number; y: number } | null {\n  let bestX = Infinity;\n  let bestPosition: { x: number; y: number } | null = null;\n\n  for (const rect of freeRects) {\n    // Only consider rects that start at targetY\n    if (rect.y !== targetY) continue;\n\n    if (width <= rect.width && height <= rect.height) {\n      const x = rect.x;\n      if (x < bestX) {\n        bestX = x;\n        bestPosition = { x, y: targetY };\n      }\n    }\n  }\n\n  return bestPosition;\n}\n\n/**\n * Get the maximum height among a list of items.\n */\nfunction getMaxHeight(items: PackInput[]): number {\n  return items.reduce((max, item) => Math.max(max, item.height), 0);\n}\n\n/**\n * Find the best position for an item using \"Best Y then Best X\" heuristic.\n * Prefers positions higher up (smaller Y), then leftward (smaller X).\n */\nfunction findBestPosition(\n  width: number,\n  height: number,\n  freeRects: Rect[]\n): { x: number; y: number } | null {\n  let bestY = Infinity;\n  let bestX = Infinity;\n  let bestPosition: { x: number; y: number } | null = null;\n\n  for (const rect of freeRects) {\n    // Check if item fits in this free rect\n    if (width <= rect.width && height <= rect.height) {\n      // Position at top-left corner of free rect\n      const x = rect.x;\n      const y = rect.y;\n\n      // Prefer smaller Y, then smaller X\n      if (y < bestY || (y === bestY && x < bestX)) {\n        bestY = y;\n        bestX = x;\n        bestPosition = { x, y };\n      }\n    }\n  }\n\n  return bestPosition;\n}\n\n/**\n * Split free rectangles that overlap with the placed rectangle.\n * Generates up to 4 new rectangles around the placed item.\n */\nfunction splitFreeRects(freeRects: Rect[], placedRect: Rect): void {\n  const newRects: Rect[] = [];\n\n  for (let i = freeRects.length - 1; i >= 0; i--) {\n    const freeRect = freeRects[i];\n\n    // Check if this free rect overlaps with placed rect\n    if (!rectsOverlap(freeRect, placedRect)) {\n      continue;\n    }\n\n    // Remove the overlapping free rect\n    freeRects.splice(i, 1);\n\n    // Generate new free rects from the non-overlapping portions\n\n    // Left portion\n    if (placedRect.x > freeRect.x) {\n      newRects.push({\n        x: freeRect.x,\n        y: freeRect.y,\n        width: placedRect.x - freeRect.x,\n        height: freeRect.height,\n      });\n    }\n\n    // Right portion\n    const placedRight = placedRect.x + placedRect.width;\n    const freeRight = freeRect.x + freeRect.width;\n    if (placedRight < freeRight) {\n      newRects.push({\n        x: placedRight,\n        y: freeRect.y,\n        width: freeRight - placedRight,\n        height: freeRect.height,\n      });\n    }\n\n    // Top portion\n    if (placedRect.y > freeRect.y) {\n      newRects.push({\n        x: freeRect.x,\n        y: freeRect.y,\n        width: freeRect.width,\n        height: placedRect.y - freeRect.y,\n      });\n    }\n\n    // Bottom portion\n    const placedBottom = placedRect.y + placedRect.height;\n    const freeBottom = freeRect.y + freeRect.height;\n    if (placedBottom < freeBottom) {\n      newRects.push({\n        x: freeRect.x,\n        y: placedBottom,\n        width: freeRect.width,\n        height: freeBottom - placedBottom,\n      });\n    }\n  }\n\n  // Add all new rects\n  freeRects.push(...newRects);\n}\n\n/**\n * Remove free rectangles that are fully contained within other free rectangles.\n */\nfunction pruneFreeRects(freeRects: Rect[]): void {\n  for (let i = freeRects.length - 1; i >= 0; i--) {\n    for (let j = 0; j < freeRects.length; j++) {\n      if (i === j) continue;\n\n      if (rectContains(freeRects[j], freeRects[i])) {\n        freeRects.splice(i, 1);\n        break;\n      }\n    }\n  }\n}\n\n/**\n * Check if two rectangles overlap.\n */\nfunction rectsOverlap(a: Rect, b: Rect): boolean {\n  return (\n    a.x < b.x + b.width &&\n    a.x + a.width > b.x &&\n    a.y < b.y + b.height &&\n    a.y + a.height > b.y\n  );\n}\n\n/**\n * Check if rectangle `outer` fully contains rectangle `inner`.\n */\nfunction rectContains(outer: Rect, inner: Rect): boolean {\n  return (\n    inner.x >= outer.x &&\n    inner.y >= outer.y &&\n    inner.x + inner.width <= outer.x + outer.width &&\n    inner.y + inner.height <= outer.y + outer.height\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,336 @@
+// src/HermitageLayout.tsx
+import { useMemo, useRef, useState, useEffect } from "react";
+
+// src/maxrects.ts
+function calcMaxHeight(items, gap) {
+  const totalHeight = items.reduce((sum, item) => sum + item.height + gap, 0);
+  return Math.max(totalHeight, 1e3);
+}
+function sortItems(items, strategy) {
+  if (strategy === "none" || strategy === "ordered") {
+    return items;
+  }
+  const sorted = [...items];
+  switch (strategy) {
+    case "height-desc":
+      sorted.sort((a, b) => b.height - a.height);
+      break;
+  }
+  return sorted;
+}
+function pack(items, containerWidth, gap = 0, sortStrategy = "none") {
+  if (sortStrategy === "ordered") {
+    return packOrdered(items, containerWidth, gap);
+  }
+  const sortedItems = sortItems(items, sortStrategy);
+  const maxHeight = calcMaxHeight(sortedItems, gap);
+  const freeRects = [
+    { x: 0, y: 0, width: containerWidth, height: maxHeight }
+  ];
+  const placements = [];
+  let maxY = 0;
+  for (const item of sortedItems) {
+    const paddedWidth = item.width + gap;
+    const paddedHeight = item.height + gap;
+    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);
+    if (position) {
+      const placement = {
+        id: item.id,
+        x: position.x,
+        y: position.y,
+        width: item.width,
+        height: item.height
+      };
+      placements.push(placement);
+      maxY = Math.max(maxY, position.y + item.height);
+      const placedRect = {
+        x: position.x,
+        y: position.y,
+        width: paddedWidth,
+        height: paddedHeight
+      };
+      splitFreeRects(freeRects, placedRect);
+      pruneFreeRects(freeRects);
+    }
+  }
+  return {
+    placements,
+    totalHeight: maxY
+  };
+}
+function packOrdered(items, containerWidth, gap) {
+  const maxHeight = calcMaxHeight(items, gap);
+  const freeRects = [
+    { x: 0, y: 0, width: containerWidth, height: maxHeight }
+  ];
+  const placements = [];
+  let maxY = 0;
+  let itemIndex = 0;
+  let row1NextX = 0;
+  const row1Count = countRow1Items(items, containerWidth, gap);
+  for (let i = 0; i < row1Count; i++) {
+    const item = items[itemIndex];
+    const paddedWidth = item.width + gap;
+    const paddedHeight = item.height + gap;
+    const placement = {
+      id: item.id,
+      x: row1NextX,
+      y: 0,
+      width: item.width,
+      height: item.height
+    };
+    placements.push(placement);
+    maxY = Math.max(maxY, item.height);
+    const placedRect = {
+      x: row1NextX,
+      y: 0,
+      width: paddedWidth,
+      height: paddedHeight
+    };
+    splitFreeRects(freeRects, placedRect);
+    pruneFreeRects(freeRects);
+    row1NextX += paddedWidth;
+    itemIndex++;
+  }
+  const remainingItems = items.slice(itemIndex);
+  if (remainingItems.length === 0) {
+    return { placements, totalHeight: maxY };
+  }
+  const row2CandidateCount = Math.min(row1Count, remainingItems.length);
+  const row2Candidates = remainingItems.slice(0, row2CandidateCount);
+  const row3Items = remainingItems.slice(row2CandidateCount);
+  const row2Sorted = [...row2Candidates].sort((a, b) => b.height - a.height);
+  for (const item of row2Sorted) {
+    const paddedWidth = item.width + gap;
+    const paddedHeight = item.height + gap;
+    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);
+    if (position) {
+      const placement = {
+        id: item.id,
+        x: position.x,
+        y: position.y,
+        width: item.width,
+        height: item.height
+      };
+      placements.push(placement);
+      maxY = Math.max(maxY, position.y + item.height);
+      const placedRect = {
+        x: position.x,
+        y: position.y,
+        width: paddedWidth,
+        height: paddedHeight
+      };
+      splitFreeRects(freeRects, placedRect);
+      pruneFreeRects(freeRects);
+    }
+  }
+  const row3Sorted = [...row3Items].sort((a, b) => b.height - a.height);
+  for (const item of row3Sorted) {
+    const paddedWidth = item.width + gap;
+    const paddedHeight = item.height + gap;
+    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);
+    if (position) {
+      const placement = {
+        id: item.id,
+        x: position.x,
+        y: position.y,
+        width: item.width,
+        height: item.height
+      };
+      placements.push(placement);
+      maxY = Math.max(maxY, position.y + item.height);
+      const placedRect = {
+        x: position.x,
+        y: position.y,
+        width: paddedWidth,
+        height: paddedHeight
+      };
+      splitFreeRects(freeRects, placedRect);
+      pruneFreeRects(freeRects);
+    }
+  }
+  return {
+    placements,
+    totalHeight: maxY
+  };
+}
+function countRow1Items(items, containerWidth, gap) {
+  let x = 0;
+  let count = 0;
+  for (const item of items) {
+    const paddedWidth = item.width + gap;
+    if (x + paddedWidth > containerWidth + gap) {
+      break;
+    }
+    x += paddedWidth;
+    count++;
+  }
+  return count;
+}
+function findBestPosition(width, height, freeRects) {
+  let bestY = Infinity;
+  let bestX = Infinity;
+  let bestPosition = null;
+  for (const rect of freeRects) {
+    if (width <= rect.width && height <= rect.height) {
+      const x = rect.x;
+      const y = rect.y;
+      if (y < bestY || y === bestY && x < bestX) {
+        bestY = y;
+        bestX = x;
+        bestPosition = { x, y };
+      }
+    }
+  }
+  return bestPosition;
+}
+function splitFreeRects(freeRects, placedRect) {
+  const newRects = [];
+  for (let i = freeRects.length - 1; i >= 0; i--) {
+    const freeRect = freeRects[i];
+    if (!rectsOverlap(freeRect, placedRect)) {
+      continue;
+    }
+    freeRects.splice(i, 1);
+    if (placedRect.x > freeRect.x) {
+      newRects.push({
+        x: freeRect.x,
+        y: freeRect.y,
+        width: placedRect.x - freeRect.x,
+        height: freeRect.height
+      });
+    }
+    const placedRight = placedRect.x + placedRect.width;
+    const freeRight = freeRect.x + freeRect.width;
+    if (placedRight < freeRight) {
+      newRects.push({
+        x: placedRight,
+        y: freeRect.y,
+        width: freeRight - placedRight,
+        height: freeRect.height
+      });
+    }
+    if (placedRect.y > freeRect.y) {
+      newRects.push({
+        x: freeRect.x,
+        y: freeRect.y,
+        width: freeRect.width,
+        height: placedRect.y - freeRect.y
+      });
+    }
+    const placedBottom = placedRect.y + placedRect.height;
+    const freeBottom = freeRect.y + freeRect.height;
+    if (placedBottom < freeBottom) {
+      newRects.push({
+        x: freeRect.x,
+        y: placedBottom,
+        width: freeRect.width,
+        height: freeBottom - placedBottom
+      });
+    }
+  }
+  freeRects.push(...newRects);
+}
+function pruneFreeRects(freeRects) {
+  for (let i = freeRects.length - 1; i >= 0; i--) {
+    for (let j = 0; j < freeRects.length; j++) {
+      if (i === j) continue;
+      if (rectContains(freeRects[j], freeRects[i])) {
+        freeRects.splice(i, 1);
+        break;
+      }
+    }
+  }
+}
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+function rectContains(outer, inner) {
+  return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+}
+
+// src/HermitageLayout.tsx
+import { jsx } from "react/jsx-runtime";
+function HermitageLayout({
+  items,
+  containerWidth: fixedWidth,
+  gap = 8,
+  sortStrategy = "none",
+  className
+}) {
+  const containerRef = useRef(null);
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+  const containerWidth = fixedWidth ?? measuredWidth;
+  useEffect(() => {
+    if (fixedWidth !== void 0) {
+      return;
+    }
+    const element = containerRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        setMeasuredWidth(width);
+      }
+    });
+    observer.observe(element);
+    setMeasuredWidth(element.getBoundingClientRect().width);
+    return () => observer.disconnect();
+  }, [fixedWidth]);
+  const { placements, totalHeight } = useMemo(() => {
+    if (containerWidth === 0) {
+      return { placements: [], totalHeight: 0 };
+    }
+    return pack(items, containerWidth, gap, sortStrategy);
+  }, [items, containerWidth, gap, sortStrategy]);
+  const placementMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const p of placements) {
+      map.set(p.id, { x: p.x, y: p.y });
+    }
+    return map;
+  }, [placements]);
+  const sortedItems = useMemo(() => {
+    return [...items].sort((a, b) => {
+      const posA = placementMap.get(a.id);
+      const posB = placementMap.get(b.id);
+      if (!posA || !posB) return 0;
+      if (posA.y !== posB.y) return posA.y - posB.y;
+      return posA.x - posB.x;
+    });
+  }, [items, placementMap]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        width: fixedWidth ?? "100%",
+        height: totalHeight || void 0
+      },
+      children: sortedItems.map((item) => {
+        const position = placementMap.get(item.id);
+        if (!position) return null;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: position.x,
+              top: position.y,
+              width: item.width,
+              height: item.height
+            },
+            children: item.content
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+export {
+  HermitageLayout
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/HermitageLayout.tsx","../src/maxrects.ts"],"sourcesContent":["import { useMemo, useRef, useState, useEffect } from \"react\";\nimport { HermitageLayoutProps } from \"./types\";\nimport { pack } from \"./maxrects\";\n\nexport function HermitageLayout({\n  items,\n  containerWidth: fixedWidth,\n  gap = 8,\n  sortStrategy = \"none\",\n  className,\n}: HermitageLayoutProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [measuredWidth, setMeasuredWidth] = useState<number>(0);\n\n  // Use fixed width if provided, otherwise use measured width\n  const containerWidth = fixedWidth ?? measuredWidth;\n\n  // Measure container width using ResizeObserver\n  useEffect(() => {\n    if (fixedWidth !== undefined) {\n      // Fixed width provided, no need to measure\n      return;\n    }\n\n    const element = containerRef.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const width = entry.contentRect.width;\n        setMeasuredWidth(width);\n      }\n    });\n\n    observer.observe(element);\n\n    // Initial measurement\n    setMeasuredWidth(element.getBoundingClientRect().width);\n\n    return () => observer.disconnect();\n  }, [fixedWidth]);\n\n  const { placements, totalHeight } = useMemo(() => {\n    if (containerWidth === 0) {\n      // Not yet measured, return empty layout\n      return { placements: [], totalHeight: 0 };\n    }\n    return pack(items, containerWidth, gap, sortStrategy);\n  }, [items, containerWidth, gap, sortStrategy]);\n\n  // Create a map for quick lookup of placements by id\n  const placementMap = useMemo(() => {\n    const map = new Map<string, { x: number; y: number }>();\n    for (const p of placements) {\n      map.set(p.id, { x: p.x, y: p.y });\n    }\n    return map;\n  }, [placements]);\n\n  // Sort items by visual position (y, then x) for proper tab order\n  const sortedItems = useMemo(() => {\n    return [...items].sort((a, b) => {\n      const posA = placementMap.get(a.id);\n      const posB = placementMap.get(b.id);\n      if (!posA || !posB) return 0;\n      if (posA.y !== posB.y) return posA.y - posB.y;\n      return posA.x - posB.x;\n    });\n  }, [items, placementMap]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={{\n        position: \"relative\",\n        width: fixedWidth ?? \"100%\",\n        height: totalHeight || undefined,\n      }}\n    >\n      {sortedItems.map((item) => {\n        const position = placementMap.get(item.id);\n        if (!position) return null;\n\n        return (\n          <div\n            key={item.id}\n            style={{\n              position: \"absolute\",\n              left: position.x,\n              top: position.y,\n              width: item.width,\n              height: item.height,\n            }}\n          >\n            {item.content}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","import { Rect, PlacedItem, PackResult, SortStrategy } from \"./types\";\n\ninterface PackInput {\n  id: string;\n  width: number;\n  height: number;\n}\n\n/**\n * Calculate a safe maximum height for the packing area.\n * Uses sum of all item heights as worst-case (vertical stack).\n */\nfunction calcMaxHeight(items: PackInput[], gap: number): number {\n  const totalHeight = items.reduce((sum, item) => sum + item.height + gap, 0);\n  return Math.max(totalHeight, 1000); // At least 1000px\n}\n\nfunction sortItems(items: PackInput[], strategy: SortStrategy): PackInput[] {\n  if (strategy === \"none\" || strategy === \"ordered\") {\n    // \"ordered\" uses a different placement approach, not pre-sorting\n    return items;\n  }\n\n  const sorted = [...items];\n\n  switch (strategy) {\n    case \"height-desc\":\n      sorted.sort((a, b) => b.height - a.height);\n      break;\n  }\n\n  return sorted;\n}\n\n/**\n * MaxRects bin-packing algorithm.\n * Places rectangles in a container, minimizing wasted space.\n */\nexport function pack(\n  items: PackInput[],\n  containerWidth: number,\n  gap: number = 0,\n  sortStrategy: SortStrategy = \"none\"\n): PackResult {\n  if (sortStrategy === \"ordered\") {\n    return packOrdered(items, containerWidth, gap);\n  }\n\n  const sortedItems = sortItems(items, sortStrategy);\n\n  // Start with one large free rectangle\n  const maxHeight = calcMaxHeight(sortedItems, gap);\n  const freeRects: Rect[] = [\n    { x: 0, y: 0, width: containerWidth, height: maxHeight },\n  ];\n\n  const placements: PlacedItem[] = [];\n  let maxY = 0;\n\n  for (const item of sortedItems) {\n    // Account for gap in item dimensions during placement\n    const paddedWidth = item.width + gap;\n    const paddedHeight = item.height + gap;\n\n    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);\n\n    if (position) {\n      const placement: PlacedItem = {\n        id: item.id,\n        x: position.x,\n        y: position.y,\n        width: item.width,\n        height: item.height,\n      };\n      placements.push(placement);\n\n      // Track the maximum Y extent\n      maxY = Math.max(maxY, position.y + item.height);\n\n      // Split free rects around the placed item (using padded dimensions)\n      const placedRect: Rect = {\n        x: position.x,\n        y: position.y,\n        width: paddedWidth,\n        height: paddedHeight,\n      };\n      splitFreeRects(freeRects, placedRect);\n      pruneFreeRects(freeRects);\n    }\n  }\n\n  return {\n    placements,\n    totalHeight: maxY,\n  };\n}\n\n/**\n * Ordered packing strategy:\n * - Row 1 (y=0): Strict input order, left-to-right, no gap filling\n * - Row 2: Next batch of items (in input order), can be reordered for better fit\n * - Row 3+: Full algorithmic freedom (height-desc sorting)\n */\nfunction packOrdered(\n  items: PackInput[],\n  containerWidth: number,\n  gap: number\n): PackResult {\n  // Start with full container as free space\n  const maxHeight = calcMaxHeight(items, gap);\n  const freeRects: Rect[] = [\n    { x: 0, y: 0, width: containerWidth, height: maxHeight },\n  ];\n\n  const placements: PlacedItem[] = [];\n  let maxY = 0;\n  let itemIndex = 0;\n\n  // --- Row 1: Strict left-to-right order at y=0 ---\n  let row1NextX = 0;\n  const row1Count = countRow1Items(items, containerWidth, gap);\n\n  for (let i = 0; i < row1Count; i++) {\n    const item = items[itemIndex];\n    const paddedWidth = item.width + gap;\n    const paddedHeight = item.height + gap;\n\n    const placement: PlacedItem = {\n      id: item.id,\n      x: row1NextX,\n      y: 0,\n      width: item.width,\n      height: item.height,\n    };\n    placements.push(placement);\n\n    maxY = Math.max(maxY, item.height);\n\n    // Update freeRects to account for this placement\n    const placedRect: Rect = {\n      x: row1NextX,\n      y: 0,\n      width: paddedWidth,\n      height: paddedHeight,\n    };\n    splitFreeRects(freeRects, placedRect);\n    pruneFreeRects(freeRects);\n\n    row1NextX += paddedWidth;\n    itemIndex++;\n  }\n\n  // Remaining items after row 1\n  const remainingItems = items.slice(itemIndex);\n\n  if (remainingItems.length === 0) {\n    return { placements, totalHeight: maxY };\n  }\n\n  // --- Row 2: Next batch of items, reorderable for better fit ---\n  // Take roughly the same count as row 1 (or remaining, whichever is smaller)\n  const row2CandidateCount = Math.min(row1Count, remainingItems.length);\n  const row2Candidates = remainingItems.slice(0, row2CandidateCount);\n  const row3Items = remainingItems.slice(row2CandidateCount);\n\n  // Sort row 2 candidates by height-desc for better gap filling\n  const row2Sorted = [...row2Candidates].sort((a, b) => b.height - a.height);\n\n  for (const item of row2Sorted) {\n    const paddedWidth = item.width + gap;\n    const paddedHeight = item.height + gap;\n\n    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);\n\n    if (position) {\n      const placement: PlacedItem = {\n        id: item.id,\n        x: position.x,\n        y: position.y,\n        width: item.width,\n        height: item.height,\n      };\n      placements.push(placement);\n\n      maxY = Math.max(maxY, position.y + item.height);\n\n      const placedRect: Rect = {\n        x: position.x,\n        y: position.y,\n        width: paddedWidth,\n        height: paddedHeight,\n      };\n      splitFreeRects(freeRects, placedRect);\n      pruneFreeRects(freeRects);\n    }\n  }\n\n  // --- Row 3+: Full freedom, height-desc sorting ---\n  const row3Sorted = [...row3Items].sort((a, b) => b.height - a.height);\n\n  for (const item of row3Sorted) {\n    const paddedWidth = item.width + gap;\n    const paddedHeight = item.height + gap;\n\n    const position = findBestPosition(paddedWidth, paddedHeight, freeRects);\n\n    if (position) {\n      const placement: PlacedItem = {\n        id: item.id,\n        x: position.x,\n        y: position.y,\n        width: item.width,\n        height: item.height,\n      };\n      placements.push(placement);\n\n      maxY = Math.max(maxY, position.y + item.height);\n\n      const placedRect: Rect = {\n        x: position.x,\n        y: position.y,\n        width: paddedWidth,\n        height: paddedHeight,\n      };\n      splitFreeRects(freeRects, placedRect);\n      pruneFreeRects(freeRects);\n    }\n  }\n\n  return {\n    placements,\n    totalHeight: maxY,\n  };\n}\n\n/**\n * Count how many items fit in row 1 (strict left-to-right at y=0).\n */\nfunction countRow1Items(\n  items: PackInput[],\n  containerWidth: number,\n  gap: number\n): number {\n  let x = 0;\n  let count = 0;\n\n  for (const item of items) {\n    const paddedWidth = item.width + gap;\n    if (x + paddedWidth > containerWidth + gap) {\n      break;\n    }\n    x += paddedWidth;\n    count++;\n  }\n\n  return count;\n}\n\n/**\n * Find a position for an item, but only accept positions at a specific y.\n */\nfunction findPositionAtY(\n  width: number,\n  height: number,\n  freeRects: Rect[],\n  targetY: number\n): { x: number; y: number } | null {\n  let bestX = Infinity;\n  let bestPosition: { x: number; y: number } | null = null;\n\n  for (const rect of freeRects) {\n    // Only consider rects that start at targetY\n    if (rect.y !== targetY) continue;\n\n    if (width <= rect.width && height <= rect.height) {\n      const x = rect.x;\n      if (x < bestX) {\n        bestX = x;\n        bestPosition = { x, y: targetY };\n      }\n    }\n  }\n\n  return bestPosition;\n}\n\n/**\n * Get the maximum height among a list of items.\n */\nfunction getMaxHeight(items: PackInput[]): number {\n  return items.reduce((max, item) => Math.max(max, item.height), 0);\n}\n\n/**\n * Find the best position for an item using \"Best Y then Best X\" heuristic.\n * Prefers positions higher up (smaller Y), then leftward (smaller X).\n */\nfunction findBestPosition(\n  width: number,\n  height: number,\n  freeRects: Rect[]\n): { x: number; y: number } | null {\n  let bestY = Infinity;\n  let bestX = Infinity;\n  let bestPosition: { x: number; y: number } | null = null;\n\n  for (const rect of freeRects) {\n    // Check if item fits in this free rect\n    if (width <= rect.width && height <= rect.height) {\n      // Position at top-left corner of free rect\n      const x = rect.x;\n      const y = rect.y;\n\n      // Prefer smaller Y, then smaller X\n      if (y < bestY || (y === bestY && x < bestX)) {\n        bestY = y;\n        bestX = x;\n        bestPosition = { x, y };\n      }\n    }\n  }\n\n  return bestPosition;\n}\n\n/**\n * Split free rectangles that overlap with the placed rectangle.\n * Generates up to 4 new rectangles around the placed item.\n */\nfunction splitFreeRects(freeRects: Rect[], placedRect: Rect): void {\n  const newRects: Rect[] = [];\n\n  for (let i = freeRects.length - 1; i >= 0; i--) {\n    const freeRect = freeRects[i];\n\n    // Check if this free rect overlaps with placed rect\n    if (!rectsOverlap(freeRect, placedRect)) {\n      continue;\n    }\n\n    // Remove the overlapping free rect\n    freeRects.splice(i, 1);\n\n    // Generate new free rects from the non-overlapping portions\n\n    // Left portion\n    if (placedRect.x > freeRect.x) {\n      newRects.push({\n        x: freeRect.x,\n        y: freeRect.y,\n        width: placedRect.x - freeRect.x,\n        height: freeRect.height,\n      });\n    }\n\n    // Right portion\n    const placedRight = placedRect.x + placedRect.width;\n    const freeRight = freeRect.x + freeRect.width;\n    if (placedRight < freeRight) {\n      newRects.push({\n        x: placedRight,\n        y: freeRect.y,\n        width: freeRight - placedRight,\n        height: freeRect.height,\n      });\n    }\n\n    // Top portion\n    if (placedRect.y > freeRect.y) {\n      newRects.push({\n        x: freeRect.x,\n        y: freeRect.y,\n        width: freeRect.width,\n        height: placedRect.y - freeRect.y,\n      });\n    }\n\n    // Bottom portion\n    const placedBottom = placedRect.y + placedRect.height;\n    const freeBottom = freeRect.y + freeRect.height;\n    if (placedBottom < freeBottom) {\n      newRects.push({\n        x: freeRect.x,\n        y: placedBottom,\n        width: freeRect.width,\n        height: freeBottom - placedBottom,\n      });\n    }\n  }\n\n  // Add all new rects\n  freeRects.push(...newRects);\n}\n\n/**\n * Remove free rectangles that are fully contained within other free rectangles.\n */\nfunction pruneFreeRects(freeRects: Rect[]): void {\n  for (let i = freeRects.length - 1; i >= 0; i--) {\n    for (let j = 0; j < freeRects.length; j++) {\n      if (i === j) continue;\n\n      if (rectContains(freeRects[j], freeRects[i])) {\n        freeRects.splice(i, 1);\n        break;\n      }\n    }\n  }\n}\n\n/**\n * Check if two rectangles overlap.\n */\nfunction rectsOverlap(a: Rect, b: Rect): boolean {\n  return (\n    a.x < b.x + b.width &&\n    a.x + a.width > b.x &&\n    a.y < b.y + b.height &&\n    a.y + a.height > b.y\n  );\n}\n\n/**\n * Check if rectangle `outer` fully contains rectangle `inner`.\n */\nfunction rectContains(outer: Rect, inner: Rect): boolean {\n  return (\n    inner.x >= outer.x &&\n    inner.y >= outer.y &&\n    inner.x + inner.width <= outer.x + outer.width &&\n    inner.y + inner.height <= outer.y + outer.height\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "petersburg",
+  "version": "0.0.1",
+  "description": "React layout library implementing Hermitage-style 2D bin-packing for picture arrangement",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "layout",
+    "bin-packing",
+    "masonry",
+    "gallery",
+    "grid",
+    "hermitage"
+  ],
+  "author": "xk7200",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xfaSts9cwY6VqLNTMAtR/Petersburg.git"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}