@ytspar/devbar 0.0.1 → 1.0.0-canary.e1f65d0

package/dist/outline.js

@@ -0,0 +1,215 @@
+/**
+ * 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/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,113 @@
+/**
+ * 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;
+}

package/dist/types.d.ts

@@ -0,0 +1,50 @@
+/**
+ * DevBar Type Definitions
+ *
+ * Re-exports shared types from @ytspar/sweetlink and defines DevBar-specific types.
+ *
+ * NOTE: We import from the types sub-path to avoid pulling in Node.js-only modules.
+ */
+export type { ConsoleLog, SweetlinkCommand, OutlineNode, PageSchema, } from '@ytspar/sweetlink/types';
+/**
+ * Options for configuring the GlobalDevBar
+ */
+export interface GlobalDevBarOptions {
+    /** Position of the devbar. Default: 'bottom-left' */
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'bottom-center';
+    /** Primary accent color (CSS color). Default: '#10b981' (emerald) */
+    accentColor?: string;
+    /** Which metrics to show. Default: all enabled */
+    showMetrics?: {
+        breakpoint?: boolean;
+        fcp?: boolean;
+        lcp?: boolean;
+        pageSize?: boolean;
+    };
+    /** Whether to show the screenshot button. Default: true */
+    showScreenshot?: boolean;
+    /** Whether to show console error/warning badges. Default: true */
+    showConsoleBadges?: boolean;
+    /** Whether to show tooltips on hover. Default: true */
+    showTooltips?: boolean;
+    /** Size overrides for special layouts (e.g., when other dev bars are present) */
+    sizeOverrides?: {
+        /** Custom width (CSS value). Default: calc(100vw - 140px) for centered, fit-content otherwise */
+        width?: string;
+        /** Custom max-width (CSS value). Default: 600px for centered, calc(100vw - 32px) otherwise */
+        maxWidth?: string;
+        /** Custom min-width (CSS value). Optional */
+        minWidth?: string;
+    };
+}
+/**
+ * Custom control that can be registered by host applications
+ */
+export interface DevBarControl {
+    id: string;
+    label: string;
+    onClick: () => void;
+    active?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'warning';
+}

package/dist/types.js

@@ -0,0 +1,8 @@
+/**
+ * DevBar Type Definitions
+ *
+ * Re-exports shared types from @ytspar/sweetlink and defines DevBar-specific types.
+ *
+ * NOTE: We import from the types sub-path to avoid pulling in Node.js-only modules.
+ */
+export {};

package/dist/ui/buttons.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DevBar Buttons
+ *
+ * Button creation and styling utilities for the DevBar UI.
+ */
+/**
+ * Get button styling based on active state and color
+ */
+export declare function getButtonStyles(color: string, isActive: boolean, isDisabled: boolean): Record<string, string>;
+/**
+ * Create a styled button with common properties
+ */
+export declare function createStyledButton(options: {
+    color: string;
+    text: string;
+    padding?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    width?: string;
+    height?: string;
+}): HTMLButtonElement;

package/dist/ui/buttons.js

@@ -0,0 +1,55 @@
+/**
+ * DevBar Buttons
+ *
+ * Button creation and styling utilities for the DevBar UI.
+ */
+import { ACTION_BUTTON_BASE_STYLES } from '../constants.js';
+/**
+ * Get button styling based on active state and color
+ */
+export function getButtonStyles(color, isActive, isDisabled) {
+    return {
+        ...ACTION_BUTTON_BASE_STYLES,
+        borderColor: isActive ? color : `${color}80`,
+        backgroundColor: isActive ? `${color}33` : 'transparent',
+        color: isActive ? color : `${color}99`,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        opacity: '1',
+    };
+}
+/**
+ * Apply hover effects to a button element (internal helper)
+ */
+function applyButtonHoverEffects(btn, color, isActive = false) {
+    btn.onmouseenter = () => {
+        btn.style.backgroundColor = `${color}20`;
+    };
+    btn.onmouseleave = () => {
+        btn.style.backgroundColor = isActive ? `${color}33` : 'transparent';
+    };
+}
+/**
+ * Create a styled button with common properties
+ */
+export function createStyledButton(options) {
+    const { color, text, padding = '6px 12px', borderRadius = '6px', fontSize = '0.75rem', width, height, } = options;
+    const btn = document.createElement('button');
+    Object.assign(btn.style, {
+        padding: width ? undefined : padding,
+        width,
+        height,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'transparent',
+        border: `1px solid ${color}60`,
+        borderRadius,
+        color,
+        fontSize,
+        cursor: 'pointer',
+        transition: 'all 150ms',
+    });
+    btn.textContent = text;
+    applyButtonHoverEffects(btn, color);
+    return btn;
+}

