mnfst 0.5.234 → 0.5.236

package/lib/manifest.appwrite.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.234';
+const MANIFEST_BUILD_VERSION = '0.5.236';
 
 /* Manifest Data Sources - Appwrite Integration */
 

package/lib/manifest.chat.css

@@ -0,0 +1,152 @@
+/* Manifest Chat */
+
+@layer base, components, utilities;
+
+@layer utilities {
+
+    :where(.chat-wrapper) {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+
+        /* Chat log scroll container */
+        :where([role="log"]) {
+            display: flex;
+            flex-direction: column-reverse;
+            flex: 1;
+            font-size: 0.875rem;
+            overflow-y: auto;
+
+            /* Message column */
+            > :where(div) {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+                gap: 2rem;
+                min-height: 100%;
+                width: calc(var(--spacing-content-width, 74rem) - 4rem);
+                max-width: 100%;
+                margin-inline-start: auto;
+                margin-inline-end: auto;
+                padding-inline-start: 1rem;
+                padding-inline-end: 1rem;
+                padding-block-end: 3rem
+            }
+
+            /* Messages */
+            :where(div div) {
+
+                /* Markdown spacing */
+                :where(p) {
+                    margin-block: 0.5rem
+                }
+
+                :where(p:first-child) {
+                    margin-block-start: 0
+                }
+
+                :where(p:last-child) {
+                    margin-block-end: 0
+                }
+            }
+
+            /* Own messages */
+            :where(.own) {
+                width: 95%;
+                max-width: calc(var(--spacing-content-width, 74rem) - 10rem);
+                margin-inline-start: auto;
+                padding-block: 0.5rem;
+                padding-inline: 0.75rem;
+                background: color-mix(in oklch, var(--color-surface-2) 50%, transparent);
+                border-radius: var(--radius)
+            }
+
+            /* Attachments */
+            :where(img, video) {
+                display: block;
+                max-width: 20rem;
+                max-height: 15rem;
+                margin-block: 0.5rem;
+                border-radius: var(--radius)
+            }
+
+            :where(audio) {
+                display: block;
+                width: 18rem;
+                max-width: 100%;
+                margin-block: 0.5rem
+            }
+
+            :where(a[download]) {
+                display: inline-flex;
+                align-items: center;
+                gap: 0.4rem;
+                margin-block: 0.5rem;
+                padding-block: 0.35rem;
+                padding-inline: 0.6rem;
+                background: var(--color-surface-2);
+                border-radius: var(--radius)
+            }
+        }
+
+        /* Chat input */
+        :where(form:not(.unstyle)) {
+            display: flex;
+            flex-flow: row wrap;
+            align-items: end;
+            gap: 0;
+            width: var(--spacing-content-width, 74rem);
+            max-width: 100%;
+            margin-inline-start: auto;
+            margin-inline-end: auto;
+
+            :where(textarea, .textarea):not(.unstyle) {
+                flex: 1;
+                width: auto;
+                min-height: var(--spacing-field-height, 2.5rem);
+                field-sizing: content;
+                resize: none
+            }
+        }
+
+        /* Pending attachments */
+        :where(output:not(.unstyle)) {
+            display: flex;
+            flex-flow: row wrap;
+            gap: 0.325rem;
+            width: 100%;
+            max-width: 100%;
+            height: fit-content;
+            padding: calc(var(--spacing) * 2);
+
+            > :where(:not(template)) {
+                position: relative;
+                flex: 0 0 auto
+            }
+
+            /* Images */
+            :where(img) {
+                display: block;
+                width: var(--spacing-field-height, 2.5rem);
+                height: var(--spacing-field-height, 2.5rem);
+                object-fit: cover;
+                border-radius: calc(var(--radius, 0.5rem) * 0.75)
+            }
+
+            /* File chips */
+            > :where(:not(template))> :where(span) {
+                display: flex;
+                align-items: center;
+                gap: 0.3rem;
+                height: fit-content;
+                padding-inline: 0.5rem;
+                font-size: 0.75rem;
+                white-space: nowrap;
+                background: var(--color-line);
+                border-radius: calc(var(--radius, 0.5rem) * 0.75)
+            }
+        }
+    }
+}

