mnfst 0.5.156 → 0.5.158

package/lib/manifest.combobox.css

@@ -75,7 +75,7 @@
     /* Chips */
     :where(.combobox-chip):not(.unstyle) {
         display: inline-flex;
-        flex-shrink: 0;                /* wrap, don't shrink — overflow:hidden below otherwise lets flex squeeze chips to an ellipsis (notably Safari) */
+        flex: 0 0 auto;                /* hold content width; don't grow or shrink — overflow:hidden below otherwise lets flex squeeze chips to an ellipsis (notably Safari) */
         align-items: center;
         gap: var(--spacing, 0.25rem);
         max-width: 100%;
@@ -117,6 +117,12 @@
             }
         }
 
+        /* Locked — selected but not removable; no × button, so restore the right padding */
+        &[data-locked] {
+            padding-inline-end: calc(var(--spacing, 0.25rem) * 2);
+            cursor: default
+        }
+
         /* Failed validation */
         &[aria-invalid="true"] {
             color: var(--color-negative-inverse, oklch(44.4% 0.177 26.899));

package/lib/manifest.combobox.js

@@ -81,6 +81,7 @@ function initializeComboboxPlugin() {
                 value: li.dataset.value != null ? li.dataset.value : li.textContent.trim(),
                 label: li.dataset.label || li.textContent.trim(),
                 pattern: li.dataset.pattern || null,
+                locked: li.hasAttribute('data-locked'),
                 html: li.innerHTML
             }));
         }
@@ -88,11 +89,31 @@ function initializeComboboxPlugin() {
             value: o.value || o.textContent.trim(),
             label: o.textContent.trim() || o.value,
             pattern: o.getAttribute('data-pattern') || null,
+            locked: o.hasAttribute('data-locked'),
             html: null
         }));
     }
 
+    // Take ownership of x-model: capture the expression and strip the attribute so
+    // Alpine's own model directive never binds the editor. In chips mode the editor is
+    // a transient typing buffer — Alpine's x-model would dump the bound array into it
+    // and write partial typing back to the model. We read/write the model ourselves.
+    function captureModel(el) {
+        if (el.__cbModelExpr !== undefined) return;
+        let attr = null;
+        for (const a of Array.from(el.attributes)) {
+            if (a.name === 'x-model' || a.name.indexOf('x-model.') === 0) { attr = a.name; break; }
+        }
+        el.__cbModelExpr = attr ? el.getAttribute(attr) : null;
+        if (attr) el.removeAttribute(attr);
+    }
+
+    // Pre-walk pass: this runs on alpine:init / DOMContentLoaded, before Alpine walks
+    // the tree, so x-model is gone by the time Alpine's model directive looks for it.
+    document.querySelectorAll('[x-combobox]').forEach(captureModel);
+
     Alpine.directive('combobox', (el, { modifiers, expression }, { cleanup }) => {
+        captureModel(el);   // fallback for elements added after the pre-walk pass
         // Build after the current tick so sibling sources (datalist/menu) exist.
         setTimeout(() => build(el, modifiers, expression || '', cleanup), 0);
     });
