@hawsen-the-first/interactiv 0.0.1

package/dist/src/appBuilder.js

@@ -0,0 +1,957 @@
+/* eslint-disable @typescript-eslint/no-this-alias */
+import { EventBus } from "./eventBus";
+import { NavigationManager } from "./navigationManager";
+import { ScreensaverManager, } from "./screensaverManager";
+import { SettingsManager } from "./settingsManager";
+import { EventManager } from "./eventManager";
+import { ComponentStateManager } from "./stateManager";
+import { logger } from "./logger";
+class RenderableComponent {
+    componentId;
+    state;
+    renderBus;
+    shadowRoot;
+    bubbleChanges;
+    children = [];
+    parent;
+    template = "";
+    styles = "";
+    lastRenderedHTML = "";
+    properties = new Map();
+    hostElement;
+    eventManager;
+    stateManager;
+    orchestrator;
+    globalSheets;
+    constructor(id, orchestrator, bubbleChanges = false) {
+        this.componentId = id;
+        this.bubbleChanges = bubbleChanges;
+        this.orchestrator = orchestrator;
+        this.globalSheets = [];
+        this.renderBus = orchestrator.registerEventBus(`render-${id}`);
+        this.setupRenderListeners();
+        this.attachShadowDOM();
+        this.initializeEventManager();
+        this.initializeStateManager();
+    }
+    setupRenderListeners() {
+        this.renderBus.on("render-request", (e) => {
+            const { changeType, source } = e.detail;
+            if (this.shouldRerender(changeType, source)) {
+                this.performRender();
+            }
+        });
+        this.renderBus.on("child-changed", (e) => {
+            const { childId, changeType } = e.detail;
+            this.handleChildChange(childId, changeType);
+        });
+        this.renderBus.on("parent-changed", (e) => {
+            const { changeType } = e.detail;
+            this.handleParentChange(changeType);
+        });
+    }
+    attachShadowDOM() {
+        this.hostElement = document.createElement("div");
+        this.hostElement.id = this.componentId;
+        this.shadowRoot = this.hostElement.attachShadow({ mode: "open" });
+        if (this.globalSheets?.length > 0) {
+            this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, ...this.globalSheets];
+        }
+    }
+    async useGlobalStyles(text) {
+        const sheet = new CSSStyleSheet();
+        await sheet.replace(text);
+        this.globalSheets.push(sheet);
+    }
+    initializeEventManager() {
+        this.eventManager = new EventManager(this.shadowRoot, this.componentId);
+    }
+    /**
+     * Clean up event listeners before re-render to prevent duplicates
+     */
+    // private cleanupEventListeners(): void {
+    //   // Clear all selector-based listeners to prevent duplicates
+    //   // The EventManager will handle this automatically now with deduplication
+    //   // but we can add explicit cleanup if needed
+    // }
+    initializeStateManager() {
+        this.stateManager = new ComponentStateManager(this.componentId, (key, value, isLocal) => {
+            this.handleStateChange(key, value, isLocal);
+        });
+        // Attach the state proxy to this component
+        this.state = this.stateManager.getStateProxy();
+    }
+    handleStateChange(key, value, isLocal) {
+        // Update properties map for template compilation
+        this.properties.set(key, value);
+        // Trigger re-render directly instead of through event bus to avoid loops
+        this.performRender();
+        // Handle bubbling for local state changes
+        if (isLocal && this.bubbleChanges && this.parent) {
+            this.parent.renderBus.emit("child-changed", {
+                childId: this.componentId,
+                changeType: "state-change",
+                stateKey: key,
+                isLocal: true,
+            });
+        }
+    }
+    performRender(options) {
+        const fadeConfig = options?.fade;
+        if (fadeConfig?.enabled) {
+            this.performRenderWithFade(fadeConfig.duration ?? 300, options);
+        }
+        else {
+            this.performRenderImmediate(options);
+        }
+    }
+    async performRenderWithFade(duration, options) {
+        // Fade out
+        this.hostElement.style.transition = `opacity ${duration}ms ease`;
+        this.hostElement.style.opacity = '0';
+        // Wait for fade out to complete
+        await new Promise(resolve => setTimeout(resolve, duration));
+        // Perform actual render
+        this.performRenderImmediate(options);
+        // Fade in
+        this.hostElement.style.opacity = '1';
+    }
+    performRenderImmediate(options) {
+        this.onBeforeRender();
+        const compiledHTML = this.compileTemplate();
+        if (compiledHTML !== this.lastRenderedHTML) {
+            this.updateShadowDOM(compiledHTML);
+            this.lastRenderedHTML = compiledHTML;
+            this.attachEventListeners();
+            this.renderChildren(options);
+        }
+        this.onAfterRender();
+    }
+    compileTemplate() {
+        let compiled = this.template;
+        // Handle ifnot/else blocks first (inverted if) - process these before regular if blocks
+        compiled = compiled.replace(/\{\{#ifnot\s+(\w+)\s*\}\}([\s\S]*?)(?:\{\{else\}\}([\s\S]*?))?\{\{\/ifnot\}\}/g, (_, condition, ifnotContent, elseContent) => {
+            const conditionValue = this.getProperty(condition);
+            if (!conditionValue) {
+                return ifnotContent || "";
+            }
+            else if (elseContent !== undefined) {
+                return elseContent;
+            }
+            return "";
+        });
+        // Handle if/else blocks
+        compiled = compiled.replace(/\{\{#if\s+(\w+)\s*\}\}([\s\S]*?)(?:\{\{else\}\}([\s\S]*?))?\{\{\/if\}\}/g, (_, condition, ifContent, elseContent) => {
+            const conditionValue = this.getProperty(condition);
+            if (conditionValue) {
+                return ifContent || "";
+            }
+            else if (elseContent !== undefined) {
+                return elseContent;
+            }
+            return "";
+        });
+        // Handle property interpolation last
+        compiled = compiled.replace(/\{\{(\w+)\}\}/g, (_, propName) => {
+            return this.getProperty(propName) || "";
+        });
+        return compiled;
+    }
+    updateShadowDOM(html) {
+        this.shadowRoot.innerHTML = `
+      <style>${this.styles}</style>
+      ${html}
+    `;
+    }
+    renderChildren(options) {
+        const childrenContainer = this.shadowRoot.querySelector(".children-container");
+        if (childrenContainer && this.children.length > 0) {
+            childrenContainer.innerHTML = "";
+            this.children.forEach((child) => {
+                // Ensure child is rendered before appending
+                // Pass fade options to children so they fade together
+                child.performRender(options);
+                // Ensure child host element is visible
+                //child.hostElement.style.display = "block";
+                childrenContainer.appendChild(child.hostElement);
+            });
+        }
+    }
+    getProperty(key) {
+        return this.properties.get(key);
+    }
+    getPublicProperty(key) {
+        return this.properties.get(key);
+    }
+    setProperty(key, value) {
+        const oldValue = this.properties.get(key);
+        if (oldValue !== value) {
+            this.properties.set(key, value);
+            // Special handling for template changes
+            if (key === "template") {
+                this.template = value;
+                this.performRender();
+                return;
+            }
+            // Special handling for styles changes
+            if (key === "styles") {
+                this.styles = value;
+                this.performRender();
+                return;
+            }
+            this.renderBus.emit("render-request", {
+                changeType: "property-change",
+                source: this.componentId,
+                property: key,
+                oldValue,
+                newValue: value,
+            });
+            if (this.bubbleChanges && this.parent) {
+                this.parent.renderBus.emit("child-changed", {
+                    childId: this.componentId,
+                    changeType: "property-change",
+                    property: key,
+                });
+            }
+        }
+    }
+    addChild(child) {
+        child.parent = this;
+        this.children.push(child);
+        // Force immediate re-render when child is added
+        this.updateShadowDOM(this.compileTemplate());
+        this.attachEventListeners();
+        this.renderChildren();
+        this.notifyChildrenOfStructureChange();
+    }
+    removeChild(childId) {
+        const childIndex = this.children.findIndex((c) => c.componentId === childId);
+        if (childIndex !== -1) {
+            const child = this.children[childIndex];
+            child.parent = undefined;
+            this.children.splice(childIndex, 1);
+            this.renderBus.emit("render-request", {
+                changeType: "child-removed",
+                source: this.componentId,
+                childId: childId,
+            });
+            this.notifyChildrenOfStructureChange();
+        }
+    }
+    addSibling(sibling) {
+        sibling.parent = this.parent;
+        this.parent?.children.push(sibling);
+        // Force immediate re-render when child is added
+        this.updateShadowDOM(this.compileTemplate());
+        this.attachEventListeners();
+        this.renderChildren();
+        this.notifyChildrenOfStructureChange();
+    }
+    removeSibling(siblingId) {
+        const me = this;
+        if (me.parent) {
+            const siblingIndex = me.parent?.children.findIndex((c) => c.componentId === siblingId);
+            if (siblingIndex !== -1) {
+                const sibling = me.parent?.children[siblingIndex];
+                if (sibling) {
+                    sibling.parent = undefined;
+                    me.parent.children.splice(siblingIndex, 1);
+                }
+                this.renderBus.emit("render-request", {
+                    changeType: "child-removed",
+                    source: me.componentId,
+                    childId: siblingId,
+                });
+                this.notifyChildrenOfStructureChange();
+            }
+        }
+    }
+    notifyChildrenOfStructureChange() {
+        this.children.forEach((child) => {
+            child.renderBus.emit("parent-changed", {
+                changeType: "structure-change",
+                parentId: this.componentId,
+            });
+        });
+    }
+    attachEventListeners() {
+        const actionElements = this.shadowRoot.querySelectorAll("[data-action]");
+        actionElements.forEach((element) => {
+            const action = element.getAttribute("data-action");
+            element.addEventListener("click", (e) => {
+                this.handleAction(action, e);
+            });
+        });
+    }
+    handleAction(action, event) {
+        this.renderBus.emit("action-triggered", {
+            action,
+            componentId: this.componentId,
+            event,
+        });
+    }
+    onBeforeRender() { }
+    onAfterRender() { }
+    shouldRerender(changeType, source) {
+        if (changeType && source) {
+            return true; // Default: always re-render
+        }
+        return true; // Default: always re-render
+    }
+    handleParentChange(changeType) {
+        // Default: re-render when parent changes
+        if (changeType) {
+            this.performRender();
+        }
+        this.performRender();
+    }
+    handleChildChange(childId, changeType) {
+        // Default: re-render when children change
+        if (childId && changeType) {
+            this.performRender();
+        }
+        this.performRender();
+    }
+    // Initial render method
+    performInitialRender() {
+        this.defineTemplate();
+        this.defineStyles();
+        this.performRender();
+    }
+    getHostElement() {
+        return this.hostElement;
+    }
+    getChildrenCount() {
+        return this.children.length;
+    }
+    // Event Manager convenience methods
+    /**
+     * Add a point interaction (click + tap) to elements matching the selector
+     */
+    point(selector, callback) {
+        this.eventManager.point(selector, callback);
+    }
+    /**
+     * Add an un-point interaction (click + tap) to elements matching the selector
+     */
+    unpoint(selector, callback) {
+        this.eventManager.unpoint(selector, callback);
+    }
+    /**
+     * Add drag interaction (mouse drag + touch drag) to elements matching the selector
+     */
+    drag(selector, callbacks) {
+        this.eventManager.drag(selector, callbacks);
+    }
+    /**
+     * Add hover interaction (mouse enter/leave + touch fallback) to elements matching the selector
+     */
+    hover(selector, callbacks) {
+        this.eventManager.hover(selector, callbacks);
+    }
+    /**
+     * Add long press interaction to elements matching the selector
+     */
+    longPress(selector, callback, duration = 500) {
+        this.eventManager.longPress(selector, callback, duration);
+    }
+    /**
+     * Add swipe gesture detection to elements matching the selector
+     */
+    swipe(selector, callbacks, threshold = 50) {
+        this.eventManager.swipe(selector, callbacks, threshold);
+    }
+    /**
+     * Add a custom event listener with automatic cleanup
+     */
+    addEventListener(element, type, listener, options) {
+        this.eventManager.addEventListener(element, type, listener, options);
+    }
+    /**
+     * Remove a specific event listener
+     */
+    removeEventListener(element, type, listener) {
+        this.eventManager.removeEventListener(element, type, listener);
+    }
+    // State Management convenience methods
+    /**
+     * Create and manage local component state
+     */
+    useState(key, initialValue) {
+        return this.stateManager.useState(key, initialValue);
+    }
+    /**
+     * Subscribe to and manage global application state
+     */
+    useGlobalState(key, initialValue) {
+        return this.stateManager.useGlobalState(key, initialValue);
+    }
+    /**
+     * Get current local state value without subscribing
+     */
+    getLocalState(key) {
+        return this.stateManager.getLocalState(key);
+    }
+    /**
+     * Define multiple state properties at once with initial values
+     * This creates reactive state properties accessible via this.state
+     */
+    defineState(initialState) {
+        this.stateManager.defineState(initialState);
+    }
+    /**
+     * Destroy the component and clean up all event listeners
+     */
+    destroy() {
+        if (this.stateManager) {
+            this.stateManager.destroy();
+        }
+        if (this.eventManager) {
+            this.eventManager.destroy();
+        }
+        // Clean up children
+        this.children.forEach((child) => child.destroy());
+        this.children.length = 0;
+        // Remove from parent
+        if (this.parent) {
+            this.parent.removeChild(this.componentId);
+        }
+        // Remove from DOM
+        if (this.hostElement && this.hostElement.parentNode) {
+            this.hostElement.parentNode.removeChild(this.hostElement);
+        }
+    }
+}
+// AppBuilder - Root of the hierarchy
+class AppBuilder extends RenderableComponent {
+    pages = [];
+    navigationManager;
+    constructor(orchestrator) {
+        super("app-builder", orchestrator, false); // Don't bubble by default
+        this.navigationManager = new NavigationManager(orchestrator);
+        new ScreensaverManager(orchestrator, this.navigationManager);
+        new SettingsManager(orchestrator, this.navigationManager);
+        this.performInitialRender();
+        this.setupNavigationContainer();
+    }
+    setupNavigationContainer() {
+        // Make the app content container a navigation container
+        const appContent = this.shadowRoot.querySelector(".app-content");
+        if (appContent) {
+            appContent.classList.add("nav-container");
+        }
+    }
+    defineTemplate() {
+        this.template = /* html */ `
+      <div class="app">
+        <main class="app-content">
+          <div class="children-container">
+            <!-- Pages will be rendered here -->
+          </div>
+        </main>
+      </div>
+    `;
+    }
+    defineStyles() {
+        this.styles = `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100vh;
+      }
+      
+      .app {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        font-family: Arial, sans-serif;
+      }
+      
+    `;
+    }
+    addPage(page) {
+        this.pages.push(page);
+        this.addChild(page);
+        // Register page with navigation manager
+        this.navigationManager.registerPage(page);
+    }
+    removePage(pageId) {
+        const pageIndex = this.pages.findIndex((p) => p.componentId === pageId);
+        if (pageIndex !== -1) {
+            this.pages.splice(pageIndex, 1);
+            this.removeChild(pageId);
+        }
+    }
+    navigateToPage(pageId, config) {
+        this.orchestrator.navigateToPage(pageId, config);
+    }
+    navigateToView(viewId, config) {
+        this.orchestrator.navigateToView(viewId, config);
+    }
+    getCurrentPageId() {
+        return this.navigationManager.getCurrentPageId();
+    }
+    getCurrentViewId() {
+        return this.navigationManager.getCurrentViewId();
+    }
+    isTransitioning() {
+        return this.navigationManager.isTransitioning();
+    }
+    /**
+     * Add a screensaver page with the specified configuration
+     * The screensaver page can contain multiple views for rich interactive experiences
+     * @param screensaverPage The page to use as the screensaver (can contain multiple views)
+     * @param config Configuration object for the screensaver (excluding 'page' property)
+     */
+    addScreensaver(screensaverPage, config) {
+        // Add the screensaver page to the app
+        this.addPage(screensaverPage);
+        // Register the screensaver with the screensaver manager via event bus
+        const screensaverBus = this.orchestrator.getEventBus("screensaver-manager");
+        if (screensaverBus) {
+            screensaverBus.emit("register-screensaver", {
+                config: {
+                    ...config,
+                    page: screensaverPage,
+                },
+            });
+        }
+        else {
+            throw new Error("Screensaver manager not found. Ensure AppBuilder is properly initialized.");
+        }
+    }
+    attachToDom() {
+        const appContainer = document.getElementById("app");
+        if (appContainer) {
+            appContainer.appendChild(this.getHostElement());
+        }
+        else {
+            // Fallback to body if #app doesn't exist
+            document.body.appendChild(this.getHostElement());
+        }
+    }
+}
+// Page - Contains Views
+class Page extends RenderableComponent {
+    views = [];
+    constructor(id, orchestrator, bubbleChanges = true, customTemplate, customStyles) {
+        super(id, orchestrator, bubbleChanges);
+        // Set custom template/styles before initial render if provided
+        if (customTemplate) {
+            this.properties.set("template", customTemplate);
+        }
+        if (customStyles) {
+            this.properties.set("styles", customStyles);
+        }
+        this.performInitialRender();
+    }
+    defineTemplate() {
+        // Check if a custom template was set via setProperty
+        const customTemplate = this.getProperty("template");
+        if (customTemplate) {
+            this.template = customTemplate;
+        }
+        else {
+            // Use default template
+            this.template = `
+        <div class="page" data-page-id="${this.componentId}">
+          <div class="page-header">
+            <h2>{{pageTitle}}</h2>
+            <div class="page-actions">
+              {{#if showActions}}
+                <button data-action="edit" class="btn">Edit Page</button>
+                <button data-action="delete" class="btn danger">Delete Page</button>
+              {{/if}}
+            </div>
+          </div>
+          <div class="page-content">
+            <div class="children-container">
+              <!-- Views will be rendered here -->
+            </div>
+          </div>
+        </div>
+      `;
+        }
+    }
+    defineStyles() {
+        // Check if custom styles were set via setProperty
+        const customStyles = this.getProperty("styles");
+        if (customStyles) {
+            this.styles = customStyles;
+        }
+        else {
+            // Use default styles
+            this.styles = `
+        :host {
+          display: block;
+          margin-bottom: 2rem;
+        }
+        
+        .page {
+          border: 2px solid #3498db;
+          border-radius: 8px;
+          padding: 1rem;
+          background: #ecf0f1;
+        }
+        
+        .page-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+          padding-bottom: 0.5rem;
+          border-bottom: 1px solid #bdc3c7;
+        }
+        
+        .page-actions {
+          display: flex;
+          gap: 0.5rem;
+        }
+        
+        .btn {
+          padding: 0.5rem 1rem;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          background: #3498db;
+          color: white;
+        }
+        
+        .btn.danger {
+          background: #e74c3c;
+        }
+        
+        .btn:hover {
+          opacity: 0.8;
+        }
+      `;
+        }
+    }
+    addView(view) {
+        this.views.push(view);
+        this.addChild(view);
+        // Register view with navigation manager via event bus
+        const navBus = this.orchestrator.getEventBus("navigation-manager");
+        if (navBus) {
+            navBus.emit("register-view", { view });
+        }
+    }
+    removeView(viewId) {
+        const viewIndex = this.views.findIndex((v) => v.componentId === viewId);
+        if (viewIndex !== -1) {
+            this.views.splice(viewIndex, 1);
+            this.removeChild(viewId);
+        }
+    }
+    /**
+     * Add a screensaver page with the specified configuration
+     * @param screensaverPage The page to use as the screensaver (can contain multiple views)
+     * @param config Configuration object for the screensaver (excluding 'page' property)
+     */
+    addScreensaver(screensaverPage, config) {
+        // Register the screensaver with the screensaver manager via event bus
+        const screensaverBus = this.orchestrator.getEventBus("screensaver-manager");
+        if (screensaverBus) {
+            screensaverBus.emit("register-screensaver", {
+                config: {
+                    ...config,
+                    page: screensaverPage,
+                },
+            });
+        }
+        else {
+            throw new Error("Screensaver manager not found. Ensure AppBuilder is properly initialized.");
+        }
+    }
+    /**
+     * Add a hidden settings page to this page with the specified configuration
+     * The settings page is activated by touching corners in sequence: top-left, top-right, bottom-right
+     * @param view The view to use as the settings page
+     * @param config Configuration object for the settings page
+     */
+    addSettings(view, config) {
+        // First add the view to this page (but don't register it with navigation yet)
+        this.views.push(view);
+        this.addChild(view);
+        // Register the settings with the settings manager via event bus
+        const settingsBus = this.orchestrator.getEventBus("settings-manager");
+        if (settingsBus) {
+            settingsBus.emit("register-settings", {
+                config: {
+                    ...config,
+                    view: view,
+                },
+            });
+        }
+        else {
+            throw new Error("Settings manager not found. Ensure AppBuilder is properly initialized.");
+        }
+    }
+}
+// View - Contains Components
+class View extends RenderableComponent {
+    components = [];
+    constructor(id, orchestrator, bubbleChanges = false, customTemplate, customStyles) {
+        super(id, orchestrator, bubbleChanges);
+        // Set custom template/styles before initial render if provided
+        if (customTemplate) {
+            this.properties.set("template", customTemplate);
+        }
+        if (customStyles) {
+            this.properties.set("styles", customStyles);
+        }
+        this.performInitialRender();
+    }
+    defineTemplate() {
+        // Check if a custom template was set via setProperty
+        const customTemplate = this.getProperty("template");
+        if (customTemplate) {
+            this.template = customTemplate;
+        }
+        else {
+            // Use default template
+            this.template = `
+        <div class="view" data-view-id="${this.componentId}">
+          <div class="view-header">
+            <h3>{{viewTitle}}</h3>
+            <span class="view-type">{{viewType}}</span>
+          </div>
+          <div class="view-content">
+            <div class="children-container">
+              <!-- Components will be rendered here -->
+            </div>
+          </div>
+        </div>
+      `;
+        }
+    }
+    defineStyles() {
+        // Check if custom styles were set via setProperty
+        const customStyles = this.getProperty("styles");
+        if (customStyles) {
+            this.styles = customStyles;
+        }
+        else {
+            // Use default styles
+            this.styles = `
+        :host {
+          display: block;
+          margin-bottom: 1rem;
+        }
+        
+        .view {
+          border: 1px solid #95a5a6;
+          border-radius: 6px;
+          padding: 0.75rem;
+          background: white;
+        }
+        
+        .view-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 0.75rem;
+          padding-bottom: 0.25rem;
+          border-bottom: 1px solid #ecf0f1;
+        }
+        
+        .view-type {
+          background: #95a5a6;
+          color: white;
+          padding: 0.25rem 0.5rem;
+          border-radius: 3px;
+          font-size: 0.8rem;
+        }
+      `;
+        }
+    }
+    addComponent(component) {
+        this.components.push(component);
+        this.addChild(component);
+    }
+    // TODO: Make this actually remove the component from the DOM.
+    removeComponent(componentId) {
+        logger.trace(`Removing component with ID: ${componentId}`);
+        const componentIndex = this.components.findIndex((c) => {
+            c.componentId === componentId;
+        });
+        if (componentIndex !== -1) {
+            this.components.splice(componentIndex, 1);
+            this.removeChild(componentId);
+        }
+    }
+}
+// Component - Leaf nodes in the hierarchy
+class Component extends RenderableComponent {
+    constructor(id, orchestrator, bubbleChanges = false, customTemplate, customStyles) {
+        super(id, orchestrator, bubbleChanges);
+        if (customTemplate) {
+            this.properties.set("template", customTemplate);
+        }
+        if (customStyles) {
+            this.properties.set("styles", customStyles);
+        }
+        this.performInitialRender();
+    }
+    defineTemplate() {
+        // Check if a custom template was set via setProperty
+        const customTemplate = this.getProperty("template");
+        if (customTemplate) {
+            this.template = customTemplate;
+        }
+        else {
+            // Use default template
+            this.template = `
+        <div class="component-container" data-component-id="${this.componentId}">
+          <div class="component-header">
+            <h4>{{title}}</h4>
+            <span class="component-status {{statusClass}}">{{status}}</span>
+          </div>
+          <div class="component-body">
+            <p class="description">{{description}}</p>
+            {{#if showContent}}
+              <div class="dynamic-content">
+                {{content}}
+              </div>
+            {{else}}
+              <div class="no-content-message">
+                No content available
+              </div>
+            {{/if}}
+            {{#ifnot isDisabled}}
+              <div class="component-controls">
+                <button class="control-btn" data-action="toggle">Toggle</button>
+              </div>
+            {{else}}
+              <div class="disabled-message">
+                Component is disabled
+              </div>
+            {{/ifnot}}
+          </div>
+          <div class="component-actions">
+            <button class="action-btn" data-action="{{buttonAction}}">
+              {{buttonText}}
+            </button>
+          </div>
+          <div class="children-container">
+            <!-- Child components will be inserted here -->
+          </div>
+        </div>
+      `;
+        }
+    }
+    defineStyles() {
+        // Check if custom styles were set via setProperty
+        const customStyles = this.getProperty("styles");
+        if (customStyles) {
+            this.styles = customStyles;
+        }
+        else {
+            // Use default styles
+            this.styles = `
+        :host {
+          display: block;
+          margin-bottom: 0.5rem;
+        }
+        
+        .component-container {
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          padding: 0.5rem;
+          background: #f9f9f9;
+          font-family: Arial, sans-serif;
+        }
+        
+        .component-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 0.5rem;
+        }
+        
+        .component-header h4 {
+          margin: 0;
+          color: #2c3e50;
+        }
+        
+        .component-status {
+          padding: 0.2rem 0.4rem;
+          border-radius: 3px;
+          font-size: 0.7rem;
+          font-weight: bold;
+        }
+        
+        .component-status.active {
+          background: #2ecc71;
+          color: white;
+        }
+        
+        .component-status.inactive {
+          background: #95a5a6;
+          color: white;
+        }
+        
+        .dynamic-content {
+          background: #f5f5f5;
+          padding: 0.5rem;
+          border-radius: 4px;
+          margin: 0.5rem 0;
+        }
+        
+        .action-btn {
+          background: #3498db;
+          color: white;
+          border: none;
+          padding: 0.4rem 0.8rem;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 0.8rem;
+        }
+        
+        .action-btn:hover {
+          background: #2980b9;
+        }
+        
+        .no-content-message {
+          background: #f8f9fa;
+          color: #6c757d;
+          padding: 0.5rem;
+          border-radius: 4px;
+          font-style: italic;
+          text-align: center;
+          margin: 0.5rem 0;
+        }
+        
+        .component-controls {
+          margin: 0.5rem 0;
+        }
+        
+        .control-btn {
+          background: #28a745;
+          color: white;
+          border: none;
+          padding: 0.3rem 0.6rem;
+          border-radius: 3px;
+          cursor: pointer;
+          font-size: 0.75rem;
+        }
+        
+        .control-btn:hover {
+          background: #218838;
+        }
+        
+        .disabled-message {
+          background: #f8d7da;
+          color: #721c24;
+          padding: 0.5rem;
+          border-radius: 4px;
+          font-style: italic;
+          text-align: center;
+          margin: 0.5rem 0;
+          border: 1px solid #f5c6cb;
+        }
+      `;
+        }
+    }
+}
+export { AppBuilder, Page, View, Component, RenderableComponent, EventBus };