chatgram-widget 1.0.0

package/dist/types/ui/modal.d.ts

@@ -0,0 +1,63 @@
+import type { ChatgramConfig, WidgetState } from '../core/types';
+import { EventEmitter } from '../core/events';
+/**
+ * The Modal class manages the entire widget UI lifecycle.
+ *
+ * Architecture:
+ * - Uses Shadow DOM for CSS isolation
+ * - Focus trap keeps Tab cycling within modal
+ * - Scroll lock prevents body scrolling without layout shift
+ * - Honeypot field catches bots
+ * - Rate limiter prevents spam
+ * - Anti-bot timing check
+ * - Full ARIA attributes for screen readers
+ * - Keyboard navigation (Escape to close, Tab to navigate, Enter to select)
+ */
+export declare class Modal {
+    private config;
+    private events;
+    private rateLimiter;
+    private hostEl;
+    private shadow;
+    private overlay;
+    private modalEl;
+    private bodyContainer;
+    private isOpen;
+    private state;
+    private selectedCategory;
+    private mountTime;
+    private instanceId;
+    private destroyFocusTrap;
+    private boundEscapeHandler;
+    private emailInput;
+    private nameInput;
+    private subjectInput;
+    private messageInput;
+    private honeypotInput;
+    private charCountText;
+    private charCountFill;
+    private submitBtn;
+    private categoryBtns;
+    constructor(config: ChatgramConfig, events: EventEmitter);
+    open(): void;
+    close(): void;
+    destroy(): void;
+    updateConfig(newConfig: ChatgramConfig): void;
+    updateTheme(theme: ChatgramConfig['theme']): void;
+    getState(): WidgetState;
+    isVisible(): boolean;
+    private mount;
+    private applyTheme;
+    private buildHeader;
+    private buildFormView;
+    private buildField;
+    private selectCategory;
+    private updateCharCount;
+    private validate;
+    private showFieldError;
+    private showTextareaError;
+    private clearFieldError;
+    private setState;
+    private showStateView;
+    private handleSubmit;
+}

package/dist/types/ui/trigger.d.ts

@@ -0,0 +1,14 @@
+import type { ResolvedConfig } from '../core/types';
+export declare class TriggerButton {
+    private el;
+    private hostEl;
+    private shadow;
+    private config;
+    private onClick;
+    constructor(config: ResolvedConfig, onClick: () => void);
+    mount(): void;
+    destroy(): void;
+    show(): void;
+    hide(): void;
+    updateTheme(primaryColor: string): void;
+}

package/dist/types/utils/dom.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Creates a DOM element with attributes.
+ * - 'textContent' is always safe (no XSS)
+ * - 'innerHTML' is ONLY used for trusted SVG icons (never user input)
+ */
+export declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Record<string, string>, children?: (HTMLElement | string)[]): HTMLElementTagNameMap[K];
+/**
+ * Applies CSS custom properties to an element, sanitizing values.
+ */
+export declare function applyThemeVars(element: HTMLElement, vars: Record<string, string>): void;
+/**
+ * Creates a focus trap within a container element.
+ * Returns a cleanup function to remove the trap.
+ */
+export declare function createFocusTrap(container: HTMLElement): () => void;
+/**
+ * Locks body scroll without layout shift.
+ * Accounts for scrollbar width to prevent content jumping.
+ * Supports nested lock/unlock (reference counted).
+ */
+export declare function lockScroll(): void;
+/**
+ * Unlocks body scroll, restoring previous state.
+ */
+export declare function unlockScroll(): void;
+export declare function uid(prefix?: string): string;

package/dist/types/utils/sanitize.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Escapes HTML entities to prevent XSS.
+ * Used when inserting any dynamic text into the DOM.
+ */
+export declare function escapeHtml(str: string): string;
+/**
+ * Sanitizes user input for DOM display.
+ * Trims, removes null bytes, and escapes HTML.
+ */
+export declare function sanitizeForDom(input: string): string;
+/**
+ * Sanitizes user input for API payload.
+ * Trims and strips null bytes, but does NOT escape HTML
+ * (server-side should handle its own escaping).
+ */
+export declare function sanitizeForPayload(input: string): string;
+/**
+ * RFC 5322 simplified email validation.
+ * Rejects emails > 254 chars and common injection patterns.
+ */
+export declare function isValidEmail(email: string): boolean;
+/**
+ * Checks that a string is non-empty after trimming.
+ */
+export declare function isNonEmpty(value: unknown): boolean;
+/**
+ * Checks that a string is within max length.
+ */
+export declare function isWithinLength(value: string, max: number): boolean;
+/**
+ * Validates a CSS color value (basic check — hex, rgb, hsl, named colors).
+ * Used to prevent injection via theme config.
+ */
+export declare function isSafeCssValue(value: string): boolean;
+/**
+ * Sanitizes a theme object to prevent CSS injection.
+ */
+export declare function sanitizeThemeValue(value: string): string;

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "chatgram-widget",
+  "version": "1.0.0",
+  "description": "Production-grade embeddable contact form widget for Chatgram — React, Vue, vanilla JS",
+  "author": "brandID <brandid.ca@gmail.com>",
+  "license": "MIT",
+  "main": "dist/chatgram-widget.cjs.js",
+  "module": "dist/chatgram-widget.esm.js",
+  "unpkg": "dist/chatgram-widget.umd.js",
+  "jsdelivr": "dist/chatgram-widget.umd.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/chatgram-widget.esm.js",
+      "require": "./dist/chatgram-widget.cjs.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./style.css": "./dist/chatgram-widget.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "build:watch": "rollup -c rollup.config.mjs -w",
+    "dev": "rollup -c rollup.config.mjs -w",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src/ --ext .ts",
+    "prepublishOnly": "npm run build",
+    "size": "size-limit",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "@vitest/coverage-v8": "^1.0.0",
+    "jsdom": "^23.0.0",
+    "rollup": "^4.9.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^11.0.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "size-limit": [
+    {
+      "path": "dist/chatgram-widget.esm.js",
+      "limit": "10 kB"
+    }
+  ],
+  "keywords": [
+    "chatgram",
+    "contact-form",
+    "widget",
+    "embeddable",
+    "support",
+    "feedback",
+    "brandid",
+    "modal",
+    "vanilla-js",
+    "react",
+    "vue",
+    "web-component",
+    "shadow-dom"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brandid/chatgram-widget"
+  },
+  "homepage": "https://brandid.app/chatgram",
+  "bugs": {
+    "url": "https://github.com/brandid/chatgram-widget/issues"
+  }
+}