@widgetic/chat 0.1.4

package/dist/adapters/widgeticAdapter.js

@@ -0,0 +1,766 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { chatLog } from '../utils/logger.js';
+import { ContextType } from '../types/index.js';
+/**
+ * Widgetic Canvas Platform Adapter
+ * Handles frame-based contexts for the Widgetic canvas system
+ */
+var WidgeticCanvasAdapter = /** @class */ (function () {
+    function WidgeticCanvasAdapter() {
+        this.name = 'widgetic';
+        this.version = '1.0.0';
+        this.frameSelectionCallbacks = [];
+        this.frameDeselectionCallbacks = [];
+        this.contextChangeCallbacks = [];
+        this.contextUpdateCallbacks = [];
+    }
+    /**
+     * Extract frame ID from context object
+     */
+    WidgeticCanvasAdapter.prototype.getContextId = function (contextObject) {
+        if (typeof contextObject === 'string') {
+            return contextObject;
+        }
+        if (contextObject === null || contextObject === void 0 ? void 0 : contextObject.frameId) {
+            return contextObject.frameId;
+        }
+        if (contextObject === null || contextObject === void 0 ? void 0 : contextObject.id) {
+            return contextObject.id;
+        }
+        throw new Error('Invalid context object: missing frameId or id');
+    };
+    /**
+     * Get human-readable title for the frame
+     */
+    WidgeticCanvasAdapter.prototype.getContextTitle = function (contextObject) {
+        if (typeof contextObject === 'string') {
+            return "Frame ".concat(contextObject);
+        }
+        return (contextObject === null || contextObject === void 0 ? void 0 : contextObject.title) || (contextObject === null || contextObject === void 0 ? void 0 : contextObject.name) || "Frame ".concat(this.getContextId(contextObject));
+    };
+    /**
+     * Get context type
+     */
+    WidgeticCanvasAdapter.prototype.getContextType = function () {
+        return 'frame';
+    };
+    /**
+     * Create a standardized chat context from a frame object
+     */
+    WidgeticCanvasAdapter.prototype.createContext = function (contextObject) {
+        var id = this.getContextId(contextObject);
+        var title = this.getContextTitle(contextObject);
+        return {
+            id: id,
+            type: ContextType.FRAME,
+            parentId: (contextObject === null || contextObject === void 0 ? void 0 : contextObject.canvasId) || 'unknown-canvas',
+            title: title,
+            thumbnail: (contextObject === null || contextObject === void 0 ? void 0 : contextObject.thumbnail) || (contextObject === null || contextObject === void 0 ? void 0 : contextObject.previewUrl),
+            metadata: {
+                isPublished: (contextObject === null || contextObject === void 0 ? void 0 : contextObject.isPublished) || false,
+                dimensions: (contextObject === null || contextObject === void 0 ? void 0 : contextObject.dimensions) || {
+                    width: (contextObject === null || contextObject === void 0 ? void 0 : contextObject.width) || 320,
+                    height: (contextObject === null || contextObject === void 0 ? void 0 : contextObject.height) || 240
+                },
+                frameTitle: title,
+                canvasId: contextObject === null || contextObject === void 0 ? void 0 : contextObject.canvasId
+            }
+        };
+    };
+    /**
+     * Returns the capabilities supported by the Widgetic platform adapter.
+     *
+     * Capabilities explained:
+     * - supportsScreenshot: Can capture static images of frame content
+     * - supportsRecording: Can record video of user interactions within frames
+     * - supportsFileUpload: Can handle file uploads via drag-and-drop or file picker
+     * - supportsTextInput: Can handle text-based chat messages
+     * - supportsMediaCapture: Can handle general media input (camera access, microphone,
+     *   file uploads, reference images) beyond just screenshots and recordings
+     */
+    WidgeticCanvasAdapter.prototype.getCapabilities = function () {
+        return {
+            supportsScreenshot: true,
+            supportsRecording: true,
+            supportsFileUpload: true,
+            supportsTextInput: true,
+            supportsMediaCapture: true
+        };
+    };
+    /**
+     * Get AI suggestions based on frame context
+     */
+    WidgeticCanvasAdapter.prototype.getSuggestions = function (context) {
+        return __awaiter(this, void 0, Promise, function () {
+            var frameType;
+            var _a;
+            return __generator(this, function (_b) {
+                frameType = ((_a = context.metadata) === null || _a === void 0 ? void 0 : _a.frameTitle) || 'frame';
+                return [2 /*return*/, [
+                        "What does this ".concat(frameType, " do?"),
+                        "How can I improve this design?",
+                        "Can you explain this component?",
+                        "What are some best practices for this?",
+                        "How do I customize this further?"
+                    ]];
+            });
+        });
+    };
+    /**
+     * Get available actions for this frame
+     */
+    WidgeticCanvasAdapter.prototype.getActions = function (context) {
+        return __awaiter(this, void 0, Promise, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                return [2 /*return*/, [
+                        {
+                            id: 'screenshot',
+                            label: 'Take Screenshot',
+                            icon: 'camera',
+                            handler: function () { return _this.captureFrameScreenshot(context.id); }
+                        },
+                        {
+                            id: 'record',
+                            label: 'Record Video',
+                            icon: 'video',
+                            handler: function () { return _this.startFrameRecording(context.id); }
+                        },
+                        {
+                            id: 'inspect',
+                            label: 'Inspect Frame',
+                            icon: 'search',
+                            handler: function () { return _this.getFrameContent(context.id); }
+                        },
+                        {
+                            id: 'select-element',
+                            label: 'Select Element',
+                            icon: 'cursor-pointer',
+                            handler: function () { return _this.enableElementSelection(context.id); }
+                        }
+                    ]];
+            });
+        });
+    };
+    /**
+     * Capture screenshot of a specific frame
+     */
+    WidgeticCanvasAdapter.prototype.captureFrameScreenshot = function (frameId) {
+        return __awaiter(this, void 0, Promise, function () {
+            var canvas_1, ctx;
+            return __generator(this, function (_a) {
+                try {
+                    canvas_1 = document.createElement('canvas');
+                    canvas_1.width = 320;
+                    canvas_1.height = 240;
+                    ctx = canvas_1.getContext('2d');
+                    if (ctx) {
+                        // Draw a placeholder
+                        ctx.fillStyle = '#f3f4f6';
+                        ctx.fillRect(0, 0, canvas_1.width, canvas_1.height);
+                        ctx.fillStyle = '#6b7280';
+                        ctx.font = '16px Arial';
+                        ctx.textAlign = 'center';
+                        ctx.fillText("Frame ".concat(frameId), canvas_1.width / 2, canvas_1.height / 2);
+                    }
+                    return [2 /*return*/, new Promise(function (resolve) {
+                            canvas_1.toBlob(function (blob) {
+                                resolve(blob || new Blob());
+                            }, 'image/png');
+                        })];
+                }
+                catch (error) {
+                    console.error('Failed to capture frame screenshot:', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Start recording a frame
+     */
+    WidgeticCanvasAdapter.prototype.startFrameRecording = function (frameId) {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                try {
+                    chatLog("Starting recording for frame: ".concat(frameId));
+                    // Implementation would integrate with the canvas recording system
+                    // For now, just log the action
+                }
+                catch (error) {
+                    console.error('Failed to start frame recording:', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Capture screenshot of any frame context
+     */
+    WidgeticCanvasAdapter.prototype.captureScreenshot = function (contextId) {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.captureFrameScreenshot(contextId)];
+            });
+        });
+    };
+    /**
+     * Start recording for any context
+     */
+    WidgeticCanvasAdapter.prototype.startRecording = function (contextId) {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.startFrameRecording(contextId)];
+            });
+        });
+    };
+    /**
+     * Stop recording (placeholder)
+     */
+    WidgeticCanvasAdapter.prototype.stopRecording = function () {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                // Implementation would stop the recording and return the video blob
+                chatLog('Stopping recording...');
+                return [2 /*return*/, new Blob([], { type: 'video/webm' })];
+            });
+        });
+    };
+    /**
+     * Get frame content and metadata with optional element-specific inspection.
+     *
+     * This method retrieves detailed information about a frame's structure, components,
+     * and optionally focuses on a specific element within the frame. It's used by the
+     * AI to understand the frame's composition and provide targeted suggestions.
+     *
+     * @param frameId - The unique identifier of the frame to inspect
+     * @param elementId - Optional. The specific element within the frame to focus on
+     * @returns Promise containing frame content, structure, and metadata
+     *
+     * Use cases:
+     * - General frame analysis: getFrameContent('frame-123')
+     * - Specific element targeting: getFrameContent('frame-123', 'button-456')
+     * - AI code generation based on existing components
+     * - Providing context for design suggestions
+     */
+    WidgeticCanvasAdapter.prototype.getFrameContent = function (frameId, elementId) {
+        return __awaiter(this, void 0, Promise, function () {
+            var baseFrameData, _a, _b, error_1;
+            var _c, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _e.trys.push([0, 5, , 6]);
+                        baseFrameData = {
+                            frameId: frameId,
+                            type: 'frame',
+                            metadata: {
+                                width: 320,
+                                height: 240,
+                                isPublished: false,
+                                canvasId: "canvas-".concat(frameId)
+                            }
+                        };
+                        if (!elementId) return [3 /*break*/, 2];
+                        _a = [__assign({}, baseFrameData)];
+                        _c = {};
+                        return [4 /*yield*/, this.getElementDetails(frameId, elementId)];
+                    case 1: 
+                    // Return element-specific data for targeted AI assistance
+                    return [2 /*return*/, __assign.apply(void 0, _a.concat([(_c.selectedElement = _e.sent(), _c.content = "Frame containing selected element: ".concat(elementId), _c.context = 'element-specific-inspection', _c)]))];
+                    case 2:
+                        _b = [__assign({}, baseFrameData)];
+                        _d = {};
+                        return [4 /*yield*/, this.getFrameStructure(frameId)];
+                    case 3:
+                        _d.content = _e.sent();
+                        return [4 /*yield*/, this.getFrameComponents(frameId)];
+                    case 4: 
+                    // Return full frame structure for general inspection
+                    return [2 /*return*/, __assign.apply(void 0, _b.concat([(_d.components = _e.sent(), _d.context = 'full-frame-inspection', _d)]))];
+                    case 5:
+                        error_1 = _e.sent();
+                        console.error('Failed to get frame content:', error_1);
+                        throw error_1;
+                    case 6: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Get detailed information about a specific element within a frame.
+     *
+     * This method provides comprehensive data about a selected element, including
+     * its properties, styling, position, and relationships to other elements.
+     * Used when the user wants to make changes to a specific component.
+     *
+     * @param frameId - The frame containing the element
+     * @param elementId - The unique identifier of the element to inspect
+     * @returns Element details including properties, styling, and context
+     */
+    WidgeticCanvasAdapter.prototype.getElementDetails = function (frameId, elementId) {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                try {
+                    // In a real implementation, this would:
+                    // 1. Query the canvas API for the specific element
+                    // 2. Extract element properties (type, content, styling)
+                    // 3. Get element position and dimensions
+                    // 4. Identify parent/child relationships
+                    // 5. Extract event handlers and interactions
+                    return [2 /*return*/, {
+                            elementId: elementId,
+                            type: 'button', // Would be dynamically determined
+                            properties: {
+                                text: 'Click Me',
+                                variant: 'primary',
+                                size: 'medium',
+                                disabled: false
+                            },
+                            styling: {
+                                backgroundColor: '#3b82f6',
+                                color: '#ffffff',
+                                borderRadius: '6px',
+                                padding: '8px 16px',
+                                fontSize: '14px'
+                            },
+                            position: {
+                                x: 50,
+                                y: 100,
+                                width: 120,
+                                height: 40
+                            },
+                            interactions: {
+                                onClick: 'handleButtonClick',
+                                onHover: 'showTooltip'
+                            },
+                            hierarchy: {
+                                parent: 'container-789',
+                                children: [],
+                                siblings: ['input-101', 'label-102']
+                            },
+                            metadata: {
+                                createdAt: new Date().toISOString(),
+                                lastModified: new Date().toISOString(),
+                                component: 'Button',
+                                library: 'widgetic-ui'
+                            }
+                        }];
+                }
+                catch (error) {
+                    console.error('Failed to get element details:', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Get the hierarchical structure of all components within a frame.
+     *
+     * This method provides a tree-like representation of the frame's content,
+     * showing how components are nested and organized. Useful for understanding
+     * the overall layout and suggesting structural improvements.
+     *
+     * @param frameId - The frame to analyze
+     * @returns Hierarchical structure of frame components
+     */
+    WidgeticCanvasAdapter.prototype.getFrameStructure = function (frameId) {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                try {
+                    // In a real implementation, this would:
+                    // 1. Traverse the frame's DOM or component tree
+                    // 2. Build a hierarchical representation
+                    // 3. Include layout information (flexbox, grid, etc.)
+                    // 4. Identify component relationships and dependencies
+                    return [2 /*return*/, {
+                            root: {
+                                type: 'container',
+                                id: 'root-container',
+                                layout: 'flexbox',
+                                direction: 'column',
+                                children: [
+                                    {
+                                        type: 'header',
+                                        id: 'header-123',
+                                        children: [
+                                            { type: 'title', id: 'title-124', content: 'Widget Title' },
+                                            { type: 'subtitle', id: 'subtitle-125', content: 'Description' }
+                                        ]
+                                    },
+                                    {
+                                        type: 'content',
+                                        id: 'content-126',
+                                        layout: 'grid',
+                                        children: [
+                                            { type: 'button', id: 'button-127', content: 'Primary Action' },
+                                            { type: 'input', id: 'input-128', content: '' },
+                                            { type: 'text', id: 'text-129', content: 'Help text' }
+                                        ]
+                                    }
+                                ]
+                            },
+                            layoutInfo: {
+                                totalElements: 7,
+                                maxDepth: 3,
+                                layoutTypes: ['flexbox', 'grid'],
+                                responsiveBreakpoints: ['mobile', 'tablet', 'desktop']
+                            }
+                        }];
+                }
+                catch (error) {
+                    console.error('Failed to get frame structure:', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Get a list of all components within a frame with their basic properties.
+     *
+     * This method provides a flat list of all components for quick reference
+     * and bulk operations. Useful for inventory, search, and batch modifications.
+     *
+     * @param frameId - The frame to analyze
+     * @returns Array of component summaries
+     */
+    WidgeticCanvasAdapter.prototype.getFrameComponents = function (frameId) {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                try {
+                    // In a real implementation, this would:
+                    // 1. Query all components in the frame
+                    // 2. Extract basic information for each
+                    // 3. Include component states and variants
+                    // 4. Provide quick access properties
+                    return [2 /*return*/, [
+                            {
+                                id: 'title-124',
+                                type: 'title',
+                                content: 'Widget Title',
+                                editable: true,
+                                visible: true
+                            },
+                            {
+                                id: 'subtitle-125',
+                                type: 'subtitle',
+                                content: 'Description',
+                                editable: true,
+                                visible: true
+                            },
+                            {
+                                id: 'button-127',
+                                type: 'button',
+                                content: 'Primary Action',
+                                variant: 'primary',
+                                interactive: true
+                            },
+                            {
+                                id: 'input-128',
+                                type: 'input',
+                                placeholder: 'Enter text...',
+                                required: false,
+                                interactive: true
+                            },
+                            {
+                                id: 'text-129',
+                                type: 'text',
+                                content: 'Help text',
+                                editable: false,
+                                visible: true
+                            }
+                        ]];
+                }
+                catch (error) {
+                    console.error('Failed to get frame components:', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Enable element selection mode for a frame.
+     *
+     * This method puts the frame into a special selection mode where users can
+     * click on individual elements to select them for targeted AI assistance.
+     * When an element is selected, it becomes the focus for subsequent AI interactions.
+     *
+     * @param frameId - The frame to enable selection mode for
+     * @returns Promise that resolves when selection mode is active
+     *
+     * Behavior:
+     * - Highlights hoverable elements
+     * - Shows selection cursor
+     * - Captures element clicks
+     * - Provides visual feedback for selection
+     * - Automatically focuses chat on selected element
+     */
+    WidgeticCanvasAdapter.prototype.enableElementSelection = function (frameId) {
+        return __awaiter(this, void 0, Promise, function () {
+            var frameElement, selectableElements;
+            var _this = this;
+            return __generator(this, function (_a) {
+                try {
+                    chatLog("Enabling element selection for frame: ".concat(frameId));
+                    frameElement = document.querySelector("[data-frame-id=\"".concat(frameId, "\"]"));
+                    if (frameElement) {
+                        frameElement.classList.add('element-selection-mode');
+                        selectableElements = frameElement.querySelectorAll('[data-element-id]');
+                        selectableElements.forEach(function (element) {
+                            element.addEventListener('click', function (event) {
+                                event.stopPropagation();
+                                var elementId = event.target.getAttribute('data-element-id');
+                                if (elementId) {
+                                    _this.selectElement(frameId, elementId);
+                                }
+                            });
+                            // Add hover effects
+                            element.addEventListener('mouseenter', function () {
+                                element.classList.add('element-hover');
+                            });
+                            element.addEventListener('mouseleave', function () {
+                                element.classList.remove('element-hover');
+                            });
+                        });
+                    }
+                    // Notify that selection mode is active
+                    this.triggerContextUpdate({
+                        id: frameId,
+                        type: ContextType.FRAME,
+                        parentId: 'canvas',
+                        title: "Frame ".concat(frameId),
+                        metadata: {
+                            selectionMode: true,
+                            instruction: 'Click on an element to select it for AI assistance'
+                        }
+                    });
+                }
+                catch (error) {
+                    console.error('Failed to enable element selection:', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Select a specific element within a frame for targeted AI assistance.
+     *
+     * This method is called when a user clicks on an element during selection mode.
+     * It highlights the selected element and prepares it for AI interaction.
+     *
+     * @param frameId - The frame containing the element
+     * @param elementId - The element that was selected
+     * @returns Promise that resolves when element is selected
+     */
+    WidgeticCanvasAdapter.prototype.selectElement = function (frameId, elementId) {
+        return __awaiter(this, void 0, Promise, function () {
+            var frameElement, selectedElement, elementDetails, error_2;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        chatLog("Selected element ".concat(elementId, " in frame ").concat(frameId));
+                        frameElement = document.querySelector("[data-frame-id=\"".concat(frameId, "\"]"));
+                        if (frameElement) {
+                            frameElement.querySelectorAll('.element-selected').forEach(function (el) {
+                                el.classList.remove('element-selected');
+                            });
+                            selectedElement = frameElement.querySelector("[data-element-id=\"".concat(elementId, "\"]"));
+                            if (selectedElement) {
+                                selectedElement.classList.add('element-selected');
+                            }
+                            // Exit selection mode
+                            frameElement.classList.remove('element-selection-mode');
+                        }
+                        return [4 /*yield*/, this.getElementDetails(frameId, elementId)];
+                    case 1:
+                        elementDetails = _b.sent();
+                        // Trigger context update with selected element
+                        this.triggerContextUpdate({
+                            id: frameId,
+                            type: ContextType.FRAME,
+                            parentId: 'canvas',
+                            title: "Frame ".concat(frameId, " - ").concat(elementDetails.type),
+                            metadata: {
+                                selectedElement: elementId,
+                                elementType: elementDetails.type,
+                                selectionMode: false,
+                                aiContext: "Selected ".concat(elementDetails.type, " for modification: ").concat(((_a = elementDetails.properties) === null || _a === void 0 ? void 0 : _a.text) || elementId)
+                            }
+                        });
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_2 = _b.sent();
+                        console.error('Failed to select element:', error_2);
+                        throw error_2;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Register callback for frame selection events
+     */
+    WidgeticCanvasAdapter.prototype.onFrameSelection = function (callback) {
+        var _this = this;
+        this.frameSelectionCallbacks.push(callback);
+        return function () {
+            var index = _this.frameSelectionCallbacks.indexOf(callback);
+            if (index > -1) {
+                _this.frameSelectionCallbacks.splice(index, 1);
+            }
+        };
+    };
+    /**
+     * Register callback for frame deselection events
+     */
+    WidgeticCanvasAdapter.prototype.onFrameDeselection = function (callback) {
+        var _this = this;
+        this.frameDeselectionCallbacks.push(callback);
+        return function () {
+            var index = _this.frameDeselectionCallbacks.indexOf(callback);
+            if (index > -1) {
+                _this.frameDeselectionCallbacks.splice(index, 1);
+            }
+        };
+    };
+    /**
+     * Register callback for context changes
+     */
+    WidgeticCanvasAdapter.prototype.onContextChange = function (callback) {
+        var _this = this;
+        this.contextChangeCallbacks.push(callback);
+        return function () {
+            var index = _this.contextChangeCallbacks.indexOf(callback);
+            if (index > -1) {
+                _this.contextChangeCallbacks.splice(index, 1);
+            }
+        };
+    };
+    /**
+     * Register callback for context updates
+     */
+    WidgeticCanvasAdapter.prototype.onContextUpdate = function (callback) {
+        var _this = this;
+        this.contextUpdateCallbacks.push(callback);
+        return function () {
+            var index = _this.contextUpdateCallbacks.indexOf(callback);
+            if (index > -1) {
+                _this.contextUpdateCallbacks.splice(index, 1);
+            }
+        };
+    };
+    /**
+     * Trigger frame selection event
+     */
+    WidgeticCanvasAdapter.prototype.triggerFrameSelection = function (frameId) {
+        this.frameSelectionCallbacks.forEach(function (callback) {
+            try {
+                callback(frameId);
+            }
+            catch (error) {
+                console.error('Error in frame selection callback:', error);
+            }
+        });
+    };
+    /**
+     * Trigger frame deselection event
+     */
+    WidgeticCanvasAdapter.prototype.triggerFrameDeselection = function (frameId) {
+        this.frameDeselectionCallbacks.forEach(function (callback) {
+            try {
+                callback(frameId);
+            }
+            catch (error) {
+                console.error('Error in frame deselection callback:', error);
+            }
+        });
+    };
+    /**
+     * Trigger context change event
+     */
+    WidgeticCanvasAdapter.prototype.triggerContextChange = function (context) {
+        this.contextChangeCallbacks.forEach(function (callback) {
+            try {
+                callback(context);
+            }
+            catch (error) {
+                console.error('Error in context change callback:', error);
+            }
+        });
+    };
+    /**
+     * Trigger context update event
+     */
+    WidgeticCanvasAdapter.prototype.triggerContextUpdate = function (context) {
+        this.contextUpdateCallbacks.forEach(function (callback) {
+            try {
+                callback(context);
+            }
+            catch (error) {
+                console.error('Error in context update callback:', error);
+            }
+        });
+    };
+    return WidgeticCanvasAdapter;
+}());
+export { WidgeticCanvasAdapter };
+/**
+ * Create a new Widgetic adapter instance
+ */
+export function createWidgeticAdapter() {
+    return new WidgeticCanvasAdapter();
+}