nativecorejs 0.1.0

package/dist/components/nc-tooltip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * NcTooltip Component
+ *
+ * Wraps any element and shows a tooltip on hover/focus.
+ *
+ * Attributes:
+ *   - tip: string - tooltip text (required)
+ *   - placement: 'top'|'bottom'|'left'|'right' (default: 'top')
+ *   - delay: number - ms before showing (default: 200)
+ *   - variant: 'default'|'light' (default: 'default')
+ *
+ * Usage:
+ *   <nc-tooltip tip="Save your changes">
+ *     <nc-button>Save</nc-button>
+ *   </nc-tooltip>
+ */
+import { Component } from '../core/component.js';
+export declare class NcTooltip extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private _showTimer;
+    private _visible;
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-tooltip.js

@@ -0,0 +1,135 @@
+/**
+ * NcTooltip Component
+ *
+ * Wraps any element and shows a tooltip on hover/focus.
+ *
+ * Attributes:
+ *   - tip: string - tooltip text (required)
+ *   - placement: 'top'|'bottom'|'left'|'right' (default: 'top')
+ *   - delay: number - ms before showing (default: 200)
+ *   - variant: 'default'|'light' (default: 'default')
+ *
+ * Usage:
+ *   <nc-tooltip tip="Save your changes">
+ *     <nc-button>Save</nc-button>
+ *   </nc-tooltip>
+ */
+import { Component, defineComponent } from '../core/component.js';
+export class NcTooltip extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['tip', 'placement', 'delay', 'variant'];
+    }
+    _showTimer = null;
+    _visible = false;
+    template() {
+        const placement = this.getAttribute('placement') || 'top';
+        const variant = this.getAttribute('variant') || 'default';
+        const tip = this.getAttribute('tip') || '';
+        return `
+            <style>
+                :host { display: inline-flex; position: relative; }
+
+                .tip {
+                    position: absolute;
+                    z-index: 9999;
+                    padding: 5px 10px;
+                    border-radius: var(--nc-radius-sm, 4px);
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-xs);
+                    line-height: 1.4;
+                    white-space: nowrap;
+                    pointer-events: none;
+                    opacity: 0;
+                    transform: ${placement === 'top' ? 'translateY(4px)' : placement === 'bottom' ? 'translateY(-4px)' : placement === 'left' ? 'translateX(4px)' : 'translateX(-4px)'};
+                    transition: opacity var(--nc-transition-fast), transform var(--nc-transition-fast);
+                    max-width: 220px;
+                    overflow-wrap: break-word;
+                    white-space: normal;
+                    text-align: center;
+                }
+
+                .tip--default { background: var(--nc-gray-900, #111); color: #fff; }
+                .tip--light   { background: var(--nc-bg); color: var(--nc-text); border: 1px solid var(--nc-border); box-shadow: var(--nc-shadow-md); }
+
+                /* Placement */
+                .tip[data-placement="top"]    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); }
+                .tip[data-placement="bottom"] { top: calc(100% + 8px);    left: 50%; transform: translateX(-50%) translateY(-4px); }
+                .tip[data-placement="left"]   { right: calc(100% + 8px);  top: 50%;  transform: translateY(-50%) translateX(4px); }
+                .tip[data-placement="right"]  { left: calc(100% + 8px);   top: 50%;  transform: translateY(-50%) translateX(-4px); }
+
+                .tip.visible {
+                    opacity: 1;
+                }
+                .tip[data-placement="top"].visible    { transform: translateX(-50%) translateY(0); }
+                .tip[data-placement="bottom"].visible { transform: translateX(-50%) translateY(0); }
+                .tip[data-placement="left"].visible   { transform: translateY(-50%) translateX(0); }
+                .tip[data-placement="right"].visible  { transform: translateY(-50%) translateX(0); }
+
+                /* Arrow */
+                .tip::after {
+                    content: '';
+                    position: absolute;
+                    border: 5px solid transparent;
+                }
+                .tip--default[data-placement="top"]::after    { top: 100%;   left: 50%; transform: translateX(-50%); border-top-color: var(--nc-gray-900, #111); }
+                .tip--default[data-placement="bottom"]::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--nc-gray-900, #111); }
+                .tip--default[data-placement="left"]::after   { left: 100%;  top: 50%;  transform: translateY(-50%); border-left-color: var(--nc-gray-900, #111); }
+                .tip--default[data-placement="right"]::after  { right: 100%; top: 50%;  transform: translateY(-50%); border-right-color: var(--nc-gray-900, #111); }
+
+                .tip--light[data-placement="top"]::after { display: none; }
+
+                ::slotted(*) { display: inline-flex; }
+            </style>
+            <slot></slot>
+            <div
+                class="tip tip--${variant}"
+                data-placement="${placement}"
+                role="tooltip"
+                aria-hidden="true"
+            >${tip}</div>
+        `;
+    }
+    onMount() {
+        const tip = this.$('.tip');
+        const delay = Number(this.getAttribute('delay') ?? 200);
+        const show = () => {
+            if (this._showTimer)
+                clearTimeout(this._showTimer);
+            this._showTimer = setTimeout(() => {
+                tip.classList.add('visible');
+                tip.setAttribute('aria-hidden', 'false');
+                this._visible = true;
+            }, delay);
+        };
+        const hide = () => {
+            if (this._showTimer) {
+                clearTimeout(this._showTimer);
+                this._showTimer = null;
+            }
+            tip.classList.remove('visible');
+            tip.setAttribute('aria-hidden', 'true');
+            this._visible = false;
+        };
+        this.addEventListener('mouseenter', show);
+        this.addEventListener('mouseleave', hide);
+        this.addEventListener('focusin', show);
+        this.addEventListener('focusout', hide);
+        // Hide on Escape
+        this.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this._visible)
+                hide();
+        });
+    }
+    onUnmount() {
+        if (this._showTimer)
+            clearTimeout(this._showTimer);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+            this.onMount();
+        }
+    }
+}
+defineComponent('nc-tooltip', NcTooltip);

