@threadlabs/looma 0.1.22 → 0.1.23

package/dist/{ui-tooltip.entry-G5WHQW7K.js → ui-tooltip.entry-COWTWVHX.js}

@@ -1,26 +1,28 @@
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
 import {
   closeOverlay,
-  openOverlay,
-  requestTopOverlayClose
-} from "./chunk-SZJQ3NPX.js";
+  openOverlay
+} from "./chunk-TL4FIE7X.js";
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
-import {
-  dispatchDetail
-} from "./chunk-UL7UIUJZ.js";
 import {
   Host,
+  createEvent,
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-GDMQKT5F.js";
 
 // dist/esm/ui-tooltip.entry.js
 var uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md);opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
 var UITooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.opened = createEvent(this, "open");
+    this.closed = createEvent(this, "close");
   }
   get host() {
     return getElement(this);
@@ -33,6 +35,12 @@ var UITooltip = class {
   showDelay = 500;
   /** Pointer leave grace period in milliseconds. */
   hideDelay = 100;
+  /** Click or tap pins the description; activate again to dismiss. */
+  toggleOnClick = false;
+  pinned = false;
+  focused = false;
+  opened;
+  closed;
   internalOpen = false;
   overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
   trigger = null;
@@ -65,11 +73,14 @@ var UITooltip = class {
     }
   }
   componentDidLoad() {
+    if (!this.host.id)
+      this.host.id = this.overlayId;
     this.syncFromProp();
     this.internalOpen = this.internalOpen || this.defaultOpen;
     this.syncTrigger();
     this.setupSurface();
-    this.host.addEventListener("keydown", this.onKeydown);
+    this.host.addEventListener("pointerenter", this.onSurfaceEnter);
+    this.host.addEventListener("pointerleave", this.onTriggerLeave);
     this.syncOverlay();
   }
   componentDidUpdate() {
@@ -80,11 +91,12 @@ var UITooltip = class {
     this.detachTriggerListeners();
     this.surface?.destroy();
     this.surface = null;
-    this.host.removeEventListener("keydown", this.onKeydown);
+    this.host.removeEventListener("pointerenter", this.onSurfaceEnter);
+    this.host.removeEventListener("pointerleave", this.onTriggerLeave);
     closeOverlay(this.overlayId);
   }
   syncTrigger() {
-    const next = this.for ? this.host.ownerDocument.getElementById(this.for) : this.host.previousElementSibling;
+    const next = this.for ? this.host.getRootNode().getElementById(this.for) : this.host.previousElementSibling;
     if (next === this.trigger)
       return;
     this.detachTriggerListeners();
@@ -103,6 +115,11 @@ var UITooltip = class {
     this.detachTriggerListeners();
     if (!this.trigger)
       return;
+    const ids = new Set((this.trigger.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean));
+    ids.add(this.host.id);
+    this.trigger.setAttribute("aria-describedby", [...ids].join(" "));
+    this.trigger.addEventListener("click", this.onTriggerClick);
+    this.trigger.addEventListener("keydown", this.onTriggerKeydown);
     this.trigger.addEventListener("pointerenter", this.onTriggerEnter);
     this.trigger.addEventListener("pointerleave", this.onTriggerLeave);
     this.trigger.addEventListener("focusin", this.onTriggerFocusIn);
@@ -111,6 +128,13 @@ var UITooltip = class {
   detachTriggerListeners() {
     if (!this.trigger)
       return;
+    const ids = (this.trigger.getAttribute("aria-describedby") || "").split(/\s+/).filter((id) => id && id !== this.host.id);
+    if (ids.length)
+      this.trigger.setAttribute("aria-describedby", ids.join(" "));
+    else
+      this.trigger.removeAttribute("aria-describedby");
+    this.trigger.removeEventListener("click", this.onTriggerClick);
+    this.trigger.removeEventListener("keydown", this.onTriggerKeydown);
     this.trigger.removeEventListener("pointerenter", this.onTriggerEnter);
     this.trigger.removeEventListener("pointerleave", this.onTriggerLeave);
     this.trigger.removeEventListener("focusin", this.onTriggerFocusIn);
@@ -142,7 +166,21 @@ var UITooltip = class {
       trigger
     });
   }
-  onTriggerEnter = () => {
+  onSurfaceEnter = () => this.clearHideTimer();
+  onTriggerClick = (event) => {
+    if (!this.toggleOnClick)
+      return;
+    this.clearTimers();
+    this.pinned = !this.pinned;
+    this.setInteractionOpen(this.pinned, event.detail === 0 ? "keyboard" : "pointer");
+  };
+  onTriggerKeydown = (event) => {
+    if (event.key === "Escape")
+      this.clearTimers();
+  };
+  onTriggerEnter = (event) => {
+    if (event.pointerType === "touch")
+      return;
     this.clearHideTimer();
     if (this.internalOpen || this.showTimer !== null)
       return;
@@ -153,7 +191,7 @@ var UITooltip = class {
   };
   onTriggerLeave = () => {
     this.clearShowTimer();
-    if (!this.internalOpen || this.hideTimer !== null)
+    if (this.focused || this.pinned || !this.internalOpen || this.hideTimer !== null)
       return;
     this.hideTimer = setTimeout(() => {
       this.hideTimer = null;
@@ -161,6 +199,7 @@ var UITooltip = class {
     }, Math.max(0, this.hideDelay));
   };
   onTriggerFocusIn = () => {
+    this.focused = true;
     this.clearTimers();
     this.setInteractionOpen(true, "keyboard");
   };
@@ -168,28 +207,25 @@ var UITooltip = class {
     const related = e.relatedTarget;
     if (related && this.host.contains(related))
       return;
+    this.focused = false;
+    this.pinned = false;
     this.clearTimers();
     this.setInteractionOpen(false, "keyboard");
   };
   handleRequestClose(reason, trigger) {
-    if (reason === "escape") {
+    if (reason === "escape" || reason === "light-dismiss" && this.toggleOnClick) {
+      this.pinned = false;
       this.clearTimers();
       this.internalOpen = false;
       dispatchDetail(this.host, "close", {
         open: false,
-        reason: "escape",
+        reason,
         trigger
       });
-      this.trigger?.focus();
     }
   }
-  onKeydown = (e) => {
-    if (e.key === "Escape") {
-      requestTopOverlayClose("escape", "keyboard");
-    }
-  };
   render() {
-    return h(Host, { key: "4c3890a7371508ede06a5b370d1cec32db25280f", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa" }));
+    return h(Host, { key: "b0199c23316a707ae3e1e7c361f2838872f62221", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "d0c7822f2f47848a509bf8e310806edbdb320f02" }));
   }
   static get watchers() {
     return {

package/dist/{ui-top-bar.entry-3NCHFC4Y.js → ui-top-bar.entry-PIAWXJNV.js}

@@ -3,7 +3,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-GDMQKT5F.js";
 
 // dist/esm/ui-top-bar.entry.js
 var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-left)   );padding-inline-end:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-right)   );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
@@ -40,7 +40,7 @@ var UITopBar = class {
     this.hasActions = slotHasContent(this.actionsSlot);
   };
   render() {
-    return h(Host, { key: "15c840c082724df0ec39ab6ad4e55f99192df5be" }, h("header", { key: "790afaeecdb3e598b8365391f57ee1e2d8ca69a2", class: "top-bar", part: "base" }, h("div", { key: "fab822f5875c7e3b8e267be42c075597d79374fa", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "0723013c4b674964e4029442b715daa9eb0036db", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "77fc006257b7fa6a191191d9969ea66445b8bc3e", class: "top-bar__title" }, h("slot", { key: "e8a07f1f767c1c0fa1244abcf3bb0e697e36a4fe" })), h("div", { key: "bde5cdf797ae898f68eddeab362b8395f89bdf28", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "8b059d6123e94f3b7e18c15c88828ee9c6436136", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "c262446cf29873903530ea3f840de4de9db3de82", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "f417dbc8cc0115a455a72ce0feb5f32b323ce68f", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
+    return h(Host, { key: "730e45232ab2b86c2ac99dba773f4ca15d7c3c51" }, h("header", { key: "f94f9b4f3f5930fda950895d2eec01d3ec175479", class: "top-bar", part: "base" }, h("div", { key: "038f6a404b0f159b4b826ada73d3c920266354c8", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "2d415368310c319eca3f3eb9b2c885ef79bb4107", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "dfd78b02066a91e9c610e4655a70da704ad65327", class: "top-bar__title" }, h("slot", { key: "499e24a864a31f6e400fd02aab4a3f960c87e572" })), h("div", { key: "5aa94952996487651dffecd2e351548631fa29b6", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "eddad95f8acf787ee0cead2a46e7961a06375d5c", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "dc69d492aa221a8beb888350bf101f8beeceede9", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "7cde7e062f487da8209738a32415636c7a6b72f0", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
   }
 };
 UITopBar.style = uiTopBarCss();

package/dist/{ui-tree-item.entry-45RR3CMP.js → ui-tree-item.entry-BSEWNL2O.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-GDMQKT5F.js";
 
 // dist/esm/ui-tree-item.entry.js
 var Bold = [
@@ -299,6 +299,10 @@ var UITreeItem = class {
   label = "";
   /** One-based visual and semantic nesting level. */
   depth = 1;
+  /** Application hierarchy depth used for drop constraints. Defaults to visual depth. */
+  dropDepth;
+  /** Deepest descendant distance, used with the tree's max-depth drop constraint. */
+  subtreeDepth;
   /** Whether this item accepts children and exposes disclosure behavior. */
   container = false;
   /** Whether this item participates in pointer drag and drop. */
@@ -360,10 +364,10 @@ var UITreeItem = class {
     const level = Math.max(1, Math.floor(this.depth));
     const disclosureLabel = `${this.internalExpanded ? "Collapse" : "Expand"} ${this.label || "item"}`;
     const dragLabel = `Drag ${this.label || "item"} to reorder`;
-    return h(Host, { key: "ea8ed538aa3883c87257a25614a066965364693f", role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : void 0, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? "true" : void 0, "data-container": this.container ? "" : void 0, "data-selected": this.selected ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-drag-type": this.dragType || "item", "data-drop-scope": this.dropScope || void 0, "data-accepts": this.accepts || void 0, tabIndex: this.disabled ? -1 : 0, style: {
+    return h(Host, { key: "606f5fdac8a95489d0c62cd7d4918c6d5d0c759e", role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : void 0, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? "true" : void 0, "data-container": this.container ? "" : void 0, "data-selected": this.selected ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-drag-type": this.dragType || "item", "data-drop-scope": this.dropScope || void 0, "data-accepts": this.accepts || void 0, tabIndex: this.disabled ? -1 : 0, style: {
       "--ui-tree-item-depth": String(level - 1),
       "margin-inline-start": level > 1 ? "var(--ui-tree-indent, 16px)" : "0px"
-    } }, h("div", { key: "740b93aa47e65d8a1cb899d4b9c966d9ad1d456f", class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup("grip-vertical") })) : null, this.container ? h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { "disclosure-icon": true, "disclosure-icon--expanded": this.internalExpanded }, innerHTML: loomaIconMarkup("chevron-down") })) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: "37e1b7f1cdddf623734becef465ffde83d8b86f2", class: "leading", part: "leading" }, h("slot", { key: "0ab3a60c98628f009918d0d720772154912d2709", name: "leading" })), h("span", { key: "defdd343f25a0f4354110e981f3889e1d09c27ee", class: "label", part: "label" }, h("slot", { key: "bde46ccacc1a620348062fc300503c4f1736316b" })), h("span", { key: "caff9ada38c41be90aeb6e331f4c54a51f31d26c", class: "actions", part: "actions" }, h("slot", { key: "e11704d6871445c91eaa29c99302d8b751be69d3", name: "actions" })), h("span", { key: "9efc0e95588f1dd4527dade2b7ff9f2774462c2e", class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, h("slot", { name: "children" })) : null, h("span", { key: "8893ec2c4082bb8af942ef563055a2910d0d4201", class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" }));
+    } }, h("div", { key: "2b4bb03d4b24ef668f22b08e803f7f43c2d63ae5", class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup("grip-vertical") })) : null, this.container ? h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { "disclosure-icon": true, "disclosure-icon--expanded": this.internalExpanded }, innerHTML: loomaIconMarkup("chevron-down") })) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: "e7b935158e35cdc6518bdd73d54c42dcfa211aee", class: "leading", part: "leading" }, h("slot", { key: "8448462349fd23b8be0fb673fc6e101bf94beaa7", name: "leading" })), h("span", { key: "e0b6338e1ec9ec043446e42c5f03724adf7e1862", class: "label", part: "label" }, h("slot", { key: "ed44e6f2ce3466c28d2b87fc7511399ecc339255" })), h("span", { key: "2aea78227904fe23cfc4b8e14852a4601e3cc34b", class: "actions", part: "actions" }, h("slot", { key: "7c6549008c2a54c3ea6fcdf9e0fdbe445d379922", name: "actions" })), h("span", { key: "05166ba04765bc518d6b95ca7ae5a67c4394d1bf", class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, h("slot", { name: "children" })) : null, h("span", { key: "7381d6e9e2a8f94695f29e73194b1603d79cefb9", class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" }));
   }
   static get watchers() {
     return {

package/dist/{ui-tree.entry-SZW4Q5PY.js → ui-tree.entry-XYI3ZFAZ.js}

@@ -6,7 +6,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-GDMQKT5F.js";
 
 // dist/esm/ui-tree.entry.js
 function classifyDropPosition(rect, clientY, acceptsChildren) {
@@ -62,9 +62,14 @@ var UITree = class {
   }
   label = "Tree";
   hoverExpandDelay = 700;
+  /** Maximum resulting item depth accepted by pointer reordering. Zero is unlimited. */
+  maxDepth = 0;
   source = null;
   target = null;
   position = null;
+  rejectedTarget = null;
+  rejectedPosition = null;
+  rejection = null;
   hoverIntent = null;
   componentDidLoad() {
     this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
@@ -128,15 +133,37 @@ var UITree = class {
       accepts: (item.getAttribute("data-accepts") || item.getAttribute("accepts") || "").split(",").map((value) => value.trim()).filter(Boolean)
     };
   }
-  permitsDrop(source, target, position) {
+  constraintDepth(item) {
+    if (item.dropDepth !== void 0)
+      return item.dropDepth;
+    const dropDepth = item.getAttribute("drop-depth");
+    if (dropDepth !== null)
+      return Number(dropDepth);
+    if (item.depth !== void 0)
+      return item.depth;
+    return Number(item.getAttribute("depth")) || 1;
+  }
+  dropRejection(source, target, position) {
     if (source.contains(target))
-      return false;
+      return { reason: "descendant" };
     const sourceMeta = this.itemMetadata(source);
     const targetMeta = this.itemMetadata(target);
     if (position === "inside") {
-      return this.acceptsChildren(target) && (targetMeta.accepts.length === 0 || targetMeta.accepts.includes(sourceMeta.type));
+      if (!this.acceptsChildren(target) || targetMeta.accepts.length > 0 && !targetMeta.accepts.includes(sourceMeta.type)) {
+        return { reason: "incompatible" };
+      }
+    } else if (sourceMeta.type !== targetMeta.type) {
+      return { reason: "incompatible" };
     }
-    return sourceMeta.type === targetMeta.type;
+    const maxDepth = Math.max(0, Math.floor(this.maxDepth));
+    if (maxDepth > 0 && source.subtreeDepth !== void 0) {
+      const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
+      const subtreeDepth = Math.max(0, Math.floor(source.subtreeDepth));
+      const resultingDepth = targetDepth + (position === "inside" ? 1 : 0) + subtreeDepth;
+      if (resultingDepth > maxDepth)
+        return { reason: "max-depth", maxDepth, resultingDepth };
+    }
+    return null;
   }
   clearTarget() {
     this.target?.removeAttribute("data-drop-position");
@@ -144,10 +171,16 @@ var UITree = class {
     this.position = null;
     this.hoverIntent?.cancel();
   }
+  clearRejection() {
+    this.rejectedTarget = null;
+    this.rejectedPosition = null;
+    this.rejection = null;
+  }
   finishDrag() {
     this.source?.removeAttribute("data-dragging");
     this.source = null;
     this.clearTarget();
+    this.clearRejection();
   }
   expandTarget = (itemId) => {
     const item = Array.from(this.host.querySelectorAll("ui-tree-item")).find((candidate) => this.itemId(candidate) === itemId);
@@ -183,18 +216,28 @@ var UITree = class {
       return false;
     if (!target || target === this.source) {
       this.clearTarget();
+      this.clearRejection();
       return false;
     }
     const row = this.rowFor(target);
     if (!row)
       return false;
     const position = classifyDropPosition(row.getBoundingClientRect(), clientY, this.acceptsChildren(target));
-    if (!this.permitsDrop(this.source, target, position)) {
+    const rejection = this.dropRejection(this.source, target, position);
+    if (rejection) {
       if (dataTransfer)
         dataTransfer.dropEffect = "none";
       this.clearTarget();
+      if (rejection.reason === "max-depth") {
+        this.rejectedTarget = target;
+        this.rejectedPosition = position;
+        this.rejection = rejection;
+      } else {
+        this.clearRejection();
+      }
       return false;
     }
+    this.clearRejection();
     if (dataTransfer)
       dataTransfer.dropEffect = "move";
     if (this.target !== target || this.position !== position) {
@@ -231,12 +274,15 @@ var UITree = class {
     if (this.itemAtPoint(event.clientX, event.clientY))
       return;
     this.clearTarget();
+    this.clearRejection();
   };
   dispatchReorder(source, target, position) {
     const sourceId = this.itemId(source);
     const targetId = this.itemId(target);
     if (!sourceId || !targetId)
       return;
+    if (position === "inside")
+      this.expandTarget(targetId);
     const sourceMeta = this.itemMetadata(source);
     const targetMeta = this.itemMetadata(target);
     dispatchDetail(this.host, "reorder", {
@@ -250,6 +296,21 @@ var UITree = class {
       trigger: "pointer"
     });
   }
+  dispatchReorderRejected(source, target, position, rejection) {
+    const sourceId = this.itemId(source);
+    const targetId = this.itemId(target);
+    if (!sourceId || !targetId)
+      return;
+    dispatchDetail(this.host, "reorder-rejected", {
+      sourceId,
+      targetId,
+      position,
+      reason: "max-depth",
+      maxDepth: rejection.maxDepth,
+      resultingDepth: rejection.resultingDepth,
+      trigger: "pointer"
+    });
+  }
   onDrop = (event) => {
     if (!this.source || !this.target || !this.position)
       return;
@@ -259,13 +320,21 @@ var UITree = class {
   };
   onDragEnd = (event) => {
     if (this.source) {
+      if (this.rejectedTarget && this.rejectedPosition && this.rejection) {
+        this.dispatchReorderRejected(this.source, this.rejectedTarget, this.rejectedPosition, this.rejection);
+        this.finishDrag();
+        return;
+      }
       const target = this.itemAtPoint(event.clientX, event.clientY);
       if (target && target !== this.source) {
         const row = this.rowFor(target);
         if (row) {
           const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
-          if (this.permitsDrop(this.source, target, position)) {
+          const rejection = this.dropRejection(this.source, target, position);
+          if (!rejection) {
             this.dispatchReorder(this.source, target, position);
+          } else if (rejection.reason === "max-depth") {
+            this.dispatchReorderRejected(this.source, target, position, rejection);
           }
         }
       }
@@ -290,7 +359,7 @@ var UITree = class {
     next.focus();
   };
   render() {
-    return h(Host, { key: "7da064127eb199f5e2cfc59489a07204c9dac2f2", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "31a98a6774ab35e565dab65f1dd8202494432b32" }));
+    return h(Host, { key: "474c2154d2abe3c76eee9c36bf552390089df6e8", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "93aedd02f984dd33b5efc811fef417d1199917bd" }));
   }
 };
 UITree.style = uiTreeCss();

package/dist/valibot.d.ts

@@ -0,0 +1,52 @@
+import { GenericSchema, GenericSchemaAsync, InferOutput } from 'valibot';
+
+/** Structural Standard Schema v1 boundary; no schema-library runtime dependency. */
+interface FieldSchema<Output = unknown> {
+    readonly '~standard': {
+        readonly version: 1;
+        readonly vendor: string;
+        readonly validate: (value: unknown) => FieldSchemaResult<Output> | Promise<FieldSchemaResult<Output>>;
+        readonly types?: {
+            readonly input: unknown;
+            readonly output: Output;
+        };
+    };
+}
+interface FieldIssue {
+    readonly message: string;
+    readonly path?: ReadonlyArray<PropertyKey | {
+        readonly key: PropertyKey;
+    }>;
+    readonly severity?: 'error' | 'warning';
+}
+type FieldSchemaResult<T = unknown> = {
+    readonly value: T;
+    readonly issues?: undefined;
+} | {
+    readonly issues: readonly FieldIssue[];
+};
+interface FieldRequest<Context = unknown> {
+    raw: string;
+    value: string | null;
+    context: Context;
+    signal: AbortSignal;
+}
+interface FieldResult<Output = unknown> {
+    output?: Output;
+    issues: readonly FieldIssue[];
+}
+interface FieldValidation {
+    schema?: FieldSchema;
+    parse?: (raw: string, request: FieldRequest) => unknown | Promise<unknown>;
+    normalize?: (value: unknown, request: FieldRequest) => unknown | Promise<unknown>;
+    validator?: (value: unknown, request: FieldRequest) => Partial<FieldResult> | Promise<Partial<FieldResult>>;
+    issues?: readonly FieldIssue[];
+}
+
+/** Valibot's Standard Schema implementation preserves async transforms and issue paths.
+ * Type-only Valibot imports keep the adapter free of a schema-library runtime. */
+declare function valibotField<T extends GenericSchema | GenericSchemaAsync>(schema: T, options?: Omit<FieldValidation, 'schema'>): FieldValidation & {
+    schema: FieldSchema<InferOutput<T>>;
+};
+
+export { valibotField };

package/dist/valibot.js

@@ -0,0 +1,7 @@
+// src/field/valibot.ts
+function valibotField(schema, options = {}) {
+  return { ...options, schema };
+}
+export {
+  valibotField
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",
@@ -67,7 +67,11 @@
     "./theme-high-contrast.css": "./theme-high-contrast.css",
     "./layout.css": "./layout.css",
     "./styles.css": "./styles.css",
-    "./editor.css": "./editor.css"
+    "./editor.css": "./editor.css",
+    "./valibot": {
+      "types": "./dist/valibot.d.ts",
+      "import": "./dist/valibot.js"
+    }
   },
   "files": [
     "dist/",
@@ -101,7 +105,8 @@
     "@tiptap/core": ">=2 <3",
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "valibot": "^1.1.0"
   },
   "peerDependenciesMeta": {
     "@tiptap/core": {
@@ -115,6 +120,9 @@
     },
     "vue": {
       "optional": true
+    },
+    "valibot": {
+      "optional": true
     }
   },
   "engines": {

package/styles.css

@@ -194,14 +194,19 @@
   ui-button {
     display: inline-flex;
     vertical-align: middle;
-    color: var(--ui-text-primary);
+    color: var(--ui-action-secondary-text, var(--ui-text-primary));
+  }
+
+  ui-button[variant="solid"] {
+    color: var(--ui-action-primary-text, var(--ui-text-on-accent));
   }
 
   ui-button > button {
     appearance: none;
-    border: 1px solid var(--ui-border-default);
+    min-block-size: var(--ui-button-min-block-size, 2.5rem);
+    border: 1px solid var(--ui-control-border, var(--ui-border-default));
     border-radius: var(--ui-button-radius, var(--ui-radius-2));
-    background: var(--ui-surface-default);
+    background: var(--ui-action-secondary-surface, var(--ui-surface-default));
     color: inherit;
     font: inherit;
     font-weight: var(--ui-font-medium, 500);
@@ -223,13 +228,14 @@
   }
 
   ui-button[data-size="lg"] > button {
+    min-block-size: var(--ui-control-min-block-size, 2.75rem);
     padding: var(--ui-space-3) var(--ui-space-4);
     font-size: 1rem;
   }
 
   ui-button > button:hover:enabled {
-    background: var(--ui-surface-muted);
-    border-color: var(--ui-border-strong);
+    background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
+    border-color: var(--ui-control-border-hover, var(--ui-border-strong));
   }
 
   ui-button > button:active:enabled {
@@ -237,22 +243,22 @@
   }
 
   ui-button[variant="solid"] > button {
-    border-color: var(--ui-accent-solid);
-    background: var(--ui-accent-solid);
-    color: var(--ui-text-on-accent);
+    border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
+    background: var(--ui-action-primary-surface, var(--ui-accent-solid));
+    color: var(--ui-action-primary-text, var(--ui-text-on-accent));
     box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
   }
 
   ui-button[variant="solid"] > button:hover:enabled {
-    background: var(--ui-accent-hover);
-    border-color: var(--ui-accent-hover);
+    background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+    border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
     box-shadow: var(--ui-shadow-sm);
     transform: translateY(-1px);
   }
 
   ui-button[variant="solid"] > button:active:enabled {
-    background: var(--ui-accent-active);
-    border-color: var(--ui-accent-active);
+    background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+    border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
     box-shadow: none;
     transform: translateY(0);
   }
@@ -299,23 +305,29 @@
     outline-offset: 2px;
   }
 
-  ui-button > button:disabled,
-  ui-button[data-disabled] {
+  ui-button[data-disabled="true"],
+  ui-button[disabled] {
     opacity: 0.6;
     cursor: not-allowed;
   }
 
+  ui-button > button:disabled {
+    cursor: not-allowed;
+  }
+
   ui-input {
     display: inline-flex;
+    min-inline-size: 0;
     color: var(--ui-text-primary);
   }
 
   ui-input > input {
     width: 100%;
     appearance: none;
-    border: 1px solid var(--ui-border-default);
+    min-block-size: var(--ui-control-min-block-size, 2.75rem);
+    border: 1px solid var(--ui-control-border, var(--ui-border-default));
     border-radius: var(--ui-radius-2);
-    background: var(--ui-surface-default);
+    background: var(--ui-control-surface, var(--ui-surface-default));
     color: inherit;
     font: inherit;
     line-height: var(--ui-line-height-md);
@@ -328,12 +340,12 @@
   }
 
   ui-input > input:hover:not(:focus):not(:disabled) {
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-control-border-hover, var(--ui-border-strong));
   }
 
   ui-input > input:focus {
-    border-color: var(--ui-focus-ring);
-    box-shadow: 0 0 0 3px var(--ui-accent-soft);
+    border-color: var(--ui-control-focus, var(--ui-focus-ring));
+    box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
   }
 
   ui-input[invalid] > input,
@@ -344,7 +356,7 @@
   }
 
   ui-input > input:disabled {
-    background: var(--ui-surface-muted);
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     color: var(--ui-text-muted);
     cursor: not-allowed;
   }
@@ -352,6 +364,8 @@
   ui-form-field {
     display: grid;
     gap: var(--ui-space-2);
+    min-inline-size: 0;
+    align-content: start;
     color: var(--ui-text-primary);
   }
 
@@ -361,8 +375,10 @@
   }
 
   ui-form-field [data-slot="help"] {
+    min-block-size: var(--ui-form-field-help-min-block-size, 0);
     color: var(--ui-text-muted);
     font-size: 0.875rem;
+    line-height: var(--ui-line-height-md);
   }
 
   ui-form-field [data-slot="error"],