@myrmidon/gve-core 5.0.3 → 6.0.0

package/fesm2022/myrmidon-gve-core.mjs

@@ -1,470 +1,74 @@
 import * as i0 from '@angular/core';
-import { model, input, output, effect, Component, signal, computed, ViewChild, Injectable, Optional, Inject, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { Validators, ReactiveFormsModule, FormControl, FormGroup, FormsModule } from '@angular/forms';
+import { input, output, ChangeDetectionStrategy, Component, inject, DestroyRef, signal, computed, effect, model, ViewChild, Injectable, Optional, Inject, viewChild, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i1 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import * as i2$1 from '@myrmidon/ngx-tools';
+import { ColorToContrastPipe, FlatLookupPipe } from '@myrmidon/ngx-tools';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, Validators, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$2 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i14 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i7 from '@angular/material/tooltip';
+import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
-import * as i2$1 from '@myrmidon/ngx-tools';
-import { NgxToolsValidators, deepCopy, ColorToContrastPipe, FlatLookupPipe, SafeHtmlPipe } from '@myrmidon/ngx-tools';
-import { debounceTime, distinctUntilChanged, catchError, BehaviorSubject } from 'rxjs';
+import { Subject, debounceTime, distinctUntilChanged, catchError, BehaviorSubject } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2$3 from '@angular/material/snack-bar';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i2$2 from '@angular/cdk/clipboard';
+import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
+import * as i7$1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i3$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4$1 from '@myrmidon/ngx-mat-tools';
-import * as i1$1 from '@angular/material/core';
-import { MatRippleModule } from '@angular/material/core';
-import { FeatureSetPolicy, SnapshotViewService, OperationType, DEFAULT_SVG_BASE_TEXT_OPTIONS } from '@myrmidon/gve-snapshot-view';
-import * as i3$3 from '@angular/material/dialog';
+import * as i3$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i1$2 from '@angular/common/http';
 import { filter, debounceTime as debounceTime$1 } from 'rxjs/operators';
-import * as i2$2 from '@angular/cdk/clipboard';
-import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i5$1 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i15 from '@cisstech/nge/monaco';
+import * as i10 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { NgeMonacoModule } from '@cisstech/nge/monaco';
 import { customAlphabet } from 'nanoid';
-import * as i16 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { VizComponent } from '@myrmidon/ngx-viz';
-import * as i4$2 from '@angular/material/snack-bar';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i7$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i12 from '@angular/material/progress-bar';
+import * as i9 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i13 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { DEFAULT_SETTINGS, GveSnapshotRendition } from '@myrmidon/gve-snapshot-rendition';
 
 /**
- * 🔑 `gve-animation-tween`
- *
- * A component to edit an animation tween.
- * Used by the `gve-animation-timeline` component.
- *
- * - ▶️ `tween` (`GveAnimationTween`): the tween to edit.
- * - ▶️ `elementIds` (`string[]`): the IDs of the elements that can be selected by the tween.
- * - 🔥 `tweenChange` (`GveAnimationTween`): emitted when the tween is changed.
- * - 🔥 `tweenCancel` (`void`): emitted when the user cancels the edit.
+ * Operation feature set policy.
  */
-class AnimationTweenComponent {
-    constructor(formBuilder) {
-        /**
-         * The tween to edit.
-         */
-        this.tween = model(...(ngDevMode ? [undefined, { debugName: "tween" }] : []));
-        /**
-         * 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(...(ngDevMode ? [undefined, { debugName: "elementIds" }] : []));
-        /**
-         * Emitted when the user cancels the edit.
-         */
-        this.tweenCancel = output();
-        this.types = ['to', 'from', 'fromTo', 'set'];
-        this.label = formBuilder.control('', {
-            nonNullable: true,
-            validators: [Validators.required, Validators.maxLength(100)],
-        });
-        this.note = formBuilder.control(null);
-        this.type = formBuilder.control('to', { nonNullable: true });
-        this.selector = formBuilder.control('', {
-            nonNullable: true,
-            validators: [Validators.required, Validators.maxLength(200)],
-        });
-        this.vars = formBuilder.control('{}', {
-            nonNullable: true,
-            validators: [Validators.required, this.jsonValidator],
-        });
-        this.vars2 = formBuilder.control(null, this.jsonValidator);
-        this.position = formBuilder.control(null, Validators.maxLength(100));
-        this.form = formBuilder.group({
-            label: this.label,
-            note: this.note,
-            type: this.type,
-            selector: this.selector,
-            vars: this.vars,
-            vars2: this.vars2,
-            position: this.position,
-        });
-        this.elementId = formBuilder.control(null);
-        effect(() => {
-            this.updateForm(this.tween());
-        });
-    }
-    ngOnInit() {
-        // set selector when elementId changes
-        this._sub = this.elementId.valueChanges
-            .pipe(debounceTime(200), distinctUntilChanged())
-            .subscribe((elementId) => {
-            if (elementId) {
-                this.selector.setValue('#' + elementId);
-            }
-        });
-    }
-    ngOnDestroy() {
-        this._sub?.unsubscribe();
-    }
-    onVarsChange(vars) {
-        this.vars.setValue(vars);
-        this.vars.markAsDirty();
-        this.vars.updateValueAndValidity();
-    }
-    onVars2Change(vars) {
-        this.vars2.setValue(vars);
-        this.vars2.markAsDirty();
-        this.vars2.updateValueAndValidity();
-    }
-    close() {
-        this.tweenCancel.emit();
-    }
-    jsonValidator(control) {
-        if (!control.value) {
-            return null;
-        }
-        try {
-            JSON.parse(control.value);
-            return null;
-        }
-        catch (e) {
-            return { json: true };
-        }
-    }
-    updateForm(tween) {
-        if (!tween) {
-            this.form.reset();
-            return;
-        }
-        this.label.setValue(tween.label);
-        this.note.setValue(tween.note || null);
-        this.type.setValue(tween.type);
-        this.selector.setValue(tween.selector);
-        this.vars.setValue(tween.vars || '{}');
-        this.vars2.setValue(tween.vars2 || null);
-        this.position.setValue(tween.position || null);
-        this.form.markAsPristine();
-    }
-    getTween() {
-        return {
-            label: this.label.value,
-            note: this.note.value?.trim() || undefined,
-            type: this.type.value,
-            selector: this.selector.value.trim(),
-            vars: this.vars.value,
-            vars2: this.vars2.value || undefined,
-            position: this.position.value?.trim() || undefined,
-        };
-    }
-    openUrl(url) {
-        window.open(url, '_blank');
-    }
-    save() {
-        if (!this.form.valid) {
-            return;
-        }
-        this.tween.set(this.getTween());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AnimationTweenComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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", 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      @if ($any(label).errors?.required && (label.dirty || label.touched)) {\r\n      <mat-error>label required</mat-error>\r\n      } @if ($any(label).errors?.maxLength && (label.dirty || label.touched)) {\r\n      <mat-error>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        @for (t of types; track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\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      @if ( $any(position).errors?.maxLength && (position.dirty ||\r\n      position.touched) ) {\r\n      <mat-error>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      @if ( $any(selector).errors?.required && (selector.dirty ||\r\n      selector.touched) ) {\r\n      <mat-error>selector required</mat-error>\r\n      } @if ( $any(selector).errors?.maxLength && (selector.dirty ||\r\n      selector.touched) ) {\r\n      <mat-error>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        @for (id of elementIds(); track id) {\r\n        <mat-option [value]=\"id\">{{ id }}</mat-option>\r\n        }\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      @if ($any(note).errors?.maxLength && (note.dirty || note.touched)) {\r\n      <mat-error>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      @if ($any(vars).errors?.required && (vars.dirty || vars.touched)) {\r\n      <mat-error>vars required</mat-error>\r\n      } @if ($any(vars).errors?.json && (vars.dirty || vars.touched)) {\r\n      <mat-error>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      @if ($any(vars2).errors?.required && (vars2.dirty || vars2.touched)) {\r\n      <mat-error>vars required</mat-error>\r\n      } @if ($any(vars2).errors?.json && (vars2.dirty || vars2.touched)) {\r\n      <mat-error>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: 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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AnimationTweenComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gve-animation-tween', imports: [
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatCheckboxModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        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      @if ($any(label).errors?.required && (label.dirty || label.touched)) {\r\n      <mat-error>label required</mat-error>\r\n      } @if ($any(label).errors?.maxLength && (label.dirty || label.touched)) {\r\n      <mat-error>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        @for (t of types; track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\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      @if ( $any(position).errors?.maxLength && (position.dirty ||\r\n      position.touched) ) {\r\n      <mat-error>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      @if ( $any(selector).errors?.required && (selector.dirty ||\r\n      selector.touched) ) {\r\n      <mat-error>selector required</mat-error>\r\n      } @if ( $any(selector).errors?.maxLength && (selector.dirty ||\r\n      selector.touched) ) {\r\n      <mat-error>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        @for (id of elementIds(); track id) {\r\n        <mat-option [value]=\"id\">{{ id }}</mat-option>\r\n        }\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      @if ($any(note).errors?.maxLength && (note.dirty || note.touched)) {\r\n      <mat-error>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      @if ($any(vars).errors?.required && (vars.dirty || vars.touched)) {\r\n      <mat-error>vars required</mat-error>\r\n      } @if ($any(vars).errors?.json && (vars.dirty || vars.touched)) {\r\n      <mat-error>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      @if ($any(vars2).errors?.required && (vars2.dirty || vars2.touched)) {\r\n      <mat-error>vars required</mat-error>\r\n      } @if ($any(vars2).errors?.json && (vars2.dirty || vars2.touched)) {\r\n      <mat-error>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: i0.Input, args: [{ isSignal: true, alias: "tween", required: false }] }, { type: i0.Output, args: ["tweenChange"] }], elementIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementIds", required: false }] }], tweenCancel: [{ type: i0.Output, args: ["tweenCancel"] }] } });
-
+var FeatureSetPolicy;
+(function (FeatureSetPolicy) {
+    FeatureSetPolicy[FeatureSetPolicy["multiple"] = 0] = "multiple";
+    FeatureSetPolicy[FeatureSetPolicy["single"] = 1] = "single";
+    FeatureSetPolicy[FeatureSetPolicy["singleFirst"] = 2] = "singleFirst";
+})(FeatureSetPolicy || (FeatureSetPolicy = {}));
 /**
- * 🔑 `gve-animation-timeline`
- *
- * A component to edit an animation timeline.
- * Used by the `gve-animation-timeline-set` component.
- *
- * - ▶️ `timeline` (`GveAnimationTimeline`): the animation timeline to edit.
- * - ▶️ `elementIds` (`string[]`): the IDs of the elements that can be selected
- * by the tween.
- * - ▶️ `tags` (`string[]`): the tags that can be used by the timeline.
- * - 🔥 `timelineChange` (`GveAnimationTimeline`): emitted when the timeline
- * is changed.
- * - 🔥 `timelineCancel` (`void`): emitted when the timeline editing is canceled.
+ * Type of a text operation.
  */
-class AnimationTimelineComponent {
-    constructor(formBuilder) {
-        /**
-         * The animation timeline to edit.
-         */
-        this.timeline = model(...(ngDevMode ? [undefined, { debugName: "timeline" }] : []));
-        /**
-         * 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(...(ngDevMode ? [undefined, { debugName: "elementIds" }] : []));
-        /**
-         * The tags that can be used by the timeline.
-         */
-        this.tags = input([], ...(ngDevMode ? [{ debugName: "tags" }] : []));
-        /**
-         * Emitted when the timeline is changed.
-         */
-        this.timelineChange = output();
-        /**
-         * Emitted when the timeline editing is canceled.
-         */
-        this.timelineCancel = output();
-        this.editedTweenIndex = signal(-1, ...(ngDevMode ? [{ debugName: "editedTweenIndex" }] : []));
-        this.editedTween = signal(undefined, ...(ngDevMode ? [{ debugName: "editedTween" }] : []));
-        this.tag = formBuilder.control('', {
-            nonNullable: true,
-            validators: [Validators.required, Validators.maxLength(100)],
-        });
-        this.tweens = formBuilder.control([], {
-            nonNullable: true,
-            validators: NgxToolsValidators.strictMinLengthValidator(1),
-        });
-        this.vars = formBuilder.control(null, this.jsonValidator);
-        this.form = formBuilder.group({
-            tag: this.tag,
-            tweens: this.tweens,
-            vars: this.vars,
-        });
-        // when the timeline changes, update the form
-        effect(() => {
-            this.updateForm(this.timeline());
-        });
-    }
-    jsonValidator(control) {
-        if (!control.value) {
-            return null;
-        }
-        try {
-            JSON.parse(control.value);
-            return null;
-        }
-        catch (e) {
-            return { json: true };
-        }
-    }
-    updateForm(timeline) {
-        if (!timeline) {
-            this.form.reset();
-            return;
-        }
-        this.tag.setValue(timeline.tag);
-        this.tweens.setValue(timeline.tweens);
-        this.vars.setValue(timeline.vars || null);
-        this.form.markAsPristine();
-    }
-    addTween() {
-        this.editedTweenIndex.set(-1);
-        this.editedTween.set({
-            label: 'tween #' + (this.tweens.value.length + 1),
-            type: 'to',
-            selector: '',
-        });
-    }
-    editTween(index) {
-        this.editedTweenIndex.set(index);
-        this.editedTween.set(deepCopy(this.tweens.value[index]));
-    }
-    deleteTween(index) {
-        this.tweens.setValue(this.tweens.value.filter((_, i) => i !== index));
-        this.tweens.markAsDirty();
-        this.tweens.updateValueAndValidity();
-    }
-    closeTween() {
-        this.editedTween.set(undefined);
-        this.editedTweenIndex.set(-1);
-    }
-    saveTween(tween) {
-        if (this.editedTweenIndex() === -1) {
-            this.tweens.setValue([...this.tweens.value, tween]);
-        }
-        else {
-            this.tweens.setValue(this.tweens.value.map((t, index) => index === this.editedTweenIndex() ? tween : t));
-        }
-        this.tweens.markAsDirty();
-        this.tweens.updateValueAndValidity();
-        this.closeTween();
-    }
-    moveTweenUp(index) {
-        if (index < 1) {
-            return;
-        }
-        const tweens = [...this.tweens.value];
-        const tmp = tweens[index];
-        tweens[index] = tweens[index - 1];
-        tweens[index - 1] = tmp;
-        this.tweens.setValue(tweens);
-        this.tweens.markAsDirty();
-        this.tweens.updateValueAndValidity();
-    }
-    moveTweenDown(index) {
-        if (index >= this.tweens.value.length - 1) {
-            return;
-        }
-        const tweens = [...this.tweens.value];
-        const tmp = tweens[index];
-        tweens[index] = tweens[index + 1];
-        tweens[index + 1] = tmp;
-        this.tweens.setValue(tweens);
-        this.tweens.markAsDirty();
-        this.tweens.updateValueAndValidity();
-    }
-    getTimeline() {
-        return {
-            tag: this.tag.value || '',
-            tweens: this.tweens.value,
-            vars: this.vars.value || undefined,
-        };
-    }
-    close() {
-        this.timelineCancel.emit();
-    }
-    save() {
-        if (this.form.invalid) {
-            return;
-        }
-        this.timeline.set(this.getTimeline());
-        this.timelineChange.emit(this.timeline());
-        this.form.markAsPristine();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AnimationTimelineComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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      @if ($any(tag).errors?.required && (tag.dirty || tag.touched)) {\r\n      <mat-error>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      @if ($any(tag).errors?.required && (tag.dirty || tag.touched)) {\r\n      <mat-error>tag required</mat-error>\r\n      } @if ($any(tag).errors?.maxLength && (tag.dirty || tag.touched)) {\r\n      <mat-error>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      @if ($any(vars).errors?.json && (vars.dirty || vars.touched)) {\r\n      <mat-error>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 [class.selected]=\"index === editedTweenIndex()\">\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  @if (editedTween()) {\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 #{{ editedTweenIndex() + 1 }}</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\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}\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: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.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: "20.3.10", ngImport: i0, type: AnimationTimelineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gve-animation-timeline', imports: [
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatCheckboxModule,
-                        MatExpansionModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        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      @if ($any(tag).errors?.required && (tag.dirty || tag.touched)) {\r\n      <mat-error>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      @if ($any(tag).errors?.required && (tag.dirty || tag.touched)) {\r\n      <mat-error>tag required</mat-error>\r\n      } @if ($any(tag).errors?.maxLength && (tag.dirty || tag.touched)) {\r\n      <mat-error>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      @if ($any(vars).errors?.json && (vars.dirty || vars.touched)) {\r\n      <mat-error>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 [class.selected]=\"index === editedTweenIndex()\">\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  @if (editedTween()) {\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 #{{ editedTweenIndex() + 1 }}</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\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: false }] }, { type: i0.Output, args: ["timelineChange"] }], elementIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementIds", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], timelineChange: [{ type: i0.Output, args: ["timelineChange"] }], timelineCancel: [{ type: i0.Output, args: ["timelineCancel"] }] } });
-
-/**
- * 🔑 `gve-animation-timeline-set`
- *
- * A component to edit a set of animation timelines.
- * Used by the `gve-snapshot-editor` component.
- *
- * - ▶️ `timelines` (`GveAnimationTimeline[]`): the animation timelines to edit.
- * - ▶️ `elementIds` (`string[]`): the IDs of the elements that can be selected by the tween.
- * - ▶️ `tags` (`string[]`): the tags that can be used by the timeline.
- * - 🔥 `timelinesChange` (`GveAnimationTimeline[]`): emitted when the timelines are changed.
- * - 🔥 `timelinesCancel` (`void`): emitted when the timeline editing is canceled.
- */
-class AnimationTimelineSetComponent {
-    constructor(_dialogService) {
-        this._dialogService = _dialogService;
-        /**
-         * The animation timelines to edit.
-         */
-        this.timelines = model([], ...(ngDevMode ? [{ debugName: "timelines" }] : []));
-        /**
-         * 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(...(ngDevMode ? [undefined, { debugName: "elementIds" }] : []));
-        /**
-         * The tags that can be used by the timeline.
-         */
-        this.tags = input([], ...(ngDevMode ? [{ debugName: "tags" }] : []));
-        /**
-         * Emitted when the timeline editing is canceled.
-         */
-        this.timelinesCancel = output();
-        this.editedTimeline = signal(undefined, ...(ngDevMode ? [{ debugName: "editedTimeline" }] : []));
-        this.editedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "editedIndex" }] : []));
-    }
-    closeTimeline() {
-        this.editedTimeline.set(undefined);
-        this.editedIndex.set(-1);
-    }
-    newTimeline() {
-        this.editedTimeline.set({
-            tag: '',
-            tweens: [],
-        });
-        this.editedIndex.set(-1);
-    }
-    editTimeline(index) {
-        this.editedTimeline.set(deepCopy(this.timelines()[index]));
-        this.editedIndex.set(index);
-    }
-    onTimelineChange(timeline) {
-        const timelines = [...this.timelines()];
-        if (this.editedIndex() === -1) {
-            timelines.push(timeline);
-        }
-        else {
-            timelines.splice(this.editedIndex(), 1, timeline);
-        }
-        // sort timelines by tag
-        timelines.sort((a, b) => a.tag.localeCompare(b.tag));
-        this.timelines.set(timelines);
-        this.closeTimeline();
-    }
-    deleteTimeline(index) {
-        this._dialogService
-            .confirm('Confirm Deletion', `Delete ${this.timelines()[index].tag}?`)
-            .subscribe((yes) => {
-            if (yes) {
-                const timelines = [...this.timelines()];
-                timelines.splice(index, 1);
-                this.timelines.set(timelines);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AnimationTimelineSetComponent, deps: [{ token: i4$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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", timelinesCancel: "timelinesCancel" }, ngImport: i0, template: "<div>\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 timelines(); track t.tag; let index = $index) {\r\n      <tr [class.selected]=\"editedIndex() === index\">\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  @if (editedTimeline()) {\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  }\r\n</div>\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "20.3.10", ngImport: i0, type: AnimationTimelineSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gve-animation-timeline-set', imports: [
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatCheckboxModule,
-                        MatExpansionModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatTabsModule,
-                        MatTooltipModule,
-                        AnimationTimelineComponent,
-                    ], template: "<div>\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 timelines(); track t.tag; let index = $index) {\r\n      <tr [class.selected]=\"editedIndex() === index\">\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  @if (editedTimeline()) {\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  }\r\n</div>\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}\n"] }]
-        }], ctorParameters: () => [{ type: i4$1.DialogService }], propDecorators: { timelines: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelines", required: false }] }, { type: i0.Output, args: ["timelinesChange"] }], elementIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementIds", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], timelinesCancel: [{ type: i0.Output, args: ["timelinesCancel"] }] } });
+var OperationType;
+(function (OperationType) {
+    OperationType[OperationType["replace"] = 0] = "replace";
+    OperationType[OperationType["delete"] = 1] = "delete";
+    OperationType[OperationType["addBefore"] = 2] = "addBefore";
+    OperationType[OperationType["addAfter"] = 3] = "addAfter";
+    OperationType[OperationType["moveBefore"] = 4] = "moveBefore";
+    OperationType[OperationType["moveAfter"] = 5] = "moveAfter";
+    OperationType[OperationType["swap"] = 6] = "swap";
+    OperationType[OperationType["annotate"] = 7] = "annotate";
+})(OperationType || (OperationType = {}));
 
 /**
  * 🔑 `gve-base-text-char`
@@ -489,19 +93,21 @@ class BaseTextCharComponent {
     onCharClick(event) {
         this.charPick.emit({ char: this.char(), event });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseTextCharComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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: i1$1.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: "21.0.0", ngImport: i0, type: BaseTextCharComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: ColorToContrastPipe, name: "colorToContrast" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseTextCharComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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"] }]
+            args: [{ selector: 'gve-base-text-char', imports: [MatRippleModule, ColorToContrastPipe], changeDetection: ChangeDetectionStrategy.OnPush, 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: i0.Input, args: [{ isSignal: true, alias: "char", required: false }] }], charPick: [{ type: i0.Output, args: ["charPick"] }] } });
 
 /**
  * 🔑 `gve-base-text-view`
  *
  * A component to display a selectable base text. Its input is either a string or an
- * array of `CharNode`'s.
+ * array of `CharNode`'s. The base text is the starting text in a set of transformations,
+ * and is represented as a sequence of characters with optional metadata.
+ * This component allows users to view and select characters or ranges of characters.
  * Used by the chain result view component and the base text editor component.
  *
  * - ▶️ `defaultColor` (`string`): the default color for the text.
@@ -515,10 +121,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * to each line.
  * - ▶️ `text` (`string` | `CharNode[]`): the text to display.
  * - 🔥 `charPick` (`BaseTextCharEvent`): emitted when a character is picked.
- * - 🔥 `rangePick` (`VarBaseTextRange`): emitted when a range is picked.
+ * - 🔥 `rangePick` (`BaseTextRange`): emitted when a range is picked.
  */
 class BaseTextViewComponent {
     constructor() {
+        this._destroyRef = inject(DestroyRef);
+        this._clipboard = inject(Clipboard);
+        this._snackBar = inject(MatSnackBar);
+        this._searchSubject = new Subject();
         /**
          * The default color for the text.
          */
@@ -531,10 +141,22 @@ class BaseTextViewComponent {
          * The color for the selected text.
          */
         this.selectionColor = input('#3E92CC', ...(ngDevMode ? [{ debugName: "selectionColor" }] : []));
+        /**
+         * The color for search match highlights.
+         */
+        this.searchHighlightColor = input('#FFD54F', ...(ngDevMode ? [{ debugName: "searchHighlightColor" }] : []));
         /**
          * True if line numbers should be displayed next to each line.
          */
         this.hasLineNumber = input(false, ...(ngDevMode ? [{ debugName: "hasLineNumber" }] : []));
+        /**
+         * The search query entered in the toolbar.
+         */
+        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+        /**
+         * The positions of search matches (start and length pairs).
+         */
+        this.searchMatches = signal([], ...(ngDevMode ? [{ debugName: "searchMatches" }] : []));
         /**
          * The text to display.
          */
@@ -570,11 +192,32 @@ class BaseTextViewComponent {
          */
         this.selectedRange = signal(null, ...(ngDevMode ? [{ debugName: "selectedRange" }] : []));
         /**
-         * The lines with selection state applied, computed from base lines and selection.
+         * The lines with selection or search highlight state applied.
+         * Search highlights take priority over selection when present.
          */
         this.lines = computed(() => {
             const base = this.baseLines();
             const range = this.selectedRange();
+            const matches = this.searchMatches();
+            // If there are search matches, highlight them instead of selection
+            if (matches.length > 0) {
+                let position = 0;
+                return base.map((line) => line.map((char) => {
+                    const currentPos = position++;
+                    const isMatch = matches.some((m) => currentPos >= m.start && currentPos < m.start + m.length);
+                    if (isMatch) {
+                        return {
+                            ...char,
+                            oldColor: char.oldColor || char.color,
+                            oldBorderColor: char.oldBorderColor || char.borderColor,
+                            color: this.searchHighlightColor(),
+                            borderColor: this.searchHighlightColor(),
+                        };
+                    }
+                    return char;
+                }));
+            }
+            // Otherwise, apply selection highlight if present
             if (!range) {
                 return base;
             }
@@ -594,11 +237,40 @@ class BaseTextViewComponent {
                 return char;
             }));
         }, ...(ngDevMode ? [{ debugName: "lines" }] : []));
+        /**
+         * Check if there is an active selection.
+         */
+        this.hasSelection = computed(() => {
+            return this.selectedRange() !== null;
+        }, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+        /**
+         * Get the total count of matched characters.
+         */
+        this.matchCount = computed(() => {
+            const matches = this.searchMatches();
+            return matches.reduce((sum, m) => sum + m.length, 0);
+        }, ...(ngDevMode ? [{ debugName: "matchCount" }] : []));
+        /**
+         * Check if a search is active (query is not empty).
+         */
+        this.isSearchActive = computed(() => {
+            return this.searchQuery().length > 0;
+        }, ...(ngDevMode ? [{ debugName: "isSearchActive" }] : []));
         // reset selection when text changes
         effect(() => {
             this.text();
             this._lastSelectedPosition = undefined;
+            this._selectionAnchor = undefined;
             this.selectedRange.set(null);
+            this.clearSearch();
+        });
+    }
+    ngOnInit() {
+        // Setup debounced search
+        this._searchSubject
+            .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))
+            .subscribe((query) => {
+            this.performSearch(query);
         });
     }
     buildLines(text, colorCallback, borderColorCallback) {
@@ -658,8 +330,9 @@ class BaseTextViewComponent {
         else {
             // single character selection
             this.selectedRange.set({ start: clickedPosition, end: clickedPosition });
-            // update last selected character and position
+            // update last selected character and position, and set anchor for keyboard navigation
             this._lastSelectedPosition = clickedPosition;
+            this._selectionAnchor = clickedPosition;
             rangeToEmit = { at: event.char.id, run: 1 };
         }
         // emit events last, after all internal state is updated
@@ -700,13 +373,243 @@ class BaseTextViewComponent {
         }
         return -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 }, colorCallback: { classPropertyName: "colorCallback", publicName: "colorCallback", 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: "component", type: BaseTextCharComponent, selector: "gve-base-text-char", inputs: ["char"], outputs: ["charPick"] }] }); }
