@nuraly/lumenjs 0.1.3 → 0.2.0

package/dist/editor/ai-project-panel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * AI Project Panel — right-side sliding chat panel for project-wide conversations.
+ * For things like "add a new page", "set up auth", "change the color scheme everywhere".
+ * Streams responses from OpenCode AI coding agent via the editor API.
+ */
+export declare function createAiProjectPanel(): HTMLDivElement;
+export declare function showAiProjectPanel(): void;
+export declare function hideAiProjectPanel(): void;
+export declare function isAiProjectPanelOpen(): boolean;
+/** Send a message programmatically (e.g. from the toolbar page AI input) */
+export declare function sendProjectMessage(text: string): void;

package/dist/editor/ai-project-panel.js

@@ -0,0 +1,332 @@
+/**
+ * AI Project Panel — right-side sliding chat panel for project-wide conversations.
+ * For things like "add a new page", "set up auth", "change the color scheme everywhere".
+ * Streams responses from OpenCode AI coding agent via the editor API.
+ */
+import { streamAiChat, rollbackAiTurn, checkAiStatus } from './editor-api-client.js';
+import { renderMarkdown } from './ai-markdown.js';
+const PROJECT_SUGGESTIONS = [
+    { label: 'Add a page', prompt: 'Add a new page to the project' },
+    { label: 'Add API route', prompt: 'Add a new API route' },
+    { label: 'Dark theme', prompt: 'Add a dark theme to the entire project' },
+    { label: 'Add auth', prompt: 'Set up authentication for the project' },
+    { label: 'Add i18n', prompt: 'Add internationalization support' },
+    { label: 'Improve SEO', prompt: 'Improve SEO across all pages' },
+];
+let panel;
+let messagesContainer;
+let inputEl;
+let sendBtn;
+let sessionId;
+let activeController = null;
+let aiConfigured = false;
+export function createAiProjectPanel() {
+    panel = document.createElement('div');
+    panel.id = 'nk-ai-project';
+    panel.innerHTML = `
+    <div class="nk-aip-header">
+      <span class="nk-aip-title">✦ Project AI</span>
+      <div style="flex:1"></div>
+      <button class="nk-aip-close" title="Close">✕</button>
+    </div>
+    <div class="nk-aip-messages"></div>
+    <div class="nk-aip-suggestions">
+      ${PROJECT_SUGGESTIONS.map(s => `<button class="nk-aip-chip" data-prompt="${s.prompt.replace(/"/g, '&quot;')}">${s.label}</button>`).join('')}
+    </div>
+    <div class="nk-aip-input-row">
+      <textarea class="nk-aip-input" placeholder="Ask about your project..." rows="1"></textarea>
+      <button class="nk-aip-send" disabled title="Send">▶</button>
+    </div>
+  `;
+    const style = document.createElement('style');
+    style.textContent = `
+    #nk-ai-project {
+      position: fixed; top: 44px; right: 0; bottom: 0; width: 380px;
+      display: none; flex-direction: column;
+      background: #1e1b2e; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif;
+      font-size: 13px; z-index: 99999;
+      border-left: 1px solid #334155;
+      box-shadow: -4px 0 20px rgba(0,0,0,0.4);
+      transition: transform 0.2s ease;
+    }
+    #nk-ai-project.open { display: flex; }
+    .nk-aip-header {
+      display: flex; align-items: center; gap: 8px;
+      padding: 0 14px; height: 42px; min-height: 42px;
+      border-bottom: 1px solid #334155;
+    }
+    .nk-aip-title { font-weight: 700; font-size: 13px; color: #7c3aed; }
+    .nk-aip-close {
+      background: transparent; border: none; color: #94a3b8; cursor: pointer;
+      font-size: 16px; padding: 4px 8px; border-radius: 4px;
+      font-family: inherit; line-height: 1;
+    }
+    .nk-aip-close:hover { background: #334155; color: #e2e8f0; }
+    .nk-aip-messages {
+      flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
+    }
+    .nk-aip-messages:empty::after {
+      content: 'Ask me anything about your project — add pages, set up features, change styles across the whole app.';
+      color: #64748b; font-size: 12px; line-height: 1.6; text-align: center;
+      padding: 40px 20px;
+    }
+    .nk-aip-msg {
+      max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 13px;
+      line-height: 1.5; word-wrap: break-word;
+    }
+    .nk-aip-msg.user {
+      align-self: flex-end; background: #7c3aed; color: #fff; border-bottom-right-radius: 4px;
+    }
+    .nk-aip-msg.assistant {
+      align-self: flex-start; background: #2d2a3e; color: #e2e8f0; border-bottom-left-radius: 4px;
+    }
+    .nk-aip-msg.assistant p { margin: 0 0 6px 0; }
+    .nk-aip-msg.assistant p:last-child { margin-bottom: 0; }
+    .nk-aip-msg.assistant ul, .nk-aip-msg.assistant ol { margin: 4px 0; padding-left: 18px; }
+    .nk-aip-msg.assistant li { margin: 2px 0; }
+    .nk-aip-msg.assistant strong { font-weight: 600; }
+    .nk-ai-code {
+      background: #1a1a2e; padding: 1px 4px; border-radius: 3px;
+      font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px;
+    }
+    .nk-ai-pre {
+      background: #1a1a2e; padding: 8px; border-radius: 6px;
+      overflow-x: auto; margin: 4px 0; position: relative;
+    }
+    .nk-ai-pre code {
+      font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px;
+      background: none; padding: 0; white-space: pre;
+    }
+    .nk-ai-code-lang {
+      position: absolute; top: 4px; right: 6px;
+      font-size: 9px; color: #64748b; font-family: system-ui, sans-serif;
+    }
+    .nk-aip-typing {
+      align-self: flex-start; padding: 8px 16px; background: #2d2a3e; border-radius: 12px;
+      border-bottom-left-radius: 4px;
+    }
+    .nk-aip-typing span {
+      display: inline-block; width: 6px; height: 6px; background: #94a3b8;
+      border-radius: 50%; margin: 0 2px; animation: nk-aip-dot 1.2s infinite;
+    }
+    .nk-aip-typing span:nth-child(2) { animation-delay: 0.2s; }
+    .nk-aip-typing span:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes nk-aip-dot {
+      0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+      40% { opacity: 1; transform: scale(1); }
+    }
+    .nk-aip-suggestions {
+      display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px;
+      border-top: 1px solid #334155;
+    }
+    .nk-aip-chip {
+      background: transparent; border: 1px solid #334155; border-radius: 14px;
+      padding: 5px 12px; color: #94a3b8; cursor: pointer; font-size: 11px;
+      white-space: nowrap; font-family: inherit; transition: all 0.15s;
+    }
+    .nk-aip-chip:hover { border-color: #7c3aed; color: #e2e8f0; }
+    .nk-aip-input-row {
+      display: flex; gap: 8px; padding: 10px 14px;
+      border-top: 1px solid #334155; align-items: flex-end;
+    }
+    .nk-aip-input {
+      flex: 1; background: #2d2a3e; border: 1px solid #334155; border-radius: 8px;
+      color: #e2e8f0; font-size: 13px; padding: 8px 12px;
+      font-family: inherit; resize: none; max-height: 80px; overflow-y: auto;
+      line-height: 1.4; outline: none;
+    }
+    .nk-aip-input::placeholder { color: #64748b; }
+    .nk-aip-input:focus { border-color: #7c3aed; }
+    .nk-aip-send {
+      background: #7c3aed; border: none; color: #fff; width: 34px; height: 34px;
+      border-radius: 8px; cursor: pointer; font-size: 13px;
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0; transition: opacity 0.15s;
+    }
+    .nk-aip-send:disabled { opacity: 0.4; cursor: default; }
+    .nk-aip-send:not(:disabled):hover { background: #6d28d9; }
+    .nk-aip-msg-actions {
+      display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px;
+    }
+    .nk-aip-badge {
+      background: #334155; color: #94a3b8; padding: 2px 8px; border-radius: 8px;
+    }
+    .nk-aip-rollback {
+      background: transparent; border: none; color: #f59e0b; cursor: pointer;
+      font-size: 11px; padding: 2px 4px; font-family: inherit;
+    }
+    .nk-aip-rollback:hover { text-decoration: underline; }
+    @media (max-width: 640px) {
+      #nk-ai-project { width: 100%; }
+    }
+  `;
+    panel.appendChild(style);
+    document.body.appendChild(panel);
+    messagesContainer = panel.querySelector('.nk-aip-messages');
+    inputEl = panel.querySelector('.nk-aip-input');
+    sendBtn = panel.querySelector('.nk-aip-send');
+    // Close
+    panel.querySelector('.nk-aip-close').addEventListener('click', () => hideAiProjectPanel());
+    // Send
+    sendBtn.addEventListener('click', () => sendMessage());
+    // Input auto-resize + enable/disable
+    inputEl.addEventListener('input', () => {
+        inputEl.style.height = 'auto';
+        inputEl.style.height = Math.min(inputEl.scrollHeight, 80) + 'px';
+        sendBtn.disabled = !inputEl.value.trim();
+    });
+    // Enter to send
+    inputEl.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            if (inputEl.value.trim())
+                sendMessage();
+        }
+    });
+    // Suggestion chips
+    panel.querySelectorAll('.nk-aip-chip').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const prompt = btn.dataset.prompt || '';
+            inputEl.value = prompt;
+            sendBtn.disabled = false;
+            sendMessage();
+        });
+    });
+    // Check AI status on creation
+    checkAiStatus().then(status => {
+        aiConfigured = status.configured;
+    }).catch(() => {
+        aiConfigured = false;
+    });
+    return panel;
+}
+export function showAiProjectPanel() {
+    panel.classList.add('open');
+    inputEl.focus();
+}
+export function hideAiProjectPanel() {
+    panel.classList.remove('open');
+}
+export function isAiProjectPanelOpen() {
+    return panel.classList.contains('open');
+}
+/** Send a message programmatically (e.g. from the toolbar page AI input) */
+export function sendProjectMessage(text) {
+    inputEl.value = text;
+    sendMessage();
+}
+function addUserMessage(text) {
+    const msg = document.createElement('div');
+    msg.className = 'nk-aip-msg user';
+    msg.textContent = text;
+    messagesContainer.appendChild(msg);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+function createStreamingMessage() {
+    const msg = document.createElement('div');
+    msg.className = 'nk-aip-msg assistant';
+    const textEl = document.createElement('div');
+    textEl.className = 'nk-aip-msg-text';
+    msg.appendChild(textEl);
+    messagesContainer.appendChild(msg);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    return msg;
+}
+function finalizeAssistantMessage(msg, turnId) {
+    if (turnId) {
+        // Remove rollback from previous messages
+        messagesContainer.querySelectorAll('.nk-aip-msg.assistant .nk-aip-rollback').forEach((btn) => {
+            if (!msg.contains(btn))
+                btn.style.display = 'none';
+        });
+        const actions = document.createElement('div');
+        actions.className = 'nk-aip-msg-actions';
+        actions.innerHTML = `
+      <span class="nk-aip-badge">Changes applied</span>
+      <button class="nk-aip-rollback">↩ Rollback</button>
+    `;
+        actions.querySelector('.nk-aip-rollback').addEventListener('click', async () => {
+            try {
+                await rollbackAiTurn(turnId);
+                const badge = actions.querySelector('.nk-aip-badge');
+                if (badge) {
+                    badge.textContent = 'Rolled back';
+                    badge.style.color = '#f59e0b';
+                }
+                const btn = actions.querySelector('.nk-aip-rollback');
+                if (btn)
+                    btn.style.display = 'none';
+            }
+            catch (err) {
+                console.error('[ai-project] Rollback failed:', err);
+            }
+        });
+        msg.appendChild(actions);
+    }
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+function addAssistantError(message) {
+    const msg = document.createElement('div');
+    msg.className = 'nk-aip-msg assistant';
+    msg.style.borderColor = '#ef4444';
+    const textEl = document.createElement('div');
+    textEl.className = 'nk-aip-msg-text';
+    textEl.textContent = message;
+    textEl.style.color = '#fca5a5';
+    msg.appendChild(textEl);
+    messagesContainer.appendChild(msg);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+function sendMessage() {
+    const text = inputEl.value.trim();
+    if (!text)
+        return;
+    if (!aiConfigured) {
+        addUserMessage(text);
+        inputEl.value = '';
+        inputEl.style.height = 'auto';
+        sendBtn.disabled = true;
+        addAssistantError('AI not available — start OpenCode server to enable AI coding.');
+        return;
+    }
+    // Abort any active request
+    if (activeController) {
+        activeController.abort();
+        activeController = null;
+    }
+    addUserMessage(text);
+    inputEl.value = '';
+    inputEl.style.height = 'auto';
+    sendBtn.disabled = true;
+    // Typing indicator
+    const typing = document.createElement('div');
+    typing.className = 'nk-aip-typing';
+    typing.innerHTML = '<span></span><span></span><span></span>';
+    messagesContainer.appendChild(typing);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    const streamMsg = createStreamingMessage();
+    const textEl = streamMsg.querySelector('.nk-aip-msg-text');
+    let rawText = '';
+    activeController = streamAiChat('project', text, {}, sessionId, {
+        onToken: (token) => {
+            typing.remove();
+            rawText += token;
+            textEl.innerHTML = renderMarkdown(rawText);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        },
+        onDone: (result) => {
+            typing.remove();
+            sessionId = result.sessionId;
+            const finalText = rawText || result.fullText || 'Done.';
+            textEl.innerHTML = renderMarkdown(finalText);
+            finalizeAssistantMessage(streamMsg, result.turnId);
+            activeController = null;
+        },
+        onError: (message) => {
+            typing.remove();
+            streamMsg.remove();
+            addAssistantError(message);
+            activeController = null;
+        },
+    });
+}

package/dist/editor/ast-modification.d.ts

@@ -0,0 +1,11 @@
+export interface AstModification {
+    type: 'setAttribute' | 'removeAttribute' | 'insertElement' | 'removeElement' | 'setTextContent';
+    elementSelector: string;
+    /** Source line number from data-nk-source — used to find the exact element in the template */
+    sourceLine?: number;
+    attributeName?: string;
+    attributeValue?: string;
+    parentSelector?: string;
+    position?: 'before' | 'after' | 'firstChild' | 'lastChild';
+    html?: string;
+}

package/dist/editor/ast-modification.js

@@ -0,0 +1 @@
+export {};

package/dist/editor/ast-service.d.ts

@@ -0,0 +1,30 @@
+import { AstModification } from './ast-modification.js';
+/**
+ * AST Service — parses TypeScript Lit components and applies modifications
+ * to the html`` tagged template literals.
+ *
+ * Uses ts-morph to locate the render() method's template literal,
+ * then applies string-level HTML modifications.
+ */
+export declare class AstService {
+    /**
+     * Apply an AST modification to a TypeScript source file.
+     * Returns the modified source string.
+     */
+    applyModification(sourceCode: string, modification: AstModification): Promise<string>;
+    private applyHtmlModification;
+    /**
+     * Find an element's open tag in the template HTML.
+     * If sourceLine is provided, finds the occurrence at that specific source line.
+     * Otherwise falls back to first match by tag/selector.
+     */
+    private findElement;
+    private setAttribute;
+    private removeAttribute;
+    private setTextContent;
+    private insertElement;
+    private removeElement;
+    private parseSelector;
+    private buildOpenTagRegex;
+    private escapeRegex;
+}

package/dist/editor/ast-service.js

@@ -0,0 +1,180 @@
+/**
+ * AST Service — parses TypeScript Lit components and applies modifications
+ * to the html`` tagged template literals.
+ *
+ * Uses ts-morph to locate the render() method's template literal,
+ * then applies string-level HTML modifications.
+ */
+export class AstService {
+    /**
+     * Apply an AST modification to a TypeScript source file.
+     * Returns the modified source string.
+     */
+    async applyModification(sourceCode, modification) {
+        // Dynamic import — ts-morph is an optional peer dependency.
+        // Use a variable to prevent TypeScript from resolving the module at compile time.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let tsMorph;
+        const moduleName = 'ts-morph';
+        try {
+            tsMorph = await import(moduleName);
+        }
+        catch {
+            throw new Error('ts-morph is required for AST modifications. Install it with: npm install ts-morph');
+        }
+        const Project = tsMorph.Project;
+        const SyntaxKind = tsMorph.SyntaxKind;
+        const project = new Project({ useInMemoryFileSystem: true });
+        const sourceFile = project.createSourceFile('temp.ts', sourceCode);
+        // Find the render() method
+        const renderMethod = sourceFile.getDescendantsOfKind(SyntaxKind.MethodDeclaration)
+            .find((m) => m.getName() === 'render');
+        if (!renderMethod) {
+            throw new Error('No render() method found in source file');
+        }
+        // Find the html tagged template expression inside render()
+        const taggedTemplates = renderMethod.getDescendantsOfKind(SyntaxKind.TaggedTemplateExpression);
+        const htmlTemplate = taggedTemplates.find((t) => t.getTag().getText() === 'html');
+        if (!htmlTemplate) {
+            throw new Error('No html`` tagged template found in render()');
+        }
+        const template = htmlTemplate.getTemplate();
+        const templateStart = template.getStart() + 1; // skip opening backtick
+        const templateEnd = template.getEnd() - 1; // skip closing backtick
+        const templateText = sourceCode.substring(templateStart, templateEnd);
+        // Calculate the line number where the template starts in the source file
+        const templateStartLine = sourceCode.substring(0, templateStart).split('\n').length;
+        const modifiedHtml = this.applyHtmlModification(templateText, modification, templateStartLine);
+        // Reconstruct the source with the modified template
+        const fullText = sourceFile.getFullText();
+        return fullText.substring(0, templateStart) + modifiedHtml + fullText.substring(templateEnd);
+    }
+    applyHtmlModification(html, mod, templateStartLine) {
+        switch (mod.type) {
+            case 'setAttribute':
+                return this.setAttribute(html, mod.elementSelector, mod.attributeName, mod.attributeValue, mod.sourceLine, templateStartLine);
+            case 'removeAttribute':
+                return this.removeAttribute(html, mod.elementSelector, mod.attributeName, mod.sourceLine, templateStartLine);
+            case 'setTextContent':
+                return this.setTextContent(html, mod.elementSelector, mod.html || '', mod.sourceLine, templateStartLine);
+            case 'insertElement':
+                return this.insertElement(html, mod.parentSelector || mod.elementSelector, mod.position || 'lastChild', mod.html || '', mod.sourceLine, templateStartLine);
+            case 'removeElement':
+                return this.removeElement(html, mod.elementSelector, mod.sourceLine, templateStartLine);
+            default:
+                throw new Error(`Unsupported modification type: ${mod.type}`);
+        }
+    }
+    /**
+     * Find an element's open tag in the template HTML.
+     * If sourceLine is provided, finds the occurrence at that specific source line.
+     * Otherwise falls back to first match by tag/selector.
+     */
+    findElement(html, selector, sourceLine, templateStartLine) {
+        const { tag, attrFilter } = this.parseSelector(selector);
+        const openTagRegex = this.buildOpenTagRegex(tag, attrFilter);
+        // If we have a source line, find the occurrence at that line
+        if (sourceLine && templateStartLine) {
+            const targetLineInTemplate = sourceLine - templateStartLine;
+            let m;
+            const globalRegex = new RegExp(openTagRegex.source, openTagRegex.flags.includes('g') ? openTagRegex.flags : openTagRegex.flags + 'g');
+            while ((m = globalRegex.exec(html)) !== null) {
+                const linesBeforeMatch = html.substring(0, m.index).split('\n').length - 1;
+                // Allow ±1 line tolerance for minor shifts
+                if (Math.abs(linesBeforeMatch - targetLineInTemplate) <= 1) {
+                    return { match: m, tag };
+                }
+            }
+            // Fall through to first-match if line-based match fails
+        }
+        const match = openTagRegex.exec(html);
+        if (!match)
+            throw new Error(`Element not found: ${selector}`);
+        return { match, tag };
+    }
+    setAttribute(html, selector, attrName, attrValue, sourceLine, templateStartLine) {
+        const { match } = this.findElement(html, selector, sourceLine, templateStartLine);
+        const openTag = match[0];
+        const existingAttrRegex = new RegExp(`(\\s)${this.escapeRegex(attrName)}\\s*=\\s*("(?:[^"$]|\\$\\{[^}]*\\})*"|'(?:[^'$]|\\$\\{[^}]*\\})*'|\\$\\{[^}]*\\}|\\S+)`);
+        const existingMatch = existingAttrRegex.exec(openTag);
+        let newOpenTag;
+        if (existingMatch) {
+            newOpenTag = openTag.replace(existingAttrRegex, `$1${attrName}="${attrValue}"`);
+        }
+        else {
+            newOpenTag = openTag.replace(/(\/?>)$/, ` ${attrName}="${attrValue}"$1`);
+        }
+        return html.substring(0, match.index) + newOpenTag + html.substring(match.index + openTag.length);
+    }
+    removeAttribute(html, selector, attrName, sourceLine, templateStartLine) {
+        const { match } = this.findElement(html, selector, sourceLine, templateStartLine);
+        const openTag = match[0];
+        const attrRegex = new RegExp(`\\s+${this.escapeRegex(attrName)}\\s*=\\s*("[^"]*"|'[^']*'|\\S+)`, 'g');
+        const newOpenTag = openTag.replace(attrRegex, '');
+        return html.substring(0, match.index) + newOpenTag + html.substring(match.index + openTag.length);
+    }
+    setTextContent(html, selector, text, sourceLine, templateStartLine) {
+        const { match, tag } = this.findElement(html, selector, sourceLine, templateStartLine);
+        const afterOpenTag = match.index + match[0].length;
+        const closeTag = `</${tag}>`;
+        const closeIndex = html.indexOf(closeTag, afterOpenTag);
+        if (closeIndex === -1)
+            throw new Error(`Closing tag not found for: ${tag}`);
+        return html.substring(0, afterOpenTag) + text + html.substring(closeIndex);
+    }
+    insertElement(html, parentSelector, position, newHtml, sourceLine, templateStartLine) {
+        const { match, tag } = this.findElement(html, parentSelector, sourceLine, templateStartLine);
+        const closeTag = `</${tag}>`;
+        const closeIndex = html.indexOf(closeTag, match.index + match[0].length);
+        if (closeIndex === -1)
+            throw new Error(`Closing tag not found for: ${tag}`);
+        switch (position) {
+            case 'firstChild': {
+                const insertAt = match.index + match[0].length;
+                return html.substring(0, insertAt) + '\n        ' + newHtml + html.substring(insertAt);
+            }
+            case 'lastChild': {
+                return html.substring(0, closeIndex) + '        ' + newHtml + '\n      ' + html.substring(closeIndex);
+            }
+            case 'before': {
+                return html.substring(0, match.index) + newHtml + '\n      ' + html.substring(match.index);
+            }
+            case 'after': {
+                const afterClose = closeIndex + closeTag.length;
+                return html.substring(0, afterClose) + '\n      ' + newHtml + html.substring(afterClose);
+            }
+            default:
+                throw new Error(`Unknown position: ${position}`);
+        }
+    }
+    removeElement(html, selector, sourceLine, templateStartLine) {
+        const { match, tag } = this.findElement(html, selector, sourceLine, templateStartLine);
+        // Check if self-closing
+        if (match[0].endsWith('/>')) {
+            return html.substring(0, match.index) + html.substring(match.index + match[0].length);
+        }
+        const closeTag = `</${tag}>`;
+        const closeIndex = html.indexOf(closeTag, match.index + match[0].length);
+        if (closeIndex === -1) {
+            return html.substring(0, match.index) + html.substring(match.index + match[0].length);
+        }
+        return html.substring(0, match.index) + html.substring(closeIndex + closeTag.length);
+    }
+    parseSelector(selector) {
+        const bracketMatch = selector.match(/^([a-zA-Z][a-zA-Z0-9-]*)\[([a-zA-Z][a-zA-Z0-9-]*)=['"]([^'"]+)['"]\]$/);
+        if (bracketMatch) {
+            return { tag: bracketMatch[1], attrFilter: { name: bracketMatch[2], value: bracketMatch[3] } };
+        }
+        return { tag: selector };
+    }
+    buildOpenTagRegex(tag, attrFilter) {
+        const attrContent = '(?:[^>$]|\\$\\{[^}]*\\})*';
+        if (attrFilter) {
+            return new RegExp(`<${this.escapeRegex(tag)}\\s${attrContent}${this.escapeRegex(attrFilter.name)}\\s*=\\s*["']${this.escapeRegex(attrFilter.value)}["']${attrContent}\\/?>`, 's');
+        }
+        return new RegExp(`<${this.escapeRegex(tag)}(\\s${attrContent})?\\/?>`, 's');
+    }
+    escapeRegex(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+}

package/dist/editor/css-rules.d.ts

@@ -0,0 +1,54 @@
+/** CSS style properties with known enum values */
+export declare const CSS_ENUMS: Record<string, string[]>;
+/** Common CSS properties for the "add style" autocomplete */
+export declare const COMMON_CSS_PROPS: string[];
+export interface CssRule {
+    selector: string;
+    properties: [string, string][];
+    /** Character offset of this rule's opening brace in the css`` content */
+    startOffset: number;
+    /** Character offset of this rule's closing brace in the css`` content */
+    endOffset: number;
+}
+export interface ExtractedCss {
+    cssContent: string;
+    cssStart: number;
+    rules: CssRule[];
+}
+/**
+ * Find the source file for the host custom element (the one with static styles).
+ * Walks up from the selected element through shadow DOM to find the host.
+ */
+export declare function findHostSourceFile(element: HTMLElement): string | null;
+/**
+ * Extract CSS rules from a `static styles = css\`...\`` block in the source.
+ */
+export declare function extractCssFromSource(source: string): ExtractedCss | null;
+/**
+ * Simple CSS rule parser — extracts selector + properties from a CSS string.
+ * Handles nested @media by flattening rules inside.
+ */
+export declare function parseCssRules(css: string): CssRule[];
+/**
+ * Check if a CSS selector matches the selected element.
+ */
+export declare function selectorMatchesElement(selector: string, element: HTMLElement): boolean;
+export declare function isColorValue(name: string, value: string): boolean;
+export declare function normalizeToHex(value: string): string;
+/** Notify the overlay system that element layout may have changed */
+export declare function notifyLayoutChange(): void;
+/**
+ * Render a CSS rule as a collapsible section in the panel.
+ */
+export declare function renderCssRule(rule: CssRule, extracted: ExtractedCss, fullSource: string, sourceFile: string, container: HTMLDivElement, startOpen: boolean, currentElementRef: {
+    current: HTMLElement | null;
+}, debounceTimers: Record<string, ReturnType<typeof setTimeout>>): void;
+export declare function renderAllRules(rules: CssRule[], extracted: ExtractedCss, fullSource: string, sourceFile: string, container: HTMLDivElement, currentElementRef: {
+    current: HTMLElement | null;
+}, debounceTimers: Record<string, ReturnType<typeof setTimeout>>): void;
+/**
+ * Load CSS rules from the component source file and render matching rules in the panel.
+ */
+export declare function loadCssRulesForElement(element: HTMLElement, cssGroup: HTMLDivElement, currentElementRef: {
+    current: HTMLElement | null;
+}, debounceTimers: Record<string, ReturnType<typeof setTimeout>>): Promise<void>;