@michaelyagi/shoji 0.1.0-alpha.6

package/dist/esm/plugins/layout/index.js

@@ -0,0 +1,746 @@
+function computeColumnCount(options) {
+  const { containerWidth, gutterX, columns } = options;
+  if (typeof columns === "number") return Math.max(1, Math.floor(columns));
+  const target = Math.max(
+    1,
+    Math.floor((containerWidth + gutterX) / (options.columnWidth + gutterX))
+  );
+  const maxAllowedByMin = Math.max(
+    1,
+    Math.floor((containerWidth + gutterX) / (options.minColumnWidth + gutterX))
+  );
+  const minRequiredByMax = Math.max(
+    1,
+    Math.ceil((containerWidth + gutterX) / (options.maxColumnWidth + gutterX))
+  );
+  return Math.max(minRequiredByMax, Math.min(target, maxAllowedByMin));
+}
+function computeColumnWidth(containerWidth, gutterX, columnCount) {
+  return (containerWidth - gutterX * (columnCount - 1)) / columnCount;
+}
+function layoutMasonry(tiles, options, startHeights) {
+  const columnCount = computeColumnCount(options);
+  const colWidth = computeColumnWidth(options.containerWidth, options.gutterX, columnCount);
+  const columnHeights = startHeights && startHeights.length === columnCount ? [...startHeights] : new Array(columnCount).fill(0);
+  const positions = tiles.map((tile, i) => {
+    const colIndex = options.fill === "ordered" ? i % columnCount : indexOfShortest(columnHeights);
+    const tileHeight = tile.width > 0 ? colWidth * (tile.height / tile.width) : colWidth;
+    const x = colIndex * (colWidth + options.gutterX);
+    const y = columnHeights[colIndex];
+    columnHeights[colIndex] = y + tileHeight + options.gutterY;
+    return { x, y, width: colWidth, height: tileHeight };
+  });
+  const containerHeight = tiles.length === 0 ? 0 : Math.max(...columnHeights) - options.gutterY;
+  return { positions, columnCount, columnWidth: colWidth, columnHeights, containerHeight };
+}
+function indexOfShortest(heights) {
+  let shortest = 0;
+  for (let i = 1; i < heights.length; i++) {
+    if (heights[i] < heights[shortest]) shortest = i;
+  }
+  return shortest;
+}
+function layoutMasonryHorizontal(tiles, options) {
+  const { containerWidth, gutterX, gutterY, rowHeight } = options;
+  const positions = new Array(tiles.length);
+  let currentY = 0;
+  let rowStart = 0;
+  let rowWidth = 0;
+  let rowCount = 0;
+  function tileWidth(tile) {
+    return tile.height > 0 ? rowHeight * (tile.width / tile.height) : rowHeight;
+  }
+  function placeRow(start, endExclusive) {
+    let x = 0;
+    for (let i = start; i < endExclusive; i++) {
+      const w = tileWidth(tiles[i]);
+      positions[i] = { x, y: currentY, width: w, height: rowHeight };
+      x += w + gutterX;
+    }
+    rowCount++;
+    currentY += rowHeight + gutterY;
+  }
+  for (let i = 0; i < tiles.length; i++) {
+    const w = tileWidth(tiles[i]);
+    const countInRow = i - rowStart;
+    const widthIfIncluded = rowWidth + (countInRow > 0 ? gutterX : 0) + w;
+    if (countInRow > 0 && widthIfIncluded > containerWidth) {
+      placeRow(rowStart, i);
+      rowStart = i;
+      rowWidth = w;
+    } else {
+      rowWidth = widthIfIncluded;
+    }
+  }
+  if (rowStart < tiles.length) placeRow(rowStart, tiles.length);
+  const containerHeight = tiles.length === 0 ? 0 : currentY - gutterY;
+  return { positions, rowCount, containerHeight };
+}
+function aspectRatioOf(tile) {
+  return tile.width > 0 && tile.height > 0 ? tile.width / tile.height : 1;
+}
+function layoutJustified(tiles, options) {
+  const { containerWidth, gutterX, gutterY, rowHeight, minRowHeight, maxRowHeight, lastRow } = options;
+  const positions = new Array(tiles.length).fill(null);
+  const rows = [];
+  let currentY = 0;
+  let rowStart = 0;
+  let aspectSum = 0;
+  function naturalHeightOf(startIndex, endExclusive, sum) {
+    const availableWidth = containerWidth - gutterX * (endExclusive - startIndex - 1);
+    return availableWidth / sum;
+  }
+  function placeRow(startIndex, endExclusive, height) {
+    let x = 0;
+    for (let i = startIndex; i < endExclusive; i++) {
+      const width = height * aspectRatioOf(tiles[i]);
+      positions[i] = { x, y: currentY, width, height };
+      x += width + gutterX;
+    }
+    rows.push({ start: startIndex, end: endExclusive, y: currentY, height });
+    currentY += height + gutterY;
+  }
+  function resolveScaledRow(startIndex, endExclusive, sum) {
+    let end = endExclusive;
+    let rowSum = sum;
+    while (end - startIndex > 1 && naturalHeightOf(startIndex, end, rowSum) < minRowHeight) {
+      end--;
+      rowSum -= aspectRatioOf(tiles[end]);
+    }
+    const natural = naturalHeightOf(startIndex, end, rowSum);
+    const height = end - startIndex === 1 && natural < minRowHeight ? natural : Math.min(Math.max(natural, minRowHeight), maxRowHeight);
+    placeRow(startIndex, end, height);
+    return end;
+  }
+  for (let i = 0; i < tiles.length; i++) {
+    aspectSum += aspectRatioOf(tiles[i]);
+    const count = i - rowStart + 1;
+    const widthAtTargetHeight = rowHeight * aspectSum + gutterX * (count - 1);
+    if (widthAtTargetHeight >= containerWidth) {
+      const end = resolveScaledRow(rowStart, i + 1, aspectSum);
+      rowStart = end;
+      aspectSum = 0;
+      for (let j = end; j <= i; j++) aspectSum += aspectRatioOf(tiles[j]);
+    }
+  }
+  if (rowStart < tiles.length) {
+    if (lastRow === "justify") {
+      let start = rowStart;
+      while (start < tiles.length) {
+        let sum = 0;
+        for (let j = start; j < tiles.length; j++) sum += aspectRatioOf(tiles[j]);
+        start = resolveScaledRow(start, tiles.length, sum);
+      }
+    } else if (lastRow === "left") {
+      placeRow(rowStart, tiles.length, rowHeight);
+    }
+  }
+  const containerHeight = tiles.length === 0 ? 0 : Math.max(0, currentY - gutterY);
+  return { positions, containerHeight, rows };
+}
+const DEFAULT_ASPECT = { width: 4, height: 3 };
+function resolveGutter(raw) {
+  if (raw && typeof raw === "object") {
+    const obj = raw;
+    return { x: Number(obj.x ?? 8), y: Number(obj.y ?? 8) };
+  }
+  const n = Number(raw ?? 8);
+  return { x: n, y: n };
+}
+function keyOf(item) {
+  return item.id ?? item.src;
+}
+function isPureAppend(oldItems, newItems) {
+  if (newItems.length <= oldItems.length) return false;
+  for (let i = 0; i < oldItems.length; i++) {
+    if (keyOf(oldItems[i]) !== keyOf(newItems[i])) return false;
+  }
+  return true;
+}
+const Layout = {
+  name: "layout",
+  defaults: {
+    type: "justified",
+    gutter: 8,
+    columns: "auto",
+    columnWidth: 240,
+    minColumnWidth: 160,
+    maxColumnWidth: 480,
+    fill: "shortest",
+    animate: true,
+    autoMeasure: true
+  },
+  init(ctx) {
+    const { gallery } = ctx;
+    const type = ctx.options.type ?? "justified";
+    const gutter = resolveGutter(ctx.options.gutter);
+    const aspectRatio = Number(ctx.options.aspectRatio ?? 1);
+    const orientation = ctx.options.orientation ?? "vertical";
+    const columns = ctx.options.columns ?? "auto";
+    const columnWidth = Number(ctx.options.columnWidth ?? 240);
+    const minColumnWidth = Number(ctx.options.minColumnWidth ?? 160);
+    const maxColumnWidth = Number(ctx.options.maxColumnWidth ?? 480);
+    const fill = ctx.options.fill ?? "shortest";
+    const rowHeight = Number(ctx.options.rowHeight ?? 220);
+    const minRowHeight = Number(ctx.options.minRowHeight ?? 120);
+    const maxRowHeight = Number(ctx.options.maxRowHeight ?? 360);
+    const lastRow = ctx.options.lastRow ?? "justify";
+    const animate = ctx.options.animate !== false;
+    const autoMeasureEnabled = ctx.options.autoMeasure !== false;
+    const horizontal = type === "masonry" && orientation === "horizontal";
+    const groupByFn = ctx.options.groupBy;
+    const renderHeadingFn = ctx.options.renderHeading;
+    const headingOverflow = ctx.options.headingOverflow ?? "show";
+    const stickyHeadingsRaw = ctx.options.stickyHeadings === true;
+    const stickyHeadings = stickyHeadingsRaw && type === "grid";
+    if (stickyHeadingsRaw && type !== "grid") {
+      console.warn(
+        "Shoji: layout plugin — stickyHeadings is only implemented for type: 'grid'; ignored (see the option's doc comment)."
+      );
+    }
+    if (groupByFn && horizontal) {
+      console.warn(
+        "Shoji: layout plugin — groupBy isn't supported with orientation: 'horizontal'; ignored."
+      );
+    }
+    const groupingEnabled = !!groupByFn && !horizontal;
+    const baseConfig = {
+      gutter,
+      columns,
+      columnWidth,
+      minColumnWidth,
+      maxColumnWidth,
+      fill,
+      rowHeight,
+      minRowHeight,
+      maxRowHeight,
+      lastRow
+    };
+    const breakpointsRaw = ctx.options.breakpoints;
+    const sortedBreakpoints = breakpointsRaw ? Object.entries(breakpointsRaw).map(([key, overrides]) => [Number(key), overrides]).sort((a, b) => a[0] - b[0]) : [];
+    function resolveConfig(width) {
+      const match = sortedBreakpoints.find(([maxWidth]) => width <= maxWidth);
+      if (!match) return baseConfig;
+      const overrides = match[1];
+      return {
+        gutter: overrides.gutter !== void 0 ? resolveGutter(overrides.gutter) : baseConfig.gutter,
+        columns: overrides.columns ?? baseConfig.columns,
+        columnWidth: overrides.columnWidth ?? baseConfig.columnWidth,
+        minColumnWidth: overrides.minColumnWidth ?? baseConfig.minColumnWidth,
+        maxColumnWidth: overrides.maxColumnWidth ?? baseConfig.maxColumnWidth,
+        fill: overrides.fill ?? baseConfig.fill,
+        rowHeight: overrides.rowHeight ?? baseConfig.rowHeight,
+        minRowHeight: overrides.minRowHeight ?? baseConfig.minRowHeight,
+        maxRowHeight: overrides.maxRowHeight ?? baseConfig.maxRowHeight,
+        lastRow: overrides.lastRow ?? baseConfig.lastRow
+      };
+    }
+    const container = gallery.element;
+    container.classList.add("shoji-layout", `shoji-layout--${type}`);
+    if (animate) container.classList.add("shoji-layout--animate");
+    let tiles = [];
+    let headings = [];
+    let columnHeights;
+    let previousItems = [];
+    let warnedMissingDims = false;
+    function computeSections(items) {
+      const sections = [];
+      for (let i = 0; i < items.length; i++) {
+        const key = groupByFn(items[i]);
+        const current = sections[sections.length - 1];
+        if (!current || current.key !== key) {
+          sections.push({ key, startIndex: i, endIndex: i + 1 });
+        } else {
+          current.endIndex = i + 1;
+        }
+      }
+      return sections;
+    }
+    function createHeadingRoot(key, sectionItems) {
+      const rendered = renderHeadingFn ? renderHeadingFn(key, sectionItems) : key;
+      let root;
+      let structured = null;
+      if (typeof rendered === "string") {
+        root = document.createElement("h2");
+        root.textContent = rendered;
+      } else if (rendered instanceof HTMLElement) {
+        root = rendered;
+      } else {
+        root = document.createElement("h2");
+        const titleEl = document.createElement("span");
+        titleEl.className = "shoji-layout-heading-title";
+        titleEl.textContent = rendered.title;
+        root.appendChild(titleEl);
+        let subtitleEl = null;
+        if (rendered.subtitle) {
+          subtitleEl = document.createElement("span");
+          subtitleEl.className = "shoji-layout-heading-subtitle";
+          subtitleEl.textContent = rendered.subtitle;
+          root.appendChild(subtitleEl);
+        }
+        structured = { titleEl, subtitleEl };
+      }
+      root.classList.add("shoji-layout-heading");
+      if (stickyHeadings) root.classList.add("shoji-layout-heading--sticky");
+      return { root, structured };
+    }
+    function headingSegments() {
+      return headings.map((heading, i) => ({
+        heading,
+        start: heading.tileStart,
+        end: i + 1 < headings.length ? headings[i + 1].tileStart : tiles.length
+      }));
+    }
+    function measurableSrc(item) {
+      return item.thumb ?? item.poster ?? (item.video ? void 0 : item.src);
+    }
+    function aspectOf(item) {
+      if ((item == null ? void 0 : item.width) && item.height) return { width: item.width, height: item.height };
+      const selfCorrecting = autoMeasureEnabled && !!item && !!measurableSrc(item);
+      if (!warnedMissingDims && !selfCorrecting) {
+        warnedMissingDims = true;
+        console.warn(
+          autoMeasureEnabled ? "Shoji: layout plugin — item(s) missing width/height with no measurable thumb/poster/src to auto-measure from either; falling back to a 4:3 placeholder ratio permanently for those." : "Shoji: layout plugin — item(s) missing width/height and autoMeasure is disabled. Masonry/justified positions are computed from aspect ratios up front, never by measuring loaded images (DESIGN.md §5.2 — that causes layout-jump), so items without dimensions fall back to a 4:3 placeholder ratio instead."
+        );
+      }
+      return DEFAULT_ASPECT;
+    }
+    function createTile(item, index) {
+      const root = document.createElement("a");
+      root.className = "shoji-layout-tile";
+      if (item.id) root.dataset.shojiId = item.id;
+      root.dataset.shojiIndex = String(index);
+      const img = document.createElement("img");
+      img.src = item.thumb ?? item.poster ?? item.src;
+      img.loading = "lazy";
+      img.alt = item.alt ?? "";
+      root.appendChild(img);
+      const tile = { index, root, img };
+      root.addEventListener("click", (event) => {
+        event.preventDefault();
+        gallery.open(tile.index);
+      });
+      return tile;
+    }
+    function applyGrid(target) {
+      const containerWidth = container.getBoundingClientRect().width;
+      const config = resolveConfig(containerWidth);
+      container.style.setProperty("--shoji-layout-column-width", `${config.columnWidth}px`);
+      container.style.setProperty(
+        "--shoji-layout-gutter",
+        `${config.gutter.y}px ${config.gutter.x}px`
+      );
+      for (const tile of target) {
+        tile.root.style.setProperty("--shoji-layout-tile-aspect", `${aspectRatio}`);
+      }
+    }
+    function applyMasonry(appendOnly) {
+      const containerWidth = container.getBoundingClientRect().width;
+      if (containerWidth <= 0) return;
+      const config = resolveConfig(containerWidth);
+      const masonryOptions = {
+        containerWidth,
+        gutterX: config.gutter.x,
+        gutterY: config.gutter.y,
+        columns: config.columns,
+        columnWidth: config.columnWidth,
+        minColumnWidth: config.minColumnWidth,
+        maxColumnWidth: config.maxColumnWidth,
+        fill: config.fill
+      };
+      if (groupingEnabled && headings.length > 0) {
+        const segments = headingSegments();
+        const headingHeights = segments.map((s) => s.heading.root.getBoundingClientRect().height);
+        let y = 0;
+        segments.forEach(({ heading, start, end }, i) => {
+          const segTiles = tiles.slice(start, end);
+          heading.root.style.transform = `translate(0px, ${y}px)`;
+          y += headingHeights[i] + config.gutter.y;
+          const segResult = layoutMasonry(
+            segTiles.map((t) => aspectOf(gallery.items[t.index])),
+            masonryOptions
+          );
+          segTiles.forEach((tile, j) => {
+            const pos = segResult.positions[j];
+            tile.root.style.width = `${pos.width}px`;
+            tile.root.style.height = `${pos.height}px`;
+            tile.root.style.visibility = "visible";
+            tile.root.style.transform = `translate(${pos.x}px, ${y + pos.y}px)`;
+          });
+          y += segResult.containerHeight + config.gutter.y;
+        });
+        columnHeights = void 0;
+        container.style.height = `${Math.max(0, y - config.gutter.y)}px`;
+        return;
+      }
+      const target = appendOnly ?? tiles;
+      const masonryTiles = target.map((t) => aspectOf(gallery.items[t.index]));
+      const startHeights = appendOnly ? columnHeights : void 0;
+      const result = layoutMasonry(masonryTiles, masonryOptions, startHeights);
+      target.forEach((tile, i) => {
+        const pos = result.positions[i];
+        tile.root.style.width = `${pos.width}px`;
+        tile.root.style.height = `${pos.height}px`;
+        tile.root.style.visibility = "visible";
+        tile.root.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+      });
+      columnHeights = result.columnHeights;
+      container.style.height = `${result.containerHeight}px`;
+    }
+    function applyMasonryHorizontal() {
+      const containerWidth = container.getBoundingClientRect().width;
+      if (containerWidth <= 0) return;
+      const config = resolveConfig(containerWidth);
+      const masonryTiles = tiles.map((t) => aspectOf(gallery.items[t.index]));
+      const result = layoutMasonryHorizontal(masonryTiles, {
+        containerWidth,
+        gutterX: config.gutter.x,
+        gutterY: config.gutter.y,
+        rowHeight: config.rowHeight
+      });
+      tiles.forEach((tile, i) => {
+        const pos = result.positions[i];
+        tile.root.style.width = `${pos.width}px`;
+        tile.root.style.height = `${pos.height}px`;
+        tile.root.style.visibility = "visible";
+        tile.root.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+      });
+      container.style.height = `${result.containerHeight}px`;
+    }
+    function applyJustifiedGrouped(justifiedOptions, config, containerWidth) {
+      const fullWidths = /* @__PURE__ */ new Map();
+      const titleOnlyWidths = /* @__PURE__ */ new Map();
+      if (headingOverflow === "fit") {
+        for (const heading of headings) {
+          if (!heading.structured) continue;
+          const { subtitleEl } = heading.structured;
+          heading.root.style.maxWidth = "none";
+          heading.root.style.whiteSpace = "nowrap";
+          if (subtitleEl) subtitleEl.hidden = false;
+          fullWidths.set(heading.tileStart, heading.root.getBoundingClientRect().width);
+          if (subtitleEl) {
+            subtitleEl.hidden = true;
+            titleOnlyWidths.set(heading.tileStart, heading.root.getBoundingClientRect().width);
+            subtitleEl.hidden = false;
+          } else {
+            titleOnlyWidths.set(heading.tileStart, fullWidths.get(heading.tileStart));
+          }
+        }
+      }
+      function tileAspects(tileStart, tileEnd) {
+        return tiles.slice(tileStart, tileEnd).map((t) => aspectOf(gallery.items[t.index]));
+      }
+      function tryFit(startSection, endSection) {
+        const tileStart = headings[startSection].tileStart;
+        const tileEnd = endSection < headings.length ? headings[endSection].tileStart : tiles.length;
+        const result = layoutJustified(tileAspects(tileStart, tileEnd), justifiedOptions);
+        for (let k = startSection; k < endSection; k++) {
+          const heading = headings[k];
+          if (!heading.structured) continue;
+          const pos = result.positions[heading.tileStart - tileStart];
+          if (!pos) continue;
+          const next = k + 1 < endSection ? headings[k + 1] : void 0;
+          const nextPos = next ? result.positions[next.tileStart - tileStart] : null;
+          const sameRow = !!nextPos && Math.abs(nextPos.y - pos.y) < 0.5;
+          const available = (sameRow ? nextPos.x : containerWidth) - pos.x - config.gutter.x;
+          const bestWidth = Math.min(
+            fullWidths.get(heading.tileStart) ?? Infinity,
+            titleOnlyWidths.get(heading.tileStart) ?? Infinity
+          );
+          if (bestWidth > available) return null;
+        }
+        return result;
+      }
+      function computeSegments() {
+        if (headingOverflow !== "fit") {
+          return [
+            {
+              startSection: 0,
+              endSection: headings.length,
+              tileStart: 0,
+              tileEnd: tiles.length,
+              result: layoutJustified(tileAspects(0, tiles.length), justifiedOptions)
+            }
+          ];
+        }
+        const segments2 = [];
+        let segStart = 0;
+        while (segStart < headings.length) {
+          const base = tryFit(segStart, segStart + 1);
+          const tileStart = headings[segStart].tileStart;
+          if (base === null) {
+            const tileEnd2 = segStart + 1 < headings.length ? headings[segStart + 1].tileStart : tiles.length;
+            segments2.push({
+              startSection: segStart,
+              endSection: segStart + 1,
+              tileStart,
+              tileEnd: tileEnd2,
+              result: layoutJustified(tileAspects(tileStart, tileEnd2), justifiedOptions)
+            });
+            segStart += 1;
+            continue;
+          }
+          let end = segStart + 1;
+          let best = base;
+          while (end < headings.length) {
+            const trial = tryFit(segStart, end + 1);
+            if (trial === null) break;
+            end += 1;
+            best = trial;
+          }
+          const tileEnd = end < headings.length ? headings[end].tileStart : tiles.length;
+          segments2.push({
+            startSection: segStart,
+            endSection: end,
+            tileStart,
+            tileEnd,
+            result: best
+          });
+          segStart = end;
+        }
+        return segments2;
+      }
+      function applyContentDecisions(segment) {
+        for (let k = segment.startSection; k < segment.endSection; k++) {
+          const heading = headings[k];
+          if (!heading.structured) continue;
+          const pos = segment.result.positions[heading.tileStart - segment.tileStart];
+          if (!pos) continue;
+          const next = k + 1 < segment.endSection ? headings[k + 1] : void 0;
+          const nextPos = next ? segment.result.positions[next.tileStart - segment.tileStart] : null;
+          const sameRow = !!nextPos && Math.abs(nextPos.y - pos.y) < 0.5;
+          const available = (sameRow ? nextPos.x : containerWidth) - pos.x - config.gutter.x;
+          const { subtitleEl } = heading.structured;
+          heading.root.style.whiteSpace = "nowrap";
+          heading.root.style.maxWidth = "none";
+          heading.root.style.overflow = "";
+          heading.root.style.textOverflow = "";
+          if (subtitleEl) subtitleEl.hidden = false;
+          const full = fullWidths.get(heading.tileStart) ?? 0;
+          if (full <= available) continue;
+          if (subtitleEl) {
+            subtitleEl.hidden = true;
+            const titleOnly = titleOnlyWidths.get(heading.tileStart) ?? 0;
+            if (titleOnly <= available) continue;
+          }
+          heading.root.style.maxWidth = `${Math.max(0, available)}px`;
+          heading.root.style.overflow = "hidden";
+          heading.root.style.textOverflow = "ellipsis";
+        }
+      }
+      function applyWrapDecisions(segment) {
+        for (let k = segment.startSection; k < segment.endSection; k++) {
+          const heading = headings[k];
+          if (!heading.structured) continue;
+          const pos = segment.result.positions[heading.tileStart - segment.tileStart];
+          if (!pos) continue;
+          const next = k + 1 < segment.endSection ? headings[k + 1] : void 0;
+          const nextPos = next ? segment.result.positions[next.tileStart - segment.tileStart] : null;
+          const sameRow = !!nextPos && Math.abs(nextPos.y - pos.y) < 0.5;
+          const available = (sameRow ? nextPos.x : containerWidth) - pos.x - config.gutter.x;
+          heading.root.style.whiteSpace = "normal";
+          heading.root.style.maxWidth = `${Math.max(0, available)}px`;
+          const style = getComputedStyle(heading.root);
+          const parsedLineHeight = parseFloat(style.lineHeight);
+          const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : parseFloat(style.fontSize) * 1.2;
+          const maxLines = Math.max(1, Math.floor(config.maxRowHeight / lineHeight));
+          heading.root.style.display = "-webkit-box";
+          heading.root.style.overflow = "hidden";
+          heading.root.style.setProperty("-webkit-box-orient", "vertical");
+          heading.root.style.setProperty("-webkit-line-clamp", `${maxLines}`);
+        }
+      }
+      const segments = computeSegments();
+      let cumulativeExtra = 0;
+      let headingPtr = 0;
+      for (const segment of segments) {
+        if (headingOverflow === "fit") applyContentDecisions(segment);
+        else if (headingOverflow === "wrap") applyWrapDecisions(segment);
+        const headingHeights = /* @__PURE__ */ new Map();
+        for (let k = segment.startSection; k < segment.endSection; k++) {
+          const heading = headings[k];
+          headingHeights.set(heading.tileStart, heading.root.getBoundingClientRect().height);
+        }
+        for (const row of segment.result.rows) {
+          const globalStart = row.start + segment.tileStart;
+          const globalEnd = row.end + segment.tileStart;
+          let bandHeight = 0;
+          while (headingPtr < segment.endSection && headings[headingPtr].tileStart < globalEnd) {
+            const heading = headings[headingPtr];
+            const pos = segment.result.positions[heading.tileStart - segment.tileStart];
+            if (pos) {
+              heading.root.hidden = false;
+              heading.root.style.transform = `translate(${pos.x}px, ${row.y + cumulativeExtra}px)`;
+              bandHeight = Math.max(bandHeight, headingHeights.get(heading.tileStart) ?? 0);
+            }
+            headingPtr++;
+          }
+          if (bandHeight > 0) cumulativeExtra += bandHeight + config.gutter.y;
+          for (let i = globalStart; i < globalEnd; i++) {
+            const pos = segment.result.positions[i - segment.tileStart];
+            const tile = tiles[i];
+            tile.root.hidden = pos === null;
+            if (!pos) continue;
+            tile.root.style.width = `${pos.width}px`;
+            tile.root.style.height = `${pos.height}px`;
+            tile.root.style.visibility = "visible";
+            tile.root.style.transform = `translate(${pos.x}px, ${pos.y + cumulativeExtra}px)`;
+          }
+        }
+        const segLastCovered = segment.result.rows.length > 0 ? segment.result.rows[segment.result.rows.length - 1].end + segment.tileStart : segment.tileStart;
+        for (let i = segLastCovered; i < segment.tileEnd; i++) {
+          tiles[i].root.hidden = true;
+        }
+        cumulativeExtra += segment.result.containerHeight + config.gutter.y;
+      }
+      while (headingPtr < headings.length) {
+        headings[headingPtr].root.hidden = true;
+        headingPtr++;
+      }
+      container.style.height = `${Math.max(0, cumulativeExtra - config.gutter.y)}px`;
+    }
+    function applyJustified() {
+      const containerWidth = container.getBoundingClientRect().width;
+      if (containerWidth <= 0) return;
+      const config = resolveConfig(containerWidth);
+      const justifiedOptions = {
+        containerWidth,
+        gutterX: config.gutter.x,
+        gutterY: config.gutter.y,
+        rowHeight: config.rowHeight,
+        minRowHeight: config.minRowHeight,
+        maxRowHeight: config.maxRowHeight,
+        lastRow: config.lastRow
+      };
+      if (groupingEnabled && headings.length > 0) {
+        applyJustifiedGrouped(justifiedOptions, config, containerWidth);
+        return;
+      }
+      const justifiedTiles = tiles.map((t) => aspectOf(gallery.items[t.index]));
+      const result = layoutJustified(justifiedTiles, justifiedOptions);
+      tiles.forEach((tile, i) => {
+        const pos = result.positions[i];
+        tile.root.hidden = pos === null;
+        if (!pos) return;
+        tile.root.style.width = `${pos.width}px`;
+        tile.root.style.height = `${pos.height}px`;
+        tile.root.style.visibility = "visible";
+        tile.root.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+      });
+      container.style.height = `${result.containerHeight}px`;
+    }
+    function relayoutAll() {
+      if (horizontal) applyMasonryHorizontal();
+      else if (type === "masonry") applyMasonry(null);
+      else if (type === "justified") applyJustified();
+      else applyGrid(tiles);
+    }
+    let destroyed = false;
+    let measureFrame = null;
+    function scheduleMeasureRelayout() {
+      if (measureFrame !== null || destroyed) return;
+      measureFrame = requestAnimationFrame(() => {
+        measureFrame = null;
+        if (destroyed) return;
+        if (groupingEnabled) fullRender(gallery.items);
+        else relayoutAll();
+      });
+    }
+    function autoMeasureTiles(newTiles) {
+      if (!autoMeasureEnabled) return;
+      for (const tile of newTiles) {
+        const item = gallery.items[tile.index];
+        if (!item || item.width && item.height || !measurableSrc(item)) continue;
+        const onLoad = () => {
+          if (destroyed) return;
+          if (tile.img.naturalWidth > 0 && tile.img.naturalHeight > 0) {
+            item.width = tile.img.naturalWidth;
+            item.height = tile.img.naturalHeight;
+            scheduleMeasureRelayout();
+          }
+        };
+        if (tile.img.complete) onLoad();
+        else tile.img.addEventListener("load", onLoad, { once: true });
+      }
+    }
+    function emitLayoutRender(rendered) {
+      ctx.emit("layoutRender", {
+        tiles: rendered.map((tile) => ({ index: tile.index, element: tile.root }))
+      });
+    }
+    function fullRender(items) {
+      container.replaceChildren();
+      tiles = items.map((item, i) => createTile(item, i));
+      headings = [];
+      if (groupingEnabled) {
+        for (const section of computeSections(items)) {
+          const sectionItems = items.slice(section.startIndex, section.endIndex);
+          const { root: headingRoot, structured } = createHeadingRoot(section.key, sectionItems);
+          container.appendChild(headingRoot);
+          headings.push({ root: headingRoot, tileStart: section.startIndex, structured });
+          for (let i = section.startIndex; i < section.endIndex; i++) {
+            container.appendChild(tiles[i].root);
+          }
+        }
+      } else {
+        for (const tile of tiles) container.appendChild(tile.root);
+      }
+      columnHeights = void 0;
+      relayoutAll();
+      autoMeasureTiles(tiles);
+      emitLayoutRender(tiles);
+    }
+    function appendRender(newItems, startIndex) {
+      const newTiles = newItems.map((item, i) => createTile(item, startIndex + i));
+      for (const tile of newTiles) container.appendChild(tile.root);
+      tiles = [...tiles, ...newTiles];
+      if (horizontal)
+        applyMasonryHorizontal();
+      else if (type === "masonry") applyMasonry(newTiles);
+      else if (type === "justified")
+        applyJustified();
+      else applyGrid(newTiles);
+      autoMeasureTiles(newTiles);
+      emitLayoutRender(newTiles);
+    }
+    fullRender(gallery.items);
+    previousItems = gallery.items;
+    const offItemsUpdated = ctx.on("itemsUpdated", ({ items }) => {
+      if (groupingEnabled) {
+        fullRender(items);
+      } else if (isPureAppend(previousItems, items)) {
+        appendRender(items.slice(previousItems.length), previousItems.length);
+      } else {
+        fullRender(items);
+      }
+      previousItems = items;
+    });
+    let resizeFrame = null;
+    let resizeObserver;
+    if (type === "masonry" || type === "justified" || sortedBreakpoints.length > 0) {
+      resizeObserver = new ResizeObserver(() => {
+        if (resizeFrame !== null) return;
+        resizeFrame = requestAnimationFrame(() => {
+          resizeFrame = null;
+          relayoutAll();
+        });
+      });
+      resizeObserver.observe(container);
+    }
+    return () => {
+      destroyed = true;
+      if (measureFrame !== null) cancelAnimationFrame(measureFrame);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      if (resizeFrame !== null) cancelAnimationFrame(resizeFrame);
+      offItemsUpdated();
+      container.classList.remove("shoji-layout", `shoji-layout--${type}`, "shoji-layout--animate");
+      container.style.removeProperty("height");
+      container.style.removeProperty("width");
+      container.replaceChildren();
+    };
+  }
+};
+export {
+  Layout
+};
+//# sourceMappingURL=index.js.map