snice 3.2.0 → 3.3.0

package/dist/components/doc/snice-doc.js

@@ -0,0 +1,626 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, styles, ready, dispose, watch, dispatch, render, css, html } from 'snice';
+
+var cssContent = ":host{display:block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';font-size:16px;line-height:1.5;color:var(--snice-doc-text-color,#333);background:var(--snice-doc-background,#fff);padding:var(--snice-doc-padding,40px 20px);min-height:var(--snice-doc-min-height,400px)}.doc-container{max-width:var(--snice-doc-max-width,900px);margin:0 auto}.doc-block{position:relative;margin:4px 0;min-height:1.5em}.doc-block:hover .block-handle{opacity:1}.block-handle{position:absolute;left:-30px;top:4px;width:20px;height:20px;opacity:0;cursor:grab;display:flex;align-items:center;justify-content:center;color:var(--snice-doc-muted-color,#999);transition:opacity .2s}.block-handle:active{cursor:grabbing}.block-handle svg{width:16px;height:16px}.block-content{outline:0;word-wrap:break-word;white-space:pre-wrap}.block-content:empty:before{content:attr(data-placeholder);color:var(--snice-doc-placeholder-color,#999);pointer-events:none}.block-paragraph{margin:2px 0}.block-heading-1 .block-content{font-size:2em;font-weight:700;line-height:1.2;margin:.67em 0}.block-heading-2 .block-content{font-size:1.5em;font-weight:700;line-height:1.3;margin:.75em 0}.block-heading-3 .block-content{font-size:1.25em;font-weight:700;line-height:1.4;margin:.83em 0}.block-bulleted-list{display:flex;align-items:flex-start}.block-bulleted-list:before{content:'•';margin-right:8px;margin-top:2px;color:var(--snice-doc-text-color,#333)}.block-numbered-list{display:flex;align-items:flex-start}.block-numbered-list:before{content:attr(data-number) '.';margin-right:8px;margin-top:2px;min-width:24px;color:var(--snice-doc-text-color,#333)}.block-todo{display:flex;align-items:flex-start}.todo-checkbox{margin-right:8px;margin-top:4px;cursor:pointer;flex-shrink:0}.block-todo.checked .block-content{text-decoration:line-through;opacity:.6}.block-code .block-content{font-family:Monaco,Menlo,'Ubuntu Mono',Consolas,source-code-pro,monospace;font-size:.9em;background:var(--snice-doc-code-background,#f6f8fa);border:1px solid var(--snice-doc-code-border,#e1e4e8);border-radius:6px;padding:16px;overflow-x:auto;white-space:pre}.block-quote .block-content{border-left:3px solid var(--snice-doc-quote-border,#e1e4e8);padding-left:16px;color:var(--snice-doc-muted-color,#666);font-style:italic}.block-divider{border:none;border-top:1px solid var(--snice-doc-divider-color,#e1e4e8);margin:16px 0;height:1px}.format-bold{font-weight:700}.format-italic{font-style:italic}.format-underline{text-decoration:underline}.format-strikethrough{text-decoration:line-through}.format-code{font-family:Monaco,Menlo,'Ubuntu Mono',Consolas,source-code-pro,monospace;font-size:.9em;background:var(--snice-doc-inline-code-background,rgba(175,184,193,.2));padding:2px 6px;border-radius:3px}.format-link{color:var(--snice-doc-link-color,#0969da);text-decoration:underline;cursor:pointer}.format-link:hover{opacity:.8}.block-menu{position:absolute;left:0;top:100%;background:var(--snice-doc-menu-background,#fff);border:1px solid var(--snice-doc-menu-border,#e1e4e8);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:300px;overflow-y:auto;z-index:1000;min-width:240px}.block-menu-item{display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;transition:background .2s}.block-menu-item.selected,.block-menu-item:hover{background:var(--snice-doc-menu-hover,#f6f8fa)}.block-menu-icon{width:20px;height:20px;flex-shrink:0;color:var(--snice-doc-muted-color,#666)}.block-menu-label{font-size:14px;color:var(--snice-doc-text-color,#333)}.format-toolbar{position:absolute;left:50%;transform:translateX(-50%);background:var(--snice-doc-toolbar-background,#1f2328);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px;display:flex;gap:2px;z-index:1000}.format-button{width:32px;height:32px;border:none;background:0 0;color:var(--snice-doc-toolbar-text,#fff);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .2s}.format-button:hover{background:var(--snice-doc-toolbar-hover,rgba(255,255,255,.1))}.format-button.active{background:var(--snice-doc-toolbar-active,rgba(88,166,255,.3))}.format-button svg{width:16px;height:16px}.doc-block.dragging{opacity:.5}.doc-block.drag-over{border-top:2px solid var(--snice-doc-primary-color,#0969da)}:host([readonly]) .block-handle,:host([readonly]) .block-menu,:host([readonly]) .format-toolbar{display:none}:host([readonly]) .block-content{cursor:default}:host([readonly]) .todo-checkbox{pointer-events:none}";
+
+/**
+ * Generate unique ID
+ */
+function generateId() {
+    return Math.random().toString(36).substring(2, 15);
+}
+/**
+ * Block menu items
+ */
+const BLOCK_MENU_ITEMS = [
+    {
+        type: 'paragraph',
+        label: 'Paragraph',
+        icon: '¶',
+        keywords: ['text', 'paragraph', 'p'],
+    },
+    {
+        type: 'heading-1',
+        label: 'Heading 1',
+        icon: 'H1',
+        keywords: ['h1', 'heading', 'title'],
+    },
+    {
+        type: 'heading-2',
+        label: 'Heading 2',
+        icon: 'H2',
+        keywords: ['h2', 'heading', 'subtitle'],
+    },
+    {
+        type: 'heading-3',
+        label: 'Heading 3',
+        icon: 'H3',
+        keywords: ['h3', 'heading'],
+    },
+    {
+        type: 'bulleted-list',
+        label: 'Bulleted List',
+        icon: '•',
+        keywords: ['ul', 'list', 'bullet'],
+    },
+    {
+        type: 'numbered-list',
+        label: 'Numbered List',
+        icon: '1.',
+        keywords: ['ol', 'list', 'number'],
+    },
+    {
+        type: 'todo',
+        label: 'To-do List',
+        icon: '☐',
+        keywords: ['todo', 'checkbox', 'task'],
+    },
+    {
+        type: 'code',
+        label: 'Code Block',
+        icon: '</>',
+        keywords: ['code', 'snippet'],
+    },
+    {
+        type: 'quote',
+        label: 'Quote',
+        icon: '"',
+        keywords: ['quote', 'blockquote'],
+    },
+    {
+        type: 'divider',
+        label: 'Divider',
+        icon: '―',
+        keywords: ['divider', 'separator', 'hr'],
+    },
+];
+/**
+ * snice-doc - Document editor component
+ *
+ * A Notion-like document editor with block-based editing
+ *
+ * @element snice-doc
+ *
+ * @fires {CustomEvent<{ blocks: DocBlock[] }>} doc-change - Fires when document changes
+ * @fires {CustomEvent<{ blockId: string }>} doc-focus - Fires when a block receives focus
+ * @fires {CustomEvent<{ blockId: string }>} doc-blur - Fires when a block loses focus
+ */
+let SniceDoc = (() => {
+    let _classDecorators = [element('snice-doc')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _blocks_decorators;
+    let _blocks_initializers = [];
+    let _blocks_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _container_decorators;
+    let _container_initializers = [];
+    let _container_extraInitializers = [];
+    let _firstBlockElement_decorators;
+    let _firstBlockElement_initializers = [];
+    let _firstBlockElement_extraInitializers = [];
+    let _styles_decorators;
+    let _init_decorators;
+    let _cleanup_decorators;
+    let _blocksChanged_decorators;
+    let _emitChange_decorators;
+    let _emitFocus_decorators;
+    let _emitBlur_decorators;
+    let _render_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.blocks = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _blocks_initializers, [{ id: generateId(), type: 'paragraph', content: '', formats: [] }]));
+            this.placeholder = (__runInitializers(this, _blocks_extraInitializers), __runInitializers(this, _placeholder_initializers, "Type '/' for commands..."));
+            this.readonly = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+            this.container = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _container_initializers, void 0));
+            this.firstBlockElement = (__runInitializers(this, _container_extraInitializers), __runInitializers(this, _firstBlockElement_initializers, void 0));
+            this.selection = (__runInitializers(this, _firstBlockElement_extraInitializers), null);
+            this.draggedBlock = null;
+            this.showBlockMenu = false;
+            this.blockMenuFilter = '';
+            this.blockMenuSelectedIndex = 0;
+            this.blockMenuBlockId = '';
+            this.handleKeyDown = (e) => {
+                if (this.readonly)
+                    return;
+                const target = e.target;
+                if (!target.classList.contains('block-content'))
+                    return;
+                const blockId = target.dataset.blockId;
+                const block = this.blocks.find((b) => b.id === blockId);
+                if (!block)
+                    return;
+                // Handle block menu navigation
+                if (this.showBlockMenu) {
+                    if (e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        this.blockMenuSelectedIndex = Math.min(this.blockMenuSelectedIndex + 1, this.getFilteredBlockMenuItems().length - 1);
+                        return;
+                    }
+                    if (e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        this.blockMenuSelectedIndex = Math.max(this.blockMenuSelectedIndex - 1, 0);
+                        return;
+                    }
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        const items = this.getFilteredBlockMenuItems();
+                        if (items[this.blockMenuSelectedIndex]) {
+                            this.selectBlockType(this.blockMenuBlockId, items[this.blockMenuSelectedIndex].type);
+                        }
+                        return;
+                    }
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        this.hideBlockMenu();
+                        return;
+                    }
+                }
+                // Enter - create new block
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    this.createNewBlock(blockId);
+                    return;
+                }
+                // Backspace on empty block - remove block
+                if (e.key === 'Backspace' && block.content === '' && this.blocks.length > 1) {
+                    e.preventDefault();
+                    this.removeBlock(blockId);
+                    return;
+                }
+                // Keyboard shortcuts
+                if (e.ctrlKey || e.metaKey) {
+                    if (e.key === 'b') {
+                        e.preventDefault();
+                        this.toggleFormat('bold');
+                    }
+                    else if (e.key === 'i') {
+                        e.preventDefault();
+                        this.toggleFormat('italic');
+                    }
+                    else if (e.key === 'u') {
+                        e.preventDefault();
+                        this.toggleFormat('underline');
+                    }
+                }
+            };
+            this.handlePaste = (e) => {
+                if (this.readonly)
+                    return;
+                // Allow default paste behavior for now
+                // Could add special handling for HTML/markdown paste
+            };
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _blocks_decorators = [property({ type: Array, attribute: false })];
+            _placeholder_decorators = [property({ type: String })];
+            _readonly_decorators = [property({ type: Boolean })];
+            _container_decorators = [query('.doc-container')];
+            _firstBlockElement_decorators = [query('.block-content')];
+            _styles_decorators = [styles()];
+            _init_decorators = [ready()];
+            _cleanup_decorators = [dispose()];
+            _blocksChanged_decorators = [watch('blocks')];
+            _emitChange_decorators = [dispatch('doc-change')];
+            _emitFocus_decorators = [dispatch('doc-focus')];
+            _emitBlur_decorators = [dispatch('doc-blur')];
+            _render_decorators = [render()];
+            __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _blocksChanged_decorators, { kind: "method", name: "blocksChanged", static: false, private: false, access: { has: obj => "blocksChanged" in obj, get: obj => obj.blocksChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitChange_decorators, { kind: "method", name: "emitChange", static: false, private: false, access: { has: obj => "emitChange" in obj, get: obj => obj.emitChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitFocus_decorators, { kind: "method", name: "emitFocus", static: false, private: false, access: { has: obj => "emitFocus" in obj, get: obj => obj.emitFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitBlur_decorators, { kind: "method", name: "emitBlur", static: false, private: false, access: { has: obj => "emitBlur" in obj, get: obj => obj.emitBlur }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _blocks_decorators, { kind: "field", name: "blocks", static: false, private: false, access: { has: obj => "blocks" in obj, get: obj => obj.blocks, set: (obj, value) => { obj.blocks = value; } }, metadata: _metadata }, _blocks_initializers, _blocks_extraInitializers);
+            __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(null, null, _container_decorators, { kind: "field", name: "container", static: false, private: false, access: { has: obj => "container" in obj, get: obj => obj.container, set: (obj, value) => { obj.container = value; } }, metadata: _metadata }, _container_initializers, _container_extraInitializers);
+            __esDecorate(null, null, _firstBlockElement_decorators, { kind: "field", name: "firstBlockElement", static: false, private: false, access: { has: obj => "firstBlockElement" in obj, get: obj => obj.firstBlockElement, set: (obj, value) => { obj.firstBlockElement = value; } }, metadata: _metadata }, _firstBlockElement_initializers, _firstBlockElement_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        styles() {
+            return css /*css*/ `${cssContent}`;
+        }
+        init() {
+            this.addEventListener('keydown', this.handleKeyDown);
+            this.addEventListener('paste', this.handlePaste);
+        }
+        cleanup() {
+            this.removeEventListener('keydown', this.handleKeyDown);
+            this.removeEventListener('paste', this.handlePaste);
+        }
+        blocksChanged() {
+            this.emitChange();
+        }
+        emitChange() {
+            return new CustomEvent('doc-change', {
+                detail: { blocks: this.blocks },
+                bubbles: true,
+                composed: true,
+            });
+        }
+        emitFocus(blockId) {
+            return new CustomEvent('doc-focus', {
+                detail: { blockId },
+                bubbles: true,
+                composed: true,
+            });
+        }
+        emitBlur(blockId) {
+            return new CustomEvent('doc-blur', {
+                detail: { blockId },
+                bubbles: true,
+                composed: true,
+            });
+        }
+        /**
+         * Get current blocks
+         */
+        getBlocks() {
+            return [...this.blocks];
+        }
+        /**
+         * Set blocks
+         */
+        setBlocks(blocks) {
+            this.blocks = blocks.map((b) => ({ ...b }));
+        }
+        /**
+         * Export as JSON
+         */
+        toJSON() {
+            return JSON.stringify(this.blocks, null, 2);
+        }
+        /**
+         * Import from JSON
+         */
+        fromJSON(json) {
+            try {
+                const blocks = JSON.parse(json);
+                if (Array.isArray(blocks)) {
+                    this.blocks = blocks;
+                }
+            }
+            catch (error) {
+                console.error('Failed to parse JSON:', error);
+            }
+        }
+        /**
+         * Export as Markdown
+         */
+        toMarkdown() {
+            return this.blocks
+                .map((block) => {
+                switch (block.type) {
+                    case 'heading-1':
+                        return `# ${block.content}`;
+                    case 'heading-2':
+                        return `## ${block.content}`;
+                    case 'heading-3':
+                        return `### ${block.content}`;
+                    case 'bulleted-list':
+                        return `- ${block.content}`;
+                    case 'numbered-list':
+                        return `1. ${block.content}`;
+                    case 'todo':
+                        return `- [${block.checked ? 'x' : ' '}] ${block.content}`;
+                    case 'code':
+                        return `\`\`\`\n${block.content}\n\`\`\``;
+                    case 'quote':
+                        return `> ${block.content}`;
+                    case 'divider':
+                        return '---';
+                    default:
+                        return block.content;
+                }
+            })
+                .join('\n\n');
+        }
+        /**
+         * Export as HTML
+         */
+        toHTML() {
+            return this.blocks
+                .map((block) => {
+                const content = this.escapeHtml(block.content);
+                switch (block.type) {
+                    case 'heading-1':
+                        return `<h1>${content}</h1>`;
+                    case 'heading-2':
+                        return `<h2>${content}</h2>`;
+                    case 'heading-3':
+                        return `<h3>${content}</h3>`;
+                    case 'bulleted-list':
+                        return `<ul><li>${content}</li></ul>`;
+                    case 'numbered-list':
+                        return `<ol><li>${content}</li></ol>`;
+                    case 'todo':
+                        return `<input type="checkbox" ${block.checked ? 'checked' : ''}>${content}`;
+                    case 'code':
+                        return `<pre><code>${content}</code></pre>`;
+                    case 'quote':
+                        return `<blockquote>${content}</blockquote>`;
+                    case 'divider':
+                        return '<hr>';
+                    default:
+                        return `<p>${content}</p>`;
+                }
+            })
+                .join('\n');
+        }
+        /**
+         * Focus the editor
+         */
+        focus() {
+            this.firstBlockElement?.focus();
+        }
+        /**
+         * Clear all content
+         */
+        clear() {
+            this.blocks = [{ id: generateId(), type: 'paragraph', content: '', formats: [] }];
+        }
+        escapeHtml(text) {
+            return text
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#039;');
+        }
+        handleInput(blockId, e) {
+            if (this.readonly)
+                return;
+            const target = e.target;
+            const content = target.textContent || '';
+            const blockIndex = this.blocks.findIndex((b) => b.id === blockId);
+            if (blockIndex === -1)
+                return;
+            // Check for block menu trigger
+            if (content.startsWith('/')) {
+                this.showBlockMenuFor(blockId, content.slice(1));
+            }
+            else {
+                this.hideBlockMenu();
+            }
+            // Update block content
+            this.blocks = this.blocks.map((b) => b.id === blockId ? { ...b, content: content } : b);
+        }
+        handleFocus(blockId) {
+            this.emitFocus(blockId);
+        }
+        handleBlur(blockId) {
+            this.emitBlur(blockId);
+        }
+        createNewBlock(afterBlockId) {
+            const index = this.blocks.findIndex((b) => b.id === afterBlockId);
+            if (index === -1)
+                return;
+            const newBlock = {
+                id: generateId(),
+                type: 'paragraph',
+                content: '',
+                formats: [],
+            };
+            this.blocks = [
+                ...this.blocks.slice(0, index + 1),
+                newBlock,
+                ...this.blocks.slice(index + 1),
+            ];
+            // Focus new block
+            setTimeout(() => {
+                const el = this.shadowRoot?.querySelector(`[data-block-id="${newBlock.id}"]`);
+                el?.focus();
+            });
+        }
+        removeBlock(blockId) {
+            const index = this.blocks.findIndex((b) => b.id === blockId);
+            if (index === -1)
+                return;
+            this.blocks = this.blocks.filter((b) => b.id !== blockId);
+            // Focus previous block
+            if (index > 0) {
+                setTimeout(() => {
+                    const prevBlock = this.blocks[index - 1];
+                    const el = this.shadowRoot?.querySelector(`[data-block-id="${prevBlock.id}"]`);
+                    el?.focus();
+                });
+            }
+        }
+        toggleFormat(format) {
+            // TODO: Implement inline formatting
+            console.log('Toggle format:', format);
+        }
+        showBlockMenuFor(blockId, filter) {
+            this.showBlockMenu = true;
+            this.blockMenuBlockId = blockId;
+            this.blockMenuFilter = filter;
+            this.blockMenuSelectedIndex = 0;
+        }
+        hideBlockMenu() {
+            this.showBlockMenu = false;
+            this.blockMenuFilter = '';
+            this.blockMenuSelectedIndex = 0;
+        }
+        getFilteredBlockMenuItems() {
+            if (!this.blockMenuFilter)
+                return BLOCK_MENU_ITEMS;
+            const filter = this.blockMenuFilter.toLowerCase();
+            return BLOCK_MENU_ITEMS.filter((item) => item.label.toLowerCase().includes(filter) ||
+                item.keywords.some((k) => k.includes(filter)));
+        }
+        selectBlockType(blockId, type) {
+            this.blocks = this.blocks.map((b) => b.id === blockId ? { ...b, type, content: '' } : b);
+            this.hideBlockMenu();
+            // Focus the block
+            setTimeout(() => {
+                const el = this.shadowRoot?.querySelector(`[data-block-id="${blockId}"]`);
+                el?.focus();
+            });
+        }
+        handleBlockMenuItemClick(blockId, type) {
+            this.selectBlockType(blockId, type);
+        }
+        handleTodoToggle(blockId) {
+            if (this.readonly)
+                return;
+            this.blocks = this.blocks.map((b) => b.id === blockId ? { ...b, checked: !b.checked } : b);
+        }
+        handleDragStart(blockId, e) {
+            if (this.readonly)
+                return;
+            this.draggedBlock = blockId;
+            e.dataTransfer.effectAllowed = 'move';
+        }
+        handleDragOver(blockId, e) {
+            if (this.readonly)
+                return;
+            if (!this.draggedBlock || this.draggedBlock === blockId)
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+        }
+        handleDrop(blockId, e) {
+            if (this.readonly)
+                return;
+            e.preventDefault();
+            if (!this.draggedBlock || this.draggedBlock === blockId)
+                return;
+            const draggedIndex = this.blocks.findIndex((b) => b.id === this.draggedBlock);
+            const targetIndex = this.blocks.findIndex((b) => b.id === blockId);
+            if (draggedIndex === -1 || targetIndex === -1)
+                return;
+            const newBlocks = [...this.blocks];
+            const [draggedBlock] = newBlocks.splice(draggedIndex, 1);
+            newBlocks.splice(targetIndex, 0, draggedBlock);
+            this.blocks = newBlocks;
+            this.draggedBlock = null;
+        }
+        handleDragEnd() {
+            this.draggedBlock = null;
+        }
+        render() {
+            return html `
+      <div class="doc-container">
+        ${this.blocks.map((block, index) => this.renderBlock(block, index))}
+        ${this.showBlockMenu ? this.renderBlockMenu() : ''}
+      </div>
+    `;
+        }
+        renderBlock(block, index) {
+            const placeholder = index === 0 && !block.content ? this.placeholder : "Type '/' for commands";
+            const isDivider = block.type === 'divider';
+            if (isDivider) {
+                return html `
+        <div class="doc-block block-divider" data-block-id="${block.id}">
+          <div
+            class="block-handle"
+            draggable="${!this.readonly}"
+            @dragstart="${(e) => this.handleDragStart(block.id, e)}"
+            @dragend="${() => this.handleDragEnd()}"
+          >
+            <svg viewBox="0 0 16 16" fill="currentColor">
+              <circle cx="3" cy="3" r="1.5" />
+              <circle cx="8" cy="3" r="1.5" />
+              <circle cx="3" cy="8" r="1.5" />
+              <circle cx="8" cy="8" r="1.5" />
+              <circle cx="3" cy="13" r="1.5" />
+              <circle cx="8" cy="13" r="1.5" />
+            </svg>
+          </div>
+        </div>
+      `;
+            }
+            const isTodo = block.type === 'todo';
+            const isNumberedList = block.type === 'numbered-list';
+            return html `
+      <div
+        class="doc-block block-${block.type} ${block.checked ? 'checked' : ''} ${this
+                .draggedBlock === block.id
+                ? 'dragging'
+                : ''}"
+        data-block-id="${block.id}"
+        @dragover="${(e) => this.handleDragOver(block.id, e)}"
+        @drop="${(e) => this.handleDrop(block.id, e)}"
+        data-number="${isNumberedList ? index + 1 : ''}"
+      >
+        <div
+          class="block-handle"
+          draggable="${!this.readonly}"
+          @dragstart="${(e) => this.handleDragStart(block.id, e)}"
+          @dragend="${() => this.handleDragEnd()}"
+        >
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <circle cx="3" cy="3" r="1.5" />
+            <circle cx="8" cy="3" r="1.5" />
+            <circle cx="3" cy="8" r="1.5" />
+            <circle cx="8" cy="8" r="1.5" />
+            <circle cx="3" cy="13" r="1.5" />
+            <circle cx="8" cy="13" r="1.5" />
+          </svg>
+        </div>
+        ${isTodo
+                ? html `<input
+              type="checkbox"
+              class="todo-checkbox"
+              ?checked="${block.checked}"
+              @change="${() => this.handleTodoToggle(block.id)}"
+            />`
+                : ''}
+        <div
+          class="block-content"
+          contenteditable="${!this.readonly}"
+          data-block-id="${block.id}"
+          data-placeholder="${placeholder}"
+          @input="${(e) => this.handleInput(block.id, e)}"
+          @focus="${() => this.handleFocus(block.id)}"
+          @blur="${() => this.handleBlur(block.id)}"
+        >
+          ${block.content}
+        </div>
+      </div>
+    `;
+        }
+        renderBlockMenu() {
+            const items = this.getFilteredBlockMenuItems();
+            return html `
+      <div class="block-menu">
+        ${items.map((item, index) => html `
+            <div
+              class="block-menu-item ${index === this.blockMenuSelectedIndex ? 'selected' : ''}"
+              @click="${() => this.handleBlockMenuItemClick(this.blockMenuBlockId, item.type)}"
+            >
+              <div class="block-menu-icon">${item.icon}</div>
+              <div class="block-menu-label">${item.label}</div>
+            </div>
+          `)}
+        ${items.length === 0
+                ? html `<div class="block-menu-item">
+              <div class="block-menu-label">No results</div>
+            </div>`
+                : ''}
+      </div>
+    `;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceDoc };
+//# sourceMappingURL=snice-doc.js.map