package/dist/core/component.d.ts

@@ -0,0 +1,33 @@
+export interface ComponentState {
+    [key: string]: any;
+}
+export interface ComponentConstructor {
+    useShadowDOM?: boolean;
+    observedAttributes?: string[];
+}
+export declare class Component extends HTMLElement {
+    state: ComponentState;
+    protected _mounted: boolean;
+    shadowRoot: ShadowRoot | null;
+    static useShadowDOM?: boolean;
+    static observedAttributes?: string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    setState(newState: Partial<ComponentState>): void;
+    getState(): ComponentState;
+    render(): void;
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    onAttributeChange(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    $<E extends Element = Element>(selector: string): E | null;
+    $$<E extends Element = Element>(selector: string): NodeListOf<E>;
+    on<K extends keyof HTMLElementEventMap>(event: K, handler: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any): void;
+    on<K extends keyof HTMLElementEventMap>(event: K, selector: string, handler: (this: Element, ev: HTMLElementEventMap[K]) => any): void;
+    emitEvent<T = any>(eventName: string, detail?: T, options?: Partial<CustomEventInit<T>>): boolean;
+    attr(name: string, defaultValue?: string | null): string | null;
+    setAttr(name: string, value: string): void;
+}
+export declare function defineComponent<T extends CustomElementConstructor>(tagName: string, componentClass: T): void;

package/dist/core/component.js

@@ -0,0 +1,208 @@
+export class Component extends HTMLElement {
+    state;
+    _mounted;
+    shadowRoot;
+    static useShadowDOM;
+    static observedAttributes;
+    constructor() {
+        super();
+        this.state = {};
+        this._mounted = false;
+        const constructor = this.constructor;
+        if (constructor.useShadowDOM) {
+            this.attachShadow({ mode: 'open' });
+        }
+    }
+    connectedCallback() {
+        try {
+            this.render();
+            this.onMount();
+            this._mounted = true;
+        }
+        catch (error) {
+            console.error(`Error rendering ${this.tagName.toLowerCase()}:`, error);
+        }
+    }
+    disconnectedCallback() {
+        this.onUnmount();
+        this._mounted = false;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted) {
+            this.onAttributeChange(name, oldValue, newValue);
+            this.render();
+        }
+    }
+    setState(newState) {
+        this.state = { ...this.state, ...newState };
+        if (this._mounted) {
+            this.render();
+        }
+    }
+    getState() {
+        return { ...this.state };
+    }
+    render() {
+        const html = this.template();
+        const target = this.shadowRoot ?? this;
+        patchHTML(target, html);
+    }
+    template() {
+        return '';
+    }
+    onMount() {
+    }
+    onUnmount() {
+    }
+    onAttributeChange(_name, _oldValue, _newValue) {
+    }
+    $(selector) {
+        return this.shadowRoot
+            ? this.shadowRoot.querySelector(selector)
+            : this.querySelector(selector);
+    }
+    $$(selector) {
+        return this.shadowRoot
+            ? this.shadowRoot.querySelectorAll(selector)
+            : this.querySelectorAll(selector);
+    }
+    on(event, selectorOrHandler, handler) {
+        if (typeof selectorOrHandler === 'function') {
+            this.addEventListener(event, selectorOrHandler);
+        }
+        else if (handler) {
+            this.addEventListener(event, ((e) => {
+                const target = e.target;
+                if (target.matches(selectorOrHandler)) {
+                    handler.call(target, e);
+                }
+            }));
+        }
+    }
+    emitEvent(eventName, detail = {}, options = {}) {
+        const event = new CustomEvent(eventName, {
+            detail,
+            bubbles: options.bubbles !== undefined ? options.bubbles : true,
+            composed: options.composed !== undefined ? options.composed : true,
+            cancelable: options.cancelable !== undefined ? options.cancelable : false
+        });
+        return this.dispatchEvent(event);
+    }
+    attr(name, defaultValue = null) {
+        return this.getAttribute(name) || defaultValue;
+    }
+    setAttr(name, value) {
+        this.setAttribute(name, value);
+    }
+}
+function patchHTML(target, html) {
+    const range = document.createRange();
+    range.selectNodeContents(target);
+    const fragment = range.createContextualFragment(html);
+    reconcileChildren(target, fragment);
+}
+function reconcileChildren(target, source) {
+    const currentNodes = Array.from(target.childNodes);
+    const nextNodes = Array.from(source.childNodes);
+    const maxLength = Math.max(currentNodes.length, nextNodes.length);
+    for (let index = 0; index < maxLength; index++) {
+        const currentNode = currentNodes[index];
+        const nextNode = nextNodes[index];
+        if (!currentNode && nextNode) {
+            target.appendChild(nextNode);
+            continue;
+        }
+        if (currentNode && !nextNode) {
+            currentNode.remove();
+            continue;
+        }
+        if (currentNode && nextNode) {
+            reconcileNode(currentNode, nextNode);
+        }
+    }
+}
+function reconcileNode(currentNode, nextNode) {
+    const parent = currentNode.parentNode;
+    if (!parent)
+        return;
+    if (!canPatchNode(currentNode, nextNode)) {
+        parent.replaceChild(nextNode, currentNode);
+        return;
+    }
+    if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE) {
+        if (currentNode.textContent !== nextNode.textContent) {
+            currentNode.textContent = nextNode.textContent;
+        }
+        return;
+    }
+    const currentElement = currentNode;
+    const nextElement = nextNode;
+    syncAttributes(currentElement, nextElement);
+    syncFormControlState(currentElement, nextElement);
+    reconcileChildren(currentElement, nextElement);
+}
+function canPatchNode(currentNode, nextNode) {
+    if (currentNode.nodeType !== nextNode.nodeType) {
+        return false;
+    }
+    if (currentNode.nodeType !== Node.ELEMENT_NODE) {
+        return true;
+    }
+    return currentNode.tagName === nextNode.tagName;
+}
+function syncAttributes(currentElement, nextElement) {
+    const currentAttributes = Array.from(currentElement.attributes);
+    const nextAttributes = Array.from(nextElement.attributes);
+    currentAttributes.forEach(attribute => {
+        if (!nextElement.hasAttribute(attribute.name)) {
+            currentElement.removeAttribute(attribute.name);
+        }
+    });
+    nextAttributes.forEach(attribute => {
+        if (currentElement.getAttribute(attribute.name) !== attribute.value) {
+            currentElement.setAttribute(attribute.name, attribute.value);
+        }
+    });
+}
+function syncFormControlState(currentElement, nextElement) {
+    if (currentElement instanceof HTMLInputElement && nextElement instanceof HTMLInputElement) {
+        syncInputElement(currentElement, nextElement);
+        return;
+    }
+    if (currentElement instanceof HTMLTextAreaElement && nextElement instanceof HTMLTextAreaElement) {
+        if (!isFocusedElement(currentElement) && currentElement.value !== nextElement.value) {
+            currentElement.value = nextElement.value;
+        }
+        return;
+    }
+    if (currentElement instanceof HTMLSelectElement && nextElement instanceof HTMLSelectElement) {
+        if (!isFocusedElement(currentElement) && currentElement.value !== nextElement.value) {
+            currentElement.value = nextElement.value;
+        }
+    }
+}
+function syncInputElement(currentElement, nextElement) {
+    if (currentElement.type === 'checkbox' || currentElement.type === 'radio') {
+        currentElement.checked = nextElement.checked;
+    }
+    if (!isFocusedElement(currentElement) && currentElement.value !== nextElement.value) {
+        currentElement.value = nextElement.value;
+    }
+}
+function isFocusedElement(element) {
+    const root = element.getRootNode();
+    if (root instanceof ShadowRoot) {
+        return root.activeElement === element;
+    }
+    return element.ownerDocument?.activeElement === element;
+}
+export function defineComponent(tagName, componentClass) {
+    try {
+        if (!customElements.get(tagName)) {
+            customElements.define(tagName, componentClass);
+        }
+    }
+    catch (error) {
+        console.error(`Error defining ${tagName}:`, error);
+    }
+}

