@threadlabs/looma 0.1.22 → 0.1.24

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

@@ -6,7 +6,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-tree.entry.js
 function classifyDropPosition(rect, clientY, acceptsChildren) {
@@ -52,7 +52,7 @@ function createHoverIntent(delay, onIntent) {
     destroy: cancel
   };
 }
-var uiTreeCss = () => `:host{--ui-tree-indent:16px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter, 22px)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
+var uiTreeCss = () => `:host{--ui-tree-indent:16px;--ui-tree-gutter:0px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
 var UITree = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -62,10 +62,17 @@ 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;
+  structureObserver = null;
+  tabStop = null;
   componentDidLoad() {
     this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
     this.host.addEventListener("dragstart", this.onDragStart);
@@ -76,6 +83,11 @@ var UITree = class {
     this.host.addEventListener("drop", this.onDrop);
     this.host.addEventListener("dragend", this.onDragEnd);
     this.host.addEventListener("keydown", this.onKeyDown);
+    this.host.addEventListener("focusin", this.onFocusIn);
+    this.host.addEventListener("ui-tree-expansion-change", this.onExpansionChange);
+    this.syncStructuralLevels();
+    this.structureObserver = new MutationObserver(this.syncStructuralLevels);
+    this.structureObserver.observe(this.host, { childList: true, subtree: true });
   }
   disconnectedCallback() {
     this.hoverIntent?.destroy();
@@ -87,10 +99,40 @@ var UITree = class {
     this.host.removeEventListener("drop", this.onDrop);
     this.host.removeEventListener("dragend", this.onDragEnd);
     this.host.removeEventListener("keydown", this.onKeyDown);
+    this.host.removeEventListener("focusin", this.onFocusIn);
+    this.host.removeEventListener("ui-tree-expansion-change", this.onExpansionChange);
+    this.structureObserver?.disconnect();
+    this.structureObserver = null;
+  }
+  syncStructuralLevels = () => {
+    for (const item of Array.from(this.host.querySelectorAll("ui-tree-item"))) {
+      item.dispatchEvent(new CustomEvent("ui-tree-structure-sync"));
+    }
+    this.syncTabStop();
+  };
+  syncTabStop(preferred) {
+    const items = this.visibleItems();
+    const next = preferred && items.includes(preferred) ? preferred : this.tabStop && items.includes(this.tabStop) ? this.tabStop : items[0] ?? null;
+    this.tabStop = next;
+    for (const item of items) {
+      item.dispatchEvent(new CustomEvent("ui-tree-roving-tab-stop", {
+        detail: { active: item === next }
+      }));
+    }
   }
   itemFromEvent(event) {
     return event.composedPath().find((node) => node instanceof HTMLElement && node.localName === "ui-tree-item") ?? null;
   }
+  eventTargetsInteractiveContent(event) {
+    for (const node of event.composedPath()) {
+      if (node instanceof HTMLElement && node.localName === "ui-tree-item")
+        break;
+      if (node instanceof HTMLElement && node.matches('a, button, input, select, textarea, [role="button"], [role="link"]')) {
+        return true;
+      }
+    }
+    return false;
+  }
   itemId(item) {
     return item.itemId || item.getAttribute("item-id") || "";
   }
@@ -128,15 +170,51 @@ 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);
+    return Number(item.getAttribute("aria-level")) || 1;
+  }
+  subtreeDepth(item) {
+    if (item.subtreeDepth !== void 0)
+      return Math.max(0, Math.floor(item.subtreeDepth));
+    const override = item.getAttribute("subtree-depth");
+    if (override !== null)
+      return Math.max(0, Math.floor(Number(override)));
+    return Array.from(item.querySelectorAll("ui-tree-item")).reduce((deepest, descendant) => {
+      let nesting = 0;
+      let ancestor = descendant.parentElement?.closest("ui-tree-item") ?? null;
+      while (ancestor && ancestor !== item) {
+        nesting += 1;
+        ancestor = ancestor.parentElement?.closest("ui-tree-item") ?? null;
+      }
+      return ancestor === item ? Math.max(deepest, nesting + 1) : deepest;
+    }, 0);
+  }
+  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" };
+    }
+    const maxDepth = Math.max(0, Math.floor(this.maxDepth));
+    if (maxDepth > 0) {
+      const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
+      const subtreeDepth = this.subtreeDepth(source);
+      const resultingDepth = targetDepth + (position === "inside" ? 1 : 0) + subtreeDepth;
+      if (resultingDepth > maxDepth)
+        return { reason: "max-depth", maxDepth, resultingDepth };
     }
-    return sourceMeta.type === targetMeta.type;
+    return null;
   }
   clearTarget() {
     this.target?.removeAttribute("data-drop-position");
@@ -144,10 +222,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 +267,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 +325,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 +347,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 +371,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);
           }
         }
       }
@@ -275,7 +395,35 @@ var UITree = class {
   visibleItems() {
     return Array.from(this.host.querySelectorAll("ui-tree-item")).filter((item) => item.getClientRects().length > 0 && !item.hasAttribute("disabled"));
   }
+  parentItem(item) {
+    const parent = item.parentElement?.closest("ui-tree-item") ?? null;
+    return parent && this.host.contains(parent) ? parent : null;
+  }
+  firstVisibleChild(item, items) {
+    return items.find((candidate) => this.parentItem(candidate) === item) ?? null;
+  }
+  focusItem(item) {
+    this.syncTabStop(item);
+    item.focus();
+  }
+  requestExpansion(item, expanded) {
+    item.dispatchEvent(new CustomEvent("ui-tree-request-expanded", {
+      detail: { expanded, trigger: "keyboard" }
+    }));
+  }
+  onFocusIn = (event) => {
+    if (this.eventTargetsInteractiveContent(event))
+      return;
+    const item = this.itemFromEvent(event);
+    if (item)
+      this.syncTabStop(item);
+  };
+  onExpansionChange = () => {
+    requestAnimationFrame(() => this.syncTabStop());
+  };
   onKeyDown = (event) => {
+    if (this.eventTargetsInteractiveContent(event))
+      return;
     const current = this.itemFromEvent(event);
     if (!current)
       return;
@@ -283,14 +431,37 @@ var UITree = class {
     const index = items.indexOf(current);
     if (index < 0)
       return;
-    const next = event.key === "ArrowDown" ? items[index + 1] : event.key === "ArrowUp" ? items[index - 1] : null;
-    if (!next)
+    const next = event.key === "ArrowDown" ? items[index + 1] : event.key === "ArrowUp" ? items[index - 1] : event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : null;
+    if (next) {
+      event.preventDefault();
+      this.focusItem(next);
       return;
-    event.preventDefault();
-    next.focus();
+    }
+    if (event.key === "ArrowLeft") {
+      if (current.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        this.requestExpansion(current, false);
+      } else if (this.parentItem(current)) {
+        event.preventDefault();
+        this.focusItem(this.parentItem(current));
+      }
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      if (current.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        this.requestExpansion(current, true);
+      } else if (current.getAttribute("aria-expanded") === "true") {
+        const child = this.firstVisibleChild(current, items);
+        if (child) {
+          event.preventDefault();
+          this.focusItem(child);
+        }
+      }
+    }
   };
   render() {
-    return h(Host, { key: "7da064127eb199f5e2cfc59489a07204c9dac2f2", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "31a98a6774ab35e565dab65f1dd8202494432b32" }));
+    return h(Host, { key: "549c09abc67dc60b16bf2d6b7d6346f214e9d6ae", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "fea59bde97611bf384e32ce4fb2b3eec9aca784f" }));
   }
 };
 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
+};