mnfst 0.5.158 → 0.5.160

package/lib/manifest.virtual.js

@@ -22,15 +22,18 @@
  *   estimate   Initial per-row height in px (default 50), or { width, height }
  *              for galleries. Used for unmeasured rows; closer = less drift.
  *   overscan   Rows/lines to render above/below the window (default 3).
- *   mode       'table' | 'grid' | 'flex' | 'block'. Auto-detected if omitted.
+ *   mode       'rows' | 'gallery' | 'masonry'. Auto-detected if omitted
+ *              (masonry must be set explicitly).
  *
- * Modes:
- *   block  — one item per line, full width (default for stacked divs).
- *   table  — native <table>; spacer is a <tr>. One item per line.
- *   grid   — .grid-table (display:grid + display:contents rows); spacer spans
- *            grid-column 1 / -1. One logical row per line.
- *   flex   — flex-wrap gallery; items pack N per line, whole lines render so
- *            flex sizing stays correct. Ragged width + height supported.
+ * Modes (how items fill lines — the spacer element is auto-detected separately):
+ *   rows     — one item per line: stacked lists, native <table>, and
+ *              .grid-table. The spacer is a div, a <tr>, or a grid cell
+ *              depending on the container.
+ *   gallery  — many items per line (flex-wrap); items pack N per line and
+ *              whole lines render so flex sizing stays correct. Ragged
+ *              width + height supported.
+ *   masonry  — independent-size items packed into the shortest column
+ *              (absolute positioning); set explicitly with mode: 'masonry'.
  *
  * Notes:
  *   - Column widths should be content-independent (table-layout: fixed, fixed/%
@@ -81,8 +84,9 @@ function initializeVirtualPlugin() {
         const cs = getComputedStyle(scrollEl);
         if (cs.overflow === 'visible' && cs.overflowY === 'visible') scrollEl.style.overflow = 'auto';
 
-        const mode = options.mode || detectMode(host);
-        const isFlex = mode === 'flex';
+        const kind = detectKind(host);                        // spacer/geometry: table | grid | flex | block
+        const mode = options.mode || detectMode(kind, host);  // windowing: rows | gallery | masonry
+        const isGallery = mode === 'gallery';
         const isMasonry = mode === 'masonry';
 
         // Masonry options: fixed `columns` or target `columnWidth`; optional
@@ -108,8 +112,8 @@ function initializeVirtualPlugin() {
             sizer.style.cssText = 'position:absolute;top:0;left:0;width:1px;height:0;pointer-events:none';
             host.appendChild(sizer);
         } else {
-            topSpacer = makeSpacer(mode, colCount);
-            botSpacer = makeSpacer(mode, colCount);
+            topSpacer = makeSpacer(kind, colCount);
+            botSpacer = makeSpacer(kind, colCount);
             host.insertBefore(topSpacer, template);
             host.insertBefore(botSpacer, template);
         }
@@ -117,12 +121,12 @@ function initializeVirtualPlugin() {
 
         // --- State ---
         const heights = new Map();   // key -> measured line/row height
-        const widths = new Map();    // key -> measured item width (flex only)
+        const widths = new Map();    // key -> measured item width (gallery only)
         let measuredSum = 0, measuredCount = 0;
         const rendered = new Map();  // key -> { node, scope, removeScope }
         let data = [];
         let cumulative = new Float64Array(1);  // line-top offsets; last = total
-        let lines = [];                        // flex: [{ start, end, height }]
+        let lines = [];                        // gallery: [{ start, end, height }]
         let pos = [];                          // masonry: per-index { x, y, w, h }
         let sortedTop = [];                    // masonry: indices sorted by y
         let totalHeight = 0;                   // masonry: packed content height
@@ -139,7 +143,7 @@ function initializeVirtualPlugin() {
 
         function rebuild() {
             if (isMasonry) rebuildMasonry();
-            else if (isFlex) rebuildFlex();
+            else if (isGallery) rebuildGallery();
             else rebuildSingle();
         }
 
@@ -189,7 +193,7 @@ function initializeVirtualPlugin() {
             cumulative[n] = y;
         }
 
-        function rebuildFlex() {
+        function rebuildGallery() {
             const cw = contentWidth();
             const gx = gapX(), gy = gapY();
             lines = [];
@@ -234,7 +238,7 @@ function initializeVirtualPlugin() {
 
         function render() {
             if (isMasonry) return renderMasonry();
-            const total = isFlex ? lines.length : data.length;
+            const total = isGallery ? lines.length : data.length;
             if (!total) { clearRows(); setHeight(topSpacer, 0); setHeight(botSpacer, 0); return; }
             const vh = scrollEl.clientHeight;
             if (!vh) return;                                     // defer until sized
@@ -250,8 +254,8 @@ function initializeVirtualPlugin() {
             setHeight(botSpacer, cumulative[total] - cumulative[endUnit]);
 
             // Resolve the item range for these units.
-            const startItem = isFlex ? lines[startUnit].start : startUnit;
-            const endItem = isFlex ? lines[endUnit - 1].end : endUnit;
+            const startItem = isGallery ? lines[startUnit].start : startUnit;
+            const endItem = isGallery ? lines[endUnit - 1].end : endUnit;
 
             const visible = new Set();
             const keys = [];
@@ -351,7 +355,7 @@ function initializeVirtualPlugin() {
             // Only measure rows we haven't sized yet.
             const pending = [];
             for (const key of keys) {
-                const need = isFlex ? (!heights.has(key) || !widths.has(key)) : !heights.has(key);
+                const need = isGallery ? (!heights.has(key) || !widths.has(key)) : !heights.has(key);
                 if (need && rendered.has(key)) pending.push(key);
             }
             if (!pending.length || measureScheduled) return;
@@ -380,7 +384,7 @@ function initializeVirtualPlugin() {
                 heights.set(key, h);
                 changed = true;
             }
-            if (isFlex) {
+            if (isGallery) {
                 const w = node.offsetWidth;
                 if (w && widths.get(key) !== w) { widths.set(key, w); changed = true; }
             }
@@ -471,7 +475,8 @@ function initializeVirtualPlugin() {
 
 // ---- Module helpers ----
 
-function detectMode(host) {
+// Container kind — which spacer element + geometry the container needs.
+function detectKind(host) {
     const tag = host.tagName;
     if (tag === 'TBODY' || tag === 'THEAD' || tag === 'TFOOT' || tag === 'TABLE') return 'table';
     const disp = getComputedStyle(host).display;
@@ -480,9 +485,15 @@ function detectMode(host) {
     return 'block';
 }
 
-function makeSpacer(mode, colCount) {
+// Windowing mode — how items fill lines. Masonry is never auto-detected.
+function detectMode(kind, host) {
+    if (kind === 'flex' && (getComputedStyle(host).flexWrap || '').startsWith('wrap')) return 'gallery';
+    return 'rows';
+}
+
+function makeSpacer(kind, colCount) {
     let s;
-    if (mode === 'table') {
+    if (kind === 'table') {
         s = document.createElement('tr');
         const td = document.createElement('td');
         if (colCount > 1) td.colSpan = colCount;
@@ -490,8 +501,8 @@ function makeSpacer(mode, colCount) {
         s.appendChild(td);
     } else {
         s = document.createElement('div');
-        if (mode === 'grid') s.style.gridColumn = '1 / -1';
-        else if (mode === 'flex') s.style.flex = '0 0 100%';
+        if (kind === 'grid') s.style.gridColumn = '1 / -1';
+        else if (kind === 'flex') s.style.flex = '0 0 100%';
         s.style.width = '100%';
     }
     s.dataset.virtualSpacer = '';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.158",
+    "version": "0.5.160",
     "private": false,
     "workspaces": [
         "templates/starter",