@ytspar/devbar 0.0.1 → 1.0.0-canary.2b99e1e

package/dist/outline.js

@@ -0,0 +1,248 @@
+/**
+ * Document Outline Extraction
+ *
+ * Functions for extracting and formatting the semantic document outline.
+ */
+// ============================================================================
+// Semantic Element Sets
+// ============================================================================
+const semanticElements = new Set([
+    'article',
+    'aside',
+    'nav',
+    'section',
+    'main',
+    'body',
+    'header',
+    'footer',
+    'figure',
+    'figcaption',
+    'details',
+    'summary',
+    'dialog',
+    'address',
+    'hgroup',
+    'form',
+    'fieldset',
+    'legend',
+    'ul',
+    'ol',
+    'dl',
+    'menu',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'caption',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+]);
+const headingElements = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Get the semantic category for an element tag
+ */
+function getSemanticCategory(tag) {
+    if (headingElements.has(tag))
+        return 'heading';
+    if (['article', 'section', 'aside', 'nav'].includes(tag))
+        return 'sectioning';
+    if (['main', 'header', 'footer'].includes(tag))
+        return 'landmark';
+    if (['figure', 'figcaption', 'details', 'summary'].includes(tag))
+        return 'grouping';
+    if (['form', 'fieldset', 'legend'].includes(tag))
+        return 'form';
+    if (['table', 'thead', 'tbody', 'tfoot', 'caption'].includes(tag))
+        return 'table';
+    if (['ul', 'ol', 'dl', 'menu'].includes(tag))
+        return 'list';
+    return 'other';
+}
+/**
+ * Get trimmed text content from an element with optional max length
+ */
+function getTextContent(el, maxLen) {
+    return el?.textContent?.trim().slice(0, maxLen) || '';
+}
+/**
+ * Mapping of tag names to their child element selector for text extraction
+ */
+const childTextSelectors = {
+    figure: 'figcaption',
+    details: 'summary',
+    fieldset: 'legend',
+    table: 'caption',
+};
+/**
+ * Get descriptive text for an element
+ */
+function getElementText(el, tagName) {
+    // Check ARIA attributes first
+    const ariaLabel = el.getAttribute('aria-label');
+    if (ariaLabel)
+        return ariaLabel;
+    const labelledBy = el.getAttribute('aria-labelledby');
+    if (labelledBy) {
+        const labelEl = document.getElementById(labelledBy);
+        if (labelEl)
+            return getTextContent(labelEl, 80);
+    }
+    // Headings: use direct text content
+    if (headingElements.has(tagName)) {
+        return getTextContent(el, 100);
+    }
+    // Elements with child selectors (figure, details, fieldset, table)
+    const childSelector = childTextSelectors[tagName];
+    if (childSelector) {
+        const childEl = el.querySelector(childSelector);
+        if (childEl)
+            return getTextContent(childEl, 80);
+    }
+    // Form: use name or id attribute
+    if (tagName === 'form') {
+        const name = el.getAttribute('name') || el.getAttribute('id');
+        if (name)
+            return name;
+    }
+    // Nav: try heading first, then first link
+    if (tagName === 'nav') {
+        const heading = el.querySelector('h1, h2, h3, h4, h5, h6');
+        if (heading)
+            return getTextContent(heading, 50);
+        const firstLink = el.querySelector('a');
+        if (firstLink)
+            return `Navigation (${getTextContent(firstLink, 30)}...)`;
+    }
+    // Sectioning elements: try direct child heading, then class name
+    if (['section', 'article', 'aside'].includes(tagName)) {
+        const heading = el.querySelector(':scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5, :scope > h6');
+        if (heading)
+            return getTextContent(heading, 80);
+        const className = el.className?.toString().split(' ')[0];
+        if (className && className.length < 30)
+            return className;
+    }
+    // Lists: count items
+    if (['ul', 'ol'].includes(tagName)) {
+        return `${el.querySelectorAll(':scope > li').length} items`;
+    }
+    if (tagName === 'dl') {
+        return `${el.querySelectorAll(':scope > dt').length} terms`;
+    }
+    // Fallback to role attribute
+    const role = el.getAttribute('role');
+    if (role)
+        return `[role="${role}"]`;
+    return '';
+}
+/**
+ * Check if an element is visible
+ */
+function isVisible(el) {
+    const style = window.getComputedStyle(el);
+    return style.display !== 'none' && style.visibility !== 'hidden';
+}
+/**
+ * Recursively extract outline nodes from an element
+ */
+function extractFromElement(root) {
+    const nodes = [];
+    for (const child of Array.from(root.children)) {
+        const tagName = child.tagName.toLowerCase();
+        if (!isVisible(child))
+            continue;
+        if (child.getAttribute('data-devbar'))
+            continue;
+        if (semanticElements.has(tagName)) {
+            const text = getElementText(child, tagName);
+            const isHeading = headingElements.has(tagName);
+            const isLandmark = [
+                'main',
+                'nav',
+                'header',
+                'footer',
+                'article',
+                'section',
+                'aside',
+            ].includes(tagName);
+            const hasText = text.length > 0;
+            if (isHeading || isLandmark || hasText) {
+                const level = isHeading ? parseInt(tagName[1], 10) : 0;
+                const node = {
+                    tagName,
+                    level,
+                    text: text || `<${tagName}>`,
+                    id: child.id || undefined,
+                    children: [],
+                    category: getSemanticCategory(tagName),
+                };
+                if (!isHeading) {
+                    node.children = extractFromElement(child);
+                }
+                nodes.push(node);
+            }
+            else {
+                const childNodes = extractFromElement(child);
+                nodes.push(...childNodes);
+            }
+        }
+        else {
+            const childNodes = extractFromElement(child);
+            nodes.push(...childNodes);
+        }
+    }
+    return nodes;
+}
+// ============================================================================
+// Public API
+// ============================================================================
+/**
+ * Extract the document outline from the page
+ */
+export function extractDocumentOutline() {
+    const body = document.body;
+    if (!body)
+        return [];
+    return extractFromElement(body);
+}
+/**
+ * Convert an outline to markdown format
+ */
+export function outlineToMarkdown(outline, indent = 0) {
+    let md = '';
+    if (indent === 0) {
+        md += '# Document Outline\n\n';
+        md += '**Semantic Categories:**\n';
+        md += '- `heading` - h1-h6 elements\n';
+        md += '- `sectioning` - article, section, aside, nav\n';
+        md += '- `landmark` - main, header, footer\n';
+        md += '- `grouping` - figure, details, summary\n';
+        md += '- `form` - form, fieldset\n';
+        md += '- `table` - table elements\n';
+        md += '- `list` - ul, ol, dl\n\n';
+        md += '---\n\n';
+    }
+    for (const node of outline) {
+        const prefix = '  '.repeat(indent);
+        const tagLabel = `\`<${node.tagName}>\``;
+        const anchor = node.id ? ` \`#${node.id}\`` : '';
+        const category = node.category ? ` [${node.category}]` : '';
+        if (node.category === 'heading' && indent === 0) {
+            md += `${'#'.repeat(node.level)} ${tagLabel} ${node.text}${anchor}\n\n`;
+        }
+        else {
+            md += `${prefix}- ${tagLabel}${category} ${node.text}${anchor}\n`;
+        }
+        if (node.children.length > 0) {
+            md += outlineToMarkdown(node.children, indent + 1);
+        }
+    }
+    return md;
+}

