@memberjunction/ng-dashboards 3.3.0 → 3.4.0

package/dist/ComponentStudio/components/workspace/component-preview.component.js

@@ -0,0 +1,342 @@
+import { Component, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { MJReactComponent } from '@memberjunction/ng-react';
+import { SharedService } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/component-studio-state.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@memberjunction/ng-react";
+const _c0 = ["reactComponent"];
+const _forTrack0 = ($index, $item) => $item.Size;
+function ComponentPreviewComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 13);
+    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_3_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StopComponent()); });
+    i0.ɵɵelement(1, "i", 14);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Stop");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "button", 15);
+    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_3_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RefreshComponent()); });
+    i0.ɵɵelement(5, "i", 16);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Refresh");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentPreviewComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_3_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RunSelectedComponent()); });
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Run");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentPreviewComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ComponentPreviewComponent_Conditional_3_Conditional_0_Template, 8, 0)(1, ComponentPreviewComponent_Conditional_3_Conditional_1_Template, 4, 0, "button", 12);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.State.IsRunning ? 0 : 1);
+} }
+function ComponentPreviewComponent_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_5_For_2_Template_button_click_0_listener() { const preset_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetViewport(preset_r5.Size)); });
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const preset_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r1.ActiveViewport === preset_r5.Size);
+    i0.ɵɵproperty("title", preset_r5.Label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", preset_r5.Icon);
+} }
+function ComponentPreviewComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵrepeaterCreate(1, ComponentPreviewComponent_Conditional_5_For_2_Template, 2, 4, "button", 19, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.ViewportPresets);
+} }
+function ComponentPreviewComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SendErrorToAI()); });
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Ask AI to Fix");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentPreviewComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 8);
+    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.GetComponentName(), " ");
+} }
+function ComponentPreviewComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "Select a component to preview");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Choose a component from the sidebar to see its live preview here.");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentPreviewComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 27);
+    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_11_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.RunSelectedComponent()); });
+    i0.ɵɵelement(7, "i", 18);
+    i0.ɵɵtext(8, " Run Component ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.GetComponentName());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.GetComponentDescription() || "No description available");
+} }
+function ComponentPreviewComponent_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 31)(2, "div", 32);
+    i0.ɵɵelement(3, "i", 33);
+    i0.ɵɵelementStart(4, "span", 34);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "p", 35);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 36)(9, "button", 37);
+    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_12_Conditional_3_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RefreshComponent()); });
+    i0.ɵɵelement(10, "i", 16);
+    i0.ɵɵtext(11, " Retry ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 38);
+    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_12_Conditional_3_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SendErrorToAI()); });
+    i0.ɵɵelement(13, "i", 23);
+    i0.ɵɵtext(14, " Ask AI to Fix ");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.State.CurrentError.type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.State.CurrentError.message);
+} }
+function ComponentPreviewComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "mj-react-component", 29, 0);
+    i0.ɵɵlistener("componentEvent", function ComponentPreviewComponent_Conditional_12_Template_mj_react_component_componentEvent_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnComponentEvent($event)); })("openEntityRecord", function ComponentPreviewComponent_Conditional_12_Template_mj_react_component_openEntityRecord_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenEntityRecord($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(3, ComponentPreviewComponent_Conditional_12_Conditional_3_Template, 15, 2, "div", 30);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("max-width", ctx_r1.GetPreviewContainerMaxWidth());
+    i0.ɵɵclassProp("mobile", ctx_r1.ActiveViewport === "mobile")("tablet", ctx_r1.ActiveViewport === "tablet")("desktop", ctx_r1.ActiveViewport === "desktop");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("component", ctx_r1.LocalComponentSpec);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.State.CurrentError ? 3 : -1);
+} }
+/**
+ * Component Preview - TOP section of CENTER panel.
+ * Renders the live React component preview with toolbar controls.
+ */
+export class ComponentPreviewComponent {
+    State;
+    cdr;
+    ReactComponentRef;
+    AskAIToFix = new EventEmitter();
+    // --- Viewport ---
+    ActiveViewport = 'desktop';
+    ViewportPresets = [
+        { Size: 'mobile', Label: 'Mobile (375px)', Icon: 'fa-mobile-screen', MaxWidth: '375px' },
+        { Size: 'tablet', Label: 'Tablet (768px)', Icon: 'fa-tablet-screen-button', MaxWidth: '768px' },
+        { Size: 'desktop', Label: 'Desktop (100%)', Icon: 'fa-desktop', MaxWidth: '100%' }
+    ];
+    // --- Local spec for refresh cycle ---
+    LocalComponentSpec = null;
+    destroy$ = new Subject();
+    constructor(State, cdr) {
+        this.State = State;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.syncSpecFromState();
+        this.State.StateChanged
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.syncSpecFromState();
+            this.cdr.detectChanges();
+        });
+        this.State.RefreshComponent
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.refreshPreview();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ============================================================
+    // TOOLBAR ACTIONS
+    // ============================================================
+    RunSelectedComponent() {
+        if (this.State.SelectedComponent) {
+            this.State.RunComponent(this.State.SelectedComponent);
+        }
+    }
+    StopComponent() {
+        MJReactComponent.forceClearRegistries();
+        this.State.StopComponent();
+    }
+    RefreshComponent() {
+        if (this.State.SelectedComponent && this.State.IsRunning) {
+            MJReactComponent.forceClearRegistries();
+            this.refreshPreview();
+        }
+    }
+    SetViewport(size) {
+        this.ActiveViewport = size;
+        this.cdr.detectChanges();
+    }
+    SendErrorToAI() {
+        if (this.State.CurrentError) {
+            this.AskAIToFix.emit(this.State.CurrentError);
+            this.State.SendErrorToAI.emit(this.State.CurrentError);
+        }
+    }
+    // ============================================================
+    // VIEWPORT HELPERS
+    // ============================================================
+    GetActivePreset() {
+        return this.ViewportPresets.find(p => p.Size === this.ActiveViewport) || this.ViewportPresets[2];
+    }
+    GetPreviewContainerMaxWidth() {
+        return this.GetActivePreset().MaxWidth;
+    }
+    // ============================================================
+    // REACT COMPONENT EVENTS
+    // ============================================================
+    OnComponentEvent(event) {
+        if (event.type === 'error') {
+            this.State.CurrentError = {
+                type: event.payload?.source || 'Component Error',
+                message: event.payload?.error || 'An error occurred while rendering the component',
+                technicalDetails: event.payload?.errorInfo || event.payload
+            };
+            this.cdr.detectChanges();
+        }
+        else if (event.type === 'loaded') {
+            const resolvedSpec = event.payload?.resolvedSpec;
+            if (resolvedSpec) {
+                this.State.UpdateWithResolvedSpec(resolvedSpec);
+            }
+        }
+    }
+    OnOpenEntityRecord(event) {
+        SharedService.Instance.OpenEntityRecord(event.entityName, event.key);
+    }
+    // ============================================================
+    // STATE HELPERS
+    // ============================================================
+    GetComponentName() {
+        if (!this.State.SelectedComponent)
+            return '';
+        return this.State.GetComponentName(this.State.SelectedComponent);
+    }
+    GetComponentDescription() {
+        if (!this.State.SelectedComponent)
+            return undefined;
+        return this.State.GetComponentDescription(this.State.SelectedComponent);
+    }
+    // ============================================================
+    // PRIVATE
+    // ============================================================
+    syncSpecFromState() {
+        this.LocalComponentSpec = this.State.ComponentSpec;
+    }
+    /**
+     * Refresh the preview by nulling the spec, detecting changes,
+     * then restoring the spec after a short delay.
+     */
+    refreshPreview() {
+        if (!this.State.SelectedComponent)
+            return;
+        const spec = this.State.GetComponentSpec(this.State.SelectedComponent);
+        // Null out to force React to unmount
+        this.LocalComponentSpec = null;
+        this.cdr.detectChanges();
+        // Re-set after a brief pause to force fresh mount
+        setTimeout(() => {
+            this.LocalComponentSpec = spec;
+            this.State.ComponentSpec = spec;
+            this.State.CurrentError = null;
+            try {
+                this.cdr.detectChanges();
+            }
+            catch (error) {
+                console.error('Error during refresh detectChanges:', error);
+            }
+        }, 10);
+    }
+    static ɵfac = function ComponentPreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentPreviewComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentPreviewComponent, selectors: [["mj-component-preview"]], viewQuery: function ComponentPreviewComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ReactComponentRef = _t.first);
+        } }, outputs: { AskAIToFix: "AskAIToFix" }, decls: 13, vars: 5, consts: [["reactComponent", ""], [1, "component-preview"], [1, "preview-toolbar"], [1, "toolbar-left"], [1, "toolbar-center"], [1, "viewport-selector"], [1, "toolbar-right"], ["title", "Ask AI to fix this error", 1, "toolbar-btn", "ai-fix-btn"], [1, "running-indicator"], [1, "preview-area"], [1, "empty-state"], [1, "empty-state", "run-state"], ["title", "Run component", 1, "toolbar-btn", "run-btn"], ["title", "Stop component", 1, "toolbar-btn", "stop-btn", 3, "click"], [1, "fa-solid", "fa-stop"], ["title", "Refresh component", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-rotate-right"], ["title", "Run component", 1, "toolbar-btn", "run-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "viewport-btn", 3, "active", "title"], [1, "viewport-btn", 3, "click", "title"], [1, "fa-solid", 3, "ngClass"], ["title", "Ask AI to fix this error", 1, "toolbar-btn", "ai-fix-btn", 3, "click"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "fa-solid", "fa-circle", "running-dot"], [1, "fa-solid", "fa-eye", "fa-3x"], [1, "fa-solid", "fa-play-circle", "fa-3x"], [1, "run-component-btn", 3, "click"], [1, "preview-container"], [3, "componentEvent", "openEntityRecord", "component"], [1, "error-overlay"], [1, "error-overlay-content"], [1, "error-overlay-header"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-overlay-title"], [1, "error-overlay-message"], [1, "error-overlay-actions"], [1, "toolbar-btn", 3, "click"], [1, "toolbar-btn", "ai-fix-btn", 3, "click"]], template: function ComponentPreviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
+            i0.ɵɵtemplate(3, ComponentPreviewComponent_Conditional_3_Template, 2, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 4);
+            i0.ɵɵtemplate(5, ComponentPreviewComponent_Conditional_5_Template, 3, 0, "div", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 6);
+            i0.ɵɵtemplate(7, ComponentPreviewComponent_Conditional_7_Template, 4, 0, "button", 7)(8, ComponentPreviewComponent_Conditional_8_Template, 3, 1, "span", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 9);
+            i0.ɵɵtemplate(10, ComponentPreviewComponent_Conditional_10_Template, 6, 0, "div", 10)(11, ComponentPreviewComponent_Conditional_11_Template, 9, 2, "div", 11)(12, ComponentPreviewComponent_Conditional_12_Template, 4, 10);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.State.SelectedComponent ? 3 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.State.IsRunning ? 5 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.State.CurrentError ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.State.IsRunning && ctx.State.SelectedComponent ? 8 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.State.SelectedComponent ? 10 : !ctx.State.IsRunning ? 11 : ctx.LocalComponentSpec ? 12 : -1);
+        } }, dependencies: [i2.NgClass, i3.MJReactComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.component-preview[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mat-sys-surface-container-low);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.preview-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: var(--mat-sys-surface);\n  border-bottom: 1px solid var(--mat-sys-outline);\n  min-height: 42px;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-left[_ngcontent-%COMP%], \n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-center[_ngcontent-%COMP%], \n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-left[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n}\n\n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-center[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  justify-content: center;\n}\n\n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-right[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: 5px;\n  background: var(--mat-sys-surface);\n  color: var(--mat-sys-on-surface);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-surface-variant);\n  border-color: #9ca3af;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.run-btn[_ngcontent-%COMP%] {\n  color: #059669;\n  border-color: #a7f3d0;\n  background: #ecfdf5;\n}\n\n.run-btn[_ngcontent-%COMP%]:hover {\n  background: #d1fae5;\n  border-color: #6ee7b7;\n}\n\n.stop-btn[_ngcontent-%COMP%] {\n  color: #dc2626;\n  border-color: #fca5a5;\n  background: #fef2f2;\n}\n\n.stop-btn[_ngcontent-%COMP%]:hover {\n  background: #fee2e2;\n  border-color: #f87171;\n}\n\n.ai-fix-btn[_ngcontent-%COMP%] {\n  color: #7c3aed;\n  border-color: #c4b5fd;\n  background: #f5f3ff;\n}\n\n.ai-fix-btn[_ngcontent-%COMP%]:hover {\n  background: #ede9fe;\n  border-color: #a78bfa;\n}\n\n.running-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mat-sys-on-surface-variant);\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.running-indicator[_ngcontent-%COMP%]   .running-dot[_ngcontent-%COMP%] {\n  font-size: 7px;\n  color: #22c55e;\n  animation: _ngcontent-%COMP%_pulse-dot 1.5s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse-dot {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.3; }\n}\n\n\n\n\n\n\n.viewport-selector[_ngcontent-%COMP%] {\n  display: inline-flex;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-extra-small);\n  overflow: hidden;\n  background: var(--mat-sys-surface-container-lowest);\n}\n\n.viewport-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.15s ease;\n}\n\n.viewport-btn[_ngcontent-%COMP%]:not(:last-child) {\n  border-right: 1px solid var(--mat-sys-outline);\n}\n\n.viewport-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-surface-container-high);\n  color: var(--mat-sys-on-surface);\n}\n\n.viewport-btn.active[_ngcontent-%COMP%] {\n  background: var(--mat-sys-primary);\n  color: #ffffff;\n}\n\n.viewport-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-primary);\n}\n\n\n\n\n\n\n.preview-area[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  position: relative;\n  display: flex;\n  justify-content: center;\n}\n\n.preview-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  transition: max-width 0.3s ease;\n  overflow: auto;\n  background: var(--mat-sys-surface);\n}\n\n.preview-container.mobile[_ngcontent-%COMP%], \n.preview-container.tablet[_ngcontent-%COMP%] {\n  border-left: 1px solid var(--mat-sys-outline);\n  border-right: 1px solid var(--mat-sys-outline);\n  box-shadow: var(--mat-sys-elevation-1);\n}\n\n.preview-container.desktop[_ngcontent-%COMP%] {\n  max-width: 100% !important;\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  text-align: center;\n  padding: 40px 24px;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  color: var(--mat-sys-outline);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mat-sys-on-surface-variant);\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n.run-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: var(--mat-sys-on-surface);\n}\n\n.run-component-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 20px;\n  padding: 10px 24px;\n  border: none;\n  border-radius: var(--mat-sys-corner-small);\n  background: var(--mat-sys-primary);\n  color: #ffffff;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-component-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.run-component-btn[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.run-component-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n.error-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  background: rgba(254, 242, 242, 0.95);\n  border-top: 2px solid #f87171;\n  backdrop-filter: blur(4px);\n  padding: 16px 20px;\n  animation: _ngcontent-%COMP%_slide-up 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slide-up {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.error-overlay-content[_ngcontent-%COMP%] {\n  max-width: 600px;\n}\n\n.error-overlay-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.error-overlay-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #dc2626;\n  font-size: 16px;\n}\n\n.error-overlay-header[_ngcontent-%COMP%]   .error-overlay-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #991b1b;\n}\n\n.error-overlay-message[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: #7f1d1d;\n  line-height: 1.4;\n}\n\n.error-overlay-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentPreviewComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-component-preview', template: "<div class=\"component-preview\">\n  <!-- Toolbar -->\n  <div class=\"preview-toolbar\">\n    <div class=\"toolbar-left\">\n      @if (State.SelectedComponent) {\n        @if (State.IsRunning) {\n          <button class=\"toolbar-btn stop-btn\" (click)=\"StopComponent()\" title=\"Stop component\">\n            <i class=\"fa-solid fa-stop\"></i>\n            <span>Stop</span>\n          </button>\n          <button class=\"toolbar-btn\" (click)=\"RefreshComponent()\" title=\"Refresh component\">\n            <i class=\"fa-solid fa-rotate-right\"></i>\n            <span>Refresh</span>\n          </button>\n        } @else {\n          <button class=\"toolbar-btn run-btn\" (click)=\"RunSelectedComponent()\" title=\"Run component\">\n            <i class=\"fa-solid fa-play\"></i>\n            <span>Run</span>\n          </button>\n        }\n      }\n    </div>\n\n    <div class=\"toolbar-center\">\n      <!-- Viewport Size Selector (segmented control) -->\n      @if (State.IsRunning) {\n        <div class=\"viewport-selector\">\n          @for (preset of ViewportPresets; track preset.Size) {\n            <button\n              class=\"viewport-btn\"\n              [class.active]=\"ActiveViewport === preset.Size\"\n              (click)=\"SetViewport(preset.Size)\"\n              [title]=\"preset.Label\">\n              <i class=\"fa-solid\" [ngClass]=\"preset.Icon\"></i>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"toolbar-right\">\n      @if (State.CurrentError) {\n        <button class=\"toolbar-btn ai-fix-btn\" (click)=\"SendErrorToAI()\" title=\"Ask AI to fix this error\">\n          <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n          <span>Ask AI to Fix</span>\n        </button>\n      }\n      @if (State.IsRunning && State.SelectedComponent) {\n        <span class=\"running-indicator\">\n          <i class=\"fa-solid fa-circle running-dot\"></i>\n          {{ GetComponentName() }}\n        </span>\n      }\n    </div>\n  </div>\n\n  <!-- Preview Area -->\n  <div class=\"preview-area\">\n    @if (!State.SelectedComponent) {\n      <!-- Empty State: No component selected -->\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-eye fa-3x\"></i>\n        <h3>Select a component to preview</h3>\n        <p>Choose a component from the sidebar to see its live preview here.</p>\n      </div>\n    } @else if (!State.IsRunning) {\n      <!-- Component selected but not running -->\n      <div class=\"empty-state run-state\">\n        <i class=\"fa-solid fa-play-circle fa-3x\"></i>\n        <h3>{{ GetComponentName() }}</h3>\n        <p>{{ GetComponentDescription() || 'No description available' }}</p>\n        <button class=\"run-component-btn\" (click)=\"RunSelectedComponent()\">\n          <i class=\"fa-solid fa-play\"></i> Run Component\n        </button>\n      </div>\n    } @else if (LocalComponentSpec) {\n      <!-- Live Preview Container -->\n      <div class=\"preview-container\"\n           [style.max-width]=\"GetPreviewContainerMaxWidth()\"\n           [class.mobile]=\"ActiveViewport === 'mobile'\"\n           [class.tablet]=\"ActiveViewport === 'tablet'\"\n           [class.desktop]=\"ActiveViewport === 'desktop'\">\n        <mj-react-component\n          #reactComponent\n          [component]=\"LocalComponentSpec\"\n          (componentEvent)=\"OnComponentEvent($event)\"\n          (openEntityRecord)=\"OnOpenEntityRecord($event)\">\n        </mj-react-component>\n      </div>\n\n      <!-- Error Overlay (inline, does not replace the component) -->\n      @if (State.CurrentError) {\n        <div class=\"error-overlay\">\n          <div class=\"error-overlay-content\">\n            <div class=\"error-overlay-header\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              <span class=\"error-overlay-title\">{{ State.CurrentError.type }}</span>\n            </div>\n            <p class=\"error-overlay-message\">{{ State.CurrentError.message }}</p>\n            <div class=\"error-overlay-actions\">\n              <button class=\"toolbar-btn\" (click)=\"RefreshComponent()\">\n                <i class=\"fa-solid fa-rotate-right\"></i> Retry\n              </button>\n              <button class=\"toolbar-btn ai-fix-btn\" (click)=\"SendErrorToAI()\">\n                <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Ask AI to Fix\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.component-preview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mat-sys-surface-container-low);\n  overflow: hidden;\n}\n\n/* ============================================================\n   TOOLBAR\n   ============================================================ */\n\n.preview-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: var(--mat-sys-surface);\n  border-bottom: 1px solid var(--mat-sys-outline);\n  min-height: 42px;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.preview-toolbar .toolbar-left,\n.preview-toolbar .toolbar-center,\n.preview-toolbar .toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.preview-toolbar .toolbar-left {\n  flex: 0 0 auto;\n}\n\n.preview-toolbar .toolbar-center {\n  flex: 1 1 auto;\n  justify-content: center;\n}\n\n.preview-toolbar .toolbar-right {\n  flex: 0 0 auto;\n}\n\n.toolbar-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: 5px;\n  background: var(--mat-sys-surface);\n  color: var(--mat-sys-on-surface);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.toolbar-btn:hover {\n  background: var(--mat-sys-surface-variant);\n  border-color: #9ca3af;\n}\n\n.toolbar-btn i {\n  font-size: 11px;\n}\n\n.run-btn {\n  color: #059669;\n  border-color: #a7f3d0;\n  background: #ecfdf5;\n}\n\n.run-btn:hover {\n  background: #d1fae5;\n  border-color: #6ee7b7;\n}\n\n.stop-btn {\n  color: #dc2626;\n  border-color: #fca5a5;\n  background: #fef2f2;\n}\n\n.stop-btn:hover {\n  background: #fee2e2;\n  border-color: #f87171;\n}\n\n.ai-fix-btn {\n  color: #7c3aed;\n  border-color: #c4b5fd;\n  background: #f5f3ff;\n}\n\n.ai-fix-btn:hover {\n  background: #ede9fe;\n  border-color: #a78bfa;\n}\n\n.running-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mat-sys-on-surface-variant);\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.running-indicator .running-dot {\n  font-size: 7px;\n  color: #22c55e;\n  animation: pulse-dot 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse-dot {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.3; }\n}\n\n/* ============================================================\n   VIEWPORT SELECTOR (segmented control)\n   ============================================================ */\n\n.viewport-selector {\n  display: inline-flex;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-extra-small);\n  overflow: hidden;\n  background: var(--mat-sys-surface-container-lowest);\n}\n\n.viewport-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.15s ease;\n}\n\n.viewport-btn:not(:last-child) {\n  border-right: 1px solid var(--mat-sys-outline);\n}\n\n.viewport-btn:hover {\n  background: var(--mat-sys-surface-container-high);\n  color: var(--mat-sys-on-surface);\n}\n\n.viewport-btn.active {\n  background: var(--mat-sys-primary);\n  color: #ffffff;\n}\n\n.viewport-btn.active:hover {\n  background: var(--mat-sys-primary);\n}\n\n/* ============================================================\n   PREVIEW AREA\n   ============================================================ */\n\n.preview-area {\n  flex: 1;\n  overflow: auto;\n  position: relative;\n  display: flex;\n  justify-content: center;\n}\n\n.preview-container {\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  transition: max-width 0.3s ease;\n  overflow: auto;\n  background: var(--mat-sys-surface);\n}\n\n.preview-container.mobile,\n.preview-container.tablet {\n  border-left: 1px solid var(--mat-sys-outline);\n  border-right: 1px solid var(--mat-sys-outline);\n  box-shadow: var(--mat-sys-elevation-1);\n}\n\n.preview-container.desktop {\n  max-width: 100% !important;\n}\n\n/* ============================================================\n   EMPTY STATES\n   ============================================================ */\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  text-align: center;\n  padding: 40px 24px;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.empty-state i {\n  margin-bottom: 16px;\n  color: var(--mat-sys-outline);\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mat-sys-on-surface-variant);\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n.run-state h3 {\n  color: var(--mat-sys-on-surface);\n}\n\n.run-component-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 20px;\n  padding: 10px 24px;\n  border: none;\n  border-radius: var(--mat-sys-corner-small);\n  background: var(--mat-sys-primary);\n  color: #ffffff;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-component-btn:hover {\n  background: var(--mat-sys-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.run-component-btn:active {\n  transform: translateY(0);\n}\n\n.run-component-btn i {\n  font-size: 13px;\n}\n\n/* ============================================================\n   ERROR OVERLAY\n   ============================================================ */\n\n.error-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  background: rgba(254, 242, 242, 0.95);\n  border-top: 2px solid #f87171;\n  backdrop-filter: blur(4px);\n  padding: 16px 20px;\n  animation: slide-up 0.2s ease-out;\n}\n\n@keyframes slide-up {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.error-overlay-content {\n  max-width: 600px;\n}\n\n.error-overlay-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.error-overlay-header i {\n  color: #dc2626;\n  font-size: 16px;\n}\n\n.error-overlay-header .error-overlay-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #991b1b;\n}\n\n.error-overlay-message {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: #7f1d1d;\n  line-height: 1.4;\n}\n\n.error-overlay-actions {\n  display: flex;\n  gap: 8px;\n}\n"] }]
+    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { ReactComponentRef: [{
+            type: ViewChild,
+            args: ['reactComponent']
+        }], AskAIToFix: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentPreviewComponent, { className: "ComponentPreviewComponent", filePath: "src/ComponentStudio/components/workspace/component-preview.component.ts", lineNumber: 41 }); })();
+//# sourceMappingURL=component-preview.component.js.map

