@threadlabs/looma 0.2.4 → 0.2.6

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

@@ -1,500 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-var events = require('./events-TcQIzpNv.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;--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}`;
-
-const UITree = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get host() { return index.getElement(this); }
-    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);
-        this.host.addEventListener('drag', this.onDrag);
-        this.host.addEventListener('dragenter', this.onDragOver);
-        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);
-        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();
-        this.host.removeEventListener('dragstart', this.onDragStart);
-        this.host.removeEventListener('drag', this.onDrag);
-        this.host.removeEventListener('dragenter', this.onDragOver);
-        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);
-        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') || '';
-    }
-    rowFor(item) {
-        return item.shadowRoot?.querySelector('[part="row"]') ?? null;
-    }
-    itemAtPoint(clientX, clientY) {
-        let element = this.host.ownerDocument.elementFromPoint(clientX, clientY);
-        while (element) {
-            if (element.localName === 'ui-tree-item' && this.host.contains(element)) {
-                return element;
-            }
-            const root = element.getRootNode();
-            element = root instanceof ShadowRoot ? root.host : element.parentElement;
-        }
-        return null;
-    }
-    isWithinTree(node) {
-        let element = node instanceof HTMLElement ? node : null;
-        while (element) {
-            if (element === this.host || this.host.contains(element))
-                return true;
-            const root = element.getRootNode();
-            element = root instanceof ShadowRoot ? root.host : element.parentElement;
-        }
-        return false;
-    }
-    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),
-        };
-    }
-    constraintDepth(item) {
-        if (item.dropDepth !== undefined)
-            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 !== undefined)
-            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) {
-        // 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 { reason: 'descendant' };
-        const sourceMeta = this.itemMetadata(source);
-        const targetMeta = this.itemMetadata(target);
-        if (position === 'inside') {
-            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 null;
-    }
-    clearTarget() {
-        this.target?.removeAttribute('data-drop-position');
-        this.target = null;
-        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);
-        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);
-    };
-    updateTarget(target, clientY, dataTransfer) {
-        if (!this.source)
-            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));
-        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) {
-            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();
-        }
-        return true;
-    }
-    onDrag = (event) => {
-        if (!this.source || (event.clientX === 0 && event.clientY === 0))
-            return;
-        const target = this.itemAtPoint(event.clientX, event.clientY);
-        // Native dragenter does not fire when a nested source moves onto an
-        // ancestor row: the pointer was already inside that ancestor's host. The
-        // source drag event still carries the live pointer coordinates, so use it
-        // to keep ancestor/outdent feedback current.
-        if (target)
-            this.updateTarget(target, event.clientY, event.dataTransfer);
-    };
-    onDragOver = (event) => {
-        if (!this.source)
-            return;
-        const target = this.itemFromEvent(event);
-        if (this.updateTarget(target, event.clientY, event.dataTransfer)) {
-            event.preventDefault();
-        }
-    };
-    onDragLeave = (event) => {
-        if (this.isWithinTree(event.relatedTarget))
-            return;
-        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);
-        events.dispatchDetail(this.host, 'reorder', {
-            sourceId,
-            targetId,
-            position,
-            sourceType: sourceMeta.type,
-            targetType: targetMeta.type,
-            sourceScope: sourceMeta.scope,
-            targetScope: targetMeta.scope,
-            trigger: 'pointer',
-        });
-    }
-    dispatchReorderRejected(source, target, position, rejection) {
-        const sourceId = this.itemId(source);
-        const targetId = this.itemId(target);
-        if (!sourceId || !targetId)
-            return;
-        events.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;
-        event.preventDefault();
-        this.dispatchReorder(this.source, this.target, this.position);
-        this.finishDrag();
-    };
-    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));
-                    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);
-                    }
-                }
-            }
-        }
-        this.finishDrag();
-    };
-    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;
-        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]
-                : event.key === 'Home' ? items[0]
-                    : event.key === 'End' ? items.at(-1)
-                        : null;
-        if (next) {
-            event.preventDefault();
-            this.focusItem(next);
-            return;
-        }
-        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 (index.h(index.Host, { key: 'bae06665078a67c59db2d9e72c7dea6ddeeb9e56', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: '232cb02f1a50bc5e18a92c0d8677e917870ec75e' })));
-    }
-};
-UITree.style = uiTreeCss();
-
-exports.ui_tree = UITree;

package/dist/collection/collection-manifest.json