package/dist/core/gpu-animation.d.ts

@@ -0,0 +1,141 @@
+/**
+ * GPU Animation Utilities
+ *
+ * High-performance animation primitives that leverage:
+ * - CSS transforms (GPU composited)
+ * - CSS custom properties for dynamic values
+ * - Web Animations API for smooth interpolation
+ * - RequestAnimationFrame with delta time
+ * - Passive event listeners
+ * - will-change optimization
+ * - contain property for layout isolation
+ *
+ * These utilities make NativeCore animations outperform other frameworks
+ * by maximizing GPU utilization and minimizing main thread work.
+ */
+export interface AnimationOptions {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+    fill?: FillMode;
+    iterations?: number;
+}
+export interface ParticleConfig {
+    count: number;
+    colors?: string[];
+    size?: {
+        min: number;
+        max: number;
+    };
+    speed?: {
+        min: number;
+        max: number;
+    };
+    type?: 'shower' | 'burst' | 'float' | 'spiral' | 'explode' | 'converge' | 'electricity' | 'fire' | 'ripple' | 'firework' | 'explosion';
+}
+export interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    size: number;
+    color: string;
+    alpha: number;
+    angle: number;
+    life: number;
+    maxLife: number;
+}
+/**
+ * Apply GPU-accelerated transform using translate3d
+ * translate3d forces GPU layer creation even for 2D transforms
+ */
+export declare function setGPUTransform(element: HTMLElement, x: number, y: number, z?: number, scale?: number, rotate?: number): void;
+/**
+ * Apply transform using CSS custom properties
+ * This allows CSS transitions to handle the animation on GPU
+ */
+export declare function setTransformVars(element: HTMLElement, vars: Record<string, string | number>): void;
+/**
+ * Prepare element for GPU animation with proper hints
+ */
+export declare function prepareForAnimation(element: HTMLElement, properties?: string[]): void;
+/**
+ * Clean up animation hints to free GPU memory
+ */
+export declare function cleanupAnimation(element: HTMLElement): void;
+/**
+ * Animate using Web Animations API (GPU accelerated)
+ * Returns a Promise that resolves when animation completes
+ */
+export declare function animate(element: HTMLElement, keyframes: Keyframe[], options?: AnimationOptions): Promise<void>;
+/**
+ * GPU-accelerated fade animation
+ */
+export declare function fadeIn(element: HTMLElement, duration?: number): Promise<void>;
+export declare function fadeOut(element: HTMLElement, duration?: number): Promise<void>;
+/**
+ * GPU-accelerated slide animation
+ */
+export declare function slideIn(element: HTMLElement, direction?: 'up' | 'down' | 'left' | 'right', distance?: number, duration?: number): Promise<void>;
+/**
+ * GPU-accelerated scale animation
+ */
+export declare function scaleIn(element: HTMLElement, duration?: number): Promise<void>;
+export interface AnimationLoop {
+    start: () => void;
+    stop: () => void;
+    isRunning: () => boolean;
+}
+/**
+ * Create a high-performance animation loop with delta time
+ * Automatically handles frame timing and cleanup
+ */
+export declare function createAnimationLoop(callback: (deltaTime: number, elapsed: number) => boolean | void): AnimationLoop;
+/**
+ * Create a WebGL-based particle system for thousands of particles
+ * Uses vertex shaders for GPU-computed positions
+ */
+export declare function createWebGLParticleSystem(canvas: HTMLCanvasElement, config: ParticleConfig): {
+    start: () => void;
+    stop: () => void;
+    destroy: () => void;
+} | null;
+/**
+ * Inject keyframe animation into document (once)
+ * These run entirely on GPU via compositor
+ */
+export declare function injectKeyframes(name: string, keyframes: string): void;
+/**
+ * Common GPU-accelerated keyframe animations
+ */
+export declare function injectCommonAnimations(): void;
+/**
+ * Add passive event listener for scroll/touch performance
+ */
+export declare function addPassiveListener(element: HTMLElement | Window, event: string, handler: EventListener): () => void;
+/**
+ * Throttle function for scroll/resize handlers
+ */
+export declare function throttle<T extends (...args: any[]) => void>(fn: T, limit: number): T;
+/**
+ * RAF-based throttle for smooth animations
+ */
+export declare function rafThrottle<T extends (...args: any[]) => void>(fn: T): T;
+export declare const GPUAnimation: {
+    setGPUTransform: typeof setGPUTransform;
+    setTransformVars: typeof setTransformVars;
+    prepareForAnimation: typeof prepareForAnimation;
+    cleanupAnimation: typeof cleanupAnimation;
+    animate: typeof animate;
+    fadeIn: typeof fadeIn;
+    fadeOut: typeof fadeOut;
+    slideIn: typeof slideIn;
+    scaleIn: typeof scaleIn;
+    createAnimationLoop: typeof createAnimationLoop;
+    createWebGLParticleSystem: typeof createWebGLParticleSystem;
+    injectKeyframes: typeof injectKeyframes;
+    injectCommonAnimations: typeof injectCommonAnimations;
+    addPassiveListener: typeof addPassiveListener;
+    throttle: typeof throttle;
+    rafThrottle: typeof rafThrottle;
+};