@xxmachina/components 20.24.3 → 20.48.0

package/fesm2022/xxmachina-components-features-query.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, DestroyRef } from '@angular/core';
+import { inject, Injectable, InjectionToken, DestroyRef, signal } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Query as Query$1, QueryHelper } from '@xxmachina/common/domain/models';
 import { QueryService } from '@xxmachina/common/services/query';
 import { isPlainObject, isEqual, cloneDeep, set, get } from 'lodash-es';
-import { map, shareReplay, filter, switchMap, startWith, pairwise, withLatestFrom, ReplaySubject, take, of, distinctUntilChanged, debounceTime, catchError, NEVER } from 'rxjs';
+import { map, shareReplay, filter, switchMap, startWith, pairwise, withLatestFrom, ReplaySubject, take, of, distinctUntilChanged, debounceTime, tap, catchError, NEVER } from 'rxjs';
 import { AuthService } from '@xxmachina/common/auth';
 import { QueryFormService } from '@xxmachina/components/services/forms/query';
 import { AppService } from '@ng-atomic/common/services/app';
@@ -210,6 +210,7 @@ class QueryFeature {
         }
         return this.auth.accessToken$.pipe(filter(accessToken => !!accessToken), map(() => query));
     }), distinctUntilChanged((a, b) => isEqual(a, b)), debounceTime(500), this.app.loading.switchMap((query) => this.executeQuery(query), 'progress'), filter((result) => !!result), pauseWhenEditing(this.editingStateManager), shareReplay({ bufferSize: 1, refCount: true }));
