@myrmidon/gve-core 2.0.0 → 3.0.2

package/fesm2022/myrmidon-gve-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, Injectable, Optional, Inject, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { model, input, output, effect, Component, ViewChild, Injectable, Optional, Inject, computed, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormControl, FormGroup, FormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
@@ -18,7 +18,7 @@ import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i8 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i15 from '@angular/material/tabs';
+import * as i16 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i10 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -35,17 +35,20 @@ import * as i1$1 from '@angular/common/http';
 import { filter, debounceTime as debounceTime$1 } from 'rxjs/operators';
 import * as i2$3 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i16 from '@cisstech/nge/monaco';
+import * as i6$1 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i17 from '@cisstech/nge/monaco';
 import { NgeMonacoModule } from '@cisstech/nge/monaco';
 import { customAlphabet } from 'nanoid';
+import { VizComponent } from '@myrmidon/ngx-viz';
+import * as i4$2 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i8$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i13 from '@angular/material/progress-bar';
+import * as i14 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i14 from '@angular/material/slider';
+import * as i15 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
-import * as i5$2 from '@angular/material/snack-bar';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 /**
  * 🔑 `gve-animation-tween`
@@ -59,28 +62,24 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
  * - 🔥 `tweenCancel` (`void`): emitted when the user cancels the edit.
  */
 class AnimationTweenComponent {
-    /**
-     * The tween to edit.
-     */
-    get tween() {
-        return this._tween;
-    }
-    set tween(value) {
-        if (this._tween === value) {
-            return;
-        }
-        this._tween = value || undefined;
-        this.updateForm(this._tween);
-    }
     constructor(formBuilder) {
+        /**
+         * The tween to edit.
+         */
+        this.tween = model();
+        /**
+         * The IDs of the elements that can be selected by the tween.
+         * This list is used to allow the user to select an element from a dropdown.
+         */
+        this.elementIds = input();
         /**
          * Emitted when the tween is changed.
          */
-        this.tweenChange = new EventEmitter();
+        this.tweenChange = output();
         /**
          * Emitted when the user cancels the edit.
          */
-        this.tweenCancel = new EventEmitter();
+        this.tweenCancel = output();
         this.types = ['to', 'from', 'fromTo', 'set'];
         this.label = formBuilder.control('', {
             nonNullable: true,
@@ -108,6 +107,9 @@ class AnimationTweenComponent {
             position: this.position,
         });
         this.elementId = formBuilder.control(null);
+        effect(() => {
+            this.updateForm(this.tween());
+        });
     }
     ngOnInit() {
         // set selector when elementId changes
@@ -179,13 +181,13 @@ class AnimationTweenComponent {
         if (!this.form.valid) {
             return;
         }
-        this._tween = this.getTween();
-        this.tweenChange.emit(this._tween);
+        this.tween.set(this.getTween());
+        this.tweenChange.emit(this.tween());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AnimationTweenComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AnimationTweenComponent, isStandalone: true, selector: "gve-animation-tween", inputs: { tween: "tween", elementIds: "elementIds" }, outputs: { tweenChange: "tweenChange", tweenCancel: "tweenCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- label -->\r\n    <mat-form-field>\r\n      <mat-label>label</mat-label>\r\n      <input matInput [formControl]=\"label\" />\r\n      <mat-error\r\n        *ngIf=\"$any(label).errors?.required && (label.dirty || label.touched)\"\r\n        >label required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(label).errors?.maxLength && (label.dirty || label.touched)\"\r\n        >label too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n\r\n    <!-- type -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <!-- position -->\r\n    <mat-form-field>\r\n      <mat-label>position</mat-label>\r\n      <input matInput [formControl]=\"position\" />\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matSuffix\r\n        [attr.aria-label]=\"'Information about position'\"\r\n        (click)=\"\r\n          openUrl(\r\n            'https://gsap.com/docs/v3/GSAP/Timeline/#positioning-animations-in-a-timeline'\r\n          )\r\n        \"\r\n      >\r\n        <mat-icon>info</mat-icon>\r\n      </button>\r\n      <mat-hint>time label &lt; &gt; += -=</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(position).errors?.maxLength &&\r\n          (position.dirty || position.touched)\r\n        \"\r\n        >position too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- selector -->\r\n    <mat-form-field>\r\n      <mat-label>selector</mat-label>\r\n      <input matInput [formControl]=\"selector\" />\r\n      <mat-hint>CSS selector</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(selector).errors?.required &&\r\n          (selector.dirty || selector.touched)\r\n        \"\r\n        >selector required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(selector).errors?.maxLength &&\r\n          (selector.dirty || selector.touched)\r\n        \"\r\n        >selector too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n\r\n    <!-- element id -->\r\n    @if (elementIds?.length) {\r\n    <mat-form-field>\r\n      <mat-label>element ID</mat-label>\r\n      <mat-select [formControl]=\"elementId\">\r\n        <mat-option *ngFor=\"let id of elementIds\" [value]=\"id\">{{\r\n          id\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n  </div>\r\n\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea rows=\"2\" matInput [formControl]=\"note\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"$any(note).errors?.maxLength && (note.dirty || note.touched)\"\r\n        >note too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- vars -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"$any(vars).errors?.required && (vars.dirty || vars.touched)\"\r\n        >vars required</mat-error\r\n      >\r\n      <mat-error *ngIf=\"$any(vars).errors?.json && (vars.dirty || vars.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- vars2 only when type is fromTo -->\r\n  @if (type.value === 'fromTo') {\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>2nd vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars2\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"$any(vars2).errors?.required && (vars2.dirty || vars2.touched)\"\r\n        >vars required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(vars2).errors?.json && (vars2.dirty || vars2.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  }\r\n\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Close tween\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Save tween\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AnimationTweenComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: AnimationTweenComponent, isStandalone: true, selector: "gve-animation-tween", inputs: { tween: { classPropertyName: "tween", publicName: "tween", isSignal: true, isRequired: false, transformFunction: null }, elementIds: { classPropertyName: "elementIds", publicName: "elementIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tween: "tweenChange", tweenChange: "tweenChange", tweenCancel: "tweenCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- label -->\r\n    <mat-form-field>\r\n      <mat-label>label</mat-label>\r\n      <input matInput [formControl]=\"label\" />\r\n      <mat-error\r\n        *ngIf=\"$any(label).errors?.required && (label.dirty || label.touched)\"\r\n        >label required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(label).errors?.maxLength && (label.dirty || label.touched)\"\r\n        >label too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n\r\n    <!-- type -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <!-- position -->\r\n    <mat-form-field>\r\n      <mat-label>position</mat-label>\r\n      <input matInput [formControl]=\"position\" />\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matSuffix\r\n        [attr.aria-label]=\"'Information about position'\"\r\n        (click)=\"\r\n          openUrl(\r\n            'https://gsap.com/docs/v3/GSAP/Timeline/#positioning-animations-in-a-timeline'\r\n          )\r\n        \"\r\n      >\r\n        <mat-icon>info</mat-icon>\r\n      </button>\r\n      <mat-hint>time label &lt; &gt; += -=</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(position).errors?.maxLength &&\r\n          (position.dirty || position.touched)\r\n        \"\r\n        >position too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- selector -->\r\n    <mat-form-field>\r\n      <mat-label>selector</mat-label>\r\n      <input matInput [formControl]=\"selector\" />\r\n      <mat-hint>CSS selector</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(selector).errors?.required &&\r\n          (selector.dirty || selector.touched)\r\n        \"\r\n        >selector required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(selector).errors?.maxLength &&\r\n          (selector.dirty || selector.touched)\r\n        \"\r\n        >selector too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n\r\n    <!-- element id -->\r\n    @if ((elementIds())?.length) {\r\n    <mat-form-field>\r\n      <mat-label>element ID</mat-label>\r\n      <mat-select [formControl]=\"elementId\">\r\n        <mat-option *ngFor=\"let id of elementIds()\" [value]=\"id\">{{\r\n          id\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n  </div>\r\n\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea rows=\"2\" matInput [formControl]=\"note\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"$any(note).errors?.maxLength && (note.dirty || note.touched)\"\r\n        >note too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- vars -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"$any(vars).errors?.required && (vars.dirty || vars.touched)\"\r\n        >vars required</mat-error\r\n      >\r\n      <mat-error *ngIf=\"$any(vars).errors?.json && (vars.dirty || vars.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- vars2 only when type is fromTo -->\r\n  @if (type.value === 'fromTo') {\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>2nd vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars2\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"$any(vars2).errors?.required && (vars2.dirty || vars2.touched)\"\r\n        >vars required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(vars2).errors?.json && (vars2.dirty || vars2.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  }\r\n\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Close tween\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Save tween\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AnimationTweenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AnimationTweenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-animation-tween', imports: [
                         CommonModule,
@@ -198,16 +200,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatSelectModule,
                         MatTabsModule,
                         MatTooltipModule,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- label -->\r\n    <mat-form-field>\r\n      <mat-label>label</mat-label>\r\n      <input matInput [formControl]=\"label\" />\r\n      <mat-error\r\n        *ngIf=\"$any(label).errors?.required && (label.dirty || label.touched)\"\r\n        >label required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(label).errors?.maxLength && (label.dirty || label.touched)\"\r\n        >label too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n\r\n    <!-- type -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <!-- position -->\r\n    <mat-form-field>\r\n      <mat-label>position</mat-label>\r\n      <input matInput [formControl]=\"position\" />\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matSuffix\r\n        [attr.aria-label]=\"'Information about position'\"\r\n        (click)=\"\r\n          openUrl(\r\n            'https://gsap.com/docs/v3/GSAP/Timeline/#positioning-animations-in-a-timeline'\r\n          )\r\n        \"\r\n      >\r\n        <mat-icon>info</mat-icon>\r\n      </button>\r\n      <mat-hint>time label &lt; &gt; += -=</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(position).errors?.maxLength &&\r\n          (position.dirty || position.touched)\r\n        \"\r\n        >position too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- selector -->\r\n    <mat-form-field>\r\n      <mat-label>selector</mat-label>\r\n      <input matInput [formControl]=\"selector\" />\r\n      <mat-hint>CSS selector</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(selector).errors?.required &&\r\n          (selector.dirty || selector.touched)\r\n        \"\r\n        >selector required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(selector).errors?.maxLength &&\r\n          (selector.dirty || selector.touched)\r\n        \"\r\n        >selector too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n\r\n    <!-- element id -->\r\n    @if (elementIds?.length) {\r\n    <mat-form-field>\r\n      <mat-label>element ID</mat-label>\r\n      <mat-select [formControl]=\"elementId\">\r\n        <mat-option *ngFor=\"let id of elementIds\" [value]=\"id\">{{\r\n          id\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n  </div>\r\n\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea rows=\"2\" matInput [formControl]=\"note\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"$any(note).errors?.maxLength && (note.dirty || note.touched)\"\r\n        >note too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- vars -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"$any(vars).errors?.required && (vars.dirty || vars.touched)\"\r\n        >vars required</mat-error\r\n      >\r\n      <mat-error *ngIf=\"$any(vars).errors?.json && (vars.dirty || vars.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- vars2 only when type is fromTo -->\r\n  @if (type.value === 'fromTo') {\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>2nd vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars2\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"$any(vars2).errors?.required && (vars2.dirty || vars2.touched)\"\r\n        >vars required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(vars2).errors?.json && (vars2.dirty || vars2.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  }\r\n\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Close tween\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Save tween\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { tween: [{
-                type: Input
-            }], elementIds: [{
-                type: Input
-            }], tweenChange: [{
-                type: Output
-            }], tweenCancel: [{
-                type: Output
-            }] } });
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- label -->\r\n    <mat-form-field>\r\n      <mat-label>label</mat-label>\r\n      <input matInput [formControl]=\"label\" />\r\n      <mat-error\r\n        *ngIf=\"$any(label).errors?.required && (label.dirty || label.touched)\"\r\n        >label required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(label).errors?.maxLength && (label.dirty || label.touched)\"\r\n        >label too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n\r\n    <!-- type -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <!-- position -->\r\n    <mat-form-field>\r\n      <mat-label>position</mat-label>\r\n      <input matInput [formControl]=\"position\" />\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matSuffix\r\n        [attr.aria-label]=\"'Information about position'\"\r\n        (click)=\"\r\n          openUrl(\r\n            'https://gsap.com/docs/v3/GSAP/Timeline/#positioning-animations-in-a-timeline'\r\n          )\r\n        \"\r\n      >\r\n        <mat-icon>info</mat-icon>\r\n      </button>\r\n      <mat-hint>time label &lt; &gt; += -=</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(position).errors?.maxLength &&\r\n          (position.dirty || position.touched)\r\n        \"\r\n        >position too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- selector -->\r\n    <mat-form-field>\r\n      <mat-label>selector</mat-label>\r\n      <input matInput [formControl]=\"selector\" />\r\n      <mat-hint>CSS selector</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(selector).errors?.required &&\r\n          (selector.dirty || selector.touched)\r\n        \"\r\n        >selector required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(selector).errors?.maxLength &&\r\n          (selector.dirty || selector.touched)\r\n        \"\r\n        >selector too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n\r\n    <!-- element id -->\r\n    @if ((elementIds())?.length) {\r\n    <mat-form-field>\r\n      <mat-label>element ID</mat-label>\r\n      <mat-select [formControl]=\"elementId\">\r\n        <mat-option *ngFor=\"let id of elementIds()\" [value]=\"id\">{{\r\n          id\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n  </div>\r\n\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea rows=\"2\" matInput [formControl]=\"note\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"$any(note).errors?.maxLength && (note.dirty || note.touched)\"\r\n        >note too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- vars -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"$any(vars).errors?.required && (vars.dirty || vars.touched)\"\r\n        >vars required</mat-error\r\n      >\r\n      <mat-error *ngIf=\"$any(vars).errors?.json && (vars.dirty || vars.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- vars2 only when type is fromTo -->\r\n  @if (type.value === 'fromTo') {\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>2nd vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars2\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error\r\n        *ngIf=\"$any(vars2).errors?.required && (vars2.dirty || vars2.touched)\"\r\n        >vars required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(vars2).errors?.json && (vars2.dirty || vars2.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  }\r\n\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Close tween\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Save tween\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 /**
  * 🔑 `gve-animation-timeline`
@@ -224,29 +218,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * - 🔥 `timelineCancel` (`void`): emitted when the timeline editing is canceled.
  */
 class AnimationTimelineComponent {
-    /**
-     * The animation timeline to edit.
-     */
-    get timeline() {
-        return this._timeline;
-    }
-    set timeline(value) {
-        this._timeline = value || undefined;
-        this.updateForm(this._timeline);
-    }
     constructor(formBuilder) {
+        /**
+         * The animation timeline to edit.
+         */
+        this.timeline = model();
+        /**
+         * The IDs of the elements that can be selected by the tween.
+         * This list is used to allow the user to select an element from a dropdown.
+         */
+        this.elementIds = input();
         /**
          * The tags that can be used by the timeline.
          */
-        this.tags = [];
+        this.tags = input([]);
         /**
          * Emitted when the timeline is changed.
          */
-        this.timelineChange = new EventEmitter();
+        this.timelineChange = output();
         /**
          * Emitted when the timeline editing is canceled.
          */
-        this.timelineCancel = new EventEmitter();
+        this.timelineCancel = output();
         this.editedTweenIndex = -1;
         this.tag = formBuilder.control('', {
             nonNullable: true,
@@ -262,6 +255,10 @@ class AnimationTimelineComponent {
             tweens: this.tweens,
             vars: this.vars,
         });
+        // when the timeline changes, update the form
+        effect(() => {
+            this.updateForm(this.timeline());
+        });
     }
     jsonValidator(control) {
         if (!control.value) {
@@ -355,14 +352,14 @@ class AnimationTimelineComponent {
         if (this.form.invalid) {
             return;
         }
-        this._timeline = this.getTimeline();
-        this.timelineChange.emit(this._timeline);
+        this.timeline.set(this.getTimeline());
+        this.timelineChange.emit(this.timeline());
         this.form.markAsPristine();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AnimationTimelineComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AnimationTimelineComponent, isStandalone: true, selector: "gve-animation-timeline", inputs: { timeline: "timeline", elementIds: "elementIds", tags: "tags" }, outputs: { timelineChange: "timelineChange", timelineCancel: "timelineCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- tag (bound) -->\r\n    @if (tags.length) {\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        @for (t of tags; track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- tag (free) -->\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <input matInput [formControl]=\"tag\" />\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.maxLength && (tag.dirty || tag.touched)\"\r\n        >tag too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n    }\r\n\r\n    <button\r\n      mat-flat-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      (click)=\"addTween()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon> tween\r\n    </button>\r\n  </div>\r\n\r\n  <!-- vars -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error *ngIf=\"$any(vars).errors?.json && (vars.dirty || vars.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- tweens -->\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>label</th>\r\n        <th>type</th>\r\n        <th>selector</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of tweens.value; track t; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            (click)=\"editTween(index)\"\r\n            matTooltip=\"Edit tween\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            (click)=\"deleteTween(index)\"\r\n            matTooltip=\"Delete tween\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n          <!-- up -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenUp(index)\"\r\n            matTooltip=\"Move tween up\"\r\n            [disabled]=\"index === 0\"\r\n          >\r\n            <mat-icon>arrow_circle_up</mat-icon>\r\n          </button>\r\n          <!-- down -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenDown(index)\"\r\n            matTooltip=\"Move tween down\"\r\n            [disabled]=\"index === tweens.value.length - 1\"\r\n          >\r\n            <mat-icon>arrow_circle_down</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          {{ t.label }}\r\n        </td>\r\n        <td>\r\n          {{ t.type }}\r\n        </td>\r\n        <td>\r\n          {{ t.selector }}\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <!-- tween editor -->\r\n  <mat-expansion-panel [expanded]=\"editedTween\" [disabled]=\"!editedTween\">\r\n    @if (editedTween) {\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>tween {{ editedTween.label }}</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    }\r\n    <fieldset>\r\n      <gve-animation-tween\r\n        [elementIds]=\"elementIds\"\r\n        [tween]=\"editedTween\"\r\n        (tweenChange)=\"saveTween($event)\"\r\n        (tweenCancel)=\"closeTween()\"\r\n      />\r\n    </fieldset>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"button-row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Close timeline\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save timeline\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n      timeline\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AnimationTweenComponent, selector: "gve-animation-tween", inputs: ["tween", "elementIds"], outputs: ["tweenChange", "tweenCancel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AnimationTimelineComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: AnimationTimelineComponent, isStandalone: true, selector: "gve-animation-timeline", inputs: { timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null }, elementIds: { classPropertyName: "elementIds", publicName: "elementIds", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeline: "timelineChange", timelineChange: "timelineChange", timelineCancel: "timelineCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- tag (bound) -->\r\n    @if (tags().length) {\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        @for (t of tags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- tag (free) -->\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <input matInput [formControl]=\"tag\" />\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.maxLength && (tag.dirty || tag.touched)\"\r\n        >tag too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n    }\r\n\r\n    <button\r\n      mat-flat-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      (click)=\"addTween()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon> tween\r\n    </button>\r\n  </div>\r\n\r\n  <!-- vars -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error *ngIf=\"$any(vars).errors?.json && (vars.dirty || vars.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- tweens -->\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>label</th>\r\n        <th>type</th>\r\n        <th>selector</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of tweens.value; track t; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            (click)=\"editTween(index)\"\r\n            matTooltip=\"Edit tween\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            (click)=\"deleteTween(index)\"\r\n            matTooltip=\"Delete tween\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n          <!-- up -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenUp(index)\"\r\n            matTooltip=\"Move tween up\"\r\n            [disabled]=\"index === 0\"\r\n          >\r\n            <mat-icon>arrow_circle_up</mat-icon>\r\n          </button>\r\n          <!-- down -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenDown(index)\"\r\n            matTooltip=\"Move tween down\"\r\n            [disabled]=\"index === tweens.value.length - 1\"\r\n          >\r\n            <mat-icon>arrow_circle_down</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          {{ t.label }}\r\n        </td>\r\n        <td>\r\n          {{ t.type }}\r\n        </td>\r\n        <td>\r\n          {{ t.selector }}\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <!-- tween editor -->\r\n  <mat-expansion-panel [expanded]=\"editedTween\" [disabled]=\"!editedTween\">\r\n    @if (editedTween) {\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>tween {{ editedTween.label }}</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    }\r\n    <fieldset>\r\n      <gve-animation-tween\r\n        [elementIds]=\"elementIds()\"\r\n        [tween]=\"editedTween\"\r\n        (tweenChange)=\"saveTween($event)\"\r\n        (tweenCancel)=\"closeTween()\"\r\n      />\r\n    </fieldset>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"button-row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Close timeline\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save timeline\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n      timeline\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AnimationTweenComponent, selector: "gve-animation-tween", inputs: ["tween", "elementIds"], outputs: ["tweenChange", "tweenCancel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AnimationTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AnimationTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-animation-timeline', imports: [
                         CommonModule,
@@ -377,18 +374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatTabsModule,
                         MatTooltipModule,
                         AnimationTweenComponent,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- tag (bound) -->\r\n    @if (tags.length) {\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        @for (t of tags; track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- tag (free) -->\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <input matInput [formControl]=\"tag\" />\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.maxLength && (tag.dirty || tag.touched)\"\r\n        >tag too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n    }\r\n\r\n    <button\r\n      mat-flat-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      (click)=\"addTween()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon> tween\r\n    </button>\r\n  </div>\r\n\r\n  <!-- vars -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error *ngIf=\"$any(vars).errors?.json && (vars.dirty || vars.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- tweens -->\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>label</th>\r\n        <th>type</th>\r\n        <th>selector</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of tweens.value; track t; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            (click)=\"editTween(index)\"\r\n            matTooltip=\"Edit tween\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            (click)=\"deleteTween(index)\"\r\n            matTooltip=\"Delete tween\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n          <!-- up -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenUp(index)\"\r\n            matTooltip=\"Move tween up\"\r\n            [disabled]=\"index === 0\"\r\n          >\r\n            <mat-icon>arrow_circle_up</mat-icon>\r\n          </button>\r\n          <!-- down -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenDown(index)\"\r\n            matTooltip=\"Move tween down\"\r\n            [disabled]=\"index === tweens.value.length - 1\"\r\n          >\r\n            <mat-icon>arrow_circle_down</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          {{ t.label }}\r\n        </td>\r\n        <td>\r\n          {{ t.type }}\r\n        </td>\r\n        <td>\r\n          {{ t.selector }}\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <!-- tween editor -->\r\n  <mat-expansion-panel [expanded]=\"editedTween\" [disabled]=\"!editedTween\">\r\n    @if (editedTween) {\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>tween {{ editedTween.label }}</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    }\r\n    <fieldset>\r\n      <gve-animation-tween\r\n        [elementIds]=\"elementIds\"\r\n        [tween]=\"editedTween\"\r\n        (tweenChange)=\"saveTween($event)\"\r\n        (tweenCancel)=\"closeTween()\"\r\n      />\r\n    </fieldset>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"button-row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Close timeline\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save timeline\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n      timeline\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { timeline: [{
-                type: Input
-            }], elementIds: [{
-                type: Input
-            }], tags: [{
-                type: Input
-            }], timelineChange: [{
-                type: Output
-            }], timelineCancel: [{
-                type: Output
-            }] } });
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- tag (bound) -->\r\n    @if (tags().length) {\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        @for (t of tags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- tag (free) -->\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <input matInput [formControl]=\"tag\" />\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.maxLength && (tag.dirty || tag.touched)\"\r\n        >tag too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n    }\r\n\r\n    <button\r\n      mat-flat-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      (click)=\"addTween()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon> tween\r\n    </button>\r\n  </div>\r\n\r\n  <!-- vars -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>vars</mat-label>\r\n      <textarea matInput [formControl]=\"vars\"></textarea>\r\n      <mat-hint>JSON object</mat-hint>\r\n      <mat-error *ngIf=\"$any(vars).errors?.json && (vars.dirty || vars.touched)\"\r\n        >invalid JSON</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- tweens -->\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>label</th>\r\n        <th>type</th>\r\n        <th>selector</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of tweens.value; track t; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            (click)=\"editTween(index)\"\r\n            matTooltip=\"Edit tween\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            (click)=\"deleteTween(index)\"\r\n            matTooltip=\"Delete tween\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n          <!-- up -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenUp(index)\"\r\n            matTooltip=\"Move tween up\"\r\n            [disabled]=\"index === 0\"\r\n          >\r\n            <mat-icon>arrow_circle_up</mat-icon>\r\n          </button>\r\n          <!-- down -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenDown(index)\"\r\n            matTooltip=\"Move tween down\"\r\n            [disabled]=\"index === tweens.value.length - 1\"\r\n          >\r\n            <mat-icon>arrow_circle_down</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          {{ t.label }}\r\n        </td>\r\n        <td>\r\n          {{ t.type }}\r\n        </td>\r\n        <td>\r\n          {{ t.selector }}\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <!-- tween editor -->\r\n  <mat-expansion-panel [expanded]=\"editedTween\" [disabled]=\"!editedTween\">\r\n    @if (editedTween) {\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>tween {{ editedTween.label }}</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    }\r\n    <fieldset>\r\n      <gve-animation-tween\r\n        [elementIds]=\"elementIds()\"\r\n        [tween]=\"editedTween\"\r\n        (tweenChange)=\"saveTween($event)\"\r\n        (tweenCancel)=\"closeTween()\"\r\n      />\r\n    </fieldset>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"button-row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Close timeline\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save timeline\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n      timeline\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 /**
  * 🔑 `gve-base-text-char`
@@ -401,34 +388,25 @@ class BaseTextCharComponent {
         this.defaultColor = '#D8D8D8';
         this.defaultBorderColor = '#D8D8D8';
         this.defaultEmSize = 1.5;
+        /**
+         * The character to display.
+         */
+        this.char = input();
         /**
          * Emitted when the character is clicked.
          */
-        this.charPick = new EventEmitter();
-    }
-    /**
-     * The character to display.
-     */
-    get char() {
-        return this._char;
-    }
-    set char(value) {
-        this._char = value || undefined;
+        this.charPick = output();
     }
     onCharClick(event) {
-        this.charPick.emit({ char: this._char, event });
+        this.charPick.emit({ char: this.char(), event });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseTextCharComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BaseTextCharComponent, isStandalone: true, selector: "gve-base-text-char", inputs: { char: "char" }, outputs: { charPick: "charPick" }, ngImport: i0, template: "@if (char) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char.emSize + 'em'\"\r\n    [style.borderColor]=\"char.borderColor\"\r\n  >\r\n    {{ char.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char.emSize / 2 + 'em'\"\r\n    [style.color]=\"char.color | colorToContrast\"\r\n    [style.borderColor]=\"char.borderColor\"\r\n    [style.backgroundColor]=\"char.color\"\r\n  >\r\n    {{ char.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid silver;border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid silver;border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: ColorToContrastPipe, name: "colorToContrast" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BaseTextCharComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: BaseTextCharComponent, isStandalone: true, selector: "gve-base-text-char", inputs: { char: { classPropertyName: "char", publicName: "char", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { charPick: "charPick" }, ngImport: i0, template: "@if (char()) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char()!.emSize + 'em'\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n  >\r\n    {{ char()!.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char()!.emSize / 2 + 'em'\"\r\n    [style.color]=\"char()!.color | colorToContrast\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n    [style.backgroundColor]=\"char()!.color\"\r\n  >\r\n    {{ char()!.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid silver;border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid silver;border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: ColorToContrastPipe, name: "colorToContrast" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseTextCharComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BaseTextCharComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-base-text-char', imports: [MatRippleModule, ColorToContrastPipe], template: "@if (char) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char.emSize + 'em'\"\r\n    [style.borderColor]=\"char.borderColor\"\r\n  >\r\n    {{ char.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char.emSize / 2 + 'em'\"\r\n    [style.color]=\"char.color | colorToContrast\"\r\n    [style.borderColor]=\"char.borderColor\"\r\n    [style.backgroundColor]=\"char.color\"\r\n  >\r\n    {{ char.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid silver;border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid silver;border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"] }]
-        }], propDecorators: { char: [{
-                type: Input
-            }], charPick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'gve-base-text-char', imports: [MatRippleModule, ColorToContrastPipe], template: "@if (char()) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char()!.emSize + 'em'\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n  >\r\n    {{ char()!.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char()!.emSize / 2 + 'em'\"\r\n    [style.color]=\"char()!.color | colorToContrast\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n    [style.backgroundColor]=\"char()!.color\"\r\n  >\r\n    {{ char()!.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid silver;border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid silver;border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"] }]
+        }] });
 
 /**
  * 🔑 `gve-base-text-view`
@@ -446,73 +424,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  */
 class BaseTextViewComponent {
     constructor() {
-        this._text = [];
         /**
          * The default color for the text.
          */
-        this.defaultColor = '#DBDBDB';
+        this.defaultColor = input('#DBDBDB');
         /**
          * The default border color for the text.
          */
-        this.defaultBorderColor = '#DBDBDB';
+        this.defaultBorderColor = input('#DBDBDB');
         /**
          * The color for the selected text.
          */
-        this.selectionColor = '#3E92CC';
+        this.selectionColor = input('#3E92CC');
         /**
          * True if line numbers should be displayed next to each line.
          */
-        this.hasLineNumber = false;
+        this.hasLineNumber = input(false);
+        /**
+         * The text to display.
+         */
+        this.text = input([]);
+        /**
+         * An optional callback to get the color of a character node.
+         * Return null to use the default color.
+         */
+        this.borderColorCallback = input();
         /**
          * Emitted when a character is picked.
          */
-        this.charPick = new EventEmitter();
+        this.charPick = output();
         /**
          * Emitted when a range is picked. This is preceded by a character pick event.
          * The range is defined by the starting character and the number of characters.
          * The range is inclusive.
          */
-        this.rangePick = new EventEmitter();
+        this.rangePick = output();
         this.lines = [];
+        // build lines when text or border color callback change
+        effect(() => {
+            this.buildLines(this.text(), this.borderColorCallback());
+        });
     }
-    /**
-     * The text to display.
-     */
-    get text() {
-        return this._text;
-    }
-    set text(value) {
-        this._text = value || [];
-        this.buildLines();
-    }
-    /**
-     * An optional callback to get the color of a character node.
-     * Return null to use the default color.
-     */
-    get borderColorCallback() {
-        return this._borderColorCallback;
-    }
-    set borderColorCallback(value) {
-        this._borderColorCallback = value;
-        this.buildLines();
-    }
-    buildLines() {
-        if (!this._text) {
+    buildLines(text, borderColorCallback) {
+        if (!text) {
             this.lines = [];
             return;
         }
         const newLines = [];
         newLines.push([]);
-        const nodes = this._text;
+        const nodes = text;
         for (let i = 0; i < nodes.length; i++) {
             const char = {
                 id: nodes[i].id,
                 value: nodes[i].data,
                 label: nodes[i].label,
-                color: this.defaultColor,
-                borderColor: this.borderColorCallback
-                    ? this.borderColorCallback(nodes[i]) || this.defaultBorderColor
-                    : this.defaultBorderColor,
+                color: this.defaultColor(),
+                borderColor: borderColorCallback
+                    ? borderColorCallback(nodes[i]) || this.defaultBorderColor()
+                    : this.defaultBorderColor(),
                 emSize: 1.5,
             };
             newLines[newLines.length - 1].push(char);
@@ -525,8 +494,8 @@ class BaseTextViewComponent {
     resetColors() {
         for (const line of this.lines) {
             for (const c of line) {
-                c.color = this.defaultColor;
-                c.borderColor = this.defaultBorderColor;
+                c.color = this.defaultColor();
+                c.borderColor = this.defaultBorderColor();
             }
         }
     }
@@ -540,8 +509,8 @@ class BaseTextViewComponent {
             for (const line of this.lines) {
                 for (const c of line) {
                     if (c.id >= minId && c.id <= maxId) {
-                        c.color = this.selectionColor;
-                        c.borderColor = this.selectionColor;
+                        c.color = this.selectionColor();
+                        c.borderColor = this.selectionColor();
                     }
                 }
             }
@@ -551,36 +520,20 @@ class BaseTextViewComponent {
         }
         else {
             // select current char
-            event.char.color = this.selectionColor;
-            event.char.borderColor = this.selectionColor;
+            event.char.color = this.selectionColor();
+            event.char.borderColor = this.selectionColor();
             this.charPick.emit(event);
             this.rangePick.emit({ at: event.char.id, run: 1 });
         }
         this._lastSelectedChar = event.char;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BaseTextViewComponent, isStandalone: true, selector: "gve-base-text-view", inputs: { defaultColor: "defaultColor", defaultBorderColor: "defaultBorderColor", selectionColor: "selectionColor", hasLineNumber: "hasLineNumber", text: "text", borderColorCallback: "borderColorCallback" }, outputs: { charPick: "charPick", rangePick: "rangePick" }, ngImport: i0, template: "<div id=\"text\">\r\n  @for (line of lines; track $index) {\r\n  <div class=\"line\">\r\n    @if (hasLineNumber) {\r\n    <div class=\"nr\">\r\n      {{ lines.indexOf(line) + 1 }}\r\n    </div>\r\n    } @for (c of line; track c.id) {\r\n    <gve-base-text-char [char]=\"c\" (charPick)=\"onCharPick($event)\" />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line *{flex:0 0 auto}.nr{font-size:.8em;font-weight:700;color:silver;margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseTextCharComponent, selector: "gve-base-text-char", inputs: ["char"], outputs: ["charPick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BaseTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: BaseTextViewComponent, isStandalone: true, selector: "gve-base-text-view", inputs: { defaultColor: { classPropertyName: "defaultColor", publicName: "defaultColor", isSignal: true, isRequired: false, transformFunction: null }, defaultBorderColor: { classPropertyName: "defaultBorderColor", publicName: "defaultBorderColor", isSignal: true, isRequired: false, transformFunction: null }, selectionColor: { classPropertyName: "selectionColor", publicName: "selectionColor", isSignal: true, isRequired: false, transformFunction: null }, hasLineNumber: { classPropertyName: "hasLineNumber", publicName: "hasLineNumber", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, borderColorCallback: { classPropertyName: "borderColorCallback", publicName: "borderColorCallback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { charPick: "charPick", rangePick: "rangePick" }, ngImport: i0, template: "<div id=\"text\">\r\n  @for (line of lines; track $index) {\r\n  <div class=\"line\">\r\n    @if (hasLineNumber()) {\r\n    <div class=\"nr\">\r\n      {{ lines.indexOf(line) + 1 }}\r\n    </div>\r\n    } @for (c of line; track c.id) {\r\n    <gve-base-text-char [char]=\"c\" (charPick)=\"onCharPick($event)\" />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line *{flex:0 0 auto}.nr{font-size:.8em;font-weight:700;color:silver;margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseTextCharComponent, selector: "gve-base-text-char", inputs: ["char"], outputs: ["charPick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseTextViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BaseTextViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-base-text-view', imports: [CommonModule, BaseTextCharComponent], template: "<div id=\"text\">\r\n  @for (line of lines; track $index) {\r\n  <div class=\"line\">\r\n    @if (hasLineNumber) {\r\n    <div class=\"nr\">\r\n      {{ lines.indexOf(line) + 1 }}\r\n    </div>\r\n    } @for (c of line; track c.id) {\r\n    <gve-base-text-char [char]=\"c\" (charPick)=\"onCharPick($event)\" />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line *{flex:0 0 auto}.nr{font-size:.8em;font-weight:700;color:silver;margin:0 4px}\n"] }]
-        }], propDecorators: { defaultColor: [{
-                type: Input
-            }], defaultBorderColor: [{
-                type: Input
-            }], selectionColor: [{
-                type: Input
-            }], hasLineNumber: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], borderColorCallback: [{
-                type: Input
-            }], charPick: [{
-                type: Output
-            }], rangePick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'gve-base-text-view', imports: [CommonModule, BaseTextCharComponent], template: "<div id=\"text\">\r\n  @for (line of lines; track $index) {\r\n  <div class=\"line\">\r\n    @if (hasLineNumber()) {\r\n    <div class=\"nr\">\r\n      {{ lines.indexOf(line) + 1 }}\r\n    </div>\r\n    } @for (c of line; track c.id) {\r\n    <gve-base-text-char [char]=\"c\" (charPick)=\"onCharPick($event)\" />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line *{flex:0 0 auto}.nr{font-size:.8em;font-weight:700;color:silver;margin:0 4px}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * 🔑 `gve-feature-editor`
@@ -602,48 +555,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * - 🔥 `featureCancel`: emitted when the user cancels the feature editing.
  */
 class FeatureEditorComponent {
-    /**
-     * The feature values map. When specified and the user selects a feature
-     * name present in the map keys, the corresponding values will be used
-     * to populate the value selection.
-     */
-    get featValues() {
-        return this._map;
-    }
-    set featValues(value) {
-        this._map = value || undefined;
-        this.nameIds = this.getLabeledIdsFor(this.name.value);
-    }
-    /**
-     * The feature to edit.
-     */
-    get feature() {
-        return this._feature;
-    }
-    set feature(value) {
-        if (this._feature === value) {
-            return;
-        }
-        this._feature = value || undefined;
-        this.updateForm(this._feature);
-        setTimeout(() => {
-            this.nameControl?.nativeElement?.focus();
-        }, 500);
-    }
     constructor(formBuilder) {
+        /**
+         * The list of feature names to display in the name selection.
+         * This is used when you have a closed list of features.
+         */
+        this.featNames = input();
+        /**
+         * The feature values map. When specified and the user selects a feature
+         * name present in the map keys, the corresponding values will be used
+         * to populate the value selection.
+         */
+        this.featValues = input();
+        /**
+         * The feature to edit.
+         */
+        this.feature = model();
         /**
          * True if the feature is a variant operation feature, which has
          * additional properties like negation, global, and short-lived.
          */
-        this.isVar = false;
+        this.isVar = input(false);
         /**
          * Event emitted when the user cancels the feature editing.
          */
-        this.featureCancel = new EventEmitter();
+        this.featureCancel = output();
         /**
          * Event emitted when the user saves the edited feature.
          */
-        this.featureChange = new EventEmitter();
+        this.featureChange = output();
         this.name = formBuilder.control('', {
             validators: [Validators.required, Validators.maxLength(50)],
             nonNullable: true,
@@ -666,26 +606,35 @@ class FeatureEditorComponent {
             isGlobal: this.isGlobal,
             isShortLived: this.isShortLived,
         });
+        // when feature changes, update the form
+        effect(() => {
+            this.updateForm(this.feature());
+            setTimeout(() => {
+                this.nameControl?.nativeElement?.focus();
+                this.nameIds = this.getLabeledIdsFor(this.name.value, this.featValues());
+            }, 500);
+        });
     }
     ngOnInit() {
         // whenever the name changes, update the value selection
         this._sub = this.name.valueChanges
             .pipe(debounceTime(300), distinctUntilChanged())
             .subscribe((name) => {
-            if (!this._frozen && this.featNames?.length) {
+            if (!this._frozen && this.featNames()?.length) {
                 this.value.reset();
-                this.nameIds = this.getLabeledIdsFor(name);
+                this.nameIds = this.getLabeledIdsFor(name, this.featValues());
             }
         });
     }
     ngOnDestroy() {
         this._sub?.unsubscribe();
     }
-    getLabeledIdsFor(id) {
+    getLabeledIdsFor(id, featValues) {
         if (!id) {
             return undefined;
         }
-        return this.featValues ? this.featValues[id] : undefined;
+        console.log('getLabeledIdsFor', id, featValues);
+        return featValues ? featValues[id] : undefined;
     }
     updateForm(feature) {
         if (!feature) {
@@ -709,7 +658,7 @@ class FeatureEditorComponent {
         if (!this.form.valid) {
             return;
         }
-        this.feature = this.isVar
+        this.feature.set(this.isVar()
             ? {
                 name: this.name.value.trim(),
                 value: this.value.value.trim(),
@@ -722,13 +671,13 @@ class FeatureEditorComponent {
                 name: this.name.value.trim(),
                 value: this.value.value.trim(),
                 setPolicy: this.setPolicy.value,
-            };
-        this.featureChange.emit(this.feature);
+            });
+        this.featureChange.emit(this.feature());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FeatureEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FeatureEditorComponent, isStandalone: true, selector: "gve-feature-editor", inputs: { featNames: "featNames", featValues: "featValues", feature: "feature", isVar: "isVar" }, outputs: { featureCancel: "featureCancel", featureChange: "featureChange" }, viewQueries: [{ propertyName: "nameControl", first: true, predicate: ["nameCtl"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    @if (featNames?.length) {\r\n    <!-- name (bound) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <mat-select #nameCtl [formControl]=\"name\">\r\n        <mat-option *ngFor=\"let i of featNames\" [value]=\"i.id\">{{\r\n          i.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n      <mat-error>name required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- name (free) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <input #nameCtl matInput [formControl]=\"name\" />\r\n      <mat-error\r\n        *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n        >name required</mat-error\r\n      >\r\n      @if ($any(name).errors?.maxLength && (name.dirty || name.touched)) {\r\n      <mat-error>name too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- value (bound) -->\r\n    @if (nameIds?.length) {\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <mat-select [formControl]=\"value\">\r\n        <mat-option *ngFor=\"let e of nameIds\" [value]=\"e.id\">{{\r\n          e.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- value (free) -->\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <input matInput [formControl]=\"value\" />\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      } @if ($any(value).errors?.maxLength && (value.dirty || value.touched)) {\r\n      <mat-error>value too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- setPolicy -->\r\n    <mat-form-field>\r\n      <mat-label>set policy</mat-label>\r\n      <mat-select [formControl]=\"setPolicy\">\r\n        <mat-option [value]=\"0\">multiple</mat-option>\r\n        <mat-option [value]=\"1\">single</mat-option>\r\n        <mat-option [value]=\"2\">single first</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  @if (isVar) {\r\n  <div class=\"form-row\">\r\n    <!-- isNegated -->\r\n    <mat-checkbox [formControl]=\"isNegated\">negated</mat-checkbox>\r\n\r\n    <!-- isShortLived -->\r\n    <mat-checkbox [formControl]=\"isShortLived\">short-lived</mat-checkbox>\r\n\r\n    <!-- isGlobal -->\r\n    <mat-checkbox [formControl]=\"isGlobal\">global</mat-checkbox>\r\n  </div>\r\n  }\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FeatureEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: FeatureEditorComponent, isStandalone: true, selector: "gve-feature-editor", inputs: { featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null }, isVar: { classPropertyName: "isVar", publicName: "isVar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feature: "featureChange", featureCancel: "featureCancel", featureChange: "featureChange" }, viewQueries: [{ propertyName: "nameControl", first: true, predicate: ["nameCtl"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    @if (featNames()?.length) {\r\n    <!-- name (bound) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <mat-select #nameCtl [formControl]=\"name\">\r\n        <mat-option *ngFor=\"let i of featNames()\" [value]=\"i.id\">{{\r\n          i.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n      <mat-error>name required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- name (free) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <input #nameCtl matInput [formControl]=\"name\" />\r\n      <mat-error\r\n        *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n        >name required</mat-error\r\n      >\r\n      @if ($any(name).errors?.maxLength && (name.dirty || name.touched)) {\r\n      <mat-error>name too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- value (bound) -->\r\n    @if (nameIds?.length) {\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <mat-select [formControl]=\"value\">\r\n        <mat-option *ngFor=\"let e of nameIds\" [value]=\"e.id\">{{\r\n          e.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- value (free) -->\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <input matInput [formControl]=\"value\" />\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      } @if ($any(value).errors?.maxLength && (value.dirty || value.touched)) {\r\n      <mat-error>value too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- setPolicy -->\r\n    <mat-form-field>\r\n      <mat-label>set policy</mat-label>\r\n      <mat-select [formControl]=\"setPolicy\">\r\n        <mat-option [value]=\"0\">multiple</mat-option>\r\n        <mat-option [value]=\"1\">single</mat-option>\r\n        <mat-option [value]=\"2\">single first</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  @if (isVar()) {\r\n  <div class=\"form-row\">\r\n    <!-- isNegated -->\r\n    <mat-checkbox [formControl]=\"isNegated\">negated</mat-checkbox>\r\n\r\n    <!-- isShortLived -->\r\n    <mat-checkbox [formControl]=\"isShortLived\">short-lived</mat-checkbox>\r\n\r\n    <!-- isGlobal -->\r\n    <mat-checkbox [formControl]=\"isGlobal\">global</mat-checkbox>\r\n  </div>\r\n  }\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FeatureEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FeatureEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-feature-editor', imports: [
                         CommonModule,
@@ -740,22 +689,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatInputModule,
                         MatSelectModule,
                         MatTooltipModule,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    @if (featNames?.length) {\r\n    <!-- name (bound) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <mat-select #nameCtl [formControl]=\"name\">\r\n        <mat-option *ngFor=\"let i of featNames\" [value]=\"i.id\">{{\r\n          i.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n      <mat-error>name required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- name (free) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <input #nameCtl matInput [formControl]=\"name\" />\r\n      <mat-error\r\n        *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n        >name required</mat-error\r\n      >\r\n      @if ($any(name).errors?.maxLength && (name.dirty || name.touched)) {\r\n      <mat-error>name too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- value (bound) -->\r\n    @if (nameIds?.length) {\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <mat-select [formControl]=\"value\">\r\n        <mat-option *ngFor=\"let e of nameIds\" [value]=\"e.id\">{{\r\n          e.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- value (free) -->\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <input matInput [formControl]=\"value\" />\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      } @if ($any(value).errors?.maxLength && (value.dirty || value.touched)) {\r\n      <mat-error>value too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- setPolicy -->\r\n    <mat-form-field>\r\n      <mat-label>set policy</mat-label>\r\n      <mat-select [formControl]=\"setPolicy\">\r\n        <mat-option [value]=\"0\">multiple</mat-option>\r\n        <mat-option [value]=\"1\">single</mat-option>\r\n        <mat-option [value]=\"2\">single first</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  @if (isVar) {\r\n  <div class=\"form-row\">\r\n    <!-- isNegated -->\r\n    <mat-checkbox [formControl]=\"isNegated\">negated</mat-checkbox>\r\n\r\n    <!-- isShortLived -->\r\n    <mat-checkbox [formControl]=\"isShortLived\">short-lived</mat-checkbox>\r\n\r\n    <!-- isGlobal -->\r\n    <mat-checkbox [formControl]=\"isGlobal\">global</mat-checkbox>\r\n  </div>\r\n  }\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    @if (featNames()?.length) {\r\n    <!-- name (bound) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <mat-select #nameCtl [formControl]=\"name\">\r\n        <mat-option *ngFor=\"let i of featNames()\" [value]=\"i.id\">{{\r\n          i.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n      <mat-error>name required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- name (free) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <input #nameCtl matInput [formControl]=\"name\" />\r\n      <mat-error\r\n        *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n        >name required</mat-error\r\n      >\r\n      @if ($any(name).errors?.maxLength && (name.dirty || name.touched)) {\r\n      <mat-error>name too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- value (bound) -->\r\n    @if (nameIds?.length) {\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <mat-select [formControl]=\"value\">\r\n        <mat-option *ngFor=\"let e of nameIds\" [value]=\"e.id\">{{\r\n          e.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- value (free) -->\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <input matInput [formControl]=\"value\" />\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      } @if ($any(value).errors?.maxLength && (value.dirty || value.touched)) {\r\n      <mat-error>value too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- setPolicy -->\r\n    <mat-form-field>\r\n      <mat-label>set policy</mat-label>\r\n      <mat-select [formControl]=\"setPolicy\">\r\n        <mat-option [value]=\"0\">multiple</mat-option>\r\n        <mat-option [value]=\"1\">single</mat-option>\r\n        <mat-option [value]=\"2\">single first</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  @if (isVar()) {\r\n  <div class=\"form-row\">\r\n    <!-- isNegated -->\r\n    <mat-checkbox [formControl]=\"isNegated\">negated</mat-checkbox>\r\n\r\n    <!-- isShortLived -->\r\n    <mat-checkbox [formControl]=\"isShortLived\">short-lived</mat-checkbox>\r\n\r\n    <!-- isGlobal -->\r\n    <mat-checkbox [formControl]=\"isGlobal\">global</mat-checkbox>\r\n  </div>\r\n  }\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { nameControl: [{
                 type: ViewChild,
                 args: ['nameCtl']
-            }], featNames: [{
-                type: Input
-            }], featValues: [{
-                type: Input
-            }], feature: [{
-                type: Input
-            }], isVar: [{
-                type: Input
-            }], featureCancel: [{
-                type: Output
-            }], featureChange: [{
-                type: Output
             }] } });
 
 /**
@@ -774,58 +711,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * - ▶️ `filterThreshold` (`number`): the threshold at which the features filter
  * should become visible. If set to 0, the filter is always visible; if set to -1,
  * it is always invisible; otherwise, it gets visible when the number of features
- * is greater than the threshold. Default is 5.
+ * is equal to or greater than the threshold. Default is 5.
  * - ▶️ `features` (`Feature[]`): the features to edit.
  * - ▶️ `isVar`: true if the feature is a variant operation feature, which
  * has additional properties like negation, global, and short-lived.
  * - 🔥 `featuresChange` (`Feature[]`): emitted when features have changed.
  */
 class FeatureSetEditorComponent {
-    /**
-     * The features to edit.
-     */
-    get features() {
-        return this._features;
-    }
-    set features(value) {
-        if (this._features === value) {
-            return;
-        }
-        this._features = value;
-        this.applyFeatureFilter(this.filter.value);
-    }
     constructor(formBuilder) {
         this.POLICIES = ['M', 'S', 'SF'];
         /**
          * True if the features are variable features.
          */
-        this.isVar = false;
+        this.isVar = input(false);
+        /**
+         * The list of feature names to display in the name selection.
+         * This is used when you have a closed list of features.
+         */
+        this.featNames = input();
+        /**
+         * The feature values map. When specified and the user selects a feature
+         * name present in the map keys, the corresponding values will be used
+         * to populate the value selection.
+         */
+        this.featValues = input();
         /**
          * The threshold at which the features filter should become visible.
          * If set to 0, the filter is always visible; if set to -1, it is always
          * invisible; otherwise, it gets visible when the number of features
-         * is greater than the threshold. Default is 5.
+         * is greater than or equal to the threshold. Default is 5.
+         */
+        this.filterThreshold = input(5);
+        /**
+         * The features to edit.
          */
-        this.filterThreshold = 5;
+        this.features = model([]);
         /**
          * Emitted when the features change.
          */
-        this.featuresChange = new EventEmitter();
-        this._features = [];
+        this.featuresChange = output();
         this.filteredFeatures = [];
         this.filter = formBuilder.control(null);
         this._editedFeatureIndex = -1;
-    }
-    applyFeatureFilter(name) {
-        this.filteredFeatures = this.features.filter((feature) => {
-            return !name || feature.name.toLowerCase().includes(name.toLowerCase());
+        // when features change, apply the filter
+        effect(() => {
+            this.applyFeatureFilter(this.features(), this.filter.value);
         });
     }
+    applyFeatureFilter(features, name) {
+        this.filteredFeatures =
+            features.filter((feature) => {
+                return !name || feature.name.toLowerCase().includes(name.toLowerCase());
+            }) || [];
+    }
     ngOnInit() {
+        // when the filter changes, apply the filter
         this._sub = this.filter.valueChanges
             .pipe(distinctUntilChanged(), debounceTime(300))
             .subscribe((value) => {
-            this.applyFeatureFilter(value);
+            this.applyFeatureFilter(this.features(), value);
         });
     }
     ngOnDestroy() {
@@ -841,20 +785,23 @@ class FeatureSetEditorComponent {
     }
     editFeature(feature) {
         this.editedFeature = feature;
-        this._editedFeatureIndex = this.features.indexOf(feature);
+        this._editedFeatureIndex = this.features().indexOf(feature);
     }
     deleteFeature(feature) {
-        const index = this.features.indexOf(feature);
+        const index = this.features().indexOf(feature);
         if (index < 0) {
             return;
         }
-        const features = [...this.features];
+        const features = [...this.features()];
         features.splice(index, 1);
-        this.features = features;
-        this.featuresChange.emit(this.features);
+        this.features.set(features);
+        this.featuresChange.emit(this.features());
     }
     onFeatureChange(feature) {
-        const features = [...this.features];
+        if (!feature) {
+            return;
+        }
+        const features = [...this.features()];
         for (let i = features.length - 1; i >= 0; i--) {
             if (features[i].name === feature.name) {
                 if (feature.setPolicy === FeatureSetPolicy.single ||
@@ -869,19 +816,18 @@ class FeatureSetEditorComponent {
         else {
             features.splice(this._editedFeatureIndex, 1, feature);
         }
-        this.features = features;
-        this.editedFeature = undefined;
-        this._editedFeatureIndex = -1;
-        this.featuresChange.emit(this.features);
+        this.onFeatureCancel();
+        this.features.set(features);
+        this.featuresChange.emit(this.features());
     }
     onFeatureCancel() {
         this.editedFeature = undefined;
         this._editedFeatureIndex = -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FeatureSetEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FeatureSetEditorComponent, isStandalone: true, selector: "gve-feature-set-editor", inputs: { isVar: "isVar", featNames: "featNames", featValues: "featValues", filterThreshold: "filterThreshold", features: "features" }, outputs: { featuresChange: "featuresChange" }, ngImport: i0, template: "<div>\r\n  <div class=\"form-row\">\r\n    <!-- filter -->\r\n    @if (filterThreshold === 0 || features.length > filterThreshold) {\r\n    <mat-form-field>\r\n      <input matInput placeholder=\"filter\" [formControl]=\"filter\" />\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matSuffix\r\n        (click)=\"filter.reset()\"\r\n        [disabled]=\"!filter.value\"\r\n        [attr.aria-label]=\"'Reset filter'\"\r\n      >\r\n        <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- add feature button -->\r\n    <button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Add a new feature\"\r\n      (click)=\"addFeature()\"\r\n      [class.in-row-button]=\"\r\n        filterThreshold === 0 || features.length > filterThreshold\r\n      \"\r\n    >\r\n      <mat-icon>add</mat-icon>\r\n      feature\r\n    </button>\r\n  </div>\r\n\r\n  <!-- list -->\r\n  @if (features.length) {\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>feature</th>\r\n        <th>value</th>\r\n        <th>policy</th>\r\n        @if (isVar) {\r\n        <th>negated</th>\r\n        <th>global</th>\r\n        <th>short-lived</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (feature of filteredFeatures; track feature) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this feature\"\r\n            (click)=\"editFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this feature\"\r\n            (click)=\"deleteFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          @if (featNames?.length) {\r\n          <span>{{\r\n            feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.name }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          @if (featValues) {\r\n          <span>{{\r\n            feature.value | flatLookup : featValues[feature.name]\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.value }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          <span>{{ POLICIES[feature.setPolicy] }}</span>\r\n        </td>\r\n        @if (isVar) {\r\n        <td>\r\n          <span>{{ $any(feature).isNegated ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isGlobal ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isShortLived ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  }\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedFeature\" [expanded]=\"editedFeature\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <span>{{ editedFeature?.name || \"feature\" }}</span>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <gve-feature-editor\r\n      [isVar]=\"isVar\"\r\n      [featNames]=\"featNames\"\r\n      [featValues]=\"featValues\"\r\n      [feature]=\"editedFeature\"\r\n      (featureChange)=\"onFeatureChange($event)\"\r\n      (featureCancel)=\"onFeatureCancel()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse;margin-top:8px}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }, { kind: "component", type: FeatureEditorComponent, selector: "gve-feature-editor", inputs: ["featNames", "featValues", "feature", "isVar"], outputs: ["featureCancel", "featureChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FeatureSetEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: FeatureSetEditorComponent, isStandalone: true, selector: "gve-feature-set-editor", inputs: { isVar: { classPropertyName: "isVar", publicName: "isVar", isSignal: true, isRequired: false, transformFunction: null }, featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, filterThreshold: { classPropertyName: "filterThreshold", publicName: "filterThreshold", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { features: "featuresChange", featuresChange: "featuresChange" }, ngImport: i0, template: "<div>\r\n  <div class=\"form-row\">\r\n    <!-- filter -->\r\n    @if (filterThreshold() === 0 || features().length >= filterThreshold()) {\r\n    <mat-form-field>\r\n      <input matInput placeholder=\"filter\" [formControl]=\"filter\" />\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matSuffix\r\n        (click)=\"filter.reset()\"\r\n        [disabled]=\"!filter.value\"\r\n        [attr.aria-label]=\"'Reset filter'\"\r\n      >\r\n        <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- add feature button -->\r\n    <button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Add a new feature\"\r\n      (click)=\"addFeature()\"\r\n      [class.in-row-button]=\"\r\n        filterThreshold() === 0 || features()!.length >= filterThreshold()\r\n      \"\r\n    >\r\n      <mat-icon>add</mat-icon>\r\n      feature\r\n    </button>\r\n  </div>\r\n\r\n  <!-- list -->\r\n  @if (features().length) {\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>feature</th>\r\n        <th>value</th>\r\n        <th>policy</th>\r\n        @if (isVar()) {\r\n        <th>negated</th>\r\n        <th>global</th>\r\n        <th>short-lived</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (feature of filteredFeatures; track feature) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this feature\"\r\n            (click)=\"editFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this feature\"\r\n            (click)=\"deleteFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          @if (featNames()?.length) {\r\n          <span>{{\r\n            feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.name }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          @if (featValues()) {\r\n          <span>{{\r\n            feature.value | flatLookup : featValues()![feature.name]\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.value }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          <span>{{ POLICIES[feature.setPolicy] }}</span>\r\n        </td>\r\n        @if (isVar()) {\r\n        <td>\r\n          <span>{{ $any(feature).isNegated ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isGlobal ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isShortLived ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  }\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedFeature\" [expanded]=\"editedFeature\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <span>{{ editedFeature?.name || \"feature\" }}</span>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <gve-feature-editor\r\n      [isVar]=\"isVar()\"\r\n      [featNames]=\"featNames()\"\r\n      [featValues]=\"featValues()\"\r\n      [feature]=\"editedFeature\"\r\n      (featureChange)=\"onFeatureChange($event)\"\r\n      (featureCancel)=\"onFeatureCancel()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse;margin-top:8px}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }, { kind: "component", type: FeatureEditorComponent, selector: "gve-feature-editor", inputs: ["featNames", "featValues", "feature", "isVar"], outputs: ["featureChange", "featureCancel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FeatureSetEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FeatureSetEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-feature-set-editor', imports: [
                         CommonModule,
@@ -895,20 +841,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatTooltipModule,
                         FlatLookupPipe,
                         FeatureEditorComponent,
-                    ], template: "<div>\r\n  <div class=\"form-row\">\r\n    <!-- filter -->\r\n    @if (filterThreshold === 0 || features.length > filterThreshold) {\r\n    <mat-form-field>\r\n      <input matInput placeholder=\"filter\" [formControl]=\"filter\" />\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matSuffix\r\n        (click)=\"filter.reset()\"\r\n        [disabled]=\"!filter.value\"\r\n        [attr.aria-label]=\"'Reset filter'\"\r\n      >\r\n        <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- add feature button -->\r\n    <button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Add a new feature\"\r\n      (click)=\"addFeature()\"\r\n      [class.in-row-button]=\"\r\n        filterThreshold === 0 || features.length > filterThreshold\r\n      \"\r\n    >\r\n      <mat-icon>add</mat-icon>\r\n      feature\r\n    </button>\r\n  </div>\r\n\r\n  <!-- list -->\r\n  @if (features.length) {\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>feature</th>\r\n        <th>value</th>\r\n        <th>policy</th>\r\n        @if (isVar) {\r\n        <th>negated</th>\r\n        <th>global</th>\r\n        <th>short-lived</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (feature of filteredFeatures; track feature) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this feature\"\r\n            (click)=\"editFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this feature\"\r\n            (click)=\"deleteFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          @if (featNames?.length) {\r\n          <span>{{\r\n            feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.name }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          @if (featValues) {\r\n          <span>{{\r\n            feature.value | flatLookup : featValues[feature.name]\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.value }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          <span>{{ POLICIES[feature.setPolicy] }}</span>\r\n        </td>\r\n        @if (isVar) {\r\n        <td>\r\n          <span>{{ $any(feature).isNegated ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isGlobal ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isShortLived ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  }\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedFeature\" [expanded]=\"editedFeature\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <span>{{ editedFeature?.name || \"feature\" }}</span>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <gve-feature-editor\r\n      [isVar]=\"isVar\"\r\n      [featNames]=\"featNames\"\r\n      [featValues]=\"featValues\"\r\n      [feature]=\"editedFeature\"\r\n      (featureChange)=\"onFeatureChange($event)\"\r\n      (featureCancel)=\"onFeatureCancel()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse;margin-top:8px}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { isVar: [{
-                type: Input
-            }], featNames: [{
-                type: Input
-            }], featValues: [{
-                type: Input
-            }], filterThreshold: [{
-                type: Input
-            }], features: [{
-                type: Input
-            }], featuresChange: [{
-                type: Output
-            }] } });
+                    ], template: "<div>\r\n  <div class=\"form-row\">\r\n    <!-- filter -->\r\n    @if (filterThreshold() === 0 || features().length >= filterThreshold()) {\r\n    <mat-form-field>\r\n      <input matInput placeholder=\"filter\" [formControl]=\"filter\" />\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matSuffix\r\n        (click)=\"filter.reset()\"\r\n        [disabled]=\"!filter.value\"\r\n        [attr.aria-label]=\"'Reset filter'\"\r\n      >\r\n        <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- add feature button -->\r\n    <button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Add a new feature\"\r\n      (click)=\"addFeature()\"\r\n      [class.in-row-button]=\"\r\n        filterThreshold() === 0 || features()!.length >= filterThreshold()\r\n      \"\r\n    >\r\n      <mat-icon>add</mat-icon>\r\n      feature\r\n    </button>\r\n  </div>\r\n\r\n  <!-- list -->\r\n  @if (features().length) {\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>feature</th>\r\n        <th>value</th>\r\n        <th>policy</th>\r\n        @if (isVar()) {\r\n        <th>negated</th>\r\n        <th>global</th>\r\n        <th>short-lived</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (feature of filteredFeatures; track feature) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this feature\"\r\n            (click)=\"editFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this feature\"\r\n            (click)=\"deleteFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          @if (featNames()?.length) {\r\n          <span>{{\r\n            feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.name }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          @if (featValues()) {\r\n          <span>{{\r\n            feature.value | flatLookup : featValues()![feature.name]\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.value }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          <span>{{ POLICIES[feature.setPolicy] }}</span>\r\n        </td>\r\n        @if (isVar()) {\r\n        <td>\r\n          <span>{{ $any(feature).isNegated ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isGlobal ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isShortLived ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  }\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedFeature\" [expanded]=\"editedFeature\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <span>{{ editedFeature?.name || \"feature\" }}</span>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <gve-feature-editor\r\n      [isVar]=\"isVar()\"\r\n      [featNames]=\"featNames()\"\r\n      [featValues]=\"featValues()\"\r\n      [feature]=\"editedFeature\"\r\n      (featureChange)=\"onFeatureChange($event)\"\r\n      (featureCancel)=\"onFeatureCancel()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse;margin-top:8px}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 /**
  * 🔑 `gve-base-text-editor`
@@ -920,37 +854,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Used by the `gve-snapshot-editor` component.
  */
 class BaseTextEditorComponent {
-    /**
-     * The text to edit. In input this can be a string, an array of `CharNode`
-     * objects. In output this will be an array of `CharNode` objects.
-     */
-    get text() {
-        return this._text;
-    }
-    set text(value) {
-        this.resetSelectedChar();
-        if (this._text === value) {
-            return;
-        }
-        if (!value) {
-            this._text = [];
-        }
-        else {
-            this._text = Array.isArray(value)
-                ? value
-                : SnapshotViewService.stringToBaseChars(value);
-        }
-        this.userText.setValue(this._text.map((c) => c.label).join(''));
-        this.userText.markAsPristine();
-        this.userText.updateValueAndValidity();
-    }
     constructor(formBuilder, _dialogService) {
         this._dialogService = _dialogService;
-        this._text = [];
+        /**
+         * The text to edit. In input this can be a string, an array of `CharNode`
+         * objects, or undefined. In output this will be an array of `CharNode`
+         * objects.
+         */
+        this.text = input.required({
+            transform: (value) => {
+                if (value === undefined) {
+                    return undefined;
+                }
+                if (Array.isArray(value)) {
+                    return value;
+                }
+                if (typeof value === 'string') {
+                    return SnapshotViewService.stringToBaseChars(value);
+                }
+                return undefined;
+            },
+        });
         /**
          * Emitted for the edited text as an array of `CharNode`'s whenever it changes.
          */
-        this.textChange = new EventEmitter();
+        this.textChange = output();
         this.userText = formBuilder.control('', {
             nonNullable: true,
             validators: [Validators.required, Validators.maxLength(10000)],
@@ -958,18 +886,31 @@ class BaseTextEditorComponent {
         this.form = formBuilder.group({
             userText: this.userText,
         });
+        effect(() => {
+            this.resetSelectedChar();
+            if (!this.text()) {
+                this.userText.reset();
+            }
+            else {
+                this.userText.setValue(this.text()
+                    .map((c) => c.label)
+                    .join(''));
+                this.userText.markAsPristine();
+                this.userText.updateValueAndValidity();
+            }
+        });
     }
     resetSelectedChar() {
         this.selectedChar = undefined;
         this.selectedCharLabel = undefined;
     }
     onSelectedChar(event) {
-        this.selectedChar = this._text.find((c) => c.id === event.char.id);
+        this.selectedChar = this.text().find((c) => c.id === event.char.id);
         this.selectedCharLabel = event.char.label;
     }
     onFeaturesChange(features) {
         this.selectedChar.features = features;
-        this.textChange.emit(this._text);
+        this.textChange.emit(this.text());
     }
     onRangePick(range) {
         this.textRange = range;
@@ -982,15 +923,14 @@ class BaseTextEditorComponent {
             .confirm('Confirm', 'Reset text?')
             .subscribe((yes) => {
             if (yes) {
-                this.text = this.userText.value;
-                this.textChange.emit(this._text);
+                this.textChange.emit(SnapshotViewService.stringToBaseChars(this.userText.value));
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseTextEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BaseTextEditorComponent, isStandalone: true, selector: "gve-base-text-editor", inputs: { text: "text" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"setTextFromUser()\">\r\n  <!-- text -->\r\n  <div>\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label>text</mat-label>\r\n      <textarea matInput [formControl]=\"userText\" rows=\"5\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.required &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.maxLength &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <!-- set -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-warn\"\r\n      matTooltip=\"Reset characters to newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"setTextFromUser()\"\r\n    >\r\n      set\r\n    </button>\r\n    <!-- patch: TODO -->\r\n    <!-- <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-primary\"\r\n      matTooltip=\"Patch characters with newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"patchTextFromUser()\"\r\n    >\r\n      patch\r\n    </button> -->\r\n  </div>\r\n\r\n  <!-- base text -->\r\n  <div id=\"text-view\">\r\n    <gve-base-text-view\r\n      [text]=\"text\"\r\n      (charPick)=\"onSelectedChar($event)\"\r\n      (rangePick)=\"textRange = $event\"\r\n    />\r\n\r\n    <!-- text range -->\r\n    @if (textRange) {\r\n    <div id=\"text-range\">{{ textRange.at }} \u00D7 {{ textRange.run }}</div>\r\n    }\r\n  </div>\r\n\r\n  <!-- char features -->\r\n  @if (selectedChar) {\r\n  <fieldset>\r\n    <legend>features</legend>\r\n    <gve-feature-set-editor\r\n      [features]=\"selectedChar.features || []\"\r\n      (featuresChange)=\"onFeaturesChange($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n</form>\r\n", styles: [".full-width{width:100%}#text-view{margin:8px 0}fieldset{border:1px solid #ccc;padding:10px;margin:10px 0;border-radius:5px}legend{color:silver}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "hasLineNumber", "text", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "filterThreshold", "features"], outputs: ["featuresChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BaseTextEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: BaseTextEditorComponent, isStandalone: true, selector: "gve-base-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"setTextFromUser()\">\r\n  <!-- text -->\r\n  <div>\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label>text</mat-label>\r\n      <textarea matInput [formControl]=\"userText\" rows=\"5\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.required &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.maxLength &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <!-- set -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-warn\"\r\n      matTooltip=\"Reset characters to newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"setTextFromUser()\"\r\n    >\r\n      set\r\n    </button>\r\n    <!-- patch: TODO -->\r\n    <!-- <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-primary\"\r\n      matTooltip=\"Patch characters with newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"patchTextFromUser()\"\r\n    >\r\n      patch\r\n    </button> -->\r\n  </div>\r\n\r\n  <!-- base text -->\r\n  <div id=\"text-view\">\r\n    <gve-base-text-view\r\n      [text]=\"text() || []\"\r\n      (charPick)=\"onSelectedChar($event)\"\r\n      (rangePick)=\"textRange = $event\"\r\n    />\r\n\r\n    <!-- text range -->\r\n    @if (textRange) {\r\n    <div id=\"text-range\">{{ textRange.at }} \u00D7 {{ textRange.run }}</div>\r\n    }\r\n  </div>\r\n\r\n  <!-- char features -->\r\n  @if (selectedChar) {\r\n  <fieldset>\r\n    <legend>features</legend>\r\n    <gve-feature-set-editor\r\n      [features]=\"selectedChar.features || []\"\r\n      (featuresChange)=\"onFeaturesChange($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n</form>\r\n", styles: [".full-width{width:100%}#text-view{margin:8px 0}fieldset{border:1px solid #ccc;padding:10px;margin:10px 0;border-radius:5px}legend{color:silver}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "hasLineNumber", "text", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "filterThreshold", "features"], outputs: ["featuresChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseTextEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BaseTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-base-text-editor', imports: [
                         CommonModule,
@@ -1002,12 +942,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatTooltipModule,
                         BaseTextViewComponent,
                         FeatureSetEditorComponent,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"setTextFromUser()\">\r\n  <!-- text -->\r\n  <div>\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label>text</mat-label>\r\n      <textarea matInput [formControl]=\"userText\" rows=\"5\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.required &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.maxLength &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <!-- set -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-warn\"\r\n      matTooltip=\"Reset characters to newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"setTextFromUser()\"\r\n    >\r\n      set\r\n    </button>\r\n    <!-- patch: TODO -->\r\n    <!-- <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-primary\"\r\n      matTooltip=\"Patch characters with newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"patchTextFromUser()\"\r\n    >\r\n      patch\r\n    </button> -->\r\n  </div>\r\n\r\n  <!-- base text -->\r\n  <div id=\"text-view\">\r\n    <gve-base-text-view\r\n      [text]=\"text\"\r\n      (charPick)=\"onSelectedChar($event)\"\r\n      (rangePick)=\"textRange = $event\"\r\n    />\r\n\r\n    <!-- text range -->\r\n    @if (textRange) {\r\n    <div id=\"text-range\">{{ textRange.at }} \u00D7 {{ textRange.run }}</div>\r\n    }\r\n  </div>\r\n\r\n  <!-- char features -->\r\n  @if (selectedChar) {\r\n  <fieldset>\r\n    <legend>features</legend>\r\n    <gve-feature-set-editor\r\n      [features]=\"selectedChar.features || []\"\r\n      (featuresChange)=\"onFeaturesChange($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n</form>\r\n", styles: [".full-width{width:100%}#text-view{margin:8px 0}fieldset{border:1px solid #ccc;padding:10px;margin:10px 0;border-radius:5px}legend{color:silver}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.DialogService }], propDecorators: { text: [{
-                type: Input
-            }], textChange: [{
-                type: Output
-            }] } });
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"setTextFromUser()\">\r\n  <!-- text -->\r\n  <div>\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label>text</mat-label>\r\n      <textarea matInput [formControl]=\"userText\" rows=\"5\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.required &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.maxLength &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <!-- set -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-warn\"\r\n      matTooltip=\"Reset characters to newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"setTextFromUser()\"\r\n    >\r\n      set\r\n    </button>\r\n    <!-- patch: TODO -->\r\n    <!-- <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-primary\"\r\n      matTooltip=\"Patch characters with newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"patchTextFromUser()\"\r\n    >\r\n      patch\r\n    </button> -->\r\n  </div>\r\n\r\n  <!-- base text -->\r\n  <div id=\"text-view\">\r\n    <gve-base-text-view\r\n      [text]=\"text() || []\"\r\n      (charPick)=\"onSelectedChar($event)\"\r\n      (rangePick)=\"textRange = $event\"\r\n    />\r\n\r\n    <!-- text range -->\r\n    @if (textRange) {\r\n    <div id=\"text-range\">{{ textRange.at }} \u00D7 {{ textRange.run }}</div>\r\n    }\r\n  </div>\r\n\r\n  <!-- char features -->\r\n  @if (selectedChar) {\r\n  <fieldset>\r\n    <legend>features</legend>\r\n    <gve-feature-set-editor\r\n      [features]=\"selectedChar.features || []\"\r\n      (featuresChange)=\"onFeaturesChange($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n</form>\r\n", styles: [".full-width{width:100%}#text-view{margin:8px 0}fieldset{border:1px solid #ccc;padding:10px;margin:10px 0;border-radius:5px}legend{color:silver}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.DialogService }] });
 
 /**
  * Service to interact with the GVE API.
@@ -1059,10 +995,27 @@ class GveApiService {
         })
             .pipe(catchError(this._error.handleError));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: GveApiService, deps: [{ token: i1$1.HttpClient }, { token: i2$2.ErrorService }, { token: i2$2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: GveApiService, providedIn: 'root' }); }
+    /**
+     * Get the chain corresponding to the operations run on the
+     * specified text. This is used for diagnostic or demonstration
+     * purposes.
+     *
+     * @param text The base text.
+     * @param operations The operations to run.
+     * @returns Result wrapper.
+     */
+    getChain(text, operations) {
+        return this._http
+            .post(`${this._env.get('apiUrl')}text/operations/run/chain`, {
+            text,
+            operations,
+        })
+            .pipe(catchError(this._error.handleError));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GveApiService, deps: [{ token: i1$1.HttpClient }, { token: i2$2.ErrorService }, { token: i2$2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GveApiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: GveApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GveApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1079,30 +1032,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * - 🔥 `operationsChange` (`CharChainOperation[]`): event emitted when operations change.
  */
 class BatchOperationEditorComponent {
-    /**
-     * The preset text to parse if any. Usually you start with a blank
-     * text, but sometimes you might want to pre-set it.
-     */
-    get preset() {
-        return this._preset;
-    }
-    set preset(value) {
-        if (this._preset === value) {
-            return;
-        }
-        this._preset = value || undefined;
-        this.parseOperations();
-    }
     constructor(formBuilder, _api, 
     // this component can be used as a dialog
     dialogRef, data) {
         this._api = _api;
         this.dialogRef = dialogRef;
         this.data = data;
+        /**
+         * The preset text to parse if any. Usually you start with a blank
+         * text, but sometimes you might want to pre-set it.
+         */
+        this.preset = input();
         /**
          * Emitted when operations change.
          */
-        this.operationsChange = new EventEmitter();
+        this.operationsChange = output();
         this.text = formBuilder.control(null, [
             Validators.required,
             Validators.maxLength(2000),
@@ -1110,24 +1054,30 @@ class BatchOperationEditorComponent {
         this.form = formBuilder.group({
             inputOps: this.text,
         });
+        effect(() => {
+            this.parseOperations(this.preset() || undefined);
+        });
     }
     ngOnInit() {
         if (this.data?.payload?.preset) {
-            this.preset = this.data.payload.preset;
-            this.parseOperations();
+            this.parseOperations(this.data?.payload?.preset);
         }
     }
-    parseOperations() {
-        if (this.busy || !this.text.value) {
+    parseOperations(text) {
+        if (this.busy || !text) {
             return;
         }
         this.busy = true;
         this.parseError = undefined;
-        this._api.parseOperations(this.text.value).subscribe({
+        this._api.parseOperations(text).subscribe({
             next: (wrapper) => {
-                this.operationsChange.emit(wrapper.result);
-                if (!this.preset) {
-                    this.dialogRef?.close(wrapper.result);
+                if (wrapper.error) {
+                    this.parseError = wrapper.error;
+                    return;
+                }
+                this.operationsChange.emit(wrapper.result || []);
+                if (this.dialogRef) {
+                    this.dialogRef.close(wrapper.result);
                 }
             },
             error: (error) => {
@@ -1141,10 +1091,10 @@ class BatchOperationEditorComponent {
     close() {
         this.dialogRef?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BatchOperationEditorComponent, deps: [{ token: i1.FormBuilder }, { token: GveApiService }, { token: i3$1.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BatchOperationEditorComponent, isStandalone: true, selector: "gve-batch-operation-editor", inputs: { preset: "preset" }, outputs: { operationsChange: "operationsChange" }, ngImport: i0, template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n  <div id=\"heading\">\r\n    <h2>Add Operations</h2>\r\n  </div>\r\n  }\r\n  <fieldset>\r\n    <div id=\"batch-input\">\r\n      <div>\r\n        <mat-form-field class=\"full-width\">\r\n          <mat-label>operations</mat-label>\r\n          <textarea\r\n            class=\"code\"\r\n            matInput\r\n            [formControl]=\"text\"\r\n            rows=\"8\"\r\n            spellcheck=\"false\"\r\n          ></textarea>\r\n        </mat-form-field>\r\n        @if (parseError) {\r\n        <div class=\"error\">{{ parseError }}</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div id=\"batch-help\">\r\n      <ul>\r\n        <li>\r\n          <strong>replace</strong>:\r\n          <code>ATxRUN<strong>=</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>delete</strong>:\r\n          <code>ATxRUN<strong>-</strong></code>\r\n        </li>\r\n        <li>\r\n          <strong>add-before</strong>:\r\n          <code>ATxRUN<strong>+[</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>add-after</strong>:\r\n          <code>ATxRUN<strong>+]</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>move-before</strong>:\r\n          <code>ATxRUN<strong>&gt;[</strong>TO</code>\r\n        </li>\r\n        <li>\r\n          <strong>move-after</strong>:\r\n          <code>ATxRUN<strong>&gt;]</strong>TO</code>\r\n        </li>\r\n        <li>\r\n          <strong>swap</strong>:\r\n          <code>ATxRUN<strong>&lt;&gt;</strong>TOxRUN</code>\r\n        </li>\r\n        <li>\r\n          <strong>annotate</strong>:\r\n          <code>ATxRUN<strong>:</strong></code>\r\n        </li>\r\n      </ul>\r\n      <p>For all the operations:</p>\r\n      <ul>\r\n        <li>\r\n          prefix <code>(ITAG:OTAG)</code> to define input and/or output tags,\r\n          separated by colon.\r\n        </li>\r\n        <li>\r\n          prepend <code>&#x40;</code> to AT to use character indexes (0-N)\r\n          rather than IDs.\r\n        </li>\r\n        <li>RUN (where applicable) defaults to 1.</li>\r\n        <li>\r\n          append features like <code>[NAME OPERATOR VALUE]</code>, separated by\r\n          space, where:\r\n        </li>\r\n        <li>\r\n          <ol>\r\n            <li>\r\n              NAME is an arbitrary string. Prefixes:\r\n              <code>*</code>=global features, <code>!</code>=remove feature (no\r\n              value). Suffixes: <code>^</code>=short-lived (like\r\n              <code>*version^=alpha</code>).\r\n            </li>\r\n            <li>\r\n              OPERATOR is <code>=</code> (multiple), <code>:=</code> (single),\r\n              <code>==</code> (first-single).\r\n            </li>\r\n            <li>\r\n              VALUE is a string. If it includes spaces, wrap it in\r\n              <code>\"\"</code>.\r\n            </li>\r\n          </ol>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div class=\"form-row-center\">\r\n      @if (dialogRef) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-warn\"\r\n        mat-flat-button\r\n        matTooltip=\"Close dialog\"\r\n        (click)=\"close()\"\r\n      >\r\n        close\r\n      </button>\r\n      }\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Parse text into operations\"\r\n        [disabled]=\"!text.value || busy\"\r\n        (click)=\"parseOperations()\"\r\n      >\r\n        batch add\r\n      </button>\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".full-width{width:100%}.error{color:red}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center}div#batch-help strong{color:#ff8c00}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BatchOperationEditorComponent, deps: [{ token: i1.FormBuilder }, { token: GveApiService }, { token: i3$1.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: BatchOperationEditorComponent, isStandalone: true, selector: "gve-batch-operation-editor", inputs: { preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operationsChange: "operationsChange" }, ngImport: i0, template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n  <div id=\"heading\">\r\n    <h2>Add Operations</h2>\r\n  </div>\r\n  }\r\n  <fieldset>\r\n    <div id=\"batch-input\">\r\n      <div>\r\n        <mat-form-field class=\"full-width\">\r\n          <mat-label>operations</mat-label>\r\n          <textarea\r\n            class=\"code\"\r\n            matInput\r\n            [formControl]=\"text\"\r\n            rows=\"8\"\r\n            spellcheck=\"false\"\r\n          ></textarea>\r\n        </mat-form-field>\r\n        @if (parseError) {\r\n        <div class=\"error\">{{ parseError }}</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div id=\"batch-help\">\r\n      <ul>\r\n        <li>\r\n          <strong>replace</strong>:\r\n          <code>ATxRUN<strong>=</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>delete</strong>:\r\n          <code>ATxRUN<strong>-</strong></code>\r\n        </li>\r\n        <li>\r\n          <strong>add-before</strong>:\r\n          <code>ATxRUN<strong>+[</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>add-after</strong>:\r\n          <code>ATxRUN<strong>+]</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>move-before</strong>:\r\n          <code>ATxRUN<strong>&gt;[</strong>TO</code>\r\n        </li>\r\n        <li>\r\n          <strong>move-after</strong>:\r\n          <code>ATxRUN<strong>&gt;]</strong>TO</code>\r\n        </li>\r\n        <li>\r\n          <strong>swap</strong>:\r\n          <code>ATxRUN<strong>&lt;&gt;</strong>TOxRUN</code>\r\n        </li>\r\n        <li>\r\n          <strong>annotate</strong>:\r\n          <code>ATxRUN<strong>:</strong></code>\r\n        </li>\r\n      </ul>\r\n      <p>For all the operations:</p>\r\n      <ul>\r\n        <li>\r\n          prefix <code>(ITAG:OTAG)</code> to define input and/or output tags,\r\n          separated by colon.\r\n        </li>\r\n        <li>\r\n          prepend <code>&#x40;</code> to AT to use character indexes (0-N)\r\n          rather than IDs.\r\n        </li>\r\n        <li>RUN (where applicable) defaults to 1.</li>\r\n        <li>\r\n          append features like <code>[NAME OPERATOR VALUE]</code>, separated by\r\n          space, where:\r\n        </li>\r\n        <li>\r\n          <ol>\r\n            <li>\r\n              NAME is an arbitrary string. Prefixes:\r\n              <code>*</code>=global features, <code>!</code>=remove feature (no\r\n              value). Suffixes: <code>^</code>=short-lived (like\r\n              <code>*version^=alpha</code>).\r\n            </li>\r\n            <li>\r\n              OPERATOR is <code>=</code> (multiple), <code>:=</code> (single),\r\n              <code>==</code> (first-single).\r\n            </li>\r\n            <li>\r\n              VALUE is a string. If it includes spaces, wrap it in\r\n              <code>\"\"</code>.\r\n            </li>\r\n          </ol>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div class=\"form-row-center\">\r\n      @if (dialogRef) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-warn\"\r\n        mat-flat-button\r\n        matTooltip=\"Close dialog\"\r\n        (click)=\"close()\"\r\n      >\r\n        close\r\n      </button>\r\n      }\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Parse text into operations\"\r\n        [disabled]=\"!text.value || busy\"\r\n        (click)=\"parseOperations(text.value!)\"\r\n      >\r\n        batch add\r\n      </button>\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".full-width{width:100%}.error{color:red}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center}div#batch-help strong{color:#ff8c00}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BatchOperationEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BatchOperationEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-batch-operation-editor', imports: [
                         ReactiveFormsModule,
@@ -1152,7 +1102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatFormFieldModule,
                         MatIconModule,
                         MatInputModule,
-                    ], template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n  <div id=\"heading\">\r\n    <h2>Add Operations</h2>\r\n  </div>\r\n  }\r\n  <fieldset>\r\n    <div id=\"batch-input\">\r\n      <div>\r\n        <mat-form-field class=\"full-width\">\r\n          <mat-label>operations</mat-label>\r\n          <textarea\r\n            class=\"code\"\r\n            matInput\r\n            [formControl]=\"text\"\r\n            rows=\"8\"\r\n            spellcheck=\"false\"\r\n          ></textarea>\r\n        </mat-form-field>\r\n        @if (parseError) {\r\n        <div class=\"error\">{{ parseError }}</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div id=\"batch-help\">\r\n      <ul>\r\n        <li>\r\n          <strong>replace</strong>:\r\n          <code>ATxRUN<strong>=</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>delete</strong>:\r\n          <code>ATxRUN<strong>-</strong></code>\r\n        </li>\r\n        <li>\r\n          <strong>add-before</strong>:\r\n          <code>ATxRUN<strong>+[</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>add-after</strong>:\r\n          <code>ATxRUN<strong>+]</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>move-before</strong>:\r\n          <code>ATxRUN<strong>&gt;[</strong>TO</code>\r\n        </li>\r\n        <li>\r\n          <strong>move-after</strong>:\r\n          <code>ATxRUN<strong>&gt;]</strong>TO</code>\r\n        </li>\r\n        <li>\r\n          <strong>swap</strong>:\r\n          <code>ATxRUN<strong>&lt;&gt;</strong>TOxRUN</code>\r\n        </li>\r\n        <li>\r\n          <strong>annotate</strong>:\r\n          <code>ATxRUN<strong>:</strong></code>\r\n        </li>\r\n      </ul>\r\n      <p>For all the operations:</p>\r\n      <ul>\r\n        <li>\r\n          prefix <code>(ITAG:OTAG)</code> to define input and/or output tags,\r\n          separated by colon.\r\n        </li>\r\n        <li>\r\n          prepend <code>&#x40;</code> to AT to use character indexes (0-N)\r\n          rather than IDs.\r\n        </li>\r\n        <li>RUN (where applicable) defaults to 1.</li>\r\n        <li>\r\n          append features like <code>[NAME OPERATOR VALUE]</code>, separated by\r\n          space, where:\r\n        </li>\r\n        <li>\r\n          <ol>\r\n            <li>\r\n              NAME is an arbitrary string. Prefixes:\r\n              <code>*</code>=global features, <code>!</code>=remove feature (no\r\n              value). Suffixes: <code>^</code>=short-lived (like\r\n              <code>*version^=alpha</code>).\r\n            </li>\r\n            <li>\r\n              OPERATOR is <code>=</code> (multiple), <code>:=</code> (single),\r\n              <code>==</code> (first-single).\r\n            </li>\r\n            <li>\r\n              VALUE is a string. If it includes spaces, wrap it in\r\n              <code>\"\"</code>.\r\n            </li>\r\n          </ol>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div class=\"form-row-center\">\r\n      @if (dialogRef) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-warn\"\r\n        mat-flat-button\r\n        matTooltip=\"Close dialog\"\r\n        (click)=\"close()\"\r\n      >\r\n        close\r\n      </button>\r\n      }\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Parse text into operations\"\r\n        [disabled]=\"!text.value || busy\"\r\n        (click)=\"parseOperations()\"\r\n      >\r\n        batch add\r\n      </button>\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".full-width{width:100%}.error{color:red}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center}div#batch-help strong{color:#ff8c00}\n"] }]
+                    ], template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n  <div id=\"heading\">\r\n    <h2>Add Operations</h2>\r\n  </div>\r\n  }\r\n  <fieldset>\r\n    <div id=\"batch-input\">\r\n      <div>\r\n        <mat-form-field class=\"full-width\">\r\n          <mat-label>operations</mat-label>\r\n          <textarea\r\n            class=\"code\"\r\n            matInput\r\n            [formControl]=\"text\"\r\n            rows=\"8\"\r\n            spellcheck=\"false\"\r\n          ></textarea>\r\n        </mat-form-field>\r\n        @if (parseError) {\r\n        <div class=\"error\">{{ parseError }}</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div id=\"batch-help\">\r\n      <ul>\r\n        <li>\r\n          <strong>replace</strong>:\r\n          <code>ATxRUN<strong>=</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>delete</strong>:\r\n          <code>ATxRUN<strong>-</strong></code>\r\n        </li>\r\n        <li>\r\n          <strong>add-before</strong>:\r\n          <code>ATxRUN<strong>+[</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>add-after</strong>:\r\n          <code>ATxRUN<strong>+]</strong>\"VALUE\"</code>\r\n        </li>\r\n        <li>\r\n          <strong>move-before</strong>:\r\n          <code>ATxRUN<strong>&gt;[</strong>TO</code>\r\n        </li>\r\n        <li>\r\n          <strong>move-after</strong>:\r\n          <code>ATxRUN<strong>&gt;]</strong>TO</code>\r\n        </li>\r\n        <li>\r\n          <strong>swap</strong>:\r\n          <code>ATxRUN<strong>&lt;&gt;</strong>TOxRUN</code>\r\n        </li>\r\n        <li>\r\n          <strong>annotate</strong>:\r\n          <code>ATxRUN<strong>:</strong></code>\r\n        </li>\r\n      </ul>\r\n      <p>For all the operations:</p>\r\n      <ul>\r\n        <li>\r\n          prefix <code>(ITAG:OTAG)</code> to define input and/or output tags,\r\n          separated by colon.\r\n        </li>\r\n        <li>\r\n          prepend <code>&#x40;</code> to AT to use character indexes (0-N)\r\n          rather than IDs.\r\n        </li>\r\n        <li>RUN (where applicable) defaults to 1.</li>\r\n        <li>\r\n          append features like <code>[NAME OPERATOR VALUE]</code>, separated by\r\n          space, where:\r\n        </li>\r\n        <li>\r\n          <ol>\r\n            <li>\r\n              NAME is an arbitrary string. Prefixes:\r\n              <code>*</code>=global features, <code>!</code>=remove feature (no\r\n              value). Suffixes: <code>^</code>=short-lived (like\r\n              <code>*version^=alpha</code>).\r\n            </li>\r\n            <li>\r\n              OPERATOR is <code>=</code> (multiple), <code>:=</code> (single),\r\n              <code>==</code> (first-single).\r\n            </li>\r\n            <li>\r\n              VALUE is a string. If it includes spaces, wrap it in\r\n              <code>\"\"</code>.\r\n            </li>\r\n          </ol>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div class=\"form-row-center\">\r\n      @if (dialogRef) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-warn\"\r\n        mat-flat-button\r\n        matTooltip=\"Close dialog\"\r\n        (click)=\"close()\"\r\n      >\r\n        close\r\n      </button>\r\n      }\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Parse text into operations\"\r\n        [disabled]=\"!text.value || busy\"\r\n        (click)=\"parseOperations(text.value!)\"\r\n      >\r\n        batch add\r\n      </button>\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".full-width{width:100%}.error{color:red}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center}div#batch-help strong{color:#ff8c00}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: GveApiService }, { type: i3$1.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -1160,11 +1110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }, {
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }], propDecorators: { preset: [{
-                type: Input
-            }], operationsChange: [{
-                type: Output
-            }] } });
+                }] }] });
 
 /**
  * 🔑 `gve-operation-source-editor`
@@ -1183,28 +1129,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * edit is canceled.
  */
 class OperationSourceEditorComponent {
-    /**
-     * The source to edit.
-     */
-    get source() {
-        return this._source;
-    }
-    set source(value) {
-        if (this._source === value) {
-            return;
-        }
-        this._source = value || undefined;
-        this.updateForm(this._source);
-    }
     constructor(formBuilder) {
+        /**
+         * The source to edit.
+         */
+        this.source = model();
+        /**
+         * The list of source IDs when it's a closed set.
+         */
+        this.ids = input();
+        /**
+         * The list of source types when it's a closed set.
+         */
+        this.types = input();
         /**
          * The event emitted when the source changes.
          */
-        this.sourceChange = new EventEmitter();
+        this.sourceChange = output();
         /**
          * The event emitted when the edit is canceled.
          */
-        this.sourceCancel = new EventEmitter();
+        this.sourceCancel = output();
         this.id = new FormControl('', {
             validators: [Validators.required, Validators.maxLength(50)],
             nonNullable: true,
@@ -1225,6 +1170,10 @@ class OperationSourceEditorComponent {
             rank: this.rank,
             note: this.note,
         });
+        // when source changes, update form
+        effect(() => {
+            this.updateForm(this.source());
+        });
     }
     updateForm(source) {
         if (!source) {
@@ -1244,18 +1193,18 @@ class OperationSourceEditorComponent {
         if (this.form.invalid) {
             return;
         }
-        this._source = {
+        this.source.set({
             id: this.id.value,
             type: this.type.value,
             rank: this.rank.value,
             note: this.note.value || undefined,
-        };
-        this.sourceChange.emit(this._source);
+        });
+        this.sourceChange.emit(this.source());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: OperationSourceEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: OperationSourceEditorComponent, isStandalone: true, selector: "gve-operation-source-editor", inputs: { source: "source", ids: "ids", types: "types" }, outputs: { sourceChange: "sourceChange", sourceCancel: "sourceCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- id -->\r\n    <!-- id (bound) -->\r\n    @if (ids?.length) {\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <mat-select [formControl]=\"id\">\r\n        @for (i of ids; track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- id (free) -->\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <input matInput [formControl]=\"id\" />\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      } @if ($any(id.errors)?.maxLength && (id.dirty || id.touched)) {\r\n      <mat-error>id too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- type (bound) -->\r\n    @if (types?.length) {\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        @for (i of types; track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- type (free) -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <input matInput [formControl]=\"type\" />\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      } @if ($any(type.errors)?.maxLength && (type.dirty || type.touched)) {\r\n      <mat-error>type too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- rank -->\r\n    <mat-form-field class=\"nr\">\r\n      <mat-label>rank</mat-label>\r\n      <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea matInput [formControl]=\"note\" class=\"long-text\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".long-text{width:100%;max-width:800px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:5em}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OperationSourceEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: OperationSourceEditorComponent, isStandalone: true, selector: "gve-operation-source-editor", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, ids: { classPropertyName: "ids", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null }, types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", sourceChange: "sourceChange", sourceCancel: "sourceCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- id -->\r\n    <!-- id (bound) -->\r\n    @if (ids()?.length) {\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <mat-select [formControl]=\"id\">\r\n        @for (i of ids(); track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- id (free) -->\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <input matInput [formControl]=\"id\" />\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      } @if ($any(id.errors)?.maxLength && (id.dirty || id.touched)) {\r\n      <mat-error>id too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- type (bound) -->\r\n    @if (types()?.length) {\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        @for (i of types(); track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- type (free) -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <input matInput [formControl]=\"type\" />\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      } @if ($any(type.errors)?.maxLength && (type.dirty || type.touched)) {\r\n      <mat-error>type too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- rank -->\r\n    <mat-form-field class=\"nr\">\r\n      <mat-label>rank</mat-label>\r\n      <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea matInput [formControl]=\"note\" class=\"long-text\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".long-text{width:100%;max-width:800px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:5em}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: OperationSourceEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OperationSourceEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-operation-source-editor', imports: [
                         CommonModule,
@@ -1266,18 +1215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatInputModule,
                         MatSelectModule,
                         MatTooltipModule,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- id -->\r\n    <!-- id (bound) -->\r\n    @if (ids?.length) {\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <mat-select [formControl]=\"id\">\r\n        @for (i of ids; track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- id (free) -->\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <input matInput [formControl]=\"id\" />\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      } @if ($any(id.errors)?.maxLength && (id.dirty || id.touched)) {\r\n      <mat-error>id too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- type (bound) -->\r\n    @if (types?.length) {\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        @for (i of types; track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- type (free) -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <input matInput [formControl]=\"type\" />\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      } @if ($any(type.errors)?.maxLength && (type.dirty || type.touched)) {\r\n      <mat-error>type too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- rank -->\r\n    <mat-form-field class=\"nr\">\r\n      <mat-label>rank</mat-label>\r\n      <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea matInput [formControl]=\"note\" class=\"long-text\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".long-text{width:100%;max-width:800px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:5em}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { source: [{
-                type: Input
-            }], ids: [{
-                type: Input
-            }], types: [{
-                type: Input
-            }], sourceChange: [{
-                type: Output
-            }], sourceCancel: [{
-                type: Output
-            }] } });
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- id -->\r\n    <!-- id (bound) -->\r\n    @if (ids()?.length) {\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <mat-select [formControl]=\"id\">\r\n        @for (i of ids(); track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- id (free) -->\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <input matInput [formControl]=\"id\" />\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      } @if ($any(id.errors)?.maxLength && (id.dirty || id.touched)) {\r\n      <mat-error>id too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- type (bound) -->\r\n    @if (types()?.length) {\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        @for (i of types(); track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- type (free) -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <input matInput [formControl]=\"type\" />\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      } @if ($any(type.errors)?.maxLength && (type.dirty || type.touched)) {\r\n      <mat-error>type too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- rank -->\r\n    <mat-form-field class=\"nr\">\r\n      <mat-label>rank</mat-label>\r\n      <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea matInput [formControl]=\"note\" class=\"long-text\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".long-text{width:100%;max-width:800px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:5em}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 /**
  * Validators for SVG.
@@ -1495,10 +1434,10 @@ class SettingsService {
         // for when the cache was not in sync with the local storage
         removedKeys.forEach((key) => this._subject.next(key));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SettingsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1556,36 +1495,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * as a whole.
  */
 class ChainOperationEditorComponent {
-    /**
-     * The operation to edit.
-     */
-    get operation() {
-        return this._operation || undefined;
-    }
-    set operation(value) {
-        if (this._operation === value) {
-            return;
-        }
-        this._operation = value;
-        this.updateForm(value);
-    }
-    /**
-     * The snapshot the operation refers to.
-     */
-    get snapshot() {
-        return this._snapshot;
-    }
-    set snapshot(value) {
-        if (this._snapshot === value) {
-            return;
-        }
-        const dirty = this.hasTextChanges(value || undefined);
-        this._snapshot = value || undefined;
-        if (dirty) {
-            this.requestPreview();
-            this._editorModel?.setValue(this.svg.value || '');
-        }
-    }
     constructor(formBuilder, _clipboard, _settings, _dialogService) {
         this._clipboard = _clipboard;
         this._settings = _settings;
@@ -1594,18 +1503,30 @@ class ChainOperationEditorComponent {
         this._disposables = [];
         this._nanoid = customAlphabet('1234567890abcdef', 10);
         this._editedSourceIndex = -1;
+        /**
+         * The operation to edit.
+         */
+        this.operation = model();
+        /**
+         * The snapshot the operation refers to.
+         */
+        this.snapshot = input();
+        /**
+         * Whether to hide the preview request button.
+         */
+        this.hidePreview = input();
         /**
          * Emitted when the operation is changed.
          */
-        this.operationChange = new EventEmitter();
+        this.operationChange = output();
         /**
          * Emitted when the operation preview is requested.
          */
-        this.operationPreview = new EventEmitter();
+        this.operationPreview = output();
         /**
          * Emitted when operation editing is cancelled.
          */
-        this.operationCancel = new EventEmitter();
+        this.operationCancel = output();
         this.tabIndex = 0;
         this.hasTo = false;
         this.hasToRun = false;
@@ -1669,6 +1590,19 @@ class ChainOperationEditorComponent {
         });
         // SVG elements
         this.elements = [];
+        // when operation changes, update form
+        effect(() => {
+            this.updateForm(this.operation());
+        });
+        // when snapshot changes, update SVG
+        effect(() => {
+            const snapshot = this.snapshot();
+            const dirty = this.hasTextChanges(snapshot || undefined);
+            if (dirty) {
+                this.requestPreview();
+                this._editorModel?.setValue(this.svg.value || '');
+            }
+        });
     }
     ngOnInit() {
         // whenever svg or base change, update preview
@@ -1687,25 +1621,25 @@ class ChainOperationEditorComponent {
         }
     }
     hasTextChanges(snapshot) {
-        if ((!snapshot && this._snapshot) || (snapshot && !this._snapshot)) {
+        if ((!snapshot && this.snapshot()) || (snapshot && !this.snapshot())) {
             return true;
         }
-        if (snapshot?.size?.width !== this._snapshot?.size?.width ||
-            snapshot?.size?.height !== this._snapshot?.size?.height) {
+        if (snapshot?.size?.width !== this.snapshot()?.size?.width ||
+            snapshot?.size?.height !== this.snapshot()?.size?.height) {
             return true;
         }
-        if (snapshot?.style !== this._snapshot?.style ||
-            snapshot?.text !== this._snapshot?.text ||
-            snapshot?.textStyle !== this._snapshot?.textStyle) {
+        if (snapshot?.style !== this.snapshot()?.style ||
+            snapshot?.text !== this.snapshot()?.text ||
+            snapshot?.textStyle !== this.snapshot()?.textStyle) {
             return true;
         }
         // compare textOptions returning true if any different
         const options = snapshot?.textOptions;
         if (options?.lineHeightOffset !==
-            this._snapshot?.textOptions?.lineHeightOffset ||
+            this.snapshot()?.textOptions?.lineHeightOffset ||
             options?.charSpacingOffset !==
-                this._snapshot?.textOptions?.charSpacingOffset ||
-            options?.spcWidthOffset !== this._snapshot?.textOptions?.spcWidthOffset) {
+                this.snapshot()?.textOptions?.charSpacingOffset ||
+            options?.spcWidthOffset !== this.snapshot()?.textOptions?.spcWidthOffset) {
             return true;
         }
         return false;
@@ -1895,6 +1829,7 @@ class ChainOperationEditorComponent {
                 ...this.elementFeatures.value,
                 [this.editedElementId]: features,
             });
+            this.editedElementId = undefined;
         }
     }
     // #endregion
@@ -1999,25 +1934,26 @@ class ChainOperationEditorComponent {
         if (!this.form.valid) {
             return;
         }
-        this._operation = this.getOperation();
-        this.operationChange.emit(this._operation);
+        this.operation.set(this.getOperation());
+        this.operationChange.emit(this.operation());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ChainOperationEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i2$3.Clipboard }, { token: SettingsService }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ChainOperationEditorComponent, isStandalone: true, selector: "gve-chain-operation-editor", inputs: { operation: "operation", snapshot: "snapshot", hidePreview: "hidePreview" }, outputs: { operationChange: "operationChange", operationPreview: "operationPreview", operationCancel: "operationCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group\r\n    [selectedIndex]=\"tabIndex\"\r\n    (selectedIndexChange)=\"onTabIndexChange($event)\"\r\n  >\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n          </mat-select>\r\n          <mat-error\r\n            *ngIf=\"$any(type).errors?.required && (type.dirty || type.touched)\"\r\n            >type required</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(at).errors?.required && (at.dirty || at.touched)\"\r\n            >at required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(run).errors?.required && (run.dirty || run.touched)\"\r\n            >run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to</mat-label>\r\n          <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(to).errors?.required && (to.dirty || to.touched)\"\r\n            >to required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- toAsIndex -->\r\n        <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- toRun -->\r\n        @if (hasToRun) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to run</mat-label>\r\n          <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n            \"\r\n            >to run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n        } }\r\n\r\n        <!-- value -->\r\n        @if (hasValue) {\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(rank).errors?.required && (rank.dirty || rank.touched)\"\r\n            >rank required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(groupId).errors?.required &&\r\n              (groupId.dirty || groupId.touched)\r\n            \"\r\n            >group ID required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [features]=\"features.value\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          ></gve-feature-set-editor>\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                (click)=\"editSource($index)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button type=\"button\" mat-icon-button color=\"warn\">\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>{{ s.type }}</td>\r\n            <td>{{ s.id }}</td>\r\n            <td>{{ s.rank }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- source editor -->\r\n      <mat-expansion-panel [disabled]=\"!editedSource\" [expanded]=\"editedSource\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>source</mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <gve-operation-source-editor\r\n          [source]=\"editedSource\"\r\n          (sourceChange)=\"onSourceChange($event!)\"\r\n          (sourceCancel)=\"closeSource()\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DIPLOMATIC -->\r\n    <mat-tab label=\"diplomatic\">\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          id=\"btn-save\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Save to file\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"saveSvg()\"\r\n        >\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-load\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Load from file\"\r\n          (click)=\"loadSvg()\"\r\n        >\r\n          <mat-icon>folder</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-copy\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Copy\"\r\n          [cdkCopyToClipboard]=\"svg.value\"\r\n        >\r\n          <mat-icon>content_copy</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-paste\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Set SVG from clipboard\"\r\n          (click)=\"setSvgFromClipboard()\"\r\n        >\r\n          <mat-icon>content_paste_go</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-editor\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Open SVG external editor\"\r\n          (click)=\"openSvgEditor()\"\r\n        >\r\n          <mat-icon>launch</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-decimals\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Remove decimals\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"removeDecimals()\"\r\n        >\r\n          <mat-icon>pin</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-group\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Wrap code in group\"\r\n          (click)=\"wrapInGroup()\"\r\n        >\r\n          <mat-icon>code</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div id=\"code\">\r\n        <nge-monaco-editor\r\n          style=\"--editor-height: 400px\"\r\n          (ready)=\"onCreateEditor($event)\"\r\n        />\r\n        @if (svg.invalid) {\r\n        <mat-error>invalid SVG</mat-error>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- ELEMENTS -->\r\n    <mat-tab label=\"elements\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>id</th>\r\n            <th>visual</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (e of elements; track e.id) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                matTooltip=\"Edit element features\"\r\n                (click)=\"editElementFeatures(e)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"warn\"\r\n                matTooltip=\"Delete all element features\"\r\n                (click)=\"deleteElementFeatures(e)\"\r\n                [disabled]=\"!$any(elementFeatures.value[e.id])?.length\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n              <span>{{ $any(elementFeatures.value[e.id])?.length || 0 }}</span>\r\n            </td>\r\n            <td class=\"feat-count\">{{ e.id }}</td>\r\n            <td class=\"svg-cell\">\r\n              <svg [innerHTML]=\"e.outerHTML | safeHtml : 'html'\"></svg>\r\n            </td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n\r\n      <mat-expansion-panel\r\n        [disabled]=\"!editedElementId\"\r\n        [expanded]=\"editedElementId\"\r\n      >\r\n        <mat-expansion-panel-header>element</mat-expansion-panel-header>\r\n        <gve-feature-set-editor\r\n          [features]=\"elementFeatures.value[editedElementId!] || []\"\r\n          (featuresChange)=\"onElementFeaturesChange($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DP FEATS -->\r\n    <mat-tab label=\"d-features\">\r\n      <div>\r\n        <mat-checkbox [formControl]=\"newTextHidden\">hide new text</mat-checkbox>\r\n      </div>\r\n      <gve-feature-set-editor\r\n        [features]=\"dpFeatures.value\"\r\n        (featuresChange)=\"onDpFeaturesChange($event)\"\r\n      ></gve-feature-set-editor>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview) {\r\n    <button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Preview operation\"\r\n      (click)=\"requestPreview()\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n    </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid silver}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:5em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:#beb9b9;color:#fff;margin-top:-16px}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:silver}table{width:100%;border-collapse:collapse;margin:8px 0}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}td.feat-count{vertical-align:super;font-size:smaller}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr{border-bottom:1px solid silver}th,td{text-align:center}#btn-save{color:#072d3e}#btn-load{color:#dbd112}#btn-copy{color:#22549f}#btn-preview{color:#095409}#code{height:500px;border:1px solid silver}#monaco{height:100%}.svg-cell{padding:0 8px}.svg-cell svg{border:1px solid silver;width:100%;height:auto}#preview{box-sizing:border-box;width:100%;border:1px solid silver;border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:#e5e5e5}.child-title{font-weight:700;margin:0;background-color:#ccc;color:#fff;padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid silver;border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid silver;border-radius:6px;margin:8px 0}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChainOperationEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i2$3.Clipboard }, { token: SettingsService }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: ChainOperationEditorComponent, isStandalone: true, selector: "gve-chain-operation-editor", inputs: { operation: { classPropertyName: "operation", publicName: "operation", isSignal: true, isRequired: false, transformFunction: null }, snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, hidePreview: { classPropertyName: "hidePreview", publicName: "hidePreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operation: "operationChange", operationChange: "operationChange", operationPreview: "operationPreview", operationCancel: "operationCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group\r\n    [selectedIndex]=\"tabIndex\"\r\n    (selectedIndexChange)=\"onTabIndexChange($event)\"\r\n  >\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n          </mat-select>\r\n          <mat-error\r\n            *ngIf=\"$any(type).errors?.required && (type.dirty || type.touched)\"\r\n            >type required</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(at).errors?.required && (at.dirty || at.touched)\"\r\n            >at required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(run).errors?.required && (run.dirty || run.touched)\"\r\n            >run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to</mat-label>\r\n          <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(to).errors?.required && (to.dirty || to.touched)\"\r\n            >to required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- toAsIndex -->\r\n        <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- toRun -->\r\n        @if (hasToRun) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to run</mat-label>\r\n          <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n            \"\r\n            >to run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n        } }\r\n\r\n        <!-- value -->\r\n        @if (hasValue) {\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(rank).errors?.required && (rank.dirty || rank.touched)\"\r\n            >rank required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(groupId).errors?.required &&\r\n              (groupId.dirty || groupId.touched)\r\n            \"\r\n            >group ID required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [features]=\"features.value\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          ></gve-feature-set-editor>\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                (click)=\"editSource($index)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button type=\"button\" mat-icon-button color=\"warn\">\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>{{ s.type }}</td>\r\n            <td>{{ s.id }}</td>\r\n            <td>{{ s.rank }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- source editor -->\r\n      <mat-expansion-panel [disabled]=\"!editedSource\" [expanded]=\"editedSource\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>source</mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <gve-operation-source-editor\r\n          [source]=\"editedSource\"\r\n          (sourceChange)=\"onSourceChange($event!)\"\r\n          (sourceCancel)=\"closeSource()\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DIPLOMATIC -->\r\n    <mat-tab label=\"diplomatic\">\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          id=\"btn-save\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Save to file\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"saveSvg()\"\r\n        >\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-load\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Load from file\"\r\n          (click)=\"loadSvg()\"\r\n        >\r\n          <mat-icon>folder</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-copy\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Copy\"\r\n          [cdkCopyToClipboard]=\"svg.value\"\r\n        >\r\n          <mat-icon>content_copy</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-paste\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Set SVG from clipboard\"\r\n          (click)=\"setSvgFromClipboard()\"\r\n        >\r\n          <mat-icon>content_paste_go</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-editor\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Open SVG external editor\"\r\n          (click)=\"openSvgEditor()\"\r\n        >\r\n          <mat-icon>launch</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-decimals\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Remove decimals\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"removeDecimals()\"\r\n        >\r\n          <mat-icon>pin</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-group\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Wrap code in group\"\r\n          (click)=\"wrapInGroup()\"\r\n        >\r\n          <mat-icon>code</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div id=\"code\">\r\n        <nge-monaco-editor\r\n          style=\"--editor-height: 400px\"\r\n          (ready)=\"onCreateEditor($event)\"\r\n        />\r\n        @if (svg.invalid) {\r\n        <mat-error>invalid SVG</mat-error>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- ELEMENTS -->\r\n    <mat-tab label=\"elements\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>id</th>\r\n            <th>visual</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (e of elements; track e.id) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                matTooltip=\"Edit element features\"\r\n                (click)=\"editElementFeatures(e)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"warn\"\r\n                matTooltip=\"Delete all element features\"\r\n                (click)=\"deleteElementFeatures(e)\"\r\n                [disabled]=\"!$any(elementFeatures.value)[e.id]?.length\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>\r\n              <span\r\n                [matBadge]=\"$any(elementFeatures.value)[e.id]?.length || 0\"\r\n                [matBadgeHidden]=\"!$any(elementFeatures.value)[e.id]?.length\"\r\n                matBadgeOverlap=\"false\"\r\n                >{{ e.id }}</span\r\n              >\r\n            </td>\r\n            <td class=\"svg-cell\">\r\n              <svg [innerHTML]=\"e.outerHTML | safeHtml : 'html'\"></svg>\r\n            </td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n\r\n      <mat-expansion-panel\r\n        [disabled]=\"!editedElementId\"\r\n        [expanded]=\"editedElementId\"\r\n      >\r\n        <mat-expansion-panel-header>{{\r\n          editedElementId\r\n        }}</mat-expansion-panel-header>\r\n        <gve-feature-set-editor\r\n          [features]=\"elementFeatures.value[editedElementId!] || []\"\r\n          (featuresChange)=\"onElementFeaturesChange($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DP FEATS -->\r\n    <mat-tab label=\"d-features\">\r\n      <div>\r\n        <mat-checkbox [formControl]=\"newTextHidden\">hide new text</mat-checkbox>\r\n      </div>\r\n      <gve-feature-set-editor\r\n        [features]=\"dpFeatures.value\"\r\n        (featuresChange)=\"onDpFeaturesChange($event)\"\r\n      ></gve-feature-set-editor>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n    <button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Preview operation\"\r\n      (click)=\"requestPreview()\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n    </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid silver}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:5em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:#beb9b9;color:#fff;margin-top:-16px}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:silver}table{width:100%;border-collapse:collapse;margin:8px 0}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr{border-bottom:1px solid silver}th,td{text-align:center}#btn-save{color:#072d3e}#btn-load{color:#dbd112}#btn-copy{color:#22549f}#btn-preview{color:#095409}#code{height:500px;border:1px solid silver}#monaco{height:100%}.svg-cell{padding:0 8px}.svg-cell svg{border:1px solid silver;width:100%;height:auto}#preview{box-sizing:border-box;width:100%;border:1px solid silver;border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:#e5e5e5}.child-title{font-weight:700;margin:0;background-color:#ccc;color:#fff;padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid silver;border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid silver;border-radius:6px;margin:8px 0}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
                 // material
-                ClipboardModule }, { kind: "directive", type: i2$3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i15.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i15.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: 
+                ClipboardModule }, { kind: "directive", type: i2$3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i6$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i16.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i16.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: 
                 // monaco
-                NgeMonacoModule }, { kind: "component", type: i16.NgeMonacoEditorComponent, selector: "nge-monaco-editor", inputs: ["autoLayout", "options"], outputs: ["ready"] }, { kind: "pipe", type: 
+                NgeMonacoModule }, { kind: "component", type: i17.NgeMonacoEditorComponent, selector: "nge-monaco-editor", inputs: ["autoLayout", "options"], outputs: ["ready"] }, { kind: "pipe", type: 
                 // myrmex
                 SafeHtmlPipe, name: "safeHtml" }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "filterThreshold", "features"], outputs: ["featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-chain-operation-editor', imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         // material
                         ClipboardModule,
+                        MatBadgeModule,
                         MatButtonModule,
                         MatCheckboxModule,
                         MatExpansionModule,
@@ -2033,20 +1969,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         SafeHtmlPipe,
                         FeatureSetEditorComponent,
                         OperationSourceEditorComponent,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group\r\n    [selectedIndex]=\"tabIndex\"\r\n    (selectedIndexChange)=\"onTabIndexChange($event)\"\r\n  >\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n          </mat-select>\r\n          <mat-error\r\n            *ngIf=\"$any(type).errors?.required && (type.dirty || type.touched)\"\r\n            >type required</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(at).errors?.required && (at.dirty || at.touched)\"\r\n            >at required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(run).errors?.required && (run.dirty || run.touched)\"\r\n            >run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to</mat-label>\r\n          <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(to).errors?.required && (to.dirty || to.touched)\"\r\n            >to required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- toAsIndex -->\r\n        <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- toRun -->\r\n        @if (hasToRun) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to run</mat-label>\r\n          <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n            \"\r\n            >to run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n        } }\r\n\r\n        <!-- value -->\r\n        @if (hasValue) {\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(rank).errors?.required && (rank.dirty || rank.touched)\"\r\n            >rank required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(groupId).errors?.required &&\r\n              (groupId.dirty || groupId.touched)\r\n            \"\r\n            >group ID required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [features]=\"features.value\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          ></gve-feature-set-editor>\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                (click)=\"editSource($index)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button type=\"button\" mat-icon-button color=\"warn\">\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>{{ s.type }}</td>\r\n            <td>{{ s.id }}</td>\r\n            <td>{{ s.rank }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- source editor -->\r\n      <mat-expansion-panel [disabled]=\"!editedSource\" [expanded]=\"editedSource\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>source</mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <gve-operation-source-editor\r\n          [source]=\"editedSource\"\r\n          (sourceChange)=\"onSourceChange($event!)\"\r\n          (sourceCancel)=\"closeSource()\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DIPLOMATIC -->\r\n    <mat-tab label=\"diplomatic\">\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          id=\"btn-save\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Save to file\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"saveSvg()\"\r\n        >\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-load\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Load from file\"\r\n          (click)=\"loadSvg()\"\r\n        >\r\n          <mat-icon>folder</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-copy\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Copy\"\r\n          [cdkCopyToClipboard]=\"svg.value\"\r\n        >\r\n          <mat-icon>content_copy</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-paste\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Set SVG from clipboard\"\r\n          (click)=\"setSvgFromClipboard()\"\r\n        >\r\n          <mat-icon>content_paste_go</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-editor\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Open SVG external editor\"\r\n          (click)=\"openSvgEditor()\"\r\n        >\r\n          <mat-icon>launch</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-decimals\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Remove decimals\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"removeDecimals()\"\r\n        >\r\n          <mat-icon>pin</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-group\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Wrap code in group\"\r\n          (click)=\"wrapInGroup()\"\r\n        >\r\n          <mat-icon>code</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div id=\"code\">\r\n        <nge-monaco-editor\r\n          style=\"--editor-height: 400px\"\r\n          (ready)=\"onCreateEditor($event)\"\r\n        />\r\n        @if (svg.invalid) {\r\n        <mat-error>invalid SVG</mat-error>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- ELEMENTS -->\r\n    <mat-tab label=\"elements\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>id</th>\r\n            <th>visual</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (e of elements; track e.id) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                matTooltip=\"Edit element features\"\r\n                (click)=\"editElementFeatures(e)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"warn\"\r\n                matTooltip=\"Delete all element features\"\r\n                (click)=\"deleteElementFeatures(e)\"\r\n                [disabled]=\"!$any(elementFeatures.value[e.id])?.length\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n              <span>{{ $any(elementFeatures.value[e.id])?.length || 0 }}</span>\r\n            </td>\r\n            <td class=\"feat-count\">{{ e.id }}</td>\r\n            <td class=\"svg-cell\">\r\n              <svg [innerHTML]=\"e.outerHTML | safeHtml : 'html'\"></svg>\r\n            </td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n\r\n      <mat-expansion-panel\r\n        [disabled]=\"!editedElementId\"\r\n        [expanded]=\"editedElementId\"\r\n      >\r\n        <mat-expansion-panel-header>element</mat-expansion-panel-header>\r\n        <gve-feature-set-editor\r\n          [features]=\"elementFeatures.value[editedElementId!] || []\"\r\n          (featuresChange)=\"onElementFeaturesChange($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DP FEATS -->\r\n    <mat-tab label=\"d-features\">\r\n      <div>\r\n        <mat-checkbox [formControl]=\"newTextHidden\">hide new text</mat-checkbox>\r\n      </div>\r\n      <gve-feature-set-editor\r\n        [features]=\"dpFeatures.value\"\r\n        (featuresChange)=\"onDpFeaturesChange($event)\"\r\n      ></gve-feature-set-editor>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview) {\r\n    <button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Preview operation\"\r\n      (click)=\"requestPreview()\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n    </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid silver}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:5em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:#beb9b9;color:#fff;margin-top:-16px}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:silver}table{width:100%;border-collapse:collapse;margin:8px 0}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}td.feat-count{vertical-align:super;font-size:smaller}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr{border-bottom:1px solid silver}th,td{text-align:center}#btn-save{color:#072d3e}#btn-load{color:#dbd112}#btn-copy{color:#22549f}#btn-preview{color:#095409}#code{height:500px;border:1px solid silver}#monaco{height:100%}.svg-cell{padding:0 8px}.svg-cell svg{border:1px solid silver;width:100%;height:auto}#preview{box-sizing:border-box;width:100%;border:1px solid silver;border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:#e5e5e5}.child-title{font-weight:700;margin:0;background-color:#ccc;color:#fff;padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid silver;border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid silver;border-radius:6px;margin:8px 0}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$3.Clipboard }, { type: SettingsService }, { type: i2$1.DialogService }], propDecorators: { operation: [{
-                type: Input
-            }], snapshot: [{
-                type: Input
-            }], hidePreview: [{
-                type: Input
-            }], operationChange: [{
-                type: Output
-            }], operationPreview: [{
-                type: Output
-            }], operationCancel: [{
-                type: Output
-            }] } });
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group\r\n    [selectedIndex]=\"tabIndex\"\r\n    (selectedIndexChange)=\"onTabIndexChange($event)\"\r\n  >\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n          </mat-select>\r\n          <mat-error\r\n            *ngIf=\"$any(type).errors?.required && (type.dirty || type.touched)\"\r\n            >type required</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(at).errors?.required && (at.dirty || at.touched)\"\r\n            >at required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(run).errors?.required && (run.dirty || run.touched)\"\r\n            >run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to</mat-label>\r\n          <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(to).errors?.required && (to.dirty || to.touched)\"\r\n            >to required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- toAsIndex -->\r\n        <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- toRun -->\r\n        @if (hasToRun) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to run</mat-label>\r\n          <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n            \"\r\n            >to run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n        } }\r\n\r\n        <!-- value -->\r\n        @if (hasValue) {\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(rank).errors?.required && (rank.dirty || rank.touched)\"\r\n            >rank required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(groupId).errors?.required &&\r\n              (groupId.dirty || groupId.touched)\r\n            \"\r\n            >group ID required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [features]=\"features.value\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          ></gve-feature-set-editor>\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                (click)=\"editSource($index)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button type=\"button\" mat-icon-button color=\"warn\">\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>{{ s.type }}</td>\r\n            <td>{{ s.id }}</td>\r\n            <td>{{ s.rank }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- source editor -->\r\n      <mat-expansion-panel [disabled]=\"!editedSource\" [expanded]=\"editedSource\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>source</mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <gve-operation-source-editor\r\n          [source]=\"editedSource\"\r\n          (sourceChange)=\"onSourceChange($event!)\"\r\n          (sourceCancel)=\"closeSource()\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DIPLOMATIC -->\r\n    <mat-tab label=\"diplomatic\">\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          id=\"btn-save\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Save to file\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"saveSvg()\"\r\n        >\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-load\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Load from file\"\r\n          (click)=\"loadSvg()\"\r\n        >\r\n          <mat-icon>folder</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-copy\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Copy\"\r\n          [cdkCopyToClipboard]=\"svg.value\"\r\n        >\r\n          <mat-icon>content_copy</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-paste\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Set SVG from clipboard\"\r\n          (click)=\"setSvgFromClipboard()\"\r\n        >\r\n          <mat-icon>content_paste_go</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-editor\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Open SVG external editor\"\r\n          (click)=\"openSvgEditor()\"\r\n        >\r\n          <mat-icon>launch</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-decimals\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Remove decimals\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"removeDecimals()\"\r\n        >\r\n          <mat-icon>pin</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-group\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Wrap code in group\"\r\n          (click)=\"wrapInGroup()\"\r\n        >\r\n          <mat-icon>code</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div id=\"code\">\r\n        <nge-monaco-editor\r\n          style=\"--editor-height: 400px\"\r\n          (ready)=\"onCreateEditor($event)\"\r\n        />\r\n        @if (svg.invalid) {\r\n        <mat-error>invalid SVG</mat-error>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- ELEMENTS -->\r\n    <mat-tab label=\"elements\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>id</th>\r\n            <th>visual</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (e of elements; track e.id) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                matTooltip=\"Edit element features\"\r\n                (click)=\"editElementFeatures(e)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"warn\"\r\n                matTooltip=\"Delete all element features\"\r\n                (click)=\"deleteElementFeatures(e)\"\r\n                [disabled]=\"!$any(elementFeatures.value)[e.id]?.length\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>\r\n              <span\r\n                [matBadge]=\"$any(elementFeatures.value)[e.id]?.length || 0\"\r\n                [matBadgeHidden]=\"!$any(elementFeatures.value)[e.id]?.length\"\r\n                matBadgeOverlap=\"false\"\r\n                >{{ e.id }}</span\r\n              >\r\n            </td>\r\n            <td class=\"svg-cell\">\r\n              <svg [innerHTML]=\"e.outerHTML | safeHtml : 'html'\"></svg>\r\n            </td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n\r\n      <mat-expansion-panel\r\n        [disabled]=\"!editedElementId\"\r\n        [expanded]=\"editedElementId\"\r\n      >\r\n        <mat-expansion-panel-header>{{\r\n          editedElementId\r\n        }}</mat-expansion-panel-header>\r\n        <gve-feature-set-editor\r\n          [features]=\"elementFeatures.value[editedElementId!] || []\"\r\n          (featuresChange)=\"onElementFeaturesChange($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DP FEATS -->\r\n    <mat-tab label=\"d-features\">\r\n      <div>\r\n        <mat-checkbox [formControl]=\"newTextHidden\">hide new text</mat-checkbox>\r\n      </div>\r\n      <gve-feature-set-editor\r\n        [features]=\"dpFeatures.value\"\r\n        (featuresChange)=\"onDpFeaturesChange($event)\"\r\n      ></gve-feature-set-editor>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n    <button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Preview operation\"\r\n      (click)=\"requestPreview()\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n    </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid silver}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:5em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:#beb9b9;color:#fff;margin-top:-16px}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:silver}table{width:100%;border-collapse:collapse;margin:8px 0}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr{border-bottom:1px solid silver}th,td{text-align:center}#btn-save{color:#072d3e}#btn-load{color:#dbd112}#btn-copy{color:#22549f}#btn-preview{color:#095409}#code{height:500px;border:1px solid silver}#monaco{height:100%}.svg-cell{padding:0 8px}.svg-cell svg{border:1px solid silver;width:100%;height:auto}#preview{box-sizing:border-box;width:100%;border:1px solid silver;border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:#e5e5e5}.child-title{font-weight:700;margin:0;background-color:#ccc;color:#fff;padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid silver;border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid silver;border-radius:6px;margin:8px 0}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$3.Clipboard }, { type: SettingsService }, { type: i2$1.DialogService }] });
 
 /**
  * 🔑 `gve-feature-set-view`
@@ -2066,34 +1990,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * is greater than the threshold. Default is 5.
  */
 class FeatureSetViewComponent {
-    /**
-     * The features.
-     */
-    get features() {
-        return this._features;
-    }
-    set features(value) {
-        if (this._features === value) {
-            return;
-        }
-        this._features = value || undefined;
-        this.filter.reset();
-        this.applyFeatureFilter();
-    }
     constructor(formBuilder) {
-        this._features = [];
+        /**
+         * The features.
+         */
+        this.features = input([]);
+        /**
+         * The list of feature names to display in the name selection.
+         * This is used when you have a closed list of features.
+         */
+        this.featNames = input();
+        /**
+         * The feature values map. When specified and the user selects a feature
+         * name present in the map keys, the corresponding values will be used
+         * to populate the value selection.
+         */
+        this.featValues = input();
         /**
          * The threshold at which the features filter should become visible.
          * If set to 0, the filter is always visible; if set to -1, it is always
          * invisible; otherwise, it gets visible when the number of features
          * is greater than the threshold. Default is 5.
          */
-        this.filterThreshold = 5;
+        this.filterThreshold = input(5);
         this.filteredFeatures = [];
         this.filter = formBuilder.control(null);
+        // when features change, reset the filter and apply it
+        effect(() => {
+            const features = this.features();
+            this.filter.reset();
+            this.applyFeatureFilter();
+        });
     }
     applyFeatureFilter(name) {
-        this.filteredFeatures = this._features.filter((feature) => {
+        this.filteredFeatures = this.features().filter((feature) => {
             return !name || feature.name.toLowerCase().includes(name.toLowerCase());
         });
     }
@@ -2108,10 +2038,10 @@ class FeatureSetViewComponent {
     ngOnDestroy() {
         this._sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FeatureSetViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FeatureSetViewComponent, isStandalone: true, selector: "gve-feature-set-view", inputs: { features: "features", featNames: "featNames", featValues: "featValues", filterThreshold: "filterThreshold" }, ngImport: i0, template: "<div>\r\n  <!-- filter -->\r\n  <div>\r\n    @if (filterThreshold === 0 || features.length > filterThreshold) {\r\n    <div class=\"form-row\">\r\n      <mat-form-field id=\"filter\">\r\n        <mat-label>filter</mat-label>\r\n        <input matInput [formControl]=\"filter\" />\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"filter.reset()\"\r\n          [disabled]=\"!filter.value\"\r\n          [attr.aria-label]=\"'Reset filter'\"\r\n        >\r\n          <mat-icon color=\"warn\"  class=\"mat-warn\">cancel</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n\r\n      <span>{{ filteredFeatures.length }}</span>\r\n    </div>\r\n    }\r\n\r\n    <!-- list -->\r\n    @if (filteredFeatures.length) {\r\n    <table>\r\n      <tbody>\r\n        @for (feature of filteredFeatures; track $index) {\r\n        <tr>\r\n          <th>\r\n            @if (featNames?.length) {\r\n            <span>{{\r\n              feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.name }}</span>\r\n            }\r\n          </th>\r\n          <td>\r\n            @if (featValues) {\r\n            <span>{{\r\n              feature.value | flatLookup : featValues[feature.name]\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.value }}</span>\r\n            }\r\n          </td>\r\n        </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse}th{text-align:left;background-color:#c8d9eb;color:#333;font-weight:400}th,td{border:1px solid silver;padding:4px}tr:nth-child(2n){background-color:#dfdfdf}#filter{width:7em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FeatureSetViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: FeatureSetViewComponent, isStandalone: true, selector: "gve-feature-set-view", inputs: { features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, filterThreshold: { classPropertyName: "filterThreshold", publicName: "filterThreshold", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\r\n  <!-- filter -->\r\n  <div>\r\n    @if (filterThreshold() === 0 || features()!.length > filterThreshold()) {\r\n    <div class=\"form-row\">\r\n      <mat-form-field id=\"filter\">\r\n        <mat-label>filter</mat-label>\r\n        <input matInput [formControl]=\"filter\" />\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"filter.reset()\"\r\n          [disabled]=\"!filter.value\"\r\n          [attr.aria-label]=\"'Reset filter'\"\r\n        >\r\n          <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n\r\n      <span>{{ filteredFeatures.length }}</span>\r\n    </div>\r\n    }\r\n\r\n    <!-- list -->\r\n    @if (filteredFeatures.length) {\r\n    <table>\r\n      <tbody>\r\n        @for (feature of filteredFeatures; track $index) {\r\n        <tr>\r\n          <th>\r\n            @if (featNames.length) {\r\n            <span>{{\r\n              feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.name }}</span>\r\n            }\r\n          </th>\r\n          <td>\r\n            @if (featValues()) {\r\n            <span>{{\r\n              feature.value | flatLookup : featValues()![feature.name]\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.value }}</span>\r\n            }\r\n          </td>\r\n        </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse}th{text-align:left;background-color:#c8d9eb;color:#333;font-weight:400}th,td{border:1px solid silver;padding:4px}tr:nth-child(2n){background-color:#dfdfdf}#filter{width:7em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FeatureSetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FeatureSetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-feature-set-view', imports: [
                         CommonModule,
@@ -2121,16 +2051,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatIconModule,
                         MatInputModule,
                         FlatLookupPipe,
-                    ], template: "<div>\r\n  <!-- filter -->\r\n  <div>\r\n    @if (filterThreshold === 0 || features.length > filterThreshold) {\r\n    <div class=\"form-row\">\r\n      <mat-form-field id=\"filter\">\r\n        <mat-label>filter</mat-label>\r\n        <input matInput [formControl]=\"filter\" />\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"filter.reset()\"\r\n          [disabled]=\"!filter.value\"\r\n          [attr.aria-label]=\"'Reset filter'\"\r\n        >\r\n          <mat-icon color=\"warn\"  class=\"mat-warn\">cancel</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n\r\n      <span>{{ filteredFeatures.length }}</span>\r\n    </div>\r\n    }\r\n\r\n    <!-- list -->\r\n    @if (filteredFeatures.length) {\r\n    <table>\r\n      <tbody>\r\n        @for (feature of filteredFeatures; track $index) {\r\n        <tr>\r\n          <th>\r\n            @if (featNames?.length) {\r\n            <span>{{\r\n              feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.name }}</span>\r\n            }\r\n          </th>\r\n          <td>\r\n            @if (featValues) {\r\n            <span>{{\r\n              feature.value | flatLookup : featValues[feature.name]\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.value }}</span>\r\n            }\r\n          </td>\r\n        </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse}th{text-align:left;background-color:#c8d9eb;color:#333;font-weight:400}th,td{border:1px solid silver;padding:4px}tr:nth-child(2n){background-color:#dfdfdf}#filter{width:7em}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { features: [{
-                type: Input
-            }], featNames: [{
-                type: Input
-            }], featValues: [{
-                type: Input
-            }], filterThreshold: [{
-                type: Input
-            }] } });
+                    ], template: "<div>\r\n  <!-- filter -->\r\n  <div>\r\n    @if (filterThreshold() === 0 || features()!.length > filterThreshold()) {\r\n    <div class=\"form-row\">\r\n      <mat-form-field id=\"filter\">\r\n        <mat-label>filter</mat-label>\r\n        <input matInput [formControl]=\"filter\" />\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"filter.reset()\"\r\n          [disabled]=\"!filter.value\"\r\n          [attr.aria-label]=\"'Reset filter'\"\r\n        >\r\n          <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n\r\n      <span>{{ filteredFeatures.length }}</span>\r\n    </div>\r\n    }\r\n\r\n    <!-- list -->\r\n    @if (filteredFeatures.length) {\r\n    <table>\r\n      <tbody>\r\n        @for (feature of filteredFeatures; track $index) {\r\n        <tr>\r\n          <th>\r\n            @if (featNames.length) {\r\n            <span>{{\r\n              feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.name }}</span>\r\n            }\r\n          </th>\r\n          <td>\r\n            @if (featValues()) {\r\n            <span>{{\r\n              feature.value | flatLookup : featValues()![feature.name]\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.value }}</span>\r\n            }\r\n          </td>\r\n        </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse}th{text-align:left;background-color:#c8d9eb;color:#333;font-weight:400}th,td{border:1px solid silver;padding:4px}tr:nth-child(2n){background-color:#dfdfdf}#filter{width:7em}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 /**
  * 🔑 `gve-steps-map`
@@ -2155,79 +2077,60 @@ class StepsMapComponent {
     constructor() {
         // the lines of each version text, keyed under the output tag
         this.lines = {};
+        /**
+         * The steps to display.
+         */
+        this.steps = input([]);
+        /**
+         * The step that is currently selected.
+         */
+        this.selectedStep = model();
         /**
          * The font size of the steps text.
          */
-        this.textFontSize = '0.8em';
+        this.textFontSize = input('0.8em');
         /**
          * Emitted when the selected step has changed by user, or when
          * the steps are set for the first time.
          */
-        this.selectedStepChange = new EventEmitter();
-    }
-    /**
-     * The steps to display.
-     */
-    get steps() {
-        return this._steps;
-    }
-    set steps(value) {
-        if (this._steps === value) {
-            return;
-        }
-        const first = this._steps === undefined;
-        this._selectedStep = undefined;
-        this._steps = value || undefined;
-        if (first && this._steps?.length) {
-            this._selectedStep = this._steps[this._steps.length - 1];
-            this.updateLines();
-            this.selectedStepChange.emit(this._selectedStep);
-        }
-        else {
-            this.updateLines();
-        }
-    }
-    /**
-     * The step that is currently selected.
-     */
-    get selectedStep() {
-        return this._selectedStep;
-    }
-    set selectedStep(value) {
-        if (this._selectedStep === value) {
-            return;
-        }
-        this._selectedStep = value;
+        this.selectedStepChange = output();
+        // when the steps change, update lines and selected step
+        effect(() => {
+            const steps = this.steps();
+            const first = steps === undefined;
+            if (first && steps.length) {
+                this.selectedStep.set(steps[steps.length - 1]);
+                this.updateLines(steps);
+                this.selectedStepChange.emit(this.selectedStep());
+            }
+            else {
+                this.selectedStep.set(undefined);
+                this.selectedStepChange.emit(undefined);
+                this.updateLines(steps);
+            }
+        });
     }
-    updateLines() {
-        if (!this._steps) {
+    updateLines(steps) {
+        if (!steps) {
             this.lines = {};
             return;
         }
-        for (let i = 0; i < this._steps.length; i++) {
-            const step = this._steps[i];
+        for (let i = 0; i < steps.length; i++) {
+            const step = this.steps()[i];
             this.lines[step.outputTag] = step.result?.split('\n') || [];
         }
     }
     onStepClick(step) {
-        this._selectedStep = step;
-        this.selectedStepChange.emit(step);
+        this.selectedStep.set(step);
+        this.selectedStepChange.emit(this.selectedStep());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: StepsMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: StepsMapComponent, isStandalone: true, selector: "gve-steps-map", inputs: { steps: "steps", selectedStep: "selectedStep", textFontSize: "textFontSize" }, outputs: { selectedStepChange: "selectedStepChange" }, ngImport: i0, template: "<div>\r\n  @if (steps?.length) {\r\n    @for (step of steps; track step.outputTag) {\r\n    <div\r\n      matRipple\r\n      class=\"step form-row\"\r\n      [ngClass]=\"{ selected: step === selectedStep }\"\r\n      (click)=\"onStepClick(step)\"\r\n    >\r\n      <!-- tag -->\r\n      <div class=\"tag\">\r\n        <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n        {{ step.outputTag }}\r\n      </div>\r\n      <!-- text lines -->\r\n      <div class=\"text\" [style.fontSize]=\"textFontSize\">\r\n        @for (line of lines[step.outputTag]; track $index) {\r\n        <div class=\"line\">{{ line }}</div>\r\n        }\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  } }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:start;flex-wrap:wrap}.form-row *{flex:0 0 auto}.selected{background-color:#ffc}.step{border:1px solid rgb(68,114,253);border-radius:6px;margin:8px 0}.tag{background-color:#4472fd;color:#fff;border:1px solid rgb(68,114,253);border-radius:6px;padding:4px;cursor:pointer}.muted-tag{color:silver}.text{font-size:.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: StepsMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: StepsMapComponent, isStandalone: true, selector: "gve-steps-map", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, selectedStep: { classPropertyName: "selectedStep", publicName: "selectedStep", isSignal: true, isRequired: false, transformFunction: null }, textFontSize: { classPropertyName: "textFontSize", publicName: "textFontSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedStep: "selectedStepChange", selectedStepChange: "selectedStepChange" }, ngImport: i0, template: "<div>\r\n  @if (steps().length) { @for (step of steps(); track step.outputTag) {\r\n  <div\r\n    matRipple\r\n    class=\"step form-row\"\r\n    [ngClass]=\"{ selected: step === selectedStep() }\"\r\n    (click)=\"onStepClick(step)\"\r\n  >\r\n    <!-- tag -->\r\n    <div class=\"tag\">\r\n      <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n      {{ step.outputTag }}\r\n    </div>\r\n    <!-- text lines -->\r\n    <div class=\"text\" [style.fontSize]=\"textFontSize()\">\r\n      @for (line of lines[step.outputTag]; track $index) {\r\n      <div class=\"line\">{{ line }}</div>\r\n      }\r\n      <div></div>\r\n    </div>\r\n  </div>\r\n  } }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:start;flex-wrap:wrap}.form-row *{flex:0 0 auto}.selected{background-color:#ffc}.step{border:1px solid rgb(68,114,253);border-radius:6px;margin:8px 0}.tag{background-color:#4472fd;color:#fff;border:1px solid rgb(68,114,253);border-radius:6px;padding:4px;cursor:pointer}.muted-tag{color:silver}.text{font-size:.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: StepsMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: StepsMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-steps-map', imports: [CommonModule, MatButtonModule, MatRippleModule, MatTooltipModule], template: "<div>\r\n  @if (steps?.length) {\r\n    @for (step of steps; track step.outputTag) {\r\n    <div\r\n      matRipple\r\n      class=\"step form-row\"\r\n      [ngClass]=\"{ selected: step === selectedStep }\"\r\n      (click)=\"onStepClick(step)\"\r\n    >\r\n      <!-- tag -->\r\n      <div class=\"tag\">\r\n        <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n        {{ step.outputTag }}\r\n      </div>\r\n      <!-- text lines -->\r\n      <div class=\"text\" [style.fontSize]=\"textFontSize\">\r\n        @for (line of lines[step.outputTag]; track $index) {\r\n        <div class=\"line\">{{ line }}</div>\r\n        }\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  } }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:start;flex-wrap:wrap}.form-row *{flex:0 0 auto}.selected{background-color:#ffc}.step{border:1px solid rgb(68,114,253);border-radius:6px;margin:8px 0}.tag{background-color:#4472fd;color:#fff;border:1px solid rgb(68,114,253);border-radius:6px;padding:4px;cursor:pointer}.muted-tag{color:silver}.text{font-size:.5em}\n"] }]
-        }], propDecorators: { steps: [{
-                type: Input
-            }], selectedStep: [{
-                type: Input
-            }], textFontSize: [{
-                type: Input
-            }], selectedStepChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'gve-steps-map', imports: [CommonModule, MatButtonModule, MatRippleModule, MatTooltipModule], template: "<div>\r\n  @if (steps().length) { @for (step of steps(); track step.outputTag) {\r\n  <div\r\n    matRipple\r\n    class=\"step form-row\"\r\n    [ngClass]=\"{ selected: step === selectedStep() }\"\r\n    (click)=\"onStepClick(step)\"\r\n  >\r\n    <!-- tag -->\r\n    <div class=\"tag\">\r\n      <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n      {{ step.outputTag }}\r\n    </div>\r\n    <!-- text lines -->\r\n    <div class=\"text\" [style.fontSize]=\"textFontSize()\">\r\n      @for (line of lines[step.outputTag]; track $index) {\r\n      <div class=\"line\">{{ line }}</div>\r\n      }\r\n      <div></div>\r\n    </div>\r\n  </div>\r\n  } }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:start;flex-wrap:wrap}.form-row *{flex:0 0 auto}.selected{background-color:#ffc}.step{border:1px solid rgb(68,114,253);border-radius:6px;margin:8px 0}.tag{background-color:#4472fd;color:#fff;border:1px solid rgb(68,114,253);border-radius:6px;padding:4px;cursor:pointer}.muted-tag{color:silver}.text{font-size:.5em}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * 🔑 `gve-chain-result-view`
@@ -2243,48 +2146,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * result's step is picked by the user.
  */
 class ChainResultViewComponent {
-    /**
-     * The result to display.
-     */
-    get result() {
-        return this._result;
-    }
-    set result(value) {
-        if (this._result === value) {
-            return;
-        }
-        this._result = value || undefined;
-        this.updateForm(this._result);
-        // select the initial step if set
-        this.selectInitialStep();
-    }
-    /**
-     * The index of the initial step to display after the result is set.
-     * If the index is negative, it is counted from the end of the steps.
-     */
-    get initialStepIndex() {
-        return this._initialStepIndex;
-    }
-    set initialStepIndex(value) {
-        if (value === undefined || value === null) {
-            this._initialStepIndex = undefined;
-            this.step = undefined;
-        }
-        else {
-            this._initialStepIndex = value;
-            this.selectInitialStep();
-        }
-    }
     constructor(formBuilder) {
+        /**
+         * The result to display.
+         */
+        this.result = input();
+        /**
+         * The index of the initial step to display after the result is set.
+         * If the index is negative, it is counted from the end of the steps.
+         */
+        this.initialStepIndex = input();
         /**
          * Emitted when a result's step is picked by the user.
          */
-        this.stepPick = new EventEmitter();
+        this.stepPick = output();
         this.versionTags = [];
         this.tags = [];
         this.selectionFeatures = [];
+        // bind callback methods
+        this.getCharBorderColor = this.getCharBorderColor.bind(this);
         this.versionTag = formBuilder.control(null);
         this.tag = formBuilder.control(null);
+        // when result changes, update the form
+        effect(() => {
+            this.updateForm(this.result());
+            // select the initial step if set
+            this.selectInitialStep(this.initialStepIndex());
+        });
+        // when initialStepIndex changes, update the selected step
+        effect(() => {
+            this.selectInitialStep(this.initialStepIndex());
+        });
     }
     ngOnInit() {
         this._subs = [
@@ -2298,7 +2190,7 @@ class ChainResultViewComponent {
             this.tag.valueChanges
                 .pipe(distinctUntilChanged(), debounceTime(200))
                 .subscribe((value) => {
-                this.step = this._result?.steps.find((step) => step.outputTag === value);
+                this.step = this.result()?.steps.find((step) => step.outputTag === value);
                 if (this.step) {
                     this.stepPick.emit(this.step);
                 }
@@ -2308,25 +2200,28 @@ class ChainResultViewComponent {
     getCharBorderColor(node) {
         return this.step?.refNodeIds.includes(node.id) ? 'orange' : null;
     }
-    selectInitialStep() {
-        if (this._initialStepIndex !== undefined && this._result?.steps) {
+    selectInitialStep(initialStepIndex) {
+        if (initialStepIndex !== undefined && this.result()?.steps) {
             this.step =
-                this._result.steps[this._initialStepIndex < 0
-                    ? this._result.steps.length + this._initialStepIndex
-                    : this._initialStepIndex];
+                this.result().steps[initialStepIndex < 0
+                    ? this.result().steps.length + initialStepIndex
+                    : initialStepIndex];
+        }
+        else {
+            this.step = undefined;
         }
     }
     ngOnDestroy() {
         this._subs?.forEach((sub) => sub.unsubscribe());
     }
     updateVersionTags() {
-        if (!this._result) {
+        if (!this.result()) {
             this.versionTags = [];
             return;
         }
         // extract version tags from result steps features named 'version'
         const tags = new Set();
-        for (const step of this._result.steps) {
+        for (const step of this.result().steps) {
             for (const feature of step.featureSet.features) {
                 if (feature.name === 'version') {
                     tags.add(feature.value);
@@ -2336,10 +2231,10 @@ class ChainResultViewComponent {
         this.versionTags = Array.from(tags).sort();
     }
     getTagFromVersion(version) {
-        if (!this._result || !version) {
+        if (!this.result() || !version) {
             return undefined;
         }
-        for (const step of this._result.steps) {
+        for (const step of this.result().steps) {
             for (const feature of step.featureSet.features) {
                 if (feature.name === 'version' && feature.value === version) {
                     return step.outputTag;
@@ -2371,8 +2266,8 @@ class ChainResultViewComponent {
         if (!this.step) {
             return null;
         }
-        for (let key of Object.keys(this._result.taggedNodes)) {
-            const node = this._result.taggedNodes[key].find((n) => n.id === id);
+        for (let key of Object.keys(this.result().taggedNodes)) {
+            const node = this.result().taggedNodes[key].find((n) => n.id === id);
             if (node) {
                 return node;
             }
@@ -2393,7 +2288,7 @@ class ChainResultViewComponent {
         this.selection = range.at + '×' + range.run;
         const end = range.at + range.run;
         const features = [];
-        const tagNodes = this._result.taggedNodes[this.tag.value];
+        const tagNodes = this.result().taggedNodes[this.tag.value];
         for (let node of tagNodes) {
             // if in range, intersect features
             if (node.id >= range.at && node.id < end) {
@@ -2412,14 +2307,16 @@ class ChainResultViewComponent {
         this.selectionFeatures = features;
     }
     onStepChange(step) {
-        // setting the tag will trigger the step change
-        this.tag.setValue(step.outputTag);
-        this.selectionFeatures = [];
+        if (step) {
+            // setting the tag will trigger the step change
+            this.tag.setValue(step.outputTag);
+            this.selectionFeatures = [];
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ChainResultViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ChainResultViewComponent, isStandalone: true, selector: "gve-chain-result-view", inputs: { result: "result", initialStepIndex: "initialStepIndex" }, outputs: { stepPick: "stepPick" }, ngImport: i0, template: "@if (result) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    <mat-form-field *ngIf=\"versionTags?.length\">\r\n      <mat-label>version</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        <mat-option *ngFor=\"let t of versionTags\" [value]=\"t\">{{\r\n          t\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!-- tag -->\r\n    <mat-form-field *ngIf=\"tags?.length\">\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        <mat-option *ngFor=\"let t of tags\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- step -->\r\n  @if (step) {\r\n  <div id=\"step\">\r\n    <!-- text -->\r\n    <div id=\"text\">\r\n      <gve-base-text-view\r\n        [text]=\"result.taggedNodes[step.outputTag]\"\r\n        [borderColorCallback]=\"getCharBorderColor\"\r\n        (charPick)=\"onStepCharPick($event)\"\r\n        (rangePick)=\"onStepRangePick($event)\"\r\n      />\r\n    </div>\r\n    <!-- features -->\r\n    <div id=\"feats\" class=\"form-row-top\">\r\n      <div id=\"g-feats\">\r\n        <div class=\"feat-header\">{{ step.outputTag }}</div>\r\n        <gve-feature-set-view [features]=\"step.featureSet.features\" />\r\n      </div>\r\n      <div id=\"n-feats\">\r\n        @if (selectionFeatures.length) {\r\n        <div class=\"feat-header\">{{ selection }}</div>\r\n        <gve-feature-set-view [features]=\"selectionFeatures\" />\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- steps map -->\r\n  <div id=\"map\">\r\n    <gve-steps-map\r\n      [steps]=\"result.steps\"\r\n      [selectedStep]=\"step\"\r\n      (selectedStepChange)=\"onStepChange($event)\"\r\n    />\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row-top{display:flex;gap:8px;align-items:start;flex-wrap:wrap}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px}div#bar{grid-area:bar}div#map{grid-area:map}div#step{grid-area:step}.feat-header{background-color:#3e92cc;color:#fff;text-align:center;border:1px solid #3e92cc;border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"bar\" \"step\"}#map{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FeatureSetViewComponent, selector: "gve-feature-set-view", inputs: ["features", "featNames", "featValues", "filterThreshold"] }, { kind: "component", type: StepsMapComponent, selector: "gve-steps-map", inputs: ["steps", "selectedStep", "textFontSize"], outputs: ["selectedStepChange"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "hasLineNumber", "text", "borderColorCallback"], outputs: ["charPick", "rangePick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChainResultViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: ChainResultViewComponent, isStandalone: true, selector: "gve-chain-result-view", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, initialStepIndex: { classPropertyName: "initialStepIndex", publicName: "initialStepIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepPick: "stepPick" }, ngImport: i0, template: "@if (result()) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    <mat-form-field *ngIf=\"versionTags?.length\">\r\n      <mat-label>version</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        <mat-option *ngFor=\"let t of versionTags\" [value]=\"t\">{{\r\n          t\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!-- tag -->\r\n    <mat-form-field *ngIf=\"tags?.length\">\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        <mat-option *ngFor=\"let t of tags\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- step -->\r\n  @if (step) {\r\n  <div id=\"step\">\r\n    <!-- text -->\r\n    <div id=\"text\">\r\n      <gve-base-text-view\r\n        [text]=\"result()!.taggedNodes[step.outputTag]\"\r\n        [borderColorCallback]=\"getCharBorderColor\"\r\n        (charPick)=\"onStepCharPick($event)\"\r\n        (rangePick)=\"onStepRangePick($event)\"\r\n      />\r\n    </div>\r\n    <!-- features -->\r\n    <div id=\"feats\" class=\"form-row-top\">\r\n      <div id=\"g-feats\">\r\n        <div class=\"feat-header\">{{ step.outputTag }}</div>\r\n        <gve-feature-set-view [features]=\"step.featureSet.features\" />\r\n      </div>\r\n      <div id=\"n-feats\">\r\n        @if (selectionFeatures.length) {\r\n        <div class=\"feat-header\">{{ selection }}</div>\r\n        <gve-feature-set-view [features]=\"selectionFeatures\" />\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- steps map -->\r\n  <div id=\"map\">\r\n    <gve-steps-map\r\n      [steps]=\"result()!.steps\"\r\n      [selectedStep]=\"step\"\r\n      (selectedStepChange)=\"onStepChange($event)\"\r\n    />\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row-top{display:flex;gap:8px;align-items:start;flex-wrap:wrap}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px}div#bar{grid-area:bar}div#map{grid-area:map}div#step{grid-area:step}.feat-header{background-color:#3e92cc;color:#fff;text-align:center;border:1px solid #3e92cc;border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"bar\" \"step\"}#map{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FeatureSetViewComponent, selector: "gve-feature-set-view", inputs: ["features", "featNames", "featValues", "filterThreshold"] }, { kind: "component", type: StepsMapComponent, selector: "gve-steps-map", inputs: ["steps", "selectedStep", "textFontSize"], outputs: ["selectedStepChange"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "hasLineNumber", "text", "borderColorCallback"], outputs: ["charPick", "rangePick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ChainResultViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChainResultViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-chain-result-view', imports: [
                         CommonModule,
@@ -2431,14 +2328,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         FeatureSetViewComponent,
                         StepsMapComponent,
                         BaseTextViewComponent,
-                    ], template: "@if (result) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    <mat-form-field *ngIf=\"versionTags?.length\">\r\n      <mat-label>version</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        <mat-option *ngFor=\"let t of versionTags\" [value]=\"t\">{{\r\n          t\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!-- tag -->\r\n    <mat-form-field *ngIf=\"tags?.length\">\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        <mat-option *ngFor=\"let t of tags\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- step -->\r\n  @if (step) {\r\n  <div id=\"step\">\r\n    <!-- text -->\r\n    <div id=\"text\">\r\n      <gve-base-text-view\r\n        [text]=\"result.taggedNodes[step.outputTag]\"\r\n        [borderColorCallback]=\"getCharBorderColor\"\r\n        (charPick)=\"onStepCharPick($event)\"\r\n        (rangePick)=\"onStepRangePick($event)\"\r\n      />\r\n    </div>\r\n    <!-- features -->\r\n    <div id=\"feats\" class=\"form-row-top\">\r\n      <div id=\"g-feats\">\r\n        <div class=\"feat-header\">{{ step.outputTag }}</div>\r\n        <gve-feature-set-view [features]=\"step.featureSet.features\" />\r\n      </div>\r\n      <div id=\"n-feats\">\r\n        @if (selectionFeatures.length) {\r\n        <div class=\"feat-header\">{{ selection }}</div>\r\n        <gve-feature-set-view [features]=\"selectionFeatures\" />\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- steps map -->\r\n  <div id=\"map\">\r\n    <gve-steps-map\r\n      [steps]=\"result.steps\"\r\n      [selectedStep]=\"step\"\r\n      (selectedStepChange)=\"onStepChange($event)\"\r\n    />\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row-top{display:flex;gap:8px;align-items:start;flex-wrap:wrap}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px}div#bar{grid-area:bar}div#map{grid-area:map}div#step{grid-area:step}.feat-header{background-color:#3e92cc;color:#fff;text-align:center;border:1px solid #3e92cc;border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"bar\" \"step\"}#map{display:none}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { result: [{
-                type: Input
-            }], initialStepIndex: [{
-                type: Input
-            }], stepPick: [{
-                type: Output
-            }] } });
+                    ], template: "@if (result()) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    <mat-form-field *ngIf=\"versionTags?.length\">\r\n      <mat-label>version</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        <mat-option *ngFor=\"let t of versionTags\" [value]=\"t\">{{\r\n          t\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!-- tag -->\r\n    <mat-form-field *ngIf=\"tags?.length\">\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        <mat-option *ngFor=\"let t of tags\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- step -->\r\n  @if (step) {\r\n  <div id=\"step\">\r\n    <!-- text -->\r\n    <div id=\"text\">\r\n      <gve-base-text-view\r\n        [text]=\"result()!.taggedNodes[step.outputTag]\"\r\n        [borderColorCallback]=\"getCharBorderColor\"\r\n        (charPick)=\"onStepCharPick($event)\"\r\n        (rangePick)=\"onStepRangePick($event)\"\r\n      />\r\n    </div>\r\n    <!-- features -->\r\n    <div id=\"feats\" class=\"form-row-top\">\r\n      <div id=\"g-feats\">\r\n        <div class=\"feat-header\">{{ step.outputTag }}</div>\r\n        <gve-feature-set-view [features]=\"step.featureSet.features\" />\r\n      </div>\r\n      <div id=\"n-feats\">\r\n        @if (selectionFeatures.length) {\r\n        <div class=\"feat-header\">{{ selection }}</div>\r\n        <gve-feature-set-view [features]=\"selectionFeatures\" />\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- steps map -->\r\n  <div id=\"map\">\r\n    <gve-steps-map\r\n      [steps]=\"result()!.steps\"\r\n      [selectedStep]=\"step\"\r\n      (selectedStepChange)=\"onStepChange($event)\"\r\n    />\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row-top{display:flex;gap:8px;align-items:start;flex-wrap:wrap}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px}div#bar{grid-area:bar}div#map{grid-area:map}div#step{grid-area:step}.feat-header{background-color:#3e92cc;color:#fff;text-align:center;border:1px solid #3e92cc;border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"bar\" \"step\"}#map{display:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
+
+class GveGraphvizService {
+    hashString(str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+            hash = hash & hash; // convert to 32bit integer
+        }
+        return Math.abs(hash);
+    }
+    hslToRgb(hue, saturation, lightness) {
+        const chroma = ((1 - Math.abs((2 * lightness) / 100 - 1)) * saturation) / 100;
+        const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+        const m = lightness / 100 - chroma / 2;
+        let r = 0, g = 0, b = 0;
+        if (hue >= 0 && hue < 60) {
+            r = chroma;
+            g = x;
+        }
+        else if (hue >= 60 && hue < 120) {
+            r = x;
+            g = chroma;
+        }
+        else if (hue >= 120 && hue < 180) {
+            g = chroma;
+            b = x;
+        }
+        else if (hue >= 180 && hue < 240) {
+            g = x;
+            b = chroma;
+        }
+        else if (hue >= 240 && hue < 300) {
+            r = x;
+            b = chroma;
+        }
+        else if (hue >= 300 && hue < 360) {
+            r = chroma;
+            b = x;
+        }
+        r = Math.round((r + m) * 255);
+        g = Math.round((g + m) * 255);
+        b = Math.round((b + m) * 255);
+        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    }
+    getColorForTag(tag) {
+        const hash = this.hashString(tag);
+        const hue = (hash * 137) % 360; // Use a prime number to spread out the hues
+        const saturation = 60 + (hash % 40); // Saturation between 60% and 100%
+        const lightness = 50 + (hash % 30); // Lightness between 50% and 80%
+        return this.hslToRgb(hue, saturation, lightness);
+    }
+    getExcludedNodeIds(chain, tags) {
+        // get only the desired links
+        const links = chain.links.filter((link) => tags ? tags.includes(link.tag) : true);
+        // return all the nodes not referenced by the links
+        const excluded = new Set();
+        chain.nodes.forEach((node) => {
+            excluded.add(node.id);
+        });
+        links.forEach((link) => {
+            excluded.delete(link.sourceId);
+            excluded.delete(link.targetId);
+        });
+        return excluded;
+    }
+    /**
+     * Represent the received chain as a Graphviz digraph.
+     *
+     * @param chain The source chain if any.
+     * @param tags The tags to show. When set, only the links with these tags are shown.
+     * @param rankdir The rank direction.
+     * @returns Graphviz representation of the chain.
+     */
+    generateGraph(chain, tags, rankdir = 'LR') {
+        if (!chain) {
+            return 'digraph G {}';
+        }
+        const sb = [];
+        const excludedNodeIds = this.getExcludedNodeIds(chain, tags);
+        sb.push('digraph G {');
+        sb.push('  bgcolor=transparent;');
+        sb.push('  node [style=filled];');
+        sb.push(`  rankdir=${rankdir};`);
+        chain.nodes.forEach((node) => {
+            sb.push(`  ${node.id} [label="${node.label}"` +
+                (node.sourceTag
+                    ? ` fillcolor="${this.getColorForTag(node.sourceTag)}"`
+                    : '') +
+                (node.sourceTag && excludedNodeIds.has(node.id)
+                    ? ` xlabel="${node.sourceTag}"`
+                    : '') +
+                '];');
+        });
+        chain.links.forEach((link) => {
+            if (!link.sourceId ||
+                !link.targetId ||
+                (tags && !tags.includes(link.tag))) {
+                return;
+            }
+            const color = this.getColorForTag(link.tag);
+            sb.push(`  ${link.sourceId} -> ${link.targetId} [label="${link.tag}", color="${color}"];`);
+        });
+        sb.push('}');
+        return sb.join('\n');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GveGraphvizService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GveGraphvizService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GveGraphvizService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ChainViewComponent {
+    constructor(_graphviz, _settings, _clipboard, _snackbar) {
+        this._graphviz = _graphviz;
+        this._settings = _settings;
+        this._clipboard = _clipboard;
+        this._snackbar = _snackbar;
+        /**
+         * The chain to display.
+         */
+        this.chain = input();
+        /**
+         * The direction of the graph.
+         */
+        this.direction = input('LR');
+        /**
+         * All the distinct tags in the chain.
+         */
+        this.tags = computed(() => {
+            const chain = this.chain();
+            if (!chain) {
+                return [];
+            }
+            const set = new Set();
+            for (const link of chain.links) {
+                set.add(link.tag);
+            }
+            return Array.from(set).sort();
+        });
+        /**
+         * The tags to show, or empty to show all of them.
+         */
+        this.selectedTags = model([]);
+        /**
+         * The Graphviz representation of the chain.
+         */
+        this.graph = computed(() => {
+            let tags = this.selectedTags();
+            if (tags && tags.length === 0) {
+                tags = undefined;
+            }
+            return this._graphviz.generateGraph(this.chain(), tags, this.direction());
+        });
+        this.userTags = new FormControl([], {
+            nonNullable: true,
+        });
+        // when the user changes the tags, update the selected tags
+        this._sub = this.userTags.valueChanges.subscribe((value) => {
+            this.selectedTags.set([...value]);
+        });
+        effect(() => {
+            // update the user tags when tags change
+            const tags = this.tags();
+            let userTags = [];
+            if (tags.length > 1) {
+                // pick first and last tag from tags
+                userTags = [tags[0], tags[tags.length - 1]];
+            }
+            else {
+                // if there is only one tag, pick it
+                userTags = [...tags];
+            }
+            this.userTags.setValue(userTags);
+        });
+    }
+    ngOnDestroy() {
+        this._sub?.unsubscribe();
+    }
+    copyGraph() {
+        const graph = this.graph();
+        if (!graph) {
+            return;
+        }
+        this._clipboard.copy(graph);
+        this._snackbar.open('Graph copied to clipboard', 'OK', {
+            duration: 2000,
+        });
+    }
+    openExternalEditor() {
+        let url = this._settings.get('graphviz-editor', 'https://dreampuf.github.io/GraphvizOnline?engine=dot#CODE');
+        if (!url) {
+            return;
+        }
+        const graph = this.graph();
+        if (!graph) {
+            return;
+        }
+        if (url.indexOf('CODE') > -1) {
+            url = url.replace('CODE', encodeURIComponent(graph));
+        }
+        window.open(url, '_blank');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChainViewComponent, deps: [{ token: GveGraphvizService }, { token: SettingsService }, { token: i2$3.Clipboard }, { token: i4$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: ChainViewComponent, isStandalone: true, selector: "gve-chain-view", inputs: { chain: { classPropertyName: "chain", publicName: "chain", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, selectedTags: { classPropertyName: "selectedTags", publicName: "selectedTags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTags: "selectedTagsChange" }, ngImport: i0, template: "<div id=\"container\">\r\n  <div>\r\n    <ngx-viz [code]=\"graph()\" />\r\n  </div>\r\n  <div class=\"button-row\">\r\n    <!-- select -->\r\n    <mat-form-field>\r\n      <mat-label>tags</mat-label>\r\n      <mat-select [formControl]=\"userTags\" multiple>\r\n        @for (tag of tags(); track tag) {\r\n        <mat-option [value]=\"tag\">{{ tag }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!-- copy -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Copy graphviz code\"\r\n      [disabled]=\"!graph()\"\r\n      (click)=\"copyGraph()\"\r\n    >\r\n      <mat-icon>content_copy</mat-icon>\r\n    </button>\r\n    <!--editor -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Open in editor\"\r\n      [disabled]=\"!graph()\"\r\n      (click)=\"openExternalEditor()\"\r\n    >\r\n      <mat-icon>launch</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["div#container{border:1px solid silver;border-radius:6px;padding:4px}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VizComponent, selector: "ngx-viz", inputs: ["code"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChainViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-chain-view', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        VizComponent,
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div id=\"container\">\r\n  <div>\r\n    <ngx-viz [code]=\"graph()\" />\r\n  </div>\r\n  <div class=\"button-row\">\r\n    <!-- select -->\r\n    <mat-form-field>\r\n      <mat-label>tags</mat-label>\r\n      <mat-select [formControl]=\"userTags\" multiple>\r\n        @for (tag of tags(); track tag) {\r\n        <mat-option [value]=\"tag\">{{ tag }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!-- copy -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Copy graphviz code\"\r\n      [disabled]=\"!graph()\"\r\n      (click)=\"copyGraph()\"\r\n    >\r\n      <mat-icon>content_copy</mat-icon>\r\n    </button>\r\n    <!--editor -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Open in editor\"\r\n      [disabled]=\"!graph()\"\r\n      (click)=\"openExternalEditor()\"\r\n    >\r\n      <mat-icon>launch</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["div#container{border:1px solid silver;border-radius:6px;padding:4px}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}\n"] }]
+        }], ctorParameters: () => [{ type: GveGraphvizService }, { type: SettingsService }, { type: i2$3.Clipboard }, { type: i4$2.MatSnackBar }] });
 
 /**
  * 🔑 `gve-ln-heights-editor`
@@ -2452,39 +2565,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * emitted when the heights change.
  */
 class LnHeightsEditorComponent {
-    /**
-     * The total number of lines in the text.
-     */
-    get lineCount() {
-        return this._lineCount;
-    }
-    set lineCount(value) {
-        if (this._lineCount === value)
-            return;
-        this._lineCount = value;
-        this.lineNumbers = Array.from({ length: value }, (_, i) => i + 1);
-    }
-    /**
-     * The heights map of the lines. Each key is a line number and the value is
-     * the height of the line.
-     */
-    get heights() {
-        return this._heights;
-    }
-    set heights(value) {
-        if (this._heights === value)
-            return;
-        this._heights = value || undefined;
-    }
     constructor(formBuilder) {
-        this._lineCount = 0;
+        /**
+         * The total number of lines in the text.
+         */
+        this.lineCount = input(0);
+        /**
+         * The heights map of the lines. Each key is a line number and the value is
+         * the height of the line.
+         */
+        this.heights = input();
         /**
          * The event emitted when the heights change.
          */
-        this.heightsChange = new EventEmitter();
+        this.heightsChange = output();
         this.lineNumbers = [];
         this.lineNumber = formBuilder.control(0, { nonNullable: true });
         this.height = formBuilder.control(0, { nonNullable: true });
+        // when lineCount changes, update lineNumbers
+        effect(() => {
+            this.lineNumbers = Array.from({ length: this.lineCount() }, (_, i) => i + 1);
+        });
     }
     pruneHeights() {
         // remove all the heigths with value=0
@@ -2523,10 +2624,10 @@ class LnHeightsEditorComponent {
         this._heights = undefined;
         this.heightsChange.emit(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: LnHeightsEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: LnHeightsEditorComponent, isStandalone: true, selector: "gve-ln-heights-editor", inputs: { lineCount: "lineCount", heights: "heights" }, outputs: { heightsChange: "heightsChange" }, ngImport: i0, template: "@if (lineNumbers.length) {\r\n<div class=\"form-row\">\r\n  <!-- line number -->\r\n  <mat-form-field class=\"input-nr\">\r\n    <mat-label>line</mat-label>\r\n    <mat-select [formControl]=\"lineNumber\">\r\n      <mat-option *ngFor=\"let n of lineNumbers\" [value]=\"n\">\r\n        {{ n }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- height -->\r\n  @if (lineNumber.value) {\r\n  <mat-form-field class=\"input-nr\">\r\n    <mat-label>height</mat-label>\r\n    <input matInput type=\"number\" [formControl]=\"height\" min=\"0\" />\r\n  </mat-form-field>\r\n  }\r\n\r\n  <!-- reset button -->\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    color=\"warn\"\r\n    (click)=\"reset()\"\r\n    matTooltip=\"Remove all the heights\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [".input-nr{width:5em}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LnHeightsEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: LnHeightsEditorComponent, isStandalone: true, selector: "gve-ln-heights-editor", inputs: { lineCount: { classPropertyName: "lineCount", publicName: "lineCount", isSignal: true, isRequired: false, transformFunction: null }, heights: { classPropertyName: "heights", publicName: "heights", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { heightsChange: "heightsChange" }, ngImport: i0, template: "@if (lineNumbers.length) {\r\n<div class=\"form-row\">\r\n  <!-- line number -->\r\n  <mat-form-field class=\"input-nr\">\r\n    <mat-label>line</mat-label>\r\n    <mat-select [formControl]=\"lineNumber\">\r\n      <mat-option *ngFor=\"let n of lineNumbers\" [value]=\"n\">\r\n        {{ n }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- height -->\r\n  @if (lineNumber.value) {\r\n  <mat-form-field class=\"input-nr\">\r\n    <mat-label>height</mat-label>\r\n    <input matInput type=\"number\" [formControl]=\"height\" min=\"0\" />\r\n  </mat-form-field>\r\n  }\r\n\r\n  <!-- reset button -->\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    color=\"warn\"\r\n    (click)=\"reset()\"\r\n    matTooltip=\"Remove all the heights\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [".input-nr{width:5em}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: LnHeightsEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LnHeightsEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-ln-heights-editor', imports: [
                         CommonModule,
@@ -2538,76 +2639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatSelectModule,
                         MatTooltipModule,
                     ], template: "@if (lineNumbers.length) {\r\n<div class=\"form-row\">\r\n  <!-- line number -->\r\n  <mat-form-field class=\"input-nr\">\r\n    <mat-label>line</mat-label>\r\n    <mat-select [formControl]=\"lineNumber\">\r\n      <mat-option *ngFor=\"let n of lineNumbers\" [value]=\"n\">\r\n        {{ n }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- height -->\r\n  @if (lineNumber.value) {\r\n  <mat-form-field class=\"input-nr\">\r\n    <mat-label>height</mat-label>\r\n    <input matInput type=\"number\" [formControl]=\"height\" min=\"0\" />\r\n  </mat-form-field>\r\n  }\r\n\r\n  <!-- reset button -->\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    color=\"warn\"\r\n    (click)=\"reset()\"\r\n    matTooltip=\"Remove all the heights\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [".input-nr{width:5em}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { lineCount: [{
-                type: Input
-            }], heights: [{
-                type: Input
-            }], heightsChange: [{
-                type: Output
-            }] } });
-
-/**
- * 🔑 `gve-simple-tree`
- *
- * A simple tree component.
- *
- * - ▶️ `node` (`TreeNode<any>`): the node to display.
- * - ▶️ `selectedNode` (`TreeNode<any> | null`): the selected node.
- * - 🔥 `selectedNodeChange` (`EventEmitter<TreeNode<any> | null>`): the event
- * emitted when the selected node changes.
- */
-class SimpleTreeComponent {
-    constructor() {
-        /**
-         * The event emitted when the selected node changes.
-         */
-        this.selectedNodeChange = new EventEmitter();
-        this.level = 0;
-    }
-    /**
-     * The node to display.
-     */
-    get node() {
-        return this._node;
-    }
-    set node(value) {
-        if (this._node === value) {
-            return;
-        }
-        this._node = value;
-        this.level = this.calculateLevel(value);
-    }
-    ngOnInit() {
-        this.level = this.calculateLevel(this.node);
-    }
-    calculateLevel(node) {
-        let level = 0;
-        if (node) {
-            let n = node;
-            while (n.parent) {
-                level++;
-                n = n.parent;
-            }
-        }
-        return level;
-    }
-    selectNode(node) {
-        this.selectedNode = node;
-        this.selectedNodeChange.emit(node);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SimpleTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SimpleTreeComponent, isStandalone: true, selector: "gve-simple-tree", inputs: { node: "node", selectedNode: "selectedNode" }, outputs: { selectedNodeChange: "selectedNodeChange" }, ngImport: i0, template: "@if (node) {\r\n<div [style.margin-left]=\"level * 8 + 'px'\">\r\n  <ng-template\r\n    #tree\r\n    let-node\r\n    let-parentLevel=\"level\"\r\n    let-selectedNode=\"selectedNode\"\r\n  >\r\n    <div\r\n      [style.margin-left]=\"parentLevel * 8 + 'px'\"\r\n      [class.selected]=\"node === selectedNode\"\r\n    >\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          (click)=\"node.isExpanded = !node.isExpanded\"\r\n        >\r\n          <mat-icon>{{\r\n            node.isExpanded ? \"expand_more\" : \"chevron_right\"\r\n          }}</mat-icon>\r\n        </button>\r\n        <span class=\"label\" (click)=\"selectNode(node)\">\r\n          {{ node.label }}\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"node.children && node.isExpanded\">\r\n        <ng-container *ngFor=\"let child of node.children\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              tree;\r\n              context: {\r\n                $implicit: child,\r\n                level: parentLevel + 1,\r\n                selectedNode: selectedNode\r\n              }\r\n            \"\r\n          ></ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- $implicit is the source of let-node -->\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      tree;\r\n      context: { $implicit: node, level: level, selectedNode: selectedNode }\r\n    \"\r\n  ></ng-container>\r\n</div>\r\n}\r\n", styles: [".label{cursor:pointer}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SimpleTreeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gve-simple-tree', imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "@if (node) {\r\n<div [style.margin-left]=\"level * 8 + 'px'\">\r\n  <ng-template\r\n    #tree\r\n    let-node\r\n    let-parentLevel=\"level\"\r\n    let-selectedNode=\"selectedNode\"\r\n  >\r\n    <div\r\n      [style.margin-left]=\"parentLevel * 8 + 'px'\"\r\n      [class.selected]=\"node === selectedNode\"\r\n    >\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          (click)=\"node.isExpanded = !node.isExpanded\"\r\n        >\r\n          <mat-icon>{{\r\n            node.isExpanded ? \"expand_more\" : \"chevron_right\"\r\n          }}</mat-icon>\r\n        </button>\r\n        <span class=\"label\" (click)=\"selectNode(node)\">\r\n          {{ node.label }}\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"node.children && node.isExpanded\">\r\n        <ng-container *ngFor=\"let child of node.children\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              tree;\r\n              context: {\r\n                $implicit: child,\r\n                level: parentLevel + 1,\r\n                selectedNode: selectedNode\r\n              }\r\n            \"\r\n          ></ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- $implicit is the source of let-node -->\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      tree;\r\n      context: { $implicit: node, level: level, selectedNode: selectedNode }\r\n    \"\r\n  ></ng-container>\r\n</div>\r\n}\r\n", styles: [".label{cursor:pointer}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}\n"] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], selectedNode: [{
-                type: Input
-            }], selectedNodeChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 /**
  * 🔑 `gve-animation-timeline-set`
@@ -2622,43 +2654,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * - 🔥 `timelinesCancel` (`void`): emitted when the timeline editing is canceled.
  */
 class AnimationTimelineSetComponent {
-    /**
-     * The animation timelines to edit.
-     */
-    get timelines() {
-        return this._timelines;
-    }
-    set timelines(value) {
-        if (this._timelines === value) {
-            return;
-        }
-        this._timelines = value || [];
-        this.updateForm(this._timelines);
-    }
     constructor(formBuilder, _dialogService) {
         this._dialogService = _dialogService;
-        this._timelines = [];
+        /**
+         * The animation timelines to edit.
+         */
+        this.timelines = model([]);
+        /**
+         * The IDs of the elements that can be selected by the tween.
+         * This list is used to allow the user to select an element from a dropdown.
+         */
+        this.elementIds = input();
         /**
          * The tags that can be used by the timeline.
          */
-        this.tags = [];
+        this.tags = input([]);
         /**
          * Emitted when the timelines are changed.
          */
-        this.timelinesChange = new EventEmitter();
+        this.timelinesChange = output();
         /**
          * Emitted when the timeline editing is canceled.
          */
-        this.timelinesCancel = new EventEmitter();
+        this.timelinesCancel = output();
         this.set = formBuilder.control([], {
             nonNullable: true,
         });
         this.form = formBuilder.group({
             sets: this.set,
         });
+        effect(() => {
+            this.updateForm(this.timelines());
+        });
     }
     updateForm(animations) {
-        if (!animations.length) {
+        if (!animations?.length) {
             this.form.reset();
         }
         else {
@@ -2676,7 +2706,7 @@ class AnimationTimelineSetComponent {
         };
     }
     editTimeline(index) {
-        this.editedTimeline = this._timelines[index];
+        this.editedTimeline = this.timelines()[index];
     }
     onTimelineChange(timeline) {
         const timelines = [...this.set.value];
@@ -2693,8 +2723,8 @@ class AnimationTimelineSetComponent {
         this.set.setValue(timelines);
         this.set.markAsDirty();
         this.set.updateValueAndValidity();
-        this._timelines = this.set.value;
-        this.timelinesChange.emit(this._timelines);
+        this.timelines.set(this.set.value);
+        this.timelinesChange.emit(this.timelines());
     }
     deleteTimeline(index) {
         this._dialogService
@@ -2706,15 +2736,15 @@ class AnimationTimelineSetComponent {
                 this.set.setValue(timelines);
                 this.set.markAsDirty();
                 this.set.updateValueAndValidity();
-                this._timelines = this.set.value;
-                this.timelinesChange.emit(this._timelines);
+                this.timelines.set(this.set.value);
+                this.timelinesChange.emit(this.timelines());
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AnimationTimelineSetComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AnimationTimelineSetComponent, isStandalone: true, selector: "gve-animation-timeline-set", inputs: { timelines: "timelines", elementIds: "elementIds", tags: "tags" }, outputs: { timelinesChange: "timelinesChange", timelinesCancel: "timelinesCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\">\r\n  <!-- add -->\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      (click)=\"newTimeline()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon>\r\n      timeline\r\n    </button>\r\n  </div>\r\n\r\n  <!-- table -->\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>tag</th>\r\n        <th>tweens</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of set.value; track t.tag; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button type=\"button\" mat-icon-button (click)=\"editTimeline(index)\">\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button type=\"button\" mat-icon-button (click)=\"deleteTimeline(index)\">\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>{{ t.tag }}</td>\r\n        <td>{{ t.tweens.length }}</td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedTimeline\" [expanded]=\"editedTimeline\">\r\n    <mat-expansion-panel-header>\r\n      timeline {{ editedTimeline?.tag }}\r\n    </mat-expansion-panel-header>\r\n    <gve-animation-timeline\r\n      [elementIds]=\"elementIds\"\r\n      [tags]=\"tags\"\r\n      [timeline]=\"editedTimeline\"\r\n      (timelineChange)=\"onTimelineChange($event)\"\r\n      (timelineCancel)=\"closeTimeline()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}table{width:100%;border-collapse:collapse;margin:8px 0}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: AnimationTimelineComponent, selector: "gve-animation-timeline", inputs: ["timeline", "elementIds", "tags"], outputs: ["timelineChange", "timelineCancel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AnimationTimelineSetComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: AnimationTimelineSetComponent, isStandalone: true, selector: "gve-animation-timeline-set", inputs: { timelines: { classPropertyName: "timelines", publicName: "timelines", isSignal: true, isRequired: false, transformFunction: null }, elementIds: { classPropertyName: "elementIds", publicName: "elementIds", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timelines: "timelinesChange", timelinesChange: "timelinesChange", timelinesCancel: "timelinesCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\">\r\n  <!-- add -->\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      (click)=\"newTimeline()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon>\r\n      timeline\r\n    </button>\r\n  </div>\r\n\r\n  <!-- table -->\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>tag</th>\r\n        <th>tweens</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of set.value; track t.tag; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button type=\"button\" mat-icon-button (click)=\"editTimeline(index)\">\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button type=\"button\" mat-icon-button (click)=\"deleteTimeline(index)\">\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>{{ t.tag }}</td>\r\n        <td>{{ t.tweens.length }}</td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedTimeline\" [expanded]=\"editedTimeline\">\r\n    <mat-expansion-panel-header>\r\n      timeline {{ editedTimeline?.tag }}\r\n    </mat-expansion-panel-header>\r\n    <gve-animation-timeline\r\n      [elementIds]=\"elementIds()\"\r\n      [tags]=\"tags()\"\r\n      [timeline]=\"editedTimeline\"\r\n      (timelineChange)=\"onTimelineChange($event)\"\r\n      (timelineCancel)=\"closeTimeline()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}table{width:100%;border-collapse:collapse;margin:8px 0}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: AnimationTimelineComponent, selector: "gve-animation-timeline", inputs: ["timeline", "elementIds", "tags"], outputs: ["timelineChange", "timelineCancel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AnimationTimelineSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AnimationTimelineSetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-animation-timeline-set', imports: [
                         CommonModule,
@@ -2729,18 +2759,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatTabsModule,
                         MatTooltipModule,
                         AnimationTimelineComponent,
-                    ], template: "<form [formGroup]=\"form\">\r\n  <!-- add -->\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      (click)=\"newTimeline()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon>\r\n      timeline\r\n    </button>\r\n  </div>\r\n\r\n  <!-- table -->\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>tag</th>\r\n        <th>tweens</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of set.value; track t.tag; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button type=\"button\" mat-icon-button (click)=\"editTimeline(index)\">\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button type=\"button\" mat-icon-button (click)=\"deleteTimeline(index)\">\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>{{ t.tag }}</td>\r\n        <td>{{ t.tweens.length }}</td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedTimeline\" [expanded]=\"editedTimeline\">\r\n    <mat-expansion-panel-header>\r\n      timeline {{ editedTimeline?.tag }}\r\n    </mat-expansion-panel-header>\r\n    <gve-animation-timeline\r\n      [elementIds]=\"elementIds\"\r\n      [tags]=\"tags\"\r\n      [timeline]=\"editedTimeline\"\r\n      (timelineChange)=\"onTimelineChange($event)\"\r\n      (timelineCancel)=\"closeTimeline()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}table{width:100%;border-collapse:collapse;margin:8px 0}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.DialogService }], propDecorators: { timelines: [{
-                type: Input
-            }], elementIds: [{
-                type: Input
-            }], tags: [{
-                type: Input
-            }], timelinesChange: [{
-                type: Output
-            }], timelinesCancel: [{
-                type: Output
-            }] } });
+                    ], template: "<form [formGroup]=\"form\">\r\n  <!-- add -->\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      (click)=\"newTimeline()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon>\r\n      timeline\r\n    </button>\r\n  </div>\r\n\r\n  <!-- table -->\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>tag</th>\r\n        <th>tweens</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of set.value; track t.tag; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button type=\"button\" mat-icon-button (click)=\"editTimeline(index)\">\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button type=\"button\" mat-icon-button (click)=\"deleteTimeline(index)\">\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>{{ t.tag }}</td>\r\n        <td>{{ t.tweens.length }}</td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedTimeline\" [expanded]=\"editedTimeline\">\r\n    <mat-expansion-panel-header>\r\n      timeline {{ editedTimeline?.tag }}\r\n    </mat-expansion-panel-header>\r\n    <gve-animation-timeline\r\n      [elementIds]=\"elementIds()\"\r\n      [tags]=\"tags()\"\r\n      [timeline]=\"editedTimeline\"\r\n      (timelineChange)=\"onTimelineChange($event)\"\r\n      (timelineCancel)=\"closeTimeline()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}table{width:100%;border-collapse:collapse;margin:8px 0}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.DialogService }] });
 
 /**
  * 🔑 `gve-snapshot-text-editor`
@@ -2752,26 +2772,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * - 🔥 `textChange` (`CharNode[]`): event emitted when text changes.
  */
 class SnapshotTextEditorComponent {
-    get text() {
-        return this._nodes;
-    }
-    set text(value) {
-        if (this._nodes === value) {
-            return;
-        }
-        this._nodes = value || [];
-        this.updateUserText();
-    }
     constructor(formBuilder, 
     // this component can be used as a dialog
     dialogRef, data) {
         this.dialogRef = dialogRef;
         this.data = data;
-        this._nodes = [];
+        this.text = model([]);
         /**
          * Emitted when text changes.
          */
-        this.textChange = new EventEmitter();
+        this.textChange = output();
         this.userText = formBuilder.control('', {
             nonNullable: true,
             validators: [Validators.required, Validators.maxLength(5000)],
@@ -2779,16 +2789,19 @@ class SnapshotTextEditorComponent {
         this.form = new FormGroup({
             userText: this.userText,
         });
+        // when text changes, update the user text
+        effect(() => {
+            this.updateUserText(this.text());
+        });
     }
-    updateUserText() {
-        this.userText.setValue(this._nodes.map((node) => node.label).join(''));
+    updateUserText(nodes) {
+        this.userText.setValue(nodes.map((node) => node.label).join(''));
         this.userText.markAsPristine();
         this.userText.updateValueAndValidity();
     }
     ngOnInit() {
         if (this.data?.payload?.text) {
-            this._nodes = this.data.payload.text;
-            this.updateUserText();
+            this.text.set(this.data.payload.text);
         }
     }
     close() {
@@ -2802,14 +2815,14 @@ class SnapshotTextEditorComponent {
         if (!this.userText.value) {
             return;
         }
-        this._nodes = SnapshotViewService.stringToBaseChars(this.userText.value);
-        this.textChange.emit(this._nodes);
-        this.dialogRef?.close(this._nodes);
+        this.text.set(SnapshotViewService.stringToBaseChars(this.userText.value));
+        this.textChange.emit(this.text());
+        this.dialogRef?.close(this.text());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SnapshotTextEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i3$1.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SnapshotTextEditorComponent, isStandalone: true, selector: "gve-snapshot-text-editor", inputs: { text: "text" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n  <div id=\"heading\">\r\n    <h2>Set Base Text</h2>\r\n  </div>\r\n  }\r\n  <form [formGroup]=\"form\" (submit)=\"save()\">\r\n    <fieldset>\r\n      <div id=\"batch-input\">\r\n        <div>\r\n          <mat-form-field class=\"full-width\">\r\n            <mat-label>base text</mat-label>\r\n            <textarea matInput [formControl]=\"userText\" rows=\"8\"></textarea>\r\n            @if ($any(userText).errors?.required && (userText.dirty ||\r\n            userText.touched)) {\r\n            <mat-error>text required</mat-error>\r\n            } @if ($any(userText).errors?.maxLength && (userText.dirty ||\r\n            userText.touched)) {\r\n            <mat-error>text too long</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n      <div class=\"form-row-center\">\r\n        @if (dialogRef) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"mat-warn\"\r\n          mat-flat-button\r\n          matTooltip=\"Close dialog\"\r\n          (click)=\"close()\"\r\n        >\r\n          close\r\n        </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"mat-primary\"\r\n          mat-flat-button\r\n          matTooltip=\"Set base text\"\r\n          [disabled]=\"form.invalid\"\r\n          (click)=\"save()\"\r\n        >\r\n          set\r\n        </button>\r\n      </div>\r\n    </fieldset>\r\n  </form>\r\n</div>\r\n", styles: [".full-width{width:100%}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SnapshotTextEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i3$1.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SnapshotTextEditorComponent, isStandalone: true, selector: "gve-snapshot-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", textChange: "textChange" }, ngImport: i0, template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n  <div id=\"heading\">\r\n    <h2>Set Base Text</h2>\r\n  </div>\r\n  }\r\n  <form [formGroup]=\"form\" (submit)=\"save()\">\r\n    <fieldset>\r\n      <div id=\"batch-input\">\r\n        <div>\r\n          <mat-form-field class=\"full-width\">\r\n            <mat-label>base text</mat-label>\r\n            <textarea matInput [formControl]=\"userText\" rows=\"8\"></textarea>\r\n            @if ($any(userText).errors?.required && (userText.dirty ||\r\n            userText.touched)) {\r\n            <mat-error>text required</mat-error>\r\n            } @if ($any(userText).errors?.maxLength && (userText.dirty ||\r\n            userText.touched)) {\r\n            <mat-error>text too long</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n      <div class=\"form-row-center\">\r\n        @if (dialogRef) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"mat-warn\"\r\n          mat-flat-button\r\n          matTooltip=\"Close dialog\"\r\n          (click)=\"close()\"\r\n        >\r\n          close\r\n        </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"mat-primary\"\r\n          mat-flat-button\r\n          matTooltip=\"Set base text\"\r\n          [disabled]=\"form.invalid\"\r\n          (click)=\"save()\"\r\n        >\r\n          set\r\n        </button>\r\n      </div>\r\n    </fieldset>\r\n  </form>\r\n</div>\r\n", styles: [".full-width{width:100%}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SnapshotTextEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SnapshotTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-snapshot-text-editor', imports: [
                         ReactiveFormsModule,
@@ -2825,11 +2838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }, {
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }], propDecorators: { text: [{
-                type: Input
-            }], textChange: [{
-                type: Output
-            }] } });
+                }] }] });
 
 // default snapshot view title
 const VIEW_TITLE = 'preview';
@@ -2848,36 +2857,36 @@ const SVG_TRANSP_SUFFIX = '_t';
  * - 🔥 `snapshotCancel` (`void`): emitted when the user cancels the snapshot editing.
  */
 class SnapshotEditorComponent {
-    /**
-     * The snapshot to edit.
-     */
-    get snapshot() {
-        return this._snapshot;
-    }
-    set snapshot(value) {
-        if (this._snapshot === value) {
-            return;
-        }
-        this._snapshot = value || undefined;
-        this.updateForm(this._snapshot);
-        setTimeout(() => {
-            this.runToLast();
-        }, 0);
-    }
     constructor(formBuilder, _api, _dialog, _dialogService, _snackbar) {
         this._api = _api;
         this._dialog = _dialog;
         this._dialogService = _dialogService;
         this._snackbar = _snackbar;
         this._nanoid = customAlphabet('1234567890abcdef', 10);
+        /**
+         * The snapshot to edit.
+         */
+        this.snapshot = model();
+        /**
+         * The batch operations text to set for the editor.
+         */
+        this.batchOps = input();
+        /**
+         * True to disable saving.
+         */
+        this.noSave = input();
+        /**
+         * True to enable debug mode for view rendition.
+         */
+        this.debug = input();
         /**
          * Emitted when the user saves the edited snapshot.
          */
-        this.snapshotChange = new EventEmitter();
+        this.snapshotChange = output();
         /**
          * Emitted when the user cancels the snapshot editing.
          */
-        this.snapshotCancel = new EventEmitter();
+        this.snapshotCancel = output();
         // list of operations output tags
         this.opTags = [];
         // list of operation diplomatic.g element IDs
@@ -2899,6 +2908,7 @@ class SnapshotEditorComponent {
         this.viewTitle = VIEW_TITLE;
         this.rulers = true;
         this.initialStepIndex = -1;
+        this.showChain = new FormControl(false, { nonNullable: true });
         // general
         this.width = new FormControl(800, { nonNullable: true });
         this.height = new FormControl(600, { nonNullable: true });
@@ -2958,6 +2968,13 @@ class SnapshotEditorComponent {
             // timelines
             timelines: this.timelines,
         });
+        // when snapshot changes, update the form
+        effect(() => {
+            this.updateForm(this.snapshot());
+            setTimeout(() => {
+                this.runToLast();
+            }, 0);
+        });
     }
     /**
      * Set the view data for the snapshot view.
@@ -2978,7 +2995,7 @@ class SnapshotEditorComponent {
         this.viewData = {
             snapshot: snapshot,
             options: {
-                debug: this.debug,
+                debug: this.debug(),
                 delayedRender: true,
                 showRulers: true,
                 showGrid: true,
@@ -3142,6 +3159,9 @@ class SnapshotEditorComponent {
      * @param op The changed operation.
      */
     onOperationChange(op) {
+        if (!op) {
+            return;
+        }
         console.log('operation change');
         const operations = [...this.operations.value];
         // replace or add the operation
@@ -3398,6 +3418,10 @@ class SnapshotEditorComponent {
                         this.playTimeline(tl);
                     }, 0);
                 }
+                // get the chain model if requested
+                if (this.showChain.value) {
+                    this.getChainAt(index);
+                }
             },
             error: (error) => {
                 console.error(error);
@@ -3423,6 +3447,46 @@ class SnapshotEditorComponent {
             this.result = undefined;
         }
     }
+    getChainAt(index, lastOperation) {
+        // get the snapshot to run operations on
+        const snapshot = this.getSnapshot();
+        if (!snapshot.text) {
+            return;
+        }
+        // remove from the snapshot the operations past the specified index,
+        // also replacing the last operation when this was received as a parameter
+        if (lastOperation) {
+            snapshot.operations = snapshot.operations.slice(0, index);
+            snapshot.operations.push(lastOperation);
+        }
+        else {
+            lastOperation = snapshot.operations[index];
+            snapshot.operations = snapshot.operations.slice(0, index + 1);
+        }
+        this.busy = true;
+        this._api
+            .getChain(snapshot.text, snapshot.operations)
+            .subscribe({
+            next: (wrapper) => {
+                // handle operation (non-fatal) error or result
+                if (wrapper.error) {
+                    this._snackbar.open(wrapper.error, 'OK');
+                    this.chain = undefined;
+                }
+                else {
+                    this.chain = wrapper.result;
+                }
+            },
+            error: (error) => {
+                console.error(error);
+                this._transparentIds = undefined;
+                this._snackbar.open('Error running operations', 'OK');
+            },
+            complete: () => {
+                this.busy = false;
+            },
+        });
+    }
     /**
      * Update the snapshot view by running the operations up to the
      * currently edited operation if any.
@@ -3441,63 +3505,6 @@ class SnapshotEditorComponent {
         }, 0);
     }
     // #endregion
-    /**
-     * Build the snapshot at the specified execution step. This implies adding
-     * the nodes introduced by the operations up to the specified step, and
-     * updating the features of the nodes introduced by the specified step.
-     * Also, the operations after the specified step are removed from the
-     * snapshot.
-     *
-     * @param step The step to build the snapshot at.
-     * @returns The snapshot at the specified step.
-     */
-    buildSnapshotAtStep(step) {
-        // no result, nothing to do
-        if (!this.result) {
-            return null;
-        }
-        // get the currently edited snapshot
-        const snapshot = this.getSnapshot();
-        // find the max ID in snapshot.text (=original) nodes,
-        // so that any ID greater than it belongs to new nodes
-        const maxOriginalId = snapshot.text.reduce((max, n) => Math.max(max, n.id), 0);
-        // get the nodes of the picked step
-        const nodes = snapshot.text;
-        const stepNodes = this.result.taggedNodes[step.outputTag] || [];
-        // update the snapshot text nodes copies with the picked step nodes,
-        // by updating their features if existing, or adding new nodes if not.
-        for (const sn of stepNodes) {
-            // find the node in the original snapshot text
-            const i = nodes.findIndex((n) => n.id === sn.id);
-            // if found, update its features, else add it
-            if (i > -1) {
-                nodes[i].features = sn.features;
-            }
-            else {
-                // new node: we assume that it has a manually set position (x,y features)
-                nodes.push(sn);
-            }
-        }
-        // append nodes introduced *before* the picked step, if any
-        // (those introduced by the picked step have already been added)
-        const stepIndex = this.result.steps.indexOf(step);
-        for (let i = 0; i < stepIndex; i++) {
-            const stepNodes = this.result.taggedNodes[this.result.steps[i].outputTag];
-            for (const n of stepNodes) {
-                if (n.id > maxOriginalId && !nodes.find((x) => x.id === n.id)) {
-                    nodes.push(n);
-                }
-            }
-        }
-        // update the snapshot text nodes
-        snapshot.text = nodes;
-        // remove from the snapshot the operations after the picked step
-        const i = snapshot.operations.findIndex((o) => o.id === step.operation.id);
-        if (i > -1) {
-            snapshot.operations = snapshot.operations.slice(0, i + 1);
-        }
-        return snapshot;
-    }
     playTimeline(tl) {
         const shadowRoot = this.snapshotView?.nativeElement?.shadowRoot;
         if (tl && shadowRoot) {
@@ -3596,6 +3603,9 @@ class SnapshotEditorComponent {
      * @param timelines The timelines.
      */
     onTimelinesChange(timelines) {
+        if (!timelines) {
+            return;
+        }
         this.timelines.setValue(timelines);
         this.timelines.markAsDirty();
         this.timelines.updateValueAndValidity();
@@ -3719,16 +3729,16 @@ class SnapshotEditorComponent {
      * in the snapshot change event.
      */
     save() {
-        if (this.form.invalid || this.noSave) {
+        if (this.form.invalid || this.noSave()) {
             return;
         }
-        this._snapshot = this.getSnapshot();
-        this.snapshotChange.emit(this._snapshot);
+        this.snapshot.set(this.getSnapshot());
+        this.snapshotChange.emit(this.snapshot());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SnapshotEditorComponent, deps: [{ token: i1.FormBuilder }, { token: GveApiService }, { token: i3$1.MatDialog }, { token: i2$1.DialogService }, { token: i5$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SnapshotEditorComponent, isStandalone: true, selector: "gve-snapshot-editor", inputs: { snapshot: "snapshot", batchOps: "batchOps", noSave: "noSave", debug: "debug" }, outputs: { snapshotChange: "snapshotChange", snapshotCancel: "snapshotCancel" }, viewQueries: [{ propertyName: "snapshotView", first: true, predicate: ["snapshotView"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>article</mat-icon> <span class=\"label\">text</span>\r\n      </ng-template>\r\n      <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <!-- base text -->\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"mat-warn\"\r\n          matTooltip=\"Enter base text\"\r\n          (click)=\"inputBaseText()\"\r\n          [disabled]=\"busy\"\r\n        >\r\n          <mat-icon>edit</mat-icon> base text\r\n        </button>\r\n        <!-- base text metadata -->\r\n        <fieldset>\r\n          <div class=\"form-row\">\r\n            <!-- offsetX -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>X offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"offsetX\"\r\n                placeholder=\"X offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- offsetY -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>Y offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"offsetY\"\r\n                placeholder=\"Y offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- lineHeightOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>ln h-offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"lineHeightOffset\"\r\n                placeholder=\"ln h-offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- charSpacingOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>char spacing</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"charSpacingOffset\"\r\n                placeholder=\"char spacing\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- spcWidthOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>spc w-offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"spcWidthOffset\"\r\n                placeholder=\"spc w-offset\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- minLineHeights -->\r\n            <div class=\"boxed\">\r\n              <gve-ln-heights-editor\r\n                [lineCount]=\"lineCount\"\r\n                [heights]=\"lnHeights.value\"\r\n                (heightsChange)=\"onHeightsChange($event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <!-- textStyle -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>text style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"textStyle\"\r\n                placeholder=\"text style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </fieldset>\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>edit</mat-icon> <span class=\"label\">operations</span>\r\n      </ng-template>\r\n\r\n      <div id=\"snapshot-container\">\r\n        <div id=\"general\">\r\n          <div class=\"form-row\">\r\n            <!-- width -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>width</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"width\"\r\n                placeholder=\"width\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- height -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>height</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"height\"\r\n                placeholder=\"height\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- remove ops -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"mat-warn\"\r\n                mat-flat-button\r\n                matTooltip=\"Remove all the operations\"\r\n                [disabled]=\"!operations.value.length || busy\"\r\n                (click)=\"clearOperations()\"\r\n              >\r\n                <mat-icon>delete_forever</mat-icon> clear\r\n              </button>\r\n\r\n              <!-- batch add ops -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                matTooltip=\"Add a batch of operations\"\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy\"\r\n                (click)=\"parseOperations()\"\r\n              >\r\n                <mat-icon>post_add</mat-icon> batch\r\n              </button>\r\n\r\n              <!-- add op -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                class=\"mat-primary\"\r\n                [disabled]=\"!baseText.value\"\r\n                (click)=\"editNewOperation()\"\r\n              >\r\n                <mat-icon>add_circle</mat-icon> operation\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- ops -->\r\n        <div id=\"ops\">\r\n          <!-- operations list -->\r\n          @if (operations.value.length) {\r\n          <table id=\"list\">\r\n            <thead>\r\n              <tr>\r\n                <th>nr.</th>\r\n                <th></th>\r\n                <th>ID</th>\r\n                <th>type</th>\r\n                <th>at</th>\r\n                <th>run</th>\r\n                <th>value</th>\r\n                <th>itag</th>\r\n                <th>otag</th>\r\n                <th>gid</th>\r\n                <th>feats</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (operation of operations.value; track operation.id; let\r\n              index=$index) {\r\n              <tr\r\n                [ngClass]=\"{ selected: operation.id === resultOperationId }\"\r\n                [ngClass]=\"{ edited: operation.id === editedOp?.id }\"\r\n              >\r\n                <td class=\"fit-width\">{{ index + 1 }}.</td>\r\n                <td class=\"fit-width\">\r\n                  <!-- edit -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-primary\"\r\n                    (click)=\"editOperation(index)\"\r\n                    matTooltip=\"Edit operation\"\r\n                  >\r\n                    <mat-icon>edit</mat-icon>\r\n                  </button>\r\n                  <!-- delete -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-warn\"\r\n                    (click)=\"deleteOperation(index)\"\r\n                    matTooltip=\"Delete operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                  </button>\r\n                  <!-- run to -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-accent\"\r\n                    (click)=\"runTo(index)\"\r\n                    matTooltip=\"Run to this operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                  </button>\r\n                </td>\r\n                <td>{{ operation.id }}</td>\r\n                <td>{{ operation.type | flatLookup : opTypeMap }}</td>\r\n                <td>{{ operation.at }}</td>\r\n                <td>{{ operation.run }}</td>\r\n                <td>{{ operation.value }}</td>\r\n                <td>{{ operation.inputTag }}</td>\r\n                <td>{{ operation.outputTag }}</td>\r\n                <td>{{ operation.groupId }}</td>\r\n                <td>{{ operation.features?.length }}</td>\r\n              </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          <mat-expansion-panel [expanded]=\"editedOp\" [disabled]=\"!editedOp\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [hidePreview]=\"editedOpIndex === -1\"\r\n                [operation]=\"editedOp\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n\r\n          <!-- opStyle -->\r\n          <div id=\"opStyle\">\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>operations style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"opStyle\"\r\n                placeholder=\"operations style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- image -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>image</mat-icon> <span class=\"label\">image</span>\r\n      </ng-template>\r\n\r\n      <div id=\"image\">\r\n        <div id=\"image-ctl\">\r\n          <!-- url -->\r\n          <mat-form-field class=\"long-text\">\r\n            <mat-label>URL</mat-label>\r\n            <input matInput [formControl]=\"imageUrl\" />\r\n          </mat-form-field>\r\n          <div class=\"form-row\">\r\n            <!-- x -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>X</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"imageX\"\r\n                placeholder=\"X\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- y -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>Y</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"imageY\"\r\n                placeholder=\"Y\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- width -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>width</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"imageWidth\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- height -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>height</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"imageHeight\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- reset -->\r\n            <button\r\n              type=\"button\"\r\n              mat-icon-button\r\n              class=\"mat-warn\"\r\n              matTooltip=\"Reset image metadata\"\r\n              (click)=\"resetImgMetadata()\"\r\n            >\r\n              <mat-icon>clear</mat-icon>\r\n            </button>\r\n          </div>\r\n          <div>\r\n            <!-- image opacity -->\r\n            <mat-slider\r\n              min=\"0\"\r\n              max=\"1\"\r\n              step=\"0.01\"\r\n              thumbLabel\r\n              color=\"primary\"\r\n              class=\"mat-primary\"\r\n              matTooltip=\"Image opacity\"\r\n            >\r\n              <input\r\n                matSliderThumb\r\n                [value]=\"imageOpacity.value\"\r\n                (valueChange)=\"onImageOpacityChange($event)\"\r\n              />\r\n            </mat-slider>\r\n            <span id=\"opacity-value\">{{\r\n              imageOpacity.value | number : \"1.2-2\"\r\n            }}</span>\r\n          </div>\r\n          <!-- defs -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\">\r\n              <mat-label>defs</mat-label>\r\n              <textarea matInput [formControl]=\"defs\" rows=\"3\"></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div id=\"image-view\">\r\n          @if (imageUrl.value) {\r\n          <img\r\n            #imgElement\r\n            alt=\"background\"\r\n            [src]=\"imageUrl.value\"\r\n            width=\"600\"\r\n            (load)=\"onImageLoad(imgElement)\"\r\n          />\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- timelines -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>animation</mat-icon> <span class=\"label\">animation</span>\r\n      </ng-template>\r\n\r\n      <gve-animation-timeline-set\r\n        [tags]=\"opTags\"\r\n        [elementIds]=\"opElementIds\"\r\n        [timelines]=\"timelines.value\"\r\n        (timelinesChange)=\"onTimelinesChange($event)\"\r\n      />\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div>\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"busy\" />\r\n  </div>\r\n\r\n  <!-- result -->\r\n  @if (result) {\r\n  <fieldset id=\"result\">\r\n    <legend>result</legend>\r\n    <gve-chain-result-view\r\n      [result]=\"result\"\r\n      [initialStepIndex]=\"initialStepIndex\"\r\n      (stepPick)=\"onStepPick($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  <fieldset id=\"preview\">\r\n    <legend class=\"button-row\">\r\n      <span>{{ viewTitle }}</span>\r\n    </legend>\r\n    <!-- snapshot view -->\r\n    <gve-snapshot-view\r\n      #snapshotView\r\n      [debug]=\"debug\"\r\n      [data]=\"viewData\"\r\n      (snapshotRender)=\"onSnapshotRender($any($event))\"\r\n      (visualEvent)=\"onVisualEvent($any($event))\"\r\n    />\r\n    <div class=\"button-row\">\r\n      <!-- toggle ruler -->\r\n      <mat-button-toggle\r\n        type=\"button\"\r\n        mat-icon-button\r\n        color=\"primary\"\r\n        matTooltip=\"Toggle rulers\"\r\n        [checked]=\"rulers\"\r\n        (change)=\"toggleRulers()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">straighten</mat-icon>\r\n      </mat-button-toggle>\r\n      <!-- run to last -->\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        class=\"primary\"\r\n        matTooltip=\"Refresh preview\"\r\n        (click)=\"runToLast()\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </div>\r\n    @if (visualInfo) {\r\n    <div id=\"visual-info\">{{ visualInfo }}</div>\r\n    }\r\n  </fieldset>\r\n\r\n  <!--buttons -->\r\n  <div class=\"form-row-center\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-flat-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n      close\r\n    </button>\r\n    @if (!noSave) {\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save changes\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}.form-row .right{margin-left:auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}#text-range{margin:8px;border:1px solid silver;border-radius:6px;padding:6px}mat-expansion-panel{margin:8px 0}div#visual-info{font-size:95%;color:#909090;margin:8px}#list{margin:8px 0}#opStyle{margin-top:8px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#c8d9eb}tr.edited{background-color:#f6f6e4}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:#909090}.error{color:red}.input-nr{width:6em}.full-width{width:100%}.code{font-family:Courier New,Courier,monospace}.boxed{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}span.label{margin-left:8px}gve-animation-timeline-set{margin:8px 0}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}@media only screen and (max-width: 959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: i8$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i15.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i15.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i15.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChainOperationEditorComponent, selector: "gve-chain-operation-editor", inputs: ["operation", "snapshot", "hidePreview"], outputs: ["operationChange", "operationPreview", "operationCancel"] }, { kind: "component", type: ChainResultViewComponent, selector: "gve-chain-result-view", inputs: ["result", "initialStepIndex"], outputs: ["stepPick"] }, { kind: "component", type: LnHeightsEditorComponent, selector: "gve-ln-heights-editor", inputs: ["lineCount", "heights"], outputs: ["heightsChange"] }, { kind: "component", type: AnimationTimelineSetComponent, selector: "gve-animation-timeline-set", inputs: ["timelines", "elementIds", "tags"], outputs: ["timelinesChange", "timelinesCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SnapshotEditorComponent, deps: [{ token: i1.FormBuilder }, { token: GveApiService }, { token: i3$1.MatDialog }, { token: i2$1.DialogService }, { token: i4$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SnapshotEditorComponent, isStandalone: true, selector: "gve-snapshot-editor", inputs: { snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, batchOps: { classPropertyName: "batchOps", publicName: "batchOps", isSignal: true, isRequired: false, transformFunction: null }, noSave: { classPropertyName: "noSave", publicName: "noSave", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { snapshot: "snapshotChange", snapshotChange: "snapshotChange", snapshotCancel: "snapshotCancel" }, viewQueries: [{ propertyName: "snapshotView", first: true, predicate: ["snapshotView"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>article</mat-icon> <span class=\"label\">text</span>\r\n      </ng-template>\r\n      <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <!-- base text -->\r\n        <div class=\"form-row\">\r\n          <button\r\n            type=\"button\"\r\n            mat-flat-button\r\n            color=\"mat-warn\"\r\n            matTooltip=\"Enter base text\"\r\n            (click)=\"inputBaseText()\"\r\n            [disabled]=\"busy\"\r\n          >\r\n            <mat-icon>edit</mat-icon> base text\r\n          </button>\r\n\r\n          @if (textRange) {\r\n          <span id=\"text-range\">{{ textRange.at }}\u00D7{{ textRange.run }}</span>\r\n          }\r\n        </div>\r\n        <!-- base text metadata -->\r\n        <fieldset>\r\n          <div class=\"form-row\">\r\n            <!-- offsetX -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>X offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"offsetX\"\r\n                placeholder=\"X offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- offsetY -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>Y offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"offsetY\"\r\n                placeholder=\"Y offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- lineHeightOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>ln h-offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"lineHeightOffset\"\r\n                placeholder=\"ln h-offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- charSpacingOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>char spacing</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"charSpacingOffset\"\r\n                placeholder=\"char spacing\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- spcWidthOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>spc w-offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"spcWidthOffset\"\r\n                placeholder=\"spc w-offset\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- minLineHeights -->\r\n            <div class=\"boxed\">\r\n              <gve-ln-heights-editor\r\n                [lineCount]=\"lineCount\"\r\n                [heights]=\"lnHeights.value || undefined\"\r\n                (heightsChange)=\"onHeightsChange($event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <!-- textStyle -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>text style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"textStyle\"\r\n                placeholder=\"text style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </fieldset>\r\n        <!-- text characters -->\r\n        <gve-base-text-view\r\n          [text]=\"baseText.value\"\r\n          [hasLineNumber]=\"true\"\r\n          (rangePick)=\"onRangePick($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>edit</mat-icon> <span class=\"label\">operations</span>\r\n      </ng-template>\r\n\r\n      <div id=\"snapshot-container\">\r\n        <div id=\"general\">\r\n          <div class=\"form-row\">\r\n            <!-- width -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>width</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"width\"\r\n                placeholder=\"width\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- height -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>height</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"height\"\r\n                placeholder=\"height\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- chain -->\r\n            <mat-checkbox [formControl]=\"showChain\">show chain</mat-checkbox>\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- remove ops -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"mat-warn\"\r\n                mat-flat-button\r\n                matTooltip=\"Remove all the operations\"\r\n                [disabled]=\"!operations.value.length || busy\"\r\n                (click)=\"clearOperations()\"\r\n              >\r\n                <mat-icon>delete_forever</mat-icon> clear\r\n              </button>\r\n\r\n              <!-- batch add ops -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                matTooltip=\"Add a batch of operations\"\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy\"\r\n                (click)=\"parseOperations()\"\r\n              >\r\n                <mat-icon>post_add</mat-icon> batch\r\n              </button>\r\n\r\n              <!-- add op -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                class=\"mat-primary\"\r\n                [disabled]=\"!baseText.value\"\r\n                (click)=\"editNewOperation()\"\r\n              >\r\n                <mat-icon>add_circle</mat-icon> operation\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- ops -->\r\n        <div id=\"ops\">\r\n          <!-- operations list -->\r\n          @if (operations.value.length) {\r\n          <table id=\"list\">\r\n            <thead>\r\n              <tr>\r\n                <th>nr.</th>\r\n                <th></th>\r\n                <th>ID</th>\r\n                <th>type</th>\r\n                <th>at</th>\r\n                <th>run</th>\r\n                <th>value</th>\r\n                <th>itag</th>\r\n                <th>otag</th>\r\n                <th>gid</th>\r\n                <th>feats</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (operation of operations.value; track operation.id; let\r\n              index=$index) {\r\n              <tr\r\n                [ngClass]=\"{ selected: operation.id === resultOperationId }\"\r\n                [ngClass]=\"{ edited: operation.id === editedOp?.id }\"\r\n              >\r\n                <td class=\"fit-width\">{{ index + 1 }}.</td>\r\n                <td class=\"fit-width\">\r\n                  <!-- edit -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-primary\"\r\n                    (click)=\"editOperation(index)\"\r\n                    matTooltip=\"Edit operation\"\r\n                  >\r\n                    <mat-icon>edit</mat-icon>\r\n                  </button>\r\n                  <!-- delete -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-warn\"\r\n                    (click)=\"deleteOperation(index)\"\r\n                    matTooltip=\"Delete operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                  </button>\r\n                  <!-- run to -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-accent\"\r\n                    (click)=\"runTo(index)\"\r\n                    matTooltip=\"Run to this operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                  </button>\r\n                </td>\r\n                <td>{{ operation.id }}</td>\r\n                <td>{{ operation.type | flatLookup : opTypeMap }}</td>\r\n                <td>{{ operation.at }}</td>\r\n                <td>{{ operation.run }}</td>\r\n                <td>{{ operation.value }}</td>\r\n                <td>{{ operation.inputTag }}</td>\r\n                <td>{{ operation.outputTag }}</td>\r\n                <td>{{ operation.groupId }}</td>\r\n                <td>{{ operation.features?.length }}</td>\r\n              </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          <mat-expansion-panel [expanded]=\"editedOp\" [disabled]=\"!editedOp\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [hidePreview]=\"editedOpIndex === -1\"\r\n                [operation]=\"editedOp\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n\r\n          <!-- opStyle -->\r\n          <div id=\"opStyle\">\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>operations style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"opStyle\"\r\n                placeholder=\"operations style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- image -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>image</mat-icon> <span class=\"label\">image</span>\r\n      </ng-template>\r\n\r\n      <div id=\"image\">\r\n        <div id=\"image-ctl\">\r\n          <!-- url -->\r\n          <mat-form-field class=\"long-text\">\r\n            <mat-label>URL</mat-label>\r\n            <input matInput [formControl]=\"imageUrl\" />\r\n          </mat-form-field>\r\n          <div class=\"form-row\">\r\n            <!-- x -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>X</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"imageX\"\r\n                placeholder=\"X\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- y -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>Y</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"imageY\"\r\n                placeholder=\"Y\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- width -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>width</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"imageWidth\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- height -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>height</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"imageHeight\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- reset -->\r\n            <button\r\n              type=\"button\"\r\n              mat-icon-button\r\n              matTooltip=\"Reset image metadata\"\r\n              (click)=\"resetImgMetadata()\"\r\n            >\r\n              <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n            </button>\r\n          </div>\r\n          <div>\r\n            <!-- image opacity -->\r\n            <mat-slider\r\n              min=\"0\"\r\n              max=\"1\"\r\n              step=\"0.01\"\r\n              thumbLabel\r\n              color=\"primary\"\r\n              class=\"mat-primary\"\r\n              matTooltip=\"Image opacity\"\r\n            >\r\n              <input\r\n                matSliderThumb\r\n                [value]=\"imageOpacity.value\"\r\n                (valueChange)=\"onImageOpacityChange($event)\"\r\n              />\r\n            </mat-slider>\r\n            <span id=\"opacity-value\">{{\r\n              imageOpacity.value | number : \"1.2-2\"\r\n            }}</span>\r\n          </div>\r\n          <!-- defs -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\">\r\n              <mat-label>defs</mat-label>\r\n              <textarea matInput [formControl]=\"defs\" rows=\"3\"></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div id=\"image-view\">\r\n          @if (imageUrl.value) {\r\n          <img\r\n            #imgElement\r\n            alt=\"background\"\r\n            [src]=\"imageUrl.value\"\r\n            width=\"600\"\r\n            (load)=\"onImageLoad(imgElement)\"\r\n          />\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- timelines -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>animation</mat-icon> <span class=\"label\">animation</span>\r\n      </ng-template>\r\n\r\n      <gve-animation-timeline-set\r\n        [tags]=\"opTags\"\r\n        [elementIds]=\"opElementIds\"\r\n        [timelines]=\"timelines.value\"\r\n        (timelinesChange)=\"onTimelinesChange($event)\"\r\n      />\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div>\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"busy\" />\r\n  </div>\r\n\r\n  <!-- result -->\r\n  @if (result) {\r\n  <fieldset id=\"result\">\r\n    <legend>result</legend>\r\n    <gve-chain-result-view\r\n      [result]=\"result\"\r\n      [initialStepIndex]=\"initialStepIndex\"\r\n      (stepPick)=\"onStepPick($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  <fieldset id=\"preview\">\r\n    <legend class=\"button-row\">\r\n      <span>{{ viewTitle }}</span>\r\n    </legend>\r\n    <!-- snapshot view -->\r\n    <gve-snapshot-view\r\n      #snapshotView\r\n      [debug]=\"debug()\"\r\n      [data]=\"viewData\"\r\n      (snapshotRender)=\"onSnapshotRender($any($event))\"\r\n      (visualEvent)=\"onVisualEvent($any($event))\"\r\n    />\r\n    <div class=\"button-row\">\r\n      <!-- toggle ruler -->\r\n      <mat-button-toggle\r\n        type=\"button\"\r\n        mat-icon-button\r\n        color=\"primary\"\r\n        matTooltip=\"Toggle rulers\"\r\n        [checked]=\"rulers\"\r\n        (change)=\"toggleRulers()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">straighten</mat-icon>\r\n      </mat-button-toggle>\r\n      <!-- run to last -->\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        class=\"primary\"\r\n        matTooltip=\"Refresh preview\"\r\n        (click)=\"runToLast()\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </div>\r\n    @if (visualInfo) {\r\n    <div id=\"visual-info\">{{ visualInfo }}</div>\r\n    }\r\n  </fieldset>\r\n\r\n  <!-- chain view -->\r\n  @if (chain) {\r\n  <div id=\"chain-view\">\r\n    <gve-chain-view [chain]=\"chain\" />\r\n  </div>\r\n  }\r\n\r\n  <!--buttons -->\r\n  <div class=\"form-row-center\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-flat-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n      close\r\n    </button>\r\n    @if (!noSave()) {\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save changes\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}.form-row .right{margin-left:auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}#text-range{margin:8px;border:1px solid silver;border-radius:6px;padding:6px}mat-expansion-panel{margin:8px 0}div#visual-info{font-size:95%;color:#909090;margin:8px}#list{margin:8px 0}#opStyle{margin-top:8px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#c8d9eb}tr.edited{background-color:#f6f6e4}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:#909090}.error{color:red}.input-nr{width:6em}.full-width{width:100%}.code{font-family:Courier New,Courier,monospace}.boxed{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}span.label{margin-left:8px}gve-animation-timeline-set{margin:8px 0}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}div#chain-view{margin-bottom:8px}@media only screen and (max-width: 959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: i8$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i15.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i15.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i16.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i16.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i16.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChainOperationEditorComponent, selector: "gve-chain-operation-editor", inputs: ["operation", "snapshot", "hidePreview"], outputs: ["operationChange", "operationPreview", "operationCancel"] }, { kind: "component", type: ChainResultViewComponent, selector: "gve-chain-result-view", inputs: ["result", "initialStepIndex"], outputs: ["stepPick"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "hasLineNumber", "text", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: LnHeightsEditorComponent, selector: "gve-ln-heights-editor", inputs: ["lineCount", "heights"], outputs: ["heightsChange"] }, { kind: "component", type: AnimationTimelineSetComponent, selector: "gve-animation-timeline-set", inputs: ["timelines", "elementIds", "tags"], outputs: ["timelinesChange", "timelinesCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }, { kind: "component", type: ChainViewComponent, selector: "gve-chain-view", inputs: ["chain", "direction", "selectedTags"], outputs: ["selectedTagsChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SnapshotEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SnapshotEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-snapshot-editor', imports: [
                         CommonModule,
@@ -3748,25 +3758,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         MatTooltipModule,
                         ChainOperationEditorComponent,
                         ChainResultViewComponent,
+                        BaseTextViewComponent,
                         LnHeightsEditorComponent,
                         AnimationTimelineSetComponent,
                         FlatLookupPipe,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>article</mat-icon> <span class=\"label\">text</span>\r\n      </ng-template>\r\n      <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <!-- base text -->\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"mat-warn\"\r\n          matTooltip=\"Enter base text\"\r\n          (click)=\"inputBaseText()\"\r\n          [disabled]=\"busy\"\r\n        >\r\n          <mat-icon>edit</mat-icon> base text\r\n        </button>\r\n        <!-- base text metadata -->\r\n        <fieldset>\r\n          <div class=\"form-row\">\r\n            <!-- offsetX -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>X offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"offsetX\"\r\n                placeholder=\"X offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- offsetY -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>Y offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"offsetY\"\r\n                placeholder=\"Y offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- lineHeightOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>ln h-offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"lineHeightOffset\"\r\n                placeholder=\"ln h-offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- charSpacingOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>char spacing</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"charSpacingOffset\"\r\n                placeholder=\"char spacing\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- spcWidthOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>spc w-offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"spcWidthOffset\"\r\n                placeholder=\"spc w-offset\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- minLineHeights -->\r\n            <div class=\"boxed\">\r\n              <gve-ln-heights-editor\r\n                [lineCount]=\"lineCount\"\r\n                [heights]=\"lnHeights.value\"\r\n                (heightsChange)=\"onHeightsChange($event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <!-- textStyle -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>text style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"textStyle\"\r\n                placeholder=\"text style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </fieldset>\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>edit</mat-icon> <span class=\"label\">operations</span>\r\n      </ng-template>\r\n\r\n      <div id=\"snapshot-container\">\r\n        <div id=\"general\">\r\n          <div class=\"form-row\">\r\n            <!-- width -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>width</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"width\"\r\n                placeholder=\"width\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- height -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>height</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"height\"\r\n                placeholder=\"height\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- remove ops -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"mat-warn\"\r\n                mat-flat-button\r\n                matTooltip=\"Remove all the operations\"\r\n                [disabled]=\"!operations.value.length || busy\"\r\n                (click)=\"clearOperations()\"\r\n              >\r\n                <mat-icon>delete_forever</mat-icon> clear\r\n              </button>\r\n\r\n              <!-- batch add ops -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                matTooltip=\"Add a batch of operations\"\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy\"\r\n                (click)=\"parseOperations()\"\r\n              >\r\n                <mat-icon>post_add</mat-icon> batch\r\n              </button>\r\n\r\n              <!-- add op -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                class=\"mat-primary\"\r\n                [disabled]=\"!baseText.value\"\r\n                (click)=\"editNewOperation()\"\r\n              >\r\n                <mat-icon>add_circle</mat-icon> operation\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- ops -->\r\n        <div id=\"ops\">\r\n          <!-- operations list -->\r\n          @if (operations.value.length) {\r\n          <table id=\"list\">\r\n            <thead>\r\n              <tr>\r\n                <th>nr.</th>\r\n                <th></th>\r\n                <th>ID</th>\r\n                <th>type</th>\r\n                <th>at</th>\r\n                <th>run</th>\r\n                <th>value</th>\r\n                <th>itag</th>\r\n                <th>otag</th>\r\n                <th>gid</th>\r\n                <th>feats</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (operation of operations.value; track operation.id; let\r\n              index=$index) {\r\n              <tr\r\n                [ngClass]=\"{ selected: operation.id === resultOperationId }\"\r\n                [ngClass]=\"{ edited: operation.id === editedOp?.id }\"\r\n              >\r\n                <td class=\"fit-width\">{{ index + 1 }}.</td>\r\n                <td class=\"fit-width\">\r\n                  <!-- edit -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-primary\"\r\n                    (click)=\"editOperation(index)\"\r\n                    matTooltip=\"Edit operation\"\r\n                  >\r\n                    <mat-icon>edit</mat-icon>\r\n                  </button>\r\n                  <!-- delete -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-warn\"\r\n                    (click)=\"deleteOperation(index)\"\r\n                    matTooltip=\"Delete operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                  </button>\r\n                  <!-- run to -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-accent\"\r\n                    (click)=\"runTo(index)\"\r\n                    matTooltip=\"Run to this operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                  </button>\r\n                </td>\r\n                <td>{{ operation.id }}</td>\r\n                <td>{{ operation.type | flatLookup : opTypeMap }}</td>\r\n                <td>{{ operation.at }}</td>\r\n                <td>{{ operation.run }}</td>\r\n                <td>{{ operation.value }}</td>\r\n                <td>{{ operation.inputTag }}</td>\r\n                <td>{{ operation.outputTag }}</td>\r\n                <td>{{ operation.groupId }}</td>\r\n                <td>{{ operation.features?.length }}</td>\r\n              </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          <mat-expansion-panel [expanded]=\"editedOp\" [disabled]=\"!editedOp\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [hidePreview]=\"editedOpIndex === -1\"\r\n                [operation]=\"editedOp\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n\r\n          <!-- opStyle -->\r\n          <div id=\"opStyle\">\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>operations style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"opStyle\"\r\n                placeholder=\"operations style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- image -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>image</mat-icon> <span class=\"label\">image</span>\r\n      </ng-template>\r\n\r\n      <div id=\"image\">\r\n        <div id=\"image-ctl\">\r\n          <!-- url -->\r\n          <mat-form-field class=\"long-text\">\r\n            <mat-label>URL</mat-label>\r\n            <input matInput [formControl]=\"imageUrl\" />\r\n          </mat-form-field>\r\n          <div class=\"form-row\">\r\n            <!-- x -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>X</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"imageX\"\r\n                placeholder=\"X\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- y -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>Y</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"imageY\"\r\n                placeholder=\"Y\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- width -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>width</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"imageWidth\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- height -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>height</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"imageHeight\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- reset -->\r\n            <button\r\n              type=\"button\"\r\n              mat-icon-button\r\n              class=\"mat-warn\"\r\n              matTooltip=\"Reset image metadata\"\r\n              (click)=\"resetImgMetadata()\"\r\n            >\r\n              <mat-icon>clear</mat-icon>\r\n            </button>\r\n          </div>\r\n          <div>\r\n            <!-- image opacity -->\r\n            <mat-slider\r\n              min=\"0\"\r\n              max=\"1\"\r\n              step=\"0.01\"\r\n              thumbLabel\r\n              color=\"primary\"\r\n              class=\"mat-primary\"\r\n              matTooltip=\"Image opacity\"\r\n            >\r\n              <input\r\n                matSliderThumb\r\n                [value]=\"imageOpacity.value\"\r\n                (valueChange)=\"onImageOpacityChange($event)\"\r\n              />\r\n            </mat-slider>\r\n            <span id=\"opacity-value\">{{\r\n              imageOpacity.value | number : \"1.2-2\"\r\n            }}</span>\r\n          </div>\r\n          <!-- defs -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\">\r\n              <mat-label>defs</mat-label>\r\n              <textarea matInput [formControl]=\"defs\" rows=\"3\"></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div id=\"image-view\">\r\n          @if (imageUrl.value) {\r\n          <img\r\n            #imgElement\r\n            alt=\"background\"\r\n            [src]=\"imageUrl.value\"\r\n            width=\"600\"\r\n            (load)=\"onImageLoad(imgElement)\"\r\n          />\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- timelines -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>animation</mat-icon> <span class=\"label\">animation</span>\r\n      </ng-template>\r\n\r\n      <gve-animation-timeline-set\r\n        [tags]=\"opTags\"\r\n        [elementIds]=\"opElementIds\"\r\n        [timelines]=\"timelines.value\"\r\n        (timelinesChange)=\"onTimelinesChange($event)\"\r\n      />\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div>\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"busy\" />\r\n  </div>\r\n\r\n  <!-- result -->\r\n  @if (result) {\r\n  <fieldset id=\"result\">\r\n    <legend>result</legend>\r\n    <gve-chain-result-view\r\n      [result]=\"result\"\r\n      [initialStepIndex]=\"initialStepIndex\"\r\n      (stepPick)=\"onStepPick($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  <fieldset id=\"preview\">\r\n    <legend class=\"button-row\">\r\n      <span>{{ viewTitle }}</span>\r\n    </legend>\r\n    <!-- snapshot view -->\r\n    <gve-snapshot-view\r\n      #snapshotView\r\n      [debug]=\"debug\"\r\n      [data]=\"viewData\"\r\n      (snapshotRender)=\"onSnapshotRender($any($event))\"\r\n      (visualEvent)=\"onVisualEvent($any($event))\"\r\n    />\r\n    <div class=\"button-row\">\r\n      <!-- toggle ruler -->\r\n      <mat-button-toggle\r\n        type=\"button\"\r\n        mat-icon-button\r\n        color=\"primary\"\r\n        matTooltip=\"Toggle rulers\"\r\n        [checked]=\"rulers\"\r\n        (change)=\"toggleRulers()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">straighten</mat-icon>\r\n      </mat-button-toggle>\r\n      <!-- run to last -->\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        class=\"primary\"\r\n        matTooltip=\"Refresh preview\"\r\n        (click)=\"runToLast()\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </div>\r\n    @if (visualInfo) {\r\n    <div id=\"visual-info\">{{ visualInfo }}</div>\r\n    }\r\n  </fieldset>\r\n\r\n  <!--buttons -->\r\n  <div class=\"form-row-center\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-flat-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n      close\r\n    </button>\r\n    @if (!noSave) {\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save changes\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}.form-row .right{margin-left:auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}#text-range{margin:8px;border:1px solid silver;border-radius:6px;padding:6px}mat-expansion-panel{margin:8px 0}div#visual-info{font-size:95%;color:#909090;margin:8px}#list{margin:8px 0}#opStyle{margin-top:8px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#c8d9eb}tr.edited{background-color:#f6f6e4}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:#909090}.error{color:red}.input-nr{width:6em}.full-width{width:100%}.code{font-family:Courier New,Courier,monospace}.boxed{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}span.label{margin-left:8px}gve-animation-timeline-set{margin:8px 0}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}@media only screen and (max-width: 959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: GveApiService }, { type: i3$1.MatDialog }, { type: i2$1.DialogService }, { type: i5$2.MatSnackBar }], propDecorators: { snapshotView: [{
+                        ChainViewComponent,
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>article</mat-icon> <span class=\"label\">text</span>\r\n      </ng-template>\r\n      <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <!-- base text -->\r\n        <div class=\"form-row\">\r\n          <button\r\n            type=\"button\"\r\n            mat-flat-button\r\n            color=\"mat-warn\"\r\n            matTooltip=\"Enter base text\"\r\n            (click)=\"inputBaseText()\"\r\n            [disabled]=\"busy\"\r\n          >\r\n            <mat-icon>edit</mat-icon> base text\r\n          </button>\r\n\r\n          @if (textRange) {\r\n          <span id=\"text-range\">{{ textRange.at }}\u00D7{{ textRange.run }}</span>\r\n          }\r\n        </div>\r\n        <!-- base text metadata -->\r\n        <fieldset>\r\n          <div class=\"form-row\">\r\n            <!-- offsetX -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>X offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"offsetX\"\r\n                placeholder=\"X offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- offsetY -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>Y offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"offsetY\"\r\n                placeholder=\"Y offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- lineHeightOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>ln h-offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"lineHeightOffset\"\r\n                placeholder=\"ln h-offset\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- charSpacingOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>char spacing</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"charSpacingOffset\"\r\n                placeholder=\"char spacing\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- spcWidthOffset -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>spc w-offset</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"spcWidthOffset\"\r\n                placeholder=\"spc w-offset\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- minLineHeights -->\r\n            <div class=\"boxed\">\r\n              <gve-ln-heights-editor\r\n                [lineCount]=\"lineCount\"\r\n                [heights]=\"lnHeights.value || undefined\"\r\n                (heightsChange)=\"onHeightsChange($event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <!-- textStyle -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>text style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"textStyle\"\r\n                placeholder=\"text style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </fieldset>\r\n        <!-- text characters -->\r\n        <gve-base-text-view\r\n          [text]=\"baseText.value\"\r\n          [hasLineNumber]=\"true\"\r\n          (rangePick)=\"onRangePick($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>edit</mat-icon> <span class=\"label\">operations</span>\r\n      </ng-template>\r\n\r\n      <div id=\"snapshot-container\">\r\n        <div id=\"general\">\r\n          <div class=\"form-row\">\r\n            <!-- width -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>width</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"width\"\r\n                placeholder=\"width\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- height -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>height</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"height\"\r\n                placeholder=\"height\"\r\n              />\r\n            </mat-form-field>\r\n\r\n            <!-- chain -->\r\n            <mat-checkbox [formControl]=\"showChain\">show chain</mat-checkbox>\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- remove ops -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"mat-warn\"\r\n                mat-flat-button\r\n                matTooltip=\"Remove all the operations\"\r\n                [disabled]=\"!operations.value.length || busy\"\r\n                (click)=\"clearOperations()\"\r\n              >\r\n                <mat-icon>delete_forever</mat-icon> clear\r\n              </button>\r\n\r\n              <!-- batch add ops -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                matTooltip=\"Add a batch of operations\"\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy\"\r\n                (click)=\"parseOperations()\"\r\n              >\r\n                <mat-icon>post_add</mat-icon> batch\r\n              </button>\r\n\r\n              <!-- add op -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                class=\"mat-primary\"\r\n                [disabled]=\"!baseText.value\"\r\n                (click)=\"editNewOperation()\"\r\n              >\r\n                <mat-icon>add_circle</mat-icon> operation\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- ops -->\r\n        <div id=\"ops\">\r\n          <!-- operations list -->\r\n          @if (operations.value.length) {\r\n          <table id=\"list\">\r\n            <thead>\r\n              <tr>\r\n                <th>nr.</th>\r\n                <th></th>\r\n                <th>ID</th>\r\n                <th>type</th>\r\n                <th>at</th>\r\n                <th>run</th>\r\n                <th>value</th>\r\n                <th>itag</th>\r\n                <th>otag</th>\r\n                <th>gid</th>\r\n                <th>feats</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (operation of operations.value; track operation.id; let\r\n              index=$index) {\r\n              <tr\r\n                [ngClass]=\"{ selected: operation.id === resultOperationId }\"\r\n                [ngClass]=\"{ edited: operation.id === editedOp?.id }\"\r\n              >\r\n                <td class=\"fit-width\">{{ index + 1 }}.</td>\r\n                <td class=\"fit-width\">\r\n                  <!-- edit -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-primary\"\r\n                    (click)=\"editOperation(index)\"\r\n                    matTooltip=\"Edit operation\"\r\n                  >\r\n                    <mat-icon>edit</mat-icon>\r\n                  </button>\r\n                  <!-- delete -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-warn\"\r\n                    (click)=\"deleteOperation(index)\"\r\n                    matTooltip=\"Delete operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                  </button>\r\n                  <!-- run to -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    class=\"mat-accent\"\r\n                    (click)=\"runTo(index)\"\r\n                    matTooltip=\"Run to this operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                  </button>\r\n                </td>\r\n                <td>{{ operation.id }}</td>\r\n                <td>{{ operation.type | flatLookup : opTypeMap }}</td>\r\n                <td>{{ operation.at }}</td>\r\n                <td>{{ operation.run }}</td>\r\n                <td>{{ operation.value }}</td>\r\n                <td>{{ operation.inputTag }}</td>\r\n                <td>{{ operation.outputTag }}</td>\r\n                <td>{{ operation.groupId }}</td>\r\n                <td>{{ operation.features?.length }}</td>\r\n              </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          <mat-expansion-panel [expanded]=\"editedOp\" [disabled]=\"!editedOp\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [hidePreview]=\"editedOpIndex === -1\"\r\n                [operation]=\"editedOp\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n\r\n          <!-- opStyle -->\r\n          <div id=\"opStyle\">\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>operations style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"opStyle\"\r\n                placeholder=\"operations style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- image -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>image</mat-icon> <span class=\"label\">image</span>\r\n      </ng-template>\r\n\r\n      <div id=\"image\">\r\n        <div id=\"image-ctl\">\r\n          <!-- url -->\r\n          <mat-form-field class=\"long-text\">\r\n            <mat-label>URL</mat-label>\r\n            <input matInput [formControl]=\"imageUrl\" />\r\n          </mat-form-field>\r\n          <div class=\"form-row\">\r\n            <!-- x -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>X</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"imageX\"\r\n                placeholder=\"X\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- y -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>Y</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                [formControl]=\"imageY\"\r\n                placeholder=\"Y\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- width -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>width</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"imageWidth\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- height -->\r\n            <mat-form-field class=\"input-nr\">\r\n              <mat-label>height</mat-label>\r\n              <input\r\n                matInput\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [formControl]=\"imageHeight\"\r\n              />\r\n            </mat-form-field>\r\n            <!-- reset -->\r\n            <button\r\n              type=\"button\"\r\n              mat-icon-button\r\n              matTooltip=\"Reset image metadata\"\r\n              (click)=\"resetImgMetadata()\"\r\n            >\r\n              <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n            </button>\r\n          </div>\r\n          <div>\r\n            <!-- image opacity -->\r\n            <mat-slider\r\n              min=\"0\"\r\n              max=\"1\"\r\n              step=\"0.01\"\r\n              thumbLabel\r\n              color=\"primary\"\r\n              class=\"mat-primary\"\r\n              matTooltip=\"Image opacity\"\r\n            >\r\n              <input\r\n                matSliderThumb\r\n                [value]=\"imageOpacity.value\"\r\n                (valueChange)=\"onImageOpacityChange($event)\"\r\n              />\r\n            </mat-slider>\r\n            <span id=\"opacity-value\">{{\r\n              imageOpacity.value | number : \"1.2-2\"\r\n            }}</span>\r\n          </div>\r\n          <!-- defs -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\">\r\n              <mat-label>defs</mat-label>\r\n              <textarea matInput [formControl]=\"defs\" rows=\"3\"></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div id=\"image-view\">\r\n          @if (imageUrl.value) {\r\n          <img\r\n            #imgElement\r\n            alt=\"background\"\r\n            [src]=\"imageUrl.value\"\r\n            width=\"600\"\r\n            (load)=\"onImageLoad(imgElement)\"\r\n          />\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- timelines -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>animation</mat-icon> <span class=\"label\">animation</span>\r\n      </ng-template>\r\n\r\n      <gve-animation-timeline-set\r\n        [tags]=\"opTags\"\r\n        [elementIds]=\"opElementIds\"\r\n        [timelines]=\"timelines.value\"\r\n        (timelinesChange)=\"onTimelinesChange($event)\"\r\n      />\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div>\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"busy\" />\r\n  </div>\r\n\r\n  <!-- result -->\r\n  @if (result) {\r\n  <fieldset id=\"result\">\r\n    <legend>result</legend>\r\n    <gve-chain-result-view\r\n      [result]=\"result\"\r\n      [initialStepIndex]=\"initialStepIndex\"\r\n      (stepPick)=\"onStepPick($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  <fieldset id=\"preview\">\r\n    <legend class=\"button-row\">\r\n      <span>{{ viewTitle }}</span>\r\n    </legend>\r\n    <!-- snapshot view -->\r\n    <gve-snapshot-view\r\n      #snapshotView\r\n      [debug]=\"debug()\"\r\n      [data]=\"viewData\"\r\n      (snapshotRender)=\"onSnapshotRender($any($event))\"\r\n      (visualEvent)=\"onVisualEvent($any($event))\"\r\n    />\r\n    <div class=\"button-row\">\r\n      <!-- toggle ruler -->\r\n      <mat-button-toggle\r\n        type=\"button\"\r\n        mat-icon-button\r\n        color=\"primary\"\r\n        matTooltip=\"Toggle rulers\"\r\n        [checked]=\"rulers\"\r\n        (change)=\"toggleRulers()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">straighten</mat-icon>\r\n      </mat-button-toggle>\r\n      <!-- run to last -->\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        class=\"primary\"\r\n        matTooltip=\"Refresh preview\"\r\n        (click)=\"runToLast()\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </div>\r\n    @if (visualInfo) {\r\n    <div id=\"visual-info\">{{ visualInfo }}</div>\r\n    }\r\n  </fieldset>\r\n\r\n  <!-- chain view -->\r\n  @if (chain) {\r\n  <div id=\"chain-view\">\r\n    <gve-chain-view [chain]=\"chain\" />\r\n  </div>\r\n  }\r\n\r\n  <!--buttons -->\r\n  <div class=\"form-row-center\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-flat-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n      close\r\n    </button>\r\n    @if (!noSave()) {\r\n    <button\r\n      type=\"submit\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save changes\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}.form-row .right{margin-left:auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}#text-range{margin:8px;border:1px solid silver;border-radius:6px;padding:6px}mat-expansion-panel{margin:8px 0}div#visual-info{font-size:95%;color:#909090;margin:8px}#list{margin:8px 0}#opStyle{margin-top:8px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#c8d9eb}tr.edited{background-color:#f6f6e4}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:#909090}.error{color:red}.input-nr{width:6em}.full-width{width:100%}.code{font-family:Courier New,Courier,monospace}.boxed{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}span.label{margin-left:8px}gve-animation-timeline-set{margin:8px 0}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}div#chain-view{margin-bottom:8px}@media only screen and (max-width: 959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: GveApiService }, { type: i3$1.MatDialog }, { type: i2$1.DialogService }, { type: i4$2.MatSnackBar }], propDecorators: { snapshotView: [{
                 type: ViewChild,
                 args: ['snapshotView', { static: false }]
-            }], snapshot: [{
-                type: Input
-            }], batchOps: [{
-                type: Input
-            }], noSave: [{
-                type: Input
-            }], debug: [{
-                type: Input
-            }], snapshotChange: [{
-                type: Output
-            }], snapshotCancel: [{
-                type: Output
             }] } });
 
 /*
@@ -3777,5 +3777,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationTimelineComponent, AnimationTweenComponent, BaseTextCharComponent, BaseTextEditorComponent, BaseTextViewComponent, BatchOperationEditorComponent, ChainOperationEditorComponent, ChainResultViewComponent, FeatureEditorComponent, FeatureSetEditorComponent, FeatureSetViewComponent, GveApiService, LnHeightsEditorComponent, OperationSourceEditorComponent, SettingsService, SimpleTreeComponent, SnapshotEditorComponent, SnapshotTextEditorComponent, StepsMapComponent };
+export { AnimationTimelineComponent, AnimationTweenComponent, BaseTextCharComponent, BaseTextEditorComponent, BaseTextViewComponent, BatchOperationEditorComponent, ChainOperationEditorComponent, ChainResultViewComponent, ChainViewComponent, FeatureEditorComponent, FeatureSetEditorComponent, FeatureSetViewComponent, GveApiService, GveGraphvizService, LnHeightsEditorComponent, OperationSourceEditorComponent, SettingsService, SnapshotEditorComponent, SnapshotTextEditorComponent, StepsMapComponent };
 //# sourceMappingURL=myrmidon-gve-core.mjs.map