@vmz/core 0.3.10 → 0.3.11

package/dist/browser/direct-api.types.d.ts

@@ -142,6 +142,7 @@ export type DirectApi = {
     adoptEnter: (node: Element) => boolean;
     adoptLeave: () => void;
     projectDefaultSlot: (hostEl: HTMLElement, node: Node) => void;
+    projectNamedSlot: (hostEl: HTMLElement, name: string, node: Node) => void;
     setHtml: (el: Element, value: unknown) => void;
     setShow: (el: HTMLElement, condition: unknown) => void;
     bindHtml: (inst: DirectInstance, bindingId: BindingId, deps: string[], get: PatchFn, el: Element) => void;

package/dist/browser/dom/component.d.ts

@@ -3,6 +3,14 @@ export declare function settlePendingChildMounts(inst: any): Promise<void>;
 export declare function runDirectCreate(Component: any, inst: any): any;
 export declare function findOwnedDefaultSlot(root: any): any;
 export declare function findOwnedDefaultSlotTarget(root: any): any;
+/**
+ * Owned `<slot name="…">` outlet for a named projection.
+ *
+ * Same ownership rule as {@link findOwnedDefaultSlot}: a nested component host
+ * (`[data-vmz]` / `__vmzInst`) is a boundary, so projecting `header` into a Card
+ * can never capture a Button's own named slot.
+ */
+export declare function findOwnedNamedSlot(root: any, name: any): any;
 export declare function createInstance(Component: any, props?: any): any;
 export declare function destroy(inst: any): void;
 /**
@@ -13,15 +21,19 @@ export declare function destroy(inst: any): void;
 export declare function slotAnchorFor(node: any): any;
 export declare function insertProjectedSlotNode(target: any, node: any): any;
 /**
- * Hold projected children until the component's default slot exists.
+ * Hold projected children until the component slot exists.
  *
  * A slot inside an unmounted `v-if` branch (closed drawer/dialog, loading
  * skeleton) is absent at projection time. Appending to the component root would
  * paint the child into the live page, so keep it detached and splice it in when
  * the slot is mounted.
+ *
+ * `name` parks for a specific `slot name="…"` outlet. Named projections never
+ * fall back into the default slot: a missing named outlet keeps the node parked
+ * (or drops it on hosts without MutationObserver) instead of polluting it.
  */
-export declare function parkSlotNode(hostEl: any, node: any): void;
-/** Move parked children into the now-mounted default slot. Returns true when drained. */
+export declare function parkSlotNode(hostEl: any, node: any, name?: any): void;
+/** Move parked children into the now-mounted slot. Returns true when any drained. */
 export declare function flushParkedSlotNodes(hostEl: any): boolean;
 export declare function disposeDomTree(root: any): void;
 export declare function snapshotInstanceState(inst: any): {};

package/dist/browser/dom/component.js

@@ -120,6 +120,37 @@ export function findOwnedDefaultSlotTarget(root) {
     };
     return walk(root);
 }