@@ -198,6 +219,41 @@ function initializeComboboxPlugin() {
         let selected = adopt && seedSelected ? seedSelected : [];
         const isSelected = (v) => selected.some(s => String(s.value).toLowerCase() === String(v).toLowerCase());
         const atCap = () => multiple && selected.length >= max;
+        const labelFor = (v) => {
+            const o = options.find(o => String(o.value).toLowerCase() === String(v).toLowerCase());
+            return o ? o.label : String(v);
+        };
+
+        // ----- Locked values (non-removable chips) -----
+        // From a `locked: [...]` config list (re-evaluated reactively below) and/or a
+        // `data-locked` flag on individual options. Locked chips keep their × hidden and
+        // refuse removal while staying selected.
+        const lockedFromOptions = options.filter(o => o.locked).map(o => String(o.value).toLowerCase());
+        const computeLocked = (cfgObj) => {
+            const set = new Set(lockedFromOptions);
+            const raw = cfgObj && cfgObj.locked != null ? cfgObj.locked : cfg.locked;
+            const list = Array.isArray(raw) ? raw : (raw != null ? String(raw).split(',') : []);
+            list.forEach(v => set.add(String(v).trim().toLowerCase()));
+            return set;
+        };
+        let lockedSet = computeLocked();
+        const isLocked = (v) => lockedSet.has(String(v).toLowerCase());
+
+        // ----- Reactive model (x-model) — captured + stripped pre-walk, owned here -----
+        // The bound value may be a token array or a CSV string; we preserve whichever the
+        // author used (default array for .multiple). Chips render labels; the model carries
+        // values/tokens. Read/effect/set are wired near mount, once render() exists.
+        const modelExpr = el.__cbModelExpr || null;
+        let modelArrayShape = null;     // null until first read; true = array, false = CSV
+        let modelSet = null;
+        const modelToValues = (v) => {
+            if (v == null || v === '') return [];
+            if (Array.isArray(v)) return v.map(x => (x && typeof x === 'object' && x.value != null) ? x.value : x).map(String);
+            if (typeof v === 'string') return v.split(/[,\n;]+/).map(s => s.trim()).filter(Boolean);
+            return [String(v)];
+        };
+        const sameList = (a, b) => a.length === b.length && a.every((x, i) => String(x).toLowerCase() === String(b[i]).toLowerCase());
+        function syncOut() { if (modelSet) modelSet(selected.map(s => s.value)); }
 
         // ----- Menu -----
         let menu = null, generatedMenu = null, optionEls = [], createEl = null, emptyEl = null, activeIndex = -1;
@@ -421,18 +477,21 @@ function initializeComboboxPlugin() {
         function refocus() { suppressOpen = true; el.focus(); setTimeout(() => { suppressOpen = false; }, 0); }
 
         function addValue(value, label) {
-            if (!multiple) { selected = [{ value, label }]; render(); announce(label + ' selected'); return; }
+            if (!multiple) { selected = [{ value, label }]; render(); syncOut(); announce(label + ' selected'); return; }
             if (isSelected(value)) return;
             if (selected.length >= max) { announce('Maximum of ' + max + ' reached'); return; }
             selected.push({ value, label });
             render();
+            syncOut();
             announce(label + ' added');
         }
         function removeValue(value) {
+            if (isLocked(value)) return;     // locked chips stay put
             const i = selected.findIndex(s => String(s.value).toLowerCase() === String(value).toLowerCase());
             if (i < 0) return;
             const [g] = selected.splice(i, 1);
             render();
+            syncOut();
             announce(g.label + ' removed');
             if (menu && !isAsync) filter();
             refocus();
@@ -444,13 +503,24 @@ function initializeComboboxPlugin() {
             chip.dataset.value = s.value;
             const label = document.createElement('span');
             label.textContent = s.label;
+            chip.appendChild(label);
+            applyLock(chip, s.value, s.label);
+            return chip;
+        }
+        // Add or drop the × to match the value's locked state. Re-run from render() so a
+        // reactive `locked` change toggles the affordance on existing chips too.
+        function applyLock(chip, value, label) {
+            const locked = isLocked(value);
+            chip.toggleAttribute('data-locked', locked);
+            const btn = chip.querySelector(':scope > button');
+            if (locked) { if (btn) btn.remove(); return; }
+            if (btn) return;
             const x = document.createElement('button');
             x.type = 'button';
-            x.setAttribute('aria-label', 'Remove ' + s.label);
+            x.setAttribute('aria-label', 'Remove ' + (label || (chip.querySelector(':scope > span') || {}).textContent || value));
             x.textContent = '×';
-            x.addEventListener('click', () => removeValue(s.value));
-            chip.append(label, x);
-            return chip;
+            x.addEventListener('click', () => removeValue(value));
+            chip.appendChild(x);
         }
         function hidden(value) {
             const h = document.createElement('input');
@@ -462,14 +532,34 @@ function initializeComboboxPlugin() {
         }
 
         function render() {
-            wrap.querySelectorAll('.combobox-chip, input[data-cb]').forEach(n => n.remove());
             if (chips) {
+                // Incremental: keep existing chip nodes, only add new / drop removed /
+                // refresh locked state. Recreating every chip re-inserts them next to the
+                // focused editor, which collapses them to an ellipsis in WebKit; untouched
+                // nodes keep their width.
+                const norm = v => String(v).toLowerCase();
+                const have = new Map();
+                wrap.querySelectorAll('.combobox-chip').forEach(c => have.set(norm(c.dataset.value), c));
+                const want = selected.map(s => norm(s.value));
+                const wantSet = new Set(want);
+                have.forEach((node, key) => { if (!wantSet.has(key)) { node.remove(); have.delete(key); } });
                 selected.forEach(s => {
-                    wrap.insertBefore(makeChip(s), el);
-                    if (name) wrap.appendChild(hidden(s.value));
+                    const key = norm(s.value);
+                    const node = have.get(key);
+                    if (!node) { const n = makeChip(s); have.set(key, n); wrap.insertBefore(n, el); }
+                    else applyLock(node, s.value, s.label);
                 });
+                // Reorder to match selection only when it actually differs — needless
+                // re-insertion collapses chips in WebKit while the editor is focused, so the
+                // common append path (order already matches) skips this.
+                const cur = Array.from(wrap.querySelectorAll('.combobox-chip')).map(c => norm(c.dataset.value));
+                if (!sameList(cur, want)) selected.forEach(s => wrap.insertBefore(have.get(norm(s.value)), el));
+                // Hidden inputs are type=hidden (no layout), so a clean rebuild is harmless.
+                wrap.querySelectorAll('input[data-cb]').forEach(n => n.remove());
+                if (name) selected.forEach(s => wrap.appendChild(hidden(s.value)));
                 if (!editorNone) el.placeholder = selected.length ? '' : placeholder;
             } else if (!multiple) {
+                wrap.querySelectorAll('.combobox-chip, input[data-cb]').forEach(n => n.remove());
                 if (editorNone) el.textContent = selected[0] ? selected[0].label : placeholder;
                 else { el.value = selected[0] ? selected[0].label : ''; el.placeholder = placeholder; }
                 if (name && selected[0]) wrap.appendChild(hidden(selected[0].value));
@@ -587,9 +677,61 @@ function initializeComboboxPlugin() {
         // a stale, sometimes-open duplicate. Authored/adopted menus go with their container.
         if (cleanup && generatedMenu) cleanup(() => { if (generatedMenu.isConnected) generatedMenu.remove(); });
 
-        // ----- Seed initial chips from value="a, b" (fresh input triggers only;
-        //        an adopted wrapper already provided its selection above) -----
-        if (!adopt && !editorNone && chips && el.value) {
+        // ----- Reactive model (x-model) -----
+        // Renders chips from the bound value on init and whenever it changes externally
+        // (e.g. switching which record is being edited); writes back on add/remove. The
+        // read runs inside an Alpine effect so $x / nested state stay reactive.
+        if (modelExpr) {
+            const read = Alpine.evaluateLater(el, modelExpr);
+            modelSet = (vals) => {
+                const out = !multiple ? (vals.length ? vals[0] : '')
+                    : (modelArrayShape === false ? vals.join(',') : vals.slice());
+                try { Alpine.evaluate(el, `${modelExpr} = ${JSON.stringify(out)}`); } catch (_) { }
+            };
+            Alpine.effect(() => {
+                read(raw => {
+                    if (modelArrayShape === null && raw != null && raw !== '') modelArrayShape = Array.isArray(raw);
+                    const incoming = modelToValues(raw);
+                    if (sameList(incoming, selected.map(s => s.value))) return;   // unchanged / our own write-back
+                    selected = incoming.map(v => ({ value: v, label: labelFor(v) }));
+                    if (!multiple && selected.length > 1) selected = selected.slice(-1);
+                    render();
+                });
+            });
+        }
+
+        // ----- Reactive locked list (config-object form re-evaluates, so authors can
+        //        gate it on state, e.g. last-owner: locked: owners.length <= 1 ? ['owner'] : []) -----
+        if (expr.startsWith('{')) {
+            Alpine.effect(() => {
+                let c; try { c = Alpine.evaluate(el, expr); } catch (_) { return; }
+                const next = computeLocked(c && typeof c === 'object' && !Array.isArray(c) ? c : null);
+                if (next.size === lockedSet.size && [...next].every(v => lockedSet.has(v))) return;
+                lockedSet = next;
+                render();
+            });
+        }
+
+        // ----- Dynamic options: re-read when x-for / $x fills the source list after
+        //        build, so the menu, chip labels, and data-locked flags stay current. -----
+        if (src) {
+            const reread = () => {
+                options = readOptions(src);
+                lockedFromOptions.length = 0;
+                options.filter(o => o.locked).forEach(o => lockedFromOptions.push(String(o.value).toLowerCase()));
+                lockedSet = computeLocked();
+                selected = selected.map(s => ({ value: s.value, label: labelFor(s.value) }));
+                if (generatedMenu) setOptions(options);
+                render();
+            };
+            const mo = new MutationObserver(reread);
+            mo.observe(src, { childList: true, subtree: true, characterData: true });
+            if (cleanup) cleanup(() => mo.disconnect());
+        }
+
+        // ----- Seed initial chips from value="a, b" — only when there's no x-model
+        //        (x-model wins) and no adopted wrapper (which already seeded). -----
+        if (!modelExpr && !adopt && !editorNone && chips && el.value) {
             const seeds = el.value.split(/[,\n;]+/).map(s => s.trim()).filter(Boolean);
             el.value = '';
             seeds.forEach(s => commitText(s));

package/lib/manifest.css

@@ -1533,7 +1533,7 @@
     /* Chips */
     :where(.combobox-chip):not(.unstyle) {
         display: inline-flex;
-        flex-shrink: 0;                /* wrap, don't shrink — overflow:hidden below otherwise lets flex squeeze chips to an ellipsis (notably Safari) */
+        flex: 0 0 auto;                /* hold content width; don't grow or shrink — overflow:hidden below otherwise lets flex squeeze chips to an ellipsis (notably Safari) */
         align-items: center;
         gap: var(--spacing, 0.25rem);
         max-width: 100%;
@@ -1575,6 +1575,12 @@
             }
         }
 
+        /* Locked — selected but not removable; no × button, so restore the right padding */
+        &[data-locked] {
+            padding-inline-end: calc(var(--spacing, 0.25rem) * 2);
+            cursor: default
+        }
+
         /* Failed validation */
         &[aria-invalid="true"] {
             color: var(--color-negative-inverse, oklch(44.4% 0.177 26.899));

package/lib/manifest.integrity.json

@@ -6,7 +6,7 @@
   "manifest.code.js": "sha384-BJSRJ7txA6fY660qX+SfEEBrEB0dOChHdHI4/9iNGz3rGqohEZdzs7qA3LuR1GJW",
   "manifest.color.js": "sha384-6Rv3LxyTcZNjrhtayQfqRdCx0uSZ4BiEbgEI98I62eTvp8Aw7LBIoNJ0Je1oktwL",
   "manifest.colorpicker.js": "sha384-Wqz0ZIbeIi7KarqqqSLsQk+7E/fMaKhb32hrq5/eWzX1yjqMrpPZKH8y+jZ3mfg+",
-  "manifest.combobox.js": "sha384-Tlw0aURKFQu0TA+ukRvNv+RHWrNIgWo4/h8mVjwm+CjllcTGL3s5krgllUw76jVc",
+  "manifest.combobox.js": "sha384-3rP3iWhh5lJsoQcqY6pBJUMzfSqQUqwHRxkSCOJiRo0HbmIXu5YXzy3UFOYnfbrh",
   "manifest.components.js": "sha384-mzPFoM0vqL9dnTVLMN3OrmO+KCgSqGknM1fd7bM1xzYeCco5OaZi56IMR5RS5oad",
   "manifest.data.js": "sha384-bCYTYyAYNVkg5pSwGcoe07Dgf5B7JDN7GtOIQdS+BtrBStQwvjZtskiQ38Bncvrf",
   "manifest.datepicker.js": "sha384-NEb/H4vuR3CFtRcodHsm3jJjrcYW2JMpDlQKlgwTrzpMMTcDkFKYXzAYJD0gZ7Ov",
@@ -27,6 +27,6 @@
   "manifest.tooltips.js": "sha384-ADzAx9D0HWq2b46mvNG05iOwPmEWdiFZNpEOXONSbBxs4xj1B/bzNL7S3x2R9cS1",
   "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
   "manifest.utilities.js": "sha384-HWyVkjQoDRlWFKDBQw4RQOYODkBcU72NHW6l1p4bhQv1RtN0/XtnjwIb+lQK6+zv",
-  "manifest.virtual.js": "sha384-J2+MpRskVH39R2DmHUib2bItuGsvSLEhPM+83iznrdfQFMZ63Ea6xwLeCsG04jOl",
+  "manifest.virtual.js": "sha384-0W3Hg1Gu4YcHibh0KB0G56/a2v9n7tO5Fw2Pz2rJmHbitvJWZ69f6nvYRVkQB2JE",
   "manifest.js": "sha384-zPXrym9jwpYVdg4TJ1XPQVxQhz7uezdDubaO/MZDvLeiTufor+6lNJsTG75cYPXm"
 }