@threadlabs/looma 0.1.13 → 0.1.15

package/dist/esm/ui-tree.entry.js

@@ -0,0 +1,255 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { d as dispatchDetail } from './events-JwSoedEO.js';
+
+/**
+ * Classify the pointer against stable edge bands. Containers reserve their
+ * middle half for containment; leaf rows split cleanly at their midpoint.
+ */
+function classifyDropPosition(rect, clientY, acceptsChildren) {
+    const progress = rect.height > 0
+        ? Math.min(1, Math.max(0, (clientY - rect.top) / rect.height))
+        : 0.5;
+    if (!acceptsChildren)
+        return progress < 0.5 ? 'before' : 'after';
+    if (progress < 0.25)
+        return 'before';
+    if (progress > 0.75)
+        return 'after';
+    return 'inside';
+}
+/** Use the rendered row—not the tiny handle—as the browser drag preview. */
+function setElementDragImage(dataTransfer, element) {
+    if (!dataTransfer || typeof dataTransfer.setDragImage !== 'function')
+        return;
+    const { height } = element.getBoundingClientRect();
+    dataTransfer.setDragImage(element, 16, Math.max(0, height / 2));
+}
+/** A keyed, replaceable hover timer suitable for expansion and disclosure intent. */
+function createHoverIntent(delay, onIntent) {
+    let timer;
+    let pendingKey;
+    function cancel() {
+        if (timer)
+            clearTimeout(timer);
+        timer = undefined;
+        pendingKey = undefined;
+    }
+    return {
+        schedule(key) {
+            if (pendingKey === key && timer)
+                return;
+            cancel();
+            pendingKey = key;
+            timer = setTimeout(() => {
+                timer = undefined;
+                const resolvedKey = pendingKey;
+                pendingKey = undefined;
+                if (resolvedKey)
+                    onIntent(resolvedKey);
+            }, Math.max(0, delay));
+        },
+        cancel,
+        destroy: cancel,
+    };
+}
+
+const 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}`;
+
+const UITree = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    label = 'Tree';
+    hoverExpandDelay = 700;
+    source = null;
+    target = null;
+    position = null;
+    hoverIntent = null;
+    componentDidLoad() {
+        this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
+        this.host.addEventListener('dragstart', this.onDragStart);
+        this.host.addEventListener('dragover', this.onDragOver);
+        this.host.addEventListener('dragleave', this.onDragLeave);
+        this.host.addEventListener('drop', this.onDrop);
+        this.host.addEventListener('dragend', this.onDragEnd);
+        this.host.addEventListener('keydown', this.onKeyDown);
+    }
+    disconnectedCallback() {
+        this.hoverIntent?.destroy();
+        this.host.removeEventListener('dragstart', this.onDragStart);
+        this.host.removeEventListener('dragover', this.onDragOver);
+        this.host.removeEventListener('dragleave', this.onDragLeave);
+        this.host.removeEventListener('drop', this.onDrop);
+        this.host.removeEventListener('dragend', this.onDragEnd);
+        this.host.removeEventListener('keydown', this.onKeyDown);
+    }
+    itemFromEvent(event) {
+        return event.composedPath().find(node => (node instanceof HTMLElement && node.localName === 'ui-tree-item')) ?? null;
+    }
+    itemId(item) {
+        return item.itemId || item.getAttribute('item-id') || '';
+    }
+    rowFor(item) {
+        return item.shadowRoot?.querySelector('[part="row"]') ?? null;
+    }
+    acceptsChildren(item) {
+        return Boolean(item.container ?? item.hasAttribute('container'))
+            && !Boolean(item.disabled ?? item.hasAttribute('disabled'));
+    }
+    itemMetadata(item) {
+        return {
+            type: item.getAttribute('data-drag-type') || item.getAttribute('drag-type') || 'item',
+            scope: item.getAttribute('data-drop-scope') || item.getAttribute('drop-scope') || '',
+            accepts: (item.getAttribute('data-accepts') || item.getAttribute('accepts') || '')
+                .split(',')
+                .map(value => value.trim())
+                .filter(Boolean),
+        };
+    }
+    permitsDrop(source, target, position) {
+        // A tree item can never move into (or beside) one of its own descendants.
+        // Reject the target before showing any insertion affordance so the preview
+        // stays truthful instead of promising a move the consumer must undo.
+        if (source.contains(target))
+            return false;
+        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));
+        }
+        return sourceMeta.type === targetMeta.type;
+    }
+    clearTarget() {
+        this.target?.removeAttribute('data-drop-position');
+        this.target = null;
+        this.position = null;
+        this.hoverIntent?.cancel();
+    }
+    finishDrag() {
+        this.source?.removeAttribute('data-dragging');
+        this.source = null;
+        this.clearTarget();
+    }
+    expandTarget = (itemId) => {
+        const item = Array.from(this.host.querySelectorAll('ui-tree-item'))
+            .find(candidate => this.itemId(candidate) === itemId);
+        if (!item || item.getAttribute('aria-expanded') !== 'false')
+            return;
+        item.dispatchEvent(new CustomEvent('ui-tree-auto-expand'));
+    };
+    onDragStart = (event) => {
+        const item = this.itemFromEvent(event);
+        if (!item || !Boolean(item.sortable ?? item.hasAttribute('sortable'))
+            || Boolean(item.disabled ?? item.hasAttribute('disabled')))
+            return;
+        const fromHandle = event.composedPath().some(node => (node instanceof HTMLElement && node.getAttribute('part') === 'drag-handle'));
+        if (!fromHandle) {
+            event.preventDefault();
+            return;
+        }
+        const sourceId = this.itemId(item);
+        const row = this.rowFor(item);
+        if (!sourceId || !row) {
+            event.preventDefault();
+            return;
+        }
+        this.source = item;
+        item.setAttribute('data-dragging', 'true');
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', sourceId);
+        }
+        setElementDragImage(event.dataTransfer, row);
+    };
+    onDragOver = (event) => {
+        if (!this.source)
+            return;
+        const target = this.itemFromEvent(event);
+        if (!target || target === this.source) {
+            this.clearTarget();
+            return;
+        }
+        const row = this.rowFor(target);
+        if (!row)
+            return;
+        const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
+        if (!this.permitsDrop(this.source, target, position)) {
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'none';
+            this.clearTarget();
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        if (this.target !== target || this.position !== position) {
+            this.clearTarget();
+            this.target = target;
+            this.position = position;
+            target.setAttribute('data-drop-position', position);
+        }
+        if (position === 'inside' && target.getAttribute('aria-expanded') === 'false') {
+            this.hoverIntent?.schedule(this.itemId(target));
+        }
+        else {
+            this.hoverIntent?.cancel();
+        }
+    };
+    onDragLeave = (event) => {
+        const related = event.relatedTarget;
+        if (related instanceof Node && this.host.contains(related))
+            return;
+        this.clearTarget();
+    };
+    onDrop = (event) => {
+        if (!this.source || !this.target || !this.position)
+            return;
+        event.preventDefault();
+        const sourceId = this.itemId(this.source);
+        const targetId = this.itemId(this.target);
+        if (sourceId && targetId) {
+            const sourceMeta = this.itemMetadata(this.source);
+            const targetMeta = this.itemMetadata(this.target);
+            dispatchDetail(this.host, 'reorder', {
+                sourceId,
+                targetId,
+                position: this.position,
+                sourceType: sourceMeta.type,
+                targetType: targetMeta.type,
+                sourceScope: sourceMeta.scope,
+                targetScope: targetMeta.scope,
+                trigger: 'pointer',
+            });
+        }
+        this.finishDrag();
+    };
+    onDragEnd = () => {
+        this.finishDrag();
+    };
+    visibleItems() {
+        return Array.from(this.host.querySelectorAll('ui-tree-item'))
+            .filter(item => item.getClientRects().length > 0 && !item.hasAttribute('disabled'));
+    }
+    onKeyDown = (event) => {
+        const current = this.itemFromEvent(event);
+        if (!current)
+            return;
+        const items = this.visibleItems();
+        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)
+            return;
+        event.preventDefault();
+        next.focus();
+    };
+    render() {
+        return (h(Host, { key: '5761d2840d2694340a4b937d46522f15f81973ac', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '08e5a7b489eed4f4eae9de6462104fd12defd336' })));
+    }
+};
+UITree.style = uiTreeCss();
+
+export { UITree as ui_tree };