@threadlabs/looma 0.2.7 → 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.7",
+  "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-4DPYH3IT.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,
@@ -2194,7 +2210,7 @@ var UiTopBar_default = /* @__PURE__ */ _defineComponent31({
 
 // src/generated/UiTreeItem.ts
 import { defineComponent as _defineComponent32 } from "vue";
-import { createElementVNode as _createElementVNode19, renderSlot as _renderSlot31, mergeProps as _mergeProps32, openBlock as _openBlock32, createElementBlock as _createElementBlock32 } from "vue";
+import { createElementVNode as _createElementVNode19, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot31, mergeProps as _mergeProps32, openBlock as _openBlock32, createElementBlock as _createElementBlock32 } from "vue";
 import { onMounted as onMounted32, onUnmounted as onUnmounted32, ref as ref32, watchEffect as watchEffect33 } from "vue";
 import { attachLoomaComponent as attachLoomaComponent27 } from "@threadlabs/looma/core/declarative";
 var _hoisted_129 = ["aria-label", "data-container", "data-selected", "data-disabled", "data-drop-scope", "data-accepts"];
@@ -2279,7 +2295,7 @@ var UiTreeItem_default = /* @__PURE__ */ _defineComponent32({
         ref: root
       }), [
         _createElementVNode19("div", _hoisted_214, [
-          _cache[0] || (_cache[0] = _createElementVNode19(
+          props.sortable && !props.disabled ? _cache[0] || (_cache[0] = _createElementVNode19(
             "button",
             {
               class: "drag-handle",
@@ -2292,27 +2308,30 @@ var UiTreeItem_default = /* @__PURE__ */ _defineComponent32({
             ],
             -1
             /* CACHED */
-          )),
-          _cache[1] || (_cache[1] = _createElementVNode19(
-            "template",
-            { "data-component": "ui-tree-item" },
+          )) : _createCommentVNode("v-if", true),
+          props.container ? _cache[1] || (_cache[1] = _createElementVNode19(
+            "button",
+            {
+              class: "disclosure",
+              part: "disclosure",
+              type: "button",
+              "data-component": "ui-tree-item"
+            },
             [
-              _createElementVNode19("button", {
-                class: "disclosure",
-                part: "disclosure",
-                type: "button",
-                "data-component": "ui-tree-item"
-              }, [
-                _createElementVNode19("span", { "data-component": "ui-tree-item" })
-              ]),
-              _createElementVNode19("span", {
-                class: "disclosure-spacer",
-                "aria-hidden": "true",
-                "data-component": "ui-tree-item"
-              })
+              _createElementVNode19("span", { "data-component": "ui-tree-item" })
             ],
             -1
             /* CACHED */
+          )) : _cache[4] || (_cache[4] = _createElementVNode19(
+            "span",
+            {
+              class: "disclosure-spacer",
+              "aria-hidden": "true",
+              "data-component": "ui-tree-item"
+            },
+            null,
+            -1
+            /* CACHED */
           )),
           _createElementVNode19("span", _hoisted_38, [
             _renderSlot31(_ctx.$slots, "leading")
@@ -2336,9 +2355,9 @@ var UiTreeItem_default = /* @__PURE__ */ _defineComponent32({
             /* CACHED */
           ))
         ]),
-        _createElementVNode19("div", _hoisted_63, [
+        props.container ? _createElementVNode19("div", _hoisted_63, [
           _renderSlot31(_ctx.$slots, "children")
-        ]),
+        ]) : _createCommentVNode("v-if", true),
         _cache[3] || (_cache[3] = _createElementVNode19(
           "span",
           {

package/vue/editor/index.js

@@ -10,7 +10,7 @@ import {
   UiEditorToolbar_default,
   createAdapterComponent,
   toHTMLElement
-} from "../chunk-4DPYH3IT.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-4DPYH3IT.js";
+} from "./chunk-KQTGO5WQ.js";
 export {
   ADAPTER_COMPONENT_TAG_MAP,
   AffordanceScope,