package/dist/presets.d.ts

@@ -0,0 +1,57 @@
+/**
+ * DevBar Configuration Presets
+ *
+ * Pre-configured options for common DevBar use cases.
+ */
+import { type GlobalDevBar } from './GlobalDevBar.js';
+import type { GlobalDevBarOptions } from './types.js';
+/**
+ * Minimal preset - shows only essential features
+ * Good for production debugging with minimal visual footprint
+ */
+export declare const PRESET_MINIMAL: GlobalDevBarOptions;
+/**
+ * Full preset - shows all features
+ * Good for comprehensive development monitoring
+ */
+export declare const PRESET_FULL: GlobalDevBarOptions;
+/**
+ * Performance preset - focuses on Core Web Vitals
+ * Good for performance optimization work
+ */
+export declare const PRESET_PERFORMANCE: GlobalDevBarOptions;
+/**
+ * Responsive preset - focuses on responsive design
+ * Good for layout and breakpoint work
+ */
+export declare const PRESET_RESPONSIVE: GlobalDevBarOptions;
+/**
+ * Debug preset - full features with debug logging
+ * Good for troubleshooting DevBar itself
+ */
+export declare const PRESET_DEBUG: GlobalDevBarOptions;
+/**
+ * Initialize DevBar with minimal preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initMinimal(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;
+/**
+ * Initialize DevBar with full preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initFull(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;
+/**
+ * Initialize DevBar with performance preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initPerformance(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;
+/**
+ * Initialize DevBar with responsive preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initResponsive(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;
+/**
+ * Initialize DevBar with debug preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initDebug(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;

package/dist/presets.js

@@ -0,0 +1,133 @@
+/**
+ * DevBar Configuration Presets
+ *
+ * Pre-configured options for common DevBar use cases.
+ */
+import { initGlobalDevBar } from './GlobalDevBar.js';
+// ============================================================================
+// Preset Configurations
+// ============================================================================
+/**
+ * Minimal preset - shows only essential features
+ * Good for production debugging with minimal visual footprint
+ */
+export const PRESET_MINIMAL = {
+    showMetrics: {
+        breakpoint: false,
+        fcp: false,
+        lcp: false,
+        cls: false,
+        inp: false,
+        pageSize: false,
+    },
+    showScreenshot: false,
+    showConsoleBadges: true,
+    showTooltips: false,
+};
+/**
+ * Full preset - shows all features
+ * Good for comprehensive development monitoring
+ */
+export const PRESET_FULL = {
+    showMetrics: {
+        breakpoint: true,
+        fcp: true,
+        lcp: true,
+        cls: true,
+        inp: true,
+        pageSize: true,
+    },
+    showScreenshot: true,
+    showConsoleBadges: true,
+    showTooltips: true,
+};
+/**
+ * Performance preset - focuses on Core Web Vitals
+ * Good for performance optimization work
+ */
+export const PRESET_PERFORMANCE = {
+    showMetrics: {
+        breakpoint: false,
+        fcp: true,
+        lcp: true,
+        cls: true,
+        inp: true,
+        pageSize: true,
+    },
+    showScreenshot: false,
+    showConsoleBadges: false,
+    showTooltips: true,
+};
+/**
+ * Responsive preset - focuses on responsive design
+ * Good for layout and breakpoint work
+ */
+export const PRESET_RESPONSIVE = {
+    showMetrics: {
+        breakpoint: true,
+        fcp: false,
+        lcp: false,
+        cls: false,
+        inp: false,
+        pageSize: false,
+    },
+    showScreenshot: true,
+    showConsoleBadges: false,
+    showTooltips: true,
+};
+/**
+ * Debug preset - full features with debug logging
+ * Good for troubleshooting DevBar itself
+ */
+export const PRESET_DEBUG = {
+    showMetrics: {
+        breakpoint: true,
+        fcp: true,
+        lcp: true,
+        cls: true,
+        inp: true,
+        pageSize: true,
+    },
+    showScreenshot: true,
+    showConsoleBadges: true,
+    showTooltips: true,
+    debug: true,
+};
+// ============================================================================
+// Convenience Initialization Functions
+// ============================================================================
+/**
+ * Initialize DevBar with minimal preset
+ * @param options Additional options to merge with preset
+ */
+export function initMinimal(options) {
+    return initGlobalDevBar({ ...PRESET_MINIMAL, ...options });
+}
+/**
+ * Initialize DevBar with full preset
+ * @param options Additional options to merge with preset
+ */
+export function initFull(options) {
+    return initGlobalDevBar({ ...PRESET_FULL, ...options });
+}
+/**
+ * Initialize DevBar with performance preset
+ * @param options Additional options to merge with preset
+ */
+export function initPerformance(options) {
+    return initGlobalDevBar({ ...PRESET_PERFORMANCE, ...options });
+}
+/**
+ * Initialize DevBar with responsive preset
+ * @param options Additional options to merge with preset
+ */
+export function initResponsive(options) {
+    return initGlobalDevBar({ ...PRESET_RESPONSIVE, ...options });
+}
+/**
+ * Initialize DevBar with debug preset
+ * @param options Additional options to merge with preset
+ */
+export function initDebug(options) {
+    return initGlobalDevBar({ ...PRESET_DEBUG, ...options });
+}

