@ytspar/devbar 0.0.1 → 1.0.0-canary.92db425

package/dist/ui/modals.js

@@ -0,0 +1,144 @@
+/**
+ * DevBar Modals
+ *
+ * Modal creation utilities for the DevBar UI.
+ */
+import { MODAL_OVERLAY_STYLES, MODAL_BOX_BASE_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 } = 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`,
+    });
+    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' });
+    // 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: 'Save' });
+        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);
+    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, prepareForCapture, delay, copyCanvasToClipboard, } 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, prepareForCapture, delay, copyCanvasToClipboard, } 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.92db425",
+  "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"
+  }
 }