@gitsense/gsc-utils 0.2.24 → 0.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitsense/gsc-utils",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "description": "Utilities for GitSense Chat (GSC)",
   "main": "dist/gsc-utils.cjs.js",
   "module": "dist/gsc-utils.esm.js",

package/src/CodeBlockUtils/constants.js

@@ -2,11 +2,11 @@
  * Component: CodeBlockUtils Constants
  * Block-UUID: 01b2c3d4-5e6f-4a7b-8c9d-0e1f2a3b4c5d
  * Parent-UUID: 144d19a5-139a-4e80-8abe-84965583e35e
- * Version: 1.0.1
+ * Version: 1.0.2
  * Description: Defines constants used across the CodeBlockUtils modules, such as comment styles for various languages.
  * Language: JavaScript
  * Created-at: 2025-04-15T15:51:16.973Z
- * Authors: Gemini 2.5 Pro (v1.0.0), Gemini 2.5 Flash Thinking (v1.0.1)
+ * Authors: Gemini 2.5 Pro (v1.0.0), Gemini 2.5 Flash Thinking (v1.0.1), Qwen 3 Coder 480B - Cerebras (v1.0.2)
  */
 
 
@@ -40,6 +40,12 @@ const COMMENT_STYLES = {
     'r': { type: 'hash' },
     'julia': { type: 'hash' },
 
+    // HTML/XML/SVG/Markdown comment style
+    'html': { type: 'html' },
+    'xml': { type: 'html' },
+    'svg': { type: 'html' },
+    'markdown': { type: 'html' }, // For metadata in Markdown files
+
     // Other language styles
     'lisp': { type: 'semicolon' },
     'clojure': { type: 'semicolon' },
@@ -58,5 +64,3 @@ const COMMENT_STYLES = {
 module.exports = {
     COMMENT_STYLES
 };
-
-

package/src/CodeBlockUtils/headerUtils.js

@@ -2,11 +2,11 @@
  * Component: CodeBlockUtils Header Utilities
  * Block-UUID: 2565f708-feec-4b59-88fd-984084410fd4
  * Parent-UUID: 01147ddf-320f-498a-a744-198d42a9d2ee
- * Version: 1.2.0
+ * Version: 1.2.1
  * Description: Provides utility functions for parsing metadata headers from code blocks, validating timestamps, and calculating header line counts.
  * Language: JavaScript
  * Created-at: 2025-07-21T00:23:28.169Z
- * Authors: Gemini 2.5 Pro (v1.0.0), Gemini 2.5 Flash Thinking (v1.1.0), Gemini 2.5 Flash Thinking (v1.2.0)
+ * Authors: Gemini 2.5 Pro (v1.0.0), Gemini 2.5 Flash Thinking (v1.1.0), Gemini 2.5 Flash Thinking (v1.2.0), Qwen 3 Coder 480B - Cerebras (v1.2.1)
  */
 
 
@@ -113,6 +113,22 @@ function parseHeader(header, language) {
                                .map(line => line.replace(/^\s*'\s?/, ''))
                                .join('\n');
             break;
+            
+        // --- New Case for HTML/XML/Markdown Comments ---
+        case 'html':
+            // Remove opening <!-- and closing --> tags.
+            // The regex handles cases where the tags might be on the same line as content
+            // or on their own lines.
+            cleanHeader = header.replace(/^<!--\s*/, '')
+                               .replace(/\s*-->$/, '')
+                               .split('\n')
+                               // Remove leading whitespace and potential dashes (common in HTML comments)
+                               // This is a heuristic, as HTML comments don't typically have line prefixes.
+                               // It's included to be robust against minor formatting variations.
+                               .map(line => line.replace(/^\s*(-|\*)\s?/, ''))
+                               .join('\n');
+            break;
+        // --- End of New Case ---
 
         case 'unknown':
             // Attempt basic detection if language wasn't found in COMMENT_STYLES
@@ -170,7 +186,7 @@ function parseHeader(header, language) {
     const requiredFields = [
         'Component',
         'Block-UUID',
-        'Version', // Keep Version as string here, handle parsing elsewhere if needed
+        'Version',
         'Language',
         'Created-at',
         'Authors'

package/src/ContextUtils.js

@@ -141,7 +141,7 @@ function parseContextSection(sectionText) {
         if (properties.includes(property)) {
             let value = trimmedLine.split(':').slice(1).join(':').trim();
 
-            if (property.match(/id/))
+            if (property.match(/id/) || property.match(/tokens/))
                 value = parseInt(value);
 
             contextSection[property] = value;

package/src/DomUtils.js

@@ -0,0 +1,485 @@
+/**
+ * Component: DomUtils Helper Functions
+ * Block-UUID: e85d4e1d-f45e-450b-a0f2-941af362c2be
+ * Parent-UUID: fe462d17-e1c8-45d6-9fb0-f53322c9cda9
+ * Version: 1.1.0
+ * Description: Provides helper functions for creating and manipulating DOM elements.
+ * Language: JavaScript
+ * Created-at: 2025-09-11T19:03:50.026Z
+ * Authors: Gemini 2.5 Pro (v1.0.0), Gemini 2.5 Flash (v1.1.0)
+ */
+
+
+function createElement(type, params) {
+    let elem = document.createElement(type);
+
+    if (!params) return elem;
+
+    // Extract all standard properties
+    let {
+        id,
+        ariaLabel,
+        role,
+        html,
+        text,
+        cls,
+        className,
+        colSpan,
+        pointerEvents,
+        title,
+        style,
+        append,
+        type: inputType,
+        value,
+        name,
+        checked,
+        selected, 
+        disabled, 
+        placeholder,
+        "for": _for,
+        "data-message-id": dmi,
+        "data-message-role": dmr,
+        attrs = {},
+        dataset,
+    } = params;
+
+    // Set standard attributes
+    if (id != null) elem.id = id;
+    if (ariaLabel) elem.setAttribute("aria-label", ariaLabel);
+    if (role) elem.setAttribute("role", role);
+    if (placeholder) elem.setAttribute("placeholder", placeholder);
+    if (cls || className) elem.setAttribute("class", cls || className);
+    if (pointerEvents) elem.setAttribute("pointer-events", pointerEvents);
+    if (title != null) elem.setAttribute("title", title);
+    if (inputType) elem.setAttribute("type", inputType);
+    if (name != null) elem.setAttribute("name", name);
+    if (value != null) elem.value = value;
+    if (checked != null && checked) elem.checked = true; // Use property for checked
+    if (selected != null && selected) elem.selected = true; // Use property for selected
+    if (disabled != null) elem.disabled = disabled; // Use property for disabled
+    if (dmi != null) elem.setAttribute("data-message-id", dmi);
+    if (dmr != null) elem.setAttribute("data-message-role", dmr);
+    if (_for != null ) elem.setAttribute("for", _for);
+    if (colSpan != null) elem.colSpan = colSpan;
+
+    // Set content
+    if (html != null) {
+        if (typeof html === "object" && html instanceof Node) { // Ensure html is a Node
+            elem.appendChild(html);
+        } else if (typeof html === "string") {
+            elem.innerHTML = html;
+        }
+    } else if (text != null) {
+        elem.innerText = text;
+    }
+
+    // Set style properties
+    if (style) {
+        for (const name in style) {
+            elem.style[name] = style[name];
+        }
+    }
+
+    // Handle append (now supports both arrays and single elements)
+    if (append) {
+        const appendItems = Array.isArray(append) ? append : [append];
+        appendItems.forEach(e => {
+            if (e instanceof Node) { // Ensure item to append is a Node
+                elem.appendChild(e);
+            } else if (e !== undefined && e !== null) {
+                 console.warn("Attempted to append non-Node item:", e);
+            }
+        });
+    }
+
+    // NEW: Set additional attributes from attrs object
+    if (attrs && typeof attrs === 'object') {
+        for (const [key, value] of Object.entries(attrs)) {
+            if (value !== undefined && value !== null) {
+                // Skip if already set by standard properties or handled directly
+                if (!['id', 'class', 'role', 'aria-label', 'title', 'style', 'checked', 'selected', 'disabled', 'value', 'name', 'type', 'for'].includes(key) && !key.startsWith('data-')) {
+                    elem.setAttribute(key, value);
+                }
+            }
+        }
+    }
+
+    // Handle dataset properties
+    if (dataset && typeof dataset === 'object') {
+        for (const [key, value] of Object.entries(dataset)) {
+            if (value !== undefined && value !== null) {
+                elem.dataset[key] = value;
+            }
+        }
+    }
+
+    // Handle event handlers (like onclick, onchange, etc.)
+    for (const [key, value] of Object.entries(params)) {
+        // Check if the property is an event handler (starts with 'on')
+        if (key.startsWith('on') && typeof value === 'function') {
+            const eventName = key.slice(2).toLowerCase(); // Remove 'on' prefix and convert to lowercase
+            elem.addEventListener(eventName, value);
+        }
+    }
+
+    return elem;
+}
+
+// Update all creator functions to pass through attrs:
+const h = {
+    elemById: (id) => {
+        return document.getElementById(id);
+    },
+    createA: (params) => {
+        return h.createLink(params);
+    },
+    createArticle: (params) => {
+        return createElement("article", params);
+    },
+    createBr: () => {
+        return createElement("br");
+    },
+    createBreak: () => {
+        return createElement("br");
+    },
+    createButton: (params) => {
+        return createElement("button", params);
+    },
+    createCheckbox: (params) => {
+        // Use createElement and let it handle attributes like checked/disabled
+        return createElement("input", { ...params, type: "checkbox" });
+    },
+    createCode: (params) => {
+        return createElement("code", params);
+    },
+    createDetail: (params) => {
+        return createElement("details", params);
+    },
+    createDiv: (params) => {
+        return createElement("div", params);
+    },
+    createEm: (params) => { // Added
+        return createElement("em", params);
+    },
+    createForm: (params) => {
+        return createElement("form", params);
+    },
+    createInput: (params) => {
+        return createElement("input", params);
+    },
+    createImg : (params) => {
+        const img = createElement("img", params);
+        // src is handled by createElement via attrs or direct property if needed
+        return img;
+    },
+    createH1: (params) => {
+        return createElement("h1", params);
+    },
+    createH2: (params) => {
+        return createElement("h2", params);
+    },
+    createH3: (params) => {
+        return createElement("h3", params);
+    },
+    createH4: (params) => {
+        return createElement("h4", params);
+    },
+    createH5: (params) => {
+        return createElement("h5", params);
+    },
+    createHeader: (header, params) => {
+        // Ensure header is a string like 'h1', 'h2' etc.
+        if (typeof header === 'string' && /^h[1-6]$/i.test(header)) {
+             return createElement(header, params);
+        }
+        console.error("Invalid header type provided to createHeader:", header);
+        return createElement("div", params); // Fallback or throw error
+    },
+    createHr: (params) => {
+        return createElement("hr", params);
+    },
+    createLabel : (params) => {
+        // 'for' is handled by createElement
+        return createElement("label", params);
+    },
+    createLI: (params) => {
+        return createElement("li", params);
+    },
+    createLi: (params) => { // Alias for createLI
+        return createElement("li", params);
+    },
+    createLink: (params) => {
+        const link = createElement("a", params);
+        // href and target are handled by createElement
+        if (params?.href) link.href = params.href; // Ensure href is set if provided
+        return link;
+    },
+    createNav: (params) => {
+        return createElement("nav", params);
+    },
+    createOL: (params) => { // Added
+        return createElement("ol", params);
+    },
+    createOption: (params) => { // Added
+        // value, text, selected are handled by createElement
+        return createElement("option", params);
+    },
+    createP: (params) => {
+        return createElement("p", params);
+    },
+    createParagraph: (params) => { // Alias for createP
+        return createElement("p", params);
+    },
+    createPre: (params) => {
+        return createElement("pre", params);
+    },
+    createSelect: (params) => { // Added
+        // name, disabled etc handled by createElement
+        return createElement("select", params);
+    },
+    createSpan: (params) => {
+        return createElement("span", params);
+    },
+    createStrong: (params) => { // Added
+        return createElement("strong", params);
+    },
+    createSummary: (params) => {
+        return createElement("summary", params);
+    },
+    createSup: (params) => {
+        return createElement("sup", params);
+    },
+    createText: (text) => {
+        return document.createTextNode(text);
+    },
+    createTextArea: (params) => {
+        const textArea = createElement("textarea", params);
+        return textArea;
+    },
+    createTextNode: (text) => {
+        return document.createTextNode(text);
+    },
+    createTable: (params) => {
+        return createElement("table", params);
+    },
+    createTableBody: (params) => {
+        return createElement("tbody", params);
+    },
+    createTableCell: (params) => {
+        return createElement("td", params);
+    },
+    createTableHead: (params) => {
+        return createElement("thead", params);
+    },
+    createTableHeadCell: (params) => {
+        return createElement("th", params);
+    },
+    createTbody: (params) => {
+        return createElement("tbody", params);
+    },
+    createTd: (params) => {
+        return createElement("td", params);
+    },
+    createTh: (params) => {
+        return createElement("th", params);
+    },
+    createThead: (params) => {
+        return createElement("thead", params);
+    },
+    createTr: (params) => {
+        return createElement("tr", params);
+    },
+    createTableRow: (params) => {
+        return createElement("tr", params);
+    },
+    createTextInput: (params) => {
+        // Use createElement and let it handle attributes like value/disabled
+        return createElement("input", { ...params, type: "text" });
+    },
+    createUl: (params) => {
+        return createElement("ul", params);
+    },
+    createUL: (params) => {
+        return createElement("ul", params);
+    },
+    hide: (elem) => {
+        if (elem && elem.style) {
+            elem.style.display = "none";
+        }
+    },
+    show: (elem) => {
+         if (elem && elem.style) {
+            elem.style.display = ""; // Reset to default display
+         }
+    },
+    updateDOM: (sourceNode, targetNode) => {
+        // Step 1: Check if the node type or tag name is different
+        if (!sourceNode || !targetNode) return; // Basic guard
+        if (sourceNode.nodeType !== targetNode.nodeType || sourceNode.nodeName !== targetNode.nodeName) {
+            targetNode.replaceWith(sourceNode.cloneNode(true));
+            return;
+        }
+
+        // Step 2: Check if it's an element node
+        if (sourceNode.nodeType === Node.ELEMENT_NODE) {
+            // Step 3: Compare and update attributes
+            let sourceAttributes = sourceNode.attributes;
+            let targetAttributes = targetNode.attributes;
+            const targetAttrMap = new Map();
+            for (let i = 0; i < targetAttributes.length; i++) {
+                targetAttrMap.set(targetAttributes[i].name, targetAttributes[i].value);
+            }
+
+            // Update or add attributes from sourceNode to targetNode
+            for (let i = 0; i < sourceAttributes.length; i++) {
+                let attr = sourceAttributes[i];
+                if (targetAttrMap.get(attr.name) !== attr.value) {
+                    targetNode.setAttribute(attr.name, attr.value);
+                }
+                targetAttrMap.delete(attr.name); // Mark as processed
+            }
+
+            // Remove attributes that are in target but not in source
+            for (const attrName of targetAttrMap.keys()) {
+                targetNode.removeAttribute(attrName);
+            }
+
+            // Special handling for properties like value, checked, selected, disabled
+            if (sourceNode.value !== targetNode.value) {
+                targetNode.value = sourceNode.value;
+            }
+            if (sourceNode.checked !== targetNode.checked) {
+                targetNode.checked = sourceNode.checked;
+            }
+             if (sourceNode.selected !== targetNode.selected) {
+                targetNode.selected = sourceNode.selected;
+            }
+            if (sourceNode.disabled !== targetNode.disabled) {
+                targetNode.disabled = sourceNode.disabled;
+            }
+
+
+            // Step 4: Recursively compare and update children
+            let sourceChildren = sourceNode.childNodes;
+            let targetChildren = targetNode.childNodes;
+            let maxLen = Math.max(sourceChildren.length, targetChildren.length);
+
+            for (let i = 0; i < maxLen; i++) {
+                if (i >= targetChildren.length) {
+                    // If the target has fewer children, append the new child
+                    if (sourceChildren[i]) { 
+                        targetNode.appendChild(sourceChildren[i].cloneNode(true));
+                    }
+                } else if (i >= sourceChildren.length) {
+                     // If the source has fewer children, remove extra target child
+                     targetNode.removeChild(targetChildren[i]);
+                } else {
+                    // Otherwise, update the existing child
+                    h.updateDOM(sourceChildren[i], targetChildren[i]);
+                }
+            }
+
+        } else if (sourceNode.nodeType === Node.TEXT_NODE) {
+            // Step 5: Update text content if the text nodes are different
+            if (sourceNode.nodeValue !== targetNode.nodeValue) {
+                targetNode.nodeValue = sourceNode.nodeValue;
+            }
+        }
+        // Other node types (comments, etc.) are ignored for updates in this version
+    },
+    safeEscape: (html, x) => {
+        if ( x )
+            console.log(x);
+
+        if (typeof html !== 'string') return html; // Return non-strings as-is
+
+        // Generated by Claude 3.5 Sonnet
+        const preserveTags = [
+            'pre',
+            'code',
+            'script',
+            'style',
+            'textarea',
+            'math',
+            'mi',
+            'mo',
+            'mn',
+            'ms',
+            'mtext',
+            'samp',
+            'kbd',
+            'var',
+            'svg',
+            'xmp'
+        ].join('|');
+
+        // Track whether we're inside a preserve tag
+        let isInPreserveTag = false;
+        let currentTag = '';
+
+        // Split the input into tokens that are either tags or text
+        // Improved regex to handle self-closing tags and attributes better
+        return html.split(/(<\/?(?:${preserveTags})(?:\s+[^>]*)?\/?>|<\/?[a-zA-Z][^>]*>)/i)
+            .filter(part => part) // Remove empty strings from split
+            .map(part => {
+                // Check if this part is a preserve tag
+                const preserveTagMatch = part.match(new RegExp(`^<(/?)(${preserveTags})([\\s>/])`, 'i'));
+
+                if (preserveTagMatch) {
+                    // Toggle the preserve state based on opening/closing tags
+                    if (!preserveTagMatch[1] && !part.endsWith('/>')) { // Opening tag, not self-closing
+                        isInPreserveTag = true;
+                        currentTag = preserveTagMatch[2];
+                    } else if (preserveTagMatch[1]) { // Closing tag
+                        // Only close if it matches the current open tag
+                        if (isInPreserveTag && currentTag.toLowerCase() === preserveTagMatch[2].toLowerCase()) {
+                             isInPreserveTag = false;
+                             currentTag = '';
+                        }
+                    }
+                    return part; // Return the tag itself unmodified
+                }
+
+                // If we're not in a preserve tag and this isn't an HTML tag, escape <
+                if (!isInPreserveTag && !part.startsWith('<')) {
+                    return part.replace(/</g, '&lt;');
+                }
+
+                // Return other tags or content within preserve tags unmodified
+                return part;
+            })
+            .join('');
+    },
+
+    /**
+     * Calculates the distance between an element's edge and the viewport's corresponding edge
+     * @param {HTMLElement} elem - The element to measure from
+     * @param {"left"|"right"} edge - Which edge to measure from
+     * @returns {number} The distance in pixels
+     * @throws {Error} If invalid edge parameter is provided or element not found
+     */
+    getDistanceFromViewportEdge: (elem, edge = "right") => {
+        // Input validation
+        if (!elem || typeof elem.getBoundingClientRect !== 'function') {
+             throw new Error('Invalid element provided.');
+        }
+        if ( !["left", "right"].includes(edge) ) {
+            throw new Error('Edge parameter must be either "left" or "right"');
+        }
+
+        // Get the bounding rectangle of the elem
+        const rect = elem.getBoundingClientRect();
+
+        // Get the width of the viewport
+        const viewportWidth = window.innerWidth;
+
+        // Calculate distance based on specified edge
+        if (edge === "right") {
+            return viewportWidth - rect.right;
+        } else { // edge === "left"
+            return rect.left;
+        }
+    }
+}
+
+module.exports = { h };