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

package/dist/types.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 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, OutlineNode, PageSchema, SweetlinkCommand, } from '@ytspar/sweetlink/types';
+/**
+ * Theme mode for DevBar display
+ */
+export type ThemeMode = 'dark' | 'light' | 'system';
+/**
+ * Debug configuration for DevBar
+ * When true, all debug options are enabled.
+ * When an object, specific options can be toggled.
+ */
+export interface DebugConfig {
+    /** Enable debug logging. Default: false */
+    enabled: boolean;
+    /** Log lifecycle events (init, destroy). Default: true when enabled */
+    logLifecycle?: boolean;
+    /** Log state changes (collapse, modals). Default: true when enabled */
+    logStateChanges?: boolean;
+    /** Log WebSocket events (connect, disconnect, messages). Default: true when enabled */
+    logWebSocket?: boolean;
+    /** Log performance measurements (FCP, LCP, CLS, INP). Default: true when enabled */
+    logPerformance?: boolean;
+}
+/**
+ * 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;
+        cls?: boolean;
+        inp?: 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;
+    };
+    /** Enable debug logging. Pass true for all options, or an object for specific options. */
+    debug?: boolean | DebugConfig;
+}
+/**
+ * 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 { createStyledButton, getButtonStyles } from './buttons.js';
+export { createSvgIcon } from './icons.js';
+export { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, type ModalConfig, } from './modals.js';

package/dist/ui/index.js

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

package/dist/ui/modals.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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;
+    /** Whether a save operation is in progress */
+    isSaving?: boolean;
+    /** Path where data was saved (shows confirmation) */
+    savedPath?: string | null;
+}
+/**
+ * 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;

package/dist/ui/modals.js

@@ -0,0 +1,190 @@
+/**
+ * DevBar Modals
+ *
+ * Modal creation utilities for the DevBar UI.
+ */
+import { MODAL_BOX_BASE_STYLES, MODAL_OVERLAY_STYLES } from '../constants.js';
+import { createStyledButton } from './buttons.js';
+/**
+ * Create modal overlay with click-outside-to-close behavior
+ */
+export function createModalOverlay(onClose) {
+    const overlay = document.createElement('div');
+    overlay.setAttribute('data-devbar', 'true');
+    Object.assign(overlay.style, MODAL_OVERLAY_STYLES);
+    overlay.onclick = (e) => {
+        if (e.target === overlay)
+            onClose();
+    };
+    return overlay;
+}
+/**
+ * Create modal box with border and shadow
+ */
+export function createModalBox(color) {
+    const modal = document.createElement('div');
+    Object.assign(modal.style, {
+        ...MODAL_BOX_BASE_STYLES,
+        border: `1px solid ${color}`,
+        boxShadow: `0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px ${color}33`,
+    });
+    return modal;
+}
+/**
+ * Create modal header with title, copy/save/close buttons
+ */
+export function createModalHeader(config) {
+    const { color, title, onClose, onCopyMd, onSave, sweetlinkConnected, isSaving, savedPath } = config;
+    const header = document.createElement('div');
+    Object.assign(header.style, {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '16px 20px',
+        borderBottom: `1px solid ${color}40`,
+        flexWrap: 'wrap',
+        gap: '8px',
+    });
+    const titleEl = document.createElement('h2');
+    Object.assign(titleEl.style, {
+        color,
+        fontSize: '1rem',
+        fontWeight: '600',
+        margin: '0',
+    });
+    titleEl.textContent = title;
+    header.appendChild(titleEl);
+    const headerButtons = document.createElement('div');
+    Object.assign(headerButtons.style, { display: 'flex', gap: '10px', alignItems: 'center' });
+    // Copy MD button
+    const copyBtn = createStyledButton({ color, text: 'Copy MD' });
+    copyBtn.onclick = async () => {
+        try {
+            await onCopyMd();
+            copyBtn.textContent = 'Copied!';
+            setTimeout(() => {
+                copyBtn.textContent = 'Copy MD';
+            }, 1500);
+        }
+        catch {
+            console.error('[GlobalDevBar] Failed to copy to clipboard');
+        }
+    };
+    headerButtons.appendChild(copyBtn);
+    // Save button (if Sweetlink connected)
+    if (sweetlinkConnected && onSave) {
+        const saveBtn = createStyledButton({
+            color,
+            text: isSaving ? 'Saving...' : 'Save',
+        });
+        if (isSaving) {
+            saveBtn.style.opacity = '0.6';
+            saveBtn.style.cursor = 'not-allowed';
+        }
+        else {
+            saveBtn.onclick = onSave;
+        }
+        headerButtons.appendChild(saveBtn);
+    }
+    // Close button - use same padding as other buttons for consistent height
+    const closeBtn = createStyledButton({
+        color,
+        text: '×',
+        padding: '6px 10px',
+        fontSize: '0.875rem',
+    });
+    closeBtn.onclick = onClose;
+    headerButtons.appendChild(closeBtn);
+    header.appendChild(headerButtons);
+    // Show saved path confirmation below buttons
+    if (savedPath) {
+        const savedConfirm = document.createElement('div');
+        Object.assign(savedConfirm.style, {
+            width: '100%',
+            marginTop: '4px',
+            padding: '8px 12px',
+            backgroundColor: `${color}15`,
+            border: `1px solid ${color}30`,
+            borderRadius: '6px',
+            fontSize: '0.75rem',
+            color: color,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+        });
+        // Checkmark icon
+        const checkmark = document.createElement('span');
+        checkmark.textContent = '✓';
+        Object.assign(checkmark.style, { fontWeight: '600' });
+        savedConfirm.appendChild(checkmark);
+        // Path text
+        const pathText = document.createElement('span');
+        Object.assign(pathText.style, {
+            color: '#9ca3af',
+            fontFamily: 'monospace',
+            fontSize: '0.6875rem',
+            wordBreak: 'break-all',
+        });
+        pathText.textContent = `Saved to ${savedPath}`;
+        savedConfirm.appendChild(pathText);
+        header.appendChild(savedConfirm);
+    }
+    return header;
+}
+/**
+ * Create modal content container
+ */
+export function createModalContent() {
+    const content = document.createElement('div');
+    Object.assign(content.style, {
+        flex: '1',
+        overflow: 'auto',
+        padding: '16px 20px',
+    });
+    return content;
+}
+/**
+ * Create empty state message for modals
+ */
+export function createEmptyMessage(text) {
+    const emptyMsg = document.createElement('div');
+    Object.assign(emptyMsg.style, {
+        textAlign: 'center',
+        color: '#6b7280',
+        fontSize: '0.875rem',
+        padding: '40px',
+    });
+    emptyMsg.textContent = text;
+    return emptyMsg;
+}
+/**
+ * Create a colored info box (for error states, cost estimates, etc.)
+ */
+export function createInfoBox(color, title, content) {
+    const box = document.createElement('div');
+    Object.assign(box.style, {
+        backgroundColor: `${color}15`,
+        border: `1px solid ${color}40`,
+        borderRadius: '8px',
+        padding: '14px',
+        marginBottom: '16px',
+    });
+    const titleEl = document.createElement('div');
+    Object.assign(titleEl.style, {
+        color,
+        fontWeight: '600',
+        marginBottom: '8px',
+    });
+    titleEl.textContent = title;
+    box.appendChild(titleEl);
+    if (typeof content === 'string') {
+        const textEl = document.createElement('div');
+        Object.assign(textEl.style, { color: '#94a3b8' });
+        textEl.textContent = content;
+        box.appendChild(textEl);
+    }
+    else {
+        content.forEach((el) => box.appendChild(el));
+    }
+    return box;
+}

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * DevBar Utility Functions
+ *
+ * Re-exports shared utilities from @ytspar/sweetlink for use by DevBar components.
+ * This avoids code duplication between packages.
+ *
+ * NOTE: We import from specific sub-paths to avoid pulling in Node.js-only modules
+ * that would break browser/test environments.
+ */
+export { formatArg, formatArgs } from '@ytspar/sweetlink/browser/consoleCapture';
+export { canvasToDataUrl, copyCanvasToClipboard, delay, prepareForCapture, } from '@ytspar/sweetlink/browser/screenshotUtils';

