@chromvoid/uikit 0.1.0

package/dist/dialog/create-dialog-controller.js

@@ -0,0 +1,320 @@
+import { render } from 'lit';
+import { CVDialog } from '../components/cv-dialog.js';
+const sizeMap = {
+    s: '320px',
+    m: '480px',
+    l: '640px',
+    xl: '800px',
+};
+const STANDARD_FOCUSABLE_SELECTORS = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    'iframe',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable]',
+].join(',');
+const INPUT_LIKE_COMPONENTS = ['cv-input', 'cv-number', 'cv-textarea', 'cv-select'];
+const managedDialogStyles = `
+  cv-dialog.cv-managed-dialog::part(trigger) {
+    display: none;
+  }
+
+  cv-dialog.cv-managed-dialog::part(content) {
+    gap: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  cv-dialog.cv-managed-dialog::part(body) {
+    padding: 0;
+  }
+
+  cv-dialog.cv-managed-dialog::part(footer) {
+    display: block;
+    padding: 0;
+  }
+
+  .cv-dialog-controller-body {
+    padding: var(--cv-space-4, 16px);
+    line-height: 1.625;
+  }
+
+  .cv-dialog-controller-footer {
+    display: flex;
+    gap: var(--cv-space-2, 8px);
+    justify-content: flex-end;
+    padding: var(--cv-space-4, 16px);
+    border-top: 1px solid var(--cv-color-border, #2a3245);
+    background: color-mix(in oklab, var(--cv-color-surface-elevated, #1d2432) 90%, black);
+  }
+
+  @media (max-width: 640px) {
+    .cv-dialog-controller-footer {
+      width: 100%;
+    }
+
+    .cv-dialog-controller-footer > * {
+      flex: 1 1 0;
+    }
+  }
+`;
+let stylesInjected = false;
+let lastDeepFocusedElement = null;
+let focusTrackerInstalled = false;
+function injectStyles() {
+    if (stylesInjected || typeof document === 'undefined')
+        return;
+    const style = document.createElement('style');
+    style.textContent = managedDialogStyles;
+    style.id = 'cv-dialog-controller-styles';
+    document.head.appendChild(style);
+    stylesInjected = true;
+}
+function installFocusTracker() {
+    if (focusTrackerInstalled || typeof document === 'undefined')
+        return;
+    document.addEventListener('focusin', (event) => {
+        const target = event.composedPath?.()[0];
+        if (target instanceof HTMLElement) {
+            lastDeepFocusedElement = target;
+        }
+    }, { capture: true });
+    focusTrackerInstalled = true;
+}
+function getDeepActiveElement() {
+    if (typeof document === 'undefined')
+        return null;
+    let activeElement = document.activeElement;
+    while (activeElement instanceof HTMLElement &&
+        activeElement.shadowRoot?.activeElement instanceof HTMLElement) {
+        activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement instanceof HTMLElement ? activeElement : null;
+}
+function getFocusRestoreTarget() {
+    if (typeof document === 'undefined')
+        return null;
+    const deepActive = getDeepActiveElement();
+    if (deepActive && deepActive !== document.body && deepActive !== document.documentElement) {
+        return deepActive;
+    }
+    if (lastDeepFocusedElement &&
+        lastDeepFocusedElement !== document.body &&
+        lastDeepFocusedElement !== document.documentElement) {
+        return lastDeepFocusedElement;
+    }
+    return null;
+}
+function isElementVisible(element) {
+    if (element.offsetWidth === 0 && element.offsetHeight === 0) {
+        return false;
+    }
+    const style = window.getComputedStyle(element);
+    return style.visibility !== 'hidden' && style.display !== 'none';
+}
+function defaultFindFirstFocusable(container) {
+    const autofocusElement = container.querySelector('[autofocus]');
+    if (autofocusElement && isElementVisible(autofocusElement)) {
+        return autofocusElement;
+    }
+    if (container.shadowRoot) {
+        const shadowAutofocus = container.shadowRoot.querySelector('[autofocus]');
+        if (shadowAutofocus && isElementVisible(shadowAutofocus)) {
+            return shadowAutofocus;
+        }
+    }
+    for (const tagName of INPUT_LIKE_COMPONENTS) {
+        const component = container.querySelector(tagName);
+        if (component && isElementVisible(component)) {
+            return component;
+        }
+    }
+    const elements = container.querySelectorAll(STANDARD_FOCUSABLE_SELECTORS);
+    for (const element of elements) {
+        const htmlElement = element;
+        if (isElementVisible(htmlElement)) {
+            return htmlElement;
+        }
+    }
+    for (const child of container.children) {
+        if (child.shadowRoot) {
+            const found = defaultFindFirstFocusable(child);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+export function createDialogController(adapters = {}) {
+    CVDialog.define();
+    injectStyles();
+    installFocusTracker();
+    const activeDialogs = new Map();
+    let zIndexCounter = 1100;
+    const findFirstFocusable = adapters.findFirstFocusable ?? defaultFindFirstFocusable;
+    const getNextZIndex = () => zIndexCounter++;
+    const addDialog = (element, closeFn) => {
+        activeDialogs.set(element, closeFn);
+        const zIndex = getNextZIndex().toString();
+        element.style.setProperty('--cv-dialog-z-index', zIndex);
+    };
+    const removeDialog = (element) => {
+        activeDialogs.delete(element);
+        if (activeDialogs.size === 0) {
+            zIndexCounter = 1100;
+            adapters.restoreInert?.();
+        }
+    };
+    const present = async ({ element, title, show, close }) => {
+        const focusRestoreTarget = getFocusRestoreTarget();
+        document.body.appendChild(element);
+        addDialog(element, close);
+        element.addEventListener('cv-after-show', () => {
+            if (!activeDialogs.has(element))
+                return;
+            adapters.setInertExcept?.(element);
+            const firstFocusable = findFirstFocusable(element);
+            if (firstFocusable) {
+                setTimeout(() => {
+                    if (firstFocusable.isConnected) {
+                        firstFocusable.focus();
+                    }
+                }, 50);
+            }
+            if (title) {
+                adapters.announce?.(title, 'assertive');
+            }
+        }, { once: true });
+        try {
+            return await show();
+        }
+        finally {
+            removeDialog(element);
+            if (focusRestoreTarget?.isConnected) {
+                focusRestoreTarget.focus({ preventScroll: true });
+            }
+            element.remove();
+        }
+    };
+    const showCustom = (options, resultHandler) => {
+        return new Promise((resolve) => {
+            const focusRestoreTarget = getFocusRestoreTarget();
+            let isResolved = false;
+            let hasOpened = false;
+            let isCleanedUp = false;
+            const resolveOnce = (result) => {
+                if (isResolved)
+                    return;
+                isResolved = true;
+                resolve(result);
+            };
+            const dialog = document.createElement('cv-dialog');
+            dialog.classList.add('cv-managed-dialog');
+            dialog.noHeader = options.noHeader ?? false;
+            dialog.closable = options.closable !== false;
+            dialog.closeOnEscape = options.closable !== false;
+            dialog.closeOnOutsidePointer = options.closable !== false;
+            dialog.closeOnOutsideFocus = options.closable !== false;
+            if (options.className) {
+                dialog.classList.add(...options.className.split(/\s+/).filter(Boolean));
+            }
+            dialog.style.setProperty('--cv-dialog-width', sizeMap[options.size || 'm']);
+            if (!options.noHeader && options.title) {
+                const title = document.createElement('span');
+                title.slot = 'title';
+                title.textContent = options.title;
+                dialog.appendChild(title);
+            }
+            const body = document.createElement('div');
+            body.className = 'cv-dialog-controller-body';
+            if (typeof options.content === 'string') {
+                body.textContent = options.content;
+            }
+            else {
+                render(options.content, body);
+            }
+            dialog.appendChild(body);
+            if (options.footer && !options.noFooter) {
+                const footer = document.createElement('div');
+                footer.className = 'cv-dialog-controller-footer';
+                footer.slot = 'footer';
+                render(options.footer, footer);
+                dialog.appendChild(footer);
+            }
+            document.body.appendChild(dialog);
+            const cleanup = () => {
+                if (isCleanedUp)
+                    return;
+                isCleanedUp = true;
+                removeDialog(dialog);
+                if (focusRestoreTarget?.isConnected) {
+                    focusRestoreTarget.focus({ preventScroll: true });
+                }
+                if (document.body.contains(dialog)) {
+                    document.body.removeChild(dialog);
+                }
+            };
+            addDialog(dialog, () => {
+                dialog.open = false;
+                resolveOnce(null);
+                if (!hasOpened) {
+                    cleanup();
+                }
+            });
+            dialog.addEventListener('cv-after-hide', cleanup);
+            dialog.addEventListener('cv-after-show', () => {
+                if (!activeDialogs.has(dialog))
+                    return;
+                hasOpened = true;
+                adapters.setInertExcept?.(dialog);
+                const firstFocusable = findFirstFocusable(dialog);
+                if (firstFocusable) {
+                    setTimeout(() => firstFocusable.focus(), 50);
+                }
+                if (options.title) {
+                    adapters.announce?.(options.title, 'assertive');
+                }
+            });
+            dialog.addEventListener('cv-change', (event) => {
+                const detail = event.detail;
+                if (detail?.open === false) {
+                    resolveOnce(null);
+                }
+            });
+            resultHandler(dialog, (result) => {
+                dialog.open = false;
+                resolveOnce(result);
+                if (!hasOpened) {
+                    cleanup();
+                }
+            });
+            const openDialog = () => {
+                if (isResolved)
+                    return;
+                dialog.open = true;
+            };
+            if (dialog.updateComplete) {
+                dialog.updateComplete.then(openDialog);
+            }
+            else {
+                requestAnimationFrame(openDialog);
+            }
+        });
+    };
+    const closeAll = () => {
+        activeDialogs.forEach((close) => close());
+        activeDialogs.clear();
+        zIndexCounter = 1100;
+        adapters.restoreInert?.();
+    };
+    return {
+        present,
+        showCustom,
+        closeAll,
+        getActiveCount: () => activeDialogs.size,
+    };
+}

package/dist/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { createDialogController } from './create-dialog-controller.js';
+export type { CustomDialogOptions, DialogController, DialogControllerAdapters, DialogPriority, ManagedDialogOptions, } from './create-dialog-controller.js';

package/dist/dialog/index.js

@@ -0,0 +1 @@
+export { createDialogController } from './create-dialog-controller.js';

package/dist/form-associated/FormAssociatedReatomElement.d.ts

@@ -0,0 +1,25 @@
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import type { FormAssociatedValidity } from './withFormAssociated.js';
+export declare abstract class FormAssociatedReatomElement extends ReatomLitElement {
+    static readonly formAssociated = true;
+    protected readonly internals: ElementInternals;
+    private _formDisabled;
+    constructor();
+    protected get formDisabled(): boolean;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    protected syncFormAssociatedState(): void;
+    protected onFormDisabledChanged(_disabled: boolean): void;
+    protected onFormReset(): void;
+    protected onFormStateRestore(_state: string | File | FormData | null): void;
+    protected getFormAssociatedValidity(): FormAssociatedValidity;
+    protected abstract isFormAssociatedDisabled(): boolean;
+    protected abstract getFormAssociatedValue(): string | File | FormData | null;
+}

package/dist/form-associated/FormAssociatedReatomElement.js

@@ -0,0 +1,70 @@
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export class FormAssociatedReatomElement extends ReatomLitElement {
+    static formAssociated = true;
+    internals;
+    _formDisabled = false;
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+    }
+    get formDisabled() {
+        return this._formDisabled;
+    }
+    formDisabledCallback(disabled) {
+        this._formDisabled = disabled;
+        this.onFormDisabledChanged(disabled);
+        this.syncFormAssociatedState();
+        this.requestUpdate();
+    }
+    formResetCallback() {
+        this.onFormReset();
+        this.syncFormAssociatedState();
+        this.requestUpdate();
+    }
+    formStateRestoreCallback(state) {
+        this.onFormStateRestore(state);
+        this.syncFormAssociatedState();
+        this.requestUpdate();
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return !this.isFormAssociatedDisabled();
+    }
+    checkValidity() {
+        this.syncFormAssociatedState();
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        this.syncFormAssociatedState();
+        return this.internals.reportValidity();
+    }
+    syncFormAssociatedState() {
+        if (this.isFormAssociatedDisabled()) {
+            this.internals.setFormValue(null);
+            this.internals.setValidity({});
+            return;
+        }
+        this.internals.setFormValue(this.getFormAssociatedValue());
+        const validity = this.getFormAssociatedValidity();
+        const flags = validity.flags ?? {};
+        if (Object.keys(flags).length === 0) {
+            this.internals.setValidity({});
+            return;
+        }
+        this.internals.setValidity(flags, validity.message, validity.anchor);
+    }
+    onFormDisabledChanged(_disabled) { }
+    onFormReset() { }
+    onFormStateRestore(_state) { }
+    getFormAssociatedValidity() {
+        return { flags: {} };
+    }
+}

package/dist/form-associated/withFormAssociated.d.ts

@@ -0,0 +1,5 @@
+export interface FormAssociatedValidity {
+    flags?: ValidityStateFlags;
+    message?: string;
+    anchor?: HTMLElement;
+}

package/dist/form-associated/withFormAssociated.js

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

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from './components/index.js';
+export { createDialogController } from './dialog/create-dialog-controller.js';
+export type { CustomDialogOptions, DialogController, DialogControllerAdapters, DialogPriority, ManagedDialogOptions, } from './dialog/create-dialog-controller.js';
+export * from './reatom-lit/index.js';
+export * from './theme/index.js';
+export * from './toast/index.js';
+export { getIconBasePath, registerIconCollection, setIconBasePath, unregisterIconCollection, } from './components/cv-icon.js';
+export type { ToastRegionPosition } from './components/cv-toast-region.js';
+export { createAccordion, createAlertDialog, createAlert, createBreadcrumb, createButton, createCarousel, createCheckbox, createCommandPalette, createCombobox, createContextMenu, createDatePicker, createDisclosure, createDialog, createFeed, createGrid, createLandmark, createLink, createListbox, createMenu, createMenuButton, createMeter, createPopover, createProgress, createRadioGroup, createSelect, createSlider, createSpinbutton, createSwitch, createTabs, createToast, createTreeview, createToolbar, createTooltip, createWindowSplitter, type CreateAccordionOptions, type AccordionModel, type CreateAlertDialogOptions, type AlertDialogModel, type CreateAlertOptions, type AlertModel, type CreateBreadcrumbOptions, type BreadcrumbModel, type CreateButtonOptions, type ButtonModel, type CreateCarouselOptions, type CarouselModel, type CarouselSlide, type CreateCheckboxOptions, type CheckboxModel, type CreateCommandPaletteOptions, type CommandPaletteModel, type CreateComboboxOptions, type ComboboxModel, type CreateDatePickerOptions, type DatePickerModel, type CreateContextMenuOptions, type ContextMenuModel, type CreateDisclosureOptions, type DisclosureModel, type CreateDialogOptions, type DialogModel, type CreateFeedOptions, type FeedModel, type CreateGridOptions, type GridCellId, type GridFocusStrategy, type GridModel, type GridSelectionMode, type CreateLandmarkOptions, type LandmarkModel, type LandmarkType, type CreateLinkOptions, type LinkModel, type CreateListboxOptions, type ListboxModel, type CreateMenuOptions, type MenuModel, type CreateMenuButtonOptions, type MenuButtonModel, type CreateMeterOptions, type MeterModel, type CreatePopoverOptions, type PopoverModel, type CreateProgressOptions, type ProgressModel, type CreateRadioGroupOptions, type RadioGroupModel, type CreateSelectOptions, type SelectModel, type CreateSliderOptions, type SliderModel, createSliderMultiThumb, type CreateSliderMultiThumbOptions, type SliderMultiThumbModel, type SliderMultiThumbOrientation, createTable, type CreateTableOptions, type TableModel, type TableSortDirection, type CreateSpinbuttonOptions, type SpinbuttonModel, type CreateSwitchOptions, type SwitchModel, type CreateTabsOptions, type TabsModel, type CreateToastOptions, type ToastModel, type ToastItem, type CreateTreeviewOptions, type TreeNode, type TreeviewModel, createTreegrid, type CreateTreegridOptions, type TreegridCellId, type TreegridModel, type TreegridRow, type TreegridSelectionMode, type TreegridCellRole, type CreateToolbarOptions, type ToolbarModel, type CreateTooltipOptions, type TooltipModel, type CreateWindowSplitterOptions, type WindowSplitterModel, } from '@chromvoid/headless-ui';
+export { registerUikit } from './register.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+/// <reference path="./components/global-elements-events.d.ts" />
+export * from './components/index.js';
+export { createDialogController } from './dialog/create-dialog-controller.js';
+export * from './reatom-lit/index.js';
+export * from './theme/index.js';
+export * from './toast/index.js';
+export { getIconBasePath, registerIconCollection, setIconBasePath, unregisterIconCollection, } from './components/cv-icon.js';
+export { createAccordion, createAlertDialog, createAlert, createBreadcrumb, createButton, createCarousel, createCheckbox, createCommandPalette, createCombobox, createContextMenu, createDatePicker, createDisclosure, createDialog, createFeed, createGrid, createLandmark, createLink, createListbox, createMenu, createMenuButton, createMeter, createPopover, createProgress, createRadioGroup, createSelect, createSlider, createSpinbutton, createSwitch, createTabs, createToast, createTreeview, createToolbar, createTooltip, createWindowSplitter, createSliderMultiThumb, createTable, createTreegrid, } from '@chromvoid/headless-ui';
+export { registerUikit } from './register.js';

package/dist/reatom-lit/ReatomLitElement.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, CSSResultOrNative, PropertyValues, TemplateResult } from 'lit';
+declare const __aliased_event_dispatch: unique symbol;
+import { type ComponentHostDisplay } from '../styles/component-styles.js';
+/**
+ * Lazily set the shared UnoCSS utility stylesheet.
+ * Call once at app bootstrap (after `virtual:uno.css` is available):
+ *   import {unoUtilities} from './styles/uno-utilities.js'
+ *   setUnoUtilities(unoUtilities)
+ */
+export declare function setUnoUtilities(sheet: CSSResultOrNative): void;
+export declare class ReatomLitElement extends LitElement {
+    protected static hostDisplay: ComponentHostDisplay;
+    protected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[];
+    private __frame;
+    private __abstractRender?;
+    private __unmount?;
+    private [__aliased_event_dispatch];
+    constructor();
+    private __initAbstractRender;
+    protected render(): TemplateResult | unknown;
+    protected update(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    dispatchEvent(event: Event): boolean;
+}
+export {};

package/dist/reatom-lit/ReatomLitElement.js

@@ -0,0 +1,118 @@
+import { reatomAbstractRender, top } from '@reatom/core';
+import { LitElement } from 'lit';
+const __inner_update = Symbol('Inner update');
+const __aliased_event_dispatch = Symbol('Aliased event dispatch');
+const CV_EVENT_PREFIX = 'cv-';
+import { componentResetStyles, getComponentHostDisplayStyles, } from '../styles/component-styles.js';
+let _unoUtilities;
+/**
+ * Lazily set the shared UnoCSS utility stylesheet.
+ * Call once at app bootstrap (after `virtual:uno.css` is available):
+ *   import {unoUtilities} from './styles/uno-utilities.js'
+ *   setUnoUtilities(unoUtilities)
+ */
+export function setUnoUtilities(sheet) {
+    _unoUtilities = sheet;
+}
+export class ReatomLitElement extends LitElement {
+    static hostDisplay = 'block';
+    static finalizeStyles(styles) {
+        const base = [
+            componentResetStyles,
+            getComponentHostDisplayStyles(this.hostDisplay),
+            ...super.finalizeStyles(styles),
+        ];
+        if (_unoUtilities)
+            base.push(_unoUtilities);
+        return base;
+    }
+    __frame;
+    __abstractRender;
+    __unmount;
+    [__aliased_event_dispatch] = false;
+    constructor() {
+        super();
+        this.__frame = top();
+    }
+    __initAbstractRender() {
+        if (this.__abstractRender)
+            return;
+        this.__abstractRender = reatomAbstractRender({
+            frame: this.__frame,
+            render: () => {
+                return this.render();
+            },
+            rerender: () => {
+                return this.requestUpdate(__inner_update, 1);
+            },
+            name: 'ReatomElement',
+        });
+    }
+    render() {
+        return undefined;
+    }
+    update(changedProperties) {
+        this.__initAbstractRender();
+        const { result: value } = this.__abstractRender.render(changedProperties);
+        const hadOwnRender = Object.prototype.hasOwnProperty.call(this, 'render');
+        const ownRenderDescriptor = hadOwnRender ? Object.getOwnPropertyDescriptor(this, 'render') : undefined;
+        // Keep Lit's native update path intact so SSR hydration support can
+        // reuse declarative shadow DOM instead of appending a second render.
+        Object.defineProperty(this, 'render', {
+            configurable: true,
+            value: () => value,
+        });
+        try {
+            super.update(changedProperties);
+        }
+        finally {
+            if (hadOwnRender && ownRenderDescriptor) {
+                Object.defineProperty(this, 'render', ownRenderDescriptor);
+            }
+            else {
+                delete this.render;
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.__initAbstractRender();
+        this.__unmount = this.__abstractRender.mount();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.__unmount) {
+            try {
+                this.__unmount();
+            }
+            catch {
+                // ignore unmount errors
+            }
+            this.__unmount = undefined;
+        }
+    }
+    dispatchEvent(event) {
+        if (this.localName.startsWith(CV_EVENT_PREFIX) &&
+            !this[__aliased_event_dispatch] &&
+            event instanceof CustomEvent &&
+            !event.type.startsWith(CV_EVENT_PREFIX)) {
+            this[__aliased_event_dispatch] = true;
+            try {
+                const aliasedEvent = new CustomEvent(`${CV_EVENT_PREFIX}${event.type}`, {
+                    detail: event.detail,
+                    bubbles: event.bubbles,
+                    cancelable: event.cancelable,
+                    composed: event.composed,
+                });
+                super.dispatchEvent(aliasedEvent);
+                if (aliasedEvent.defaultPrevented && event.cancelable) {
+                    event.preventDefault();
+                }
+            }
+            finally {
+                this[__aliased_event_dispatch] = false;
+            }
+        }
+        return super.dispatchEvent(event);
+    }
+}

package/dist/reatom-lit/html.d.ts

@@ -0,0 +1,4 @@
+import { html as coreHtml, svg as coreSvg, type TemplateResult } from 'lit/html.js';
+export declare const withWatch: (coreTag: typeof coreHtml | typeof coreSvg) => (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult;
+export declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult;
+export declare const svg: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult;

package/dist/reatom-lit/html.js

@@ -0,0 +1,10 @@
+import { isAtom } from '@reatom/core';
+import { html as coreHtml, svg as coreSvg } from 'lit/html.js';
+import { watch } from './watch.js';
+export const withWatch = (coreTag) => (strings, ...values) => {
+    return coreTag(strings, ...values.map((v) => {
+        return isAtom(v) ? watch(v) : v;
+    }));
+};
+export const html = withWatch(coreHtml);
+export const svg = withWatch(coreSvg);

package/dist/reatom-lit/index.d.ts

@@ -0,0 +1,4 @@
+export { ReatomLitElement, setUnoUtilities } from './ReatomLitElement.js';
+export { withReatomElement } from './withReatomElement.js';
+export { html, svg } from './html.js';
+export { watch } from './watch.js';

package/dist/reatom-lit/index.js

@@ -0,0 +1,4 @@
+export { ReatomLitElement, setUnoUtilities } from './ReatomLitElement.js';
+export { withReatomElement } from './withReatomElement.js';
+export { html, svg } from './html.js';
+export { watch } from './watch.js';

package/dist/reatom-lit/watch.d.ts

@@ -0,0 +1,15 @@
+import type { AtomLike, Frame, Unsubscribe } from '@reatom/core';
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { PartInfo } from 'lit/directive.js';
+declare class AtomDirective extends AsyncDirective {
+    target: AtomLike | undefined;
+    unsubscribe: Unsubscribe | undefined;
+    frame: Frame | undefined;
+    constructor(partInfo: PartInfo);
+    reconnected(): void;
+    disconnected(): void;
+    subscribe(): void;
+    render(target: AtomLike, frame: Frame): symbol;
+}
+export declare const watch: (target: AtomLike) => import("lit/async-directive.js").DirectiveResult<typeof AtomDirective>;
+export {};