juxscript 1.1.30 → 1.1.32

package/lib/components/pen.ts

@@ -0,0 +1,567 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['draw', 'shapeAdd', 'shapeRemove', 'connectionAdd'] as const;
+
+export interface PenShape {
+    id: string;
+    type: 'line' | 'rectangle' | 'circle' | 'text';
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    radius?: number;
+    text?: string;
+    color?: string;
+    fillColor?: string;
+    strokeWidth?: number;
+    connectedTo?: string[]; // IDs of shapes connected to this one
+}
+
+export interface PenConnection {
+    from: string;
+    to: string;
+    color?: string;
+    strokeWidth?: number;
+    dashed?: boolean;
+}
+
+export interface PenOptions {
+    width?: number | string;
+    height?: number | string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    border?: string;
+    text?: string;
+    radius?: number;
+    gridEnabled?: boolean;
+    gridSize?: number;
+    gridColor?: string;
+    style?: string;
+    class?: string;
+}
+
+type PenState = BaseState & {
+    width: number | string;
+    height: number | string;
+    backgroundColor: string;
+    backgroundImage: string;
+    border: string;
+    text: string;
+    radius: number;
+    gridEnabled: boolean;
+    gridSize: number;
+    gridColor: string;
+    shapes: PenShape[];
+    connections: PenConnection[];
+};
+
+export class Pen extends BaseComponent<PenState> {
+    private _canvas: HTMLCanvasElement | null = null;
+    private _ctx: CanvasRenderingContext2D | null = null;
+    private _animationFrame?: number;
+
+    constructor(id: string, options: PenOptions = {}) {
+        super(id, {
+            width: options.width ?? '100%',
+            height: options.height ?? 400,
+            backgroundColor: options.backgroundColor ?? '#ffffff',
+            backgroundImage: options.backgroundImage ?? '',
+            border: options.border ?? '1px solid #e5e7eb',
+            text: options.text ?? '',
+            radius: options.radius ?? 0,
+            gridEnabled: options.gridEnabled ?? false,
+            gridSize: options.gridSize ?? 20,
+            gridColor: options.gridColor ?? '#f0f0f0',
+            shapes: [],
+            connections: [],
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * REACTIVE UPDATE
+     * ═════════════════════════════════════════════════════════════════ */
+
+    update(prop: string, value: any): void {
+        super.update(prop, value);
+
+        if (!this._canvas || !this._ctx) return;
+
+        switch (prop) {
+            case 'backgroundColor':
+                this._redraw();
+                break;
+            case 'backgroundImage':
+                this._redraw();
+                break;
+            case 'text':
+                this._redraw();
+                break;
+            case 'gridEnabled':
+            case 'gridSize':
+            case 'gridColor':
+                this._redraw();
+                break;
+            case 'shapes':
+            case 'connections':
+                this._redraw();
+                break;
+        }
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    width(value: number | string): this {
+        this.state.width = value;
+        if (this._canvas) {
+            this._canvas.style.width = typeof value === 'number' ? `${value}px` : value;
+            this._updateCanvasSize();
+        }
+        return this;
+    }
+
+    height(value: number | string): this {
+        this.state.height = value;
+        if (this._canvas) {
+            this._canvas.style.height = typeof value === 'number' ? `${value}px` : value;
+            this._updateCanvasSize();
+        }
+        return this;
+    }
+
+    backgroundColor(value: string): this {
+        this.state.backgroundColor = value;
+        return this;
+    }
+
+    backgroundImage(value: string): this {
+        this.state.backgroundImage = value;
+        return this;
+    }
+
+    border(value: string): this {
+        this.state.border = value;
+        if (this._canvas) {
+            this._canvas.style.border = value;
+        }
+        return this;
+    }
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    radius(value: number): this {
+        this.state.radius = value;
+        if (this._canvas) {
+            this._canvas.style.borderRadius = `${value}px`;
+        }
+        return this;
+    }
+
+    grid(enabled: boolean, size?: number, color?: string): this {
+        this.state.gridEnabled = enabled;
+        if (size !== undefined) this.state.gridSize = size;
+        if (color !== undefined) this.state.gridColor = color;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * DRAWING API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Add a line shape
+     */
+    drawLine(x1: number, y1: number, x2: number, y2: number, options: Partial<PenShape> = {}): this {
+        const shape: PenShape = {
+            id: options.id || `line-${Date.now()}-${Math.random()}`,
+            type: 'line',
+            x: x1,
+            y: y1,
+            width: x2 - x1,
+            height: y2 - y1,
+            color: options.color || '#000000',
+            strokeWidth: options.strokeWidth || 2,
+            connectedTo: options.connectedTo || []
+        };
+
+        this.state.shapes = [...this.state.shapes, shape];
+        this._triggerCallback('shapeAdd', shape);
+        return this;
+    }
+
+    /**
+     * Add a rectangle shape
+     */
+    drawRect(x: number, y: number, width: number, height: number, options: Partial<PenShape> = {}): this {
+        const shape: PenShape = {
+            id: options.id || `rect-${Date.now()}-${Math.random()}`,
+            type: 'rectangle',
+            x,
+            y,
+            width,
+            height,
+            color: options.color || '#000000',
+            fillColor: options.fillColor,
+            strokeWidth: options.strokeWidth || 2,
+            connectedTo: options.connectedTo || []
+        };
+
+        this.state.shapes = [...this.state.shapes, shape];
+        this._triggerCallback('shapeAdd', shape);
+        return this;
+    }
+
+    /**
+     * Add a circle shape
+     */
+    drawCircle(x: number, y: number, radius: number, options: Partial<PenShape> = {}): this {
+        const shape: PenShape = {
+            id: options.id || `circle-${Date.now()}-${Math.random()}`,
+            type: 'circle',
+            x,
+            y,
+            radius,
+            color: options.color || '#000000',
+            fillColor: options.fillColor,
+            strokeWidth: options.strokeWidth || 2,
+            connectedTo: options.connectedTo || []
+        };
+
+        this.state.shapes = [...this.state.shapes, shape];
+        this._triggerCallback('shapeAdd', shape);
+        return this;
+    }
+
+    /**
+     * Add text to canvas
+     */
+    drawText(x: number, y: number, text: string, options: Partial<PenShape> = {}): this {
+        const shape: PenShape = {
+            id: options.id || `text-${Date.now()}-${Math.random()}`,
+            type: 'text',
+            x,
+            y,
+            text,
+            color: options.color || '#000000',
+            connectedTo: options.connectedTo || []
+        };
+
+        this.state.shapes = [...this.state.shapes, shape];
+        this._triggerCallback('shapeAdd', shape);
+        return this;
+    }
+
+    /**
+     * Connect two shapes with a line
+     */
+    connect(fromId: string, toId: string, options: Partial<PenConnection> = {}): this {
+        const connection: PenConnection = {
+            from: fromId,
+            to: toId,
+            color: options.color || '#666666',
+            strokeWidth: options.strokeWidth || 1,
+            dashed: options.dashed || false
+        };
+
+        this.state.connections = [...this.state.connections, connection];
+
+        // Update connected shapes
+        const fromShape = this.state.shapes.find(s => s.id === fromId);
+        if (fromShape && !fromShape.connectedTo?.includes(toId)) {
+            fromShape.connectedTo = [...(fromShape.connectedTo || []), toId];
+        }
+
+        this._triggerCallback('connectionAdd', connection);
+        return this;
+    }
+
+    /**
+     * Remove a shape by ID
+     */
+    removeShape(id: string): this {
+        this.state.shapes = this.state.shapes.filter(s => s.id !== id);
+        this.state.connections = this.state.connections.filter(c => c.from !== id && c.to !== id);
+        this._triggerCallback('shapeRemove', id);
+        return this;
+    }
+
+    /**
+     * Clear all shapes and connections
+     */
+    clear(): this {
+        this.state.shapes = [];
+        this.state.connections = [];
+        return this;
+    }
+
+    /**
+     * Get shape by ID
+     */
+    getShape(id: string): PenShape | undefined {
+        return this.state.shapes.find(s => s.id === id);
+    }
+
+    /**
+     * Get all shapes
+     */
+    getShapes(): PenShape[] {
+        return this.state.shapes;
+    }
+
+    /**
+     * Export canvas as data URL
+     */
+    toDataURL(type: string = 'image/png'): string {
+        return this._canvas?.toDataURL(type) || '';
+    }
+
+    /**
+     * Download canvas as image
+     */
+    download(filename: string = 'pen-drawing.png'): this {
+        const dataURL = this.toDataURL();
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = dataURL;
+        link.click();
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE RENDERING
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private _updateCanvasSize(): void {
+        if (!this._canvas) return;
+
+        const rect = this._canvas.getBoundingClientRect();
+        this._canvas.width = rect.width;
+        this._canvas.height = rect.height;
+        this._redraw();
+    }
+
+    private _redraw(): void {
+        if (!this._ctx || !this._canvas) return;
+
+        const { width, height } = this._canvas;
+
+        // Clear canvas
+        this._ctx.clearRect(0, 0, width, height);
+
+        // Draw background
+        if (this.state.backgroundColor) {
+            this._ctx.fillStyle = this.state.backgroundColor;
+            this._ctx.fillRect(0, 0, width, height);
+        }
+
+        // Draw background image
+        if (this.state.backgroundImage) {
+            const img = new Image();
+            img.src = this.state.backgroundImage;
+            img.onload = () => {
+                this._ctx?.drawImage(img, 0, 0, width, height);
+                this._drawContent();
+            };
+        } else {
+            this._drawContent();
+        }
+    }
+
+    private _drawContent(): void {
+        if (!this._ctx || !this._canvas) return;
+
+        // Draw grid
+        if (this.state.gridEnabled) {
+            this._drawGrid();
+        }
+
+        // Draw connections first (under shapes)
+        this.state.connections.forEach(conn => this._drawConnection(conn));
+
+        // Draw shapes
+        this.state.shapes.forEach(shape => this._drawShape(shape));
+
+        // Draw text overlay
+        if (this.state.text) {
+            this._ctx.fillStyle = '#000000';
+            this._ctx.font = '16px sans-serif';
+            this._ctx.fillText(this.state.text, 10, 30);
+        }
+
+        this._triggerCallback('draw', { shapes: this.state.shapes, connections: this.state.connections });
+    }
+
+    private _drawGrid(): void {
+        if (!this._ctx || !this._canvas) return;
+
+        const { width, height } = this._canvas;
+        const { gridSize, gridColor } = this.state;
+
+        this._ctx.strokeStyle = gridColor;
+        this._ctx.lineWidth = 1;
+
+        // Vertical lines
+        for (let x = 0; x <= width; x += gridSize) {
+            this._ctx.beginPath();
+            this._ctx.moveTo(x, 0);
+            this._ctx.lineTo(x, height);
+            this._ctx.stroke();
+        }
+
+        // Horizontal lines
+        for (let y = 0; y <= height; y += gridSize) {
+            this._ctx.beginPath();
+            this._ctx.moveTo(0, y);
+            this._ctx.lineTo(width, y);
+            this._ctx.stroke();
+        }
+    }
+
+    private _drawShape(shape: PenShape): void {
+        if (!this._ctx) return;
+
+        this._ctx.strokeStyle = shape.color || '#000000';
+        this._ctx.lineWidth = shape.strokeWidth || 2;
+
+        switch (shape.type) {
+            case 'line':
+                this._ctx.beginPath();
+                this._ctx.moveTo(shape.x, shape.y);
+                this._ctx.lineTo(shape.x + (shape.width || 0), shape.y + (shape.height || 0));
+                this._ctx.stroke();
+                break;
+
+            case 'rectangle':
+                if (shape.fillColor) {
+                    this._ctx.fillStyle = shape.fillColor;
+                    this._ctx.fillRect(shape.x, shape.y, shape.width || 0, shape.height || 0);
+                }
+                this._ctx.strokeRect(shape.x, shape.y, shape.width || 0, shape.height || 0);
+                break;
+
+            case 'circle':
+                this._ctx.beginPath();
+                this._ctx.arc(shape.x, shape.y, shape.radius || 0, 0, Math.PI * 2);
+                if (shape.fillColor) {
+                    this._ctx.fillStyle = shape.fillColor;
+                    this._ctx.fill();
+                }
+                this._ctx.stroke();
+                break;
+
+            case 'text':
+                this._ctx.fillStyle = shape.color || '#000000';
+                this._ctx.font = '14px sans-serif';
+                this._ctx.fillText(shape.text || '', shape.x, shape.y);
+                break;
+        }
+    }
+
+    private _drawConnection(conn: PenConnection): void {
+        if (!this._ctx) return;
+
+        const fromShape = this.state.shapes.find(s => s.id === conn.from);
+        const toShape = this.state.shapes.find(s => s.id === conn.to);
+
+        if (!fromShape || !toShape) return;
+
+        // Calculate center points
+        const fromX = fromShape.x + (fromShape.width || fromShape.radius || 0) / 2;
+        const fromY = fromShape.y + (fromShape.height || fromShape.radius || 0) / 2;
+        const toX = toShape.x + (toShape.width || toShape.radius || 0) / 2;
+        const toY = toShape.y + (toShape.height || toShape.radius || 0) / 2;
+
+        this._ctx.strokeStyle = conn.color || '#666666';
+        this._ctx.lineWidth = conn.strokeWidth || 1;
+
+        if (conn.dashed) {
+            this._ctx.setLineDash([5, 5]);
+        }
+
+        this._ctx.beginPath();
+        this._ctx.moveTo(fromX, fromY);
+        this._ctx.lineTo(toX, toY);
+        this._ctx.stroke();
+
+        if (conn.dashed) {
+            this._ctx.setLineDash([]);
+        }
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { width, height, backgroundColor, border, radius, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-pen';
+        wrapper.id = `${this._id}-wrapper`;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        const canvas = document.createElement('canvas');
+        canvas.id = this._id;
+        canvas.className = 'jux-pen-canvas';
+        canvas.style.width = typeof width === 'number' ? `${width}px` : width;
+        canvas.style.height = typeof height === 'number' ? `${height}px` : height;
+        canvas.style.backgroundColor = backgroundColor;
+        canvas.style.border = border;
+        canvas.style.borderRadius = `${radius}px`;
+        canvas.style.display = 'block';
+
+        this._canvas = canvas;
+        this._ctx = canvas.getContext('2d');
+
+        // Set initial canvas size
+        requestAnimationFrame(() => {
+            this._updateCanvasSize();
+        });
+
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            this._updateCanvasSize();
+        });
+
+        this._wireStandardEvents(wrapper);
+        this._wireAllSyncs();
+
+        wrapper.appendChild(canvas);
+        container.appendChild(wrapper);
+
+        return this;
+    }
+
+    /**
+     * Cleanup on destroy
+     */
+    destroy(): void {
+        if (this._animationFrame) {
+            cancelAnimationFrame(this._animationFrame);
+        }
+        this.remove();
+    }
+}
+
+export function pen(id: string, options: PenOptions = {}): Pen {
+    return new Pen(id, options);
+}

package/lib/components/tabs.d.ts

@@ -1,8 +1,8 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 export interface Tab {
     id: string;
     label: string;
-    content: string | HTMLElement;
+    content: string | HTMLElement | BaseComponent<any>;
     icon?: string;
 }
 export interface TabsOptions {
@@ -12,25 +12,38 @@ export interface TabsOptions {
     style?: string;
     class?: string;
 }
-type TabsState = {
+type TabsState = BaseState & {
     tabs: Tab[];
     activeTab: string;
     variant: string;
-    style: string;
-    class: string;
 };
 export declare class Tabs extends BaseComponent<TabsState> {
+    private _tabsWrapper;
     constructor(id: string, options?: TabsOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
+    update(prop: string, value: any): void;
+    private _updateActiveTab;
+    private _rebuildTabs;
+    /**
+     * ✅ NEW: Smart content rendering
+     * Handles strings, DOM elements, and component instances
+     */
+    private _renderTabContent;
     tabs(value: Tab[]): this;
     addTab(tab: Tab): this;
+    removeTab(tabId: string): this;
     activeTab(value: string): this;
     variant(value: 'default' | 'pills' | 'underline'): this;
-    private _updateActiveTab;
-    update(prop: string, value: any): void;
+    /**
+     * ✅ NEW: Update content of a specific tab
+     */
+    updateTabContent(tabId: string, content: string | HTMLElement | BaseComponent<any>): this;
+    /**
+     * ✅ NEW: Get current tab
+     */
+    getCurrentTab(): Tab | undefined;
     render(targetId?: string): this;
-    private _switchTab;
 }
 export declare function tabs(id: string, options?: TabsOptions): Tabs;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAUjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAKxB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAKtB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM9B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,IAAI;IAKvD,OAAO,CAAC,gBAAgB;IAgBxB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAwI/B,OAAO,CAAC,UAAU;CAcnB;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,YAAY,CAA4B;gBAEpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAUjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAuBtC,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,YAAY;IAuDpB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAkBzB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAKxB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAKtB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,IAAI;IAKvD;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAkBzF;;OAEG;IACH,aAAa,IAAI,GAAG,GAAG,SAAS;IAQhC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAqEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}