package/lib/manifest.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.234';
+const MANIFEST_BUILD_VERSION = '0.5.236';
 
 /* Manifest Data Sources - Configuration */
 

package/lib/manifest.integrity.json

@@ -1,6 +1,6 @@
 {
   "manifest.appwrite.auth.js": "sha384-dsIWnH0qCAGSzAXMGrd8fvOrVl4tOIE6j5tC35JPTrQXZ56qLD36ARyvhR7vi3Id",
-  "manifest.appwrite.data.js": "sha384-pj/2ZCUMXz3zTWPZyICJHfCPnz5srho9URrw0Sl0nfWuvh5KqvoT/g3Kg4uyv7yl",
+  "manifest.appwrite.data.js": "sha384-XmiMot6d4B5dZk6/UlO2ex93ArmIWQeB1XWFYhhHoxhalUuBIvBonyto6hkegwZU",
   "manifest.appwrite.presences.js": "sha384-JyVDWFT69b7Svq8J8p9tNWe2v9PZNQBY5UyhtOl1vnuHFAX0CRQ3MA9SiKq5wzNh",
   "manifest.bindings.js": "sha384-lPtMf8Ykaic9gNVZKq8Scia1881ZeMAyxer3WCIkUNwwrgzGBWto1OXADUwjvORF",
   "manifest.charts.js": "sha384-gEAv/98+29RbhvNkiNWTNyBPbLTFr2Ld15wLu29FLCL57j1cwGChRrL9Pfk7dBtT",
@@ -11,7 +11,7 @@
   "manifest.combobox.js": "sha384-MILTkrgsTzsYUjGo4ZuADqV85Xs4GmfB4xexfe9vbJMIoQTZ42W4zs+DTaVSPEsx",
   "manifest.components.js": "sha384-JalISaBBWNFl3ggx92Hb3B52EpwwG3gzgra6Q+js0OgZ8vrFKMD48CuBox2N9A5T",
   "manifest.computed.js": "sha384-GYML/e81gQfN+iDbqhPUgny8bINCyL+SrbTofoGk4hlCnLLjv51mCv42JMqq+ku5",
-  "manifest.data.js": "sha384-+wRqEd8FFPqaSX5gZhb66OgkAHTiSQDFK6W1agFMceKtd5nVL7OLh6p5gC96AJ3Z",
+  "manifest.data.js": "sha384-FxpJUmH7kVnRqTpehhWHCxUYVW6AWuv50jxN+qZe9T5l4W0hvmr7BD+ubj42CGAo",
   "manifest.datepicker.js": "sha384-XnbeURni2X91ozVzatQcSjYYIS4MoW12dBRJnYAGBr0nCQ624heH5s+xtQSpLZX6",
   "manifest.defer.js": "sha384-pMRGqQKiEoJhpUcD40QeM4jEHau7sz9Xn/YCpiUamT1T4xJBZDSiYX+xnVrSWoq+",
   "manifest.device.js": "sha384-g+txmrEszYtuOvRelTp/c1wSNR2AtllVI9rx5NPPD7DzhVUnMNughonZykv2xlBW",
@@ -23,12 +23,12 @@
   "manifest.markdown.js": "sha384-heyDR40LXHaAmAuA+fa381uFwShk1oAqpFFY6E2Qq4T3VN0TQfRqyc++MF40K5Hj",
   "manifest.native.js": "sha384-g+txmrEszYtuOvRelTp/c1wSNR2AtllVI9rx5NPPD7DzhVUnMNughonZykv2xlBW",
   "manifest.payments.js": "sha384-8pofk2zhxtapPMpwnFyTelPMrYhShNhDCE722uQh/EYFvZFuPLmSdgunqsarVQjv",
-  "manifest.rich.text.js": "sha384-yJNb+EIumFIJx2KiKmLojwyHLCKwIn+48noxh3gUuZ10YZOvJJoanzAU7NLIBF1s",
+  "manifest.rich.text.js": "sha384-SeqwIXW01/FD39kMHLjCMaFKheVK/JxHOR/eDkePhvgaFH8Rl2y3mzZoqHuu8UH8",
   "manifest.router.js": "sha384-QkKhRaCbdXEOxhj+ojT4jeLUCtQepBnqP+QWTIWdb6kUWD+mVzPN8hf6jhgschpW",
   "manifest.slides.js": "sha384-3uRTkyK9XPLmnxI2+igZlpi4EyPlU/7IHj5j3BZJJ2KN455vXyk99fiXV3feO/XY",
   "manifest.status.js": "sha384-MBO345ab7H6Uq1X2dZLt4Ge1Gcra+Z2qYApvlAeIV8CJhDDJrz2FPXpp+Kcp8zcM",
   "manifest.svg.js": "sha384-qr/8H9+2cIhSXNbRWRtIdrDlTOxKlNJqwEefHvCYoiBNW/kKhPTFa109Orv/EBnb",
-  "manifest.sw.js": "sha384-alPjmWaugQV/aCb6l7hVITwZ6Z5k47SJ9jHXmNUN093iUu8ikbVggwLSGNb84Ib1",
+  "manifest.sw.js": "sha384-gc7W73Hluo/LQjOFCKrEpEkrBEkMKsOzRgzRQ00UkO00WuEZkTQUHB3rE9qGTWHv",
   "manifest.tabs.js": "sha384-OIIcyaQnGS0eNYk4zgAFEDboNYect7THvUd9D0V6nqCeDOxQcoiqLrBEmmWVTTet",
   "manifest.tailwind.js": "sha384-r/Jvqb+Piz21jUts10BbVAJoKkShOdJRVFpywyi4HPIi/OfOJq5CtPyWAPbdkMgt",
   "manifest.toasts.js": "sha384-3zkWxzw693pxg3QDFsoYCA3CqYaLKmBaMArULXODD66Utolpewl0OAeTB92aWUVv",

package/lib/manifest.reset.css

@@ -0,0 +1,368 @@
+/* Manifest Reset - browser style normalizer */
+
+@layer base, components, utilities;
+
+@layer base {
+
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        border: 0 solid
+    }
+
+    :where(:root) {
+        -webkit-tap-highlight-color: transparent;
+        -webkit-text-size-adjust: 100%;
+        -moz-text-size-adjust: 100%;
+        text-size-adjust: 100%;
+        text-rendering: optimizeLegibility;
+        overflow-wrap: break-word;
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+
+        /* Device safe-area insets (0 unless viewport-fit=cover on a notched screen) */
+        --safe-top: env(safe-area-inset-top, 0px);
+        --safe-right: env(safe-area-inset-right, 0px);
+        --safe-bottom: env(safe-area-inset-bottom, 0px);
+        --safe-left: env(safe-area-inset-left, 0px)
+    }
+
+    :where(html),
+    :host {
+        width: 100vw;
+        max-width: 100vw;
+        overflow-x: hidden;
+        line-height: 1.5;
+        tab-size: 4;
+        font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        font-feature-settings: normal;
+        font-variation-settings: normal;
+        -webkit-text-size-adjust: 100%;
+        -webkit-tap-highlight-color: transparent;
+        scroll-behavior: smooth;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none
+        }
+
+        &:has(dialog:popover-open) {
+            overflow: hidden
+        }
+    }
+
+    :where(body) {
+        max-width: 100vw;
+        min-height: 100vh;
+        margin: 0;
+        line-height: inherit
+    }
+
+    :where(a) {
+        color: inherit;
+        -webkit-text-decoration: inherit;
+        text-decoration: inherit;
+    }
+
+    :where(abbr[title]) {
+        -webkit-text-decoration: underline dotted;
+        text-decoration: underline dotted
+    }
+
+    :where([aria-controls]) {
+        cursor: pointer
+    }
+
+    :where([aria-hidden=false][hidden]) {
+        display: initial
+    }
+
+    :where([aria-hidden=false][hidden]:not(:focus)) {
+        clip: rect(0, 0, 0, 0);
+        position: absolute
+    }
+
+    :where(audio:not([controls])) {
+        display: none;
+        height: 0
+    }
+
+    :where(b, strong) {
+        font-weight: bolder
+    }
+
+    :where(button, input, optgroup, select, textarea) {
+        margin: 0;
+        padding: 0;
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        font-size: 100%;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        color: inherit
+    }
+
+    :where(button, select) {
+        text-transform: none
+    }
+
+    :where(button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button) {
+        appearance: button;
+        background-color: transparent;
+        background-image: none
+    }
+
+    :where(::-webkit-file-upload-button) {
+        -webkit-appearance: button;
+        font: inherit
+    }
+
+    :where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
+        height: auto
+    }
+
+    :where(::-webkit-search-decoration) {
+        -webkit-appearance: none
+    }
+
+    :where(button, [role=button]) {
+        cursor: pointer
+    }
+
+    :where(code, samp, pre) {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: 1em;
+        font-feature-settings: normal;
+        font-variation-settings: normal;
+    }
+
+    :where([dir=rtl]) {
+        direction: rtl
+    }
+
+    :where([disabled], :disabled, [aria-disabled=true], .disabled) {
+        opacity: .5;
+        cursor: default;
+        pointer-events: none
+    }
+
+    :where(figcaption) {
+        font-size: 75%
+    }
+
+    :where(figure) {
+        display: block;
+        padding: 0
+    }
+
+    :where(::file-selector-button) {
+        margin-inline-end: 4px
+    }
+
+    :where(h1, h2, h3, h4, h5, h6) {
+        font-size: inherit;
+        font-weight: inherit
+    }
+
+    :where(hr) {
+        height: 1px;
+        color: inherit;
+        background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 12%, transparent));
+        border: 0 none
+    }
+
+    :where(img, svg, video, canvas, audio, iframe, embed, object) {
+        display: block
+    }
+
+    :where(img, video) {
+        max-width: 100%;
+        height: auto
+    }
+
+    :where(::-webkit-autofill, :-webkit-autofill:focus) {
+        transition: background-color 0s 600000s, color 0s 600000s
+    }
+
+    :where(::-webkit-date-and-time-value) {
+        min-height: 1lh;
+        text-align: inherit
+    }
+
+    :where(::-webkit-datetime-edit) {
+        display: inline-flex
+    }
+
+    :where(::-webkit-datetime-edit-fields-wrapper) {
+        padding: 0
+    }
+
+    :where(::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field) {
+        padding-block: 0
+    }
+
+    :where(select:is([multiple], [size])) optgroup {
+        font-weight: bolder
+    }
+
+    :where(select:is([multiple], [size])) optgroup option {
+        padding-inline-start: 20px
+    }
+
+    :where(small) {
+        font-size: 80%
+    }
+
+    :where(span) {
+        color: inherit
+    }
+
+    :where(sub, sup) {
+        font-size: 50%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline
+    }
+
+    :where(sub) {
+        bottom: -0.25em
+    }
+
+    :where(sup) {
+        top: -0.5em
+    }
+
+    :where(svg):not([fill]) {
+        fill: currentColor
+    }
+
+    :where(svg):not(:root) {
+        overflow: hidden
+    }
+
+    :where(table) {
+        text-indent: 0;
+        border-color: inherit;
+        border-collapse: collapse
+    }
+
+    :-moz-focusring {
+        outline: auto
+    }
+
+    :-moz-ui-invalid {
+        box-shadow: none
+    }
+
+    :where(::placeholder) {
+        opacity: 1;
+        color: color-mix(in oklab, currentcolor 50%, transparent)
+    }
+
+    /* Animates `scale`, not `transform`: a transform animation with fill `both`
+       keeps its final value and would override any transform an author sets on
+       a popover of their own. */
+    @keyframes mnfst-popover-in {
+        from {
+            scale: .9;
+        }
+
+        to {
+            scale: 1;
+        }
+    }
+
+    :where([popover]):not(.unstyle):popover-open {
+        display: flex;
+        animation: mnfst-popover-in .15s ease-in both;
+    }
+
+    :where(progress) {
+        vertical-align: baseline
+    }
+
+    :where([type='search']) {
+        -webkit-appearance: textfield;
+        appearance: textfield;
+        outline-offset: -2px
+    }
+
+    :where(summary) {
+        display: list-item
+    }
+
+    :where(textarea) {
+        resize: vertical
+    }
+
+    [hidden],
+    [un-cloak],
+    [v-cloak],
+    [x-cloak] {
+        display: none
+    }
+
+    /* @ rule - font smoothing for iOS and Mac */
+    @media (-webkit-min-device-pixel-ratio: 2) {
+        :where(html) {
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale
+        }
+    }
+
+    /* @ rule - reduced motion */
+    @media (prefers-reduced-motion:reduce) {
+
+        :not([aria-busy=true]),
+        :not([aria-busy=true])::after,
+        :not([aria-busy=true])::before {
+            background-attachment: initial !important;
+            animation-duration: 1ms !important;
+            animation-delay: -1ms !important;
+            animation-iteration-count: 1 !important;
+            scroll-behavior: auto !important;
+            transition-delay: 0s !important;
+            transition-duration: 0s !important
+        }
+    }
+
+    /* @ rule - reverse animation direction for rtl mode */
+    @media (prefers-reduced-motion:no-preference) {
+        [dir=rtl] progress:indeterminate {
+            animation-direction: reverse
+        }
+    }
+
+    /* View transition styles */
+    ::view-transition-group(*) {
+        animation-duration: var(--view-transition-duration, 200ms);
+        animation-timing-function: var(--view-transition-easing, cubic-bezier(0.4, 0, 0.2, 1))
+    }
+
+    /* Skip view transition for live/non-rasterizable content */
+    iframe,
+    video,
+    canvas,
+    [data-no-view-transition] {
+        view-transition-name: none
+    }
+}
+
+/* Cross-document view transitions opt-in */
+@view-transition {
+    navigation: auto
+}
+
+/* Unlayered on purpose: a closed popover must beat layer-based layout classes. */
+[popover]:not(.unstyle):not(:popover-open) {
+    display: none;
+}

