juxscript 1.1.239 → 1.1.243

package/lib/components/code.ts

@@ -1,260 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { parseCode, renderLineWithTokens, getSyntaxHighlightCSS } from '../utils/codeparser.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface CodeOptions {
-  content?: string;
-  language?: string;
-  showLineNumbers?: boolean;
-  startLine?: number;
-  highlightLines?: number[];
-  style?: string;
-  class?: string;
-}
-
-type CodeState = {
-  content: string;
-  language: string;
-  showLineNumbers: boolean;
-  startLine: number;
-  highlightLines: number[];
-  style: string;
-  class: string;
-};
-
-export class Code extends BaseComponent<CodeState> {
-  private _codeContainer: HTMLElement | null = null;
-  private static _syntaxCSSInjected = false;
-
-  constructor(id: string, options: CodeOptions = {}) {
-    super(id, {
-      content: options.content ?? '',
-      language: options.language ?? 'javascript',
-      showLineNumbers: options.showLineNumbers ?? true,
-      startLine: options.startLine ?? 1,
-      highlightLines: options.highlightLines ?? [],
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  update(prop: string, value: any): void {
-    super.update(prop, value);
-
-    if (!this._codeContainer) return;
-
-    switch (prop) {
-      case 'content':
-        this._rebuildLines();
-        break;
-      case 'showLineNumbers':
-        this._codeContainer.classList.toggle('jux-code-no-numbers', !value);
-        break;
-      case 'highlightLines':
-        this._updateHighlights();
-        break;
-    }
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  content(value: string): this {
-    this.state.content = value;
-    return this;
-  }
-
-  language(value: string): this {
-    this.state.language = value;
-    return this;
-  }
-
-  showLineNumbers(value: boolean): this {
-    this.state.showLineNumbers = value;
-    return this;
-  }
-
-  startLine(value: number): this {
-    this.state.startLine = value;
-    return this;
-  }
-
-  highlightLines(lines: number[]): this {
-    this.state.highlightLines = lines;
-    return this;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * PARSING & RENDERING
-   * ═════════════════════════════════════════════════════════════════ */
-
-  /**
-   * Parse code content into individual lines with tokens
-   */
-  private _parseLines(): ReturnType<typeof parseCode> {
-    return parseCode(this.state.content, this.state.language);
-  }
-
-  /**
-   * Rebuild all line elements
-   */
-  private _rebuildLines(): void {
-    if (!this._codeContainer) return;
-
-    const codeEl = this._codeContainer.querySelector('.jux-code-lines');
-    if (!codeEl) return;
-
-    codeEl.innerHTML = '';
-
-    const parsedLines = this._parseLines();
-    const { startLine, highlightLines } = this.state;
-
-    parsedLines.forEach((parsedLine, index) => {
-      const lineNumber = startLine + index;
-      const isHighlighted = highlightLines.includes(lineNumber);
-      const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
-      codeEl.appendChild(lineEl);
-    });
-
-  }
-
-  /**
-   * Create a single line element with parsed tokens
-   */
-  private _createLineElement(parsedLine: ReturnType<typeof parseCode>[0], lineNumber: number, highlighted: boolean): HTMLElement {
-    const lineEl = document.createElement('div');
-    lineEl.className = 'jux-code-line';
-    lineEl.setAttribute('data-line', String(lineNumber));
-
-    if (highlighted) {
-      lineEl.classList.add('jux-code-line-highlight');
-    }
-
-    // Line number
-    if (this.state.showLineNumbers) {
-      const lineNum = document.createElement('span');
-      lineNum.className = 'jux-code-line-number';
-      lineNum.textContent = String(lineNumber);
-      lineEl.appendChild(lineNum);
-    }
-
-    // Line content with syntax highlighting
-    const lineCode = document.createElement('span');
-    lineCode.className = 'jux-code-line-content';
-    lineCode.innerHTML = renderLineWithTokens(parsedLine);
-    lineEl.appendChild(lineCode);
-
-    return lineEl;
-  }
-
-  /**
-   * Update highlighted lines without full rebuild
-   */
-  private _updateHighlights(): void {
-    if (!this._codeContainer) return;
-
-    const lines = this._codeContainer.querySelectorAll('.jux-code-line');
-    lines.forEach((line) => {
-      const lineNum = parseInt(line.getAttribute('data-line') || '0', 10);
-      const isHighlighted = this.state.highlightLines.includes(lineNum);
-      line.classList.toggle('jux-code-line-highlight', isHighlighted);
-    });
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-    const container = this._setupContainer(targetId);
-
-    // ✅ Inject syntax CSS once globally
-    if (!Code._syntaxCSSInjected) {
-      const style = document.createElement('style');
-      style.id = 'jux-code-syntax-css';
-      style.textContent = getSyntaxHighlightCSS();
-      document.head.appendChild(style);
-      Code._syntaxCSSInjected = true;
-    }
-
-    const { language, showLineNumbers, style, class: className } = this.state;
-
-    const wrapper = document.createElement('div');
-    wrapper.className = 'jux-code';
-    wrapper.id = this._id;
-    if (!showLineNumbers) wrapper.classList.add('jux-code-no-numbers');
-    if (className) wrapper.className += ` ${className}`;
-    if (style) wrapper.setAttribute('style', style);
-
-    // ✅ Remove <pre>, just use a div with code styling
-    const codeEl = document.createElement('div');
-    codeEl.className = 'jux-code-lines';
-
-    // Build initial lines with parsed tokens
-    const parsedLines = this._parseLines();
-    const { startLine, highlightLines } = this.state;
-
-    parsedLines.forEach((parsedLine, index) => {
-      const lineNumber = startLine + index;
-      const isHighlighted = highlightLines.includes(lineNumber);
-      const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
-      codeEl.appendChild(lineEl);
-    });
-
-    wrapper.appendChild(codeEl);
-
-    this._wireStandardEvents(wrapper);
-
-    // Wire sync bindings
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      if (property === 'content') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          this.state.content = transformed;
-          this._rebuildLines();
-        });
-      }
-      else if (property === 'language') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          this.state.language = transformed;
-          this._rebuildLines();
-        });
-      }
-      else if (property === 'highlightLines') {
-        const transform = toComponent || ((v: any) => (Array.isArray(v) ? v : []));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          this.state.highlightLines = transformed;
-          this._updateHighlights();
-        });
-      }
-    });
-
-    container.appendChild(wrapper);
-    this._codeContainer = wrapper;
-
-    return this;
-  }
-}
-
-export function code(id: string, options: CodeOptions = {}): Code {
-  return new Code(id, options);
-}