+    /**
+     * Handle search input changes and trigger debounced search.
+     */
+    onSearchInput(query) {
+        this.searchQuery.set(query);
+        this._searchSubject.next(query);
+    }
+    /**
+     * Perform the actual search and update match positions.
+     */
+    performSearch(query) {
+        if (!query || query.length === 0) {
+            this.searchMatches.set([]);
+            return;
+        }
+        const text = this.text();
+        if (!text || text.length === 0) {
+            this.searchMatches.set([]);
+            return;
+        }
+        // Build the full text string from CharNodes
+        const fullText = text.map((node) => node.data).join('');
+        // Find all matches (case-insensitive)
+        const matches = [];
+        const lowerQuery = query.toLowerCase();
+        const lowerText = fullText.toLowerCase();
+        let startIndex = 0;
+        while (startIndex < lowerText.length) {
+            const index = lowerText.indexOf(lowerQuery, startIndex);
+            if (index === -1) {
+                break;
+            }
+            matches.push({ start: index, length: query.length });
+            startIndex = index + 1;
+        }
+        this.searchMatches.set(matches);
+    }
+    /**
+     * Clear the search query and remove search highlights.
+     */
+    clearSearch() {
+        this.searchQuery.set('');
+        this.searchMatches.set([]);
+    }
+    /**
+     * Get the total number of characters in the text.
+     */
+    getTotalCharCount() {
+        return this.text().length;
+    }
+    /**
+     * Get the character at a specific position.
+     */
+    getCharAtPosition(position) {
+        const baseLines = this.baseLines();
+        let currentPos = 0;
+        for (const line of baseLines) {
+            for (const char of line) {
+                if (currentPos === position) {
+                    return char;
+                }
+                currentPos++;
+            }
+        }
+        return null;
+    }
+    /**
+     * Handle keyboard events for arrow key navigation.
+     * - Left/Right: Move single selection to previous/next character
+     * - Shift+Left/Right: Extend selection range
+     */
+    onKeyDown(event) {
+        const range = this.selectedRange();
+        if (!range) {
+            return;
+        }
+        const totalChars = this.getTotalCharCount();
+        if (totalChars === 0) {
+            return;
+        }
+        let newStart = range.start;
+        let newEnd = range.end;
+        let handled = false;
+        if (event.key === 'ArrowLeft') {
+            if (event.shiftKey) {
+                // Shift+Left: extend selection to the left from anchor
+                if (this._selectionAnchor === undefined) {
+                    this._selectionAnchor = range.start;
+                }
+                // Determine which end to move based on anchor position
+                if (range.end === this._selectionAnchor) {
+                    // Moving start to the left
+                    newStart = Math.max(0, range.start - 1);
+                    newEnd = range.end;
+                }
+                else {
+                    // Shrinking from right toward anchor, or extending left past anchor
+                    if (range.end > this._selectionAnchor) {
+                        // Shrink from right
+                        newStart = range.start;
+                        newEnd = range.end - 1;
+                    }
+                    else {
+                        // Extend left
+                        newStart = Math.max(0, range.start - 1);
+                        newEnd = range.end;
+                    }
+                }
+                handled = true;
+            }
+            else {
+                // Left without shift: move to single selection one position left
+                const currentPos = range.start;
+                const newPos = Math.max(0, currentPos - 1);
+                newStart = newPos;
+                newEnd = newPos;
+                this._selectionAnchor = newPos;
+                this._lastSelectedPosition = newPos;
+                handled = true;
+            }
+        }
+        else if (event.key === 'ArrowRight') {
+            if (event.shiftKey) {
+                // Shift+Right: extend selection to the right from anchor
+                if (this._selectionAnchor === undefined) {
+                    this._selectionAnchor = range.start;
+                }
+                // Determine which end to move based on anchor position
+                if (range.start === this._selectionAnchor) {
+                    // Moving end to the right
+                    newStart = range.start;
+                    newEnd = Math.min(totalChars - 1, range.end + 1);
+                }
+                else {
+                    // Shrinking from left toward anchor, or extending right past anchor
+                    if (range.start < this._selectionAnchor) {
+                        // Shrink from left
+                        newStart = range.start + 1;
+                        newEnd = range.end;
+                    }
+                    else {
+                        // Extend right
+                        newStart = range.start;
+                        newEnd = Math.min(totalChars - 1, range.end + 1);
+                    }
+                }
+                handled = true;
+            }
+            else {
+                // Right without shift: move to single selection one position right
+                const currentPos = range.end;
+                const newPos = Math.min(totalChars - 1, currentPos + 1);
+                newStart = newPos;
+                newEnd = newPos;
+                this._selectionAnchor = newPos;
+                this._lastSelectedPosition = newPos;
+                handled = true;
+            }
+        }
+        if (handled) {
+            event.preventDefault();
+            this.selectedRange.set({ start: newStart, end: newEnd });
+            // Emit rangePick event
+            const firstCharId = this.getCharIdAtPosition(newStart);
+            const rangeToEmit = {
+                at: firstCharId,
+                run: newEnd - newStart + 1,
+            };
+            this.rangePick.emit(rangeToEmit);
+            // Emit charPick for single selection
+            if (newStart === newEnd) {
+                const char = this.getCharAtPosition(newStart);
+                if (char) {
+                    this.charPick.emit({
+                        char,
+                        event: null,
+                    });
+                }
+            }
+        }
+    }
+    /**
+     * Copy the currently selected text to the clipboard.
+     */
+    copySelection() {
+        const range = this.selectedRange();
+        if (!range) {
+            return;
+        }
+        const text = this.text();
+        if (!text || text.length === 0) {
+            return;
+        }
+        // Extract the selected characters
+        const selectedChars = text
+            .slice(range.start, range.end + 1)
+            .map((node) => node.data)
+            .join('');
+        this._clipboard.copy(selectedChars);
+        this._snackBar.open('Text copied', 'OK', { duration: 2000 });
+    }
+    /**
+     * Copy the currently selected range coordinates to the clipboard.
+     * Format: "ID" for single character, "IDxCOUNT" for range.
+     */
+    copyCoordinates() {
+        const range = this.selectedRange();
+        if (!range) {
+            return;
+        }
+        const text = this.text();
+        if (!text || text.length === 0) {
+            return;
+        }
+        const startId = text[range.start].id;
+        const count = range.end - range.start + 1;
+        const coords = count === 1 ? `${startId}` : `${startId}x${count}`;
+        this._clipboard.copy(coords);
+        this._snackBar.open(`Coordinates copied: ${coords}`, 'OK', {
+            duration: 2000,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BaseTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 }, searchHighlightColor: { classPropertyName: "searchHighlightColor", publicName: "searchHighlightColor", 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 }, colorCallback: { classPropertyName: "colorCallback", publicName: "colorCallback", 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: "<!-- Toolbar -->\r\n<div class=\"toolbar\">\r\n  <mat-form-field appearance=\"outline\" class=\"search-field\">\r\n    <input\r\n      matInput\r\n      [ngModel]=\"searchQuery()\"\r\n      (ngModelChange)=\"onSearchInput($event)\"\r\n      placeholder=\"search\"\r\n    />\r\n    @if (searchQuery()) {\r\n      <button\r\n        type=\"button\"\r\n        matSuffix\r\n        mat-icon-button\r\n        matTooltip=\"Clear search\"\r\n        (click)=\"clearSearch()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n\r\n  @if (isSearchActive()) {\r\n    <span class=\"match-count\" [class.no-matches]=\"matchCount() === 0\">\r\n      {{ matchCount() }}\r\n    </span>\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-stroked-button\r\n    matTooltip=\"Copy selection text to clipboard\"\r\n    [disabled]=\"!hasSelection()\"\r\n    (click)=\"copySelection()\"\r\n  >\r\n    <mat-icon>content_copy</mat-icon>\r\n    copy\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-stroked-button\r\n    matTooltip=\"Copy selection coordinates to clipboard\"\r\n    [disabled]=\"!hasSelection()\"\r\n    (click)=\"copyCoordinates()\"\r\n  >\r\n    <mat-icon>pin_drop</mat-icon>\r\n    copy coords\r\n  </button>\r\n</div>\r\n\r\n<!-- Text display -->\r\n<div id=\"text\" tabindex=\"0\" (keydown)=\"onKeyDown($event)\">\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      }\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: [".toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.search-field{flex:0 0 auto;min-width:200px;max-width:300px}.match-count{font-weight:700;padding:4px 8px;border-radius:4px;background-color:#e8f5e9;color:#2e7d32}.match-count.no-matches{background-color:#ffebee;color:#c62828}.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: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BaseTextCharComponent, selector: "gve-base-text-char", inputs: ["char"], outputs: ["charPick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseTextViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BaseTextViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-base-text-view', imports: [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: () => [], propDecorators: { defaultColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultColor", required: false }] }], defaultBorderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultBorderColor", required: false }] }], selectionColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColor", required: false }] }], hasLineNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLineNumber", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], colorCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorCallback", required: false }] }], borderColorCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColorCallback", required: false }] }], charPick: [{ type: i0.Output, args: ["charPick"] }], rangePick: [{ type: i0.Output, args: ["rangePick"] }] } });
+            args: [{ selector: 'gve-base-text-view', imports: [
+                        FormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                        BaseTextCharComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar -->\r\n<div class=\"toolbar\">\r\n  <mat-form-field appearance=\"outline\" class=\"search-field\">\r\n    <input\r\n      matInput\r\n      [ngModel]=\"searchQuery()\"\r\n      (ngModelChange)=\"onSearchInput($event)\"\r\n      placeholder=\"search\"\r\n    />\r\n    @if (searchQuery()) {\r\n      <button\r\n        type=\"button\"\r\n        matSuffix\r\n        mat-icon-button\r\n        matTooltip=\"Clear search\"\r\n        (click)=\"clearSearch()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n\r\n  @if (isSearchActive()) {\r\n    <span class=\"match-count\" [class.no-matches]=\"matchCount() === 0\">\r\n      {{ matchCount() }}\r\n    </span>\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-stroked-button\r\n    matTooltip=\"Copy selection text to clipboard\"\r\n    [disabled]=\"!hasSelection()\"\r\n    (click)=\"copySelection()\"\r\n  >\r\n    <mat-icon>content_copy</mat-icon>\r\n    copy\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-stroked-button\r\n    matTooltip=\"Copy selection coordinates to clipboard\"\r\n    [disabled]=\"!hasSelection()\"\r\n    (click)=\"copyCoordinates()\"\r\n  >\r\n    <mat-icon>pin_drop</mat-icon>\r\n    copy coords\r\n  </button>\r\n</div>\r\n\r\n<!-- Text display -->\r\n<div id=\"text\" tabindex=\"0\" (keydown)=\"onKeyDown($event)\">\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      }\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: [".toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.search-field{flex:0 0 auto;min-width:200px;max-width:300px}.match-count{font-weight:700;padding:4px 8px;border-radius:4px;background-color:#e8f5e9;color:#2e7d32}.match-count.no-matches{background-color:#ffebee;color:#c62828}.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: () => [], propDecorators: { defaultColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultColor", required: false }] }], defaultBorderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultBorderColor", required: false }] }], selectionColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColor", required: false }] }], searchHighlightColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchHighlightColor", required: false }] }], hasLineNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLineNumber", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], colorCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorCallback", required: false }] }], borderColorCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColorCallback", required: false }] }], charPick: [{ type: i0.Output, args: ["charPick"] }], rangePick: [{ type: i0.Output, args: ["rangePick"] }] } });
 
 /**
  * 🔑 `gve-feature-editor`
@@ -724,6 +627,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * - ▶️ `featValues` (`FeatureMap`): 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.
+ * - ▶️ `multiValuedFeatureIds` (`string[]`): the IDs of the features that are
+ * multi-valued. Used to determine if the current feature being edited should
+ * display multi-value controls.
+ * - ▶️ `isVar`: true if the feature is a variant operation feature, which
+ * has additional properties like negation, global, and short-lived.
  * - 🔥 `featureChange` (`Feature`): emitted when feature has changed.
  * - 🔥 `featureCancel`: emitted when the user cancels the feature editing.
  */
@@ -749,11 +657,17 @@ class FeatureEditorComponent {
          * additional properties like negation, global, and short-lived.
          */
         this.isVar = input(false, ...(ngDevMode ? [{ debugName: "isVar" }] : []));
+        /**
+         * The IDs of the features that are multi-valued. Used to determine
+         * if the current feature being edited should display multi-value controls.
+         */
+        this.multiValuedFeatureIds = input(...(ngDevMode ? [undefined, { debugName: "multiValuedFeatureIds" }] : []));
         /**
          * Event emitted when the user cancels the feature editing.
          */
         this.featureCancel = output();
         this.nameIds = signal(undefined, ...(ngDevMode ? [{ debugName: "nameIds" }] : []));
+        this.isMultiValued = signal(false, ...(ngDevMode ? [{ debugName: "isMultiValued" }] : []));
         this.name = formBuilder.control('', {
             validators: [Validators.required, Validators.maxLength(50)],
             nonNullable: true,
@@ -762,6 +676,9 @@ class FeatureEditorComponent {
             validators: [Validators.maxLength(5000)],
             nonNullable: true,
         });
+        this.selectedValue = formBuilder.control('', {
+            nonNullable: true,
+        });
         this.setPolicy = formBuilder.control(FeatureSetPolicy.multiple, {
             nonNullable: true,
         });
@@ -771,6 +688,7 @@ class FeatureEditorComponent {
         this.form = formBuilder.group({
             name: this.name,
             value: this.value,
+            selectedValue: this.selectedValue,
             setPolicy: this.setPolicy,
             isNegated: this.isNegated,
             isGlobal: this.isGlobal,
@@ -786,7 +704,7 @@ class FeatureEditorComponent {
         });
     }
     ngOnInit() {
-        // whenever the name changes, update the value selection
+        // whenever the name changes, update the value selection and multi-valued status
         this._sub = this.name.valueChanges
             .pipe(debounceTime(300), distinctUntilChanged())
             .subscribe((name) => {
@@ -794,6 +712,9 @@ class FeatureEditorComponent {
                 this.value.reset();
                 this.nameIds.set(this.getLabeledIdsFor(name, this.featValues()));
             }
+            // Update multi-valued status
+            const ids = this.multiValuedFeatureIds();
+            this.isMultiValued.set(!!ids && ids.includes(name));
         });
     }
     ngOnDestroy() {
@@ -809,6 +730,7 @@ class FeatureEditorComponent {
     updateForm(feature) {
         if (!feature) {
             this.form.reset();
+            this.isMultiValued.set(false);
         }
         else {
             this._frozen = true;
@@ -818,9 +740,27 @@ class FeatureEditorComponent {
             this.isNegated.setValue(feature.isNegated || false);
             this.isGlobal.setValue(feature.isGlobal || false);
             this.isShortLived.setValue(feature.isShortLived || false);
+            // Set multi-valued status based on feature name
+            const ids = this.multiValuedFeatureIds();
+            this.isMultiValued.set(!!ids && ids.includes(feature.name));
             this._frozen = false;
         }
     }
+    addValueToComposite() {
+        if (!this.selectedValue.value) {
+            return;
+        }
+        const currentValue = this.value.value.trim();
+        const newValue = this.selectedValue.value.trim();
+        if (currentValue) {
+            this.value.setValue(currentValue + ' ' + newValue);
+        }
+        else {
+            this.value.setValue(newValue);
+        }
+        this.selectedValue.reset();
+        this.value.markAsDirty();
+    }
     cancel() {
         this.featureCancel.emit();
     }
@@ -843,12 +783,12 @@ class FeatureEditorComponent {
                 setPolicy: this.setPolicy.value,
             });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FeatureEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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" }, 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        @for (i of featNames(); track i) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\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      @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n      <mat-error>name required</mat-error>\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        @for (e of nameIds(); track e) {\r\n        <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n        }\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: 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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FeatureEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feature: "featureChange", featureCancel: "featureCancel" }, 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          @for (i of featNames(); track i) {\r\n            <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n          }\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        @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error>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      @if (isMultiValued()) {\r\n        <!-- multi-valued: select for picking + text for composite -->\r\n        <mat-form-field>\r\n          <mat-label>select value</mat-label>\r\n          <mat-select [formControl]=\"selectedValue\">\r\n            @for (e of nameIds(); track e) {\r\n              <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n            }\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          mat-icon-button\r\n          matTooltip=\"Add selected value\"\r\n          (click)=\"addValueToComposite()\"\r\n          [disabled]=\"!selectedValue.value\"\r\n        >\r\n          <mat-icon class=\"mat-primary\">add</mat-icon>\r\n        </button>\r\n        <mat-form-field>\r\n          <mat-label>composite value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n          @if (\r\n            $any(value).errors?.maxLength && (value.dirty || value.touched)\r\n          ) {\r\n            <mat-error>value too long</mat-error>\r\n          }\r\n        </mat-form-field>\r\n      } @else {\r\n        <!-- single-valued: just select -->\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <mat-select [formControl]=\"value\">\r\n            @for (e of nameIds(); track e) {\r\n              <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n            }\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      }\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        }\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: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i7.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FeatureEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FeatureEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-feature-editor', imports: [
+            args: [{ selector: 'gve-feature-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
                         MatButtonModule,
                         MatCheckboxModule,
@@ -857,11 +797,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         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        @for (i of featNames(); track i) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\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      @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n      <mat-error>name required</mat-error>\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        @for (e of nameIds(); track e) {\r\n        <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n        }\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: [{
+                    ], 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          @for (i of featNames(); track i) {\r\n            <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n          }\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        @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error>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      @if (isMultiValued()) {\r\n        <!-- multi-valued: select for picking + text for composite -->\r\n        <mat-form-field>\r\n          <mat-label>select value</mat-label>\r\n          <mat-select [formControl]=\"selectedValue\">\r\n            @for (e of nameIds(); track e) {\r\n              <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n            }\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          mat-icon-button\r\n          matTooltip=\"Add selected value\"\r\n          (click)=\"addValueToComposite()\"\r\n          [disabled]=\"!selectedValue.value\"\r\n        >\r\n          <mat-icon class=\"mat-primary\">add</mat-icon>\r\n        </button>\r\n        <mat-form-field>\r\n          <mat-label>composite value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n          @if (\r\n            $any(value).errors?.maxLength && (value.dirty || value.touched)\r\n          ) {\r\n            <mat-error>value too long</mat-error>\r\n          }\r\n        </mat-form-field>\r\n      } @else {\r\n        <!-- single-valued: just select -->\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <mat-select [formControl]=\"value\">\r\n            @for (e of nameIds(); track e) {\r\n              <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n            }\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      }\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        }\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$1.FormBuilder }], propDecorators: { nameControl: [{
                 type: ViewChild,
                 args: ['nameCtl']
-            }], featNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "featNames", required: false }] }], featValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "featValues", required: false }] }], feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: false }] }, { type: i0.Output, args: ["featureChange"] }], isVar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVar", required: false }] }], featureCancel: [{ type: i0.Output, args: ["featureCancel"] }] } });
+            }], featNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "featNames", required: false }] }], featValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "featValues", required: false }] }], feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: false }] }, { type: i0.Output, args: ["featureChange"] }], isVar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVar", required: false }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], featureCancel: [{ type: i0.Output, args: ["featureCancel"] }] } });
 
 /**
  * 🔑 `gve-feature-set-editor`
@@ -881,6 +821,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * it is always invisible; otherwise, it gets visible when the number of features
  * is equal to or greater than the threshold. Default is 5.
  * - ▶️ `features` (`Feature[]`): the features to edit.
+ * - ▶️ `multiValuedFeatureIds` (`string[]`): the IDs of the features that are
+ * multi-valued. If a feature being edited is in this list, the feature editor
+ * will allow adding multiple values to it.
  * - ▶️ `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.
@@ -911,6 +854,12 @@ class FeatureSetEditorComponent {
          * is greater than or equal to the threshold. Default is 5.
          */
         this.filterThreshold = input(5, ...(ngDevMode ? [{ debugName: "filterThreshold" }] : []));