+/**
+ * Owned `<slot name="…">` outlet for a named projection.
+ *
+ * Same ownership rule as {@link findOwnedDefaultSlot}: a nested component host
+ * (`[data-vmz]` / `__vmzInst`) is a boundary, so projecting `header` into a Card
+ * can never capture a Button's own named slot.
+ */
+export function findOwnedNamedSlot(root, name) {
+    if (!root || root.nodeType !== 1)
+        return null;
+    if (name == null || name === '')
+        return null;
+    const wanted = String(name);
+    const tag = String(root.tagName || '').toLowerCase();
+    if (tag === 'slot' && root.getAttribute('name') === wanted)
+        return root;
+    const kids = root.children;
+    if (!kids || !kids.length)
+        return null;
+    for (let i = 0; i < kids.length; i++) {
+        const c = kids[i];
+        if (c.nodeType !== 1)
+            continue;
+        if (c.hasAttribute('data-vmz') || c.__vmzInst)
+            continue;
+        const hit = findOwnedNamedSlot(c, wanted);
+        if (hit)
+            return hit;
+    }
+    return null;
+}
 export function createInstance(Component, props = {}) {
     if (precision.enabled)
         precision.componentExecs++;
@@ -203,17 +234,24 @@ export function insertProjectedSlotNode(target, node) {
     return anchor;
 }
 /**
- * Hold projected children until the component's default slot exists.
+ * Hold projected children until the component slot exists.
  *
  * A slot inside an unmounted `v-if` branch (closed drawer/dialog, loading
  * skeleton) is absent at projection time. Appending to the component root would
  * paint the child into the live page, so keep it detached and splice it in when
  * the slot is mounted.
+ *
+ * `name` parks for a specific `slot name="…"` outlet. Named projections never
+ * fall back into the default slot: a missing named outlet keeps the node parked
+ * (or drops it on hosts without MutationObserver) instead of polluting it.
  */
-export function parkSlotNode(hostEl, node) {
+export function parkSlotNode(hostEl, node, name = null) {
     if (!hostEl || !node)
         return;
+    const slotName = name == null ? null : String(name);
     if (typeof MutationObserver === 'undefined') {
+        if (slotName != null)
+            return;
         // Non-browser DOM (unit hosts): preserve the legacy root fallback.
         const child = hostEl.__vmzInst;
         const root = (child && child.__vmzDomRoot) || hostEl;
@@ -223,8 +261,28 @@ export function parkSlotNode(hostEl, node) {
             hostEl.appendChild(node);
         return;
     }
-    const parked = hostEl.__vmzSlotParked || (hostEl.__vmzSlotParked = []);
-    parked.push(node);
+    if (slotName == null) {
+        const parked = hostEl.__vmzSlotParked || (hostEl.__vmzSlotParked = []);
+        parked.push(node);
+    }
+    else {
+        namedSlotParked(hostEl, slotName).push(node);
+    }
+    ensureSlotObserver(hostEl);
+}
+function namedSlotParked(hostEl, name) {
+    const map = hostEl.__vmzNamedSlotParked || (hostEl.__vmzNamedSlotParked = new Map());
+    const list = map.get(name);
+    if (list)
+        return list;
+    const fresh = [];
+    map.set(name, fresh);
+    return fresh;
+}
+function namedSlotAnchor(hostEl) {
+    return hostEl.__vmzNamedSlotAnchor || (hostEl.__vmzNamedSlotAnchor = new Map());
+}
+function ensureSlotObserver(hostEl) {
     if (hostEl.__vmzSlotObserver)
         return;
     hostEl.__vmzSlotObserver = new MutationObserver(() => {
@@ -235,44 +293,64 @@ export function parkSlotNode(hostEl, node) {
         hostEl.__vmzSlotObserver.observe(scope, { childList: true, subtree: true });
     }
 }
-/** Move parked children into the now-mounted default slot. Returns true when drained. */
+/** Move parked children into the now-mounted slot. Returns true when any drained. */
 export function flushParkedSlotNodes(hostEl) {
     if (!hostEl)
         return false;
-    const parked = hostEl.__vmzSlotParked;
-    if (!parked || !parked.length)
-        return false;
     const child = hostEl.__vmzInst;
     const root = (child && child.__vmzDomRoot) || hostEl;
     if (!root || root.nodeType !== 1)
         return false;
-    const target = findOwnedDefaultSlotTarget(root);
-    if (!target || !target.parentNode)
-        return false;
-    if (hostEl.__vmzSlotObserver) {
+    let drained = false;
+    const parkedDefault = hostEl.__vmzSlotParked;
+    if (parkedDefault && parkedDefault.length) {
+        const target = findOwnedDefaultSlotTarget(root);
+        if (target && target.parentNode) {
+            hostEl.__vmzSlotParked = [];
+            hostEl.__vmzSlotAnchor = insertParked(hostEl, target, parkedDefault);
+            drained = true;
+        }
+    }
+    const named = hostEl.__vmzNamedSlotParked;
+    if (named && named.size) {
+        for (const [name, nodes] of named) {
+            if (!nodes.length) {
+                named.delete(name);
+                continue;
+            }
+            const target = findOwnedNamedSlot(root, name);
+            if (!target || !target.parentNode)
+                continue;
+            named.delete(name);
+            namedSlotAnchor(hostEl).set(name, insertParked(hostEl, target, nodes));
+            drained = true;
+        }
+    }
+    const stillParked = (hostEl.__vmzSlotParked && hostEl.__vmzSlotParked.length > 0) ||
+        (hostEl.__vmzNamedSlotParked && hostEl.__vmzNamedSlotParked.size > 0);
+    if (drained && !stillParked && hostEl.__vmzSlotObserver) {
         hostEl.__vmzSlotObserver.disconnect();
         hostEl.__vmzSlotObserver = null;
     }
-    hostEl.__vmzSlotParked = [];
+    return drained;
+}
+function insertParked(hostEl, target, parked) {
     const anchor = slotAnchorFor(parked[parked.length - 1]);
     const tag = String(target.tagName || '').toLowerCase();
     if (tag === 'slot') {
         const frag = typeof document !== 'undefined' ? document.createDocumentFragment() : null;
         if (!frag) {
             target.replaceWith(parked[0]);
-            hostEl.__vmzSlotAnchor = anchor;
-            return true;
+            return anchor;
         }
         for (const node of parked)
             frag.appendChild(node);
         target.replaceWith(frag);
-        hostEl.__vmzSlotAnchor = anchor;
-        return true;
+        return anchor;
     }
     for (const node of parked)
         target.appendChild(node);
-    hostEl.__vmzSlotAnchor = anchor;
-    return true;
+    return anchor;
 }
 export function disposeDomTree(root) {
     if (!root)
@@ -304,6 +382,10 @@ export function disposeDomTree(root) {
             node.__vmzSlotParked = [];
         if (node.__vmzSlotAnchor)
             node.__vmzSlotAnchor = null;
+        if (node.__vmzNamedSlotParked)
+            node.__vmzNamedSlotParked = null;
+        if (node.__vmzNamedSlotAnchor)
+            node.__vmzNamedSlotAnchor = null;
         let child = node.firstChild;
         while (child) {
             const next = child.nextSibling;

package/dist/browser/dom/direct-api.d.ts

@@ -83,4 +83,13 @@ export declare const directApi: {
      * Uses {@link findOwnedDefaultSlot} so nested Button/Link slots are not stolen.
      */
     projectDefaultSlot(hostEl: any, node: any): void;
+    /**
+     * Project parent children into a nested Direct component's `<slot name="…">`.
+     *
+     * Named projections are name-only (scope-slot values are not passed yet). The
+     * outlet search stops at nested component hosts, so a `header` projection never
+     * steals a nested Button's own named slot. A name with no outlet parks under that
+     * name — it must not fall through into the default slot.
+     */
+    projectNamedSlot(hostEl: any, name: any, node: any): void;
 };

package/dist/browser/dom/direct-api.js

@@ -2,7 +2,7 @@ import { mergeClassParts, mergeStyleParts } from '../../shared/dom-attr-normaliz
 import { applyDirectHostBox } from '../direct-host-box.js';
 import { createUnknownComponentElement } from '../unknown-component.js';
 import { applyDomAttr, eventPropHandlerName } from './attributes.js';
-import { createInstance, disposeDomTree, findOwnedDefaultSlotTarget, insertProjectedSlotNode, parkSlotNode, runDirectCreate, slotAnchorFor, stripFns, } from './component.js';
+import { createInstance, disposeDomTree, findOwnedDefaultSlotTarget, findOwnedNamedSlot, insertProjectedSlotNode, parkSlotNode, runDirectCreate, slotAnchorFor, stripFns, } from './component.js';
 import { isEventEntryStrategy, noteDomCreate, noteDomRemove, scheduleClientOn } from './lifecycle.js';
 import { components, resolveComponent } from './registry.js';
 import { beginEventFlush, endEventFlush, inferHandlerMethod, methodAllowsSyncEventFlush, registerBind, runDomEventHandler, runPatch, scheduleRefresh, unregisterBind, } from '../reactivity/patch-scheduler.js';
@@ -524,4 +524,41 @@ export const directApi = {
         // the component root, where it would otherwise leak into the rendered page.
         parkSlotNode(hostEl, node);
     },
+    /**
+     * Project parent children into a nested Direct component's `<slot name="…">`.
+     *
+     * Named projections are name-only (scope-slot values are not passed yet). The
+     * outlet search stops at nested component hosts, so a `header` projection never
+     * steals a nested Button's own named slot. A name with no outlet parks under that
+     * name — it must not fall through into the default slot.
+     */
+    projectNamedSlot(hostEl, name, node) {
+        if (!hostEl || node == null)
+            return;
+        const key = name == null ? '' : String(name);
+        if (!key || key === 'default') {
+            directApi.projectDefaultSlot(hostEl, node);
+            return;
+        }
+        const child = hostEl.__vmzInst;
+        let root = (child && child.__vmzDomRoot) || hostEl;
+        if (!root || root.nodeType !== 1)
+            root = hostEl;
+        const target = root && root.nodeType === 1 ? findOwnedNamedSlot(root, key) : null;
+        if (target && target.parentNode) {
+            const anchors = hostEl.__vmzNamedSlotAnchor || (hostEl.__vmzNamedSlotAnchor = new Map());
+            anchors.set(key, insertProjectedSlotNode(target, node));
+            return;
+        }
+        // The named `<slot>` was replaced by an earlier projected child: append after
+        // the last one for the same name instead of re-searching.
+        const anchors = hostEl.__vmzNamedSlotAnchor;
+        const anchor = anchors && anchors.get(key);
+        if (anchor && anchor.parentNode) {
+            anchors.set(key, slotAnchorFor(node));
+            anchor.parentNode.insertBefore(node, anchor.nextSibling);
+            return;
+        }
+        parkSlotNode(hostEl, node, key);
+    },
 };

package/dist/browser/dom-core.d.ts

@@ -16,6 +16,7 @@ export { settlePendingChildMounts } from './dom/component.js';
 export { runDirectCreate } from './dom/component.js';
 export { findOwnedDefaultSlot } from './dom/component.js';
 export { findOwnedDefaultSlotTarget } from './dom/component.js';
+export { findOwnedNamedSlot } from './dom/component.js';
 export { createInstance } from './dom/component.js';
 export { destroy } from './dom/component.js';
 export { disposeDomTree } from './dom/component.js';

package/dist/browser/dom-core.js

@@ -16,6 +16,7 @@ export { settlePendingChildMounts } from './dom/component.js';
 export { runDirectCreate } from './dom/component.js';
 export { findOwnedDefaultSlot } from './dom/component.js';
 export { findOwnedDefaultSlotTarget } from './dom/component.js';
+export { findOwnedNamedSlot } from './dom/component.js';
 export { createInstance } from './dom/component.js';
 export { destroy } from './dom/component.js';
 export { disposeDomTree } from './dom/component.js';

package/dist/ssr/serialize.js

@@ -307,6 +307,64 @@ function makeVirtualEl(tag) {
     });
     return node;
 }
+/**
+ * Owned `<slot>` outlet in a serialize el tree.
+ *
+ * `name === null` matches the default outlet (no `name` attr). Named lookups require
+ * an exact match and stop at nested component shells (`data-vmz`), mirroring the
+ * browser runtime ownership boundary.
+ */
+function findOwnedSerializeSlot(n, name) {
+    if (!n || typeof n !== 'object')
+        return null;
+    if (n.__kind === 'frag') {
+        for (const c of n.children || []) {
+            const hit = findOwnedSerializeSlot(c, name);
+            if (hit)
+                return hit;
+        }
+        return null;
+    }
+    if (n.__kind !== 'el')
+        return null;
+    if (n.tag === 'slot') {
+        const outletName = n.attrs && n.attrs.name != null ? String(n.attrs.name) : '';
+        if (name == null ? !outletName : outletName === name)
+            return n;
+    }
+    for (const c of n.children || []) {
+        if (c && c.__kind === 'el' && c.attrs && c.attrs['data-vmz'] != null)
+            continue;
+        const hit = findOwnedSerializeSlot(c, name);
+        if (hit)
+            return hit;
+    }
+    return null;
+}
+function findOwnedSerializeSlotTarget(n, name) {
+    const slot = findOwnedSerializeSlot(n, name);
+    if (slot)
+        return slot;
+    if (name != null)
+        return null;
+    if (!n || n.__kind !== 'el')
+        return null;
+    const tag = String(n.tag || '').toLowerCase();
+    if ((tag === 'button' || tag === 'a') && n.attrs && n.attrs['data-vmz-ui'] === 'button')
+        return n;
+    if (n.attrs && n.attrs['data-vmz'] != null)
+        return null;
+    for (const c of n.children || []) {
+        if (c && c.__kind === 'el' && c.attrs && c.attrs['data-vmz'] != null)
+            continue;
+        const hit = findOwnedSerializeSlotTarget(c, name);
+        if (hit)
+            return hit;
+    }
+    return null;
+}
+/** Outlets that already received projected content (fallback children dropped once). */
+const filledSerializeSlots = new WeakSet();
 const serializeApi = {
     _inst: null,
     _branchBinds: null,
@@ -476,69 +534,25 @@ const serializeApi = {
             return;
         // serializeApi.component returns a serialize el tree (or island shell).
         const root = hostEl.__kind === 'el' ? hostEl : null;
-        const findOwnedSlot = (n) => {
-            if (!n || typeof n !== 'object')
-                return null;
-            if (n.__kind === 'frag') {
-                for (const c of n.children || []) {
-                    const hit = findOwnedSlot(c);
-                    if (hit)
-                        return hit;
-                }
-                return null;
-            }
-            if (n.__kind !== 'el')
-                return null;
-            if (n.tag === 'slot' && !(n.attrs && n.attrs.name))
-                return n;
-            for (const c of n.children || []) {
-                if (c && c.__kind === 'el' && c.attrs && c.attrs['data-vmz'] != null)
-                    continue;
-                const hit = findOwnedSlot(c);
-                if (hit)
-                    return hit;
-            }
-            return null;
-        };
-        const findOwnedSlotTarget = (n) => {
-            const slot = findOwnedSlot(n);
-            if (slot)
-                return slot;
-            if (!n || n.__kind !== 'el')
-                return null;
-            const tag = String(n.tag || '').toLowerCase();
-            if ((tag === 'button' || tag === 'a') && n.attrs && n.attrs['data-vmz-ui'] === 'button')
-                return n;
-            if (n.attrs && n.attrs['data-vmz'] != null)
-                return null;
-            for (const c of n.children || []) {
-                if (c && c.__kind === 'el' && c.attrs && c.attrs['data-vmz'] != null)
-                    continue;
-                const hit = findOwnedSlotTarget(c);
-                if (hit)
-                    return hit;
-            }
-            return null;
-        };
         // Prefer searching the component body (first child of host wrapper).
         let target = null;
         if (root) {
             for (const c of root.children || []) {
                 if (c && c.__kind === 'el' && c.attrs && c.attrs['data-vmz'] != null)
                     continue;
-                target = findOwnedSlotTarget(c);
+                target = findOwnedSerializeSlotTarget(c, null);
                 if (target)
                     break;
             }
             if (!target)
-                target = findOwnedSlotTarget(root);
+                target = findOwnedSerializeSlotTarget(root, null);
         }
         if (target) {
             if (target.tag === 'slot') {
                 target.__rawHtml = null;
                 if (!Array.isArray(target.children))
                     target.children = [];
-                // Append ??multiple projectDefaultSlot calls must accumulate (SSR).
+                // Append — multiple projectDefaultSlot calls must accumulate (SSR).
                 // Client path replaces the live <slot> then appends siblings; serialize must push.
                 target.children.push(node);
                 return;
@@ -552,6 +566,46 @@ const serializeApi = {
         // mounted (closed overlay, loading skeleton). Mirror the browser runtime and
         // drop them instead of painting them into the component root.
     },
+    /**
+     * Project parent children into a nested component's `<slot name="…">` outlet.
+     *
+     * Named projections are name-only (scope-slot values are not passed yet). Only an
+     * outlet with the exact `name` accepts the node — a missing name drops it instead
+     * of landing in the default slot. Fallback children stop rendering once the outlet
+     * has projected content.
+     */
+    projectNamedSlot(hostEl, name, node) {
+        if (!hostEl || node == null)
+            return;
+        const key = name == null ? '' : String(name);
+        if (!key || key === 'default') {
+            serializeApi.projectDefaultSlot(hostEl, node);
+            return;
+        }
+        const root = hostEl.__kind === 'el' ? hostEl : null;
+        let target = null;
+        if (root) {
+            for (const c of root.children || []) {
+                if (c && c.__kind === 'el' && c.attrs && c.attrs['data-vmz'] != null)
+                    continue;
+                target = findOwnedSerializeSlotTarget(c, key);
+                if (target)
+                    break;
+            }
+            if (!target)
+                target = findOwnedSerializeSlotTarget(root, key);
+        }
+        if (!target)
+            return;
+        target.__rawHtml = null;
+        if (!Array.isArray(target.children))
+            target.children = [];
+        if (!filledSerializeSlots.has(target)) {
+            filledSerializeSlots.add(target);
+            target.children.length = 0;
+        }
+        target.children.push(node);
+    },
     setHtml(el, value) {
         if (!el || el.__kind !== 'el')
             return;

package/package.json

@@ -68,12 +68,12 @@
   "main": "./dist/faces/server.js",
   "name": "@vmz/core",
   "optionalDependencies": {
-    "@vmz/vmz-darwin-arm64": "0.3.10",
-    "@vmz/vmz-darwin-x64": "0.3.10",
-    "@vmz/vmz-linux-arm64": "0.3.10",
-    "@vmz/vmz-linux-x64": "0.3.10",
-    "@vmz/vmz-win32-arm64": "0.3.10",
-    "@vmz/vmz-win32-x64": "0.3.10"
+    "@vmz/vmz-darwin-arm64": "0.3.11",
+    "@vmz/vmz-darwin-x64": "0.3.11",
+    "@vmz/vmz-linux-arm64": "0.3.11",
+    "@vmz/vmz-linux-x64": "0.3.11",
+    "@vmz/vmz-win32-arm64": "0.3.11",
+    "@vmz/vmz-win32-x64": "0.3.11"
   },
   "publishConfig": {
     "access": "public"
@@ -88,5 +88,5 @@
   },
   "type": "module",
   "types": "./dist/faces/index.d.ts",
-  "version": "0.3.10"
+  "version": "0.3.11"
 }