@deepfuture/dui-core 0.0.1

package/apply-theme.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Theme applicator — creates themed subclasses of unstyled DUI components
+ * and registers them as custom elements.
+ *
+ * Must be called before any DUI component is used in the DOM.
+ */
+import type { CSSResult, LitElement } from "lit";
+export interface DuiTheme {
+    /** Token stylesheet to inject into document.adoptedStyleSheets. */
+    tokens: CSSStyleSheet;
+    /** Themed :host defaults (font-family, color, line-height). */
+    base: CSSResult;
+    /** Tag name → component aesthetic styles. */
+    styles: Map<string, CSSResult>;
+}
+export interface ApplyThemeOptions {
+    theme: DuiTheme;
+    components: Array<typeof LitElement & {
+        tagName: string;
+    }>;
+}
+export declare function getActiveTheme(): DuiTheme | null;
+export declare function applyTheme({ theme, components }: ApplyThemeOptions): void;

package/apply-theme.js

@@ -0,0 +1,38 @@
+/**
+ * Theme applicator — creates themed subclasses of unstyled DUI components
+ * and registers them as custom elements.
+ *
+ * Must be called before any DUI component is used in the DOM.
+ */
+let activeTheme = null;
+export function getActiveTheme() {
+    return activeTheme;
+}
+export function applyTheme({ theme, components }) {
+    activeTheme = theme;
+    // 1. Inject tokens into document (idempotent)
+    if (!document.adoptedStyleSheets.includes(theme.tokens)) {
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets, theme.tokens];
+    }
+    // 2. For each component, create a themed subclass and register it
+    for (const Base of components) {
+        const tagName = Base.tagName;
+        if (customElements.get(tagName))
+            continue;
+        const themeStyles = theme.styles.get(tagName);
+        const baseStyles = Array.isArray(Base.styles)
+            ? Base.styles
+            : Base.styles
+                ? [Base.styles]
+                : [];
+        const composedStyles = [
+            ...baseStyles,
+            theme.base,
+            ...(themeStyles ? [themeStyles] : []),
+        ];
+        const ThemedClass = class extends Base {
+            static { this.styles = composedStyles; }
+        };
+        customElements.define(tagName, ThemedClass);
+    }
+}

package/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Structural reset styles shared by all DUI components.
+ * Contains only layout resets and behavioral defaults — no visual opinions.
+ * Visual defaults (font-family, color, etc.) come from the theme's base.
+ */
+export declare const base: import("lit").CSSResult;

package/base.js

@@ -0,0 +1,75 @@
+/**
+ * Structural reset styles shared by all DUI components.
+ * Contains only layout resets and behavioral defaults — no visual opinions.
+ * Visual defaults (font-family, color, etc.) come from the theme's base.
+ */
+import { css } from "lit";
+export const base = css `
+  * {
+    box-sizing: border-box;
+  }
+
+  p,
+  ul,
+  ol,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  figure,
+  blockquote,
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul,
+  ol {
+    list-style: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: normal;
+  }
+
+  img,
+  svg,
+  video,
+  canvas {
+    display: block;
+    max-width: 100%;
+  }
+
+  a,
+  a:visited,
+  a:hover,
+  a:active {
+    color: inherit;
+  }
+
+  img,
+  video {
+    height: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+`;

package/dom.d.ts

@@ -0,0 +1,30 @@
+/**
+ * DOM utilities for composed tree traversal and focus management.
+ * Pierces shadow roots and resolves slot assignments.
+ */
+export type GetRootDocumentOptions = {
+    composed?: boolean;
+};
+/**
+ * Get the root node (Document or DocumentFragment) of a given node.
+ *
+ * @param node - The node to get the root of.
+ * @param options.composed - If true (default), pierce shadow roots to get the host's root.
+ *                          If false, stop at shadow root boundaries.
+ */
+export declare const getRootDocument: (node: Node, { composed }?: GetRootDocumentOptions) => Document | DocumentFragment | undefined;
+/**
+ * Recursively walk the composed DOM tree (piercing shadow roots, resolving
+ * slot assignments) and return all natively-focusable elements in document
+ * order.
+ */
+export declare const getComposedFocusableElements: (root: Node) => HTMLElement[];
+/**
+ * Find the first element matching `selector` in the composed tree
+ * (piercing shadow roots and resolving slot assignments).
+ */
+export declare const queryComposedTree: (root: Node, selector: string) => HTMLElement | null;
+/**
+ * Find the first element with the `autofocus` attribute in the composed tree.
+ */
+export declare const queryComposedAutofocus: (root: Node) => HTMLElement | null;