+        /**
+         * The IDs of the features that are multi-valued. If a feature being
+         * edited is in this list, the feature editor will allow adding multiple
+         * values to it.
+         */
+        this.multiValuedFeatureIds = input(...(ngDevMode ? [undefined, { debugName: "multiValuedFeatureIds" }] : []));
         /**
          * The features to edit.
          */
@@ -949,7 +898,7 @@ class FeatureSetEditorComponent {
         this.editedFeatureIndex.set(-1);
     }
     editFeature(feature) {
-        this.editedFeature.set(deepCopy(feature));
+        this.editedFeature.set(structuredClone(feature));
         this.editedFeatureIndex.set(this.features().indexOf(feature));
     }
     deleteFeature(feature) {
@@ -961,6 +910,12 @@ class FeatureSetEditorComponent {
         features.splice(index, 1);
         this.features.set(features);
     }
+    isFeatureMultiValued(feature) {
+        if (!feature || !this.multiValuedFeatureIds()) {
+            return false;
+        }
+        return this.multiValuedFeatureIds().includes(feature.name);
+    }
     onFeatureChange(feature) {
         if (!feature) {
             return;
@@ -987,12 +942,12 @@ class FeatureSetEditorComponent {
         this.editedFeature.set(undefined);
         this.editedFeatureIndex.set(-1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FeatureSetEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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" }, 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>flags</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (feature of filteredFeatures(); track feature; let i = $index) {\r\n      <tr [class.selected]=\"i === editedFeatureIndex()\">\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          @if ($any(feature).isNegated) {\r\n          <span class=\"icon\" matTooltip=\"Negated: remove if present\">\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </span>\r\n          } @if ($any(feature).isGlobal) {\r\n          <span class=\"icon\" matTooltip=\"Global: apply to whole output\">\r\n            <mat-icon class=\"mat-primary\">public</mat-icon>\r\n          </span>\r\n          } @if ($any(feature).isShortLived) {\r\n          <span class=\"icon\" matTooltip=\"Short-lived: removed on next operation\">\r\n            <mat-icon class=\"mat-accent\">timer</mat-icon>\r\n          </span>\r\n          }\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  @if (editedFeature()) {\r\n  <mat-expansion-panel\r\n    [disabled]=\"!editedFeature()\"\r\n    [expanded]=\"editedFeature()\"\r\n  >\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  }\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}\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: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FeatureEditorComponent, selector: "gve-feature-editor", inputs: ["featNames", "featValues", "feature", "isVar"], outputs: ["featureChange", "featureCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FeatureSetEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { features: "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>flags</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (feature of filteredFeatures(); track $index) {\r\n          <tr [class.selected]=\"$index === editedFeatureIndex()\">\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                @if ($any(feature).isNegated) {\r\n                  <span class=\"icon\" matTooltip=\"Negated: remove if present\">\r\n                    <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n                  </span>\r\n                }\r\n                @if ($any(feature).isGlobal) {\r\n                  <span class=\"icon\" matTooltip=\"Global: apply to whole output\">\r\n                    <mat-icon class=\"mat-primary\">public</mat-icon>\r\n                  </span>\r\n                }\r\n                @if ($any(feature).isShortLived) {\r\n                  <span\r\n                    class=\"icon\"\r\n                    matTooltip=\"Short-lived: removed on next operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">timer</mat-icon>\r\n                  </span>\r\n                }\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  @if (editedFeature()) {\r\n    <mat-expansion-panel\r\n      [disabled]=\"!editedFeature()\"\r\n      [expanded]=\"editedFeature()\"\r\n    >\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        [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\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  }\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FeatureEditorComponent, selector: "gve-feature-editor", inputs: ["featNames", "featValues", "feature", "isVar", "multiValuedFeatureIds"], outputs: ["featureChange", "featureCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FeatureSetEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FeatureSetEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-feature-set-editor', imports: [
+            args: [{ selector: 'gve-feature-set-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
                         MatButtonModule,
                         MatExpansionModule,
@@ -1003,8 +958,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         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>flags</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (feature of filteredFeatures(); track feature; let i = $index) {\r\n      <tr [class.selected]=\"i === editedFeatureIndex()\">\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          @if ($any(feature).isNegated) {\r\n          <span class=\"icon\" matTooltip=\"Negated: remove if present\">\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </span>\r\n          } @if ($any(feature).isGlobal) {\r\n          <span class=\"icon\" matTooltip=\"Global: apply to whole output\">\r\n            <mat-icon class=\"mat-primary\">public</mat-icon>\r\n          </span>\r\n          } @if ($any(feature).isShortLived) {\r\n          <span class=\"icon\" matTooltip=\"Short-lived: removed on next operation\">\r\n            <mat-icon class=\"mat-accent\">timer</mat-icon>\r\n          </span>\r\n          }\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  @if (editedFeature()) {\r\n  <mat-expansion-panel\r\n    [disabled]=\"!editedFeature()\"\r\n    [expanded]=\"editedFeature()\"\r\n  >\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  }\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { isVar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVar", required: false }] }], featNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "featNames", required: false }] }], featValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "featValues", required: false }] }], filterThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterThreshold", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }, { type: i0.Output, args: ["featuresChange"] }] } });
+                    ], 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>flags</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (feature of filteredFeatures(); track $index) {\r\n          <tr [class.selected]=\"$index === editedFeatureIndex()\">\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                @if ($any(feature).isNegated) {\r\n                  <span class=\"icon\" matTooltip=\"Negated: remove if present\">\r\n                    <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n                  </span>\r\n                }\r\n                @if ($any(feature).isGlobal) {\r\n                  <span class=\"icon\" matTooltip=\"Global: apply to whole output\">\r\n                    <mat-icon class=\"mat-primary\">public</mat-icon>\r\n                  </span>\r\n                }\r\n                @if ($any(feature).isShortLived) {\r\n                  <span\r\n                    class=\"icon\"\r\n                    matTooltip=\"Short-lived: removed on next operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">timer</mat-icon>\r\n                  </span>\r\n                }\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  @if (editedFeature()) {\r\n    <mat-expansion-panel\r\n      [disabled]=\"!editedFeature()\"\r\n      [expanded]=\"editedFeature()\"\r\n    >\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        [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\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  }\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { isVar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVar", required: false }] }], featNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "featNames", required: false }] }], featValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "featValues", required: false }] }], filterThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterThreshold", required: false }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }, { type: i0.Output, args: ["featuresChange"] }] } });
+
+/**
+ * Service for base text operations.
+ */
+class GveBaseTextService {
+    static { this._asciiTable = {
+        '\u0007': '\u21B5', // BEL (bell)
+        '\u0008': '\u21B6', // BS (backspace)
+        '\u0009': '\u2192', // HT (horizontal tab)
+        '\u000A': '\u2193', // LF (line feed)
+        '\u000B': '\u2194', // VT (vertical tab)
+        '\u000C': '\u2195', // FF (form feed)
+        '\u000D': '\u21A6', // CR (carriage return)
+        '\u0020': ' ', // Space
+        '\u007F': '~', // DEL (delete)
+    }; }
+    /**
+     * Translate an ASCII special character to a printable character.
+     *
+     * @param c The character to translate.
+     * @returns The translated character.
+     */
+    static translateSpecialChar(c) {
+        return this._asciiTable[c] || c;
+    }
+    /**
+     * Convert a string to the character nodes of a base text.
+     *
+     * @param text The text to convert to base characters.
+     * @returns Character nodes for the given text.
+     */
+    static stringToBaseChars(text) {
+        if (!text) {
+            return [];
+        }
+        return text.split('').map((c, i) => {
+            return {
+                id: i + 1,
+                label: this.translateSpecialChar(c),
+                index: i,
+                data: c,
+            };
+        });
+    }
+}
 
 /**
  * 🔑 `gve-base-text-editor`
@@ -1031,7 +1031,7 @@ class BaseTextEditorComponent {
                         return value;
                     }
                     if (typeof value === 'string') {
-                        return SnapshotViewService.stringToBaseChars(value);
+                        return GveBaseTextService.stringToBaseChars(value);
                     }
                     return undefined;
                 } }] : [{
@@ -1043,11 +1043,17 @@ class BaseTextEditorComponent {
                         return value;
                     }
                     if (typeof value === 'string') {
-                        return SnapshotViewService.stringToBaseChars(value);
+                        return GveBaseTextService.stringToBaseChars(value);
                     }
                     return undefined;
                 },
             }]));
+        /**
+         * The IDs of the features that are multi-valued. If a feature being
+         * edited is in this list, the feature editor will allow adding multiple
+         * values to it. Passed down to feature editors.
+         */
+        this.multiValuedFeatureIds = input(...(ngDevMode ? [undefined, { debugName: "multiValuedFeatureIds" }] : []));
         /**
          * Emitted for the edited text as an array of `CharNode`'s whenever it changes.
          */
