@triagly/sdk 0.1.1-beta.1

package/dist/utils.d.ts

@@ -0,0 +1,73 @@
+import { FeedbackMetadata } from './types';
+/**
+ * Collect browser and page metadata
+ */
+export declare function collectMetadata(customMetadata?: Record<string, any>): FeedbackMetadata;
+/**
+ * Capture screenshot of current page
+ */
+export declare function captureScreenshot(): Promise<string | null>;
+/**
+ * Simple rate limiter using localStorage
+ */
+export declare class RateLimiter {
+    private key;
+    private maxAttempts;
+    private windowMs;
+    constructor(key: string, maxAttempts?: number, windowMs?: number);
+    canProceed(): boolean;
+    recordAttempt(): void;
+    getTimeUntilReset(): number;
+    private getData;
+    private setData;
+}
+/**
+ * Generate unique ID
+ */
+export declare function generateId(): string;
+/**
+ * Console log capture for debugging
+ */
+export interface ConsoleLog {
+    level: 'error' | 'warn' | 'log';
+    message: string;
+    timestamp: string;
+    stack?: string;
+}
+export declare class ConsoleLogger {
+    private buffer;
+    private maxLogs;
+    private levels;
+    private originalConsole;
+    private isActive;
+    constructor(maxLogs?: number, levels?: ('error' | 'warn' | 'log')[]);
+    /**
+     * Start capturing console logs
+     */
+    start(): void;
+    /**
+     * Stop capturing and restore original console methods
+     */
+    stop(): void;
+    /**
+     * Capture a log entry
+     */
+    private captureLog;
+    /**
+     * Sanitize sensitive data from logs
+     */
+    private sanitize;
+    /**
+     * Get all captured logs
+     */
+    getLogs(): ConsoleLog[];
+    /**
+     * Clear all captured logs
+     */
+    clear(): void;
+    /**
+     * Get logs count
+     */
+    getCount(): number;
+}
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,wBAAgB,eAAe,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,gBAAgB,CAYtF;AA0BD;;GAEG;AACH,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAyBhE;AAED;;GAEG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,QAAQ,CAAS;gBAEb,GAAG,EAAE,MAAM,EAAE,WAAW,GAAE,MAAU,EAAE,QAAQ,GAAE,MAAsB;IAMlF,UAAU,IAAI,OAAO;IAgBrB,aAAa,IAAI,IAAI;IAerB,iBAAiB,IAAI,MAAM;IAc3B,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,OAAO;CAOhB;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,MAAM,CAEnC;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,eAAe,CAIrB;IACF,OAAO,CAAC,QAAQ,CAAkB;gBAEtB,OAAO,GAAE,MAAW,EAAE,MAAM,GAAE,CAAC,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC,EAAsB;IAY1F;;OAEG;IACH,KAAK,IAAI,IAAI;IA6Bb;;OAEG;IACH,IAAI,IAAI,IAAI;IASZ;;OAEG;IACH,OAAO,CAAC,UAAU;IAiDlB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAoBhB;;OAEG;IACH,OAAO,IAAI,UAAU,EAAE;IAIvB;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,QAAQ,IAAI,MAAM;CAGnB"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@triagly/sdk",
+  "version": "0.1.1-beta.1",
+  "description": "JavaScript SDK for Triagly - Turn user feedback into GitHub issues instantly",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "browser": "dist/index.min.js",
+  "files": [
+    "dist",
+    "themes",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepare": "husky",
+    "release": "standard-version",
+    "release:minor": "standard-version --release-as minor",
+    "release:major": "standard-version --release-as major",
+    "release:patch": "standard-version --release-as patch",
+    "release:first": "standard-version --first-release",
+    "release:beta": "standard-version --prerelease beta",
+    "release:alpha": "standard-version --prerelease alpha",
+    "publish:latest": "npm publish --access public",
+    "publish:beta": "npm publish --access public --tag beta",
+    "publish:alpha": "npm publish --access public --tag alpha",
+    "ship": "pnpm release && git push --follow-tags origin main && pnpm publish:latest",
+    "ship:beta": "pnpm release:beta && git push --follow-tags origin main && pnpm publish:beta",
+    "prepublishOnly": "pnpm build"
+  },
+  "keywords": [
+    "feedback",
+    "github",
+    "issues",
+    "bug-tracking",
+    "user-feedback",
+    "widget",
+    "triagly",
+    "feedback-widget",
+    "screenshot",
+    "bug-report"
+  ],
+  "author": "Joshua Colvin",
+  "license": "MIT",
+  "homepage": "https://triagly.com",
+  "bugs": {
+    "url": "https://github.com/joshuacolvin/triagly/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/joshuacolvin/triagly.git",
+    "directory": "sdk/js"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/node": "^24.8.1",
+    "husky": "^9.1.7",
+    "rollup": "^4.52.5",
+    "rollup-plugin-terser": "^7.0.2",
+    "standard-version": "^9.5.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/themes/README.md

@@ -0,0 +1,256 @@
+# Triagly SDK Themes
+
+Pre-built themes for the Triagly feedback widget.
+
+## Available Themes
+
+### 🎨 **Default** (Built-in)
+No additional CSS needed. Clean blue theme with rounded corners.
+
+**Preview:** Standard indigo button, white modal, clean design
+
+---
+
+### 🌙 **Dark**
+Dark mode theme with high contrast, perfect for dark websites.
+
+**Preview:** Dark gray button and modal, light text
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/dark.css">
+```
+
+**Uses:** Pure CSS variables - easy to customize further
+
+---
+
+### ✨ **Minimal**
+Clean, minimal design with outlined button and subtle styling.
+
+**Preview:** Transparent button with border, minimal shadows
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/minimal.css">
+```
+
+**Uses:** CSS variables + border styling (can't use box-shadow inset in variables)
+
+---
+
+### 🌈 **Gradient**
+Beautiful purple gradient design for modern websites.
+
+**Preview:** Purple gradient button and header, smooth animations
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/gradient.css">
+```
+
+**Uses:** Direct CSS rules (gradients can't be stored in CSS variables)
+
+---
+
+### 🌊 **Ocean**
+Fresh blue/teal ocean theme with calming colors.
+
+**Preview:** Cyan/blue colors, light and airy design
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/ocean.css">
+```
+
+**Uses:** Pure CSS variables - easy to customize further
+
+---
+
+## Usage
+
+### CDN (Easiest)
+
+```html
+<!-- Include theme before SDK -->
+<link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/dark.css">
+
+<script type="module">
+  import Triagly from 'https://unpkg.com/@triagly/sdk';
+  
+  const triagly = new Triagly({
+    projectId: 'your-project-id',
+    apiUrl: 'https://your-api.com',
+  });
+</script>
+```
+
+### NPM
+
+```bash
+npm install @triagly/sdk
+```
+
+```javascript
+import Triagly from '@triagly/sdk';
+import '@triagly/sdk/themes/dark.css';
+
+const triagly = new Triagly({
+  projectId: 'your-project-id',
+  apiUrl: 'https://your-api.com',
+});
+```
+
+---
+
+## Important Notes
+
+### CSS Variable Limitations
+
+**What works in CSS variables:**
+- ✅ Colors: `#ff0066`, `rgb()`, `rgba()`
+- ✅ Sizes: `12px`, `1rem`, `500px`
+- ✅ Simple shadows: `0 4px 12px rgba(0,0,0,0.3)`
+
+**What doesn't work in CSS variables:**
+- ❌ Gradients: `linear-gradient()`, `radial-gradient()`
+- ❌ Inset shadows: `0 0 0 2px #color inset`
+- ❌ Multiple backgrounds
+
+For these effects, themes use direct CSS rules with `!important`.
+
+---
+
+## Custom Theme
+
+Create your own theme using CSS custom properties:
+
+```css
+:root {
+  /* Button */
+  --triagly-button-bg: #your-color;
+  --triagly-button-bg-hover: #your-hover-color;
+  --triagly-button-text: #ffffff;
+  --triagly-button-radius: 8px;
+  
+  /* Modal */
+  --triagly-modal-bg: #ffffff;
+  --triagly-modal-radius: 12px;
+  
+  /* And more... see full list below */
+}
+```
+
+### All Available CSS Variables
+
+```css
+:root {
+  /* Button */
+  --triagly-button-bg
+  --triagly-button-bg-hover
+  --triagly-button-text
+  --triagly-button-radius
+  --triagly-button-shadow
+  --triagly-button-shadow-hover
+  
+  /* Modal */
+  --triagly-modal-bg
+  --triagly-modal-radius
+  --triagly-modal-shadow
+  --triagly-modal-max-width
+  
+  /* Overlay */
+  --triagly-overlay-bg
+  
+  /* Header */
+  --triagly-header-bg
+  --triagly-header-border
+  --triagly-header-text
+  
+  /* Form */
+  --triagly-form-bg
+  --triagly-label-text
+  --triagly-input-bg
+  --triagly-input-border
+  --triagly-input-border-focus
+  --triagly-input-text
+  --triagly-input-radius
+  
+  /* Buttons */
+  --triagly-btn-primary-bg
+  --triagly-btn-primary-bg-hover
+  --triagly-btn-primary-text
+  --triagly-btn-secondary-bg
+  --triagly-btn-secondary-bg-hover
+  --triagly-btn-secondary-text
+  --triagly-btn-radius
+  
+  /* Status Messages */
+  --triagly-success-bg
+  --triagly-success-text
+  --triagly-error-bg
+  --triagly-error-text
+}
+```
+
+---
+
+## Dynamic Theme Switching
+
+Switch themes at runtime:
+
+```javascript
+function applyTheme(themeName) {
+  // Remove existing theme
+  document.getElementById('triagly-theme')?.remove();
+  
+  // Add new theme
+  if (themeName !== 'default') {
+    const link = document.createElement('link');
+    link.id = 'triagly-theme';
+    link.rel = 'stylesheet';
+    link.href = `https://unpkg.com/@triagly/sdk/themes/${themeName}.css`;
+    document.head.appendChild(link);
+  }
+}
+
+// Apply dark theme
+applyTheme('dark');
+```
+
+---
+
+## Automatic Dark Mode
+
+Match system dark mode preference:
+
+```javascript
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+function applyAutoTheme() {
+  if (prefersDark.matches) {
+    // Load dark theme
+    import('@triagly/sdk/themes/dark.css');
+  }
+}
+
+// Apply on load
+applyAutoTheme();
+
+// Listen for changes
+prefersDark.addEventListener('change', applyAutoTheme);
+```
+
+---
+
+## Contributing Themes
+
+Want to contribute a theme? 
+
+1. Create a new `.css` file in `themes/`
+2. Use the CSS custom properties
+3. Add documentation here
+4. Submit a PR!
+
+---
+
+**More Info:**
+- [Main Documentation](../README.md)
+- [Styling Guide](../docs/guides/STYLING.md)
+

package/themes/dark.css

@@ -0,0 +1,52 @@
+/**
+ * Triagly SDK - Dark Theme
+ * 
+ * Usage:
+ *   <link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/dark.css">
+ * 
+ * Or import in JavaScript:
+ *   import '@triagly/sdk/themes/dark.css';
+ */
+
+:root {
+  /* Button */
+  --triagly-button-bg: #1f2937;
+  --triagly-button-bg-hover: #374151;
+  --triagly-button-text: #f9fafb;
+  --triagly-button-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --triagly-button-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.5);
+  
+  /* Modal */
+  --triagly-modal-bg: #1f2937;
+  --triagly-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+  
+  /* Overlay */
+  --triagly-overlay-bg: rgba(0, 0, 0, 0.8);
+  
+  /* Header */
+  --triagly-header-bg: #111827;
+  --triagly-header-border: #374151;
+  --triagly-header-text: #f9fafb;
+  
+  /* Form */
+  --triagly-form-bg: #1f2937;
+  --triagly-label-text: #e5e7eb;
+  --triagly-input-bg: #111827;
+  --triagly-input-border: #374151;
+  --triagly-input-border-focus: #6366f1;
+  --triagly-input-text: #f9fafb;
+  
+  /* Buttons */
+  --triagly-btn-primary-bg: #6366f1;
+  --triagly-btn-primary-bg-hover: #4f46e5;
+  --triagly-btn-secondary-bg: #374151;
+  --triagly-btn-secondary-bg-hover: #4b5563;
+  --triagly-btn-secondary-text: #f9fafb;
+  
+  /* Status */
+  --triagly-success-bg: #064e3b;
+  --triagly-success-text: #6ee7b7;
+  --triagly-error-bg: #7f1d1d;
+  --triagly-error-text: #fca5a5;
+}
+

package/themes/gradient.css

@@ -0,0 +1,76 @@
+/**
+ * Triagly SDK - Gradient Theme
+ * 
+ * Usage:
+ *   <link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/gradient.css">
+ * 
+ * Or import in JavaScript:
+ *   import '@triagly/sdk/themes/gradient.css';
+ */
+
+:root {
+  /* Colors for gradient */
+  --triagly-button-text: #ffffff;
+  --triagly-button-radius: 30px;
+  --triagly-button-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
+  --triagly-button-shadow-hover: 0 8px 25px rgba(102, 126, 234, 0.5);
+  
+  /* Modal */
+  --triagly-modal-bg: #ffffff;
+  --triagly-modal-radius: 24px;
+  --triagly-modal-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
+  
+  /* Overlay */
+  --triagly-overlay-bg: rgba(0, 0, 0, 0.6);
+  
+  /* Header */
+  --triagly-header-border: transparent;
+  --triagly-header-text: #ffffff;
+  
+  /* Form */
+  --triagly-form-bg: #ffffff;
+  --triagly-label-text: #374151;
+  --triagly-input-bg: #f9fafb;
+  --triagly-input-border: #e5e7eb;
+  --triagly-input-border-focus: #667eea;
+  --triagly-input-text: #111827;
+  --triagly-input-radius: 12px;
+  
+  /* Buttons */
+  --triagly-btn-primary-text: #ffffff;
+  --triagly-btn-secondary-bg: #f3f4f6;
+  --triagly-btn-secondary-bg-hover: #e5e7eb;
+  --triagly-btn-radius: 12px;
+}
+
+/* Gradient backgrounds (can't use CSS variables for gradients) */
+.triagly-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.triagly-button:hover {
+  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
+}
+
+.triagly-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.triagly-btn-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.triagly-btn-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
+}
+
+/* Special styling for close button on gradient header */
+.triagly-close {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.triagly-close:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  color: #ffffff !important;
+}
+

package/themes/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Triagly SDK Themes
+ * 
+ * Pre-built themes for the Triagly feedback widget.
+ * Import these CSS files to apply different visual styles.
+ */
+
+declare module '@triagly/sdk/themes/dark.css';
+declare module '@triagly/sdk/themes/minimal.css';
+declare module '@triagly/sdk/themes/gradient.css';
+declare module '@triagly/sdk/themes/ocean.css';
+

package/themes/minimal.css

@@ -0,0 +1,65 @@
+/**
+ * Triagly SDK - Minimal Theme
+ * 
+ * Usage:
+ *   <link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/minimal.css">
+ * 
+ * Or import in JavaScript:
+ *   import '@triagly/sdk/themes/minimal.css';
+ */
+
+:root {
+  /* Button */
+  --triagly-button-bg: transparent;
+  --triagly-button-bg-hover: #f9fafb;
+  --triagly-button-text: #111827;
+  
+  /* Modal */
+  --triagly-modal-bg: #ffffff;
+  --triagly-modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  
+  /* Overlay */
+  --triagly-overlay-bg: rgba(0, 0, 0, 0.3);
+  
+  /* Header */
+  --triagly-header-bg: #fafafa;
+  --triagly-header-border: #e5e7eb;
+  --triagly-header-text: #111827;
+  
+  /* Form */
+  --triagly-form-bg: #ffffff;
+  --triagly-label-text: #6b7280;
+  --triagly-input-bg: #fafafa;
+  --triagly-input-border: #e5e7eb;
+  --triagly-input-border-focus: #d1d5db;
+  --triagly-input-text: #111827;
+  
+  /* Buttons */
+  --triagly-btn-primary-bg: #111827;
+  --triagly-btn-primary-bg-hover: #374151;
+  --triagly-btn-secondary-bg: transparent;
+  --triagly-btn-secondary-bg-hover: #f9fafb;
+  --triagly-btn-secondary-text: #6b7280;
+  
+  /* Borders */
+  --triagly-btn-radius: 6px;
+  --triagly-modal-radius: 8px;
+  --triagly-button-radius: 6px;
+}
+
+/* Button with border (can't use inset shadow in variable) */
+.triagly-button {
+  border: 2px solid #e5e7eb !important;
+  box-shadow: none !important;
+}
+
+.triagly-button:hover {
+  border-color: #6366f1 !important;
+  box-shadow: none !important;
+}
+
+/* Secondary button with border */
+.triagly-btn-secondary {
+  border: 1px solid #e5e7eb !important;
+}
+

package/themes/ocean.css

@@ -0,0 +1,52 @@
+/**
+ * Triagly SDK - Ocean Theme
+ * 
+ * Usage:
+ *   <link rel="stylesheet" href="https://unpkg.com/@triagly/sdk/themes/ocean.css">
+ * 
+ * Or import in JavaScript:
+ *   import '@triagly/sdk/themes/ocean.css';
+ */
+
+:root {
+  /* Button */
+  --triagly-button-bg: #0ea5e9;
+  --triagly-button-bg-hover: #0284c7;
+  --triagly-button-text: #ffffff;
+  --triagly-button-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+  --triagly-button-shadow-hover: 0 6px 16px rgba(14, 165, 233, 0.4);
+  
+  /* Modal */
+  --triagly-modal-bg: #ffffff;
+  --triagly-modal-shadow: 0 20px 60px rgba(6, 182, 212, 0.2);
+  
+  /* Overlay */
+  --triagly-overlay-bg: rgba(6, 78, 59, 0.3);
+  
+  /* Header */
+  --triagly-header-bg: #ecfeff;
+  --triagly-header-border: #06b6d4;
+  --triagly-header-text: #0e7490;
+  
+  /* Form */
+  --triagly-form-bg: #ffffff;
+  --triagly-label-text: #0e7490;
+  --triagly-input-bg: #f0fdfa;
+  --triagly-input-border: #99f6e4;
+  --triagly-input-border-focus: #06b6d4;
+  --triagly-input-text: #164e63;
+  
+  /* Buttons */
+  --triagly-btn-primary-bg: #0ea5e9;
+  --triagly-btn-primary-bg-hover: #0284c7;
+  --triagly-btn-secondary-bg: #ecfeff;
+  --triagly-btn-secondary-bg-hover: #cffafe;
+  --triagly-btn-secondary-text: #0e7490;
+  
+  /* Status */
+  --triagly-success-bg: #ccfbf1;
+  --triagly-success-text: #0f766e;
+  --triagly-error-bg: #fecdd3;
+  --triagly-error-text: #be123c;
+}
+