package/dom.js

@@ -0,0 +1,85 @@
+/**
+ * DOM utilities for composed tree traversal and focus management.
+ * Pierces shadow roots and resolves slot assignments.
+ */
+/**
+ * Get the root node (Document or DocumentFragment) of a given node.
+ *
+ * @param node - The node to get the root of.
+ * @param options.composed - If true (default), pierce shadow roots to get the host's root.
+ *                          If false, stop at shadow root boundaries.
+ */
+export const getRootDocument = (node, { composed = true } = {}) => {
+    const root = node.getRootNode({ composed });
+    if (root instanceof DocumentFragment) {
+        return root;
+    }
+    else if (root instanceof Document) {
+        return root;
+    }
+    return undefined;
+};
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+/**
+ * Get the composed children of a node, piercing shadow roots and
+ * resolving `<slot>` elements to their assigned content.
+ */
+const getComposedChildren = (node) => {
+    if (node instanceof HTMLSlotElement) {
+        return node.assignedNodes({ flatten: true });
+    }
+    if (node instanceof Element && node.shadowRoot) {
+        return Array.from(node.shadowRoot.childNodes);
+    }
+    return Array.from(node.childNodes);
+};
+/**
+ * Recursively walk the composed DOM tree (piercing shadow roots, resolving
+ * slot assignments) and return all natively-focusable elements in document
+ * order.
+ */
+export const getComposedFocusableElements = (root) => {
+    const results = [];
+    const walk = (node) => {
+        if (node instanceof HTMLElement &&
+            node.matches(FOCUSABLE_SELECTOR) &&
+            !node.hasAttribute("disabled")) {
+            results.push(node);
+            return;
+        }
+        for (const child of getComposedChildren(node)) {
+            walk(child);
+        }
+    };
+    for (const child of getComposedChildren(root)) {
+        walk(child);
+    }
+    return results;
+};
+/**
+ * Find the first element matching `selector` in the composed tree
+ * (piercing shadow roots and resolving slot assignments).
+ */
+export const queryComposedTree = (root, selector) => {
+    const walk = (node) => {
+        if (node instanceof HTMLElement && node.matches(selector)) {
+            return node;
+        }
+        for (const child of getComposedChildren(node)) {
+            const found = walk(child);
+            if (found)
+                return found;
+        }
+        return null;
+    };
+    for (const child of getComposedChildren(root)) {
+        const found = walk(child);
+        if (found)
+            return found;
+    }
+    return null;
+};
+/**
+ * Find the first element with the `autofocus` attribute in the composed tree.
+ */
+export const queryComposedAutofocus = (root) => queryComposedTree(root, "[autofocus]");

package/event.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Define an event factory for custom events of `type`.
+ * Returned event will always be of same type with same event options.
+ * @example
+ * ```ts
+ * const greetEvent = event<string>('greet-event', { bubbles: true });
+ * document.dispatchEvent(greetEvent("Hello, world!"));
+ * ```
+ */
+export declare const customEvent: <Detail>(type: string, options?: EventInit) => (detail: Detail) => CustomEvent<Detail>;

package/event.js

@@ -0,0 +1,10 @@
+/**
+ * Define an event factory for custom events of `type`.
+ * Returned event will always be of same type with same event options.
+ * @example
+ * ```ts
+ * const greetEvent = event<string>('greet-event', { bubbles: true });
+ * document.dispatchEvent(greetEvent("Hello, world!"));
+ * ```
+ */
+export const customEvent = (type, options = {}) => (detail) => new CustomEvent(type, { ...options, detail });