@@ -1,45 +0,0 @@
-{
-  "entries": [
-    "components/ui-callout/ui-callout.js",
-    "components/ui-affordance-scope/ui-affordance-scope.js",
-    "components/ui-avatar/ui-avatar.js",
-    "components/ui-avatar-group/ui-avatar-group.js",
-    "components/ui-badge/ui-badge.js",
-    "components/ui-button/ui-button.js",
-    "components/ui-checkbox/ui-checkbox.js",
-    "components/ui-chip/ui-chip.js",
-    "components/ui-combobox/ui-combobox.js",
-    "components/ui-context-menu/ui-context-menu.js",
-    "components/ui-dialog/ui-dialog.js",
-    "components/ui-disclosure/ui-disclosure.js",
-    "components/ui-editable/ui-editable.js",
-    "components/ui-floating-action-button/ui-floating-action-button.js",
-    "components/ui-form-field/ui-form-field.js",
-    "components/ui-icon-button/ui-icon-button.js",
-    "components/ui-input/ui-input.js",
-    "components/ui-menu/ui-menu.js",
-    "components/ui-menu-item/ui-menu-item.js",
-    "components/ui-popover/ui-popover.js",
-    "components/ui-radio/ui-radio.js",
-    "components/ui-radio-group/ui-radio-group.js",
-    "components/ui-search-result-row/ui-search-result-row.js",
-    "components/ui-search-shell/ui-search-shell.js",
-    "components/ui-select/ui-select.js",
-    "components/ui-switch/ui-switch.js",
-    "components/ui-tabs/ui-tabs.js",
-    "components/ui-textarea/ui-textarea.js",
-    "components/ui-toast-region/ui-toast-region.js",
-    "components/ui-tooltip/ui-tooltip.js",
-    "components/ui-top-bar/ui-top-bar.js",
-    "components/ui-tree/ui-tree.js",
-    "components/ui-tree-item/ui-tree-item.js"
-  ],
-  "mixins": [],
-  "compiler": {
-    "name": "@stencil/core",
-    "version": "4.43.2",
-    "typescriptVersion": "5.8.3"
-  },
-  "collections": [],
-  "bundles": []
-}

package/dist/collection/components/ui-affordance-scope/ui-affordance-scope.css

@@ -1,8 +0,0 @@
-:host {
-  display: contents;
-  --ui-affordance-scope-engaged: 0;
-}
-
-:host([data-ui-interaction='engaged']) {
-  --ui-affordance-scope-engaged: 1;
-}

package/dist/collection/components/ui-affordance-scope/ui-affordance-scope.js

@@ -1,70 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { createProximityCoordinator, DEFAULT_AFFORDANCE_NEAR_RADIUS, } from "../../overlay/positioning";
-export class UIAffordanceScope {
-    host;
-    /** Distance outside each registered affordance that reveals its near state. */
-    nearRadius = DEFAULT_AFFORDANCE_NEAR_RADIUS;
-    coordinator = null;
-    componentDidLoad() {
-        this.connectCoordinator();
-    }
-    disconnectedCallback() {
-        this.coordinator?.destroy();
-        this.coordinator = null;
-    }
-    connectCoordinator() {
-        this.coordinator?.destroy();
-        this.coordinator = createProximityCoordinator(this.host, {
-            nearRadius: this.nearRadius,
-        });
-    }
-    onSlotChange = () => {
-        this.coordinator?.refresh();
-    };
-    render() {
-        return (h(Host, { key: 'f500fa48554ed6224efd2dbe9632880bf0a15a19' }, h("slot", { key: '37c5c5b7925b260ff8f9edd411ee6c90a12a4909', onSlotchange: this.onSlotChange })));
-    }
-    static get is() { return "ui-affordance-scope"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-affordance-scope.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-affordance-scope.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "nearRadius": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Distance outside each registered affordance that reveals its near state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "near-radius",
-                "defaultValue": "DEFAULT_AFFORDANCE_NEAR_RADIUS"
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "nearRadius",
-                "methodName": "connectCoordinator"
-            }];
-    }
-}

package/dist/collection/components/ui-avatar/ui-avatar.css

@@ -1,35 +0,0 @@
-:host {
-  display: inline-flex;
-}
-
-.avatar {
-  display: inline-grid;
-  place-items: center;
-  overflow: hidden;
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  border-radius: 999px;
-  border: 1px solid var(--ui-border-default);
-  background: var(--ui-surface-muted);
-  color: var(--ui-text-secondary);
-  font: inherit;
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.avatar img {
-  grid-area: 1 / 1;
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
-
-.avatar .fallback {
-  grid-area: 1 / 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 100%;
-  block-size: 100%;
-}