+    error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
     result = toSignal(this.result$);
     constructor() {
         this.form.get(['graphql', 'variablesJson']).valueChanges.pipe(takeUntilDestroyed(), debounceTime(300), distinctUntilChanged(isEqual)).subscribe(() => this.refresh());
@@ -222,7 +223,8 @@ class QueryFeature {
         const source$ = resolver
             ? resolver.resolve(query)
             : isQuery(query.graphql.query) ? this.service.query(query) : this.service.subscribe(query);
-        return source$.pipe(takeUntilDestroyed(this.destroyRef), catchError(error => {
+        return source$.pipe(takeUntilDestroyed(this.destroyRef), tap(() => this.error.set(false)), catchError(error => {
+            this.error.set(true);
             this.app.snackBar.openError(error);
             console.error(error);
             return of(null);

package/fesm2022/xxmachina-components-frames-qtp-v2.mjs

@@ -0,0 +1,267 @@
+import * as i1$2 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, input, output, ChangeDetectionStrategy, Component, computed, contentChildren, signal } from '@angular/core';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+
+class QuerySectionDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QuerySectionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: QuerySectionDirective, isStandalone: true, selector: "[querySection]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QuerySectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[querySection]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TransformerSectionDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TransformerSectionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: TransformerSectionDirective, isStandalone: true, selector: "[transformerSection]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TransformerSectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[transformerSection]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class PresenterSectionDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: PresenterSectionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: PresenterSectionDirective, isStandalone: true, selector: "[presenterSection]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: PresenterSectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[presenterSection]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class QtpV2Select {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    valueChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QtpV2Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: QtpV2Select, isStandalone: true, selector: "frames-qtp-v2-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <mat-form-field appearance="outline" class="qtp-select">
+      <mat-select [value]="value()" (selectionChange)="valueChange.emit($event.value)" panelClass="qtp-select-panel">
+        @for (option of options(); track option.id) {
+          <mat-option [value]="option.id">{{ option.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  `, isInline: true, styles: [":host{display:contents}.qtp-select{width:110px;min-width:110px;max-width:110px}::ng-deep .qtp-select .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .qtp-select .mat-mdc-text-field-wrapper{padding:0 10px!important;height:28px!important;background:#ffffff0f!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:6px!important;transition:all .2s ease!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}::ng-deep .qtp-select .mat-mdc-form-field-flex{height:28px!important}::ng-deep .qtp-select .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important;width:90px}::ng-deep .qtp-select .mat-mdc-select-trigger{font-size:12px!important;font-weight:500!important;letter-spacing:.2px!important;height:20px;width:90px}::ng-deep .qtp-select .mat-mdc-select-value,::ng-deep .qtp-select .mat-mdc-select-value-text,::ng-deep .qtp-select .mat-mdc-select-min-line{color:#fffffff2!important;-webkit-text-fill-color:rgba(255,255,255,.95)!important}::ng-deep .qtp-select .mat-mdc-select-arrow{color:#ffffff80!important;transition:color .2s ease,transform .2s ease!important}::ng-deep .qtp-select .mat-mdc-select-arrow svg{fill:currentColor!important}::ng-deep .qtp-select .mdc-notched-outline{display:none!important}::ng-deep .qtp-select:hover .mat-mdc-text-field-wrapper{background:#ffffff1a!important;border-color:#64b4ff66!important}::ng-deep .qtp-select:focus-within .mat-mdc-text-field-wrapper{background:#ffffff14!important;border-color:#64b4ff99!important;box-shadow:0 0 0 2px #64b4ff26!important}::ng-deep .qtp-select-panel{background:#2a2a2a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:4px;max-height:256px}::ng-deep .qtp-select-panel .mat-mdc-option{font-size:12px;min-height:32px;padding:0 12px}::ng-deep .qtp-select-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .qtp-select-panel .mat-mdc-option:hover{background:#ffffff14!important}::ng-deep .qtp-select-panel .mat-mdc-option:hover .mdc-list-item__primary-text{color:#fff}::ng-deep .qtp-select-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .qtp-select-panel .mat-mdc-option.mat-mdc-option-selected{background:#ffffff1f!important}::ng-deep .qtp-select-panel .mat-mdc-option.mat-mdc-option-active .mdc-list-item__primary-text,::ng-deep .qtp-select-panel .mat-mdc-option.mat-mdc-option-selected .mdc-list-item__primary-text{color:#fff;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QtpV2Select, decorators: [{
+            type: Component,
+            args: [{ selector: 'frames-qtp-v2-select', standalone: true, imports: [MatFormFieldModule, MatSelectModule], template: `
+    <mat-form-field appearance="outline" class="qtp-select">
+      <mat-select [value]="value()" (selectionChange)="valueChange.emit($event.value)" panelClass="qtp-select-panel">
+        @for (option of options(); track option.id) {
+          <mat-option [value]="option.id">{{ option.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.qtp-select{width:110px;min-width:110px;max-width:110px}::ng-deep .qtp-select .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .qtp-select .mat-mdc-text-field-wrapper{padding:0 10px!important;height:28px!important;background:#ffffff0f!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:6px!important;transition:all .2s ease!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}::ng-deep .qtp-select .mat-mdc-form-field-flex{height:28px!important}::ng-deep .qtp-select .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important;width:90px}::ng-deep .qtp-select .mat-mdc-select-trigger{font-size:12px!important;font-weight:500!important;letter-spacing:.2px!important;height:20px;width:90px}::ng-deep .qtp-select .mat-mdc-select-value,::ng-deep .qtp-select .mat-mdc-select-value-text,::ng-deep .qtp-select .mat-mdc-select-min-line{color:#fffffff2!important;-webkit-text-fill-color:rgba(255,255,255,.95)!important}::ng-deep .qtp-select .mat-mdc-select-arrow{color:#ffffff80!important;transition:color .2s ease,transform .2s ease!important}::ng-deep .qtp-select .mat-mdc-select-arrow svg{fill:currentColor!important}::ng-deep .qtp-select .mdc-notched-outline{display:none!important}::ng-deep .qtp-select:hover .mat-mdc-text-field-wrapper{background:#ffffff1a!important;border-color:#64b4ff66!important}::ng-deep .qtp-select:focus-within .mat-mdc-text-field-wrapper{background:#ffffff14!important;border-color:#64b4ff99!important;box-shadow:0 0 0 2px #64b4ff26!important}::ng-deep .qtp-select-panel{background:#2a2a2a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:4px;max-height:256px}::ng-deep .qtp-select-panel .mat-mdc-option{font-size:12px;min-height:32px;padding:0 12px}::ng-deep .qtp-select-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .qtp-select-panel .mat-mdc-option:hover{background:#ffffff14!important}::ng-deep .qtp-select-panel .mat-mdc-option:hover .mdc-list-item__primary-text{color:#fff}::ng-deep .qtp-select-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .qtp-select-panel .mat-mdc-option.mat-mdc-option-selected{background:#ffffff1f!important}::ng-deep .qtp-select-panel .mat-mdc-option.mat-mdc-option-active .mdc-list-item__primary-text,::ng-deep .qtp-select-panel .mat-mdc-option.mat-mdc-option-selected .mdc-list-item__primary-text{color:#fff;font-weight:400}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class QtpV2TransformerActions {
+    canGenerate = input(false, ...(ngDevMode ? [{ debugName: "canGenerate" }] : []));
+    generating = input(false, ...(ngDevMode ? [{ debugName: "generating" }] : []));
+    generate = output();
+    run = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QtpV2TransformerActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: QtpV2TransformerActions, isStandalone: true, selector: "frames-qtp-v2-transformer-actions", inputs: { canGenerate: { classPropertyName: "canGenerate", publicName: "canGenerate", isSignal: true, isRequired: false, transformFunction: null }, generating: { classPropertyName: "generating", publicName: "generating", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { generate: "generate", run: "run" }, ngImport: i0, template: `
+    @if (canGenerate()) {
+      <button mat-stroked-button class="qtp-generate-btn" (click)="generate.emit()" [disabled]="generating()">
+        @if (generating()) {
+          <mat-spinner diameter="16" />
+        } @else {
+          <mat-icon>auto_awesome</mat-icon>
+        }
+        Generate
+      </button>
+    }
+    <button mat-flat-button class="qtp-run-btn" (click)="run.emit()">
+      <mat-icon>play_arrow</mat-icon>Run
+    </button>
+  `, isInline: true, styles: [":host{display:contents}.qtp-generate-btn{height:26px!important;line-height:26px!important;font-size:11px!important;font-weight:500!important;letter-spacing:.3px!important;padding:0 10px!important;min-width:auto!important;background:#ffffff14!important;color:#ffffffe6!important;border-radius:6px!important;border:1px solid rgba(100,180,255,.4)!important;transition:all .15s ease!important}.qtp-generate-btn:hover:not(:disabled){background:#64b4ff26!important;border-color:#64b4ff99!important}.qtp-generate-btn:disabled{opacity:.6;cursor:not-allowed}.qtp-generate-btn .mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important;color:#64b4ffe6}.qtp-generate-btn mat-spinner{display:inline-block;margin-right:4px!important;vertical-align:middle}.qtp-run-btn{height:26px!important;line-height:26px!important;font-size:11px!important;font-weight:500!important;letter-spacing:.3px!important;padding:0 12px!important;min-width:auto!important;background:#1976d2!important;color:#fff!important;border-radius:6px!important;border:none!important;box-shadow:0 2px 4px #0003!important;transition:all .15s ease!important}.qtp-run-btn:hover{background:#1e88e5!important;box-shadow:0 3px 6px #00000040!important;transform:translateY(-1px)}.qtp-run-btn:active{transform:translateY(0);box-shadow:0 1px 2px #0003!important}.qtp-run-btn .mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QtpV2TransformerActions, decorators: [{
+            type: Component,
+            args: [{ selector: 'frames-qtp-v2-transformer-actions', standalone: true, imports: [MatButtonModule, MatIconModule, MatProgressSpinnerModule], template: `
+    @if (canGenerate()) {
+      <button mat-stroked-button class="qtp-generate-btn" (click)="generate.emit()" [disabled]="generating()">
+        @if (generating()) {
+          <mat-spinner diameter="16" />
+        } @else {
+          <mat-icon>auto_awesome</mat-icon>
+        }
+        Generate
+      </button>
+    }
+    <button mat-flat-button class="qtp-run-btn" (click)="run.emit()">
+      <mat-icon>play_arrow</mat-icon>Run
+    </button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.qtp-generate-btn{height:26px!important;line-height:26px!important;font-size:11px!important;font-weight:500!important;letter-spacing:.3px!important;padding:0 10px!important;min-width:auto!important;background:#ffffff14!important;color:#ffffffe6!important;border-radius:6px!important;border:1px solid rgba(100,180,255,.4)!important;transition:all .15s ease!important}.qtp-generate-btn:hover:not(:disabled){background:#64b4ff26!important;border-color:#64b4ff99!important}.qtp-generate-btn:disabled{opacity:.6;cursor:not-allowed}.qtp-generate-btn .mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important;color:#64b4ffe6}.qtp-generate-btn mat-spinner{display:inline-block;margin-right:4px!important;vertical-align:middle}.qtp-run-btn{height:26px!important;line-height:26px!important;font-size:11px!important;font-weight:500!important;letter-spacing:.3px!important;padding:0 12px!important;min-width:auto!important;background:#1976d2!important;color:#fff!important;border-radius:6px!important;border:none!important;box-shadow:0 2px 4px #0003!important;transition:all .15s ease!important}.qtp-run-btn:hover{background:#1e88e5!important;box-shadow:0 3px 6px #00000040!important;transform:translateY(-1px)}.qtp-run-btn:active{transform:translateY(0);box-shadow:0 1px 2px #0003!important}.qtp-run-btn .mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}\n"] }]
+        }], propDecorators: { canGenerate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canGenerate", required: false }] }], generating: [{ type: i0.Input, args: [{ isSignal: true, alias: "generating", required: false }] }], generate: [{ type: i0.Output, args: ["generate"] }], run: [{ type: i0.Output, args: ["run"] }] } });
+
+class QtpV2DebugContent {
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
+    debugLogs = input([], ...(ngDevMode ? [{ debugName: "debugLogs" }] : []));
+    formattedDebugLogs = computed(() => this.debugLogs().map((entry, index) => ({ index, text: formatDebugEntry(entry) })), ...(ngDevMode ? [{ debugName: "formattedDebugLogs" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QtpV2DebugContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: QtpV2DebugContent, isStandalone: true, selector: "frames-qtp-v2-debug-content", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, debugLogs: { classPropertyName: "debugLogs", publicName: "debugLogs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (error()) {
+      <div class="qtp-debug-error">
+        <div class="qtp-debug-error-header">
+          <mat-icon>error</mat-icon>
+          <span>Transformer Error</span>
+        </div>
+        <pre class="qtp-debug-error-message">{{ error() }}</pre>
+      </div>
+    }
+    @if (formattedDebugLogs().length > 0) {
+      @for (entry of formattedDebugLogs(); track entry.index) {
+        <pre class="qtp-debug-log" data-testid="qtp-debug-log">{{ entry.text }}</pre>
+      }
+    } @else if (!error()) {
+      <div class="qtp-debug-empty">No debug() output</div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.qtp-debug-error{background:#f4433614;border:1px solid rgba(244,67,54,.3);border-radius:6px;overflow:hidden}.qtp-debug-error-header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f443361f;border-bottom:1px solid rgba(244,67,54,.2);color:#ff8a80;font-weight:500}.qtp-debug-error-header mat-icon{font-size:18px;width:18px;height:18px;color:#f44336}.qtp-debug-error-message{margin:0;padding:12px;color:#ffcdd2;white-space:pre-wrap;word-break:break-word;line-height:1.5}.qtp-debug-log{background-color:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#ffffffe0;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.5;margin:0 0 8px;max-height:240px;overflow:auto;padding:8px;white-space:pre-wrap;word-break:break-word}.qtp-debug-empty{color:#fff6;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QtpV2DebugContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'frames-qtp-v2-debug-content', standalone: true, imports: [MatIconModule], template: `
+    @if (error()) {
+      <div class="qtp-debug-error">
+        <div class="qtp-debug-error-header">
+          <mat-icon>error</mat-icon>
+          <span>Transformer Error</span>
+        </div>
+        <pre class="qtp-debug-error-message">{{ error() }}</pre>
+      </div>
+    }
+    @if (formattedDebugLogs().length > 0) {
+      @for (entry of formattedDebugLogs(); track entry.index) {
+        <pre class="qtp-debug-log" data-testid="qtp-debug-log">{{ entry.text }}</pre>
+      }
+    } @else if (!error()) {
+      <div class="qtp-debug-empty">No debug() output</div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.qtp-debug-error{background:#f4433614;border:1px solid rgba(244,67,54,.3);border-radius:6px;overflow:hidden}.qtp-debug-error-header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f443361f;border-bottom:1px solid rgba(244,67,54,.2);color:#ff8a80;font-weight:500}.qtp-debug-error-header mat-icon{font-size:18px;width:18px;height:18px;color:#f44336}.qtp-debug-error-message{margin:0;padding:12px;color:#ffcdd2;white-space:pre-wrap;word-break:break-word;line-height:1.5}.qtp-debug-log{background-color:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#ffffffe0;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.5;margin:0 0 8px;max-height:240px;overflow:auto;padding:8px;white-space:pre-wrap;word-break:break-word}.qtp-debug-empty{color:#fff6;font-style:italic}\n"] }]
+        }], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], debugLogs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugLogs", required: false }] }] } });
+function formatDebugEntry(value) {
+    if (typeof value === 'string')
+        return value;
+    try {
+        return JSON.stringify(value, null, 2) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+
+class QtpV2Frame {
+    mode = input('presentation', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    expandedPanels = input(['query', 'presenter'], ...(ngDevMode ? [{ debugName: "expandedPanels" }] : []));
+    availableTransformers = input([], ...(ngDevMode ? [{ debugName: "availableTransformers" }] : []));
+    selectedTransformer = input(...(ngDevMode ? [undefined, { debugName: "selectedTransformer" }] : []));
+    availablePresenters = input([], ...(ngDevMode ? [{ debugName: "availablePresenters" }] : []));
+    selectedPresenter = input(...(ngDevMode ? [undefined, { debugName: "selectedPresenter" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
+    debugLogs = input([], ...(ngDevMode ? [{ debugName: "debugLogs" }] : []));
+    canGenerateTransformer = input(false, ...(ngDevMode ? [{ debugName: "canGenerateTransformer" }] : []));
+    generatingTransformer = input(false, ...(ngDevMode ? [{ debugName: "generatingTransformer" }] : []));
+    panelStatesChange = output();
+    transformerSelected = output();
+    presenterSelected = output();
+    runTransformer = output();
+    generateTransformer = output();
+    queryTemplates = contentChildren(QuerySectionDirective, ...(ngDevMode ? [{ debugName: "queryTemplates" }] : []));
+    transformerTemplates = contentChildren(TransformerSectionDirective, ...(ngDevMode ? [{ debugName: "transformerTemplates" }] : []));
+    presenterTemplates = contentChildren(PresenterSectionDirective, ...(ngDevMode ? [{ debugName: "presenterTemplates" }] : []));
+    localPanels = signal(null, ...(ngDevMode ? [{ debugName: "localPanels" }] : []));
+    panels = computed(() => this.localPanels() ?? this.expandedPanels(), ...(ngDevMode ? [{ debugName: "panels" }] : []));
+    querySection = computed(() => this.queryTemplates()[0]?.templateRef, ...(ngDevMode ? [{ debugName: "querySection" }] : []));
+    transformerSection = computed(() => this.transformerTemplates()[0]?.templateRef, ...(ngDevMode ? [{ debugName: "transformerSection" }] : []));
+    presenterSection = computed(() => this.presenterTemplates()[0]?.templateRef, ...(ngDevMode ? [{ debugName: "presenterSection" }] : []));
+    isExpanded(panel) {
+        return this.panels().includes(panel);
+    }
+    togglePanel(panel) {
+        const current = this.panels();
+        const isOpen = current.includes(panel);
+        let next;
+        if (isOpen) {
+            const remaining = current.filter(p => p !== panel);
+            next = remaining.length > 0 ? remaining : ['presenter'];
+        }
+        else {
+            next = [...current, panel];
+        }
+        this.localPanels.set(next);
+        this.panelStatesChange.emit(next);
+    }
+    onTransformerChange(id) {
+        const transformer = this.availableTransformers().find(t => t.id === id);
+        if (transformer)
+            this.transformerSelected.emit(transformer);
+    }
+    onPresenterChange(id) {
+        const presenter = this.availablePresenters().find(p => p.id === id);
+        if (presenter)
+            this.presenterSelected.emit(presenter);
+    }
+    onRun() {
+        this.runTransformer.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QtpV2Frame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: QtpV2Frame, isStandalone: true, selector: "frames-qtp-v2", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, expandedPanels: { classPropertyName: "expandedPanels", publicName: "expandedPanels", isSignal: true, isRequired: false, transformFunction: null }, availableTransformers: { classPropertyName: "availableTransformers", publicName: "availableTransformers", isSignal: true, isRequired: false, transformFunction: null }, selectedTransformer: { classPropertyName: "selectedTransformer", publicName: "selectedTransformer", isSignal: true, isRequired: false, transformFunction: null }, availablePresenters: { classPropertyName: "availablePresenters", publicName: "availablePresenters", isSignal: true, isRequired: false, transformFunction: null }, selectedPresenter: { classPropertyName: "selectedPresenter", publicName: "selectedPresenter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, debugLogs: { classPropertyName: "debugLogs", publicName: "debugLogs", isSignal: true, isRequired: false, transformFunction: null }, canGenerateTransformer: { classPropertyName: "canGenerateTransformer", publicName: "canGenerateTransformer", isSignal: true, isRequired: false, transformFunction: null }, generatingTransformer: { classPropertyName: "generatingTransformer", publicName: "generatingTransformer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelStatesChange: "panelStatesChange", transformerSelected: "transformerSelected", presenterSelected: "presenterSelected", runTransformer: "runTransformer", generateTransformer: "generateTransformer" }, queries: [{ propertyName: "queryTemplates", predicate: QuerySectionDirective, isSignal: true }, { propertyName: "transformerTemplates", predicate: TransformerSectionDirective, isSignal: true }, { propertyName: "presenterTemplates", predicate: PresenterSectionDirective, isSignal: true }], ngImport: i0, template: "@if (mode() === 'presentation') {\n  <!-- Presentation Mode: Presenter content only (\u898B\u305F\u76EE)\u3002\n       querySection \u306F\u5E38\u6642\u30DE\u30A6\u30F3\u30C8\u3059\u308B (\u4E0B\u8A18\u30B3\u30E1\u30F3\u30C8\u53C2\u7167)\u3002 \u8868\u793A\u3057\u306A\u3044\u3060\u3051\u306A\u306E\u3067\n       CSS (qtp-query-hidden, 0\u00D70) \u3067\u96A0\u3059\u3002 \u65E7: 20260710 fix \u3067 querySection = \u96A0\u3057 xterm\n       \u3060\u3063\u305F\u9803\u306F presenter \u5074 xterm \u3068\u306E\u4E8C\u91CD parse \u304C CPU \u30DB\u30C3\u30C8\u30B9\u30DD\u30C3\u30C8\u3060\u3063\u305F\u305F\u3081\n       \u975E\u30DE\u30A6\u30F3\u30C8\u5316\u3057\u3066\u3044\u305F\u304C\u3001 20260812 (query editor \u5316) \u3067 querySection \u306E\u4E2D\u8EAB\u304C\n       XtermOrganism \u2192 SessionQueryEditor (GraphQL editor\u3001 xterm \u4F9D\u5B58\u306A\u3057) \u306B\u5909\u308F\u308A\u3001\n       \u4E8C\u91CD parse \u3068\u3044\u3046\u975E\u30DE\u30A6\u30F3\u30C8\u5316\u306E\u6839\u62E0\u306F\u6D88\u6EC5\u3057\u305F\u3002 \u3055\u3089\u306B SessionQueryEditor \u306F\n       mount \u6642\u306B query/subscription \u3092\u81EA\u52D5\u5B9F\u884C\u3059\u308B (fix/qtp-query-autorun) \u305F\u3081\u3001\n       \u975E\u30DE\u30A6\u30F3\u30C8\u306E\u307E\u307E\u3060\u3068 presentation mode \u3067\u51FA\u529B\u53D6\u5F97\u306E\u7D4C\u8DEF\u81EA\u4F53\u304C\u767A\u706B\u3057\u306A\u3044\n       (user \u5831\u544A: \u300Cpresenter mode \u3060\u3068\u521D\u671F\u8868\u793A\u3067\u51FA\u529B\u304C\u53D6\u308C\u306A\u3044\u300D)\u3002\n       \u8A2D\u8A08: projects/docs/design/feat/20260812_session-domain-object-explorer.md \u8FFD\u88DC -->\n  <div class=\"qtp-query-hidden\">\n    <ng-container *ngTemplateOutlet=\"querySection()\" />\n  </div>\n  <div class=\"qtp-presentation\">\n    <ng-container *ngTemplateOutlet=\"presenterSection()\" />\n  </div>\n} @else {\n  <!-- Develop Mode: Full QTP panels -->\n  <div class=\"qtp-container\">\n    <!-- Query Panel -->\n    <section class=\"qtp-panel\" [class.expanded]=\"isExpanded('query')\">\n      <header class=\"qtp-header\" (click)=\"togglePanel('query')\">\n        <div class=\"qtp-header-left\">\n          <mat-icon class=\"qtp-header-icon\">terminal</mat-icon>\n          <span class=\"qtp-header-title\">Query</span>\n        </div>\n      </header>\n      <div class=\"qtp-body\" [class.open]=\"isExpanded('query')\">\n        <div class=\"qtp-content\">\n          <ng-container *ngTemplateOutlet=\"querySection()\" />\n        </div>\n      </div>\n    </section>\n\n    <!-- Transformer Panel -->\n    <section class=\"qtp-panel\" [class.expanded]=\"isExpanded('transformer')\">\n      <header class=\"qtp-header\" (click)=\"togglePanel('transformer')\">\n        <div class=\"qtp-header-left\">\n          <mat-icon class=\"qtp-header-icon\">code</mat-icon>\n          <span class=\"qtp-header-title\">Transformer</span>\n        </div>\n        <div class=\"qtp-header-right\" (click)=\"$event.stopPropagation()\">\n          <frames-qtp-v2-select [options]=\"availableTransformers()\" [value]=\"selectedTransformer()?.id\" (valueChange)=\"onTransformerChange($event)\" />\n          <frames-qtp-v2-transformer-actions\n            [canGenerate]=\"canGenerateTransformer()\"\n            [generating]=\"generatingTransformer()\"\n            (generate)=\"generateTransformer.emit()\"\n            (run)=\"onRun()\"\n          />\n        </div>\n      </header>\n      <div class=\"qtp-body\" [class.open]=\"isExpanded('transformer')\">\n        <div class=\"qtp-content\">\n          <ng-container *ngTemplateOutlet=\"transformerSection()\" />\n        </div>\n      </div>\n    </section>\n\n    <!-- Presenter Panel -->\n    <section class=\"qtp-panel\" [class.expanded]=\"isExpanded('presenter')\">\n      <header class=\"qtp-header\" (click)=\"togglePanel('presenter')\">\n        <div class=\"qtp-header-left\">\n          <mat-icon class=\"qtp-header-icon\">{{ selectedPresenter()?.icon ?? 'view_module' }}</mat-icon>\n          <span class=\"qtp-header-title\">Presenter</span>\n        </div>\n        <div class=\"qtp-header-right\" (click)=\"$event.stopPropagation()\">\n          <frames-qtp-v2-select [options]=\"availablePresenters()\" [value]=\"selectedPresenter()?.id\" (valueChange)=\"onPresenterChange($event)\" />\n          @if (loading()) {\n            <mat-spinner diameter=\"16\" />\n          }\n        </div>\n      </header>\n      <div class=\"qtp-body\" [class.open]=\"isExpanded('presenter')\">\n        <div class=\"qtp-content\">\n          <ng-container *ngTemplateOutlet=\"presenterSection()\" />\n        </div>\n      </div>\n    </section>\n\n    <!-- Debug Panel -->\n    <section class=\"qtp-panel qtp-debug-panel\" [class.expanded]=\"isExpanded('debug')\" [class.has-error]=\"!!error()\">\n      <header class=\"qtp-header\" (click)=\"togglePanel('debug')\">\n        <div class=\"qtp-header-left\">\n          <mat-icon class=\"qtp-header-icon\">bug_report</mat-icon>\n          <span class=\"qtp-header-title\">Debug</span>\n          @if (error()) {\n            <span class=\"qtp-debug-badge\">Error</span>\n          }\n        </div>\n      </header>\n      <div class=\"qtp-body\" [class.open]=\"isExpanded('debug')\">\n        <div class=\"qtp-content qtp-debug-content\">\n          <frames-qtp-v2-debug-content [error]=\"error()\" [debugLogs]=\"debugLogs()\" />\n        </div>\n      </div>\n    </section>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:hidden;touch-action:pan-y}.qtp-query-hidden{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.qtp-presentation{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:hidden}.qtp-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:auto}.qtp-panel{background:#121216f2;overflow:hidden;display:flex;flex-direction:column;margin:0;border:none;border-bottom:1px solid rgba(255,255,255,.06);transition:flex .3s ease,background .2s ease}.qtp-panel:last-child{border-bottom:none}.qtp-panel:not(.expanded){flex:0 0 auto}.qtp-panel.expanded{flex:1 1 0;min-height:120px;background:#16161cfa}.qtp-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:44px;cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff05;transition:background .2s ease}.qtp-header:hover{background:#ffffff0d}.expanded>.qtp-header{background:#ffffff0a;border-bottom:1px solid rgba(255,255,255,.08)}.qtp-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.qtp-header-icon{font-size:18px!important;width:18px!important;height:18px!important;color:#ffffff80;transition:color .2s ease}.expanded .qtp-header-icon{color:#64b4ffe6}.qtp-header-title{font-size:13px;font-weight:500;letter-spacing:.2px;color:#fff9;transition:color .2s ease}.expanded .qtp-header-title{color:#ffffffe6}.qtp-header-right{display:flex;align-items:center;gap:10px}.qtp-body{display:flex;flex-direction:column;overflow:auto;flex:0;max-height:0;transition:max-height .3s ease,flex .3s ease}.qtp-body.open{flex:1;max-height:9999px}.qtp-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;padding:0;cursor:text;-webkit-user-select:text;user-select:text}.qtp-debug-panel.has-error .qtp-header{background:#f4433614}.qtp-debug-panel.has-error .qtp-header-icon{color:#f44336!important}.qtp-debug-badge{font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:#f4433633;color:#ff8a80;margin-left:8px}.qtp-debug-content{padding:12px 16px;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px}mat-spinner{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QtpV2Select, selector: "frames-qtp-v2-select", inputs: ["options", "value"], outputs: ["valueChange"] }, { kind: "component", type: QtpV2TransformerActions, selector: "frames-qtp-v2-transformer-actions", inputs: ["canGenerate", "generating"], outputs: ["generate", "run"] }, { kind: "component", type: QtpV2DebugContent, selector: "frames-qtp-v2-debug-content", inputs: ["error", "debugLogs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QtpV2Frame, decorators: [{
+            type: Component,
+            args: [{ selector: 'frames-qtp-v2', standalone: true, imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        QtpV2Select,
+                        QtpV2TransformerActions,
+                        QtpV2DebugContent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (mode() === 'presentation') {\n  <!-- Presentation Mode: Presenter content only (\u898B\u305F\u76EE)\u3002\n       querySection \u306F\u5E38\u6642\u30DE\u30A6\u30F3\u30C8\u3059\u308B (\u4E0B\u8A18\u30B3\u30E1\u30F3\u30C8\u53C2\u7167)\u3002 \u8868\u793A\u3057\u306A\u3044\u3060\u3051\u306A\u306E\u3067\n       CSS (qtp-query-hidden, 0\u00D70) \u3067\u96A0\u3059\u3002 \u65E7: 20260710 fix \u3067 querySection = \u96A0\u3057 xterm\n       \u3060\u3063\u305F\u9803\u306F presenter \u5074 xterm \u3068\u306E\u4E8C\u91CD parse \u304C CPU \u30DB\u30C3\u30C8\u30B9\u30DD\u30C3\u30C8\u3060\u3063\u305F\u305F\u3081\n       \u975E\u30DE\u30A6\u30F3\u30C8\u5316\u3057\u3066\u3044\u305F\u304C\u3001 20260812 (query editor \u5316) \u3067 querySection \u306E\u4E2D\u8EAB\u304C\n       XtermOrganism \u2192 SessionQueryEditor (GraphQL editor\u3001 xterm \u4F9D\u5B58\u306A\u3057) \u306B\u5909\u308F\u308A\u3001\n       \u4E8C\u91CD parse \u3068\u3044\u3046\u975E\u30DE\u30A6\u30F3\u30C8\u5316\u306E\u6839\u62E0\u306F\u6D88\u6EC5\u3057\u305F\u3002 \u3055\u3089\u306B SessionQueryEditor \u306F\n       mount \u6642\u306B query/subscription \u3092\u81EA\u52D5\u5B9F\u884C\u3059\u308B (fix/qtp-query-autorun) \u305F\u3081\u3001\n       \u975E\u30DE\u30A6\u30F3\u30C8\u306E\u307E\u307E\u3060\u3068 presentation mode \u3067\u51FA\u529B\u53D6\u5F97\u306E\u7D4C\u8DEF\u81EA\u4F53\u304C\u767A\u706B\u3057\u306A\u3044\n       (user \u5831\u544A: \u300Cpresenter mode \u3060\u3068\u521D\u671F\u8868\u793A\u3067\u51FA\u529B\u304C\u53D6\u308C\u306A\u3044\u300D)\u3002\n       \u8A2D\u8A08: projects/docs/design/feat/20260812_session-domain-object-explorer.md \u8FFD\u88DC -->\n  <div class=\"qtp-query-hidden\">\n    <ng-container *ngTemplateOutlet=\"querySection()\" />\n  </div>\n  <div class=\"qtp-presentation\">\n    <ng-container *ngTemplateOutlet=\"presenterSection()\" />\n  </div>\n} @else {\n  <!-- Develop Mode: Full QTP panels -->\n  <div class=\"qtp-container\">\n    <!-- Query Panel -->\n    <section class=\"qtp-panel\" [class.expanded]=\"isExpanded('query')\">\n      <header class=\"qtp-header\" (click)=\"togglePanel('query')\">\n        <div class=\"qtp-header-left\">\n          <mat-icon class=\"qtp-header-icon\">terminal</mat-icon>\n          <span class=\"qtp-header-title\">Query</span>\n        </div>\n      </header>\n      <div class=\"qtp-body\" [class.open]=\"isExpanded('query')\">\n        <div class=\"qtp-content\">\n          <ng-container *ngTemplateOutlet=\"querySection()\" />\n        </div>\n      </div>\n    </section>\n\n    <!-- Transformer Panel -->\n    <section class=\"qtp-panel\" [class.expanded]=\"isExpanded('transformer')\">\n      <header class=\"qtp-header\" (click)=\"togglePanel('transformer')\">\n        <div class=\"qtp-header-left\">\n          <mat-icon class=\"qtp-header-icon\">code</mat-icon>\n          <span class=\"qtp-header-title\">Transformer</span>\n        </div>\n        <div class=\"qtp-header-right\" (click)=\"$event.stopPropagation()\">\n          <frames-qtp-v2-select [options]=\"availableTransformers()\" [value]=\"selectedTransformer()?.id\" (valueChange)=\"onTransformerChange($event)\" />\n          <frames-qtp-v2-transformer-actions\n            [canGenerate]=\"canGenerateTransformer()\"\n            [generating]=\"generatingTransformer()\"\n            (generate)=\"generateTransformer.emit()\"\n            (run)=\"onRun()\"\n          />\n        </div>\n      </header>\n      <div class=\"qtp-body\" [class.open]=\"isExpanded('transformer')\">\n        <div class=\"qtp-content\">\n          <ng-container *ngTemplateOutlet=\"transformerSection()\" />\n        </div>\n      </div>\n    </section>\n\n    <!-- Presenter Panel -->\n    <section class=\"qtp-panel\" [class.expanded]=\"isExpanded('presenter')\">\n      <header class=\"qtp-header\" (click)=\"togglePanel('presenter')\">\n        <div class=\"qtp-header-left\">\n          <mat-icon class=\"qtp-header-icon\">{{ selectedPresenter()?.icon ?? 'view_module' }}</mat-icon>\n          <span class=\"qtp-header-title\">Presenter</span>\n        </div>\n        <div class=\"qtp-header-right\" (click)=\"$event.stopPropagation()\">\n          <frames-qtp-v2-select [options]=\"availablePresenters()\" [value]=\"selectedPresenter()?.id\" (valueChange)=\"onPresenterChange($event)\" />\n          @if (loading()) {\n            <mat-spinner diameter=\"16\" />\n          }\n        </div>\n      </header>\n      <div class=\"qtp-body\" [class.open]=\"isExpanded('presenter')\">\n        <div class=\"qtp-content\">\n          <ng-container *ngTemplateOutlet=\"presenterSection()\" />\n        </div>\n      </div>\n    </section>\n\n    <!-- Debug Panel -->\n    <section class=\"qtp-panel qtp-debug-panel\" [class.expanded]=\"isExpanded('debug')\" [class.has-error]=\"!!error()\">\n      <header class=\"qtp-header\" (click)=\"togglePanel('debug')\">\n        <div class=\"qtp-header-left\">\n          <mat-icon class=\"qtp-header-icon\">bug_report</mat-icon>\n          <span class=\"qtp-header-title\">Debug</span>\n          @if (error()) {\n            <span class=\"qtp-debug-badge\">Error</span>\n          }\n        </div>\n      </header>\n      <div class=\"qtp-body\" [class.open]=\"isExpanded('debug')\">\n        <div class=\"qtp-content qtp-debug-content\">\n          <frames-qtp-v2-debug-content [error]=\"error()\" [debugLogs]=\"debugLogs()\" />\n        </div>\n      </div>\n    </section>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:hidden;touch-action:pan-y}.qtp-query-hidden{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.qtp-presentation{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:hidden}.qtp-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:auto}.qtp-panel{background:#121216f2;overflow:hidden;display:flex;flex-direction:column;margin:0;border:none;border-bottom:1px solid rgba(255,255,255,.06);transition:flex .3s ease,background .2s ease}.qtp-panel:last-child{border-bottom:none}.qtp-panel:not(.expanded){flex:0 0 auto}.qtp-panel.expanded{flex:1 1 0;min-height:120px;background:#16161cfa}.qtp-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:44px;cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff05;transition:background .2s ease}.qtp-header:hover{background:#ffffff0d}.expanded>.qtp-header{background:#ffffff0a;border-bottom:1px solid rgba(255,255,255,.08)}.qtp-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.qtp-header-icon{font-size:18px!important;width:18px!important;height:18px!important;color:#ffffff80;transition:color .2s ease}.expanded .qtp-header-icon{color:#64b4ffe6}.qtp-header-title{font-size:13px;font-weight:500;letter-spacing:.2px;color:#fff9;transition:color .2s ease}.expanded .qtp-header-title{color:#ffffffe6}.qtp-header-right{display:flex;align-items:center;gap:10px}.qtp-body{display:flex;flex-direction:column;overflow:auto;flex:0;max-height:0;transition:max-height .3s ease,flex .3s ease}.qtp-body.open{flex:1;max-height:9999px}.qtp-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;padding:0;cursor:text;-webkit-user-select:text;user-select:text}.qtp-debug-panel.has-error .qtp-header{background:#f4433614}.qtp-debug-panel.has-error .qtp-header-icon{color:#f44336!important}.qtp-debug-badge{font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:#f4433633;color:#ff8a80;margin-left:8px}.qtp-debug-content{padding:12px 16px;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px}mat-spinner{margin:0}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], expandedPanels: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedPanels", required: false }] }], availableTransformers: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTransformers", required: false }] }], selectedTransformer: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTransformer", required: false }] }], availablePresenters: [{ type: i0.Input, args: [{ isSignal: true, alias: "availablePresenters", required: false }] }], selectedPresenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPresenter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], debugLogs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugLogs", required: false }] }], canGenerateTransformer: [{ type: i0.Input, args: [{ isSignal: true, alias: "canGenerateTransformer", required: false }] }], generatingTransformer: [{ type: i0.Input, args: [{ isSignal: true, alias: "generatingTransformer", required: false }] }], panelStatesChange: [{ type: i0.Output, args: ["panelStatesChange"] }], transformerSelected: [{ type: i0.Output, args: ["transformerSelected"] }], presenterSelected: [{ type: i0.Output, args: ["presenterSelected"] }], runTransformer: [{ type: i0.Output, args: ["runTransformer"] }], generateTransformer: [{ type: i0.Output, args: ["generateTransformer"] }], queryTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => QuerySectionDirective), { isSignal: true }] }], transformerTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TransformerSectionDirective), { isSignal: true }] }], presenterTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PresenterSectionDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PresenterSectionDirective, QtpV2Frame, QuerySectionDirective, TransformerSectionDirective };

package/fesm2022/xxmachina-components-groups-query-form.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { buildClientSchema } from 'graphql';
 import { EditorComponent } from '@ng-atomic/components/extras/editor';
 import { NgAtomicComponent } from '@ng-atomic/core';
 import { TextInputSectionOrganism } from '@ng-atomic/components/organisms/text-input-section';
@@ -8,13 +7,24 @@ import { TabsFrame } from '@ng-atomic/components/frames/tabs';
 import { json } from '@codemirror/lang-json';
 import { javascript } from '@codemirror/lang-javascript';
 import { Resource } from '@xxmachina/common/domain/models';
-import { graphql } from 'cm6-graphql';
 import { QueryFeature, QueryGraphqlSchemaFeature } from '@xxmachina/components/features/query';
 import { injectAll } from '@ng-atomic/common/stores/entities';
-import { HttpClient } from '@angular/common/http';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { derivedAsync } from 'ngxtension/derived-async';
 import { getValue$ } from '@ng-atomic/common/utils';
+import { buildClientSchema } from 'graphql';
+import { graphql } from 'cm6-graphql';
+
+function toGraphqlSchemaExtensions(schema) {
+    if (!schema)
+        return [];
+    try {
+        return [graphql(buildClientSchema(schema))];
+    }
+    catch (error) {
+        console.warn('[QueryFormGroup] introspection から schema を組めないので補完なしにする', error);
+        return [];
+    }
+}
 
 class QueryFormGroup extends NgAtomicComponent {
     #feature = inject(QueryFeature);
@@ -34,14 +44,9 @@ class QueryFormGroup extends NgAtomicComponent {
             .map(resource => resource.graphql.url)
             .filter(url => url.startsWith(query.graphql.endpoint));
     }, ...(ngDevMode ? [{ debugName: "endpointAutoCompleteOptions" }] : []));
-    queryExtensions = computed(() => {
-        const schema = this.graphqlSchemaFeature.graphqlSchema();
-        return schema ? [graphql(buildClientSchema(schema))] : [];
-    }, ...(ngDevMode ? [{ debugName: "queryExtensions" }] : []));
+    queryExtensions = computed(() => toGraphqlSchemaExtensions(this.graphqlSchemaFeature.graphqlSchema()), ...(ngDevMode ? [{ debugName: "queryExtensions" }] : []));
     variablesExtensions = computed(() => [json()], ...(ngDevMode ? [{ debugName: "variablesExtensions" }] : []));
     headersExtensions = computed(() => [json()], ...(ngDevMode ? [{ debugName: "headersExtensions" }] : []));
-    http = inject(HttpClient);
-    libFile = toSignal(this.http.get('https://unpkg.com/typescript@latest/lib/lib.es5.d.ts', { responseType: 'text' }));
     transformerExtensions = computed(() => [
         javascript({ typescript: true })
     ], ...(ngDevMode ? [{ debugName: "transformerExtensions" }] : []));

package/fesm2022/xxmachina-components-molecules-weekly-header.mjs

@@ -12,7 +12,7 @@ class WeeklyHeaderMolecule {
       <span>{{ day }}</span>
     </div>
   }
-  `, isInline: true, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-flSuBLFd: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-flSuBLFd: var(--secondary-color)}:host{display:grid;width:100%;grid-template-columns:repeat(7,1fr);background-color:var(--primary-color-SCOPED-IN-flSuBLFd)}:host .day-container{display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;width:calc(hvar(--width) / 7)}\n"] });
+  `, isInline: true, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-lj7vioLh: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-lj7vioLh: var(--secondary-color)}:host{display:grid;width:100%;grid-template-columns:repeat(7,1fr);background-color:var(--primary-color-SCOPED-IN-lj7vioLh)}:host .day-container{display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;width:calc(hvar(--width) / 7)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WeeklyHeaderMolecule, decorators: [{
             type: Component,
@@ -22,7 +22,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       <span>{{ day }}</span>
     </div>
   }
-  `, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-flSuBLFd: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-flSuBLFd: var(--secondary-color)}:host{display:grid;width:100%;grid-template-columns:repeat(7,1fr);background-color:var(--primary-color-SCOPED-IN-flSuBLFd)}:host .day-container{display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;width:calc(hvar(--width) / 7)}\n"] }]
+  `, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-lj7vioLh: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-lj7vioLh: var(--secondary-color)}:host{display:grid;width:100%;grid-template-columns:repeat(7,1fr);background-color:var(--primary-color-SCOPED-IN-lj7vioLh)}:host .day-container{display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;width:calc(hvar(--width) / 7)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/xxmachina-components-organisms-calendar-section.mjs

@@ -56,7 +56,7 @@ class CalendarSectionOrganism {
       }
     }
   </div>
-  `, isInline: true, styles: [":host{display:block;--row: 80px;--row-SCOPED-IN-4T3PiWm0: var(--row);--row-num: 0;--row-num-SCOPED-IN-4T3PiWm0: var(--row-num);--border-color: #9E9E9E;--border-color-SCOPED-IN-4T3PiWm0: var(--border-color);--primary-color: #404040;--primary-color-SCOPED-IN-4T3PiWm0: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-4T3PiWm0: var(--secondary-color)}:host{width:100%;height:auto}:host .calendar.header molecules-weekly-header{--height: 32px}:host .calendar.contents{display:grid;width:var(--width);border:1px solid var(--border-color-SCOPED-IN-4T3PiWm0);grid-gap:1px;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(var(--row-num-SCOPED-IN-4T3PiWm0),var(--row-SCOPED-IN-4T3PiWm0));box-sizing:border-box;background-color:var(--border-color-SCOPED-IN-4T3PiWm0)}:host .calendar.contents molecules-daily-cell{--width: calc((var(--width) - 8px) / 7);--height: var(--row-SCOPED-IN-4T3PiWm0);background-color:#fff}:host .calendar.description{display:flex;justify-content:flex-end;width:var(--width);height:32px;padding-right:16px}:host .calendar.description .description.container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px}:host .calendar.description .description.container .circle{display:flex;width:20px;height:20px;justify-content:center;align-items:center;border-radius:50%;color:#fff;background:#00f}:host .calendar.description .description.container label{padding-left:4px;padding-right:8px}\n"], dependencies: [{ kind: "component", type: DailyCellMolecule, selector: "molecules-daily-cell", inputs: ["date", "schedules", "displayDate", "noSchedulesText", "toolTipText", "marked", "markingColor"] }, { kind: "component", type: WeeklyHeaderMolecule, selector: "molecules-weekly-header" }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;--row: 80px;--row-SCOPED-IN-W0RojslK: var(--row);--row-num: 0;--row-num-SCOPED-IN-W0RojslK: var(--row-num);--border-color: #9E9E9E;--border-color-SCOPED-IN-W0RojslK: var(--border-color);--primary-color: #404040;--primary-color-SCOPED-IN-W0RojslK: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-W0RojslK: var(--secondary-color)}:host{width:100%;height:auto}:host .calendar.header molecules-weekly-header{--height: 32px}:host .calendar.contents{display:grid;width:var(--width);border:1px solid var(--border-color-SCOPED-IN-W0RojslK);grid-gap:1px;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(var(--row-num-SCOPED-IN-W0RojslK),var(--row-SCOPED-IN-W0RojslK));box-sizing:border-box;background-color:var(--border-color-SCOPED-IN-W0RojslK)}:host .calendar.contents molecules-daily-cell{--width: calc((var(--width) - 8px) / 7);--height: var(--row-SCOPED-IN-W0RojslK);background-color:#fff}:host .calendar.description{display:flex;justify-content:flex-end;width:var(--width);height:32px;padding-right:16px}:host .calendar.description .description.container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px}:host .calendar.description .description.container .circle{display:flex;width:20px;height:20px;justify-content:center;align-items:center;border-radius:50%;color:#fff;background:#00f}:host .calendar.description .description.container label{padding-left:4px;padding-right:8px}\n"], dependencies: [{ kind: "component", type: DailyCellMolecule, selector: "molecules-daily-cell", inputs: ["date", "schedules", "displayDate", "noSchedulesText", "toolTipText", "marked", "markingColor"] }, { kind: "component", type: WeeklyHeaderMolecule, selector: "molecules-weekly-header" }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CalendarSectionOrganism, decorators: [{
             type: Component,
@@ -90,7 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       }
     }
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--row: 80px;--row-SCOPED-IN-4T3PiWm0: var(--row);--row-num: 0;--row-num-SCOPED-IN-4T3PiWm0: var(--row-num);--border-color: #9E9E9E;--border-color-SCOPED-IN-4T3PiWm0: var(--border-color);--primary-color: #404040;--primary-color-SCOPED-IN-4T3PiWm0: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-4T3PiWm0: var(--secondary-color)}:host{width:100%;height:auto}:host .calendar.header molecules-weekly-header{--height: 32px}:host .calendar.contents{display:grid;width:var(--width);border:1px solid var(--border-color-SCOPED-IN-4T3PiWm0);grid-gap:1px;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(var(--row-num-SCOPED-IN-4T3PiWm0),var(--row-SCOPED-IN-4T3PiWm0));box-sizing:border-box;background-color:var(--border-color-SCOPED-IN-4T3PiWm0)}:host .calendar.contents molecules-daily-cell{--width: calc((var(--width) - 8px) / 7);--height: var(--row-SCOPED-IN-4T3PiWm0);background-color:#fff}:host .calendar.description{display:flex;justify-content:flex-end;width:var(--width);height:32px;padding-right:16px}:host .calendar.description .description.container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px}:host .calendar.description .description.container .circle{display:flex;width:20px;height:20px;justify-content:center;align-items:center;border-radius:50%;color:#fff;background:#00f}:host .calendar.description .description.container label{padding-left:4px;padding-right:8px}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--row: 80px;--row-SCOPED-IN-W0RojslK: var(--row);--row-num: 0;--row-num-SCOPED-IN-W0RojslK: var(--row-num);--border-color: #9E9E9E;--border-color-SCOPED-IN-W0RojslK: var(--border-color);--primary-color: #404040;--primary-color-SCOPED-IN-W0RojslK: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-W0RojslK: var(--secondary-color)}:host{width:100%;height:auto}:host .calendar.header molecules-weekly-header{--height: 32px}:host .calendar.contents{display:grid;width:var(--width);border:1px solid var(--border-color-SCOPED-IN-W0RojslK);grid-gap:1px;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(var(--row-num-SCOPED-IN-W0RojslK),var(--row-SCOPED-IN-W0RojslK));box-sizing:border-box;background-color:var(--border-color-SCOPED-IN-W0RojslK)}:host .calendar.contents molecules-daily-cell{--width: calc((var(--width) - 8px) / 7);--height: var(--row-SCOPED-IN-W0RojslK);background-color:#fff}:host .calendar.description{display:flex;justify-content:flex-end;width:var(--width);height:32px;padding-right:16px}:host .calendar.description .description.container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px}:host .calendar.description .description.container .circle{display:flex;width:20px;height:20px;justify-content:center;align-items:center;border-radius:50%;color:#fff;background:#00f}:host .calendar.description .description.container label{padding-left:4px;padding-right:8px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], displayDays: [{

package/fesm2022/xxmachina-components-organisms-xterm.mjs

@@ -5,6 +5,20 @@ import { FitAddon } from '@xterm/addon-fit';
 import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
 import { makeDI } from '@ng-atomic/common/services/ui';
 
+function cellColumnOf(buffer, line, stringIndex) {
+    const cell = buffer.getNullCell();
+    let consumed = 0;
+    for (let x = 0; x < line.length; x++) {
+        line.getCell(x, cell);
+        if (!cell.getWidth())
+            continue;
+        consumed += cell.getChars().length || 1;
+        if (stringIndex < consumed)
+            return x;
+    }
+    return line.length;
+}
+
 const URL_REGEX = /https?:\/\/[^\s<>'")\[\]]+/g;
 const LOCALHOST_REGEX = /^https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?(?:\/|$)/;
 const MAX_SCAN_LINES = 30;
@@ -45,11 +59,15 @@ class WebLinkProvider {
             const endPos = this._offsetToPos(match.index + match[0].length - 1, startY, lineTexts);
             if (!startPos || !endPos)
                 continue;
+            const startLine = buffer.getLine(startPos.y);
+            const endLine = buffer.getLine(endPos.y);
+            if (!startLine || !endLine)
+                continue;
             links.push({
                 text: match[0],
                 range: {
-                    start: { x: startPos.x + 1, y: startPos.y + 1 },
-                    end: { x: endPos.x + 1, y: endPos.y + 1 },
+                    start: { x: cellColumnOf(buffer, startLine, startPos.x) + 1, y: startPos.y + 1 },
+                    end: { x: cellColumnOf(buffer, endLine, endPos.x + 1), y: endPos.y + 1 },
                 },
                 activate: (event, text) => this._handler?.(event, text),
             });
@@ -437,7 +455,8 @@ class ProxyLinkProvider {
     }
     provideLinks(bufferLineNumber, callback) {
         const lineIndex = bufferLineNumber - 1;
-        const line = this._terminal.buffer.active.getLine(lineIndex);
+        const buffer = this._terminal.buffer.active;
+        const line = buffer.getLine(lineIndex);
         if (!line) {
             callback(undefined);
             return;
@@ -451,8 +470,8 @@ class ProxyLinkProvider {
             const matchedUrl = match[0];
             const port = match[1] || '80';
             const path = match[2] || '/';
-            const startX = match.index + 1;
-            const endX = match.index + matchedUrl.length;
+            const startX = cellColumnOf(buffer, line, match.index) + 1;
+            const endX = cellColumnOf(buffer, line, match.index + matchedUrl.length);
             links.push({
                 text: matchedUrl,
                 range: {
@@ -559,14 +578,18 @@ class PortLinkProvider {
         const buf = this._terminal.buffer.active;
         const textAt = (i) => buf.getLine(i)?.translateToString(true);
         const lineIndex = bufferLineNumber - 1;
+        const line = buf.getLine(lineIndex);
         const text = textAt(lineIndex);
-        if (text === undefined || !isPortsSectionRow(textAt, lineIndex)) {
+        if (!line || text === undefined || !isPortsSectionRow(textAt, lineIndex)) {
             callback(undefined);
             return;
         }
         const links = portTokensOf(text).map(({ port, start, end }) => ({
             text: String(port),
-            range: { start: { x: start + 1, y: bufferLineNumber }, end: { x: end, y: bufferLineNumber } },
+            range: {
+                start: { x: cellColumnOf(buf, line, start) + 1, y: bufferLineNumber },
+                end: { x: cellColumnOf(buf, line, end), y: bufferLineNumber },
+            },
             activate: (event) => this._handler(event, port),
         }));
         callback(links.length > 0 ? links : undefined);

package/fesm2022/xxmachina-components-pages-command.mjs

@@ -410,7 +410,7 @@ class CommandPage extends NgAtomicComponent {
       </frames-tabs> 
     </templates-form>
   </frames-router-outlet>
-  `, isInline: true, styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-JzK6: var(--page-width-lv1);--primary-color-SCOPED-IN-command-JzK6: var(--primary-color);--on-primary-color-SCOPED-IN-command-JzK6: var(--on-primary-color);--background-color-SCOPED-IN-command-JzK6: var(--background-color);--on-background-color-SCOPED-IN-command-JzK6: var(--on-background-color)}:host templates-form{padding-left:0;box-sizing:border-box;transition:padding-left .3s}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-JzK6)}:host .template div[dashboard]{padding:0;box-sizing:border-box}:host *{--primary-color: var(--primary-color-SCOPED-IN-command-JzK6);--on-primary-color: var(--on-primary-color-SCOPED-IN-command-JzK6);--background-color: var(--background-color-SCOPED-IN-command-JzK6);--on-background-color: var(--on-background-color-SCOPED-IN-command-JzK6)}\n"], dependencies: [{ kind: "component", type: RouterOutletFrame, selector: "frames-router-outlet", outputs: ["events"] }, { kind: "component", type: FormTemplate, selector: "templates-form" }, { kind: "component", type: TabsFrame, selector: "frames-tabs", inputs: ["labels"], outputs: ["selectedTabIndexChange"] }, { kind: "component", type: CommandFormGroup, selector: "groups-command-form", inputs: ["apiJsonUrls"] }, { kind: "component", type: QueryFormGroup, selector: "groups-query-form", inputs: ["form", "keyActions"] }] });
+  `, isInline: true, styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-MshU: var(--page-width-lv1);--primary-color-SCOPED-IN-command-MshU: var(--primary-color);--on-primary-color-SCOPED-IN-command-MshU: var(--on-primary-color);--background-color-SCOPED-IN-command-MshU: var(--background-color);--on-background-color-SCOPED-IN-command-MshU: var(--on-background-color)}:host templates-form{padding-left:0;box-sizing:border-box;transition:padding-left .3s}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-MshU)}:host .template div[dashboard]{padding:0;box-sizing:border-box}:host *{--primary-color: var(--primary-color-SCOPED-IN-command-MshU);--on-primary-color: var(--on-primary-color-SCOPED-IN-command-MshU);--background-color: var(--background-color-SCOPED-IN-command-MshU);--on-background-color: var(--on-background-color-SCOPED-IN-command-MshU)}\n"], dependencies: [{ kind: "component", type: RouterOutletFrame, selector: "frames-router-outlet", outputs: ["events"] }, { kind: "component", type: FormTemplate, selector: "templates-form" }, { kind: "component", type: TabsFrame, selector: "frames-tabs", inputs: ["labels"], outputs: ["selectedTabIndexChange"] }, { kind: "component", type: CommandFormGroup, selector: "groups-command-form", inputs: ["apiJsonUrls"] }, { kind: "component", type: QueryFormGroup, selector: "groups-query-form", inputs: ["form", "keyActions"] }] });
 }
 __decorate([
     Effect(FormTemplateStore.ActionId.FILE_SELECTED),
@@ -473,7 +473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                                 'actions',
                             ]
                         },
-                    ], styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-JzK6: var(--page-width-lv1);--primary-color-SCOPED-IN-command-JzK6: var(--primary-color);--on-primary-color-SCOPED-IN-command-JzK6: var(--on-primary-color);--background-color-SCOPED-IN-command-JzK6: var(--background-color);--on-background-color-SCOPED-IN-command-JzK6: var(--on-background-color)}:host templates-form{padding-left:0;box-sizing:border-box;transition:padding-left .3s}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-JzK6)}:host .template div[dashboard]{padding:0;box-sizing:border-box}:host *{--primary-color: var(--primary-color-SCOPED-IN-command-JzK6);--on-primary-color: var(--on-primary-color-SCOPED-IN-command-JzK6);--background-color: var(--background-color-SCOPED-IN-command-JzK6);--on-background-color: var(--on-background-color-SCOPED-IN-command-JzK6)}\n"] }]
+                    ], styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-MshU: var(--page-width-lv1);--primary-color-SCOPED-IN-command-MshU: var(--primary-color);--on-primary-color-SCOPED-IN-command-MshU: var(--on-primary-color);--background-color-SCOPED-IN-command-MshU: var(--background-color);--on-background-color-SCOPED-IN-command-MshU: var(--on-background-color)}:host templates-form{padding-left:0;box-sizing:border-box;transition:padding-left .3s}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-MshU)}:host .template div[dashboard]{padding:0;box-sizing:border-box}:host *{--primary-color: var(--primary-color-SCOPED-IN-command-MshU);--on-primary-color: var(--on-primary-color-SCOPED-IN-command-MshU);--background-color: var(--background-color-SCOPED-IN-command-MshU);--on-background-color: var(--on-background-color-SCOPED-IN-command-MshU)}\n"] }]
         }], propDecorators: { onFileSelected: [] } });
 
 /**