@memberjunction/ng-dashboards 5.30.1 → 5.32.0

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

@@ -142,7 +142,7 @@ function ComponentPreviewComponent_Conditional_12_Conditional_3_Template(rf, ctx
 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.ɵɵ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)); })("initialized", function ComponentPreviewComponent_Conditional_12_Template_mj_react_component_initialized_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnReactInitialized()); })("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.ɵɵconditionalCreate(3, ComponentPreviewComponent_Conditional_12_Conditional_3_Template, 15, 2, "div", 30);
 } if (rf & 2) {
@@ -244,11 +244,18 @@ export class ComponentPreviewComponent {
             };
             this.cdr.detectChanges();
         }
-        else if (event.type === 'loaded') {
-            const resolvedSpec = event.payload?.resolvedSpec;
-            if (resolvedSpec) {
-                this.State.UpdateWithResolvedSpec(resolvedSpec);
-            }
+    }
+    /**
+     * Fires once the React bridge has resolved the full component hierarchy from the
+     * registry. The bridge stores the resolved spec (with real dependency code, not
+     * registry-reference stubs) on its public `resolvedComponentSpec` field — pull it
+     * across so the code-editor tabs can render actual source instead of "No code available".
+     */
+    OnReactInitialized() {
+        const resolvedSpec = this.ReactComponentRef?.resolvedComponentSpec;
+        if (resolvedSpec) {
+            this.State.UpdateWithResolvedSpec(resolvedSpec);
+            this.cdr.detectChanges();
         }
     }
     OnOpenEntityRecord(event) {
@@ -275,7 +282,9 @@ export class ComponentPreviewComponent {
     }
     /**
      * Refresh the preview by nulling the spec, detecting changes,
-     * then restoring the spec after a short delay.
+     * then restoring the spec after a short delay. The bridge's own
+     * `initializeComponent` purges the runtime registry + manager fetch cache
+     * for the new spec's keys, so consumers don't need to clear anything here.
      */
     refreshPreview() {
         if (!this.State.SelectedComponent)
@@ -303,7 +312,7 @@ export class ComponentPreviewComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ReactComponentRef = _t.first);
-        } }, outputs: { AskAIToFix: "AskAIToFix" }, standalone: false, 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) {
+        } }, outputs: { AskAIToFix: "AskAIToFix" }, standalone: false, 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", "initialized", "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.ɵɵconditionalCreate(3, ComponentPreviewComponent_Conditional_3_Template, 2, 1);
             i0.ɵɵelementEnd();