package/dist/ComponentStudio/components/workspace/component-preview.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-preview.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/workspace/component-preview.component.ts","../../../../src/ComponentStudio/components/workspace/component-preview.component.html"],"names":[],"mappings":"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"}

package/dist/ComponentStudio/components/workspace/editor-tabs.component.d.ts

@@ -0,0 +1,15 @@
+import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ComponentStudioStateService } from '../../services/component-studio-state.service';
+import * as i0 from "@angular/core";
+export declare class EditorTabsComponent implements OnInit, OnDestroy {
+    state: ComponentStudioStateService;
+    private cdr;
+    private stateChangedSub;
+    constructor(state: ComponentStudioStateService, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    SelectTab(index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditorTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditorTabsComponent, "mj-editor-tabs", never, {}, {}, never, never, false, never>;
+}
+//# sourceMappingURL=editor-tabs.component.d.ts.map

package/dist/ComponentStudio/components/workspace/editor-tabs.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-tabs.component.d.ts","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/workspace/editor-tabs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;;AAE5F,qBAuHa,mBAAoB,YAAW,MAAM,EAAE,SAAS;IAKlD,KAAK,EAAE,2BAA2B;IACzC,OAAO,CAAC,GAAG;IAJb,OAAO,CAAC,eAAe,CAA6B;gBAG3C,KAAK,EAAE,2BAA2B,EACjC,GAAG,EAAE,iBAAiB;IAGhC,QAAQ,IAAI,IAAI;IAMhB,WAAW,IAAI,IAAI;IAOnB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;yCAtBnB,mBAAmB;2CAAnB,mBAAmB;CA2B/B"}

package/dist/ComponentStudio/components/workspace/editor-tabs.component.js

@@ -0,0 +1,144 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/component-studio-state.service";
+import * as i2 from "../editors/spec-editor.component";
+import * as i3 from "../editors/code-editor-panel.component";
+import * as i4 from "../editors/requirements-editor.component";
+import * as i5 from "../editors/data-requirements-editor.component";
+function EditorTabsComponent_Case_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-spec-editor");
+} }
+function EditorTabsComponent_Case_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor-panel");
+} }
+function EditorTabsComponent_Case_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-requirements-editor", 10);
+} if (rf & 2) {
+    i0.ɵɵproperty("Field", "functionalRequirements")("Title", "Functional Requirements");
+} }
+function EditorTabsComponent_Case_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-requirements-editor", 10);
+} if (rf & 2) {
+    i0.ɵɵproperty("Field", "technicalDesign")("Title", "Technical Design");
+} }
+function EditorTabsComponent_Case_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-data-requirements-editor");
+} }
+export class EditorTabsComponent {
+    state;
+    cdr;
+    stateChangedSub = null;
+    constructor(state, cdr) {
+        this.state = state;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.stateChangedSub = this.state.StateChanged.subscribe(() => {
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.stateChangedSub) {
+            this.stateChangedSub.unsubscribe();
+            this.stateChangedSub = null;
+        }
+    }
+    SelectTab(index) {
+        this.state.ActiveTab = index;
+        this.cdr.detectChanges();
+    }
+    static ɵfac = function EditorTabsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EditorTabsComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditorTabsComponent, selectors: [["mj-editor-tabs"]], decls: 24, vars: 11, consts: [[1, "editor-tabs-container"], [1, "tab-bar"], [1, "tab-pill", 3, "click"], [1, "fa-solid", "fa-file-code"], [1, "fa-solid", "fa-code"], [1, "fa-solid", "fa-clipboard-list"], [1, "fa-solid", "fa-drafting-compass"], [1, "fa-solid", "fa-database"], [1, "tab-spacer"], [1, "tab-content"], [3, "Field", "Title"]], template: function EditorTabsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
+            i0.ɵɵlistener("click", function EditorTabsComponent_Template_button_click_2_listener() { return ctx.SelectTab(0); });
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵtext(4, " Spec ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 2);
+            i0.ɵɵlistener("click", function EditorTabsComponent_Template_button_click_5_listener() { return ctx.SelectTab(1); });
+            i0.ɵɵelement(6, "i", 4);
+            i0.ɵɵtext(7, " Code ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "button", 2);
+            i0.ɵɵlistener("click", function EditorTabsComponent_Template_button_click_8_listener() { return ctx.SelectTab(2); });
+            i0.ɵɵelement(9, "i", 5);
+            i0.ɵɵtext(10, " Requirements ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "button", 2);
+            i0.ɵɵlistener("click", function EditorTabsComponent_Template_button_click_11_listener() { return ctx.SelectTab(3); });
+            i0.ɵɵelement(12, "i", 6);
+            i0.ɵɵtext(13, " Design ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "button", 2);
+            i0.ɵɵlistener("click", function EditorTabsComponent_Template_button_click_14_listener() { return ctx.SelectTab(4); });
+            i0.ɵɵelement(15, "i", 7);
+            i0.ɵɵtext(16, " Data ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(17, "span", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "div", 9);
+            i0.ɵɵtemplate(19, EditorTabsComponent_Case_19_Template, 1, 0, "mj-spec-editor")(20, EditorTabsComponent_Case_20_Template, 1, 0, "mj-code-editor-panel")(21, EditorTabsComponent_Case_21_Template, 1, 2, "mj-requirements-editor", 10)(22, EditorTabsComponent_Case_22_Template, 1, 2, "mj-requirements-editor", 10)(23, EditorTabsComponent_Case_23_Template, 1, 0, "mj-data-requirements-editor");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            let tmp_5_0;
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.state.ActiveTab === 0);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.state.ActiveTab === 1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.state.ActiveTab === 2);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.state.ActiveTab === 3);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.state.ActiveTab === 4);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional((tmp_5_0 = ctx.state.ActiveTab) === 0 ? 19 : tmp_5_0 === 1 ? 20 : tmp_5_0 === 2 ? 21 : tmp_5_0 === 3 ? 22 : tmp_5_0 === 4 ? 23 : -1);
+        } }, dependencies: [i2.SpecEditorComponent, i3.CodeEditorPanelComponent, i4.RequirementsEditorComponent, i5.DataRequirementsEditorComponent], styles: ["[_nghost-%COMP%] {\n      display: flex;\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .editor-tabs-container[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .tab-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      height: 38px;\n      background: var(--mat-sys-surface-container-low);\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      flex-shrink: 0;\n      gap: 2px;\n    }\n\n    .tab-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mat-sys-on-surface-variant);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n      font-family: inherit;\n    }\n\n    .tab-pill[_ngcontent-%COMP%]:hover {\n      background: var(--mat-sys-surface-container);\n      color: var(--mat-sys-on-surface);\n    }\n\n    .tab-pill.active[_ngcontent-%COMP%] {\n      background: var(--mat-sys-surface);\n      color: var(--mat-sys-primary);\n      font-weight: 600;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .tab-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .tab-spacer[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .tab-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-content[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditorTabsComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-editor-tabs', template: `
+    <div class="editor-tabs-container">
+      <div class="tab-bar">
+        <button class="tab-pill" [class.active]="state.ActiveTab === 0" (click)="SelectTab(0)">
+          <i class="fa-solid fa-file-code"></i> Spec
+        </button>
+        <button class="tab-pill" [class.active]="state.ActiveTab === 1" (click)="SelectTab(1)">
+          <i class="fa-solid fa-code"></i> Code
+        </button>
+        <button class="tab-pill" [class.active]="state.ActiveTab === 2" (click)="SelectTab(2)">
+          <i class="fa-solid fa-clipboard-list"></i> Requirements
+        </button>
+        <button class="tab-pill" [class.active]="state.ActiveTab === 3" (click)="SelectTab(3)">
+          <i class="fa-solid fa-drafting-compass"></i> Design
+        </button>
+        <button class="tab-pill" [class.active]="state.ActiveTab === 4" (click)="SelectTab(4)">
+          <i class="fa-solid fa-database"></i> Data
+        </button>
+        <span class="tab-spacer"></span>
+      </div>
+
+      <div class="tab-content">
+        @switch (state.ActiveTab) {
+          @case (0) {
+            <mj-spec-editor></mj-spec-editor>
+          }
+          @case (1) {
+            <mj-code-editor-panel></mj-code-editor-panel>
+          }
+          @case (2) {
+            <mj-requirements-editor [Field]="'functionalRequirements'" [Title]="'Functional Requirements'"></mj-requirements-editor>
+          }
+          @case (3) {
+            <mj-requirements-editor [Field]="'technicalDesign'" [Title]="'Technical Design'"></mj-requirements-editor>
+          }
+          @case (4) {
+            <mj-data-requirements-editor></mj-data-requirements-editor>
+          }
+        }
+      </div>
+    </div>
+  `, styles: ["\n    :host {\n      display: flex;\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .editor-tabs-container {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .tab-bar {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      height: 38px;\n      background: var(--mat-sys-surface-container-low);\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      flex-shrink: 0;\n      gap: 2px;\n    }\n\n    .tab-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mat-sys-on-surface-variant);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n      font-family: inherit;\n    }\n\n    .tab-pill:hover {\n      background: var(--mat-sys-surface-container);\n      color: var(--mat-sys-on-surface);\n    }\n\n    .tab-pill.active {\n      background: var(--mat-sys-surface);\n      color: var(--mat-sys-primary);\n      font-weight: 600;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .tab-pill i {\n      font-size: 11px;\n    }\n\n    .tab-spacer {\n      flex: 1;\n    }\n\n    .tab-content {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-content > * {\n      flex: 1;\n      overflow: hidden;\n    }\n  "] }]
+    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditorTabsComponent, { className: "EditorTabsComponent", filePath: "src/ComponentStudio/components/workspace/editor-tabs.component.ts", lineNumber: 124 }); })();
+//# sourceMappingURL=editor-tabs.component.js.map

package/dist/ComponentStudio/components/workspace/editor-tabs.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-tabs.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/workspace/editor-tabs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAwC,MAAM,eAAe,CAAC;;;;;;;;IA8BpE,iCAAiC;;;IAGjC,uCAA6C;;;IAG7C,6CAAwH;;IAA7D,AAAnC,gDAAkC,oCAAoC;;;IAG9F,6CAA0G;;IAAtD,AAA5B,yCAA2B,6BAA6B;;;IAGhF,8CAA2D;;AAiFvE,MAAM,OAAO,mBAAmB;IAKrB;IACC;IAJF,eAAe,GAAwB,IAAI,CAAC;IAEpD,YACS,KAAkC,EACjC,GAAsB;QADvB,UAAK,GAAL,KAAK,CAA6B;QACjC,QAAG,GAAH,GAAG,CAAmB;IAC7B,CAAC;IAEJ,QAAQ;QACN,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;YAC5D,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,SAAS,CAAC,KAAa;QACrB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC3B,CAAC;6GAzBU,mBAAmB;6DAAnB,mBAAmB;YAlHxB,AADF,AADF,8BAAmC,aACZ,gBACoE;YAAvB,gGAAS,cAAU,CAAC,CAAC,IAAC;YACpF,uBAAqC;YAAC,sBACxC;YAAA,iBAAS;YACT,iCAAuF;YAAvB,gGAAS,cAAU,CAAC,CAAC,IAAC;YACpF,uBAAgC;YAAC,sBACnC;YAAA,iBAAS;YACT,iCAAuF;YAAvB,gGAAS,cAAU,CAAC,CAAC,IAAC;YACpF,uBAA0C;YAAC,+BAC7C;YAAA,iBAAS;YACT,kCAAuF;YAAvB,iGAAS,cAAU,CAAC,CAAC,IAAC;YACpF,wBAA4C;YAAC,yBAC/C;YAAA,iBAAS;YACT,kCAAuF;YAAvB,iGAAS,cAAU,CAAC,CAAC,IAAC;YACpF,wBAAoC;YAAC,uBACvC;YAAA,iBAAS;YACT,2BAAgC;YAClC,iBAAM;YAEN,+BAAyB;YAcrB,AAHA,AAHA,AAHA,AAHA,+EAAW,wEAGA,8EAGA,8EAGA,+EAGA;YAKjB,AADE,iBAAM,EACF;;;YArCuB,eAAsC;YAAtC,mDAAsC;YAGtC,eAAsC;YAAtC,mDAAsC;YAGtC,eAAsC;YAAtC,mDAAsC;YAGtC,eAAsC;YAAtC,mDAAsC;YAGtC,eAAsC;YAAtC,mDAAsC;YAO/D,eAgBC;YAhBD,qDAAA,CAAC,oBAAD,CAAC,oBAAD,CAAC,oBAAD,CAAC,oBAAD,CAAC,WAgBA;;;iFA+EI,mBAAmB;cAvH/B,SAAS;2BACE,gBAAgB,YAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCT;;kFA4EU,mBAAmB"}