@threadlabs/looma 0.2.8 → 0.2.9

package/dist/{chunk-3K45IWIJ.js → chunk-FAEZV4LT.js}

@@ -139,8 +139,8 @@ function toInitials(value) {
 function controller3(host) {
   const img = host.element.querySelector("img");
   const fallback = host.element.querySelector(".fallback");
-  let hasImage = false;
   const apply = () => {
+    const hasImage = host.state.hasImage;
     const label = host.state.alt || host.state.name || "Avatar";
     host.element.setAttribute("role", "img");
     host.element.setAttribute("aria-label", label);
@@ -159,12 +159,10 @@ function controller3(host) {
     else host.element.removeAttribute("data-has-image");
   };
   const onLoad = () => {
-    hasImage = true;
-    apply();
+    host.state.hasImage = true;
   };
   const onError = () => {
-    hasImage = false;
-    apply();
+    host.state.hasImage = false;
   };
   img?.addEventListener("load", onLoad);
   img?.addEventListener("error", onError);
@@ -2020,13 +2018,18 @@ function controller19(host) {
   const status = host.element.querySelector(".search-shell__status");
   const footer = host.element.querySelector(".search-shell__footer");
   const syncSlots = () => {
-    if (status) status.hidden = !hasContent2(status);
-    if (footer) footer.hidden = !hasContent2(footer);
+    const hasStatus = Boolean(status && hasContent2(status));
+    const hasFooter = Boolean(footer && hasContent2(footer));
+    host.state.hasStatus = hasStatus;
+    host.state.hasFooter = hasFooter;
+    if (status) status.hidden = !hasStatus;
+    if (footer) footer.hidden = !hasFooter;
   };
   const observer = new MutationObserver(syncSlots);
   if (status) observer.observe(status, { childList: true, subtree: true });
   if (footer) observer.observe(footer, { childList: true, subtree: true });
   syncSlots();
+  queueMicrotask(syncSlots);
   return () => observer.disconnect();
 }
 
@@ -2467,13 +2470,24 @@ function hasContent3(region) {
   return [...region.childNodes].some((node) => node.nodeType !== 3 || Boolean(node.textContent?.trim()));
 }
 function controller26(host) {
-  const regions = ["leading", "search", "actions"].map((name) => host.element.querySelector(`.top-bar__${name}`)).filter(Boolean);
+  const regions = {
+    hasLeading: host.element.querySelector(".top-bar__leading"),
+    hasSearch: host.element.querySelector(".top-bar__search"),
+    hasActions: host.element.querySelector(".top-bar__actions")
+  };
   const syncSlots = () => {
-    for (const region of regions) region.hidden = !hasContent3(region);
+    for (const [state, region] of Object.entries(regions)) {
+      const present = Boolean(region && hasContent3(region));
+      host.state[state] = present;
+      if (region) region.hidden = !present;
+    }
   };
   const observer = new MutationObserver(syncSlots);
-  for (const region of regions) observer.observe(region, { childList: true, subtree: true });
+  for (const region of Object.values(regions)) {
+    if (region) observer.observe(region, { childList: true, subtree: true });
+  }
   syncSlots();
+  queueMicrotask(syncSlots);
   return () => observer.disconnect();
 }
 

package/dist/index.cjs

@@ -184,8 +184,8 @@ function toInitials(value) {
 function controller3(host) {
   const img = host.element.querySelector("img");
   const fallback = host.element.querySelector(".fallback");
-  let hasImage = false;
   const apply = () => {
+    const hasImage = host.state.hasImage;
     const label = host.state.alt || host.state.name || "Avatar";
     host.element.setAttribute("role", "img");
     host.element.setAttribute("aria-label", label);
@@ -204,12 +204,10 @@ function controller3(host) {
     else host.element.removeAttribute("data-has-image");
   };
   const onLoad = () => {
-    hasImage = true;
-    apply();
+    host.state.hasImage = true;
   };
   const onError = () => {
-    hasImage = false;
-    apply();
+    host.state.hasImage = false;
   };
   img?.addEventListener("load", onLoad);
   img?.addEventListener("error", onError);
@@ -2065,13 +2063,18 @@ function controller19(host) {
   const status = host.element.querySelector(".search-shell__status");
   const footer = host.element.querySelector(".search-shell__footer");
   const syncSlots = () => {
-    if (status) status.hidden = !hasContent2(status);
-    if (footer) footer.hidden = !hasContent2(footer);
+    const hasStatus = Boolean(status && hasContent2(status));
+    const hasFooter = Boolean(footer && hasContent2(footer));
+    host.state.hasStatus = hasStatus;
+    host.state.hasFooter = hasFooter;
+    if (status) status.hidden = !hasStatus;
+    if (footer) footer.hidden = !hasFooter;
   };
   const observer = new MutationObserver(syncSlots);
   if (status) observer.observe(status, { childList: true, subtree: true });
   if (footer) observer.observe(footer, { childList: true, subtree: true });
   syncSlots();
+  queueMicrotask(syncSlots);
   return () => observer.disconnect();
 }
 
@@ -2512,13 +2515,24 @@ function hasContent3(region) {
   return [...region.childNodes].some((node) => node.nodeType !== 3 || Boolean(node.textContent?.trim()));
 }
 function controller26(host) {
-  const regions = ["leading", "search", "actions"].map((name) => host.element.querySelector(`.top-bar__${name}`)).filter(Boolean);
+  const regions = {
+    hasLeading: host.element.querySelector(".top-bar__leading"),
+    hasSearch: host.element.querySelector(".top-bar__search"),
+    hasActions: host.element.querySelector(".top-bar__actions")
+  };
   const syncSlots = () => {
-    for (const region of regions) region.hidden = !hasContent3(region);
+    for (const [state2, region] of Object.entries(regions)) {
+      const present = Boolean(region && hasContent3(region));
+      host.state[state2] = present;
+      if (region) region.hidden = !present;
+    }
   };
   const observer = new MutationObserver(syncSlots);
-  for (const region of regions) observer.observe(region, { childList: true, subtree: true });
+  for (const region of Object.values(regions)) {
+    if (region) observer.observe(region, { childList: true, subtree: true });
+  }
   syncSlots();
+  queueMicrotask(syncSlots);
   return () => observer.disconnect();
 }
 

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   records,
   styles
-} from "./chunk-3K45IWIJ.js";
+} from "./chunk-FAEZV4LT.js";
 import {
   attachLoomaComponent,
   controllerFor,

package/dist/loader.cjs

@@ -160,8 +160,8 @@ function toInitials(value) {
 function controller3(host) {
   const img = host.element.querySelector("img");
   const fallback = host.element.querySelector(".fallback");
-  let hasImage = false;
   const apply = () => {
+    const hasImage = host.state.hasImage;
     const label = host.state.alt || host.state.name || "Avatar";
     host.element.setAttribute("role", "img");
     host.element.setAttribute("aria-label", label);
@@ -180,12 +180,10 @@ function controller3(host) {
     else host.element.removeAttribute("data-has-image");
   };
   const onLoad = () => {
-    hasImage = true;
-    apply();
+    host.state.hasImage = true;
   };
   const onError = () => {
-    hasImage = false;
-    apply();
+    host.state.hasImage = false;
   };
   img?.addEventListener("load", onLoad);
   img?.addEventListener("error", onError);
@@ -2041,13 +2039,18 @@ function controller19(host) {
   const status = host.element.querySelector(".search-shell__status");
   const footer = host.element.querySelector(".search-shell__footer");
   const syncSlots = () => {
-    if (status) status.hidden = !hasContent2(status);
-    if (footer) footer.hidden = !hasContent2(footer);
+    const hasStatus = Boolean(status && hasContent2(status));
+    const hasFooter = Boolean(footer && hasContent2(footer));
+    host.state.hasStatus = hasStatus;
+    host.state.hasFooter = hasFooter;
+    if (status) status.hidden = !hasStatus;
+    if (footer) footer.hidden = !hasFooter;
   };
   const observer = new MutationObserver(syncSlots);
   if (status) observer.observe(status, { childList: true, subtree: true });
   if (footer) observer.observe(footer, { childList: true, subtree: true });
   syncSlots();
+  queueMicrotask(syncSlots);
   return () => observer.disconnect();
 }
 
@@ -2488,13 +2491,24 @@ function hasContent3(region) {
   return [...region.childNodes].some((node) => node.nodeType !== 3 || Boolean(node.textContent?.trim()));
 }
 function controller26(host) {
-  const regions = ["leading", "search", "actions"].map((name) => host.element.querySelector(`.top-bar__${name}`)).filter(Boolean);
+  const regions = {
+    hasLeading: host.element.querySelector(".top-bar__leading"),
+    hasSearch: host.element.querySelector(".top-bar__search"),
+    hasActions: host.element.querySelector(".top-bar__actions")
+  };
   const syncSlots = () => {
-    for (const region of regions) region.hidden = !hasContent3(region);
+    for (const [state2, region] of Object.entries(regions)) {
+      const present = Boolean(region && hasContent3(region));
+      host.state[state2] = present;
+      if (region) region.hidden = !present;
+    }
   };
   const observer = new MutationObserver(syncSlots);
-  for (const region of regions) observer.observe(region, { childList: true, subtree: true });
+  for (const region of Object.values(regions)) {
+    if (region) observer.observe(region, { childList: true, subtree: true });
+  }
   syncSlots();
+  queueMicrotask(syncSlots);
   return () => observer.disconnect();
 }
 

package/dist/loader.js

@@ -1,7 +1,7 @@
 import {
   records,
   styles
-} from "./chunk-3K45IWIJ.js";
+} from "./chunk-FAEZV4LT.js";
 import {
   registerLoomaPackage
 } from "./chunk-3HMMDK27.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "type": "module",
   "description": "Looma declarative components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

package/vue/{chunk-5OS45GWE.js → chunk-KQTGO5WQ.js}

@@ -4,11 +4,24 @@ import "@threadlabs/looma/core";
 
 // src/adapter.ts
 import {
+  cloneVNode,
   defineComponent,
+  Fragment,
   h,
+  isVNode,
   shallowRef,
   watchEffect
 } from "vue";
+function assignNamedSlot(value, slotName) {
+  if (Array.isArray(value)) return value.map((child) => assignNamedSlot(child, slotName));
+  if (!isVNode(value)) return value;
+  if (value.type === Fragment && Array.isArray(value.children)) {
+    const fragment = cloneVNode(value);
+    fragment.children = value.children.map((child) => assignNamedSlot(child, slotName));
+    return fragment;
+  }
+  return cloneVNode(value, { slot: slotName });
+}
 var BASE_EVENT_BINDINGS = [
   ["open", "onOpen"],
   ["close", "onClose"],
@@ -68,7 +81,10 @@ function createAdapterComponent(component, displayName, additionalEventBindings
           )
         );
         const componentSlots = Object.fromEntries(
-          Object.entries(slots).filter((entry) => Boolean(entry[1])).map(([slotName, slotFn]) => [slotName, () => slotFn()])
+          Object.entries(slots).filter((entry) => Boolean(entry[1])).map(([slotName, slotFn]) => [
+            slotName,
+            () => slotName === "default" ? slotFn() : assignNamedSlot(slotFn(), slotName)
+          ])
         );
         return h(
           component,

package/vue/editor/index.js

@@ -10,7 +10,7 @@ import {
   UiEditorToolbar_default,
   createAdapterComponent,
   toHTMLElement
-} from "../chunk-5OS45GWE.js";
+} from "../chunk-KQTGO5WQ.js";
 
 // src/editor/index.ts
 import "@threadlabs/looma/editor";

package/vue/index.js

@@ -43,7 +43,7 @@ import {
   Tree,
   TreeItem,
   VUE_ADAPTER_NOTE
-} from "./chunk-5OS45GWE.js";
+} from "./chunk-KQTGO5WQ.js";
 export {
   ADAPTER_COMPONENT_TAG_MAP,
   AffordanceScope,