inkflow-editor 1.3.0

package/ReadME.md

@@ -0,0 +1,230 @@
+# inkflow-editor 🚀 | Premium WYSIWYG Editor
+
+[![NPM Downloads](https://img.shields.io/npm/dw/inkflow-editor.svg)](https://www.npmjs.com/package/inkflow-editor)
+[![NPM Version](https://img.shields.io/npm/v/inkflow-editor.svg)](https://www.npmjs.com/package/inkflow-editor)
+[![Beta Status](https://img.shields.io/badge/status-beta-orange.svg)](https://www.npmjs.com/package/inkflow-editor)
+
+A premium, ultra-lightweight, and framework-agnostic **WYSIWYG rich text editor** built entirely with Vanilla TypeScript. Featuring a sophisticated **Slate & Indigo** design system, it provides a flawless writing experience for React, Next.js, and modern web applications.
+
+> [!IMPORTANT]
+> **Beta Version**: Inkflow is currently in its beta phase. We are actively refining the API and performance. Community feedback is welcome! 🚀
+
+### 💡 What is WYSIWYG?
+**WYSIWYG** stands for **"What You See Is What You Get"**. 
+Unlike markdown or code editors, what you see while typing in Inkflow—the bold text, centered headings, and interactive tables—is exactly how it will appear when published. It bridges the gap between editing and the final result, making rich-text creation accessible and predictable.
+
+## 🚀 Recent Performance & Security Breakthrough (v1.1.2)
+We recently completed an aggressive optimization and security hardening pass:
+- **79% Size Reduction:** Packed weight dropped from **132kB to 28kB**.
+- **9.8/10 Security Score:** Internal audit confirmed world-class XSS protection.
+- **Pure ESM Architecture:** Zero legacy CommonJS bloat for modern bundlers.
+
+---
+
+## 🎮 Live React Preview
+Wanna see it in action? Try the **Interactive React Demo** on StackBlitz:
+[**Run Demo on StackBlitz**](https://stackblitz.com/edit/vitejs-vite-e8u5yntq?embed=1&view=preview)
+
+## ✨ Premium Features & Why Choose This Editor?
+
+### 👍 Key Pros & Capabilities
+- **Microscopic Footprint**: Only **~28kB** packed weight. Total initial load is incredibly light.
+- **Secure By Design**: Rated **9.8/10** in security audits with forced XSS sanitization.
+- **Pure ESM Build**: Optimized for modern bundlers (Vite, Webpack 5, etc.) with zero CJS bloat.
+- **Performance Optimized**: Heavy components like the Emoji Picker are **dynamic-imported** only when clicked.
+- **Framework Agnostic**: Native support for **React**, **Next.js**, **Vue**, **Angular**, and **Svelte**.
+- **Auto-Formatting Magic**: Intelligently parses pasted HTML strings into clean, formatted rich text.
+- **Professional UI/UX**: Modern aesthetics curated with a polished Slate & Indigo color palette.
+- **Table Support**: Natively insert and style interactive HTML tables.
+- **Emoji Picker**: Integrated searchable emoji library for expressive content.
+- **Dark Mode**: Sophisticated dark theme for premium developer experiences.
+- **Customizable Toolbar**: Granular control over tool visibility and layout.
+- **Smart Image Management**: Built-in client-side compression (WebP), loading states, custom upload adapters, live resizing, and native captions.
+
+---
+
+## 🌐 Documentation Website (Coming Soon!)
+We are currently building a dedicated official website to provide the best possible developer experience.
+
+**What to expect:**
+- **Interactive Playground**: Test all features live in your browser.
+- **Deep-Dive Guides**: Detailed integration steps for React, Next.js, Vue, and more.
+- **Full API Reference**: Comprehensive documentation for every method and option.
+- **Custom Theme Builder**: Visually design your editor's look and feel.
+
+🚀 **Stay tuned for the official launch!**
+
+---
+
+## 🛡 Security & XSS Protection
+Inkflow takes security seriously. It features a hard-coded strict whitelist in `DOMPurify` to ensure:
+- **Malicious Scripts:** Automatically stripped from pastes and API inputs.
+- **URI Blocking:** Blocks `javascript:`, `data:`, and `vbscript:` schemes.
+- **Link Hardening:** Every link is forced to have `rel="noopener noreferrer"`.
+- **Normalization:** Every structural cleanup is followed by a final sanitization pass.
+
+---
+
+> [!TIP]
+> The editor is optimized for performance. Features like the **Emoji Picker** are only loaded when needed, keeping your initial page load lightning fast.
+
+### 👎 Cons (Current Limitations)
+- Markdown shortcut typing (e.g., typing `#` for H1) is not natively supported yet.
+
+---
+
+## 📚 Technical Guides
+For deep-dive documentation, check out our local guides:
+- [**Usage Guide**](./USAGE_GUIDE.md): Configuration, API methods, and feature customization.
+- [**Technical Integration Guide**](./INTEGRATION_GUIDE.md): Step-by-step setup and advanced patterns.
+- [**Security Report**](./SECURITY_REPORT.md): Full breakdown of our XSS protection and hardening.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install inkflow-editor
+```
+
+## 🚀 Quick Start
+
+### Basic Usage (Vanilla JS)
+
+```javascript
+import { InkflowEditor } from 'inkflow-editor';
+import 'inkflow-editor/style'; // Simple style import
+
+const container = document.getElementById('editor');
+const editor = new InkflowEditor(container, {
+  placeholder: 'Type something beautiful...',
+  autofocus: true,
+  showStatus: true,
+  toolbarItems: ['bold', 'italic', 'heading', 'table', 'link'] // Customize tools
+});
+```
+
+### In React (Preventing Duplicates)
+In React **Strict Mode**, components mount twice in development. Always use the cleanup function to destroy the editor instance.
+
+```tsx
+import { useEffect, useRef } from 'react';
+import { InkflowEditor } from 'inkflow-editor';
+import 'inkflow-editor/style';
+
+export default function App() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<InkflowEditor | null>(null);
+
+  useEffect(() => {
+    if (containerRef.current && !editorRef.current) {
+      editorRef.current = new InkflowEditor(containerRef.current, {
+        placeholder: 'Start writing...',
+      });
+    }
+
+    return () => {
+      if (editorRef.current) {
+        editorRef.current.destroy();
+        editorRef.current = null;
+      }
+    };
+  }, []);
+
+  return <div ref={containerRef} />;
+}
+```
+
+### In Next.js (Safe Implementation)
+For Next.js, ensure the editor is only initialized on the client side using `useEffect`.
+
+```tsx
+"use client";
+import { useEffect, useRef } from 'react';
+import { InkflowEditor } from 'inkflow-editor';
+import 'inkflow-editor/style';
+
+export default function MyEditor() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    
+    const editor = new InkflowEditor(containerRef.current, {
+      onSave: (html) => console.log(html)
+    });
+
+    return () => editor.destroy(); // Crucial for HMR and Strict Mode
+  }, []);
+
+  return <div ref={containerRef} className="editor-shell" />;
+}
+```
+
+---
+
+## ⚙️ Configuration Options
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `placeholder` | `string` | `undefined` | The placeholder text when the editor is empty. |
+| `autofocus` | `boolean` | `false` | Focus the editor automatically on initialization. |
+| `dark` | `boolean` | `false` | Enable sophisticated Dark Mode theme. |
+| `showStatus` | `boolean` | `true` | Show/hide the "Saved at..." status in the toolbar. |
+| `toolbarItems` | `string[]` | `all` | Array of tool IDs to display (e.g., `['bold', 'table']`). |
+| `onSave` | `function` | `undefined` | Callback triggered when content is saved. |
+| `autoSaveInterval` | `number` | `1000` | Delay in ms before auto-save triggers after typing. |
+| `imageEndpoints` | `object` | `undefined` | Custom upload endpoint configuration: `{ upload: string }`. |
+| `cloudinaryFallback` | `object` | `undefined` | Cloudinary settings: `{ cloudName: string, uploadPreset: string }`. |
+| `maxImageSizeMB` | `number` | `5` | Maximum image size in MB (enforced pre and post compression). |
+
+## 🛠 API Methods
+
+- `destroy()`: **Crucial** - Cleans up DOM, event listeners, and memory leaks.
+- `getHTML()`: Returns the content as a sanitized HTML string.
+- `setHTML(html)`: Programmatically sets the editor content.
+- `focus()`: Forces focus onto the editor.
+- `setDarkMode(boolean)`: Dynamically toggle dark mode.
+- `insertTable(rows, cols)`: Programmatically insert a table.
+- `insertImage(url, id, isLoading)`: Programmatically insert an image with optional loading state.
+
+## 💡 Troubleshooting: Duplicate Editors?
+If you see multiple toolbars or editors, it's likely because:
+1. **React Strict Mode**: Ensure you call `editor.destroy()` in the `useEffect` cleanup.
+2. **Missing Cleanup**: The editor injects elements into the DOM; if you don't destroy it when the component unmounts, those elements remain.
+
+---
+
+## 📝 Patch Notes
+
+### v1.3.0 (The Inkflow Rebrand)
+- **New Name & Package**: Rebranded as **Inkflow** (`inkflow-editor`).
+- **Toolbar Positioning**: Support for `Top`, `Bottom`, `Left`, `Right`, and `Floating` positions.
+- **Premium Table UI**: Redesigned tables with rounded corners, zebra stripes, and better interactive states.
+- **Magic Format 2.0**: Added Typography and Accents themes with a dedicated Reset button.
+- **Refined Sider UI**: Centered vertical toolbars (76px) with pill-shaped controls and premium scrollbars.
+- **Paste Sanitization**: Hardened character limits to prevent bypass via pasting.
+
+### v1.2.0 (Premium UI & Image Power-Up)
+- **Lucide Icon Upgrade**: Replaced all 27 toolbar icons with high-quality, professional Lucide-styled SVGs.
+- **Initialization Loader**: Added a sophisticated shimmering glassmorphism loader for a smoother startup experience.
+- **Advanced Image Pipeline**: Added drag-and-drop support with automatic client-side **WebP compression**.
+- **Interactive UX**: Added loading state previews, 4-corner resizing handles, and native `<figcaption>` support.
+- **Glassmorphism Design**: Enhanced modals and loaders with modern backdrop-blur effects.
+
+### v1.1.2 (Security & Performance)
+- **Aggressive Size Optimization**: Reduced packed size to **28kB** by moving to ESM-only and pruning datasets.
+- **Hardened Sanitization**: Centralized all HTML processing through a unified security layer (Rating 9.8/10).
+- **Safe UI Rendering**: Eliminated `innerHTML` usage in all UI components for zero-trust text rendering.
+- **CJS Build Deprecation**: Removed CommonJS versions to optimize for modern ESM-based environments.
+
+### v1.1.1 (Quick Fixes)
+- Fixed missing `destroy()` export.
+- Resolved memory leaks in image resizer.
+- Prevented duplicate editors in React Strict Mode.
+
+---
+
+## 📄 License
+
+MIT © [Anuj Nainwal](https://github.com/anujnainwal)

package/dist/EmojiList-B-C3-zN2.js

@@ -0,0 +1,25 @@
+const e = [
+  { emoji: "😀", name: "grinning", category: "Smileys" },
+  { emoji: "😃", name: "smiley", category: "Smileys" },
+  { emoji: "😄", name: "smile", category: "Smileys" },
+  { emoji: "😁", name: "grin", category: "Smileys" },
+  { emoji: "😆", name: "laughing", category: "Smileys" },
+  { emoji: "😅", name: "sweat smile", category: "Smileys" },
+  { emoji: "😂", name: "joy", category: "Smileys" },
+  { emoji: "🙂", name: "slight smile", category: "Smileys" },
+  { emoji: "😉", name: "wink", category: "Smileys" },
+  { emoji: "😊", name: "blush", category: "Smileys" },
+  { emoji: "😍", name: "heart eyes", category: "Smileys" },
+  { emoji: "😘", name: "kissing heart", category: "Smileys" },
+  { emoji: "👍", name: "thumbs up", category: "Hands" },
+  { emoji: "👎", name: "thumbs down", category: "Hands" },
+  { emoji: "❤️", name: "heart", category: "Symbols" },
+  { emoji: "✨", name: "sparkles", category: "Symbols" },
+  { emoji: "🔥", name: "fire", category: "Symbols" },
+  { emoji: "✅", name: "check", category: "Symbols" },
+  { emoji: "🎉", name: "party", category: "Activities" },
+  { emoji: "🚀", name: "rocket", category: "Travel" }
+];
+export {
+  e as EMOJI_LIST
+};

package/dist/core/Editor.d.ts

@@ -0,0 +1,227 @@
+import { SelectionManager } from './SelectionManager';
+import { ImageManager } from './ImageManager';
+export type ToolbarPosition = 'top' | 'bottom' | 'left' | 'right' | 'floating';
+export interface ThemeConfig {
+    primaryColor?: string;
+    primaryHover?: string;
+    bgApp?: string;
+    bgEditor?: string;
+    toolbarBg?: string;
+    borderColor?: string;
+    borderFocus?: string;
+    textMain?: string;
+    textMuted?: string;
+    placeholder?: string;
+    btnHover?: string;
+    btnActive?: string;
+    radiusLg?: string;
+    radiusMd?: string;
+    radiusSm?: string;
+    shadowSm?: string;
+    shadowMd?: string;
+    shadowLg?: string;
+}
+export interface EditorOptions {
+    placeholder?: string;
+    autofocus?: boolean;
+    theme?: ThemeConfig;
+    dark?: boolean;
+    onSave?: (html: string) => void;
+    onSaving?: () => void;
+    onChange?: (html: string) => void;
+    autoSaveInterval?: number;
+    autoSave?: boolean;
+    showStatus?: boolean;
+    showLoader?: boolean;
+    toolbarItems?: string[];
+    imageEndpoints?: {
+        upload: string;
+        delete: string;
+    };
+    cloudinaryFallback?: {
+        cloudName: string;
+        uploadPreset: string;
+    };
+    maxImageSizeMB?: number;
+    onImageDelete?: (imageId?: string, imageUrl?: string) => void;
+    maxCharCount?: number;
+    showCharCount?: boolean;
+    strictCharLimit?: boolean;
+    toolbarPosition?: ToolbarPosition;
+}
+export declare class CoreEditor {
+    protected container: HTMLElement;
+    protected editableElement: HTMLElement;
+    selection: SelectionManager;
+    protected imageManager: ImageManager;
+    private history;
+    protected options: EditorOptions;
+    private saveTimeout;
+    private historyTimeout;
+    private pendingStyles;
+    private observer;
+    private floatingToolbar;
+    private magicStateMap;
+    private eventListeners;
+    private loaderElement;
+    private isUndoingRedoing;
+    constructor(container: HTMLElement, options?: EditorOptions);
+    /**
+     * Applies custom theme variables to the editor container.
+     */
+    private applyTheme;
+    /**
+     * Toggles dark mode on the editor.
+     */
+    setDarkMode(enabled: boolean): void;
+    /**
+     * Destroys the editor instance and cleans up.
+     */
+    destroy(): void;
+    protected checkPlaceholder(): void;
+    private addEventListener;
+    protected setupImageObserver(): void;
+    /**
+     * Wraps a raw <img> element in the interactive container
+     */
+    private wrapImage;
+    protected setupInputHandlers(): void;
+    /**
+     * Sets up strict character limit enforcement.
+     */
+    private setupLimitEnforcement;
+    /**
+     * Immediately records a history state if one is pending.
+     */
+    private flushHistoryRecord;
+    private handleInput;
+    private scheduleHistoryRecord;
+    private scheduleAutoSave;
+    save(): void;
+    undo(): void;
+    redo(): void;
+    protected triggerChange(): void;
+    private createLoader;
+    private hideLoader;
+    protected createEditableElement(): HTMLElement;
+    /**
+     * Focuses the editor.
+     */
+    focus(): void;
+    /**
+     * Executes a command on the current selection.
+     */
+    execute(command: string, value?: string | null): void;
+    /**
+     * Special handler for links to open them in a new tab when clicked.
+     */
+    private setupLinkClickHandlers;
+    /**
+     * Magic Format logic: Cycles through aesthetic presets for the entire document.
+     */
+    magicFormat(): void;
+    /**
+     * Resets all magic formatting (inline styles) from the document.
+     */
+    resetMagicFormat(): void;
+    private formatMagicTable;
+    private formatMagicImage;
+    private formatMagicHeading;
+    private formatMagicText;
+    /**
+     * Enriches text nodes within a block with emojis without breaking HTML structure.
+     */
+    private enrichBlockWithEmojis;
+    /**
+     * Inserts a table at the current selection.
+     */
+    insertTable(rows?: number, cols?: number): void;
+    /**
+     * Adds a row to the currently selected table.
+     */
+    addRow(): void;
+    /**
+     * Deletes the currently selected row.
+     */
+    deleteRow(): void;
+    /**
+     * Adds a column to the currently selected table.
+     */
+    addColumn(): void;
+    /**
+     * Deletes the currently selected column.
+     */
+    deleteColumn(): void;
+    private getSelectedTd;
+    private getSelectedTable;
+    /**
+     * Recursively removes a style property from all elements in a fragment.
+     */
+    private clearStyleRecursive;
+    /**
+     * Applies an inline style to the selection.
+     * This is used for properties like font-size (px) and font-family
+     * where execCommand is outdated or limited.
+     */
+    /**
+     * Applies an inline style to the selection.
+     * This is used for properties like font-size (px) and font-family
+     * where execCommand is outdated or limited.
+     */
+    setStyle(property: string, value: string, range?: Range): Range | null;
+    /**
+     * Applies a style to the block-level containers within the range.
+     */
+    private setBlockStyle;
+    /**
+     * Creates a link at the current selection.
+     * Ensures the link opens in a new tab with proper security attributes.
+     */
+    createLink(url: string): void;
+    /**
+     * Inserts an image at the current selection.
+     */
+    insertImage(url: string, id?: string, isLoading?: boolean): HTMLElement | null;
+    /**
+     * Returns the clean and optimized HTML content of the editor.
+     */
+    getHTML(): string;
+    /**
+     * Returns the plain text content of the editor.
+     */
+    getText(): string;
+    /**
+     * Returns the current character count based on plain text.
+     */
+    getCharCount(): number;
+    /**
+     * Normalizes the editor's content in-place.
+     */
+    normalize(): void;
+    private normalizationContainer;
+    /**
+     * Internal helper to strictly sanitize HTML strings.
+     */
+    private sanitize;
+    /**
+     * Optimizes HTML by fixing invalid nesting and removing redundant tags.
+     */
+    private normalizeHTML;
+    private handlePaste;
+    /**
+     * Sets the HTML content of the editor.
+     */
+    setHTML(html: string): void;
+    /**
+     * Internal access to the editable element.
+     */
+    get el(): HTMLElement;
+    /**
+     * Returns the editor options.
+     */
+    getOptions(): EditorOptions;
+    /**
+     * Internal helper to handle multiple files.
+     */
+    handleFiles(files: File[]): Promise<void>;
+}

package/dist/core/HistoryManager.d.ts

@@ -0,0 +1,36 @@
+export interface HistoryState {
+    html: string;
+    selection: {
+        startPath: number[];
+        startOffset: number;
+        endPath: number[];
+        endOffset: number;
+    } | null;
+}
+export declare class HistoryManager {
+    private stack;
+    private index;
+    private maxDepth;
+    constructor(initialState?: string);
+    /**
+     * Records a new state in the history stack.
+     * Clears any "redo" states if we record a new action.
+     */
+    record(html: string, selection: HistoryState['selection'] | null): void;
+    /**
+     * Returns the previous state if available.
+     */
+    undo(): HistoryState | null;
+    /**
+     * Returns the next state if available.
+     */
+    redo(): HistoryState | null;
+    /**
+     * Checks if undo is possible.
+     */
+    canUndo(): boolean;
+    /**
+     * Checks if redo is possible.
+     */
+    canRedo(): boolean;
+}

package/dist/core/ImageManager.d.ts

@@ -0,0 +1,28 @@
+import { CoreEditor } from './Editor';
+export declare class ImageManager {
+    private editor;
+    private activeContainer;
+    private isResizing;
+    private startX;
+    private startY;
+    private startWidth;
+    private startHeight;
+    private currentHandle;
+    private aspectRatio;
+    private boundMouseDown;
+    private boundMouseMove;
+    private boundMouseUp;
+    private boundKeyDown;
+    constructor(editor: CoreEditor);
+    private setupListeners;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleKeyDown;
+    destroy(): void;
+    private selectImage;
+    private deselectImage;
+    private startResize;
+    private handleResize;
+    private stopResize;
+}

package/dist/core/SelectionManager.d.ts

@@ -0,0 +1,52 @@
+/**
+ * SelectionManager handles wrapping the native browser Selection and Range APIs.
+ * This ensures consistent behavior across different environments and simplifies
+ * interaction with the editor's cursor and selected text.
+ */
+export declare class SelectionManager {
+    /**
+     * Returns the current selection object.
+     */
+    getSelection(): Selection | null;
+    /**
+     * Returns the first range of the current selection.
+     */
+    getRange(): Range | null;
+    /**
+     * Serializes the current selection into a path-based format relative to a root element.
+     * This allows restoring selection even if the DOM nodes are replaced but the structure is similar.
+     */
+    getSelectionPath(root: HTMLElement): {
+        startPath: number[];
+        startOffset: number;
+        endPath: number[];
+        endOffset: number;
+    } | null;
+    /**
+     * Restores selection from a path-based serialization.
+     */
+    restoreSelectionPath(root: HTMLElement, path: {
+        startPath: number[];
+        startOffset: number;
+        endPath: number[];
+        endOffset: number;
+    } | null): void;
+    private getNodePath;
+    private getNodeByPath;
+    /**
+     * Saves the current selection range.
+     */
+    saveSelection(): Range | null;
+    /**
+     * Restores a previously saved range.
+     */
+    restoreSelection(range: Range | null): void;
+    /**
+     * Checks if the selection is within a specific element.
+     */
+    isSelectionInElement(element: HTMLElement): boolean;
+    /**
+     * Clears the current selection.
+     */
+    clearSelection(): void;
+}

package/dist/core/plugins/ImageUploader.d.ts

@@ -0,0 +1,15 @@
+import { EditorOptions } from '../Editor';
+export interface UploadResult {
+    imageUrl: string;
+    imageId?: string;
+}
+export declare class ImageUploader {
+    /**
+     * Compresses an image file using HTML5 Canvas.
+     */
+    static compressImage(file: File, maxSizeMB: number): Promise<File | Blob>;
+    /**
+     * Uploads a file based on editor configuration.
+     */
+    static uploadFile(file: File | Blob, options: EditorOptions): Promise<UploadResult | null>;
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { CoreEditor, EditorOptions } from './core/Editor';
+import { Toolbar } from './ui/Toolbar';
+export declare class InkflowEditor extends CoreEditor {
+    private toolbar;
+    constructor(container: HTMLElement, options?: EditorOptions);
+    getToolbar(): Toolbar;
+    destroy(): void;
+}
+export { CoreEditor, type EditorOptions } from './core/Editor';
+export { SelectionManager } from './core/SelectionManager';
+export { Toolbar } from './ui/Toolbar';
+export { HistoryManager } from './core/HistoryManager';

package/dist/inkflow-editor.css

@@ -0,0 +1 @@
+.te-container,.te-emoji-picker,.te-modal,.te-floating-toolbar{--te-primary-color: #6366f1;--te-primary-hover: #4f46e5;--te-bg-app: #f8fafc;--te-bg-editor: #ffffff;--te-toolbar-bg: #ffffff;--te-border-color: #e2e8f0;--te-border-focus: #cbd5e1;--te-text-main: #1e293b;--te-text-muted: #64748b;--te-placeholder: #94a3b8;--te-btn-hover: #f1f5f9;--te-btn-active: #e2e8f0;--te-radius-lg: 12px;--te-radius-md: 8px;--te-radius-sm: 6px;--te-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--te-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--te-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--te-transition: all .2s cubic-bezier(.4, 0, .2, 1)}.te-container.te-dark,.te-emoji-picker.te-dark,.te-modal.te-dark,.te-floating-toolbar.te-dark{--te-primary-color: #818cf8 !important;--te-primary-hover: #6366f1 !important;--te-bg-app: #0f172a !important;--te-bg-editor: #1e293b !important;--te-toolbar-bg: #1e293b !important;--te-border-color: #334155 !important;--te-border-focus: #475569 !important;--te-text-main: #f8fafc !important;--te-text-muted: #94a3b8 !important;--te-placeholder: #64748b !important;--te-btn-hover: #334155 !important;--te-btn-active: #475569 !important;--te-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3) !important;--te-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5) !important;--te-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5) !important}.te-container,.te-container *,.te-emoji-picker,.te-emoji-picker *,.te-modal,.te-modal *,.te-floating-toolbar,.te-floating-toolbar *{box-sizing:border-box}.te-container{display:flex;flex-direction:column;height:500px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-lg);background:var(--te-bg-editor);box-shadow:var(--te-shadow-sm);overflow:hidden;font-family:Inter,-apple-system,system-ui,sans-serif;color:var(--te-text-main)!important;transition:var(--te-transition);max-width:100%;position:relative}.te-container:focus-within{border-color:var(--te-primary-color);box-shadow:0 0 0 4px #6366f11a,var(--te-shadow-md)}.te-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--te-border-color);background:var(--te-toolbar-bg);align-items:center;-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:10}.te-container.te-toolbar-bottom .te-toolbar{top:auto;bottom:0;border-bottom:none;border-top:1px solid var(--te-border-color);order:2}.te-container.te-toolbar-left,.te-container.te-toolbar-right{flex-direction:row}.te-container.te-toolbar-left .te-toolbar,.te-container.te-toolbar-right .te-toolbar{flex-direction:column;width:76px;height:100%;border-bottom:none;overflow-y:auto;position:relative;flex-wrap:nowrap;padding:16px 6px;align-items:center;scrollbar-width:thin;scrollbar-color:var(--te-border-color) transparent}.te-container.te-toolbar-left .te-toolbar::-webkit-scrollbar,.te-container.te-toolbar-right .te-toolbar::-webkit-scrollbar{width:4px}.te-container.te-toolbar-left .te-toolbar::-webkit-scrollbar-thumb,.te-container.te-toolbar-right .te-toolbar::-webkit-scrollbar-thumb{background:var(--te-border-color);border-radius:4px}.te-container.te-toolbar-left .te-toolbar{border-right:1px solid var(--te-border-color)}.te-container.te-toolbar-right .te-toolbar{border-left:1px solid var(--te-border-color);order:2}.te-container.te-toolbar-left .te-toolbar-status,.te-container.te-toolbar-right .te-toolbar-status{flex-direction:column;margin-top:auto;margin-left:0;padding:12px 0;border-top:1px solid var(--te-border-color);width:100%}.te-container.te-toolbar-left .te-divider,.te-container.te-toolbar-right .te-divider{width:36px;height:1px;margin:12px 0;opacity:.6}.te-container.te-toolbar-left .te-select,.te-container.te-toolbar-right .te-select{min-width:64px;width:64px;height:26px;padding:0 4px;background-image:none;text-align:center;font-size:10px;margin-bottom:6px;border-radius:13px;border-color:var(--te-border-color);background:var(--te-bg-editor)!important;color:var(--te-text-main)!important;box-shadow:var(--te-shadow-sm)}.te-container.te-toolbar-left .te-select:hover,.te-container.te-toolbar-right .te-select:hover{border-color:var(--te-primary-main);background:var(--te-bg-editor)!important}.te-container.te-toolbar-left .te-input,.te-container.te-toolbar-right .te-input{width:64px;height:26px;font-size:11px;margin-bottom:6px;border-radius:13px;text-align:center;border-color:var(--te-border-color);background:var(--te-bg-editor)!important;box-shadow:var(--te-shadow-sm)}.te-container.te-toolbar-left .te-input:hover,.te-container.te-toolbar-right .te-input:hover{border-color:var(--te-primary-main)}.te-container.te-toolbar-left .te-button+.te-button,.te-container.te-toolbar-right .te-button+.te-button{margin-top:4px}.te-container.te-toolbar-left .te-toolbar-status,.te-container.te-toolbar-right .te-toolbar-status{flex-direction:column;margin-top:auto;margin-left:0;padding:16px 4px;border-top:1px dashed var(--te-border-color);width:100%;gap:14px;align-items:center;font-size:10px;text-align:center;color:var(--te-text-muted)}.te-container.te-toolbar-left .te-toolbar-status>span,.te-container.te-toolbar-right .te-toolbar-status>span{margin:0!important;padding:0!important;border:none!important}.te-container.te-toolbar-floating .te-toolbar{display:none!important}.te-divider{width:1px;height:20px;background-color:var(--te-border-color);margin:0 6px}.te-button,.te-select,.te-input{display:flex;align-items:center;justify-content:center;height:32px;border:1px solid transparent;background:transparent;border-radius:var(--te-radius-sm);cursor:pointer;color:var(--te-text-muted);font-size:13px;font-weight:500;transition:var(--te-transition);box-sizing:border-box}.te-button{width:32px;padding:0}.te-button svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}.te-select{padding:0 24px 0 8px;min-width:120px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:12px;border:1px solid var(--te-border-color);background-color:var(--te-bg-editor)!important;color:var(--te-text-main)!important}.te-input{width:56px;padding:0 4px;text-align:center;cursor:text;border:1px solid var(--te-border-color);background-color:var(--te-bg-editor)!important;color:var(--te-text-main)!important}.te-color-picker{width:32px;height:32px;padding:4px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-sm);background:var(--te-bg-editor);cursor:pointer;box-sizing:border-box}.te-color-picker:hover{border-color:var(--te-border-focus)}.te-color-picker-wrapper{position:relative;display:inline-flex;width:32px;height:32px;border-radius:var(--te-radius-sm);transition:var(--te-transition)}.te-color-picker-wrapper:hover{background:var(--te-btn-hover)}.te-color-picker-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.te-color-icon{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1}.te-color-indicator{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:2px;box-shadow:0 1px 1px var(--te-shadow-sm)}.te-emoji-picker{position:absolute;width:280px;height:320px;background:var(--te-bg-editor);border:1px solid var(--te-border-color);border-radius:var(--te-radius-md);box-shadow:var(--te-shadow-lg);display:flex;flex-direction:column;z-index:1000;animation:te-fade-in .2s ease-out}@keyframes te-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.te-emoji-header{padding:12px;border-bottom:1px solid var(--te-border-color)}.te-emoji-search{width:100%;padding:8px 12px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-sm);background-color:var(--te-bg-editor)!important;color:var(--te-text-main)!important;font-size:13px;outline:none;transition:var(--te-transition)}.te-emoji-search:focus{border-color:var(--te-primary-color);box-shadow:0 0 0 2px #6366f11a}.te-emoji-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px}.te-emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.te-emoji-category-title{grid-column:span 7;padding:8px 4px 4px;font-size:11px;font-weight:600;color:var(--te-text-muted);text-transform:uppercase;letter-spacing:.05em}.te-emoji-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;border:none;background:transparent;cursor:pointer;border-radius:var(--te-radius-sm);transition:var(--te-transition)}.te-emoji-item:hover{background:var(--te-btn-hover);transform:scale(1.1)}.te-emoji-empty{grid-column:span 7;text-align:center;padding:20px;color:var(--te-text-muted);font-size:13px}.te-button:hover{background:var(--te-btn-hover);color:var(--te-text-main)!important}.te-select:hover,.te-input:hover{border-color:var(--te-border-focus)}.te-button.active{background:var(--te-btn-active);color:var(--te-primary-color);border-color:#6366f133}.te-select:focus,.te-input:focus{border-color:var(--te-primary-color);box-shadow:0 0 0 2px #6366f11a;outline:none;background:var(--te-bg-editor);color:var(--te-text-main)!important}.te-content{flex:1;overflow-y:auto;min-height:240px;padding:24px;line-height:1.25;outline:none;font-size:16px;position:relative}.te-content p{margin:0 0 1.25em}.te-content h1,.te-content h2,.te-content h3,.te-content h4,.te-content h5,.te-content h6{color:var(--te-text-main)!important;font-weight:700;margin:1rem 0 .5rem;line-height:1.1}.te-content h1:first-child,.te-content p:first-child{margin-top:0}.te-content h1{font-size:2.25em}.te-content h2{font-size:1.875em}.te-content h3{font-size:1.5em}.te-content h4{font-size:1.25em}.te-content[data-placeholder].is-empty:before{content:attr(data-placeholder);color:var(--te-placeholder);pointer-events:none;position:absolute;left:24px;right:24px;text-align:inherit;white-space:pre-wrap;overflow:hidden}.te-content pre{background-color:var(--te-bg-app);border:1px solid var(--te-border-color);border-radius:var(--te-radius-md);padding:16px;margin:1.5rem 0;overflow-x:auto;font-family:Fira Code,JetBrains Mono,Cascadia Code,monospace;font-size:14px;line-height:1.6;color:var(--te-text-main);tab-size:4}.te-content code{font-family:inherit;background:none;padding:0;color:inherit}.te-content :not(pre)>code{background-color:var(--te-bg-app);padding:2px 6px;border-radius:4px;font-size:.9em;border:1px solid var(--te-border-color)}.te-image-container{position:relative;display:inline-block;margin:1.5rem 0;max-width:100%;border-radius:var(--te-radius-lg);overflow:visible;transition:box-shadow var(--te-transition-fast);line-height:0}.te-image-container:hover{box-shadow:0 0 0 2px var(--te-primary-color)}.te-image-container.active{box-shadow:0 0 0 2px var(--te-primary-color),var(--te-shadow-lg)}.te-image{display:block;max-width:100%;height:auto;-webkit-user-select:none;user-select:none}.te-image-caption{font-size:.875rem;color:var(--te-text-muted);text-align:center;padding:.75rem;background:var(--te-bg-app);line-height:normal;border-bottom-left-radius:var(--te-radius-lg);border-bottom-right-radius:var(--te-radius-lg)}.te-image-caption:empty:before{content:attr(data-placeholder);color:var(--te-placeholder)}.te-image-resizer{position:absolute;width:10px;height:10px;background:var(--te-primary-color);border:1px solid var(--te-bg-editor);z-index:10;display:none}.te-image-container:hover .te-image-resizer,.te-image-container.active .te-image-resizer{display:block}.te-resizer-top-left{top:-5px;left:-5px;cursor:nwse-resize}.te-resizer-top-right{top:-5px;right:-5px;cursor:nesw-resize}.te-resizer-bottom-left{bottom:-5px;left:-5px;cursor:nesw-resize}.te-resizer-bottom-right{bottom:-5px;right:-5px;cursor:nwse-resize}.te-content.dragover{background:var(--te-btn-hover);outline:2px dashed var(--te-primary-color);outline-offset:-4px}.te-image-container.is-loading{position:relative;overflow:hidden;background:#f1f5f9;min-width:200px;min-height:150px}.te-image-container.is-loading .te-image{opacity:.3;filter:blur(4px);transition:opacity .5s ease,filter .5s ease}.te-image-container.is-loading:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#fff0 0,#fff6,#fff0);animation:te-skeleton-pulse 1.5s infinite}@keyframes te-skeleton-pulse{0%{transform:translate(-100%)}to{transform:translate(100%)}}.te-dark .te-image-container.is-loading{background:#334155}.te-table{width:100%;border-collapse:separate;border-spacing:0;margin:1.5rem 0;border:1px solid var(--te-border-color);border-radius:var(--te-radius-lg);table-layout:fixed;overflow:hidden;box-shadow:var(--te-shadow-sm)}.te-table th,.te-table td{border:1px solid var(--te-border-color);border-top:none;border-left:none;padding:14px 16px;min-height:48px;vertical-align:top;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--te-text-main);background:var(--te-bg-editor)}.te-table th:last-child,.te-table td:last-child{border-right:none}.te-table tr:last-child td{border-bottom:none}.te-table th{background:var(--te-bg-app);font-size:11px;font-weight:800;color:var(--te-text-muted);text-transform:uppercase;letter-spacing:.1em;text-align:left;border-bottom:2px solid var(--te-border-color)}.te-table tr:nth-child(2n) td{background:#f1f5f94d}.te-dark .te-table tr:nth-child(2n) td{background:#1e293b4d}.te-table tr:hover td{background:var(--te-btn-hover)}.te-table td:focus-within{background:var(--te-bg-editor);box-shadow:inset 0 0 0 2px var(--te-primary-color);z-index:1}.te-dark .te-table{border-color:var(--te-border-color);box-shadow:0 4px 6px -1px #0003}.te-dark .te-table th{background:#0f172a}.te-toolbar-loader{width:12px;height:12px;border:1.5px solid var(--te-primary-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;animation:te-spin 1s linear infinite}@keyframes te-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.te-toolbar-status{display:flex;align-items:center;gap:8px;transition:opacity .3s ease}.te-modal{position:absolute;width:280px;background:#fffc;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(226,232,240,.7);border-radius:var(--te-radius-lg);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a,0 0 0 1px #0000000d;display:flex;flex-direction:column;z-index:1000;animation:te-fade-in .25s cubic-bezier(.4,0,.2,1);padding:20px}.te-dark .te-modal{background:#1e293bcc;border-color:#334155b3;box-shadow:0 20px 25px -5px #0000004d,0 8px 10px -6px #0000004d,0 0 0 1px #ffffff0d}.te-modal-header{font-size:16px;font-weight:700;color:var(--te-text-main);margin-bottom:20px;letter-spacing:-.01em}.te-modal-field{margin-bottom:16px}.te-modal-field label{display:block;font-size:11px;font-weight:700;color:var(--te-text-muted);text-transform:uppercase;margin-bottom:6px;letter-spacing:.05em}.te-modal-input{width:100%;padding:10px 12px;border:1px solid var(--te-border-color);border-radius:var(--te-radius-md);background:var(--te-bg-editor);color:var(--te-text-main);font-size:14px;outline:none;transition:var(--te-transition)}.te-modal-input:focus{border-color:var(--te-primary-color);box-shadow:0 0 0 3px #6366f126;background:var(--te-bg-editor)}.te-modal-file-input{padding:8px;font-size:13px;cursor:pointer}.te-modal-file-input::-webkit-file-upload-button{background:var(--te-primary-color);color:#fff;border:none;padding:6px 12px;border-radius:6px;font-weight:600;margin-right:10px;cursor:pointer;transition:all .2s;font-family:inherit}.te-modal-file-input::-webkit-file-upload-button:hover{background:var(--te-primary-hover)}.te-modal-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}.te-modal-btn{padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--te-radius-md);cursor:pointer;transition:var(--te-transition);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center}.te-modal-btn-cancel{background:transparent;color:var(--te-text-muted);border:1px solid var(--te-border-color)}.te-modal-btn-cancel:hover{background:var(--te-btn-hover);color:var(--te-text-main);border-color:var(--te-border-focus)}.te-modal-btn-confirm{background:var(--te-primary-color);color:#fff;box-shadow:0 4px 6px -1px #6366f133}.te-modal-btn-confirm:hover{background:var(--te-primary-hover);transform:translateY(-1px);box-shadow:0 6px 8px -1px #6366f14d}.te-modal-btn-confirm:active{transform:translateY(0)}.te-floating-toolbar{background:var(--te-bg-editor);border:1px solid var(--te-border-color);border-radius:var(--te-radius-md);padding:4px;box-shadow:var(--te-shadow-lg);display:flex;gap:2px;pointer-events:auto;opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,background .3s ease}.te-floating-toolbar.te-floating-visible{opacity:1;transform:translateY(0)}.te-floating-btn{background:transparent;border:none;cursor:pointer;padding:6px;border-radius:var(--te-radius-sm);color:var(--te-text-muted);display:flex;align-items:center;justify-content:center;transition:all .2s ease}.te-floating-btn:hover{background:var(--te-btn-hover);color:var(--te-text-main)}.te-floating-btn svg{width:18px;height:18px;stroke:currentColor}.te-loader-overlay{position:absolute;inset:0;background:#f1f5f9e6;backdrop-filter:blur(12px) saturate(200%);-webkit-backdrop-filter:blur(12px) saturate(200%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;transition:opacity .4s cubic-bezier(.4,0,.2,1),visibility .4s;border-radius:var(--te-radius-lg)}.te-dark .te-loader-overlay{background:#0f172ae6}.te-loader-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.te-loader-spinner{width:48px;height:48px;border:4px solid var(--te-border-color);border-top-color:var(--te-primary-color);border-radius:50%;animation:te-spin 1s cubic-bezier(.4,0,.2,1) infinite;margin-bottom:24px;filter:drop-shadow(0 0 10px rgba(99,102,241,.2))}.te-loader-shimmer{width:140px;height:4px;background:var(--te-border-color);border-radius:2px;overflow:hidden;position:relative}.te-loader-shimmer:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#6366f100 0,#6366f166,#6366f100);animation:te-skeleton-pulse 1.5s infinite}.te-loader-text{font-size:13px;font-weight:600;color:var(--te-text-muted);letter-spacing:.02em;margin-top:12px}