@@ -1096,22 +1102,19 @@ class BaseTextEditorComponent {
     onRangePick(range) {
         this.textRange.set(range);
     }
-    patchTextFromUser() {
-        // TODO
-    }
     setTextFromUser() {
         this._dialogService
             .confirm('Confirm', 'Reset text?')
             .subscribe((yes) => {
             if (yes) {
-                this.textChange.emit(SnapshotViewService.stringToBaseChars(this.userText.value));
+                this.textChange.emit(GveBaseTextService.stringToBaseChars(this.userText.value));
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseTextEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i4$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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      @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  <!-- 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.set($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: 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: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i7.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", "colorCallback", "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: "21.0.0", ngImport: i0, type: BaseTextEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i4$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: BaseTextEditorComponent, isStandalone: true, selector: "gve-base-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, 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      @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  <!-- 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  </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.set($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      [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\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: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "filterThreshold", "multiValuedFeatureIds", "features"], outputs: ["featuresChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseTextEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BaseTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-base-text-editor', imports: [
                         ReactiveFormsModule,
@@ -1122,8 +1125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         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      @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  <!-- 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.set($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: i4$1.DialogService }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], textChange: [{ type: i0.Output, args: ["textChange"] }] } });
+                    ], 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      @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  <!-- 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  </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.set($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      [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\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$1.FormBuilder }, { type: i4$1.DialogService }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], textChange: [{ type: i0.Output, args: ["textChange"] }] } });
 
 /**
  * Service to interact with the GVE API.
@@ -1192,10 +1195,10 @@ class GveApiService {
         })
             .pipe(catchError(this._error.handleError));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GveApiService, deps: [{ token: i1$2.HttpClient }, { token: i2$1.ErrorService }, { token: i2$1.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GveApiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GveApiService, deps: [{ token: i1$2.HttpClient }, { token: i2$1.ErrorService }, { token: i2$1.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GveApiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GveApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GveApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1273,10 +1276,10 @@ class BatchOperationEditorComponent {
     close() {
         this.dialogRef?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BatchOperationEditorComponent, deps: [{ token: i1.FormBuilder }, { token: GveApiService }, { token: i3$3.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "21.0.0", ngImport: i0, type: BatchOperationEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: GveApiService }, { token: i3$2.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "20.3.10", ngImport: i0, type: BatchOperationEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BatchOperationEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-batch-operation-editor', imports: [
                         ReactiveFormsModule,
@@ -1285,7 +1288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         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(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$3.MatDialogRef, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: GveApiService }, { type: i3$2.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -1378,12 +1381,12 @@ class OperationSourceEditorComponent {
             note: this.note.value || undefined,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OperationSourceEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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", 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: 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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: OperationSourceEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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", 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: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i7.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OperationSourceEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: OperationSourceEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-operation-source-editor', imports: [
+            args: [{ selector: 'gve-operation-source-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
                         MatButtonModule,
                         MatFormFieldModule,
@@ -1392,7 +1395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         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: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], ids: [{ type: i0.Input, args: [{ isSignal: true, alias: "ids", required: false }] }], types: [{ type: i0.Input, args: [{ isSignal: true, alias: "types", required: false }] }], sourceCancel: [{ type: i0.Output, args: ["sourceCancel"] }] } });
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], ids: [{ type: i0.Input, args: [{ isSignal: true, alias: "ids", required: false }] }], types: [{ type: i0.Input, args: [{ isSignal: true, alias: "types", required: false }] }], sourceCancel: [{ type: i0.Output, args: ["sourceCancel"] }] } });
 
 /**
  * Validators for SVG.
@@ -1610,10 +1613,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: "20.3.10", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SettingsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1626,7 +1629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * A component for editing a variant generation operation.
  * Used by the `gve-snapshot-editor` component.
  * - ▶️ `operation` (`CharChainOperation`): the operation to edit.
- * - ▶️ `snapshot` (`SnapshotBase`): the snapshot the operation refers to.
+ * - ▶️ `snapshot` (`Snapshot`): the snapshot the operation refers to.
  * - ▶️ `hidePreview` (`boolean`): whether to hide the preview request button.
  * - 🔥 `operationChange` (`CharChainOperation`): emitted when the operation
  * is changed.
@@ -1675,8 +1678,6 @@ class ChainOperationEditorComponent {
         this._clipboard = _clipboard;
         this._settings = _settings;
         this._dialogService = _dialogService;
-        // monaco
-        this._disposables = [];
         this._nanoid = customAlphabet('1234567890abcdef', 10);
         /**
          * The operation to edit.
@@ -1694,18 +1695,16 @@ class ChainOperationEditorComponent {
          * Definitions for features, including names and values.
          */
         this.featureDefs = input(...(ngDevMode ? [undefined, { debugName: "featureDefs" }] : []));
-        /**
-         * Definitions for element features, including names and values.
-         */
-        this.elementFeatureDefs = input(...(ngDevMode ? [undefined, { debugName: "elementFeatureDefs" }] : []));
-        /**
-         * Definitions for diplomatic features, including names and values.
-         */
-        this.diplomaticFeatureDefs = input(...(ngDevMode ? [undefined, { debugName: "diplomaticFeatureDefs" }] : []));
         /**
          * Set when the edited operation's text range is to be patched.
          */
         this.rangePatch = input(...(ngDevMode ? [undefined, { debugName: "rangePatch" }] : []));
+        /**
+         * The IDs of the features that are multi-valued. If a feature being
+         * edited is in this list, the feature editor will allow adding multiple
+         * values to it. Passed down to feature editors.
+         */
+        this.multiValuedFeatureIds = input(...(ngDevMode ? [undefined, { debugName: "multiValuedFeatureIds" }] : []));
         /**
          * Emitted when the operation is changed.
          */
@@ -1791,15 +1790,6 @@ class ChainOperationEditorComponent {
         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 || '');