package/floating-popup-utils.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Shared utilities for floating popup components (popover, tooltip).
+ * Provides animation lifecycle helpers, arrow rendering, and a centralized
+ * Floating UI positioning wrapper.
+ */
+import { type TemplateResult } from "lit";
+import { type Placement } from "@floating-ui/dom";
+export type FloatingPopupSide = "top" | "bottom";
+/** Double-rAF to ensure CSS starting-style is applied then removed. */
+export declare const waitForAnimationFrame: () => Promise<void>;
+/** Listen for transitionend with a fallback timeout. Guards against double-fire. */
+export declare const onTransitionEnd: (el: Element, callback: () => void, fallbackMs?: number) => void;
+/** Render an arrow SVG pointing at the trigger. */
+export declare const renderArrow: (side: FloatingPopupSide) => TemplateResult;
+export type ComputeFixedPositionOptions = {
+    placement?: Placement;
+    offsetPx?: number;
+    matchWidth?: boolean;
+    padding?: number;
+};
+/**
+ * Compute a fixed-strategy position using Floating UI with the viewport
+ * override baked in.
+ */
+export declare const computeFixedPosition: (anchor: HTMLElement, floating: HTMLElement, options?: ComputeFixedPositionOptions) => Promise<{
+    x: number;
+    y: number;
+    placement: Placement;
+}>;
+/**
+ * Start Floating UI `autoUpdate` + `computeFixedPosition` in one call.
+ * Returns a cleanup function to stop tracking.
+ */
+export declare const startFixedAutoUpdate: (anchor: HTMLElement, floating: HTMLElement, options?: ComputeFixedPositionOptions & {
+    onPosition?: (result: {
+        x: number;
+        y: number;
+        placement: Placement;
+    }) => void;
+}) => (() => void);

package/floating-popup-utils.js

@@ -0,0 +1,86 @@
+/**
+ * Shared utilities for floating popup components (popover, tooltip).
+ * Provides animation lifecycle helpers, arrow rendering, and a centralized
+ * Floating UI positioning wrapper.
+ */
+import { html } from "lit";
+import { autoUpdate, computePosition, flip, offset, platform, shift, size, } from "@floating-ui/dom";
+/** Double-rAF to ensure CSS starting-style is applied then removed. */
+export const waitForAnimationFrame = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+/** Listen for transitionend with a fallback timeout. Guards against double-fire. */
+export const onTransitionEnd = (el, callback, fallbackMs = 200) => {
+    let called = false;
+    const done = () => {
+        if (called)
+            return;
+        called = true;
+        el.removeEventListener("transitionend", onEnd);
+        clearTimeout(timer);
+        callback();
+    };
+    const onEnd = () => done();
+    el.addEventListener("transitionend", onEnd);
+    const timer = setTimeout(done, fallbackMs);
+};
+/** Render an arrow SVG pointing at the trigger. */
+export const renderArrow = (side) => html `
+  <svg class="Arrow" part="arrow" viewBox="0 0 10 6" data-side="${side}">
+    <polygon class="arrow-fill" points="0,0 5,6 10,0" />
+    <path class="arrow-stroke" d="M 0,0 L 5,6 L 10,0" />
+  </svg>
+`;
+// ---------------------------------------------------------------------------
+// Centralized Floating UI positioning
+// ---------------------------------------------------------------------------
+/**
+ * Shared platform override that forces Floating UI to resolve offsets relative
+ * to the viewport. Without this, popups inside `container-type: size` ancestors
+ * compute incorrect positions because the container becomes the offset parent.
+ */
+const fixedPlatform = {
+    ...platform,
+    getOffsetParent: () => window,
+};
+/**
+ * Compute a fixed-strategy position using Floating UI with the viewport
+ * override baked in.
+ */
+export const computeFixedPosition = (anchor, floating, options = {}) => {
+    const { placement = "bottom-start", offsetPx = 4, matchWidth = false, padding = 8, } = options;
+    const middleware = [
+        offset(offsetPx),
+        flip(),
+        shift({ padding }),
+    ];
+    if (matchWidth) {
+        middleware.push(size({
+            apply({ rects, elements }) {
+                Object.assign(elements.floating.style, {
+                    width: `${rects.reference.width}px`,
+                });
+            },
+        }));
+    }
+    return computePosition(anchor, floating, {
+        placement,
+        strategy: "fixed",
+        middleware,
+        platform: fixedPlatform,
+    });
+};
+/**
+ * Start Floating UI `autoUpdate` + `computeFixedPosition` in one call.
+ * Returns a cleanup function to stop tracking.
+ */
+export const startFixedAutoUpdate = (anchor, floating, options = {}) => {
+    const { onPosition, ...positionOptions } = options;
+    return autoUpdate(anchor, floating, () => {
+        computeFixedPosition(anchor, floating, positionOptions).then((result) => {
+            Object.assign(floating.style, {
+                left: `${result.x}px`,
+                top: `${result.y}px`,
+            });
+            onPosition?.(result);
+        });
+    });
+};