package/lib/components/container.d.ts

@@ -1,60 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-/**
- * Container options
- */
-export interface ContainerOptions {
-    content?: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
-    class?: string;
-    style?: string;
-    direction?: 'row' | 'column';
-    gap?: string | number;
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
-}
-/**
- * Container state
- */
-type ContainerState = {
-    content: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
-    class: string;
-    style: string;
-    direction?: 'row' | 'column';
-    gap?: string | number;
-    align?: string;
-    justify?: string;
-};
-/**
- * Container component - a simple div container for grouping elements
- */
-export declare class Container extends BaseComponent<ContainerState> {
-    private _containerElement;
-    constructor(id: string, options?: ContainerOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    update(prop: string, value: any): void;
-    private _updateContent;
-    content(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
-    direction(value: 'row' | 'column'): this;
-    gap(value: string | number): this;
-    align(value: 'start' | 'center' | 'end' | 'stretch'): this;
-    justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this;
-    /**
-     * Add content to container (supports strings and BaseComponents)
-     */
-    addContent(content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
-    /**
-     * Clear all content from container
-     */
-    clearContent(): this;
-    /**
-     * Get the container element ID for rendering child components
-     */
-    contentId(): string;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-/**
- * Factory helper
- */
-export declare function container(id: string, options?: ContainerOptions): Container;
-export {};
-//# sourceMappingURL=container.d.ts.map

package/lib/components/container.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC1F;AAED;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;IAC1D,OAAO,CAAC,iBAAiB,CAA4B;gBAEzC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAYtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA6BtC,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAKtF,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI;IAKxC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI;IAKpG;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAuB3F;;OAEG;IACH,YAAY,IAAI,IAAI;IAOpB;;OAEG;IACH,SAAS,IAAI,MAAM;IAQnB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4DnE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}

package/lib/components/container.js

@@ -1,195 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions - Container is a layout wrapper that can be clicked
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['click'];
-/**
- * Container component - a simple div container for grouping elements
- */
-export class Container extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            content: options.content ?? [],
-            class: options.class ?? '',
-            style: options.style ?? '',
-            direction: options.direction,
-            gap: options.gap,
-            align: options.align,
-            justify: options.justify
-        });
-        this._containerElement = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    update(prop, value) {
-        super.update(prop, value);
-        if (!this._containerElement)
-            return;
-        switch (prop) {
-            case 'content':
-                this._updateContent(value);
-                break;
-            case 'direction':
-                this._containerElement.style.flexDirection = value;
-                break;
-            case 'gap':
-                const gapValue = typeof value === 'number' ? `${value}px` : value;
-                this._containerElement.style.gap = gapValue;
-                break;
-            case 'align':
-                this._containerElement.style.alignItems = value;
-                break;
-            case 'justify':
-                this._containerElement.style.justifyContent = value;
-                break;
-        }
-    }
-    _updateContent(value) {
-        if (!this._containerElement)
-            return;
-        this._containerElement.innerHTML = '';
-        const items = Array.isArray(value) ? value : [value];
-        items.forEach(item => {
-            if (typeof item === 'string') {
-                const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = item;
-                while (tempDiv.firstChild) {
-                    this._containerElement.appendChild(tempDiv.firstChild);
-                }
-            }
-            else if (item instanceof BaseComponent) {
-                item.render(this._containerElement);
-            }
-        });
-    }
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-    // ✅ Inherited from BaseComponent:
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - addClass(), removeClass(), toggleClass()
-    // - visible(), show(), hide()
-    // - attr(), attrs(), removeAttr()
-    // - disabled(), enable(), disable()
-    content(value) {
-        this.state.content = value;
-        return this;
-    }
-    direction(value) {
-        this.state.direction = value;
-        return this;
-    }
-    gap(value) {
-        this.state.gap = value;
-        return this;
-    }
-    align(value) {
-        this.state.align = value;
-        return this;
-    }
-    justify(value) {
-        this.state.justify = value;
-        return this;
-    }
-    /**
-     * Add content to container (supports strings and BaseComponents)
-     */
-    addContent(content) {
-        if (!this._containerElement) {
-            console.warn('[Container] Container element not found');
-            return this;
-        }
-        const items = Array.isArray(content) ? content : [content];
-        items.forEach(item => {
-            if (typeof item === 'string') {
-                const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = item;
-                while (tempDiv.firstChild) {
-                    this._containerElement.appendChild(tempDiv.firstChild);
-                }
-            }
-            else if (item instanceof BaseComponent) {
-                item.render(this._containerElement);
-            }
-        });
-        return this;
-    }
-    /**
-     * Clear all content from container
-     */
-    clearContent() {
-        if (this._containerElement) {
-            this._containerElement.innerHTML = '';
-        }
-        return this;
-    }
-    /**
-     * Get the container element ID for rendering child components
-     */
-    contentId() {
-        return `${this._id}-content`;
-    }
-    /* -------------------------
-     * Render
-     * ------------------------- */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { content, class: className, style, direction, gap, align, justify } = this.state;
-        const div = document.createElement('div');
-        div.id = this._id;
-        this._containerElement = div;
-        // Always include jux-container class, append custom classes
-        div.className = className ? `jux-container ${className}` : 'jux-container';
-        // Only apply flex styles if any flex properties are set
-        const usesFlexbox = direction || gap !== undefined || align || justify;
-        let computedStyle = style;
-        if (usesFlexbox) {
-            const flexStyles = ['display: flex', 'width: auto'];
-            if (direction)
-                flexStyles.push(`flex-direction: ${direction}`);
-            if (gap !== undefined) {
-                const gapValue = typeof gap === 'number' ? `${gap}px` : gap;
-                flexStyles.push(`gap: ${gapValue}`);
-            }
-            // Only set align-items if explicitly specified
-            if (align)
-                flexStyles.push(`align-items: ${align}`);
-            // Only set justify-content if explicitly specified
-            if (justify)
-                flexStyles.push(`justify-content: ${justify}`);
-            computedStyle = `${flexStyles.join('; ')}; ${style}`.trim();
-        }
-        if (computedStyle) {
-            div.setAttribute('style', computedStyle);
-        }
-        // Render initial content
-        if (content) {
-            const items = Array.isArray(content) ? content : [content];
-            items.forEach(item => {
-                if (typeof item === 'string') {
-                    const tempDiv = document.createElement('div');
-                    tempDiv.innerHTML = item;
-                    while (tempDiv.firstChild) {
-                        div.appendChild(tempDiv.firstChild);
-                    }
-                }
-                else if (item instanceof BaseComponent) {
-                    item.render(div);
-                }
-            });
-        }
-        this._wireStandardEvents(div);
-        container.appendChild(div);
-        return this;
-    }
-}
-/**
- * Factory helper
- */
-export function container(id, options = {}) {
-    return new Container(id, options);
-}