-            }
-        });
         // when rangePatch changes, patch operation range (at and run,
         // resetting atAsIndex to false)
         effect(() => {
@@ -1829,7 +1819,6 @@ class ChainOperationEditorComponent {
         this._subs.push(this.type.valueChanges.subscribe(() => this.updateArgsUI()));
     }
     ngOnDestroy() {
-        this._disposables.forEach((d) => d.dispose());
         for (const sub of this._subs) {
             sub.unsubscribe();
         }
@@ -1843,51 +1832,11 @@ class ChainOperationEditorComponent {
         if ((!snapshot && this.snapshot()) || (snapshot && !this.snapshot())) {
             return true;
         }
-        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) {
-            return true;
-        }
-        // compare textOptions returning true if any different
-        const options = snapshot?.textOptions;
-        if (options?.lineHeightOffset !==
-            this.snapshot()?.textOptions?.lineHeightOffset ||
-            options?.charSpacingOffset !==
-                this.snapshot()?.textOptions?.charSpacingOffset ||
-            options?.spcWidthOffset !== this.snapshot()?.textOptions?.spcWidthOffset) {
+        if (snapshot?.text !== this.snapshot()?.text) {
             return true;
         }
         return false;
     }
-    onCreateEditor(editor) {
-        console.log('creating editor');
-        editor.updateOptions({
-            minimap: {
-                side: 'right',
-            },
-            wordWrap: 'on',
-            automaticLayout: true,
-        });
-        this._editorModel =
-            this._editorModel || monaco.editor.createModel(this.svg.value, 'xml');
-        editor.setModel(this._editorModel);
-        this._editor = editor;
-        this._disposables.push(
-        // when the editor content changes, update the SVG control value
-        this._editorModel.onDidChangeContent((e) => {
-            console.log('change content');
-            const code = this._editorModel.getValue();
-            if (code !== this.svg.value) {
-                this.svg.setValue(code);
-                this.svg.markAsDirty();
-                this.svg.updateValueAndValidity();
-            }
-        }));
-    }
     onFeaturesChange(features) {
         this.features.setValue(features);
         this.features.markAsDirty();
@@ -1903,7 +1852,7 @@ class ChainOperationEditorComponent {
     }
     editSource(index) {
         this.editedSourceIndex.set(index);
-        this.editedSource.set(deepCopy(this.sources.value[index]));
+        this.editedSource.set(structuredClone(this.sources.value[index]));
     }
     closeSource() {
         this.editedSourceIndex.set(-1);
@@ -1921,137 +1870,6 @@ class ChainOperationEditorComponent {
         this.closeSource();
     }
     // #endregion
-    // #region svg
-    saveSvg() {
-        if (!this.svg.value) {
-            return;
-        }
-        const blob = new Blob([this.svg.value], { type: 'application/xml' });
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        // create filename from date and time
-        const now = new Date();
-        const date = now.toISOString().split('T')[0];
-        const time = now.toTimeString().split(' ')[0].replace(':', '-');
-        a.download = `svg-${date}_${time}.svg`;
-        a.click();
-        window.URL.revokeObjectURL(url);
-    }
-    openSvgEditor() {
-        const url = this._settings.get('svg-editor', 'https://editor.method.ac/'
-        // 'https://boxy-svg.com/app'
-        );
-        if (url) {
-            if (this.svg.value) {
-                this._clipboard.copy(this.svg.value);
-            }
-            window.open(url, '_blank');
-        }
-    }
-    loadSvg() {
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = '.svg';
-        input.onchange = () => {
-            const file = input.files?.[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    this._editorModel?.setValue(e.target?.result);
-                };
-                reader.readAsText(file);
-            }
-        };
-        input.click();
-    }
-    setSvgFromClipboard() {
-        navigator.clipboard.readText().then((text) => {
-            this._editorModel?.setValue(text);
-        });
-    }
-    parseSvg(svg) {
-        if (!svg) {
-            return [];
-        }
-        try {
-            // parse SVG code extracting all the SVG elements with an id attribute
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(svg, 'image/svg+xml');
-            const elements = Array.from(doc.querySelectorAll('[id]'));
-            // for each element, read x and y and add a transform with a translate
-            // equal to -x and -y so that the element is at the origin. This is useful
-            // so that the element can be previewed in its box without wasting space
-            // just because it happens not to be placed at the SVG origin
-            for (const element of elements) {
-                const x = parseFloat(element.getAttribute('x') || '0');
-                const y = parseFloat(element.getAttribute('y') || '0');
-                element.setAttribute('transform', `translate(${-x},${-y})`);
-            }
-            return elements;
-        }
-        catch (e) {
-            this.svg.setErrors({ invalidSvg: true });
-            return [];
-        }
-    }
-    removeDecimals() {
-        const svg = this.svg.value;
-        const newSvg = svg.replace(/(\d+)\.\d+/g, '$1');
-        this._editorModel?.setValue(newSvg);
-    }
-    wrapInGroup() {
-        // wrap SVG code in <g>...</g> if it does not already start with <g>
-        const svg = this.svg.value;
-        if (!svg.startsWith('<g')) {
-            this._editorModel?.setValue(`<g>${svg}</g>`);
-        }
-    }
-    // #endregion
-    // #region element features
-    onTabIndexChange(index) {
-        this.tabIndex.set(index);
-        if (index === 3) {
-            this.elements.set(this.parseSvg(this.svg.value));
-        }
-    }
-    editElementFeatures(element) {
-        const id = element.id;
-        const features = this.elementFeatures.value[id] || [];
-        this.elementFeatures.setValue({
-            ...this.elementFeatures.value,
-            [id]: features,
-        });
-        this.editedElementId.set(id);
-    }
-    deleteElementFeatures(element) {
-        const id = element.id;
-        const elementFeatures = { ...this.elementFeatures.value };
-        if (!elementFeatures[id]) {
-            return;
-        }
-        this._dialogService
-            .confirm('Confirm', 'Delete element features?')
-            .subscribe((yes) => {
-            if (yes) {
-                delete elementFeatures[id];
-                this.elementFeatures.setValue(elementFeatures);
-                if (this.editedElementId() === id) {
-                    this.editedElementId.set(undefined);
-                }
-            }
-        });
-    }
-    onElementFeaturesChange(features) {
-        if (this.editedElementId()) {
-            this.elementFeatures.setValue({
-                ...this.elementFeatures.value,
-                [this.editedElementId()]: features,
-            });
-            this.editedElementId.set(undefined);
-        }
-    }
-    // #endregion
     updateArgsUI() {
         let to = false, toRun = false, value = false;
         switch (this.type.value) {
@@ -2099,8 +1917,6 @@ class ChainOperationEditorComponent {
         this.groupId.setValue(operation.groupId || null);
         this.features.setValue(operation.features || []);
         this.sources.setValue(operation.sources || []);
-        this.newTextHidden.setValue(operation.diplomatics?.isNewTextHidden || false);
-        this.dpFeatures.setValue(operation.diplomatics?.features || []);
         this.type.setValue(operation.type);
         this.at.setValue(operation.at);
         this.atAsIndex.setValue(operation.atAsIndex || false);
@@ -2112,11 +1928,7 @@ class ChainOperationEditorComponent {
         this.toRun.setValue(operation.toRun || 0);
         // escape line feeds in value for editing
         this.value.setValue(this.toggleLfEscape(operation.value, true) || null);
-        this.svg.setValue(operation.diplomatics?.g || '');
-        this._editorModel?.setValue(this.svg.value || '');
-        this.elementFeatures.setValue(operation.diplomatics?.elementFeatures || {});
         this.form.markAsPristine();
-        this.elements.set(this.parseSvg(operation.diplomatics?.g));
         this.updateArgsUI();
     }
     cancel() {
@@ -2128,12 +1940,6 @@ class ChainOperationEditorComponent {
             groupId: this.groupId.value || undefined,
             features: this.features.value?.length ? this.features.value : undefined,
             sources: this.sources.value?.length ? this.sources.value : undefined,
-            diplomatics: {
-                g: this.svg.value,
-                isNewTextHidden: this.newTextHidden.value,
-                features: this.dpFeatures.value,
-                elementFeatures: this.elementFeatures.value,
-            },
             id: this.id(),
             type: this.type.value,
             at: this.at.value,
@@ -2158,12 +1964,12 @@ class ChainOperationEditorComponent {
         this.operation.set(this.getOperation());
         this.operationChange.emit(this.operation());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ChainOperationEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i2$2.Clipboard }, { token: SettingsService }, { token: i4$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, elementFeatureDefs: { classPropertyName: "elementFeatureDefs", publicName: "elementFeatureDefs", isSignal: true, isRequired: false, transformFunction: null }, diplomaticFeatureDefs: { classPropertyName: "diplomaticFeatureDefs", publicName: "diplomaticFeatureDefs", isSignal: true, isRequired: false, transformFunction: null }, rangePatch: { classPropertyName: "rangePatch", publicName: "rangePatch", 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          @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      </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          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n          <mat-error>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          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n          <mat-error>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          @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n          <mat-error>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          @if ( $any(toRun).errors?.required && (toRun.dirty || toRun.touched) )\r\n          {\r\n          <mat-error>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          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n          <mat-error>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          @if ( $any(groupId).errors?.required && (groupId.dirty ||\r\n          groupId.touched) ) {\r\n          <mat-error>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            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [features]=\"features.value\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\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 [class.selected]=\"s === editedSource()\">\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      @if (editedSource()) {\r\n      <!-- source editor -->\r\n      <mat-expansion-panel\r\n        [disabled]=\"!editedSource()\"\r\n        [expanded]=\"editedSource()\"\r\n      >\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      }\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 [class.selected]=\"e.id === editedElementId()\">\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      @if (editedElementId()) {\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          [featNames]=\"elementFeatureDefs()?.names\"\r\n          [featValues]=\"elementFeatureDefs()?.values\"\r\n          [features]=\"elementFeatures.value[editedElementId()!] || []\"\r\n          (featuresChange)=\"onElementFeaturesChange($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n      }\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        [featNames]=\"diplomaticFeatureDefs()?.names\"\r\n        [featValues]=\"diplomaticFeatureDefs()?.values\"\r\n        [features]=\"dpFeatures.value\"\r\n        (featuresChange)=\"onDpFeaturesChange($event)\"\r\n      />\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}#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: 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: ClipboardModule }, { kind: "directive", type: i2$2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i5$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.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: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i14.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i14.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: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: NgeMonacoModule }, { kind: "component", type: i15.NgeMonacoEditorComponent, selector: "nge-monaco-editor", inputs: ["autoLayout", "options"], outputs: ["ready"] }, { 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"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ChainOperationEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$2.Clipboard }, { token: SettingsService }, { token: i4$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, rangePatch: { classPropertyName: "rangePatch", publicName: "rangePatch", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", 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 [selectedIndex]=\"tabIndex()\">\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          @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\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          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>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          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>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            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>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              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\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          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>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          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>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            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\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 [class.selected]=\"s === editedSource()\">\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      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\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      }\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:6em}.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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}#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%}#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: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$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: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i7.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.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: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: NgeMonacoModule }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "filterThreshold", "multiValuedFeatureIds", "features"], outputs: ["featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-chain-operation-editor', imports: [
+            args: [{ selector: 'gve-chain-operation-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
                         ClipboardModule,
                         MatBadgeModule,
@@ -2177,11 +1983,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         MatTabsModule,
                         MatTooltipModule,
                         NgeMonacoModule,
-                        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          @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      </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          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n          <mat-error>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          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n          <mat-error>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          @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n          <mat-error>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          @if ( $any(toRun).errors?.required && (toRun.dirty || toRun.touched) )\r\n          {\r\n          <mat-error>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          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n          <mat-error>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          @if ( $any(groupId).errors?.required && (groupId.dirty ||\r\n          groupId.touched) ) {\r\n          <mat-error>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            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [features]=\"features.value\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\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 [class.selected]=\"s === editedSource()\">\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      @if (editedSource()) {\r\n      <!-- source editor -->\r\n      <mat-expansion-panel\r\n        [disabled]=\"!editedSource()\"\r\n        [expanded]=\"editedSource()\"\r\n      >\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      }\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 [class.selected]=\"e.id === editedElementId()\">\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      @if (editedElementId()) {\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          [featNames]=\"elementFeatureDefs()?.names\"\r\n          [featValues]=\"elementFeatureDefs()?.values\"\r\n          [features]=\"elementFeatures.value[editedElementId()!] || []\"\r\n          (featuresChange)=\"onElementFeaturesChange($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n      }\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        [featNames]=\"diplomaticFeatureDefs()?.names\"\r\n        [featValues]=\"diplomaticFeatureDefs()?.values\"\r\n        [features]=\"dpFeatures.value\"\r\n        (featuresChange)=\"onDpFeaturesChange($event)\"\r\n      />\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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}#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$2.Clipboard }, { type: SettingsService }, { type: i4$1.DialogService }], propDecorators: { operation: [{ type: i0.Input, args: [{ isSignal: true, alias: "operation", required: false }] }, { type: i0.Output, args: ["operationChange"] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }], hidePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePreview", required: false }] }], featureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureDefs", required: false }] }], elementFeatureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementFeatureDefs", required: false }] }], diplomaticFeatureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "diplomaticFeatureDefs", required: false }] }], rangePatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePatch", required: false }] }], operationChange: [{ type: i0.Output, args: ["operationChange"] }], operationPreview: [{ type: i0.Output, args: ["operationPreview"] }], operationCancel: [{ type: i0.Output, args: ["operationCancel"] }] } });
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group [selectedIndex]=\"tabIndex()\">\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          @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\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          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>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          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>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            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>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              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\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          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>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          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>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            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\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 [class.selected]=\"s === editedSource()\">\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      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\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      }\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:6em}.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}tbody tr:nth-child(odd){background-color:#e2e2e2}th{text-align:left;font-weight:400;color:silver}td.fit-width{width:1px;white-space:nowrap}tr.selected{background-color:#d0d0d0!important}#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%}#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$1.FormBuilder }, { type: i2$2.Clipboard }, { type: SettingsService }, { type: i4$1.DialogService }], propDecorators: { operation: [{ type: i0.Input, args: [{ isSignal: true, alias: "operation", required: false }] }, { type: i0.Output, args: ["operationChange"] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }], hidePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePreview", required: false }] }], featureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureDefs", required: false }] }], rangePatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePatch", required: false }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], operationChange: [{ type: i0.Output, args: ["operationChange"] }], operationPreview: [{ type: i0.Output, args: ["operationPreview"] }], operationCancel: [{ type: i0.Output, args: ["operationCancel"] }] } });
 
 /**
  * 🔑 `gve-feature-set-view`
@@ -2249,10 +2054,10 @@ class FeatureSetViewComponent {
     ngOnDestroy() {
         this._sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FeatureSetViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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      <span id=\"badge\">{{ 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}#badge{border:1px solid silver;border-radius:6px;padding:4px;margin-top:-18px}\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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "21.0.0", ngImport: i0, type: FeatureSetViewComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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        <span id=\"badge\">{{ 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: [":host{display:block;width:100%;min-width:0}.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;min-width:0}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}#badge{border:1px solid silver;border-radius:6px;padding:4px;margin-top:-18px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "20.3.10", ngImport: i0, type: FeatureSetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FeatureSetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-feature-set-view', imports: [
                         ReactiveFormsModule,
@@ -2261,8 +2066,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         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      <span id=\"badge\">{{ 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}#badge{border:1px solid silver;border-radius:6px;padding:4px;margin-top:-18px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], featNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "featNames", required: false }] }], featValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "featValues", required: false }] }], filterThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterThreshold", required: false }] }] } });
+                    ], 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        <span id=\"badge\">{{ 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: [":host{display:block;width:100%;min-width:0}.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;min-width:0}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}#badge{border:1px solid silver;border-radius:6px;padding:4px;margin-top:-18px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], featNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "featNames", required: false }] }], featValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "featValues", required: false }] }], filterThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterThreshold", required: false }] }] } });
 
 /**
  * 🔑 `gve-steps-map`
@@ -2372,12 +2177,12 @@ class StepsMapComponent {
     onStepClick(step) {
         this.selectedStep.set(step);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StepsMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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" }, 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    [class.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: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$1.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: "21.0.0", ngImport: i0, type: StepsMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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" }, 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    [class.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: MatButtonModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StepsMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: StepsMapComponent, decorators: [{
             type: Component,
-            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    [class.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"] }]
+            args: [{ selector: 'gve-steps-map', imports: [MatButtonModule, MatRippleModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, 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    [class.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: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], selectedStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedStep", required: false }] }, { type: i0.Output, args: ["selectedStepChange"] }], textFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textFontSize", required: false }] }] } });
 
 /**
@@ -2610,346 +2415,35 @@ class ChainResultViewComponent {
         }
         this.selectionFeatures.set(features);
     }
-    onStepChange(step) {
-        this.selectionFeatures.set([]);
-        if (step) {
-            // setting the tag will trigger the step change
-            this.tag.setValue(step.outputTag);
-        }
-    }
-    pickRange() {
-        if (this.selectionRange()) {
-            this.rangePick.emit(this.selectionRange());
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ChainResultViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 }, disabledRangePick: { classPropertyName: "disabledRangePick", publicName: "disabledRangePick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepPick: "stepPick", rangePick: "rangePick" }, ngImport: i0, template: "@if (result()) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    @if (versionTags().length) {\r\n    <mat-form-field>\r\n      <mat-label>version</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        @for (t of versionTags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n    <!-- tag -->\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-form-field>\r\n    }\r\n    <!-- range picker -->\r\n    @if (selectionRange()) {\r\n    <div class=\"range\">\r\n      {{ selectionRange()!.at }}\u00D7{{ selectionRange()!.run }}\r\n    </div>\r\n    @if (!disabledRangePick()) {\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Pick this range for the edited operation\"\r\n      (click)=\"pickRange()\"\r\n      [disabled]=\"disabledRangePick()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">file_open</mat-icon>\r\n    </button>\r\n    } }\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        [colorCallback]=\"getCharColor\"\r\n        (charPick)=\"onTextCharPick($event)\"\r\n        (rangePick)=\"onTextRangePick($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}.range{color:silver;border:1px solid silver;border-radius:4px;padding:4px}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: 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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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: i6.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", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ChainResultViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gve-chain-result-view', imports: [
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatSelectModule,
-                        FeatureSetViewComponent,
-                        StepsMapComponent,
-                        BaseTextViewComponent,
-                        MatTooltip
-                    ], template: "@if (result()) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    @if (versionTags().length) {\r\n    <mat-form-field>\r\n      <mat-label>version</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        @for (t of versionTags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n    <!-- tag -->\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-form-field>\r\n    }\r\n    <!-- range picker -->\r\n    @if (selectionRange()) {\r\n    <div class=\"range\">\r\n      {{ selectionRange()!.at }}\u00D7{{ selectionRange()!.run }}\r\n    </div>\r\n    @if (!disabledRangePick()) {\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Pick this range for the edited operation\"\r\n      (click)=\"pickRange()\"\r\n      [disabled]=\"disabledRangePick()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">file_open</mat-icon>\r\n    </button>\r\n    } }\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        [colorCallback]=\"getCharColor\"\r\n        (charPick)=\"onTextCharPick($event)\"\r\n        (rangePick)=\"onTextRangePick($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}.range{color:silver;border:1px solid silver;border-radius:4px;padding:4px}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: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], initialStepIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialStepIndex", required: false }] }], stepPick: [{ type: i0.Output, args: ["stepPick"] }], disabledRangePick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledRangePick", required: false }] }], rangePick: [{ type: i0.Output, args: ["rangePick"] }] } });
-
-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) => {
-            // note that in label we must escape the double quotes
-            sb.push(`  ${node.id} [label="${node.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: "20.3.10", ngImport: i0, type: GveGraphvizService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GveGraphvizService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", 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(...(ngDevMode ? [undefined, { debugName: "chain" }] : []));
-        /**
-         * The direction of the graph.
-         */
-        this.direction = input('LR', ...(ngDevMode ? [{ debugName: "direction" }] : []));
-        /**
-         * 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();
-        }, ...(ngDevMode ? [{ debugName: "tags" }] : []));
-        /**
-         * The tags to show, or empty to show all of them.
-         */
-        this.selectedTags = model([], ...(ngDevMode ? [{ debugName: "selectedTags" }] : []));
-        /**
-         * 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());
-        }, ...(ngDevMode ? [{ debugName: "graph" }] : []));
-        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: "20.3.10", ngImport: i0, type: ChainViewComponent, deps: [{ token: GveGraphvizService }, { token: SettingsService }, { token: i2$2.Clipboard }, { token: i4$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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: 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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.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: "20.3.10", ngImport: i0, type: ChainViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gve-chain-view', imports: [
-                        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$2.Clipboard }, { type: i4$2.MatSnackBar }], propDecorators: { chain: [{ type: i0.Input, args: [{ isSignal: true, alias: "chain", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], selectedTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTags", required: false }] }, { type: i0.Output, args: ["selectedTagsChange"] }] } });
-
-/**
- * 🔑 `gve-ln-heights-editor`
- *
- * A component to edit line heights.
- * Used by the `gve-snapshot-editor` component.
- *
- * - ▶️ `lineCount` (`number`): the number of lines.
- * - ▶️ `heights` (`Record<number, number>`): the line heights.
- * - 🔥 `heightsChange` (`EventEmitter<Record<number, number>>`): the event
- * emitted when the heights change.
- */
-class LnHeightsEditorComponent {
-    constructor(formBuilder) {
-        /**
-         * The total number of lines in the text.
-         */
-        this.lineCount = input(0, ...(ngDevMode ? [{ debugName: "lineCount" }] : []));
-        /**
-         * The heights map of the lines. Each key is a line number and the value is
-         * the height of the line.
-         */
-        this.heights = input(...(ngDevMode ? [undefined, { debugName: "heights" }] : []));
-        /**
-         * The event emitted when the heights change.
-         */
-        this.heightsChange = output();
-        // when lineCount changes, update lineNumbers
-        this.lineNumbers = computed(() => Array.from({ length: this.lineCount() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "lineNumbers" }] : []));
-        this.lineNumber = formBuilder.control(0, { nonNullable: true });
-        this.height = formBuilder.control(0, { nonNullable: true });
-    }
-    pruneHeights() {
-        // remove all the heigths with value=0
-        this._heights = Object.fromEntries(Object.entries(this._heights || {}).filter(([_, v]) => v !== 0));
-        // if heights are now empty, set to undefined
-        if (Object.keys(this._heights).length === 0) {
-            this._heights = undefined;
-        }
-    }
-    ngOnInit() {
-        this._subs = [];
-        // update heights[ln] when height changes and emit heightsChange
-        this._subs.push(this.height.valueChanges
-            .pipe(distinctUntilChanged(), debounceTime(200))
-            .subscribe((value) => {
-            if (!this._heights) {
-                this._heights = {};
-            }
-            const ln = this.lineNumber.value;
-            const newHeights = { ...(this._heights || {}) };
-            newHeights[ln] = value;
-            this._heights = Object.fromEntries(Object.entries(newHeights).filter(([_, v]) => v !== 0));
-            if (Object.keys(this._heights).length === 0) {
-                this._heights = undefined;
-            }
-            this.heightsChange.emit(this._heights);
-        }));
-        // update height when line number changes
-        this._subs.push(this.lineNumber.valueChanges
-            .pipe(distinctUntilChanged(), debounceTime(200))
-            .subscribe((value) => {
-            if (!this._heights)
-                return;
-            this.height.setValue(this._heights[value] || 0);
-        }));
-    }
-    ngOnDestroy() {
-        this._subs?.forEach((sub) => sub.unsubscribe());
-    }
-    reset() {
-        this._heights = undefined;
-        this.heightsChange.emit(undefined);
+    onStepChange(step) {
+        this.selectionFeatures.set([]);
+        if (step) {
+            // setting the tag will trigger the step change
+            this.tag.setValue(step.outputTag);
+        }
+    }
+    pickRange() {
+        if (this.selectionRange()) {
+            this.rangePick.emit(this.selectionRange());
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LnHeightsEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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        @for (n of lineNumbers(); track n) {\r\n          <mat-option [value]=\"n\">\r\n            {{ n }}\r\n          </mat-option>\r\n        }\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: 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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ChainResultViewComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 }, disabledRangePick: { classPropertyName: "disabledRangePick", publicName: "disabledRangePick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepPick: "stepPick", rangePick: "rangePick" }, ngImport: i0, template: "@if (result()) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    @if (versionTags().length) {\r\n    <mat-form-field>\r\n      <mat-label>stage</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        @for (t of versionTags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n    <!-- tag -->\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-form-field>\r\n    }\r\n    <!-- range picker -->\r\n    @if (selectionRange()) {\r\n    <div class=\"range\">\r\n      {{ selectionRange()!.at }}\u00D7{{ selectionRange()!.run }}\r\n    </div>\r\n    @if (!disabledRangePick()) {\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Pick this range for the edited operation\"\r\n      (click)=\"pickRange()\"\r\n      [disabled]=\"disabledRangePick()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">file_open</mat-icon>\r\n    </button>\r\n    } }\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        [colorCallback]=\"getCharColor\"\r\n        [hasLineNumber]=\"true\"\r\n        (charPick)=\"onTextCharPick($event)\"\r\n        (rangePick)=\"onTextRangePick($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;width:100%;box-sizing:border-box}.form-row-top>div{flex:1 1 0%;min-width:0}.range{color:silver;border:1px solid silver;border-radius:4px;padding:4px}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px;height:100%}div#bar{grid-area:bar}div#map{grid-area:map;min-height:0;overflow-y:auto}div#step{grid-area:step;min-height:0;display:grid;grid-template-rows:1fr auto;gap:8px}div#text{min-height:0;overflow-y:auto}div#feats{width:100%}.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: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.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: i7.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", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LnHeightsEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ChainResultViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-ln-heights-editor', imports: [
+            args: [{ selector: 'gve-chain-result-view', imports: [
                         ReactiveFormsModule,
                         MatButtonModule,
                         MatFormFieldModule,
                         MatIconModule,
-                        MatInputModule,
                         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        @for (n of lineNumbers(); track n) {\r\n          <mat-option [value]=\"n\">\r\n            {{ n }}\r\n          </mat-option>\r\n        }\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: i0.Input, args: [{ isSignal: true, alias: "lineCount", required: false }] }], heights: [{ type: i0.Input, args: [{ isSignal: true, alias: "heights", required: false }] }], heightsChange: [{ type: i0.Output, args: ["heightsChange"] }] } });
+                        FeatureSetViewComponent,
+                        StepsMapComponent,
+                        BaseTextViewComponent,
+                        MatTooltip
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (result()) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    @if (versionTags().length) {\r\n    <mat-form-field>\r\n      <mat-label>stage</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        @for (t of versionTags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n    <!-- tag -->\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-form-field>\r\n    }\r\n    <!-- range picker -->\r\n    @if (selectionRange()) {\r\n    <div class=\"range\">\r\n      {{ selectionRange()!.at }}\u00D7{{ selectionRange()!.run }}\r\n    </div>\r\n    @if (!disabledRangePick()) {\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Pick this range for the edited operation\"\r\n      (click)=\"pickRange()\"\r\n      [disabled]=\"disabledRangePick()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">file_open</mat-icon>\r\n    </button>\r\n    } }\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        [colorCallback]=\"getCharColor\"\r\n        [hasLineNumber]=\"true\"\r\n        (charPick)=\"onTextCharPick($event)\"\r\n        (rangePick)=\"onTextRangePick($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;width:100%;box-sizing:border-box}.form-row-top>div{flex:1 1 0%;min-width:0}.range{color:silver;border:1px solid silver;border-radius:4px;padding:4px}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px;height:100%}div#bar{grid-area:bar}div#map{grid-area:map;min-height:0;overflow-y:auto}div#step{grid-area:step;min-height:0;display:grid;grid-template-rows:1fr auto;gap:8px}div#text{min-height:0;overflow-y:auto}div#feats{width:100%}.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$1.FormBuilder }], propDecorators: { result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], initialStepIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialStepIndex", required: false }] }], stepPick: [{ type: i0.Output, args: ["stepPick"] }], disabledRangePick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledRangePick", required: false }] }], rangePick: [{ type: i0.Output, args: ["rangePick"] }] } });
 
 /**
  * 🔑 `gve-snapshot-text-editor`
@@ -2961,9 +2455,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * - 🔥 `textChange` (`CharNode[]`): event emitted when text changes.
  */
 class SnapshotTextEditorComponent {
-    constructor(formBuilder, 
+    constructor(formBuilder, _snackbar, 
     // this component can be used as a dialog
     dialogRef, data) {
+        this._snackbar = _snackbar;
         this.dialogRef = dialogRef;
         this.data = data;
         this.text = model([], ...(ngDevMode ? [{ debugName: "text" }] : []));
@@ -2992,6 +2487,11 @@ class SnapshotTextEditorComponent {
     close() {
         this.dialogRef?.close();
     }
+    copyToClipboard() {
+        const json = JSON.stringify(GveBaseTextService.stringToBaseChars(this.userText.value));
+        navigator.clipboard.writeText(json);
+        this._snackbar.open('Copied JSON code to clipboard', undefined, { duration: 2000 });
+    }
     save() {
         if (this.form.invalid) {
             return;
@@ -3000,13 +2500,13 @@ class SnapshotTextEditorComponent {
         if (!this.userText.value) {
             return;
         }
-        this.text.set(SnapshotViewService.stringToBaseChars(this.userText.value));
+        this.text.set(GveBaseTextService.stringToBaseChars(this.userText.value));
         this.dialogRef?.close(this.text());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnapshotTextEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i3$3.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: SnapshotTextEditorComponent, isStandalone: true, selector: "gve-snapshot-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "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: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "21.0.0", ngImport: i0, type: SnapshotTextEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$3.MatSnackBar }, { token: i3$2.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: SnapshotTextEditorComponent, isStandalone: true, selector: "gve-snapshot-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "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 (\r\n              $any(userText).errors?.required &&\r\n              (userText.dirty || userText.touched)\r\n            ) {\r\n              <mat-error>text required</mat-error>\r\n            }\r\n            @if (\r\n              $any(userText).errors?.maxLength &&\r\n              (userText.dirty || userText.touched)\r\n            ) {\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=\"Copy JSON to clipboard\"\r\n          [disabled]=\"form.invalid\"\r\n          (click)=\"copyToClipboard()\"\r\n        >\r\n          JSON\r\n        </button>\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "20.3.10", ngImport: i0, type: SnapshotTextEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SnapshotTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-snapshot-text-editor', imports: [
                         ReactiveFormsModule,
@@ -3014,8 +2514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         MatFormFieldModule,
                         MatIconModule,
                         MatInputModule,
-                    ], 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"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i3$3.MatDialogRef, decorators: [{
+                    ], 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 (\r\n              $any(userText).errors?.required &&\r\n              (userText.dirty || userText.touched)\r\n            ) {\r\n              <mat-error>text required</mat-error>\r\n            }\r\n            @if (\r\n              $any(userText).errors?.maxLength &&\r\n              (userText.dirty || userText.touched)\r\n            ) {\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=\"Copy JSON to clipboard\"\r\n          [disabled]=\"form.invalid\"\r\n          (click)=\"copyToClipboard()\"\r\n        >\r\n          JSON\r\n        </button>\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"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2$3.MatSnackBar }, { type: i3$2.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -3047,6 +2547,12 @@ class SnapshotEditorComponent {
         this._dialogService = _dialogService;
         this._snackbar = _snackbar;
         this._nanoid = customAlphabet('1234567890abcdef', 10);
+        /**
+         * Reference to the snapshot rendition web component.
+         * Using viewChild signal to handle conditionally rendered element -
+         * the element only exists when result() is truthy.
+         */
+        this.renditionRef = viewChild('rendition', ...(ngDevMode ? [{ debugName: "renditionRef" }] : []));
         /**
          * The snapshot to edit.
          */
@@ -3073,24 +2579,24 @@ class SnapshotEditorComponent {
          */
         this.featureDefs = input(...(ngDevMode ? [undefined, { debugName: "featureDefs" }] : []));
         /**
-         * Definitions for element features, including names and values.
+         * The IDs of the features that are multi-valued. If a feature being
+         * edited is in this list, the feature editor will allow adding multiple
+         * values to it. Passed down to feature editors.
          */
-        this.elementFeatureDefs = input(...(ngDevMode ? [undefined, { debugName: "elementFeatureDefs" }] : []));
+        this.multiValuedFeatureIds = input(...(ngDevMode ? [undefined, { debugName: "multiValuedFeatureIds" }] : []));
         /**
-         * Definitions for diplomatic features, including names and values.
+         * Settings for rendering the snapshot. These are passed to the snapshot rendition
+         * component.
          */
-        this.diplomaticFeatureDefs = input(...(ngDevMode ? [undefined, { debugName: "diplomaticFeatureDefs" }] : []));
+        this.renditionSettings = input(DEFAULT_SETTINGS, ...(ngDevMode ? [{ debugName: "renditionSettings" }] : []));
         /**
          * Emitted when the user cancels the snapshot editing.
          */
         this.snapshotCancel = output();
         this.showChain = new FormControl(false, { nonNullable: true });
         this.featDetails = new FormControl(false, { nonNullable: true });
+        this.autoRun = new FormControl(true, { nonNullable: true });
         this.chain = signal(undefined, ...(ngDevMode ? [{ debugName: "chain" }] : []));
-        // list of operations output tags
-        this.opTags = signal([], ...(ngDevMode ? [{ debugName: "opTags" }] : []));
-        // list of operation diplomatic.g element IDs
-        this.opElementIds = signal([], ...(ngDevMode ? [{ debugName: "opElementIds" }] : []));
         // the currently picked base text range
         this.textRange = signal(undefined, ...(ngDevMode ? [{ debugName: "textRange" }] : []));
         // the lines count for the current base text
@@ -3111,68 +2617,23 @@ class SnapshotEditorComponent {
             6: 'swap',
             7: 'annotate',
         };
-        // snapshot view data
-        this.viewTitle = VIEW_TITLE;
-        this.rulers = true;
-        this.initialStepIndex = -1;
-        // general
-        this.width = new FormControl(800, { nonNullable: true });
-        this.height = new FormControl(600, { nonNullable: true });
-        this.style = new FormControl(null);
+        // operations execution result
+        this.result = signal(undefined, ...(ngDevMode ? [{ debugName: "result" }] : []));
+        this.resultOperationId = signal(undefined, ...(ngDevMode ? [{ debugName: "resultOperationId" }] : []));
+        this.initialStepIndex = signal(-1, ...(ngDevMode ? [{ debugName: "initialStepIndex" }] : []));
         // base text
         this.baseText = new FormControl([], {
             nonNullable: true,
             validators: [Validators.required],
         });
-        this.offsetX = new FormControl(0, { nonNullable: true });
-        this.offsetY = new FormControl(0, { nonNullable: true });
-        this.lineHeightOffset = new FormControl(DEFAULT_SVG_BASE_TEXT_OPTIONS.lineHeightOffset, { nonNullable: true });
-        this.lnHeights = new FormControl(null);
-        this.charSpacingOffset = new FormControl(0, { nonNullable: true });
-        this.spcWidthOffset = new FormControl(0, { nonNullable: true });
-        this.textStyle = new FormControl(null);
         // operations
         this.operations = new FormControl([], {
             nonNullable: true,
         });
-        this.opStyle = new FormControl(null);
-        // image
-        this.imageUrl = new FormControl(null);
-        this.imageOpacity = new FormControl(1, { nonNullable: true });
-        this.imageX = new FormControl(0, { nonNullable: true });
-        this.imageY = new FormControl(0, { nonNullable: true });
-        this.imageWidth = new FormControl(0, { nonNullable: true });
-        this.imageHeight = new FormControl(0, { nonNullable: true });
-        this.defs = new FormControl(null);
-        // timelines
-        this.timelines = new FormControl([], {
-            nonNullable: true,
-        });
         // form
         this.form = formBuilder.group({
-            width: this.width,
-            height: this.height,
-            style: this.style,
             baseText: this.baseText,
-            offsetX: this.offsetX,
-            offsetY: this.offsetY,
-            lineHeightOffset: this.lineHeightOffset,
-            lnHeights: this.lnHeights,
-            charSpacingOffset: this.charSpacingOffset,
-            spcWidthOffset: this.spcWidthOffset,
-            textStyle: this.textStyle,
             operations: this.operations,
-            opStyle: this.opStyle,
-            // image
-            imageUrl: this.imageUrl,
-            imageOpacity: this.imageOpacity,
-            imageX: this.imageX,
-            imageY: this.imageY,
-            imageWidth: this.imageWidth,
-            imageHeight: this.imageHeight,
-            defs: this.defs,
-            // timelines
-            timelines: this.timelines,
         });
         // when snapshot changes, update the form
         effect(() => {
@@ -3181,6 +2642,55 @@ class SnapshotEditorComponent {
                 this.runToLast();
             }, 0);
         });
+        // when rendition element becomes available (conditionally rendered),
+        // initialize its settings and event listeners
+        effect(() => {
+            const rendition = this.renditionRef()?.nativeElement;
+            if (rendition) {
+                this.initRendition(rendition);
+            }
+        });
+    }
+    /**
+     * Initialize rendition settings and event listeners when the element becomes available.
+     * Called via effect since the element is conditionally rendered.
+     */
+    initRendition(rendition) {
+        console.log('GveSnapshotRendition.version:', GveSnapshotRendition.version);
+        // set initial settings
+        this.applyRenditionSettings();
+        // listen to version change events
+        rendition.addEventListener('versionTagChange', (event) => {
+            const customEvent = event;
+            console.log('Version changed:', customEvent.detail);
+        });
+    }
+    /**
+     * Apply settings to the rendition component.
+     */
+    applyRenditionSettings() {
+        const rendition = this.renditionRef()?.nativeElement;
+        if (!rendition) {
+            return;
+        }
+        const settings = this.renditionSettings();
+        settings.debug = this.debug() || false;
+        rendition.settings = settings;
+    }
+    /**
+     * Update the snapshot rendition component with the current result data.
+     */
+    updateRendition() {
+        const rendition = this.renditionRef()?.nativeElement;
+        const result = this.result();
+        if (rendition && result) {
+            // update settings with latest rendition settings
+            this.applyRenditionSettings();
+            // supply the base text (not returned by API, must be provided by caller)
+            result.text = this.baseText.value;
+            // set data
+            rendition.data = result;
+        }
     }
     /**
      * Set the view data for the snapshot view.
@@ -3195,65 +2705,22 @@ class SnapshotEditorComponent {
         if (!snapshot) {
             snapshot = this.getSnapshot();
         }
-        // update view data
-        this.viewTitle = title;
-        this.visualInfo = undefined;
-        this.viewData = {
-            snapshot: snapshot,
-            options: {
-                debug: this.debug(),
-                delayedRender: true,
-                showRulers: true,
-                showGrid: true,
-                panZoom: true,
-                transparentIds: this._transparentIds,
-            },
-        };
-        console.log('view data: ', this.viewData);
     }
     updateForm(snapshot) {
-        this._transparentIds = undefined;
-        this.initialStepIndex = -1;
+        this.initialStepIndex.set(-1);
         if (!snapshot) {
             this.form.reset();
         }
         else {
-            this.width.setValue(snapshot.size.width);
-            this.height.setValue(snapshot.size.height);
-            this.style.setValue(snapshot.style || null);
-            this.imageUrl.setValue(snapshot.image?.url || null);
-            this.imageOpacity.setValue(snapshot.image?.opacity || 0);
-            this.imageX.setValue(snapshot.image?.canvas?.x || 0);
-            this.imageY.setValue(snapshot.image?.canvas?.y || 0);
-            this.imageWidth.setValue(snapshot.image?.canvas?.width || 0);
-            this.imageHeight.setValue(snapshot.image?.canvas?.height || 0);
-            this.defs.setValue(snapshot.defs || null);
             if (Array.isArray(snapshot.text)) {
                 this.baseText.setValue(snapshot.text);
             }
             else {
-                this.baseText.setValue(SnapshotViewService.stringToBaseChars(snapshot.text));
+                this.baseText.setValue(GveBaseTextService.stringToBaseChars(snapshot.text));
             }
-            this.offsetX.setValue(snapshot.textOptions?.offset?.x || 0);
-            this.offsetY.setValue(snapshot.textOptions?.offset?.y || 0);
-            this.lineHeightOffset.setValue(snapshot.textOptions?.lineHeightOffset);
-            this.lnHeights.setValue(snapshot.textOptions?.minLineHeights || null);
-            this.charSpacingOffset.setValue(snapshot.textOptions?.charSpacingOffset);
-            this.spcWidthOffset.setValue(snapshot.textOptions?.spcWidthOffset);
-            this.textStyle.setValue(snapshot.textStyle || null);
             this.operations.setValue(snapshot.operations);
-            this.opStyle.setValue(snapshot.opStyle || null);
-            // timelines
-            const timelines = [];
-            if (snapshot.timelines) {
-                for (let tag in snapshot.timelines) {
-                    timelines.push(snapshot.timelines[tag]);
-                }
-            }
-            this.timelines.setValue(timelines);
         }
         this.updateLineCount(this.baseText.value);
-        this.updateOpLists();
         this.form.markAsPristine();
     }
     // #region base text
@@ -3276,8 +2743,6 @@ class SnapshotEditorComponent {
                 this.updateLineCount(text);
                 // remove all operations and update the view data
                 this.removeAllOperations();
-                // remove all timelines
-                this.timelines.reset();
             }
         });
     }
@@ -3306,27 +2771,6 @@ class SnapshotEditorComponent {
     }
     // #endregion
     // #region operations
-    /**
-     * Update the lists of operation output tags and element IDs by collecting
-     * all the operation tags and the IDs of the elements in their diplomatic.g
-     * SVG code if any.
-     */
-    updateOpLists() {
-        const tags = new Set();
-        const ids = new Set();
-        let n = 0;
-        for (const op of this.operations.value) {
-            // output tag
-            n++;
-            tags.add(op.outputTag || `v${n}`);
-            // element IDs
-            if (op.diplomatics?.g) {
-                this.parseSvgIds(op.diplomatics.g)?.forEach((id) => ids.add(id));
-            }
-        }
-        this.opTags.set([...tags]);
-        this.opElementIds.set([...ids]);
-    }
     /**
      * Edit a new operation.
      */
@@ -3348,7 +2792,7 @@ class SnapshotEditorComponent {
      */
     editOperation(index) {
         this.editedOpIndex.set(index);
-        this.editedOp.set(deepCopy(this.operations.value[index]));
+        this.editedOp.set(structuredClone(this.operations.value[index]));
     }
     /**
      * Close the currently edited operation.
@@ -3389,10 +2833,10 @@ class SnapshotEditorComponent {
         this.operations.setValue(operations);
         this.operations.markAsDirty();
         this.operations.updateValueAndValidity();
-        // update the operation lists
-        this.updateOpLists();
-        // run to the edited operation
-        this.runTo(i);
+        // run to the edited operation if auto-run is enabled
+        if (this.autoRun.value) {
+            this.runTo(i);
+        }
         // close the edited operation
         this.closeEditedOperation();
     }
@@ -3410,8 +2854,8 @@ class SnapshotEditorComponent {
                     this.closeEditedOperation();
                 }
                 // reset the result operation ID if it is the one being deleted
-                if (this.resultOperationId === this.operations.value[index].id) {
-                    this.resultOperationId = undefined;
+                if (this.resultOperationId() === this.operations.value[index].id) {
+                    this.resultOperationId.set(undefined);
                 }
                 // delete the operation and update the form control
                 const operations = [...this.operations.value];
@@ -3419,8 +2863,6 @@ class SnapshotEditorComponent {
                 this.operations.setValue(operations);
                 this.operations.markAsDirty();
                 this.operations.updateValueAndValidity();
-                // update the operation lists
-                this.updateOpLists();
                 // update the view data
                 setTimeout(() => {
                     this.runToLast();
@@ -3428,6 +2870,58 @@ class SnapshotEditorComponent {
             }
         });
     }
+    /**
+     * Duplicate the operation at the specified index, inserting the copy
+     * immediately after the original.
+     * @param index The index of the operation to duplicate.
+     */
+    duplicateOperation(index) {
+        const operations = [...this.operations.value];
+        const clone = structuredClone(operations[index]);
+        clone.id = this._nanoid();
+        operations.splice(index + 1, 0, clone);
+        this.operations.setValue(operations);
+        this.operations.markAsDirty();
+        this.operations.updateValueAndValidity();
+    }
+    /**
+     * Move the operation at the specified index up by one position.
+     * @param index The index of the operation to move up.
+     */
+    moveOperationUp(index) {
+        if (index < 1) {
+            return;
+        }
+        const operations = [...this.operations.value];
+        const op = operations.splice(index, 1)[0];
+        operations.splice(index - 1, 0, op);
+        this.operations.setValue(operations);
+        this.operations.markAsDirty();
+        this.operations.updateValueAndValidity();
+    }
+    /**
+     * Move the operation at the specified index down by one position.
+     * @param index The index of the operation to move down.
+     */
+    moveOperationDown(index) {
+        const operations = [...this.operations.value];
+        if (index >= operations.length - 1) {
+            return;
+        }
+        const op = operations.splice(index, 1)[0];
+        operations.splice(index + 1, 0, op);
+        this.operations.setValue(operations);
+        this.operations.markAsDirty();
+        this.operations.updateValueAndValidity();
+    }
+    copyOperationsJson() {
+        const json = JSON.stringify(this.operations.value, null, 2);
+        navigator.clipboard.writeText(json).then(() => {
+            this._snackbar.open('Operations JSON copied to clipboard', 'OK', {
+                duration: 3000,
+            });
+        });
+    }
     /**
      * Parse the operations from their text and append them to the current
      * snapshot operations.
@@ -3446,8 +2940,6 @@ class SnapshotEditorComponent {
                 this.operations.setValue(operations);
                 this.operations.markAsDirty();
                 this.operations.updateValueAndValidity();
-                // update the operation lists
-                this.updateOpLists();
                 // update the view data
                 setTimeout(() => {
                     this.runToLast();
@@ -3459,15 +2951,13 @@ class SnapshotEditorComponent {
      * Remove all the operations, close the edited operation and update the view data.
      */
     removeAllOperations() {
-        this.resultOperationId = undefined;
+        this.resultOperationId.set(undefined);
         this.closeEditedOperation();
         this.operations.reset();
         this.operations.markAsDirty();
         this.operations.updateValueAndValidity();
-        this.opTags.set([]);
-        this.opElementIds.set([]);
         this.setViewData();
-        this.result = undefined;
+        this.result.set(undefined);
     }
     /**
      * Remove all the operations.
@@ -3591,16 +3081,10 @@ class SnapshotEditorComponent {
             snapshot.operations = snapshot.operations.slice(0, index + 1);
         }
         // update result operation ID
-        this.resultOperationId = snapshot.operations[index].id;
-        // extract the IDs from the last operation's diplomatics and filter
-        // them so that only the ones ending with _t are kept. By convention,
-        // all the IDs ending with this suffix are to be made invisible at
-        // their first rendition (opacity=0). An animation will then make
-        // them visible.
-        this._transparentIds = this.getTransparentIds(snapshot.operations[index].diplomatics?.g);
+        this.resultOperationId.set(snapshot.operations[index].id);
         // run the operations
         this.busy.set(true);
-        this.initialStepIndex = index;
+        this.initialStepIndex.set(index);
         this._api
             .runOperations(snapshot.text, snapshot.operations)
             .subscribe({
@@ -3612,7 +3096,9 @@ class SnapshotEditorComponent {
                 }
                 // set the result
                 console.log('result:', wrapper.result);
-                this.result = wrapper.result;
+                this.result.set(wrapper.result);
+                // update the rendition component
+                this.updateRendition();
                 // supply the last operation output tag from its result step if not set
                 if (!lastOperation.outputTag) {
                     const step = wrapper.result.steps.find((s) => s.operation.id === lastOperation.id);
@@ -3622,14 +3108,6 @@ class SnapshotEditorComponent {
                 this.supplyOpNodes(snapshot, wrapper.result, lastOperation.outputTag);
                 // update the view data
                 this.setViewData(snapshot, lastOperation.outputTag);
-                // play animation if any
-                const tl = this.timelines.value.find((t) => t.tag === lastOperation.outputTag);
-                if (tl) {
-                    // play the timeline
-                    setTimeout(() => {
-                        this.playTimeline(tl);
-                    }, 0);
-                }
                 // get the chain model if requested
                 if (this.showChain.value) {
                     this.getChainAt(index);
@@ -3637,7 +3115,6 @@ class SnapshotEditorComponent {
             },
             error: (error) => {
                 console.error(error);
-                this._transparentIds = undefined;
                 this._snackbar.open('Error running operations', 'OK');
             },
             complete: () => {
@@ -3656,7 +3133,7 @@ class SnapshotEditorComponent {
         }
         else {
             this.setViewData();
-            this.result = undefined;
+            this.result.set(undefined);
         }
     }
     getChainAt(index, lastOperation) {
@@ -3691,7 +3168,6 @@ class SnapshotEditorComponent {
             },
             error: (error) => {
                 console.error(error);
-                this._transparentIds = undefined;
                 this._snackbar.open('Error running operations', 'OK');
             },
             complete: () => {
@@ -3706,8 +3182,8 @@ class SnapshotEditorComponent {
      * @param operation The operation being previewed.
      */
     onOperationPreview(operation) {
-        // no multiple previews or previewing a new operation
-        if (this._previewing || this.editedOpIndex() < 0) {
+        // no multiple previews or previewing a new operation or auto-run disabled
+        if (this._previewing || this.editedOpIndex() < 0 || !this.autoRun.value) {
             return;
         }
         this._previewing = true;
@@ -3717,28 +3193,14 @@ class SnapshotEditorComponent {
         }, 0);
     }
     // #endregion
-    playTimeline(tl) {
-        const shadowRoot = this.snapshotView?.nativeElement?.shadowRoot;
-        if (tl && shadowRoot) {
-            console.log('play timeline', tl);
-            this._renderer?.playTimeline(tl, undefined, shadowRoot);
-        }
-        else {
-            if (!this.snapshotView) {
-                console.warn('no snapshotView for timeline');
-            }
-            else {
-                console.warn('no shadowRoot for timeline');
-            }
-        }
-    }
     /**
      * Handle the event fired by the chain result view to pick a step.
      *
      * @param step The step to pick.
      */
     onStepPick(step) {
-        if (!this.result || this._stepPickFrozen) {
+        const result = this.result();
+        if (!result || this._stepPickFrozen) {
             return;
         }
         // get base text snapshot
@@ -3749,87 +3211,11 @@ class SnapshotEditorComponent {
         // their visuals creep into the snapshot view
         snapshot.operations = snapshot.operations.slice(0, index + 1);
         // update result operation ID
-        this.resultOperationId = snapshot.operations[index].id;
-        // extract the IDs from the last operation's diplomatics and filter
-        // them so that only the ones ending with _t are kept. By convention,
-        // all the IDs ending with this suffix are to be made invisible at
-        // their first rendition (opacity=0). An animation will then make
-        // them visible.
-        this._transparentIds = this.getTransparentIds(snapshot.operations[index].diplomatics?.g);
+        this.resultOperationId.set(snapshot.operations[index].id);
         // update the snapshot text nodes with those introduced by operations
-        this.supplyOpNodes(snapshot, this.result, step.outputTag);
+        this.supplyOpNodes(snapshot, result, step.outputTag);
         // update the view data
         this.setViewData(snapshot, step.outputTag);
-        // play animation if any
-        const tl = this.timelines.value.find((t) => t.tag === step.outputTag);
-        if (tl) {
-            // play the timeline
-            setTimeout(() => {
-                this.playTimeline(tl);
-            }, 0);
-        }
-    }
-    /**
-     * Handle the event fired by a visual in the snapshot view.
-     *
-     * @param event The event.
-     */
-    onVisualEvent(event) {
-        if (this._handlingOver) {
-            return;
-        }
-        const d = event.detail;
-        if (d.event.type === 'mouseover') {
-            const visual = d.source;
-            if (visual.id === this._lastOverId) {
-                return;
-            }
-            this._handlingOver = true;
-            const sb = [];
-            // id (type)
-            sb.push('#' + visual.id);
-            sb.push(` (${visual.type})`);
-            // : label and features
-            if (visual.data?.label) {
-                sb.push(': ');
-                sb.push(visual.data.label);
-            }
-            if (visual.data?.features?.length) {
-                sb.push(' ');
-                sb.push(visual.data.features
-                    .map((f) => `${f.name}=${f.value}`)
-                    .join('\n'));
-            }
-            // (@x,y width×height)
-            sb.push(` (@${visual.x.toFixed(1)},${visual.y.toFixed(1)} ` +
-                `◻${visual.width.toFixed(1)}×${visual.height.toFixed(1)})`);
-            this.visualInfo = sb.join('');
-            this._lastOverId = visual.id;
-        }
-        this._handlingOver = false;
-    }
-    /**
-     * Handle the change of line heights by updating the form control.
-     *
-     * @param heights The line heights.
-     */
-    onHeightsChange(heights) {
-        this.lnHeights.setValue(heights || null);
-        this.lnHeights.markAsDirty();
-        this.lnHeights.updateValueAndValidity();
-    }
-    /**
-     * Handle the change of timelines by updating the form control.
-     *
-     * @param timelines The timelines.
-     */
-    onTimelinesChange(timelines) {
-        if (!timelines) {
-            return;
-        }
-        this.timelines.setValue(timelines);
-        this.timelines.markAsDirty();
-        this.timelines.updateValueAndValidity();
     }
     /**
      * Emit the cancel event for this snapshot edit.
@@ -3837,73 +3223,6 @@ class SnapshotEditorComponent {
     close() {
         this.snapshotCancel.emit();
     }
-    /**
-     * Handle the render event from the snapshot view to get a reference
-     * to the renderer.
-     *
-     * @param event The rendition event.
-     */
-    onSnapshotRender(event) {
-        this._renderer = event.detail.renderer;
-    }
-    onImageLoad(imageElement) {
-        const size = {
-            width: imageElement.naturalWidth,
-            height: imageElement.naturalHeight,
-        };
-        if (!this.imageWidth.value) {
-            this.imageWidth.setValue(size.width);
-            this.imageWidth.updateValueAndValidity();
-            this.imageWidth.markAsDirty();
-        }
-        if (!this.imageHeight.value) {
-            this.imageHeight.setValue(size.height);
-            this.imageHeight.updateValueAndValidity();
-            this.imageHeight.markAsDirty();
-        }
-    }
-    onImageOpacityChange(value) {
-        this.imageOpacity.setValue(value);
-        this.imageOpacity.updateValueAndValidity();
-        this.imageOpacity.markAsDirty();
-        if (this._renderer) {
-            this._renderer.setImageOpacity(value);
-        }
-    }
-    resetImgMetadata() {
-        this.imageX.reset();
-        this.imageY.reset();
-        this.imageWidth.reset();
-        this.imageHeight.reset();
-    }
-    /**
-     * Toggle rulers in the snapshot view.
-     */
-    toggleRulers() {
-        if (!this._renderer) {
-            return;
-        }
-        this.rulers = this._renderer.toggleRulers();
-    }
-    defaultCharDecorator(char, lineNumber, x, y) {
-        const features = char.features;
-        const segOut = features?.find((f) => f.name === '$seg-out');
-        const seg2Out = features?.find((f) => f.name === '$seg2-out');
-        const segIn = features?.find((f) => f.name === '$seg-in');
-        const seg2In = features?.find((f) => f.name === '$seg2-in');
-        if (!segOut && !seg2Out && !segIn && !seg2In) {
-            return null;
-        }
-        const decoration = {};
-        if (segOut || seg2Out) {
-            decoration.fill = segOut ? '#9B2915' : '#9B6F91';
-        }
-        // if (segIn || seg2In) {
-        //   decoration.stroke = segIn ? '#E9B44C' : '#DF928E';
-        //   decoration.strokeWidth = 3;
-        // }
-        return decoration;
-    }
     /**
      * Get a snapshot from the form data.
      *
@@ -3911,61 +3230,11 @@ class SnapshotEditorComponent {
      */
     getSnapshot() {
         const snapshot = {
-            size: {
-                width: this.width.value,
-                height: this.height.value,
-            },
-            style: this.style.value || undefined,
-            defs: this.defs.value || undefined,
             // snapshot nodes might be changed, so we copy them
             // to avoid changing the original snapshot
-            text: deepCopy(this.baseText.value),
-            textStyle: this.textStyle.value || undefined,
-            textOptions: {
-                lineHeightOffset: this.lineHeightOffset.value,
-                minLineHeights: this.lnHeights.value || undefined,
-                charSpacingOffset: this.charSpacingOffset.value,
-                spcWidthOffset: this.spcWidthOffset.value,
-                offset: {
-                    x: this.offsetX.value,
-                    y: this.offsetY.value,
-                },
-            },
-            operations: [...this.operations.value],
-            opStyle: this.opStyle.value || undefined,
+            text: structuredClone(this.baseText.value),
+            operations: structuredClone(this.operations.value),
         };
-        // add char decoration unless opted out
-        if (!this.noDecoration()) {
-            snapshot.textOptions.charDecorator = this.defaultCharDecorator;
-        }
-        // image
-        if (this.imageUrl.value) {
-            snapshot.image = {
-                url: this.imageUrl.value,
-                opacity: this.imageOpacity.value || undefined,
-            };
-            if (this.imageX.value ||
-                this.imageY.value ||
-                this.imageWidth.value ||
-                this.imageHeight.value) {
-                snapshot.image.canvas = {
-                    x: this.imageX.value,
-                    y: this.imageY.value,
-                    width: this.imageWidth.value,
-                    height: this.imageHeight.value,
-                };
-            }
-        }
-        // timelines
-        if (this.timelines.value.length) {
-            snapshot.timelines = {};
-            this.timelines.value.forEach((t) => {
-                snapshot.timelines[t.tag] = t;
-            });
-        }
-        else {
-            snapshot.timelines = undefined;
-        }
         return snapshot;
     }
     /**
@@ -3978,10 +3247,10 @@ class SnapshotEditorComponent {
         }
         this.snapshot.set(this.getSnapshot());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnapshotEditorComponent, deps: [{ token: i1.FormBuilder }, { token: GveApiService }, { token: i3$3.MatDialog }, { token: i4$1.DialogService }, { token: i4$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 }, noDecoration: { classPropertyName: "noDecoration", publicName: "noDecoration", isSignal: true, isRequired: false, transformFunction: null }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, elementFeatureDefs: { classPropertyName: "elementFeatureDefs", publicName: "elementFeatureDefs", isSignal: true, isRequired: false, transformFunction: null }, diplomaticFeatureDefs: { classPropertyName: "diplomaticFeatureDefs", publicName: "diplomaticFeatureDefs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { snapshot: "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\"\r\n            >{{ textRange()!.at }}\u00D7{{ textRange()!.run }}</span\r\n          >\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-slide-toggle [formControl]=\"showChain\"\r\n              >show chain</mat-slide-toggle\r\n            >\r\n\r\n            <!-- feat details -->\r\n            <mat-slide-toggle [formControl]=\"featDetails\"\r\n              >feat. details</mat-slide-toggle\r\n            >\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                [class.selected]=\"operation.id === resultOperationId\"\r\n                [class.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>\r\n                  @if (operation.features?.length) { @if (featDetails.value) {\r\n                  <div class=\"form-row\">\r\n                    @for (feat of operation.features; track $index; let\r\n                    i=$index) {\r\n                    <div class=\"feature\">\r\n                      <span class=\"fname\">{{\r\n                        feat.name\r\n                          | flatLookup : featureDefs()?.names : \"id\" : \"label\"\r\n                      }}</span\r\n                      >=<span\r\n                        class=\"fvalue\"\r\n                        >{{ feat.value | flatLookup:(featureDefs()?.values?.[feat.name]): \"id\" : \"label\" }}</span\r\n                      >\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                  } @else {\r\n                  {{ operation.features?.length }}\r\n                  } }\r\n                </td>\r\n              </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          @if (editedOp()) {\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                [featureDefs]=\"featureDefs()\"\r\n                [elementFeatureDefs]=\"elementFeatureDefs()\"\r\n                [diplomaticFeatureDefs]=\"diplomaticFeatureDefs()\"\r\n                [hidePreview]=\"editedOpIndex() === -1\"\r\n                [operation]=\"editedOp()\"\r\n                [rangePatch]=\"editedOpRangePatch()\"\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\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    @if (busy()) {\r\n    <mat-progress-bar mode=\"indeterminate\" />\r\n    }\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      [disabledRangePick]=\"editedOp() ? false : true\"\r\n      (stepPick)=\"onStepPick($event)\"\r\n      (rangePick)=\"onRangePick($event, true)\"\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}.feature,.fname{color:silver}.fvalue{color:#fff;background-color:#b5bdc9;padding:2px 4px;border-radius:4px}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: "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: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: i7$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: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i12.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i13.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i13.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i14.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i14.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i14.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: i7.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", "featureDefs", "elementFeatureDefs", "diplomaticFeatureDefs", "rangePatch"], outputs: ["operationChange", "operationPreview", "operationCancel"] }, { kind: "component", type: ChainResultViewComponent, selector: "gve-chain-result-view", inputs: ["result", "initialStepIndex", "disabledRangePick"], outputs: ["stepPick", "rangePick"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "hasLineNumber", "text", "colorCallback", "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: "component", type: ChainViewComponent, selector: "gve-chain-view", inputs: ["chain", "direction", "selectedTags"], outputs: ["selectedTagsChange"] }, { kind: "pipe", type: i16.DecimalPipe, name: "number" }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SnapshotEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: GveApiService }, { token: i3$2.MatDialog }, { token: i4$1.DialogService }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 }, noDecoration: { classPropertyName: "noDecoration", publicName: "noDecoration", isSignal: true, isRequired: false, transformFunction: null }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, renditionSettings: { classPropertyName: "renditionSettings", publicName: "renditionSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { snapshot: "snapshotChange", snapshotCancel: "snapshotCancel" }, viewQueries: [{ propertyName: "renditionRef", first: true, predicate: ["rendition"], descendants: true, isSignal: 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\"\r\n              >{{ textRange()!.at }}\u00D7{{ textRange()!.run }}</span\r\n            >\r\n          }\r\n        </div>\r\n\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            <!-- feat details -->\r\n            <mat-slide-toggle [formControl]=\"featDetails\"\r\n              >feat. details</mat-slide-toggle\r\n            >\r\n            <!-- auto run on edit -->\r\n            <mat-slide-toggle [formControl]=\"autoRun\"\r\n              >auto-run</mat-slide-toggle\r\n            >\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- copy ops JSON -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy operations as JSON to clipboard\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"copyOperationsJson()\"\r\n              >\r\n                <mat-icon>content_copy</mat-icon>\r\n              </button>\r\n\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 (\r\n                  operation of operations.value;\r\n                  track operation.id;\r\n                  let index = $index\r\n                ) {\r\n                  <tr\r\n                    [class.selected]=\"operation.id === resultOperationId()\"\r\n                    [class.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                      <!-- duplicate -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"duplicateOperation(index)\"\r\n                        matTooltip=\"Duplicate operation\"\r\n                      >\r\n                        <mat-icon>control_point_duplicate</mat-icon>\r\n                      </button>\r\n                      <!-- move up -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationUp(index)\"\r\n                        matTooltip=\"Move operation up\"\r\n                        [disabled]=\"index === 0\"\r\n                      >\r\n                        <mat-icon>arrow_circle_up</mat-icon>\r\n                      </button>\r\n                      <!-- move down -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationDown(index)\"\r\n                        matTooltip=\"Move operation down\"\r\n                        [disabled]=\"index === operations.value.length - 1\"\r\n                      >\r\n                        <mat-icon>arrow_circle_down</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>\r\n                      @if (operation.features?.length) {\r\n                        @if (featDetails.value) {\r\n                          <div class=\"form-row\">\r\n                            @for (\r\n                              feat of operation.features;\r\n                              track $index;\r\n                              let i = $index\r\n                            ) {\r\n                              <div class=\"feature\">\r\n                                <span class=\"fname\">{{\r\n                                  feat.name\r\n                                    | flatLookup\r\n                                      : featureDefs()?.names\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : featureDefs()?.values?.[feat.name]\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span>\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          {{ operation.features?.length }}\r\n                        }\r\n                      }\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          @if (editedOp()) {\r\n            <mat-expansion-panel\r\n              [expanded]=\"editedOp()\"\r\n              [disabled]=\"!editedOp()\"\r\n            >\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title\r\n                  >operation {{ editedOp()?.id }}</mat-panel-title\r\n                >\r\n              </mat-expansion-panel-header>\r\n              <fieldset>\r\n                <gve-chain-operation-editor\r\n                  [featureDefs]=\"featureDefs()\"\r\n                  [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                  [hidePreview]=\"editedOpIndex() === -1\"\r\n                  [operation]=\"editedOp()\"\r\n                  [rangePatch]=\"editedOpRangePatch()\"\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        </div>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div>\r\n    @if (busy()) {\r\n      <mat-progress-bar mode=\"indeterminate\" />\r\n    }\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        [disabledRangePick]=\"editedOp() ? false : true\"\r\n        (stepPick)=\"onStepPick($event)\"\r\n        (rangePick)=\"onRangePick($event, true)\"\r\n      />\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  @if (result()) {\r\n    <div id=\"preview\">\r\n      <gve-snapshot-rendition #rendition class=\"rendition\">\r\n      </gve-snapshot-rendition>\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}#result{max-height:800px;overflow:auto}#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}.feature,.fname{color:silver}.fvalue{color:#fff;background-color:#b5bdc9;padding:2px 4px;border-radius:4px}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}#preview{margin:8px 0}.rendition{display:block;width:100%;min-height:600px;max-height:80vh;border:1px solid #ccc;overflow:auto}@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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i10.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.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: i6.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", "featureDefs", "rangePatch", "multiValuedFeatureIds"], outputs: ["operationChange", "operationPreview", "operationCancel"] }, { kind: "component", type: ChainResultViewComponent, selector: "gve-chain-result-view", inputs: ["result", "initialStepIndex", "disabledRangePick"], outputs: ["stepPick", "rangePick"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnapshotEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SnapshotEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-snapshot-editor', imports: [
                         CommonModule,
@@ -4003,15 +3272,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         ChainOperationEditorComponent,
                         ChainResultViewComponent,
                         BaseTextViewComponent,
-                        LnHeightsEditorComponent,
-                        AnimationTimelineSetComponent,
                         FlatLookupPipe,
-                        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\"\r\n            >{{ textRange()!.at }}\u00D7{{ textRange()!.run }}</span\r\n          >\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-slide-toggle [formControl]=\"showChain\"\r\n              >show chain</mat-slide-toggle\r\n            >\r\n\r\n            <!-- feat details -->\r\n            <mat-slide-toggle [formControl]=\"featDetails\"\r\n              >feat. details</mat-slide-toggle\r\n            >\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                [class.selected]=\"operation.id === resultOperationId\"\r\n                [class.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>\r\n                  @if (operation.features?.length) { @if (featDetails.value) {\r\n                  <div class=\"form-row\">\r\n                    @for (feat of operation.features; track $index; let\r\n                    i=$index) {\r\n                    <div class=\"feature\">\r\n                      <span class=\"fname\">{{\r\n                        feat.name\r\n                          | flatLookup : featureDefs()?.names : \"id\" : \"label\"\r\n                      }}</span\r\n                      >=<span\r\n                        class=\"fvalue\"\r\n                        >{{ feat.value | flatLookup:(featureDefs()?.values?.[feat.name]): \"id\" : \"label\" }}</span\r\n                      >\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                  } @else {\r\n                  {{ operation.features?.length }}\r\n                  } }\r\n                </td>\r\n              </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          @if (editedOp()) {\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                [featureDefs]=\"featureDefs()\"\r\n                [elementFeatureDefs]=\"elementFeatureDefs()\"\r\n                [diplomaticFeatureDefs]=\"diplomaticFeatureDefs()\"\r\n                [hidePreview]=\"editedOpIndex() === -1\"\r\n                [operation]=\"editedOp()\"\r\n                [rangePatch]=\"editedOpRangePatch()\"\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\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    @if (busy()) {\r\n    <mat-progress-bar mode=\"indeterminate\" />\r\n    }\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      [disabledRangePick]=\"editedOp() ? false : true\"\r\n      (stepPick)=\"onStepPick($event)\"\r\n      (rangePick)=\"onRangePick($event, true)\"\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}.feature,.fname{color:silver}.fvalue{color:#fff;background-color:#b5bdc9;padding:2px 4px;border-radius:4px}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$3.MatDialog }, { type: i4$1.DialogService }, { type: i4$2.MatSnackBar }], propDecorators: { snapshotView: [{
-                type: ViewChild,
-                args: ['snapshotView', { static: false }]
-            }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }, { type: i0.Output, args: ["snapshotChange"] }], batchOps: [{ type: i0.Input, args: [{ isSignal: true, alias: "batchOps", required: false }] }], noSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSave", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], noDecoration: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDecoration", required: false }] }], featureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureDefs", required: false }] }], elementFeatureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementFeatureDefs", required: false }] }], diplomaticFeatureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "diplomaticFeatureDefs", required: false }] }], snapshotCancel: [{ type: i0.Output, args: ["snapshotCancel"] }] } });
+                    ], 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\"\r\n              >{{ textRange()!.at }}\u00D7{{ textRange()!.run }}</span\r\n            >\r\n          }\r\n        </div>\r\n\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            <!-- feat details -->\r\n            <mat-slide-toggle [formControl]=\"featDetails\"\r\n              >feat. details</mat-slide-toggle\r\n            >\r\n            <!-- auto run on edit -->\r\n            <mat-slide-toggle [formControl]=\"autoRun\"\r\n              >auto-run</mat-slide-toggle\r\n            >\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- copy ops JSON -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy operations as JSON to clipboard\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"copyOperationsJson()\"\r\n              >\r\n                <mat-icon>content_copy</mat-icon>\r\n              </button>\r\n\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 (\r\n                  operation of operations.value;\r\n                  track operation.id;\r\n                  let index = $index\r\n                ) {\r\n                  <tr\r\n                    [class.selected]=\"operation.id === resultOperationId()\"\r\n                    [class.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                      <!-- duplicate -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"duplicateOperation(index)\"\r\n                        matTooltip=\"Duplicate operation\"\r\n                      >\r\n                        <mat-icon>control_point_duplicate</mat-icon>\r\n                      </button>\r\n                      <!-- move up -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationUp(index)\"\r\n                        matTooltip=\"Move operation up\"\r\n                        [disabled]=\"index === 0\"\r\n                      >\r\n                        <mat-icon>arrow_circle_up</mat-icon>\r\n                      </button>\r\n                      <!-- move down -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationDown(index)\"\r\n                        matTooltip=\"Move operation down\"\r\n                        [disabled]=\"index === operations.value.length - 1\"\r\n                      >\r\n                        <mat-icon>arrow_circle_down</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>\r\n                      @if (operation.features?.length) {\r\n                        @if (featDetails.value) {\r\n                          <div class=\"form-row\">\r\n                            @for (\r\n                              feat of operation.features;\r\n                              track $index;\r\n                              let i = $index\r\n                            ) {\r\n                              <div class=\"feature\">\r\n                                <span class=\"fname\">{{\r\n                                  feat.name\r\n                                    | flatLookup\r\n                                      : featureDefs()?.names\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : featureDefs()?.values?.[feat.name]\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span>\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          {{ operation.features?.length }}\r\n                        }\r\n                      }\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          @if (editedOp()) {\r\n            <mat-expansion-panel\r\n              [expanded]=\"editedOp()\"\r\n              [disabled]=\"!editedOp()\"\r\n            >\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title\r\n                  >operation {{ editedOp()?.id }}</mat-panel-title\r\n                >\r\n              </mat-expansion-panel-header>\r\n              <fieldset>\r\n                <gve-chain-operation-editor\r\n                  [featureDefs]=\"featureDefs()\"\r\n                  [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                  [hidePreview]=\"editedOpIndex() === -1\"\r\n                  [operation]=\"editedOp()\"\r\n                  [rangePatch]=\"editedOpRangePatch()\"\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        </div>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div>\r\n    @if (busy()) {\r\n      <mat-progress-bar mode=\"indeterminate\" />\r\n    }\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        [disabledRangePick]=\"editedOp() ? false : true\"\r\n        (stepPick)=\"onStepPick($event)\"\r\n        (rangePick)=\"onRangePick($event, true)\"\r\n      />\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  @if (result()) {\r\n    <div id=\"preview\">\r\n      <gve-snapshot-rendition #rendition class=\"rendition\">\r\n      </gve-snapshot-rendition>\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}#result{max-height:800px;overflow:auto}#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}.feature,.fname{color:silver}.fvalue{color:#fff;background-color:#b5bdc9;padding:2px 4px;border-radius:4px}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}#preview{margin:8px 0}.rendition{display:block;width:100%;min-height:600px;max-height:80vh;border:1px solid #ccc;overflow:auto}@media only screen and (max-width:959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: GveApiService }, { type: i3$2.MatDialog }, { type: i4$1.DialogService }, { type: i2$3.MatSnackBar }], propDecorators: { renditionRef: [{ type: i0.ViewChild, args: ['rendition', { isSignal: true }] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }, { type: i0.Output, args: ["snapshotChange"] }], batchOps: [{ type: i0.Input, args: [{ isSignal: true, alias: "batchOps", required: false }] }], noSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSave", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], noDecoration: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDecoration", required: false }] }], featureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureDefs", required: false }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], renditionSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "renditionSettings", required: false }] }], snapshotCancel: [{ type: i0.Output, args: ["snapshotCancel"] }] } });
+
+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) => {
+            // note that in label we must escape the double quotes
+            sb.push(`  ${node.id} [label="${node.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: "21.0.0", ngImport: i0, type: GveGraphvizService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GveGraphvizService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GveGraphvizService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 /*
  * Public API Surface of gve-core
@@ -4021,5 +3399,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationTimelineComponent, AnimationTimelineSetComponent, AnimationTweenComponent, BaseTextCharComponent, BaseTextEditorComponent, BaseTextViewComponent, BatchOperationEditorComponent, ChainOperationEditorComponent, ChainResultViewComponent, ChainViewComponent, FeatureEditorComponent, FeatureSetEditorComponent, FeatureSetViewComponent, GveApiService, GveGraphvizService, LnHeightsEditorComponent, OperationSourceEditorComponent, SettingsService, SnapshotEditorComponent, SnapshotTextEditorComponent, StepsMapComponent };
+export { BaseTextCharComponent, BaseTextEditorComponent, BaseTextViewComponent, BatchOperationEditorComponent, ChainOperationEditorComponent, ChainResultViewComponent, FeatureEditorComponent, FeatureSetEditorComponent, FeatureSetPolicy, FeatureSetViewComponent, GveApiService, GveBaseTextService, GveGraphvizService, OperationSourceEditorComponent, OperationType, SettingsService, SnapshotEditorComponent, SnapshotTextEditorComponent, StepsMapComponent };
 //# sourceMappingURL=myrmidon-gve-core.mjs.map