package/floating-portal-controller.d.ts

@@ -0,0 +1,73 @@
+/**
+ * A reactive controller that combines portal teleportation with Floating UI
+ * positioning. Creates a positioner element in the document body (or a
+ * provided overlay root) so that popups escape `container-type` ancestors.
+ */
+import { type CSSResultOrNative, type ReactiveController, type ReactiveControllerHost, type TemplateResult } from "lit";
+import type { Placement } from "@floating-ui/dom";
+type PortalHost = ReactiveControllerHost & HTMLElement;
+export type FloatingPortalControllerOptions = {
+    /** Returns the anchor element used for positioning. */
+    getAnchor: () => HTMLElement | null | undefined;
+    /** Whether the popup width should match the anchor width. Default: true. */
+    matchWidth?: boolean;
+    /** Floating UI placement. Default: "bottom-start". */
+    placement?: Placement;
+    /** Offset in px between anchor and popup. Default: 4. */
+    offset?: number;
+    /** Styles to apply inside the positioner's shadow root via `adoptStyles()`. */
+    styles?: CSSResultOrNative[];
+    /**
+     * CSS selector for a container element inside the rendered popup. When set,
+     * the controller automatically moves the host's `childNodes` into this
+     * container when the popup opens, and moves them back on teardown.
+     */
+    contentContainer?: string;
+    /**
+     * CSS selector to filter which host children get moved. When set, only
+     * matching direct children (via `:scope > selector`) are moved. When unset,
+     * all `childNodes` are moved. Only used when `contentContainer` is set.
+     */
+    contentSelector?: string;
+    /** Called after the popup opens (animation started). */
+    onOpen?: () => void;
+    /** Called after the popup finishes closing (animation done). */
+    onClose?: () => void;
+    /**
+     * Called after each Floating UI reposition so the consumer can react
+     * to placement changes (e.g. update data-side attributes).
+     */
+    onPosition?: (result: {
+        x: number;
+        y: number;
+        placement: Placement;
+    }) => void;
+    /**
+     * Optional render callback invoked after each host update while the popup
+     * is open (or closing).
+     */
+    renderPopup?: (portal: FloatingPortalController) => TemplateResult;
+    /**
+     * Returns the overlay root element where the positioner is appended.
+     * Defaults to `document.body`.
+     */
+    getOverlayRoot?: () => HTMLElement;
+};
+export declare class FloatingPortalController implements ReactiveController {
+    #private;
+    get isOpen(): boolean;
+    get isAnimating(): boolean;
+    get isStarting(): boolean;
+    get isEnding(): boolean;
+    get positionerElement(): HTMLDivElement | null;
+    get renderRoot(): ShadowRoot | HTMLDivElement | null;
+    set placement(value: Placement);
+    set offset(value: number);
+    constructor(host: PortalHost, options: FloatingPortalControllerOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    open(): void;
+    close(): void;
+}
+export {};

package/floating-portal-controller.js

@@ -0,0 +1,221 @@
+/**
+ * A reactive controller that combines portal teleportation with Floating UI
+ * positioning. Creates a positioner element in the document body (or a
+ * provided overlay root) so that popups escape `container-type` ancestors.
+ */
+import { adoptStyles, render, } from "lit";
+import { notifyPopupClosing, notifyPopupOpening } from "./popup-coordinator.js";
+import { onTransitionEnd, startFixedAutoUpdate, waitForAnimationFrame, } from "./floating-popup-utils.js";
+export class FloatingPortalController {
+    #host;
+    #getAnchor;
+    #matchWidth;
+    #placement;
+    #offset;
+    #styles;
+    #onOpen;
+    #onClose;
+    #onPosition;
+    #renderPopup;
+    #contentContainer;
+    #contentSelector;
+    #getOverlayRoot;
+    #movedNodes = [];
+    #positioner = null;
+    #cleanupAutoUpdate = null;
+    #isOpen = false;
+    #isAnimating = false;
+    #generation = 0;
+    get isOpen() {
+        return this.#isOpen;
+    }
+    get isAnimating() {
+        return this.#isAnimating;
+    }
+    get isStarting() {
+        return this.#isOpen && this.#isAnimating;
+    }
+    get isEnding() {
+        return !this.#isOpen && this.#isAnimating;
+    }
+    get positionerElement() {
+        return this.#positioner;
+    }
+    get renderRoot() {
+        return this.#positioner?.shadowRoot ?? this.#positioner;
+    }
+    set placement(value) {
+        this.#placement = value;
+    }
+    set offset(value) {
+        this.#offset = value;
+    }
+    constructor(host, options) {
+        this.#host = host;
+        this.#getAnchor = options.getAnchor;
+        this.#matchWidth = options.matchWidth ?? true;
+        this.#placement = options.placement ?? "bottom-start";
+        this.#offset = options.offset ?? 4;
+        this.#styles = options.styles;
+        this.#onOpen = options.onOpen;
+        this.#onClose = options.onClose;
+        this.#onPosition = options.onPosition;
+        this.#renderPopup = options.renderPopup;
+        this.#contentContainer = options.contentContainer;
+        this.#contentSelector = options.contentSelector;
+        this.#getOverlayRoot = options.getOverlayRoot ?? (() => document.body);
+        host.addController(this);
+    }
+    hostConnected() {
+        document.addEventListener("click", this.#onDocumentClick);
+    }
+    hostDisconnected() {
+        document.removeEventListener("click", this.#onDocumentClick);
+        this.#teardown();
+        notifyPopupClosing(this.#host);
+    }
+    hostUpdated() {
+        if (this.#isOpen) {
+            this.#host.setAttribute("open", "");
+        }
+        else {
+            this.#host.removeAttribute("open");
+        }
+        if (this.#renderPopup && (this.#isOpen || this.isEnding)) {
+            const root = this.renderRoot;
+            if (root)
+                render(this.#renderPopup(this), root);
+        }
+        if (this.#contentContainer &&
+            this.#isOpen &&
+            this.#movedNodes.length === 0) {
+            this.#moveContentToPortal();
+        }
+    }
+    open() {
+        if (this.#isOpen)
+            return;
+        this.#generation++;
+        const gen = this.#generation;
+        notifyPopupOpening(this.#host, () => this.close());
+        this.#isOpen = true;
+        this.#isAnimating = true;
+        this.#createPositioner();
+        this.#startAutoUpdate();
+        this.#onOpen?.();
+        this.#host.requestUpdate();
+        waitForAnimationFrame().then(() => {
+            if (gen !== this.#generation)
+                return;
+            this.#isAnimating = false;
+            this.#host.requestUpdate();
+        });
+    }
+    close() {
+        if (!this.#isOpen)
+            return;
+        this.#generation++;
+        this.#isAnimating = true;
+        this.#host.requestUpdate();
+        const popup = this.renderRoot?.querySelector(".Popup");
+        if (!popup) {
+            this.#finishClose();
+            return;
+        }
+        onTransitionEnd(popup, () => this.#finishClose());
+    }
+    // ---- Private ----
+    #finishClose() {
+        if (!this.#isOpen)
+            return;
+        this.#isOpen = false;
+        this.#isAnimating = false;
+        this.#stopAutoUpdate();
+        notifyPopupClosing(this.#host);
+        this.#onClose?.();
+        this.#hidePositioner();
+        this.#host.requestUpdate();
+    }
+    #onDocumentClick = (event) => {
+        if (!this.#isOpen)
+            return;
+        const path = event.composedPath();
+        if (!path.includes(this.#host) && !this.#positionerInPath(path)) {
+            this.close();
+        }
+    };
+    #positionerInPath(path) {
+        if (!this.#positioner)
+            return false;
+        return path.includes(this.#positioner);
+    }
+    #createPositioner() {
+        if (this.#positioner) {
+            this.#positioner.style.display = "";
+            return;
+        }
+        const overlayRoot = this.#getOverlayRoot();
+        const positioner = document.createElement("div");
+        positioner.style.position = "fixed";
+        positioner.style.zIndex = "1000";
+        positioner.style.pointerEvents = "none";
+        positioner.setAttribute("data-floating-portal", "");
+        positioner.setAttribute("data-dui-portal-for", this.#host.tagName.toLowerCase());
+        if (this.#styles) {
+            const shadow = positioner.attachShadow({ mode: "open" });
+            adoptStyles(shadow, this.#styles);
+        }
+        overlayRoot.appendChild(positioner);
+        this.#positioner = positioner;
+    }
+    #hidePositioner() {
+        if (this.#positioner) {
+            this.#positioner.style.display = "none";
+        }
+    }
+    #removePositioner() {
+        this.#positioner?.remove();
+        this.#positioner = null;
+    }
+    #startAutoUpdate() {
+        if (this.#cleanupAutoUpdate)
+            return;
+        const anchor = this.#getAnchor();
+        const positioner = this.#positioner;
+        if (!anchor || !positioner)
+            return;
+        this.#cleanupAutoUpdate = startFixedAutoUpdate(anchor, positioner, {
+            placement: this.#placement,
+            offsetPx: this.#offset,
+            matchWidth: this.#matchWidth,
+            onPosition: this.#onPosition,
+        });
+    }
+    #stopAutoUpdate() {
+        this.#cleanupAutoUpdate?.();
+        this.#cleanupAutoUpdate = null;
+    }
+    #moveContentToPortal() {
+        const container = this.renderRoot?.querySelector(this.#contentContainer);
+        if (!container)
+            return;
+        const nodes = this.#contentSelector
+            ? Array.from(this.#host.querySelectorAll(`:scope > ${this.#contentSelector}`))
+            : Array.from(this.#host.childNodes);
+        for (const node of nodes) {
+            container.appendChild(node);
+            this.#movedNodes.push(node);
+        }
+    }
+    #moveContentBack() {
+        for (const node of this.#movedNodes) {
+            this.#host.appendChild(node);
+        }
+        this.#movedNodes = [];
+    }
+    #teardown() {
+        this.#stopAutoUpdate();
+        this.#moveContentBack();
+        this.#removePositioner();
+    }
+}

package/index.d.ts

@@ -0,0 +1,12 @@
+export { base } from "./base.js";
+export { getRootDocument, getComposedFocusableElements, queryComposedTree, queryComposedAutofocus, } from "./dom.js";
+export type { GetRootDocumentOptions } from "./dom.js";
+export { customEvent } from "./event.js";
+export { applyTheme, getActiveTheme } from "./apply-theme.js";
+export type { DuiTheme, ApplyThemeOptions } from "./apply-theme.js";
+export { notifyPopupOpening, notifyPopupClosing } from "./popup-coordinator.js";
+export { waitForAnimationFrame, onTransitionEnd, renderArrow, computeFixedPosition, startFixedAutoUpdate, } from "./floating-popup-utils.js";
+export type { FloatingPopupSide, ComputeFixedPositionOptions, } from "./floating-popup-utils.js";
+export { FloatingPortalController } from "./floating-portal-controller.js";
+export type { FloatingPortalControllerOptions } from "./floating-portal-controller.js";
+export type { StackGap } from "./layout-types.js";

package/index.js

@@ -0,0 +1,7 @@
+export { base } from "./base.js";
+export { getRootDocument, getComposedFocusableElements, queryComposedTree, queryComposedAutofocus, } from "./dom.js";
+export { customEvent } from "./event.js";
+export { applyTheme, getActiveTheme } from "./apply-theme.js";
+export { notifyPopupOpening, notifyPopupClosing } from "./popup-coordinator.js";
+export { waitForAnimationFrame, onTransitionEnd, renderArrow, computeFixedPosition, startFixedAutoUpdate, } from "./floating-popup-utils.js";
+export { FloatingPortalController } from "./floating-portal-controller.js";

package/layout-types.d.ts

@@ -0,0 +1 @@
+export type StackGap = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16";

package/layout-types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@deepfuture/dui-core",
+  "version": "0.0.1",
+  "description": "DUI core — applyTheme(), setup(), event factory, base styles",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicholasgasior/dui.git",
+    "directory": "packages/core"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./event": {
+      "import": "./event.js",
+      "types": "./event.d.ts"
+    },
+    "./base": {
+      "import": "./base.js",
+      "types": "./base.d.ts"
+    },
+    "./apply-theme": {
+      "import": "./apply-theme.js",
+      "types": "./apply-theme.d.ts"
+    },
+    "./popup-coordinator": {
+      "import": "./popup-coordinator.js",
+      "types": "./popup-coordinator.d.ts"
+    },
+    "./floating-popup-utils": {
+      "import": "./floating-popup-utils.js",
+      "types": "./floating-popup-utils.d.ts"
+    },
+    "./floating-portal-controller": {
+      "import": "./floating-portal-controller.js",
+      "types": "./floating-portal-controller.d.ts"
+    },
+    "./layout-types": {
+      "import": "./layout-types.js",
+      "types": "./layout-types.d.ts"
+    },
+    "./dom": {
+      "import": "./dom.js",
+      "types": "./dom.d.ts"
+    },
+    "./setup": {
+      "import": "./setup.js",
+      "types": "./setup.d.ts"
+    }
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "lit": "^3.3.2",
+    "@floating-ui/dom": "^1.7.4"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "web-components",
+    "lit",
+    "unstyled",
+    "components",
+    "dui",
+    "theme"
+  ]
+}

package/popup-coordinator.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Coordinates popup components so that only one is open at a time.
+ * When a popup opens, any previously-open popup is closed first.
+ */
+/** Call when opening — closes any other open popup first. */
+export declare const notifyPopupOpening: (instance: HTMLElement, closeFn: () => void) => void;
+/** Call when closing — removes this instance from tracking. */
+export declare const notifyPopupClosing: (instance: HTMLElement) => void;

package/popup-coordinator.js

@@ -0,0 +1,18 @@
+/**
+ * Coordinates popup components so that only one is open at a time.
+ * When a popup opens, any previously-open popup is closed first.
+ */
+const openPopups = new Map();
+/** Call when opening — closes any other open popup first. */
+export const notifyPopupOpening = (instance, closeFn) => {
+    for (const [key, close] of openPopups) {
+        if (key !== instance)
+            close();
+    }
+    openPopups.clear();
+    openPopups.set(instance, closeFn);
+};
+/** Call when closing — removes this instance from tracking. */
+export const notifyPopupClosing = (instance) => {
+    openPopups.delete(instance);
+};

package/setup.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Convenience setup function — registers all components with the default theme
+ * in a single call. For quick starts and CDN usage.
+ *
+ * @example
+ * ```ts
+ * import { setup } from "@deepfuture/dui-core/setup";
+ * import { defaultTheme } from "@deepfuture/dui-theme-default";
+ * import { allComponents } from "@deepfuture/dui-components/all";
+ *
+ * setup({ theme: defaultTheme, components: allComponents });
+ * ```
+ */
+import { type ApplyThemeOptions } from "./apply-theme.js";
+export declare function setup(options: ApplyThemeOptions): void;

package/setup.js

@@ -0,0 +1,17 @@
+/**
+ * Convenience setup function — registers all components with the default theme
+ * in a single call. For quick starts and CDN usage.
+ *
+ * @example
+ * ```ts
+ * import { setup } from "@deepfuture/dui-core/setup";
+ * import { defaultTheme } from "@deepfuture/dui-theme-default";
+ * import { allComponents } from "@deepfuture/dui-components/all";
+ *
+ * setup({ theme: defaultTheme, components: allComponents });
+ * ```
+ */
+import { applyTheme } from "./apply-theme.js";
+export function setup(options) {
+    applyTheme(options);
+}