@@ -332,7 +341,7 @@ export class ComponentPreviewComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentPreviewComponent, [{
         type: Component,
-        args: [{ standalone: false, 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(--mj-bg-surface-sunken);\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(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\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(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\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(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-btn i {\n  font-size: 11px;\n}\n\n.run-btn {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.run-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-success) 60%, transparent);\n}\n\n.stop-btn {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.stop-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 60%, transparent);\n}\n\n.ai-fix-btn {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.ai-fix-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 60%, transparent);\n}\n\n.running-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\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: var(--mj-status-success);\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(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\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(--mj-text-secondary);\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(--mj-border-default);\n}\n\n.viewport-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.viewport-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.viewport-btn.active:hover {\n  background: var(--mj-brand-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(--mj-bg-surface);\n}\n\n.preview-container.mobile,\n.preview-container.tablet {\n  border-left: 1px solid var(--mj-border-default);\n  border-right: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\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(--mj-text-secondary);\n}\n\n.empty-state i {\n  margin-bottom: 16px;\n  color: var(--mj-border-default);\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n.run-state h3 {\n  color: var(--mj-text-primary);\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: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\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: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-top: 2px solid var(--mj-status-error);\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: var(--mj-status-error);\n  font-size: 16px;\n}\n\n.error-overlay-header .error-overlay-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-status-error);\n}\n\n.error-overlay-message {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n}\n\n.error-overlay-actions {\n  display: flex;\n  gap: 8px;\n}\n"] }]
+        args: [{ standalone: false, 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          (initialized)=\"OnReactInitialized()\"\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(--mj-bg-surface-sunken);\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(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\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(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\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(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-btn i {\n  font-size: 11px;\n}\n\n.run-btn {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.run-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-success) 60%, transparent);\n}\n\n.stop-btn {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.stop-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 60%, transparent);\n}\n\n.ai-fix-btn {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.ai-fix-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 60%, transparent);\n}\n\n.running-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\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: var(--mj-status-success);\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(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\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(--mj-text-secondary);\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(--mj-border-default);\n}\n\n.viewport-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.viewport-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.viewport-btn.active:hover {\n  background: var(--mj-brand-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(--mj-bg-surface);\n}\n\n.preview-container.mobile,\n.preview-container.tablet {\n  border-left: 1px solid var(--mj-border-default);\n  border-right: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\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(--mj-text-secondary);\n}\n\n.empty-state i {\n  margin-bottom: 16px;\n  color: var(--mj-border-default);\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n.run-state h3 {\n  color: var(--mj-text-primary);\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: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\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: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-top: 2px solid var(--mj-status-error);\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: var(--mj-status-error);\n  font-size: 16px;\n}\n\n.error-overlay-header .error-overlay-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-status-error);\n}\n\n.error-overlay-message {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\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']

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

@@ -1 +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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","sourcesContent":["import {\n  Component,\n  Output,\n  EventEmitter,\n  OnInit,\n  OnDestroy,\n  ViewChild,\n  ChangeDetectorRef\n} from '@angular/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { ComponentSpec } from '@memberjunction/interactive-component-types';\nimport { ReactComponentEvent, MJReactComponent } from '@memberjunction/ng-react';\nimport { CompositeKey } from '@memberjunction/core';\nimport { SharedService } from '@memberjunction/ng-shared';\nimport {\n  ComponentStudioStateService,\n  ComponentError\n} from '../../services/component-studio-state.service';\n\n/**\n * Viewport size preset for the component preview\n */\nexport type ViewportSize = 'mobile' | 'tablet' | 'desktop';\n\ninterface ViewportPreset {\n  Size: ViewportSize;\n  Label: string;\n  Icon: string;\n  MaxWidth: string;\n}\n\n/**\n * Component Preview - TOP section of CENTER panel.\n * Renders the live React component preview with toolbar controls.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-component-preview',\n  templateUrl: './component-preview.component.html',\n  styleUrls: ['./component-preview.component.css']\n})\nexport class ComponentPreviewComponent implements OnInit, OnDestroy {\n\n  @ViewChild('reactComponent') ReactComponentRef?: MJReactComponent;\n\n  @Output() AskAIToFix = new EventEmitter<ComponentError>();\n\n  // --- Viewport ---\n  public ActiveViewport: ViewportSize = 'desktop';\n\n  public readonly ViewportPresets: ViewportPreset[] = [\n    { Size: 'mobile', Label: 'Mobile (375px)', Icon: 'fa-mobile-screen', MaxWidth: '375px' },\n    { Size: 'tablet', Label: 'Tablet (768px)', Icon: 'fa-tablet-screen-button', MaxWidth: '768px' },\n    { Size: 'desktop', Label: 'Desktop (100%)', Icon: 'fa-desktop', MaxWidth: '100%' }\n  ];\n\n  // --- Local spec for refresh cycle ---\n  public LocalComponentSpec: ComponentSpec | null = null;\n\n  private destroy$ = new Subject<void>();\n\n  constructor(\n    public State: ComponentStudioStateService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    this.syncSpecFromState();\n\n    this.State.StateChanged\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(() => {\n        this.syncSpecFromState();\n        this.cdr.detectChanges();\n      });\n\n    this.State.RefreshComponent\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(() => {\n        this.refreshPreview();\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  // ============================================================\n  // TOOLBAR ACTIONS\n  // ============================================================\n\n  public RunSelectedComponent(): void {\n    if (this.State.SelectedComponent) {\n      this.State.RunComponent(this.State.SelectedComponent);\n    }\n  }\n\n  public StopComponent(): void {\n    MJReactComponent.forceClearRegistries();\n    this.State.StopComponent();\n  }\n\n  public RefreshComponent(): void {\n    if (this.State.SelectedComponent && this.State.IsRunning) {\n      MJReactComponent.forceClearRegistries();\n      this.refreshPreview();\n    }\n  }\n\n  public SetViewport(size: ViewportSize): void {\n    this.ActiveViewport = size;\n    this.cdr.detectChanges();\n  }\n\n  public SendErrorToAI(): void {\n    if (this.State.CurrentError) {\n      this.AskAIToFix.emit(this.State.CurrentError);\n      this.State.SendErrorToAI.emit(this.State.CurrentError);\n    }\n  }\n\n  // ============================================================\n  // VIEWPORT HELPERS\n  // ============================================================\n\n  public GetActivePreset(): ViewportPreset {\n    return this.ViewportPresets.find(p => p.Size === this.ActiveViewport) || this.ViewportPresets[2];\n  }\n\n  public GetPreviewContainerMaxWidth(): string {\n    return this.GetActivePreset().MaxWidth;\n  }\n\n  // ============================================================\n  // REACT COMPONENT EVENTS\n  // ============================================================\n\n  public OnComponentEvent(event: ReactComponentEvent): void {\n    if (event.type === 'error') {\n      this.State.CurrentError = {\n        type: event.payload?.source || 'Component Error',\n        message: event.payload?.error || 'An error occurred while rendering the component',\n        technicalDetails: event.payload?.errorInfo || event.payload\n      };\n      this.cdr.detectChanges();\n    } else if (event.type === 'loaded') {\n      const resolvedSpec = event.payload?.resolvedSpec as ComponentSpec | undefined;\n      if (resolvedSpec) {\n        this.State.UpdateWithResolvedSpec(resolvedSpec);\n      }\n    }\n  }\n\n  public OnOpenEntityRecord(event: { entityName: string; key: CompositeKey }): void {\n    SharedService.Instance.OpenEntityRecord(event.entityName, event.key);\n  }\n\n  // ============================================================\n  // STATE HELPERS\n  // ============================================================\n\n  public GetComponentName(): string {\n    if (!this.State.SelectedComponent) return '';\n    return this.State.GetComponentName(this.State.SelectedComponent);\n  }\n\n  public GetComponentDescription(): string | undefined {\n    if (!this.State.SelectedComponent) return undefined;\n    return this.State.GetComponentDescription(this.State.SelectedComponent);\n  }\n\n  // ============================================================\n  // PRIVATE\n  // ============================================================\n\n  private syncSpecFromState(): void {\n    this.LocalComponentSpec = this.State.ComponentSpec;\n  }\n\n  /**\n   * Refresh the preview by nulling the spec, detecting changes,\n   * then restoring the spec after a short delay.\n   */\n  private refreshPreview(): void {\n    if (!this.State.SelectedComponent) return;\n\n    const spec = this.State.GetComponentSpec(this.State.SelectedComponent);\n\n    // Null out to force React to unmount\n    this.LocalComponentSpec = null;\n    this.cdr.detectChanges();\n\n    // Re-set after a brief pause to force fresh mount\n    setTimeout(() => {\n      this.LocalComponentSpec = spec;\n      this.State.ComponentSpec = spec;\n      this.State.CurrentError = null;\n      try {\n        this.cdr.detectChanges();\n      } catch (error) {\n        console.error('Error during refresh detectChanges:', error);\n      }\n    }, 10);\n  }\n}\n","<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"]}
+{"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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","sourcesContent":["import {\n  Component,\n  Output,\n  EventEmitter,\n  OnInit,\n  OnDestroy,\n  ViewChild,\n  ChangeDetectorRef\n} from '@angular/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { ComponentSpec } from '@memberjunction/interactive-component-types';\nimport { ReactComponentEvent, MJReactComponent } from '@memberjunction/ng-react';\nimport { CompositeKey } from '@memberjunction/core';\nimport { SharedService } from '@memberjunction/ng-shared';\nimport {\n  ComponentStudioStateService,\n  ComponentError\n} from '../../services/component-studio-state.service';\n\n/**\n * Viewport size preset for the component preview\n */\nexport type ViewportSize = 'mobile' | 'tablet' | 'desktop';\n\ninterface ViewportPreset {\n  Size: ViewportSize;\n  Label: string;\n  Icon: string;\n  MaxWidth: string;\n}\n\n/**\n * Component Preview - TOP section of CENTER panel.\n * Renders the live React component preview with toolbar controls.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-component-preview',\n  templateUrl: './component-preview.component.html',\n  styleUrls: ['./component-preview.component.css']\n})\nexport class ComponentPreviewComponent implements OnInit, OnDestroy {\n\n  @ViewChild('reactComponent') ReactComponentRef?: MJReactComponent;\n\n  @Output() AskAIToFix = new EventEmitter<ComponentError>();\n\n  // --- Viewport ---\n  public ActiveViewport: ViewportSize = 'desktop';\n\n  public readonly ViewportPresets: ViewportPreset[] = [\n    { Size: 'mobile', Label: 'Mobile (375px)', Icon: 'fa-mobile-screen', MaxWidth: '375px' },\n    { Size: 'tablet', Label: 'Tablet (768px)', Icon: 'fa-tablet-screen-button', MaxWidth: '768px' },\n    { Size: 'desktop', Label: 'Desktop (100%)', Icon: 'fa-desktop', MaxWidth: '100%' }\n  ];\n\n  // --- Local spec for refresh cycle ---\n  public LocalComponentSpec: ComponentSpec | null = null;\n\n  private destroy$ = new Subject<void>();\n\n  constructor(\n    public State: ComponentStudioStateService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    this.syncSpecFromState();\n\n    this.State.StateChanged\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(() => {\n        this.syncSpecFromState();\n        this.cdr.detectChanges();\n      });\n\n    this.State.RefreshComponent\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(() => {\n        this.refreshPreview();\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  // ============================================================\n  // TOOLBAR ACTIONS\n  // ============================================================\n\n  public RunSelectedComponent(): void {\n    if (this.State.SelectedComponent) {\n      this.State.RunComponent(this.State.SelectedComponent);\n    }\n  }\n\n  public StopComponent(): void {\n    MJReactComponent.forceClearRegistries();\n    this.State.StopComponent();\n  }\n\n  public RefreshComponent(): void {\n    if (this.State.SelectedComponent && this.State.IsRunning) {\n      MJReactComponent.forceClearRegistries();\n      this.refreshPreview();\n    }\n  }\n\n  public SetViewport(size: ViewportSize): void {\n    this.ActiveViewport = size;\n    this.cdr.detectChanges();\n  }\n\n  public SendErrorToAI(): void {\n    if (this.State.CurrentError) {\n      this.AskAIToFix.emit(this.State.CurrentError);\n      this.State.SendErrorToAI.emit(this.State.CurrentError);\n    }\n  }\n\n  // ============================================================\n  // VIEWPORT HELPERS\n  // ============================================================\n\n  public GetActivePreset(): ViewportPreset {\n    return this.ViewportPresets.find(p => p.Size === this.ActiveViewport) || this.ViewportPresets[2];\n  }\n\n  public GetPreviewContainerMaxWidth(): string {\n    return this.GetActivePreset().MaxWidth;\n  }\n\n  // ============================================================\n  // REACT COMPONENT EVENTS\n  // ============================================================\n\n  public OnComponentEvent(event: ReactComponentEvent): void {\n    if (event.type === 'error') {\n      this.State.CurrentError = {\n        type: event.payload?.source || 'Component Error',\n        message: event.payload?.error || 'An error occurred while rendering the component',\n        technicalDetails: event.payload?.errorInfo || event.payload\n      };\n      this.cdr.detectChanges();\n    }\n  }\n\n  /**\n   * Fires once the React bridge has resolved the full component hierarchy from the\n   * registry. The bridge stores the resolved spec (with real dependency code, not\n   * registry-reference stubs) on its public `resolvedComponentSpec` field — pull it\n   * across so the code-editor tabs can render actual source instead of \"No code available\".\n   */\n  public OnReactInitialized(): void {\n    const resolvedSpec = this.ReactComponentRef?.resolvedComponentSpec;\n    if (resolvedSpec) {\n      this.State.UpdateWithResolvedSpec(resolvedSpec);\n      this.cdr.detectChanges();\n    }\n  }\n\n  public OnOpenEntityRecord(event: { entityName: string; key: CompositeKey }): void {\n    SharedService.Instance.OpenEntityRecord(event.entityName, event.key);\n  }\n\n  // ============================================================\n  // STATE HELPERS\n  // ============================================================\n\n  public GetComponentName(): string {\n    if (!this.State.SelectedComponent) return '';\n    return this.State.GetComponentName(this.State.SelectedComponent);\n  }\n\n  public GetComponentDescription(): string | undefined {\n    if (!this.State.SelectedComponent) return undefined;\n    return this.State.GetComponentDescription(this.State.SelectedComponent);\n  }\n\n  // ============================================================\n  // PRIVATE\n  // ============================================================\n\n  private syncSpecFromState(): void {\n    this.LocalComponentSpec = this.State.ComponentSpec;\n  }\n\n  /**\n   * Refresh the preview by nulling the spec, detecting changes,\n   * then restoring the spec after a short delay. The bridge's own\n   * `initializeComponent` purges the runtime registry + manager fetch cache\n   * for the new spec's keys, so consumers don't need to clear anything here.\n   */\n  private refreshPreview(): void {\n    if (!this.State.SelectedComponent) return;\n\n    const spec = this.State.GetComponentSpec(this.State.SelectedComponent);\n\n    // Null out to force React to unmount\n    this.LocalComponentSpec = null;\n    this.cdr.detectChanges();\n\n    // Re-set after a brief pause to force fresh mount\n    setTimeout(() => {\n      this.LocalComponentSpec = spec;\n      this.State.ComponentSpec = spec;\n      this.State.CurrentError = null;\n      try {\n        this.cdr.detectChanges();\n      } catch (error) {\n        console.error('Error during refresh detectChanges:', error);\n      }\n    }, 10);\n  }\n}\n","<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          (initialized)=\"OnReactInitialized()\"\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"]}

package/dist/ComponentStudio/services/component-studio-state.service.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '@angular/core';
+import { IMetadataProvider } from '@memberjunction/core';
 import { MJComponentEntityExtended } from '@memberjunction/core-entities';
 import { ComponentSpec } from '@memberjunction/interactive-component-types';
 import * as i0 from "@angular/core";
@@ -118,6 +119,7 @@ export declare class ComponentStudioStateService {
     get IsDetailsPaneCollapsed(): boolean;
     set IsDetailsPaneCollapsed(value: boolean);
     private _hasUnsavedChanges;
+    private _hasResolvedSpec;
     get HasUnsavedChanges(): boolean;
     set HasUnsavedChanges(value: boolean);
     private _isAIPanelCollapsed;
@@ -131,7 +133,11 @@ export declare class ComponentStudioStateService {
     SendErrorToAI: EventEmitter<ComponentError>;
     /** Emitted when a component spec is updated (e.g. by AI) */
     SpecUpdated: EventEmitter<ComponentSpec>;
-    private metadata;
+    private _provider;
+    /** Set the metadata provider this service should use. Components should call this after injection. */
+    set Provider(value: IMetadataProvider | null);
+    get Provider(): IMetadataProvider;
+    private get metadata();
     LoadComponents(): Promise<void>;
     private loadFavorites;
     ApplyFilters(): void;
@@ -180,6 +186,10 @@ export declare class ComponentStudioStateService {
      * React bridge after it loads the component hierarchy.  This replaces
      * registry-reference stubs with real code so code sections show actual source.
      * Does NOT mark the component as having unsaved changes or trigger a re-render.
+     *
+     * Runs at most once per component load. The bridge re-resolves from the registry
+     * on every refresh (including the refresh triggered by Apply Changes), and we
+     * must not let that round-trip clobber edits the user has already applied.
      */
     UpdateWithResolvedSpec(resolvedSpec: ComponentSpec): void;
     /**

package/dist/ComponentStudio/services/component-studio-state.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-studio-state.service.d.ts","sourceRoot":"","sources":["../../../src/ComponentStudio/services/component-studio-state.service.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"component-studio-state.service.d.ts","sourceRoot":"","sources":["../../../src/ComponentStudio/services/component-studio-state.service.ts"],"names":[],"mappings":"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"}

package/dist/ComponentStudio/services/component-studio-state.service.js

@@ -88,6 +88,7 @@ export class ComponentStudioStateService {
     set IsDetailsPaneCollapsed(value) { this._isDetailsPaneCollapsed = value; }
     // --- Unsaved changes tracking ---
     _hasUnsavedChanges = false;
+    _hasResolvedSpec = false;
     get HasUnsavedChanges() { return this._hasUnsavedChanges; }
     set HasUnsavedChanges(value) { this._hasUnsavedChanges = value; }
     // --- AI Panel ---
@@ -103,7 +104,17 @@ export class ComponentStudioStateService {
     SendErrorToAI = new EventEmitter();
     /** Emitted when a component spec is updated (e.g. by AI) */
     SpecUpdated = new EventEmitter();
-    metadata = new Metadata();
+    _provider = null;
+    /** Set the metadata provider this service should use. Components should call this after injection. */
+    set Provider(value) {
+        this._provider = value;
+    }
+    get Provider() {
+        return this._provider ?? Metadata.Provider;
+    }
+    get metadata() {
+        return this.Provider;
+    }
     // ============================================================
     // DATA LOADING
     // ============================================================
@@ -111,7 +122,7 @@ export class ComponentStudioStateService {
         this._isLoading = true;
         this.StateChanged.emit();
         try {
-            const rv = new RunView();
+            const rv = RunView.FromMetadataProvider(this.Provider);
             const result = await rv.RunView({
                 EntityName: 'MJ: Components',
                 ExtraFilter: 'HasRequiredCustomProps = 0',
@@ -292,7 +303,7 @@ export class ComponentStudioStateService {
         const componentId = this.GetComponentId(component);
         const isFavorite = this._favoriteComponents.has(componentId);
         try {
-            await this.metadata.SetRecordFavoriteStatus(currentUserId, 'MJ: Components', CompositeKey.FromID(componentId), !isFavorite);
+            await this.metadata.SetRecordFavoriteStatus(currentUserId, 'MJ: Components', CompositeKey.FromID(componentId), !isFavorite, this.metadata.CurrentUser);
             if (isFavorite) {
                 this._favoriteComponents.delete(componentId);
             }
@@ -357,6 +368,7 @@ export class ComponentStudioStateService {
         this._currentError = null;
         this._isDetailsPaneCollapsed = false;
         this._hasUnsavedChanges = false;
+        this._hasResolvedSpec = false;
         this.InitializeEditors();
         this.StateChanged.emit();
     }
@@ -366,6 +378,7 @@ export class ComponentStudioStateService {
         this._componentSpec = null;
         this._currentError = null;
         this._hasUnsavedChanges = false;
+        this._hasResolvedSpec = false;
         this.StateChanged.emit();
     }
     RunComponent(component) {
@@ -503,14 +516,21 @@ export class ComponentStudioStateService {
      * React bridge after it loads the component hierarchy.  This replaces
      * registry-reference stubs with real code so code sections show actual source.
      * Does NOT mark the component as having unsaved changes or trigger a re-render.
+     *
+     * Runs at most once per component load. The bridge re-resolves from the registry
+     * on every refresh (including the refresh triggered by Apply Changes), and we
+     * must not let that round-trip clobber edits the user has already applied.
      */
     UpdateWithResolvedSpec(resolvedSpec) {
         if (!this._selectedComponent)
             return;
+        if (this._hasResolvedSpec)
+            return;
         // Only update if the resolved spec actually differs (has real code)
         const current = this._componentSpec;
         if (!current || current === resolvedSpec)
             return;
+        this._hasResolvedSpec = true;
         this._componentSpec = resolvedSpec;
         // Update editable spec JSON so Spec/Requirements/Design/Data tabs reflect resolved data
         const parseOptions = {