package/dist/utils.js

@@ -0,0 +1,13 @@
+/**
+ * DevBar Utility Functions
+ *
+ * Re-exports shared utilities from @ytspar/sweetlink for use by DevBar components.
+ * This avoids code duplication between packages.
+ *
+ * NOTE: We import from specific sub-paths to avoid pulling in Node.js-only modules
+ * that would break browser/test environments.
+ */
+// Re-export console formatting utilities from sweetlink's browser module
+export { formatArg, formatArgs } from '@ytspar/sweetlink/browser/consoleCapture';
+// Re-export screenshot utilities from sweetlink's browser module
+export { canvasToDataUrl, copyCanvasToClipboard, delay, prepareForCapture, } from '@ytspar/sweetlink/browser/screenshotUtils';

package/package.json

@@ -1,10 +1,62 @@
 {
   "name": "@ytspar/devbar",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @ytspar/devbar",
+  "version": "1.0.0-canary.2b99e1e",
+  "type": "module",
+  "private": false,
+  "description": "Development toolbar and utilities with Sweetlink integration - pure vanilla JS, no framework dependencies",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ytspar/devtools.git",
+    "directory": "packages/devbar"
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+    "development",
+    "debug",
+    "devtools",
+    "sweetlink",
+    "vanilla-js"
+  ],
+  "author": "ytspar",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./GlobalDevBar": {
+      "types": "./dist/GlobalDevBar.d.ts",
+      "import": "./dist/GlobalDevBar.js",
+      "default": "./dist/GlobalDevBar.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "@ytspar/sweetlink": "^1.0.0 || ^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@ytspar/sweetlink": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "axe-core": "^4.10.2",
+    "html2canvas-pro": "^1.5.8"
+  },
+  "devDependencies": {
+    "@ytspar/sweetlink": "workspace:*",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.0.0"
+  }
 }