dynim-core 1.0.0

package/dist/builder/bundle-manager.js

@@ -0,0 +1,357 @@
+/**
+ * Bundle Manager - Handles loading and swapping React bundles with smooth crossfade transitions
+ *
+ * Uses dual containers to enable seamless bundle swapping:
+ * 1. Load new bundle into inactive container (hidden)
+ * 2. Wait for React to mount
+ * 3. Crossfade from active to new container
+ * 4. Cleanup old container
+ *
+ * This prevents any flash or blank screen during bundle updates.
+ */
+/**
+ * Create a bundle manager instance
+ */
+export function createBundleManager(config) {
+    const { parent, transitionDuration = 300, mountTimeout = 5000, onLoadStart, onLoadComplete, onError, onUnload, } = config;
+    // Create wrapper and containers
+    const wrapper = document.createElement('div');
+    wrapper.className = 'dynim-preview-wrapper';
+    wrapper.style.cssText = `
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  `;
+    const containerA = createContainer('dynim-preview-a');
+    const containerB = createContainer('dynim-preview-b');
+    // B starts hidden
+    containerB.style.opacity = '0';
+    containerB.style.pointerEvents = 'none';
+    wrapper.appendChild(containerA);
+    wrapper.appendChild(containerB);
+    parent.appendChild(wrapper);
+    // State
+    let activeContainer = 'a';
+    let loading = false;
+    let loaded = false;
+    let currentBundleUrl = null;
+    // Track cleanup functions per container (NOT global!)
+    const containerCleanup = new Map();
+    function createContainer(id) {
+        const container = document.createElement('div');
+        container.id = id;
+        container.className = 'dynim-preview-container';
+        container.style.cssText = `
+      position: absolute;
+      inset: 0;
+      transition: opacity ${transitionDuration}ms ease;
+      overflow: auto;
+    `;
+        return container;
+    }
+    function getActive() {
+        return activeContainer === 'a' ? containerA : containerB;
+    }
+    function getInactive() {
+        return activeContainer === 'a' ? containerB : containerA;
+    }
+    /**
+     * Cleanup a container - call bundle cleanup and clear DOM
+     */
+    function cleanupContainer(container) {
+        // Call THIS container's cleanup function (not the global one!)
+        const cleanup = containerCleanup.get(container);
+        if (typeof cleanup === 'function') {
+            try {
+                cleanup();
+            }
+            catch (e) {
+                console.warn('[BundleManager] Cleanup error:', e);
+            }
+            containerCleanup.delete(container);
+        }
+        // Remove any bundle scripts from this container
+        container.querySelectorAll('script[data-dynim-bundle]').forEach(s => s.remove());
+        // Remove any styles injected by bundles (these are document-level)
+        document.querySelectorAll('style[data-dynim-bundle-styles]').forEach(s => s.remove());
+        // Clear container
+        container.innerHTML = '';
+    }
+    /**
+     * Preload bundle code (fetch without executing)
+     */
+    async function preloadBundle(url) {
+        const response = await fetch(url, {
+            credentials: 'include',
+            headers: {
+                'Accept': 'application/javascript',
+            },
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to fetch bundle: ${response.status} ${response.statusText}`);
+        }
+        return response.text();
+    }
+    /**
+     * Execute bundle code in a container
+     */
+    function executeBundle(container, code) {
+        return new Promise((resolve, reject) => {
+            // Create root element for React
+            const root = document.createElement('div');
+            root.id = 'root';
+            container.appendChild(root);
+            // Set up mount detection
+            let resolved = false;
+            const timeout = setTimeout(() => {
+                if (!resolved) {
+                    resolved = true;
+                    console.warn('[BundleManager] Mount timeout - assuming bundle mounted');
+                    // Capture cleanup function for THIS container
+                    captureCleanup(container);
+                    resolve();
+                }
+            }, mountTimeout);
+            // Bundle can signal when mounted
+            const bw = window;
+            bw.__BUNDLE_MOUNTED__ = () => {
+                if (!resolved) {
+                    resolved = true;
+                    clearTimeout(timeout);
+                    delete bw.__BUNDLE_MOUNTED__;
+                    // Capture cleanup function for THIS container
+                    captureCleanup(container);
+                    resolve();
+                }
+            };
+            // Create and execute script
+            const script = document.createElement('script');
+            script.setAttribute('data-dynim-bundle', 'true');
+            script.textContent = code;
+            script.onerror = (e) => {
+                if (!resolved) {
+                    resolved = true;
+                    clearTimeout(timeout);
+                    reject(new Error('Script execution failed'));
+                }
+            };
+            container.appendChild(script);
+        });
+    }
+    /**
+     * Capture the global cleanup function and store it for a specific container
+     */
+    function captureCleanup(container) {
+        // Store the global cleanup for this specific container
+        const bw = window;
+        if (typeof bw.__BUNDLE_CLEANUP__ === 'function') {
+            containerCleanup.set(container, bw.__BUNDLE_CLEANUP__);
+            // Clear global to prevent accidental calls
+            delete bw.__BUNDLE_CLEANUP__;
+        }
+    }
+    /**
+     * Crossfade from active to inactive container
+     */
+    function crossfade() {
+        return new Promise((resolve) => {
+            const current = getActive();
+            const next = getInactive();
+            // Start transition
+            next.style.opacity = '1';
+            next.style.pointerEvents = 'auto';
+            current.style.opacity = '0';
+            current.style.pointerEvents = 'none';
+            // Wait for transition
+            setTimeout(() => {
+                // Swap active
+                activeContainer = activeContainer === 'a' ? 'b' : 'a';
+                // Cleanup old container (now inactive)
+                cleanupContainer(current);
+                resolve();
+            }, transitionDuration);
+        });
+    }
+    /**
+     * Load a bundle with crossfade
+     */
+    async function load(bundleUrl) {
+        if (loading) {
+            console.warn('[BundleManager] Already loading, ignoring request');
+            return;
+        }
+        // Skip if same bundle already loaded
+        if (bundleUrl === currentBundleUrl && loaded) {
+            console.log('[BundleManager] Same bundle already loaded, skipping');
+            return;
+        }
+        loading = true;
+        onLoadStart?.(bundleUrl);
+        try {
+            // 1. Preload bundle code
+            console.log('[BundleManager] Preloading:', bundleUrl);
+            const code = await preloadBundle(bundleUrl);
+            // 2. Prepare inactive container
+            const inactive = getInactive();
+            cleanupContainer(inactive);
+            // 3. Execute bundle in inactive container
+            console.log('[BundleManager] Executing bundle');
+            await executeBundle(inactive, code);
+            // 4. Crossfade to new container
+            console.log('[BundleManager] Crossfading');
+            await crossfade();
+            // 5. Update state
+            currentBundleUrl = bundleUrl;
+            loaded = true;
+            console.log('[BundleManager] Load complete');
+            onLoadComplete?.(bundleUrl);
+        }
+        catch (error) {
+            console.error('[BundleManager] Load failed:', error);
+            onError?.(error, bundleUrl);
+            // Cleanup failed attempt
+            const inactive = getInactive();
+            cleanupContainer(inactive);
+            inactive.style.opacity = '0';
+            inactive.style.pointerEvents = 'none';
+            throw error;
+        }
+        finally {
+            loading = false;
+        }
+    }
+    /**
+     * Apply inline styles to an element
+     */
+    function applyStyles(selector, styles) {
+        const el = getActive().querySelector(selector);
+        if (el) {
+            Object.assign(el.style, styles);
+        }
+        else {
+            console.warn(`[BundleManager] Element not found: ${selector}`);
+        }
+    }
+    /**
+     * Replace className on an element
+     */
+    function applyClassName(selector, className) {
+        const el = getActive().querySelector(selector);
+        if (el) {
+            el.className = className;
+        }
+        else {
+            console.warn(`[BundleManager] Element not found: ${selector}`);
+        }
+    }
+    /**
+     * Add/remove CSS classes (useful for Tailwind)
+     */
+    function toggleClasses(selector, add, remove) {
+        const el = getActive().querySelector(selector);
+        if (el) {
+            remove.forEach(cls => {
+                if (cls)
+                    el.classList.remove(cls);
+            });
+            add.forEach(cls => {
+                if (cls)
+                    el.classList.add(cls);
+            });
+        }
+        else {
+            console.warn(`[BundleManager] Element not found: ${selector}`);
+        }
+    }
+    /**
+     * Query an element in the active container
+     */
+    function querySelector(selector) {
+        return getActive().querySelector(selector);
+    }
+    /**
+     * Query all elements in the active container
+     */
+    function querySelectorAll(selector) {
+        return getActive().querySelectorAll(selector);
+    }
+    /**
+     * Get the active container
+     */
+    function getActiveContainer() {
+        return getActive();
+    }
+    /**
+     * Get the root element of the active container
+     */
+    function getActiveRoot() {
+        return getActive().querySelector('#root');
+    }
+    /**
+     * Check if a bundle is loaded
+     */
+    function isLoaded() {
+        return loaded;
+    }
+    /**
+     * Check if currently loading
+     */
+    function isLoading() {
+        return loading;
+    }
+    /**
+     * Get current bundle URL
+     */
+    function getCurrentBundleUrl() {
+        return currentBundleUrl;
+    }
+    /**
+     * Unload current bundle
+     */
+    function unload() {
+        cleanupContainer(containerA);
+        cleanupContainer(containerB);
+        // Reset state
+        containerA.style.opacity = '1';
+        containerA.style.pointerEvents = 'auto';
+        containerB.style.opacity = '0';
+        containerB.style.pointerEvents = 'none';
+        activeContainer = 'a';
+        loaded = false;
+        currentBundleUrl = null;
+        onUnload?.();
+    }
+    /**
+     * Destroy the bundle manager
+     */
+    function destroy() {
+        unload();
+        wrapper.remove();
+    }
+    // Expose for debugging
+    if (typeof window !== 'undefined') {
+        window.__bundleManager = {
+            getActive,
+            getInactive,
+            isLoaded,
+            isLoading,
+            getCurrentBundleUrl,
+        };
+    }
+    return {
+        load,
+        applyStyles,
+        applyClassName,
+        toggleClasses,
+        querySelector,
+        querySelectorAll,
+        getActiveContainer,
+        getActiveRoot,
+        isLoaded,
+        isLoading,
+        getCurrentBundleUrl,
+        unload,
+        destroy,
+    };
+}

package/dist/builder/classifier/classname-analyzer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Class name analyzer - analyzes CSS class names for component patterns
+ */
+import type { Signal, ClassifierInput } from './semantic-analyzer';
+export declare function analyzeClassNames(input: ClassifierInput): Signal[];
+//# sourceMappingURL=classname-analyzer.d.ts.map

package/dist/builder/classifier/classname-analyzer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classname-analyzer.d.ts","sourceRoot":"","sources":["../../../src/builder/classifier/classname-analyzer.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAqEnE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,EAAE,CA4ClE"}

package/dist/builder/classifier/classname-analyzer.js

@@ -0,0 +1,107 @@
+/**
+ * Class name analyzer - analyzes CSS class names for component patterns
+ */
+const BEM_BLOCK_PATTERN = /^([a-z][a-z0-9]*(-[a-z0-9]+)*)$/i;
+const COMPONENT_PATTERNS = [
+    { pattern: /\bcard\b/i, indicator: 'card-class', weight: 0.8 },
+    { pattern: /\bpanel\b/i, indicator: 'card-class', weight: 0.6 },
+    { pattern: /\bbox\b/i, indicator: 'card-class', weight: 0.4 },
+    { pattern: /\btile\b/i, indicator: 'card-class', weight: 0.5 },
+    { pattern: /\bnav(bar|igation)?\b/i, indicator: 'nav-class', weight: 0.85 },
+    { pattern: /\bmenu\b/i, indicator: 'nav-class', weight: 0.6 },
+    { pattern: /\bbreadcrumb/i, indicator: 'nav-class', weight: 0.7 },
+    { pattern: /\btabs?\b/i, indicator: 'nav-class', weight: 0.6 },
+    { pattern: /\bbtn\b/i, indicator: 'btn-class', weight: 0.9 },
+    { pattern: /\bbutton\b/i, indicator: 'btn-class', weight: 0.85 },
+    { pattern: /\bcta\b/i, indicator: 'btn-class', weight: 0.7 },
+    { pattern: /\bmodal\b/i, indicator: 'modal-class', weight: 0.9 },
+    { pattern: /\bdialog\b/i, indicator: 'modal-class', weight: 0.85 },
+    { pattern: /\bpopup\b/i, indicator: 'modal-class', weight: 0.7 },
+    { pattern: /\boverlay\b/i, indicator: 'overlay-class', weight: 0.5 },
+    { pattern: /\bdropdown\b/i, indicator: 'dropdown-class', weight: 0.75 },
+    { pattern: /\bsidebar\b/i, indicator: 'sidebar-class', weight: 0.9 },
+    { pattern: /\bside-nav/i, indicator: 'sidebar-class', weight: 0.85 },
+    { pattern: /\bdrawer\b/i, indicator: 'sidebar-class', weight: 0.7 },
+    { pattern: /\bheader\b/i, indicator: 'header-class', weight: 0.7 },
+    { pattern: /\bfooter\b/i, indicator: 'footer-class', weight: 0.7 },
+    { pattern: /\bhero\b/i, indicator: 'hero-class', weight: 0.75 },
+    { pattern: /\bbanner\b/i, indicator: 'banner-class', weight: 0.65 },
+    { pattern: /\bform(-group|-control|-field)?\b/i, indicator: 'form-class', weight: 0.7 },
+    { pattern: /\binput(-group|-wrapper)?\b/i, indicator: 'input-class', weight: 0.6 },
+    { pattern: /\bfield\b/i, indicator: 'form-class', weight: 0.5 },
+    { pattern: /\blist(-item|-group)?\b/i, indicator: 'list-class', weight: 0.6 },
+    { pattern: /\bgrid\b/i, indicator: 'grid-class', weight: 0.5 },
+    { pattern: /\brow\b/i, indicator: 'grid-class', weight: 0.4 },
+    { pattern: /\bcol(umn)?(-\d+)?\b/i, indicator: 'grid-class', weight: 0.4 },
+    { pattern: /\bcontainer\b/i, indicator: 'container-class', weight: 0.5 },
+    { pattern: /\bwrapper\b/i, indicator: 'container-class', weight: 0.4 },
+    { pattern: /\blayout\b/i, indicator: 'container-class', weight: 0.5 },
+    { pattern: /\bsection\b/i, indicator: 'section-class', weight: 0.5 },
+    { pattern: /\bavatar\b/i, indicator: 'avatar-class', weight: 0.8 },
+    { pattern: /\bbadge\b/i, indicator: 'badge-class', weight: 0.75 },
+    { pattern: /\bchip\b/i, indicator: 'badge-class', weight: 0.7 },
+    { pattern: /\btag\b/i, indicator: 'badge-class', weight: 0.6 },
+    { pattern: /\balert\b/i, indicator: 'alert-class', weight: 0.8 },
+    { pattern: /\btoast\b/i, indicator: 'toast-class', weight: 0.8 },
+    { pattern: /\bnotification\b/i, indicator: 'alert-class', weight: 0.75 },
+    { pattern: /\bspinner\b/i, indicator: 'spinner-class', weight: 0.8 },
+    { pattern: /\bloading\b/i, indicator: 'spinner-class', weight: 0.6 },
+    { pattern: /\bskeleton\b/i, indicator: 'skeleton-class', weight: 0.75 },
+    { pattern: /\bicon\b/i, indicator: 'icon-class', weight: 0.7 },
+    { pattern: /\bfa-/i, indicator: 'icon-class', weight: 0.8 },
+    { pattern: /\bmaterial-icons\b/i, indicator: 'icon-class', weight: 0.8 }
+];
+const TAILWIND_PATTERNS = [
+    { pattern: /\bflex\b/, indicator: 'flex-display', weight: 0.3 },
+    { pattern: /\binline-flex\b/, indicator: 'flex-display', weight: 0.25 },
+    { pattern: /\bgrid\b/, indicator: 'grid-display', weight: 0.3 },
+    { pattern: /\brounded(-\w+)?\b/, indicator: 'has-border-radius-tw', weight: 0.2 },
+    { pattern: /\bshadow(-\w+)?\b/, indicator: 'has-shadow-tw', weight: 0.3 },
+    { pattern: /\bbg-\w+/, indicator: 'has-background-tw', weight: 0.2 },
+    { pattern: /\bp-\d+|\bpx-\d+|\bpy-\d+|\bpt-\d+|\bpb-\d+|\bpl-\d+|\bpr-\d+/, indicator: 'has-padding-tw', weight: 0.15 },
+    { pattern: /\bborder\b|\bborder-\w+/, indicator: 'has-border-tw', weight: 0.15 },
+    { pattern: /\boverflow-hidden\b/, indicator: 'overflow-hidden-tw', weight: 0.1 },
+    { pattern: /\brelative\b/, indicator: 'relative-position-tw', weight: 0.1 },
+    { pattern: /\babsolute\b/, indicator: 'absolute-position-tw', weight: 0.2 },
+    { pattern: /\bfixed\b/, indicator: 'fixed-position-tw', weight: 0.3 }
+];
+export function analyzeClassNames(input) {
+    const signals = [];
+    const classes = (input.className || '').split(/\s+/).filter(Boolean);
+    for (const className of classes) {
+        for (const { pattern, indicator, weight } of COMPONENT_PATTERNS) {
+            if (pattern.test(className)) {
+                signals.push({
+                    source: 'className',
+                    indicator,
+                    weight
+                });
+            }
+        }
+        for (const { pattern, indicator, weight } of TAILWIND_PATTERNS) {
+            if (pattern.test(className)) {
+                signals.push({
+                    source: 'className',
+                    indicator,
+                    weight
+                });
+            }
+        }
+        if (BEM_BLOCK_PATTERN.test(className) && className.length > 3 && !className.startsWith('is-') && !className.startsWith('has-')) {
+            const weight = Math.min(0.3 + (className.length - 3) * 0.03, 0.5);
+            signals.push({
+                source: 'className',
+                indicator: 'bem-block',
+                weight
+            });
+        }
+    }
+    const uniqueSignals = new Map();
+    for (const signal of signals) {
+        const existing = uniqueSignals.get(signal.indicator);
+        if (!existing || existing.weight < signal.weight) {
+            uniqueSignals.set(signal.indicator, signal);
+        }
+    }
+    return Array.from(uniqueSignals.values());
+}

package/dist/builder/classifier/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Element classifier - combines all analyzers to classify DOM elements
+ */
+import { type Signal, type ClassifierInput } from './semantic-analyzer';
+import { setViewportSize } from './size-analyzer';
+export type { Signal, ClassifierInput };
+export interface Classification {
+    type: string;
+    confidence: number;
+    signals: Signal[];
+    isComponentBoundary: boolean;
+    suggestedName: string;
+}
+export interface Classifier {
+    setViewportSize: (width: number, height: number) => void;
+    classify: (input: ClassifierInput) => Classification;
+}
+export declare function createClassifier(): Classifier;
+export { setViewportSize };
+//# sourceMappingURL=index.d.ts.map

package/dist/builder/classifier/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/builder/classifier/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAoB,KAAK,MAAM,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG1F,OAAO,EAAe,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE/D,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,cAAc,CAAC;CACtD;AAqFD,wBAAgB,gBAAgB,IAAI,UAAU,CAK7C;AAuHD,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/builder/classifier/index.js

@@ -0,0 +1,181 @@
+/**
+ * Element classifier - combines all analyzers to classify DOM elements
+ */
+import { analyzeSemantics } from './semantic-analyzer';
+import { analyzeClassNames } from './classname-analyzer';
+import { analyzeVisual } from './visual-analyzer';
+import { analyzeSize, setViewportSize } from './size-analyzer';
+const COMPONENT_TYPES = [
+    'container', 'navigation', 'header', 'footer', 'article', 'card',
+    'button', 'form', 'input', 'list', 'list-item', 'image', 'text',
+    'link', 'modal', 'sidebar', 'grid', 'flex-container', 'unknown'
+];
+const SIGNAL_TYPE_MAP = {
+    'nav-tag': ['navigation'],
+    'nav-role': ['navigation'],
+    'header-tag': ['header'],
+    'header-role': ['header'],
+    'footer-tag': ['footer'],
+    'footer-role': ['footer'],
+    'article-tag': ['article'],
+    'section-tag': ['container'],
+    'container-tag': ['container'],
+    'button-tag': ['button'],
+    'button-role': ['button'],
+    'form-tag': ['form'],
+    'input-tag': ['input'],
+    'list-tag': ['list'],
+    'list-item-tag': ['list-item'],
+    'img-tag': ['image'],
+    'media-tag': ['image'],
+    'svg-tag': ['image'],
+    'link-tag': ['link'],
+    'text-tag': ['text'],
+    'heading-tag': ['text'],
+    'modal-tag': ['modal'],
+    'modal-role': ['modal'],
+    'sidebar-tag': ['sidebar'],
+    'card-class': ['card'],
+    'nav-class': ['navigation'],
+    'btn-class': ['button'],
+    'modal-class': ['modal'],
+    'sidebar-class': ['sidebar'],
+    'header-class': ['header'],
+    'footer-class': ['footer'],
+    'hero-class': ['header', 'container'],
+    'banner-class': ['header'],
+    'form-class': ['form'],
+    'input-class': ['input'],
+    'list-class': ['list'],
+    'grid-class': ['grid'],
+    'container-class': ['container'],
+    'section-class': ['container'],
+    'avatar-class': ['image'],
+    'badge-class': ['text'],
+    'alert-class': ['container'],
+    'toast-class': ['modal'],
+    'dropdown-class': ['modal', 'navigation'],
+    'icon-class': ['image'],
+    'overlay-class': ['modal'],
+    'flex-display': ['flex-container'],
+    'grid-display': ['grid'],
+    'has-shadow': ['card', 'modal', 'button'],
+    'has-border-radius': ['card', 'button'],
+    'has-border': ['card', 'input', 'container'],
+    'has-distinct-background': ['card', 'container', 'button'],
+    'has-significant-padding': ['container', 'card'],
+    'fixed-position': ['modal', 'navigation', 'header'],
+    'sticky-position': ['header', 'navigation'],
+    'high-z-index': ['modal'],
+    'pointer-cursor': ['button', 'link'],
+    'scrollable': ['container', 'list'],
+    'button-size': ['button'],
+    'icon-size': ['image'],
+    'avatar-size': ['image'],
+    'card-size': ['card'],
+    'banner-size': ['header', 'container'],
+    'full-width': ['container', 'header', 'footer'],
+    'sidebar-size': ['sidebar'],
+    'header-footer-size': ['header', 'footer'],
+    'modal-size': ['modal'],
+    'container-size': ['container'],
+    'input-size': ['input'],
+    'inline-size': ['text', 'link']
+};
+const STRONG_BOUNDARY_TYPES = [
+    'navigation', 'header', 'footer', 'card', 'modal', 'sidebar', 'article', 'form', 'button'
+];
+export function createClassifier() {
+    return {
+        setViewportSize,
+        classify
+    };
+}
+function classify(input) {
+    const signals = [];
+    const semanticSignals = analyzeSemantics(input);
+    const classNameSignals = analyzeClassNames(input);
+    const visualSignals = analyzeVisual(input);
+    const sizeSignals = analyzeSize(input);
+    signals.push(...semanticSignals, ...classNameSignals, ...visualSignals, ...sizeSignals);
+    const typeScores = calculateTypeScores(signals);
+    let bestType = 'unknown';
+    let bestScore = 0;
+    for (const [type, score] of Object.entries(typeScores)) {
+        if (score > bestScore) {
+            bestScore = score;
+            bestType = type;
+        }
+    }
+    const totalPositiveWeight = signals.filter(s => s.weight > 0).reduce((sum, s) => sum + s.weight, 0);
+    const confidence = totalPositiveWeight > 0 ? Math.min(bestScore / Math.max(totalPositiveWeight, 1), 1) : 0;
+    const isComponentBoundary = checkIsComponentBoundary(input, signals, bestType, bestScore);
+    const suggestedName = generateSuggestedName(input, bestType);
+    return {
+        type: bestType,
+        confidence,
+        signals,
+        isComponentBoundary,
+        suggestedName
+    };
+}
+function calculateTypeScores(signals) {
+    const scores = {};
+    for (const type of COMPONENT_TYPES) {
+        scores[type] = 0;
+    }
+    for (const signal of signals) {
+        const types = SIGNAL_TYPE_MAP[signal.indicator];
+        if (types) {
+            for (const type of types) {
+                scores[type] += signal.weight;
+            }
+        }
+    }
+    return scores;
+}
+function checkIsComponentBoundary(input, signals, type, score) {
+    if (STRONG_BOUNDARY_TYPES.includes(type) && score > 0.5) {
+        return true;
+    }
+    const hasVisualIsolation = signals.some(s => s.source === 'visual' &&
+        ['has-shadow', 'has-distinct-background', 'has-border'].includes(s.indicator) &&
+        s.weight > 0.2);
+    const hasSpacing = signals.some(s => s.source === 'visual' &&
+        s.indicator === 'has-significant-padding' &&
+        s.weight > 0.2);
+    const hasComponentClass = signals.some(s => s.source === 'className' && s.weight >= 0.5);
+    const hasSemanticSignificance = signals.some(s => s.source === 'semantic' && s.weight >= 0.6);
+    const strongSignalCount = [hasVisualIsolation, hasSpacing, hasComponentClass, hasSemanticSignificance].filter(Boolean).length;
+    return strongSignalCount >= 2 || (strongSignalCount >= 1 && score > 0.6);
+}
+function generateSuggestedName(input, type) {
+    if (input.id) {
+        return formatName(input.id);
+    }
+    const classes = (input.className || '').split(/\s+/).filter(Boolean);
+    const meaningfulClass = classes.find(c => {
+        if (/^(flex|grid|p-|m-|w-|h-|bg-|text-|border-|rounded-|shadow-|overflow-|relative|absolute|fixed|hidden|block|inline)/.test(c)) {
+            return false;
+        }
+        if (c.includes('--') || c.startsWith('is-') || c.startsWith('has-')) {
+            return false;
+        }
+        return c.length > 2 && c.length < 30;
+    });
+    if (meaningfulClass) {
+        return formatName(meaningfulClass.split('__')[0]);
+    }
+    const typeName = type === 'unknown' ? '' : `${type} `;
+    return `${typeName}${input.tagName.toLowerCase()}`.trim();
+}
+function formatName(name) {
+    return name
+        .replace(/[-_]/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ')
+        .trim();
+}
+export { setViewportSize };