package/dist/schema.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Page Schema Extraction
+ *
+ * Functions for extracting and formatting structured data from pages.
+ */
+import type { PageSchema } from './types.js';
+/**
+ * Extract structured data (JSON-LD, meta tags, Open Graph, etc.) from the page
+ */
+export declare function extractPageSchema(): PageSchema;
+/**
+ * Convert a page schema to markdown format
+ */
+export declare function schemaToMarkdown(schema: PageSchema): string;

package/dist/schema.js

@@ -0,0 +1,114 @@
+/**
+ * Page Schema Extraction
+ *
+ * Functions for extracting and formatting structured data from pages.
+ */
+// ============================================================================
+// Public API
+// ============================================================================
+/**
+ * Extract structured data (JSON-LD, meta tags, Open Graph, etc.) from the page
+ */
+export function extractPageSchema() {
+    const schema = {
+        jsonLd: [],
+        metaTags: {},
+        openGraph: {},
+        twitter: {},
+        microdata: [],
+    };
+    // Extract JSON-LD
+    const jsonLdScripts = document.querySelectorAll('script[type="application/ld+json"]');
+    jsonLdScripts.forEach((script) => {
+        try {
+            const data = JSON.parse(script.textContent || '');
+            schema.jsonLd.push(data);
+        }
+        catch {
+            // Invalid JSON-LD, skip
+        }
+    });
+    // Extract meta tags
+    const metaTags = document.querySelectorAll('meta[name], meta[property]');
+    metaTags.forEach((meta) => {
+        const name = meta.getAttribute('name') || meta.getAttribute('property') || '';
+        const content = meta.getAttribute('content') || '';
+        if (name.startsWith('og:')) {
+            schema.openGraph[name.replace('og:', '')] = content;
+        }
+        else if (name.startsWith('twitter:')) {
+            schema.twitter[name.replace('twitter:', '')] = content;
+        }
+        else if (name) {
+            schema.metaTags[name] = content;
+        }
+    });
+    // Extract microdata
+    const microdataItems = document.querySelectorAll('[itemscope]');
+    microdataItems.forEach((item) => {
+        const itemType = item.getAttribute('itemtype');
+        const props = {};
+        item.querySelectorAll('[itemprop]').forEach((prop) => {
+            const propName = prop.getAttribute('itemprop') || '';
+            const propValue = prop.getAttribute('content') ||
+                prop.getAttribute('href') ||
+                prop.textContent?.trim().slice(0, 200) ||
+                '';
+            if (propName)
+                props[propName] = propValue;
+        });
+        if (itemType || Object.keys(props).length > 0) {
+            schema.microdata.push({ type: itemType, properties: props });
+        }
+    });
+    return schema;
+}
+/**
+ * Convert a page schema to markdown format
+ */
+export function schemaToMarkdown(schema) {
+    let md = '';
+    if (schema.jsonLd.length > 0) {
+        md += '## JSON-LD\n\n';
+        schema.jsonLd.forEach((item, i) => {
+            md += `### Schema ${i + 1}\n\n`;
+            md += `\`\`\`json\n${JSON.stringify(item, null, 2)}\n\`\`\`\n\n`;
+        });
+    }
+    if (Object.keys(schema.openGraph).length > 0) {
+        md += '## Open Graph\n\n';
+        for (const [key, value] of Object.entries(schema.openGraph)) {
+            md += `- **${key}**: ${value}\n`;
+        }
+        md += '\n';
+    }
+    if (Object.keys(schema.twitter).length > 0) {
+        md += '## Twitter Cards\n\n';
+        for (const [key, value] of Object.entries(schema.twitter)) {
+            md += `- **${key}**: ${value}\n`;
+        }
+        md += '\n';
+    }
+    if (Object.keys(schema.metaTags).length > 0) {
+        md += '## Meta Tags\n\n';
+        for (const [key, value] of Object.entries(schema.metaTags)) {
+            md += `- **${key}**: ${value}\n`;
+        }
+        md += '\n';
+    }
+    if (schema.microdata.length > 0) {
+        md += '## Microdata\n\n';
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        schema.microdata.forEach((item, i) => {
+            md += `### Item ${i + 1}${item.type ? ` (${item.type})` : ''}\n\n`;
+            for (const [key, value] of Object.entries(item.properties || {})) {
+                md += `- **${key}**: ${value}\n`;
+            }
+            md += '\n';
+        });
+    }
+    if (!md) {
+        md = '_No structured data found on this page_\n';
+    }
+    return md;
+}