package/lib/manifest.rich.text.js

@@ -987,6 +987,8 @@
                 const have = (grid[r] || []).filter(Boolean).length;
                 for (let i = have; i < width; i++) row.appendChild(emptyCell(rowCellTag(row)));
             });
+            const group = table.querySelector(':scope > colgroup');
+            if (group && group.children.length !== width) rebalanceCols(table);
             if (!table.querySelector('tbody, thead')) {
                 const body = document.createElement('tbody');
                 while (table.firstChild) body.appendChild(table.firstChild);
@@ -995,6 +997,43 @@
         });
     }
 
+    // A table whose column widths were set by resizing keeps them adding up to 100% as its columns
+    // change: an added column takes an equal share (the others scale down), a removed one's share
+    // goes to all the others in proportion, and no column falls under the minimum. Tables without widths are left alone.
+    function rebalanceCols(table, change) {
+        const group = table.querySelector(':scope > colgroup'); if (!group) return;
+        let w = [...group.children].map(c => /%$/.test(c.style.width) ? parseFloat(c.style.width) : NaN);
+        if (!w.length || w.some(isNaN)) return;
+        const n = columnCount(table);
+        if (change && change.add != null) {
+            const share = 100 / (w.length + 1);
+            w = w.map(v => v * (100 - share) / 100);
+            w.splice(Math.min(change.add, w.length), 0, share);
+        } else if (change && change.remove != null && change.remove < w.length) {
+            // its share goes to every remaining column, in proportion to its width
+            const [gone] = w.splice(change.remove, 1), base = w.reduce((a, v) => a + v, 0);
+            w = w.map(v => v + gone * (base ? v / base : 1 / w.length));
+        }
+        // Any other mismatch (merges, splits, padding): columns added at the end take equal shares, extras go
+        while (w.length < n) { const share = 100 / (w.length + 1); w = w.map(v => v * (100 - share) / 100); w.push(share); }
+        if (w.length > n) { const extra = w.splice(n).reduce((a, b) => a + b, 0); if (w.length) w[w.length - 1] += extra; }
+        if (!w.length) return;
+        // The minimum, taken from the widest columns
+        const px = table.getBoundingClientRect().width, min = px ? MIN_COL / px * 100 : 0;
+        if (min && min * w.length > 100) w = w.map(() => 100 / w.length);   // too narrow for the minimum: equal shares
+        else if (min) {
+            for (let guard = 0; guard < 20 && w.some(v => v < min - 1e-6); guard++) {
+                const need = w.reduce((a, v) => a + Math.max(0, min - v), 0), room = w.reduce((a, v) => a + Math.max(0, v - min), 0);
+                w = w.map(v => v < min ? min : v - (v - min) / room * need);
+            }
+        }
+        const total = w.reduce((a, b) => a + b, 0), pct = (v) => Math.round(v * 100) / 100;
+        while (group.children.length < w.length) group.appendChild(document.createElement('col'));
+        while (group.children.length > w.length) group.lastElementChild.remove();
+        let used = 0;
+        [...group.children].forEach((col, i) => { const v = i === w.length - 1 ? pct(100 - used) : pct(w[i] / total * 100); used += v; col.style.width = v + '%'; });
+    }
+
     function addRow(where) {
         const cell = cellAt(); if (!cell) return;
         const row = cell.parentElement, table = row.closest('table');
@@ -1016,6 +1055,7 @@
             fresh.appendChild(document.createElement('br'));
             if (where < 0) at.before(fresh); else at.after(fresh);
         });