package/dist/ui/icons.d.ts

@@ -0,0 +1,13 @@
+/**
+ * DevBar Icons
+ *
+ * SVG icon creation utilities for the DevBar UI.
+ */
+/**
+ * Create an SVG icon element with the given path data
+ */
+export declare function createSvgIcon(pathData: string, options: {
+    viewBox?: string;
+    fill?: boolean;
+    stroke?: boolean;
+}): SVGSVGElement;

package/dist/ui/icons.js

@@ -0,0 +1,25 @@
+/**
+ * DevBar Icons
+ *
+ * SVG icon creation utilities for the DevBar UI.
+ */
+/**
+ * Create an SVG icon element with the given path data
+ */
+export function createSvgIcon(pathData, options) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '12');
+    svg.setAttribute('height', '12');
+    svg.setAttribute('viewBox', options.viewBox || '0 0 24 24');
+    if (options.fill) {
+        svg.style.fill = 'currentColor';
+    }
+    if (options.stroke) {
+        svg.style.stroke = 'currentColor';
+        svg.style.fill = 'none';
+    }
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', pathData);
+    svg.appendChild(path);
+    return svg;
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * DevBar UI Components
+ *
+ * Re-exports all UI utilities.
+ */
+export { createSvgIcon } from './icons.js';
+export { getButtonStyles, createStyledButton } from './buttons.js';
+export { createModalOverlay, createModalBox, createModalHeader, createModalContent, createEmptyMessage, createInfoBox, type ModalConfig } from './modals.js';

package/dist/ui/index.js

@@ -0,0 +1,8 @@
+/**
+ * DevBar UI Components
+ *
+ * Re-exports all UI utilities.
+ */
+export { createSvgIcon } from './icons.js';
+export { getButtonStyles, createStyledButton } from './buttons.js';
+export { createModalOverlay, createModalBox, createModalHeader, createModalContent, createEmptyMessage, createInfoBox } from './modals.js';

package/dist/ui/modals.d.ts

@@ -0,0 +1,40 @@
+/**
+ * DevBar Modals
+ *
+ * Modal creation utilities for the DevBar UI.
+ */
+/**
+ * Configuration for creating a modal
+ */
+export interface ModalConfig {
+    color: string;
+    title: string;
+    onClose: () => void;
+    onCopyMd: () => Promise<void>;
+    onSave?: () => void;
+    sweetlinkConnected: boolean;
+}
+/**
+ * Create modal overlay with click-outside-to-close behavior
+ */
+export declare function createModalOverlay(onClose: () => void): HTMLDivElement;
+/**
+ * Create modal box with border and shadow
+ */
+export declare function createModalBox(color: string): HTMLDivElement;
+/**
+ * Create modal header with title, copy/save/close buttons
+ */
+export declare function createModalHeader(config: ModalConfig): HTMLDivElement;
+/**
+ * Create modal content container
+ */
+export declare function createModalContent(): HTMLDivElement;
+/**
+ * Create empty state message for modals
+ */
+export declare function createEmptyMessage(text: string): HTMLDivElement;
+/**
+ * Create a colored info box (for error states, cost estimates, etc.)
+ */
+export declare function createInfoBox(color: string, title: string, content: string | HTMLElement[]): HTMLDivElement;