+        rebalanceCols(table, { add: where < 0 ? col : col + 1 });
         normalizeTables(table.parentElement || table);
         caretIn(cellCovering(rowsOf(table)[gridPosition(cell).row], where < 0 ? col : col + 1), 0);
     }
@@ -1035,6 +1075,7 @@
         if (columnCount(table) <= 1) return removeTable();
         const seen = new Set();
         grid.forEach(row => { const at = row[col]; if (!at || seen.has(at)) return; seen.add(at); at.remove(); });
+        rebalanceCols(table, { remove: col });
         normalizeTables(table.parentElement || table);
         caretIn(cellCovering(rowsOf(table)[0], Math.max(0, col - 1)), 0);
     }
@@ -1172,21 +1213,34 @@
        Widths on a <colgroup>, heights on the row. */
     const EDGE = 5;
 
-    function ensureCols(table) {
+    const MIN_COL = 28;
+    // Each column's rendered width: a cell spanning it alone, else a spanning cell's share
+    function columnWidths(table) {
+        const grid = tableGrid(table), n = columnCount(table), out = [];
+        for (let i = 0; i < n; i++) {
+            let w = null;
+            for (const row of grid) { const c = row[i]; if (c && (c.colSpan || 1) === 1) { w = c.getBoundingClientRect().width; break; } }
+            if (w == null) { const c = grid.map(r => r[i]).find(Boolean); w = c ? c.getBoundingClientRect().width / (c.colSpan || 1) : 0; }
+            out.push(w);
+        }
+        return out;
+    }
+    // Widths as percentages: of the table for its columns (they add up to 100%), and of the field
+    // for the table, so what is stored is what renders, whatever width the field has
+    function writeWidths(table, widths, tableWidth, fieldWidth) {
         let group = table.querySelector(':scope > colgroup');
         if (!group) { group = document.createElement('colgroup'); table.prepend(group); }
-        const want = columnCount(table);
-        while (group.children.length < want) group.appendChild(document.createElement('col'));
-        while (group.children.length > want) group.lastElementChild.remove();
-        // Freeze current widths so one drag doesn't reflow the rest
+        while (group.children.length < widths.length) group.appendChild(document.createElement('col'));
+        while (group.children.length > widths.length) group.lastElementChild.remove();
+        const total = widths.reduce((a, b) => a + b, 0) || 1, pct = (v) => Math.round(v * 100) / 100;
+        let used = 0;
         [...group.children].forEach((col, i) => {
-            if (col.style.width) return;
-            const at = (tableGrid(table)[0] || [])[i];
-            if (at) col.style.width = Math.round(at.getBoundingClientRect().width / (at.colSpan || 1)) + 'px';
+            const v = i === widths.length - 1 ? pct(100 - used) : pct(widths[i] / total * 100);
+            used += v; col.style.width = v + '%';
         });
-        return group;
+        table.style.width = pct(Math.min(100, tableWidth / fieldWidth * 100)) + '%';
+        table.style.tableLayout = 'fixed';   // stored widths are the rendered ones, with or without the plugin's stylesheet
     }
-
     function borderAt(x, y) {
         const el = document.elementFromPoint(x, y);
         let cell = el && el.closest && el.closest('td, th');
@@ -1223,19 +1277,27 @@
         const begin = () => {
             area.setAttribute('data-rich-text-resizing', hit.axis);
             if (hit.axis === 'x') {
-                const group = ensureCols(table);
+                // As a spreadsheet does: a border between columns moves width from one to the other (the
+                // table keeps its width); the outer border sizes the last column and the table, within the field
                 const { col } = gridPosition(cell);
-                const index = Math.min(col + (cell.colSpan || 1) - 1, group.children.length - 1);
-                const target = group.children[index];
-                const start = parseFloat(target.style.width) || cell.getBoundingClientRect().width;
-                // The outer border sizes the table too
-                const outer = index === group.children.length - 1;
+                const widths = columnWidths(table), last = widths.length - 1;
+                const index = Math.min(col + (cell.colSpan || 1) - 1, last);
                 const tableStart = table.getBoundingClientRect().width;
-                if (outer) table.style.width = Math.round(tableStart) + 'px';
+                const cs = getComputedStyle(area), field = Math.max(1, area.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0));
+                const room = Math.max(field, tableStart) - (tableStart - widths.reduce((a, b) => a + b, 0));   // columns' room, borders aside
                 return (ev) => {
-                    const delta = ev.clientX - fromX;
-                    target.style.width = Math.max(28, Math.round(start + delta)) + 'px';
-                    if (outer) table.style.width = Math.max(60, Math.round(tableStart + delta)) + 'px';
+                    const delta = ev.clientX - fromX, w = widths.slice();
+                    if (index < last) {
+                        const pair = widths[index] + widths[index + 1];
+                        if (pair < 2 * MIN_COL) return;
+                        w[index] = Math.min(pair - MIN_COL, Math.max(MIN_COL, widths[index] + delta));
+                        w[index + 1] = pair - w[index];
+                        writeWidths(table, w, tableStart, field);
+                    } else {
+                        const others = widths.reduce((a, b) => a + b, 0) - widths[last];
+                        w[last] = Math.max(MIN_COL, Math.min(widths[last] + delta, room - others));
+                        writeWidths(table, w, tableStart - widths[last] + w[last], field);
+                    }
                 };
             }
             const row = cell.parentElement, start = row.getBoundingClientRect().height;

package/lib/manifest.sw.js

@@ -16,7 +16,7 @@
 
 // Build stamps the published version here; unstamped (dev) falls back to the
 // registration URL's `v`, then 'dev'.
-const BUILD_VERSION = '0.5.234';
+const BUILD_VERSION = '0.5.236';
 const CACHE_PREFIX = 'mnfst-sw:';
 const META_CACHE = CACHE_PREFIX + 'meta';
 // Sized to hold a full precache.json warm-up (PRECACHE_MAX_ENTRIES server-side)

package/package.json

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