@myrmidon/gve-core 0.0.1

package/fesm2022/myrmidon-gve-core.mjs

@@ -0,0 +1,2592 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, Injectable, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i13 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i10 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$1 from '@myrmidon/ng-tools';
+import { NgToolsValidators, NgToolsModule, deepCopy } from '@myrmidon/ng-tools';
+import { GveAnimationTweenType, SnapshotViewService, FeatureSetPolicy, OperationType, DEFAULT_SVG_BASE_TEXT_OPTIONS } from '@myrmidon/gve-snapshot-view';
+import { debounceTime, distinctUntilChanged, catchError } from 'rxjs';
+import * as i9 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import * as i2$2 from '@myrmidon/ng-mat-tools';
+import { NgMatToolsModule } from '@myrmidon/ng-mat-tools';
+import { filter, debounceTime as debounceTime$1 } from 'rxjs/operators';
+import * as i2$3 from '@angular/cdk/clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import * as i15 from '@cisstech/nge/monaco';
+import { NgeMonacoModule } from '@cisstech/nge/monaco';
+import { customAlphabet } from 'nanoid';
+import * as i7 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i12 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i4$3 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i1$1 from '@angular/common/http';
+
+class AnimationVarsComponent {
+    get vars() {
+        return this._vars;
+    }
+    set vars(value) {
+        if (this._vars === value) {
+            return;
+        }
+        this._vars = value;
+        this.updateForm(value);
+    }
+    constructor(formBuilder) {
+        this._vars = {};
+        this.varsChange = new EventEmitter();
+        this.editedVars = [];
+        this.name = formBuilder.control('', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(100)],
+        });
+        this.value = formBuilder.control('', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(1000)],
+        });
+        this.form = formBuilder.group({
+            name: this.name,
+            value: this.value,
+        });
+    }
+    updateForm(vars) {
+        this.editedVars = Object.entries(vars)
+            .map(([name, value]) => ({ name, value }))
+            .sort((a, b) => a.name.localeCompare(b.name));
+    }
+    getVars() {
+        return this.editedVars.reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {});
+    }
+    addVar() {
+        this.form.reset();
+        // focus the name input
+        setTimeout(() => this.nameInput?.nativeElement.focus(), 0);
+    }
+    editVar(index) {
+        const { name, value } = this.editedVars[index];
+        this.form.setValue({ name, value });
+        this.form.markAsPristine();
+        // focus the name input
+        setTimeout(() => this.nameInput?.nativeElement.focus(), 0);
+    }
+    deleteVar(index) {
+        this.editedVars = this.editedVars.filter((_, i) => i !== index);
+        this.varsChange.emit(this.getVars());
+    }
+    parseValue(value) {
+        if (!value) {
+            return '';
+        }
+        if (value === 'true') {
+            return true;
+        }
+        else if (value === 'false') {
+            return false;
+        }
+        else if (/^\d+$/.test(value)) {
+            return parseInt(value, 10);
+        }
+        else if (/^\d+\.\d+$/.test(value)) {
+            return parseFloat(value);
+        }
+        return value;
+    }
+    saveVar() {
+        if (this.form.invalid) {
+            return;
+        }
+        const { name, value } = this.form.value;
+        // parse value assuming that if it looks like a boolean/number
+        // its value should be a boolean/number rather than a string
+        const v = this.parseValue(value);
+        const editedVars = [...this.editedVars];
+        // if name already exists, update the value; else add it
+        const existingIndex = this.editedVars.findIndex((vr) => vr.name === name);
+        if (existingIndex !== -1) {
+            editedVars[existingIndex] = { name, value: v };
+            this.editedVars = editedVars;
+            return;
+        }
+        else {
+            editedVars.push({ name, value: v });
+            this.editedVars = editedVars.sort((a, b) => a.name.localeCompare(b.name));
+        }
+        this.varsChange.emit(this.getVars());
+        setTimeout(() => {
+            this.nameInput?.nativeElement.focus();
+            this.form.reset();
+            this.form.markAsPristine();
+            this.form.updateValueAndValidity();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: AnimationVarsComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: AnimationVarsComponent, isStandalone: true, selector: "gve-animation-vars", inputs: { vars: "vars" }, outputs: { varsChange: "varsChange" }, viewQueries: [{ propertyName: "nameInput", first: true, predicate: ["vname"], descendants: true, static: true }], ngImport: i0, template: "<div>\r\n  <div>\r\n    <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"addVar()\">\r\n      <mat-icon>add</mat-icon>\r\n      property\r\n    </button>\r\n  </div>\r\n\r\n  @if (editedVars.length) {\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>name</th>\r\n        <th>value</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (v of editedVars; track v.name; let index=$index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            color=\"primary\"\r\n            (click)=\"editVar(index)\"\r\n            matTooltip=\"Edit this property\"\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            (click)=\"deleteVar(index)\"\r\n            matTooltip=\"Delete this property\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>{{ v.name }}</td>\r\n        <td>{{ v.value }}</td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  } @else {\r\n  <p class=\"muted\">(no vars)</p>\r\n  }\r\n\r\n  <form [formGroup]=\"form\" (submit)=\"saveVar()\">\r\n    <fieldset>\r\n      <div class=\"form-row\">\r\n        <!-- name -->\r\n        <mat-form-field>\r\n          <mat-label>name</mat-label>\r\n          <input matInput [formControl]=\"name\" #vname />\r\n          <mat-error\r\n            *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n            >name required</mat-error\r\n          >\r\n          <mat-error\r\n            *ngIf=\"$any(name).errors?.maxLength && (name.dirty || name.touched)\"\r\n            >name too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- value -->\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            \"\r\n            >value required</mat-error\r\n          >\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(value).errors?.maxLength && (value.dirty || value.touched)\r\n            \"\r\n            >value too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <button\r\n          type=\"submit\"\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          [disabled]=\"form.invalid\"\r\n        >\r\n          <mat-icon class=\"mat-primary\">add_circle</mat-icon>\r\n        </button>\r\n      </div>\r\n    </fieldset>\r\n  </form>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}fieldset{border:1px solid silver;border-radius:4px;padding:8px;margin:8px 0}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: AnimationVarsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-animation-vars', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                    ], template: "<div>\r\n  <div>\r\n    <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"addVar()\">\r\n      <mat-icon>add</mat-icon>\r\n      property\r\n    </button>\r\n  </div>\r\n\r\n  @if (editedVars.length) {\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>name</th>\r\n        <th>value</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (v of editedVars; track v.name; let index=$index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            color=\"primary\"\r\n            (click)=\"editVar(index)\"\r\n            matTooltip=\"Edit this property\"\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            (click)=\"deleteVar(index)\"\r\n            matTooltip=\"Delete this property\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>{{ v.name }}</td>\r\n        <td>{{ v.value }}</td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  } @else {\r\n  <p class=\"muted\">(no vars)</p>\r\n  }\r\n\r\n  <form [formGroup]=\"form\" (submit)=\"saveVar()\">\r\n    <fieldset>\r\n      <div class=\"form-row\">\r\n        <!-- name -->\r\n        <mat-form-field>\r\n          <mat-label>name</mat-label>\r\n          <input matInput [formControl]=\"name\" #vname />\r\n          <mat-error\r\n            *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n            >name required</mat-error\r\n          >\r\n          <mat-error\r\n            *ngIf=\"$any(name).errors?.maxLength && (name.dirty || name.touched)\"\r\n            >name too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- value -->\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            \"\r\n            >value required</mat-error\r\n          >\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(value).errors?.maxLength && (value.dirty || value.touched)\r\n            \"\r\n            >value too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <button\r\n          type=\"submit\"\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          [disabled]=\"form.invalid\"\r\n        >\r\n          <mat-icon class=\"mat-primary\">add_circle</mat-icon>\r\n        </button>\r\n      </div>\r\n    </fieldset>\r\n  </form>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}fieldset{border:1px solid silver;border-radius:4px;padding:8px;margin:8px 0}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { vars: [{
+                type: Input
+            }], varsChange: [{
+                type: Output
+            }], nameInput: [{
+                type: ViewChild,
+                args: ['vname', { static: true }]
+            }] } });
+
+/**
+ * A component to edit an animation tween.
+ */
+class AnimationTweenComponent {
+    /**
+     * The tween to edit.
+     */
+    get tween() {
+        return this._tween;
+    }
+    set tween(value) {
+        if (this._tween === value) {
+            return;
+        }
+        this._tween = value || undefined;
+        this.updateForm(this._tween);
+    }
+    constructor(formBuilder) {
+        this.tweenChange = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.types = [
+            { label: 'to', value: 0 },
+            { label: 'from', value: 1 },
+            { label: 'fromTo', value: 2 },
+        ];
+        this.label = formBuilder.control('', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(100)],
+        });
+        this.note = formBuilder.control(null);
+        this.type = formBuilder.control(0, { nonNullable: true });
+        this.selector = formBuilder.control('', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(200)],
+        });
+        this.vars = formBuilder.control({}, { nonNullable: true });
+        this.vars2 = formBuilder.control(null);
+        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);
+    }
+    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.cancel.emit();
+    }
+    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: Object.keys(this.vars.value).length === 0 ? undefined : this.vars.value,
+            vars2: this.vars2.value && Object.keys(this.vars2.value).length === 0
+                ? undefined
+                : this.vars2.value || undefined,
+            position: this.position.value?.trim() || undefined,
+        };
+    }
+    save() {
+        if (!this.form.valid) {
+            return;
+        }
+        this._tween = this.getTween();
+        this.tweenChange.emit(this._tween);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: AnimationTweenComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: AnimationTweenComponent, isStandalone: true, selector: "gve-animation-tween", inputs: { tween: "tween", elementIds: "elementIds" }, outputs: { tweenChange: "tweenChange", cancel: "cancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- label -->\r\n        <mat-form-field>\r\n          <mat-label>label</mat-label>\r\n          <input matInput [formControl]=\"label\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(label).errors?.required && (label.dirty || label.touched)\r\n            \"\r\n            >label required</mat-error\r\n          >\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(label).errors?.maxLength && (label.dirty || label.touched)\r\n            \"\r\n            >label too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option *ngFor=\"let t of types\" [value]=\"t.value\">{{\r\n              t.label\r\n            }}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <!-- position -->\r\n        <mat-form-field>\r\n          <mat-label>position</mat-label>\r\n          <input matInput [formControl]=\"position\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(position).errors?.maxLength &&\r\n              (position.dirty || position.touched)\r\n            \"\r\n            >position too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <!-- selector -->\r\n        <mat-form-field>\r\n          <mat-label>selector</mat-label>\r\n          <input matInput [formControl]=\"selector\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(selector).errors?.required &&\r\n              (selector.dirty || selector.touched)\r\n            \"\r\n            >selector required</mat-error\r\n          >\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(selector).errors?.maxLength &&\r\n              (selector.dirty || selector.touched)\r\n            \"\r\n            >selector too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- element id -->\r\n        @if (elementIds?.length) {\r\n        <mat-form-field>\r\n          <mat-label>element ID</mat-label>\r\n          <mat-select [formControl]=\"elementId\">\r\n            <mat-option *ngFor=\"let id of elementIds\" [value]=\"id\">{{\r\n              id\r\n            }}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n\r\n      <!-- note -->\r\n      <div>\r\n        <mat-form-field class=\"long-text\">\r\n          <mat-label>note</mat-label>\r\n          <textarea rows=\"2\" matInput [formControl]=\"note\"></textarea>\r\n          <mat-error\r\n            *ngIf=\"$any(note).errors?.maxLength && (note.dirty || note.touched)\"\r\n            >note too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <mat-tab label=\"properties\">\r\n      <!-- vars -->\r\n      <gve-animation-vars\r\n        [vars]=\"vars.value\"\r\n        (varsChange)=\"onVarsChange($event)\"\r\n      />\r\n\r\n      <!-- vars2 only when type is fromTo -->\r\n      @if (type.value === 2) {\r\n      <gve-animation-vars\r\n        [vars]=\"vars2.value || {}\"\r\n        (varsChange)=\"onVars2Change($event)\"\r\n      />\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\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)=\"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      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Save 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}.long-text{width:100%;max-width:800px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AnimationVarsComponent, selector: "gve-animation-vars", inputs: ["vars"], outputs: ["varsChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: AnimationTweenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-animation-tween', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTabsModule,
+                        MatTooltipModule,
+                        AnimationVarsComponent,
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- label -->\r\n        <mat-form-field>\r\n          <mat-label>label</mat-label>\r\n          <input matInput [formControl]=\"label\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(label).errors?.required && (label.dirty || label.touched)\r\n            \"\r\n            >label required</mat-error\r\n          >\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(label).errors?.maxLength && (label.dirty || label.touched)\r\n            \"\r\n            >label too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option *ngFor=\"let t of types\" [value]=\"t.value\">{{\r\n              t.label\r\n            }}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <!-- position -->\r\n        <mat-form-field>\r\n          <mat-label>position</mat-label>\r\n          <input matInput [formControl]=\"position\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(position).errors?.maxLength &&\r\n              (position.dirty || position.touched)\r\n            \"\r\n            >position too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <!-- selector -->\r\n        <mat-form-field>\r\n          <mat-label>selector</mat-label>\r\n          <input matInput [formControl]=\"selector\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(selector).errors?.required &&\r\n              (selector.dirty || selector.touched)\r\n            \"\r\n            >selector required</mat-error\r\n          >\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(selector).errors?.maxLength &&\r\n              (selector.dirty || selector.touched)\r\n            \"\r\n            >selector too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- element id -->\r\n        @if (elementIds?.length) {\r\n        <mat-form-field>\r\n          <mat-label>element ID</mat-label>\r\n          <mat-select [formControl]=\"elementId\">\r\n            <mat-option *ngFor=\"let id of elementIds\" [value]=\"id\">{{\r\n              id\r\n            }}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n\r\n      <!-- note -->\r\n      <div>\r\n        <mat-form-field class=\"long-text\">\r\n          <mat-label>note</mat-label>\r\n          <textarea rows=\"2\" matInput [formControl]=\"note\"></textarea>\r\n          <mat-error\r\n            *ngIf=\"$any(note).errors?.maxLength && (note.dirty || note.touched)\"\r\n            >note too long</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <mat-tab label=\"properties\">\r\n      <!-- vars -->\r\n      <gve-animation-vars\r\n        [vars]=\"vars.value\"\r\n        (varsChange)=\"onVarsChange($event)\"\r\n      />\r\n\r\n      <!-- vars2 only when type is fromTo -->\r\n      @if (type.value === 2) {\r\n      <gve-animation-vars\r\n        [vars]=\"vars2.value || {}\"\r\n        (varsChange)=\"onVars2Change($event)\"\r\n      />\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\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)=\"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      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Save 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}.long-text{width:100%;max-width:800px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { tween: [{
+                type: Input
+            }], elementIds: [{
+                type: Input
+            }], tweenChange: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+class AnimationTimelineComponent {
+    get timeline() {
+        return this._timeline;
+    }
+    set timeline(value) {
+        this._timeline = value || undefined;
+        this.updateForm(this._timeline);
+    }
+    constructor(formBuilder) {
+        this.tags = [];
+        this.timelineChange = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.editedTweenIndex = -1;
+        this.selectors = {
+            0: 'to',
+            1: 'from',
+            2: 'fromTo',
+        };
+        this.tag = formBuilder.control('', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(100)],
+        });
+        this.tweens = formBuilder.control([], {
+            nonNullable: true,
+            validators: NgToolsValidators.strictMinLengthValidator(1),
+        });
+        this.vars = formBuilder.control({}, { nonNullable: true });
+        this.form = formBuilder.group({
+            tag: this.tag,
+            tweens: this.tweens,
+            vars: this.vars,
+        });
+    }
+    updateForm(timeline) {
+        if (!timeline) {
+            this.form.reset();
+            return;
+        }
+        this.tag.setValue(timeline.tag);
+        this.tweens.setValue(timeline.tweens);
+        this.vars.setValue(timeline.vars || {});
+        this.form.markAsPristine();
+    }
+    addTween() {
+        this.editedTweenIndex = -1;
+        this.editedTween = {
+            label: 'tween #' + (this.tweens.value.length + 1),
+            type: GveAnimationTweenType.to,
+            selector: '',
+        };
+    }
+    editTween(index) {
+        this.editedTweenIndex = index;
+        this.editedTween = 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 = undefined;
+        this.editedTweenIndex = -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: Object.keys(this.vars.value).length ? this.vars.value : undefined,
+        };
+    }
+    close() {
+        this.cancel.emit();
+    }
+    save() {
+        if (this.form.invalid) {
+            return;
+        }
+        this._timeline = this.getTimeline();
+        this.timelineChange.emit(this._timeline);
+        this.form.markAsPristine();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: AnimationTimelineComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: AnimationTimelineComponent, isStandalone: true, selector: "gve-animation-timeline", inputs: { timeline: "timeline", elementIds: "elementIds", tags: "tags" }, outputs: { timelineChange: "timelineChange", cancel: "cancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- tag (bound) -->\r\n    @if (tags.length) {\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        @for (t of tags; track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- tag (free) -->\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <input matInput [formControl]=\"tag\" />\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.maxLength && (tag.dirty || tag.touched)\"\r\n        >tag too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n    }\r\n\r\n    <button\r\n      mat-flat-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      (click)=\"addTween()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon> tween\r\n    </button>\r\n  </div>\r\n\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>label</th>\r\n        <th>type</th>\r\n        <th>selector</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of tweens.value; track t; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            (click)=\"editTween(index)\"\r\n            matTooltip=\"Edit tween\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            (click)=\"deleteTween(index)\"\r\n            matTooltip=\"Delete tween\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n          <!-- up -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenUp(index)\"\r\n            matTooltip=\"Move tween up\"\r\n            [disabled]=\"index === 0\"\r\n          >\r\n            <mat-icon>arrow_circle_up</mat-icon>\r\n          </button>\r\n          <!-- down -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenDown(index)\"\r\n            matTooltip=\"Move tween down\"\r\n            [disabled]=\"index === tweens.value.length - 1\"\r\n          >\r\n            <mat-icon>arrow_circle_down</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          {{ t.label }}\r\n        </td>\r\n        <td>\r\n          {{ t.type }}\r\n        </td>\r\n        <td>\r\n          {{ t.selector | flatLookup : selectors }}\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <mat-expansion-panel [expanded]=\"editedTween\" [disabled]=\"!editedTween\">\r\n    @if (editedTween) {\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>tween {{ editedTween.label }}</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    }\r\n    <fieldset>\r\n      <gve-animation-tween\r\n        [elementIds]=\"elementIds\"\r\n        [tween]=\"editedTween\"\r\n        (tweenChange)=\"saveTween($event)\"\r\n        (cancel)=\"closeTween()\"\r\n      />\r\n    </fieldset>\r\n  </mat-expansion-panel>\r\n\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)=\"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      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Save 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}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: NgToolsModule }, { kind: "pipe", type: i2$1.FlatLookupPipe, name: "flatLookup" }, { kind: "component", type: AnimationTweenComponent, selector: "gve-animation-tween", inputs: ["tween", "elementIds"], outputs: ["tweenChange", "cancel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: AnimationTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-animation-timeline', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTabsModule,
+                        MatTooltipModule,
+                        NgToolsModule,
+                        AnimationTweenComponent,
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- tag (bound) -->\r\n    @if (tags.length) {\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        @for (t of tags; track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- tag (free) -->\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <input matInput [formControl]=\"tag\" />\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.required && (tag.dirty || tag.touched)\"\r\n        >tag required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"$any(tag).errors?.maxLength && (tag.dirty || tag.touched)\"\r\n        >tag too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n    }\r\n\r\n    <button\r\n      mat-flat-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      (click)=\"addTween()\"\r\n    >\r\n      <mat-icon>add_circle</mat-icon> tween\r\n    </button>\r\n  </div>\r\n\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>label</th>\r\n        <th>type</th>\r\n        <th>selector</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (t of tweens.value; track t; let index = $index) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            (click)=\"editTween(index)\"\r\n            matTooltip=\"Edit tween\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            (click)=\"deleteTween(index)\"\r\n            matTooltip=\"Delete tween\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n          </button>\r\n          <!-- up -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenUp(index)\"\r\n            matTooltip=\"Move tween up\"\r\n            [disabled]=\"index === 0\"\r\n          >\r\n            <mat-icon>arrow_circle_up</mat-icon>\r\n          </button>\r\n          <!-- down -->\r\n          <button\r\n            mat-icon-button\r\n            type=\"button\"\r\n            (click)=\"moveTweenDown(index)\"\r\n            matTooltip=\"Move tween down\"\r\n            [disabled]=\"index === tweens.value.length - 1\"\r\n          >\r\n            <mat-icon>arrow_circle_down</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          {{ t.label }}\r\n        </td>\r\n        <td>\r\n          {{ t.type }}\r\n        </td>\r\n        <td>\r\n          {{ t.selector | flatLookup : selectors }}\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  <mat-expansion-panel [expanded]=\"editedTween\" [disabled]=\"!editedTween\">\r\n    @if (editedTween) {\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>tween {{ editedTween.label }}</mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    }\r\n    <fieldset>\r\n      <gve-animation-tween\r\n        [elementIds]=\"elementIds\"\r\n        [tween]=\"editedTween\"\r\n        (tweenChange)=\"saveTween($event)\"\r\n        (cancel)=\"closeTween()\"\r\n      />\r\n    </fieldset>\r\n  </mat-expansion-panel>\r\n\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)=\"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      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Save 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}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { timeline: [{
+                type: Input
+            }], elementIds: [{
+                type: Input
+            }], tags: [{
+                type: Input
+            }], timelineChange: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+/**
+ * A component that displays a single character from a base text.
+ */
+class BaseTextCharComponent {
+    constructor() {
+        this.defaultColor = '#D8D8D8';
+        this.defaultBorderColor = '#D8D8D8';
+        this.defaultEmSize = 1.5;
+        this.charPick = new EventEmitter();
+    }
+    get char() {
+        return this._char;
+    }
+    set char(value) {
+        this._char = value || undefined;
+    }
+    onCharClick(event) {
+        this.charPick.emit({ char: this._char, event });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: BaseTextCharComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: BaseTextCharComponent, isStandalone: true, selector: "gve-base-text-char", inputs: { char: "char" }, outputs: { charPick: "charPick" }, ngImport: i0, template: "@if (char) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char.emSize + 'em'\"\r\n    [style.borderColor]=\"char.borderColor\"\r\n  >\r\n    {{ char.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char.emSize / 2 + 'em'\"\r\n    [style.color]=\"char.color | colorToContrast\"\r\n    [style.borderColor]=\"char.borderColor\"\r\n    [style.backgroundColor]=\"char.color\"\r\n  >\r\n    {{ char.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid silver;border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid silver;border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: NgToolsModule }, { kind: "pipe", type: i2$1.ColorToContrastPipe, name: "colorToContrast" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: BaseTextCharComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-base-text-char', standalone: true, imports: [MatRippleModule, NgToolsModule], template: "@if (char) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char.emSize + 'em'\"\r\n    [style.borderColor]=\"char.borderColor\"\r\n  >\r\n    {{ char.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char.emSize / 2 + 'em'\"\r\n    [style.color]=\"char.color | colorToContrast\"\r\n    [style.borderColor]=\"char.borderColor\"\r\n    [style.backgroundColor]=\"char.color\"\r\n  >\r\n    {{ char.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid silver;border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid silver;border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"] }]
+        }], propDecorators: { char: [{
+                type: Input
+            }], charPick: [{
+                type: Output
+            }] } });
+
+/**
+ * A component to display a selectable base text.
+ */
+class BaseTextViewComponent {
+    constructor() {
+        this.defaultColor = '#DBDBDB';
+        this.defaultBorderColor = '#DBDBDB';
+        this.selectionColor = '#3E92CC';
+        this.hasLineNumber = false;
+        this.charPick = new EventEmitter();
+        this.rangePick = new EventEmitter();
+        this.lines = [];
+    }
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        this._text = value || undefined;
+        this.buildLines();
+    }
+    buildLines() {
+        if (!this._text) {
+            this.lines = [];
+            return;
+        }
+        const newLines = [];
+        newLines.push([]);
+        if (Array.isArray(this._text)) {
+            const nodes = this._text;
+            for (let i = 0; i < nodes.length; i++) {
+                const char = {
+                    id: nodes[i].id,
+                    value: nodes[i].data,
+                    label: nodes[i].label,
+                    color: this.defaultColor,
+                    borderColor: this.defaultBorderColor,
+                    emSize: 1.5,
+                };
+                newLines[newLines.length - 1].push(char);
+                if (char.value === '\n') {
+                    newLines.push([]);
+                }
+            }
+        }
+        else {
+            for (let i = 0; i < this._text.length; i++) {
+                const char = {
+                    id: i + 1,
+                    value: this._text[i],
+                    label: SnapshotViewService.translateSpecialChar(this._text[i]),
+                    color: this.defaultColor,
+                    borderColor: this.defaultBorderColor,
+                    emSize: 1.5,
+                };
+                newLines[newLines.length - 1].push(char);
+                if (char.value === '\n') {
+                    newLines.push([]);
+                }
+            }
+        }
+        this.lines = newLines;
+    }
+    resetColors() {
+        for (const line of this.lines) {
+            for (const c of line) {
+                c.color = this.defaultColor;
+                c.borderColor = this.defaultBorderColor;
+            }
+        }
+    }
+    onCharPick(event) {
+        this.resetColors();
+        if (this._lastSelectedChar &&
+            this._lastSelectedChar !== event.char &&
+            event.event.ctrlKey) {
+            const minId = Math.min(this._lastSelectedChar.id, event.char.id);
+            const maxId = Math.max(this._lastSelectedChar.id, event.char.id);
+            for (const line of this.lines) {
+                for (const c of line) {
+                    if (c.id >= minId && c.id <= maxId) {
+                        c.color = this.selectionColor;
+                        c.borderColor = this.selectionColor;
+                    }
+                }
+            }
+            this.charPick.emit(event);
+            this.rangePick.emit({ at: minId, run: maxId - minId + 1 });
+            return;
+        }
+        else {
+            // select current char
+            event.char.color = this.selectionColor;
+            event.char.borderColor = this.selectionColor;
+            this.charPick.emit(event);
+            this.rangePick.emit({ at: event.char.id, run: 1 });
+        }
+        this._lastSelectedChar = event.char;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: BaseTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: BaseTextViewComponent, isStandalone: true, selector: "gve-base-text-view", inputs: { defaultColor: "defaultColor", defaultBorderColor: "defaultBorderColor", selectionColor: "selectionColor", hasLineNumber: "hasLineNumber", text: "text" }, outputs: { charPick: "charPick", rangePick: "rangePick" }, ngImport: i0, template: "<div id=\"text\">\r\n  @for (line of lines; track line) {\r\n  <div class=\"line\">\r\n    @if (hasLineNumber) {\r\n    <div class=\"nr\">\r\n      {{ lines.indexOf(line) + 1 }}\r\n    </div>\r\n    } @for (c of line; track c.id) {\r\n    <gve-base-text-char [char]=\"c\" (charPick)=\"onCharPick($event)\" />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line *{flex:0 0 auto}.nr{font-size:.8em;font-weight:700;color:silver;margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseTextCharComponent, selector: "gve-base-text-char", inputs: ["char"], outputs: ["charPick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: BaseTextViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-base-text-view', standalone: true, imports: [CommonModule, BaseTextCharComponent], template: "<div id=\"text\">\r\n  @for (line of lines; track line) {\r\n  <div class=\"line\">\r\n    @if (hasLineNumber) {\r\n    <div class=\"nr\">\r\n      {{ lines.indexOf(line) + 1 }}\r\n    </div>\r\n    } @for (c of line; track c.id) {\r\n    <gve-base-text-char [char]=\"c\" (charPick)=\"onCharPick($event)\" />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line *{flex:0 0 auto}.nr{font-size:.8em;font-weight:700;color:silver;margin:0 4px}\n"] }]
+        }], propDecorators: { defaultColor: [{
+                type: Input
+            }], defaultBorderColor: [{
+                type: Input
+            }], selectionColor: [{
+                type: Input
+            }], hasLineNumber: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], charPick: [{
+                type: Output
+            }], rangePick: [{
+                type: Output
+            }] } });
+
+/**
+ * Feature editor. This edits a single feature, either free or from
+ * a closed set. In the latter case you must define the set via
+ * the `labeledIds` input. Also, you can provide a map of features
+ * to values via the `map` input. This is useful when you want to
+ * provide a set of features and values to the user, and you want
+ * to provide human-readable labels for the values.
+ */
+class FeatureEditorComponent {
+    /**
+     * The feature values map. When specified and the user selects a feature
+     * name present in the map keys, the corresponding values will be used
+     * to populate the value selection.
+     */
+    get featValues() {
+        return this._map;
+    }
+    set featValues(value) {
+        this._map = value || undefined;
+        this.nameIds = this.getLabeledIdsFor(this.name.value);
+    }
+    /**
+     * The feature to edit.
+     */
+    get feature() {
+        return this._feature;
+    }
+    set feature(value) {
+        if (this._feature === value) {
+            return;
+        }
+        this._feature = value || undefined;
+        this.updateForm(this._feature);
+        setTimeout(() => {
+            this.nameControl?.nativeElement?.focus();
+        }, 500);
+    }
+    constructor(formBuilder) {
+        /**
+         * True if the feature is a variant operation feature, which has
+         * additional properties like negation, global, and short-lived.
+         */
+        this.isVar = false;
+        /**
+         * Event emitted when the user cancels the feature editing.
+         */
+        this.featureCancel = new EventEmitter();
+        /**
+         * Event emitted when the user saves the edited feature.
+         */
+        this.featureChange = new EventEmitter();
+        this.name = formBuilder.control('', {
+            validators: [Validators.required, Validators.maxLength(50)],
+            nonNullable: true,
+        });
+        this.value = formBuilder.control('', {
+            validators: [Validators.maxLength(5000)],
+            nonNullable: true,
+        });
+        this.setPolicy = formBuilder.control(FeatureSetPolicy.multiple, {
+            nonNullable: true,
+        });
+        this.isNegated = formBuilder.control(false, { nonNullable: true });
+        this.isGlobal = formBuilder.control(false, { nonNullable: true });
+        this.isShortLived = formBuilder.control(false, { nonNullable: true });
+        this.form = formBuilder.group({
+            name: this.name,
+            value: this.value,
+            setPolicy: this.setPolicy,
+            isNegated: this.isNegated,
+            isGlobal: this.isGlobal,
+            isShortLived: this.isShortLived,
+        });
+    }
+    ngOnInit() {
+        // whenever the name changes, update the value selection
+        this._sub = this.name.valueChanges
+            .pipe(debounceTime(300), distinctUntilChanged())
+            .subscribe((name) => {
+            this.value.reset();
+            this.nameIds = this.getLabeledIdsFor(name);
+        });
+    }
+    ngOnDestroy() {
+        this._sub?.unsubscribe();
+    }
+    getLabeledIdsFor(id) {
+        if (!id) {
+            return undefined;
+        }
+        return this.featValues ? this.featValues[id] : undefined;
+    }
+    updateForm(feature) {
+        if (!feature) {
+            this.form.reset();
+        }
+        else {
+            this.name.setValue(feature.name);
+            this.value.setValue(feature.value);
+            this.setPolicy.setValue(feature.setPolicy || FeatureSetPolicy.multiple);
+            this.isNegated.setValue(feature.isNegated || false);
+            this.isGlobal.setValue(feature.isGlobal || false);
+            this.isShortLived.setValue(feature.isShortLived || false);
+        }
+    }
+    cancel() {
+        this.featureCancel.emit();
+    }
+    save() {
+        if (!this.form.valid) {
+            return;
+        }
+        this.feature = this.isVar
+            ? {
+                name: this.name.value.trim(),
+                value: this.value.value.trim(),
+                setPolicy: this.setPolicy.value,
+                isNegated: this.isNegated.value,
+                isGlobal: this.isGlobal.value,
+                isShortLived: this.isShortLived.value,
+            }
+            : {
+                name: this.name.value.trim(),
+                value: this.value.value.trim(),
+                setPolicy: this.setPolicy.value,
+            };
+        this.featureChange.emit(this.feature);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FeatureEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: FeatureEditorComponent, isStandalone: true, selector: "gve-feature-editor", inputs: { featNames: "featNames", featValues: "featValues", feature: "feature", isVar: "isVar" }, outputs: { featureCancel: "featureCancel", featureChange: "featureChange" }, viewQueries: [{ propertyName: "nameControl", first: true, predicate: ["nameCtl"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    @if (featNames?.length) {\r\n    <!-- name (bound) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <mat-select #nameCtl [formControl]=\"name\">\r\n        <mat-option *ngFor=\"let i of featNames\" [value]=\"i.id\">{{\r\n          i.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n      <mat-error>name required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- name (free) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <input #nameCtl matInput [formControl]=\"name\" />\r\n      <mat-error\r\n        *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n        >name required</mat-error\r\n      >\r\n      @if ($any(name).errors?.maxLength && (name.dirty || name.touched)) {\r\n      <mat-error>name too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- value (bound) -->\r\n    @if (nameIds?.length) {\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <mat-select [formControl]=\"value\">\r\n        <mat-option *ngFor=\"let e of nameIds\" [value]=\"e.id\">{{\r\n          e.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- value (free) -->\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <input matInput [formControl]=\"value\" />\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      } @if ($any(value).errors?.maxLength && (value.dirty || value.touched)) {\r\n      <mat-error>value too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- setPolicy -->\r\n    <mat-form-field>\r\n      <mat-label>set policy</mat-label>\r\n      <mat-select [formControl]=\"setPolicy\">\r\n        <mat-option [value]=\"0\">multiple</mat-option>\r\n        <mat-option [value]=\"1\">single</mat-option>\r\n        <mat-option [value]=\"2\">single first</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  @if (isVar) {\r\n  <div class=\"form-row\">\r\n    <!-- isNegated -->\r\n    <mat-checkbox [formControl]=\"isNegated\">negated</mat-checkbox>\r\n\r\n    <!-- isShortLived -->\r\n    <mat-checkbox [formControl]=\"isShortLived\">short-lived</mat-checkbox>\r\n\r\n    <!-- isGlobal -->\r\n    <mat-checkbox [formControl]=\"isGlobal\">global</mat-checkbox>\r\n  </div>\r\n  }\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FeatureEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-feature-editor', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    @if (featNames?.length) {\r\n    <!-- name (bound) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <mat-select #nameCtl [formControl]=\"name\">\r\n        <mat-option *ngFor=\"let i of featNames\" [value]=\"i.id\">{{\r\n          i.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n      <mat-error>name required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- name (free) -->\r\n    <mat-form-field>\r\n      <mat-label>name</mat-label>\r\n      <input #nameCtl matInput [formControl]=\"name\" />\r\n      <mat-error\r\n        *ngIf=\"$any(name).errors?.required && (name.dirty || name.touched)\"\r\n        >name required</mat-error\r\n      >\r\n      @if ($any(name).errors?.maxLength && (name.dirty || name.touched)) {\r\n      <mat-error>name too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- value (bound) -->\r\n    @if (nameIds?.length) {\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <mat-select [formControl]=\"value\">\r\n        <mat-option *ngFor=\"let e of nameIds\" [value]=\"e.id\">{{\r\n          e.label\r\n        }}</mat-option>\r\n      </mat-select>\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- value (free) -->\r\n    <mat-form-field>\r\n      <mat-label>value</mat-label>\r\n      <input matInput [formControl]=\"value\" />\r\n      @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n      <mat-error>value required</mat-error>\r\n      } @if ($any(value).errors?.maxLength && (value.dirty || value.touched)) {\r\n      <mat-error>value too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- setPolicy -->\r\n    <mat-form-field>\r\n      <mat-label>set policy</mat-label>\r\n      <mat-select [formControl]=\"setPolicy\">\r\n        <mat-option [value]=\"0\">multiple</mat-option>\r\n        <mat-option [value]=\"1\">single</mat-option>\r\n        <mat-option [value]=\"2\">single first</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  @if (isVar) {\r\n  <div class=\"form-row\">\r\n    <!-- isNegated -->\r\n    <mat-checkbox [formControl]=\"isNegated\">negated</mat-checkbox>\r\n\r\n    <!-- isShortLived -->\r\n    <mat-checkbox [formControl]=\"isShortLived\">short-lived</mat-checkbox>\r\n\r\n    <!-- isGlobal -->\r\n    <mat-checkbox [formControl]=\"isGlobal\">global</mat-checkbox>\r\n  </div>\r\n  }\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { nameControl: [{
+                type: ViewChild,
+                args: ['nameCtl']
+            }], featNames: [{
+                type: Input
+            }], featValues: [{
+                type: Input
+            }], feature: [{
+                type: Input
+            }], isVar: [{
+                type: Input
+            }], featureCancel: [{
+                type: Output
+            }], featureChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Editor for a set of features.
+ */
+class FeatureSetEditorComponent {
+    /**
+     * The features to edit.
+     */
+    get features() {
+        return this._features;
+    }
+    set features(value) {
+        if (this._features === value) {
+            return;
+        }
+        this._features = value;
+        this.applyFeatureFilter(this.filter.value);
+    }
+    constructor(formBuilder) {
+        /**
+         * True if the features are variable features.
+         */
+        this.isVar = false;
+        /**
+         * True to hide the feature filter.
+         */
+        this.noFilter = false;
+        /**
+         * Emitted when the features change.
+         */
+        this.featuresChange = new EventEmitter();
+        this._features = [];
+        this.filteredFeatures = [];
+        this.filter = formBuilder.control(null);
+        this._editedFeatureIndex = -1;
+    }
+    applyFeatureFilter(name) {
+        this.filteredFeatures = this.features.filter((feature) => {
+            return !name || feature.name.toLowerCase().includes(name.toLowerCase());
+        });
+    }
+    ngOnInit() {
+        this._sub = this.filter.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(300))
+            .subscribe((value) => {
+            this.applyFeatureFilter(value);
+        });
+    }
+    ngOnDestroy() {
+        this._sub?.unsubscribe();
+    }
+    addFeature() {
+        this.editedFeature = {
+            name: '',
+            value: '',
+            setPolicy: FeatureSetPolicy.multiple,
+        };
+        this._editedFeatureIndex = -1;
+    }
+    editFeature(feature) {
+        this.editedFeature = feature;
+        this._editedFeatureIndex = this.features.indexOf(feature);
+    }
+    deleteFeature(feature) {
+        const index = this.features.indexOf(feature);
+        if (index < 0) {
+            return;
+        }
+        const features = [...this.features];
+        features.splice(index, 1);
+        this.features = features;
+        this.featuresChange.emit(this.features);
+    }
+    onFeatureChange(feature) {
+        const features = [...this.features];
+        for (let i = features.length - 1; i >= 0; i--) {
+            if (features[i].name === feature.name) {
+                if (feature.setPolicy === FeatureSetPolicy.single ||
+                    features[i].setPolicy === FeatureSetPolicy.single) {
+                    features.splice(i, 1);
+                }
+            }
+        }
+        if (this._editedFeatureIndex === -1) {
+            features.push(feature);
+        }
+        else {
+            features.splice(this._editedFeatureIndex, 1, feature);
+        }
+        this.features = features;
+        this.editedFeature = undefined;
+        this._editedFeatureIndex = -1;
+        this.featuresChange.emit(this.features);
+    }
+    onFeatureCancel() {
+        this.editedFeature = undefined;
+        this._editedFeatureIndex = -1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FeatureSetEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: FeatureSetEditorComponent, isStandalone: true, selector: "gve-feature-set-editor", inputs: { isVar: "isVar", featNames: "featNames", featValues: "featValues", noFilter: "noFilter", features: "features" }, outputs: { featuresChange: "featuresChange" }, ngImport: i0, template: "<div>\r\n  <div class=\"form-row\">\r\n    @if (!noFilter || !features.length) {\r\n    <!-- filter -->\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]=\"!noFilter\"\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        @if (isVar) {\r\n        <th>negated</th>\r\n        <th>global</th>\r\n        <th>short-lived</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (feature of filteredFeatures; track feature) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this feature\"\r\n            (click)=\"editFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this feature\"\r\n            (click)=\"deleteFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          @if (featNames?.length) {\r\n          <span>{{\r\n            feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.name }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          @if (featValues) {\r\n          <span>{{\r\n            feature.value | flatLookup : featValues[feature.name]\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.value }}</span>\r\n          }\r\n        </td>\r\n        @if (isVar) {\r\n        <td>\r\n          <span>{{ $any(feature).isNegated ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isGlobal ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isShortLived ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  }\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedFeature\" [expanded]=\"editedFeature\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <span>{{ editedFeature?.name || \"feature\" }}</span>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <gve-feature-editor\r\n      [isVar]=\"isVar\"\r\n      [featNames]=\"featNames\"\r\n      [featValues]=\"featValues\"\r\n      [feature]=\"editedFeature\"\r\n      (featureChange)=\"onFeatureChange($event)\"\r\n      (featureCancel)=\"onFeatureCancel()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: NgToolsModule }, { kind: "pipe", type: i2$1.FlatLookupPipe, name: "flatLookup" }, { kind: "component", type: FeatureEditorComponent, selector: "gve-feature-editor", inputs: ["featNames", "featValues", "feature", "isVar"], outputs: ["featureCancel", "featureChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FeatureSetEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-feature-set-editor', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        NgToolsModule,
+                        FeatureEditorComponent,
+                    ], template: "<div>\r\n  <div class=\"form-row\">\r\n    @if (!noFilter || !features.length) {\r\n    <!-- filter -->\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]=\"!noFilter\"\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        @if (isVar) {\r\n        <th>negated</th>\r\n        <th>global</th>\r\n        <th>short-lived</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (feature of filteredFeatures; track feature) {\r\n      <tr>\r\n        <td class=\"fit-width\">\r\n          <!-- edit -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"primary\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this feature\"\r\n            (click)=\"editFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n          </button>\r\n          <!-- delete -->\r\n          <button\r\n            type=\"button\"\r\n            color=\"warn\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this feature\"\r\n            (click)=\"deleteFeature(feature)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        <td>\r\n          @if (featNames?.length) {\r\n          <span>{{\r\n            feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.name }}</span>\r\n          }\r\n        </td>\r\n        <td>\r\n          @if (featValues) {\r\n          <span>{{\r\n            feature.value | flatLookup : featValues[feature.name]\r\n          }}</span>\r\n          } @else {\r\n          <span>{{ feature.value }}</span>\r\n          }\r\n        </td>\r\n        @if (isVar) {\r\n        <td>\r\n          <span>{{ $any(feature).isNegated ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isGlobal ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        <td>\r\n          <span>{{ $any(feature).isShortLived ? \"yes\" : \"no\" }}</span>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  }\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel [disabled]=\"!editedFeature\" [expanded]=\"editedFeature\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <span>{{ editedFeature?.name || \"feature\" }}</span>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <gve-feature-editor\r\n      [isVar]=\"isVar\"\r\n      [featNames]=\"featNames\"\r\n      [featValues]=\"featValues\"\r\n      [feature]=\"editedFeature\"\r\n      (featureChange)=\"onFeatureChange($event)\"\r\n      (featureCancel)=\"onFeatureCancel()\"\r\n    />\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { isVar: [{
+                type: Input
+            }], featNames: [{
+                type: Input
+            }], featValues: [{
+                type: Input
+            }], noFilter: [{
+                type: Input
+            }], features: [{
+                type: Input
+            }], featuresChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Editor for snapshot's base text. This can receive a string or an array
+ * of `CharNode` objects, and lets the user edit the text, character by
+ * character, optionally also setting its features.
+ */
+class BaseTextEditorComponent {
+    /**
+     * The text to edit. In input this can be a string, an array of `CharNode`
+     * objects. In output this will be an array of `CharNode` objects.
+     */
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        this.resetSelectedChar();
+        if (this._text === value) {
+            return;
+        }
+        if (!value) {
+            this._text = [];
+        }
+        else {
+            this._text = Array.isArray(value)
+                ? value
+                : SnapshotViewService.stringToBaseChars(value);
+        }
+    }
+    constructor(formBuilder, _dialogService) {
+        this._dialogService = _dialogService;
+        this._text = [];
+        /**
+         * Emits the edited text as an array of `CharNode`'s whenever it changes.
+         */
+        this.textChange = new EventEmitter();
+        this.userText = formBuilder.control('', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(10000)],
+        });
+        this.form = formBuilder.group({
+            userText: this.userText,
+        });
+    }
+    resetSelectedChar() {
+        this.selectedChar = undefined;
+        this.selectedCharLabel = undefined;
+    }
+    onSelectedChar(event) {
+        this.selectedChar = this._text.find((c) => c.id === event.char.id);
+        this.selectedCharLabel = event.char.label;
+    }
+    onFeaturesChange(features) {
+        this.selectedChar.features = features;
+        this.textChange.emit(this._text);
+    }
+    onRangePick(range) {
+        this.textRange = range;
+    }
+    patchTextFromUser() {
+        // TODO
+    }
+    setTextFromUser() {
+        this._dialogService
+            .confirm('Confirm', 'Reset text?')
+            .subscribe((yes) => {
+            if (yes) {
+                this.text = this.userText.value;
+                this.textChange.emit(this._text);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: BaseTextEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i2$2.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: BaseTextEditorComponent, isStandalone: true, selector: "gve-base-text-editor", inputs: { text: "text" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"setTextFromUser()\">\r\n  <!-- text -->\r\n  <div>\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label>text</mat-label>\r\n      <textarea matInput [formControl]=\"userText\" rows=\"5\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.required &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.maxLength &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <!-- set -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-warn\"\r\n      matTooltip=\"Reset characters to newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"setTextFromUser()\"\r\n    >\r\n      set\r\n    </button>\r\n    <!-- patch -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-primary\"\r\n      matTooltip=\"Patch characters with newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"patchTextFromUser()\"\r\n    >\r\n      patch\r\n    </button>\r\n  </div>\r\n\r\n  <!-- base text -->\r\n  <div id=\"text-view\">\r\n    <gve-base-text-view\r\n      [text]=\"text\"\r\n      (charPick)=\"onSelectedChar($event)\"\r\n      (rangePick)=\"textRange = $event\"\r\n    />\r\n\r\n    <!-- text range -->\r\n    @if (textRange) {\r\n    <div id=\"text-range\">{{ textRange.at }} \u00D7 {{ textRange.run }}</div>\r\n    }\r\n  </div>\r\n\r\n  <!-- char features -->\r\n  @if (selectedChar) {\r\n  <fieldset>\r\n    <legend>features</legend>\r\n    <gve-feature-set-editor\r\n      [features]=\"selectedChar.features || []\"\r\n      (featuresChange)=\"onFeaturesChange($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n</form>\r\n", styles: [".full-width{width:100%}#text-view{margin:8px 0}fieldset{border:1px solid #ccc;padding:10px;margin:10px 0;border-radius:5px}legend{color:silver}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "hasLineNumber", "text"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "noFilter", "features"], outputs: ["featuresChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: BaseTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-base-text-editor', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                        BaseTextViewComponent,
+                        FeatureSetEditorComponent,
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"setTextFromUser()\">\r\n  <!-- text -->\r\n  <div>\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label>text</mat-label>\r\n      <textarea matInput [formControl]=\"userText\" rows=\"5\"></textarea>\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.required &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text required</mat-error\r\n      >\r\n      <mat-error\r\n        *ngIf=\"\r\n          $any(userText).errors?.maxLength &&\r\n          (userText.dirty || userText.touched)\r\n        \"\r\n        >text too long</mat-error\r\n      >\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <!-- set -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-warn\"\r\n      matTooltip=\"Reset characters to newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"setTextFromUser()\"\r\n    >\r\n      set\r\n    </button>\r\n    <!-- patch -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-primary\"\r\n      matTooltip=\"Patch characters with newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"patchTextFromUser()\"\r\n    >\r\n      patch\r\n    </button>\r\n  </div>\r\n\r\n  <!-- base text -->\r\n  <div id=\"text-view\">\r\n    <gve-base-text-view\r\n      [text]=\"text\"\r\n      (charPick)=\"onSelectedChar($event)\"\r\n      (rangePick)=\"textRange = $event\"\r\n    />\r\n\r\n    <!-- text range -->\r\n    @if (textRange) {\r\n    <div id=\"text-range\">{{ textRange.at }} \u00D7 {{ textRange.run }}</div>\r\n    }\r\n  </div>\r\n\r\n  <!-- char features -->\r\n  @if (selectedChar) {\r\n  <fieldset>\r\n    <legend>features</legend>\r\n    <gve-feature-set-editor\r\n      [features]=\"selectedChar.features || []\"\r\n      (featuresChange)=\"onFeaturesChange($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n</form>\r\n", styles: [".full-width{width:100%}#text-view{margin:8px 0}fieldset{border:1px solid #ccc;padding:10px;margin:10px 0;border-radius:5px}legend{color:silver}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$2.DialogService }], propDecorators: { text: [{
+                type: Input
+            }], textChange: [{
+                type: Output
+            }] } });
+
+class OperationSourceEditorComponent {
+    get source() {
+        return this._source;
+    }
+    set source(value) {
+        if (this._source === value) {
+            return;
+        }
+        this._source = value || undefined;
+        this.updateForm(this._source);
+    }
+    constructor(formBuilder) {
+        this.sourceChange = new EventEmitter();
+        this.sourceCancel = new EventEmitter();
+        this.id = new FormControl('', {
+            validators: [Validators.required, Validators.maxLength(50)],
+            nonNullable: true,
+        });
+        this.type = new FormControl('', {
+            validators: [Validators.required, Validators.maxLength(50)],
+            nonNullable: true,
+        });
+        this.rank = new FormControl(0, {
+            nonNullable: true,
+        });
+        this.note = new FormControl(null, {
+            validators: [Validators.maxLength(1000)],
+        });
+        this.form = formBuilder.group({
+            id: this.id,
+            type: this.type,
+            rank: this.rank,
+            note: this.note,
+        });
+    }
+    updateForm(source) {
+        if (!source) {
+            this.form.reset();
+            return;
+        }
+        this.id.setValue(source.id);
+        this.type.setValue(source.type);
+        this.rank.setValue(source.rank || 0);
+        this.note.setValue(source.note || null);
+        this.form.markAsPristine();
+    }
+    cancel() {
+        this.sourceCancel.emit();
+    }
+    save() {
+        if (this.form.invalid) {
+            return;
+        }
+        this._source = {
+            id: this.id.value,
+            type: this.type.value,
+            rank: this.rank.value,
+            note: this.note.value || undefined,
+        };
+        this.sourceChange.emit(this._source);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: OperationSourceEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: OperationSourceEditorComponent, isStandalone: true, selector: "gve-operation-source-editor", inputs: { source: "source", ids: "ids", types: "types" }, outputs: { sourceChange: "sourceChange", sourceCancel: "sourceCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- id -->\r\n    <!-- id (bound) -->\r\n    @if (ids?.length) {\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <mat-select [formControl]=\"id\">\r\n        @for (i of ids; track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- id (free) -->\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <input matInput [formControl]=\"id\" />\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      } @if ($any(id.errors)?.maxLength && (id.dirty || id.touched)) {\r\n      <mat-error>id too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- type (bound) -->\r\n    @if (types?.length) {\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        @for (i of types; track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- type (free) -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <input matInput [formControl]=\"type\" />\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      } @if ($any(type.errors)?.maxLength && (type.dirty || type.touched)) {\r\n      <mat-error>type too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- rank -->\r\n    <mat-form-field class=\"nr\">\r\n      <mat-label>rank</mat-label>\r\n      <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea matInput [formControl]=\"note\" class=\"long-text\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".long-text{width:100%;max-width:800px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:5em}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: OperationSourceEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-operation-source-editor', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- id -->\r\n    <!-- id (bound) -->\r\n    @if (ids?.length) {\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <mat-select [formControl]=\"id\">\r\n        @for (i of ids; track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- id (free) -->\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <input matInput [formControl]=\"id\" />\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      } @if ($any(id.errors)?.maxLength && (id.dirty || id.touched)) {\r\n      <mat-error>id too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- type (bound) -->\r\n    @if (types?.length) {\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        @for (i of types; track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- type (free) -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <input matInput [formControl]=\"type\" />\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      } @if ($any(type.errors)?.maxLength && (type.dirty || type.touched)) {\r\n      <mat-error>type too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- rank -->\r\n    <mat-form-field class=\"nr\">\r\n      <mat-label>rank</mat-label>\r\n      <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea matInput [formControl]=\"note\" class=\"long-text\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".long-text{width:100%;max-width:800px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:5em}table{width:100%;border-collapse:collapse}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { source: [{
+                type: Input
+            }], ids: [{
+                type: Input
+            }], types: [{
+                type: Input
+            }], sourceChange: [{
+                type: Output
+            }], sourceCancel: [{
+                type: Output
+            }] } });
+
+class SvgValidators {
+    static rootGValidator() {
+        return (control) => {
+            if (!control.value) {
+                return null;
+            }
+            const parser = new DOMParser();
+            let error = null;
+            let svgRoot;
+            try {
+                const doc = parser.parseFromString(control.value, 'image/svg+xml');
+                svgRoot =
+                    doc.documentElement.nodeName === 'svg' ? doc.documentElement : null;
+            }
+            catch (e) {
+                error = { svgInvalid: { value: control.value } };
+            }
+            if (!error && svgRoot) {
+                const gElements = svgRoot.getElementsByTagName('g');
+                if (gElements.length !== 1 || svgRoot.childNodes.length > 1) {
+                    error = { svgInvalidRoot: { value: control.value } };
+                }
+            }
+            return error;
+        };
+    }
+}
+
+class SimpleTreeComponent {
+    constructor() {
+        this.selectedNodeChange = new EventEmitter();
+        this.level = 0;
+    }
+    get node() {
+        return this._node;
+    }
+    set node(value) {
+        if (this._node === value) {
+            return;
+        }
+        this._node = value;
+        this.level = this.calculateLevel(value);
+    }
+    ngOnInit() {
+        this.level = this.calculateLevel(this.node);
+    }
+    calculateLevel(node) {
+        let level = 0;
+        if (node) {
+            let n = node;
+            while (n.parent) {
+                level++;
+                n = n.parent;
+            }
+        }
+        return level;
+    }
+    selectNode(node) {
+        this.selectedNode = node;
+        this.selectedNodeChange.emit(node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: SimpleTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: SimpleTreeComponent, isStandalone: true, selector: "gve-simple-tree", inputs: { node: "node", selectedNode: "selectedNode" }, outputs: { selectedNodeChange: "selectedNodeChange" }, ngImport: i0, template: "@if (node) {\r\n<div [style.margin-left]=\"level * 8 + 'px'\">\r\n  <ng-template\r\n    #tree\r\n    let-node\r\n    let-parentLevel=\"level\"\r\n    let-selectedNode=\"selectedNode\"\r\n  >\r\n    <div\r\n      [style.margin-left]=\"parentLevel * 8 + 'px'\"\r\n      [class.selected]=\"node === selectedNode\"\r\n    >\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          (click)=\"node.isExpanded = !node.isExpanded\"\r\n        >\r\n          <mat-icon>{{\r\n            node.isExpanded ? \"expand_more\" : \"chevron_right\"\r\n          }}</mat-icon>\r\n        </button>\r\n        <span class=\"label\" (click)=\"selectNode(node)\">\r\n          {{ node.label }}\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"node.children && node.isExpanded\">\r\n        <ng-container *ngFor=\"let child of node.children\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              tree;\r\n              context: {\r\n                $implicit: child,\r\n                level: parentLevel + 1,\r\n                selectedNode: selectedNode\r\n              }\r\n            \"\r\n          ></ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- $implicit is the source of let-node -->\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      tree;\r\n      context: { $implicit: node, level: level, selectedNode: selectedNode }\r\n    \"\r\n  ></ng-container>\r\n</div>\r\n}\r\n", styles: [".label{cursor:pointer}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: SimpleTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-simple-tree', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "@if (node) {\r\n<div [style.margin-left]=\"level * 8 + 'px'\">\r\n  <ng-template\r\n    #tree\r\n    let-node\r\n    let-parentLevel=\"level\"\r\n    let-selectedNode=\"selectedNode\"\r\n  >\r\n    <div\r\n      [style.margin-left]=\"parentLevel * 8 + 'px'\"\r\n      [class.selected]=\"node === selectedNode\"\r\n    >\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          (click)=\"node.isExpanded = !node.isExpanded\"\r\n        >\r\n          <mat-icon>{{\r\n            node.isExpanded ? \"expand_more\" : \"chevron_right\"\r\n          }}</mat-icon>\r\n        </button>\r\n        <span class=\"label\" (click)=\"selectNode(node)\">\r\n          {{ node.label }}\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"node.children && node.isExpanded\">\r\n        <ng-container *ngFor=\"let child of node.children\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              tree;\r\n              context: {\r\n                $implicit: child,\r\n                level: parentLevel + 1,\r\n                selectedNode: selectedNode\r\n              }\r\n            \"\r\n          ></ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- $implicit is the source of let-node -->\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      tree;\r\n      context: { $implicit: node, level: level, selectedNode: selectedNode }\r\n    \"\r\n  ></ng-container>\r\n</div>\r\n}\r\n", styles: [".label{cursor:pointer}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}\n"] }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], selectedNode: [{
+                type: Input
+            }], selectedNodeChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Service to store and retrieve dynamic settings.
+ */
+class SettingsService {
+    constructor() {
+        this._cache = new Map();
+    }
+    /**
+     * Scopes the key by prefixing it with the keyPrefix if any.
+     *
+     * @param key The key to scope.
+     * @returns The scoped key.
+     */
+    getScopedKey(key) {
+        return this.keyPrefix ? this.keyPrefix + key : key;
+    }
+    /**
+     * Sets a setting's value.
+     *
+     * @param key The key.
+     * @param value The value.
+     * @param persist True to persist this setting in local storage.
+     */
+    set(key, value, persist = false) {
+        key = this.getScopedKey(key);
+        this._cache.set(key, value);
+        if (persist && value) {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+    }
+    /**
+     * Get a setting's value of type T.
+     *
+     * @param key The key.
+     * @param defaultValue The default value to get when the setting
+     * is not found in the store.
+     * @returns The value.
+     */
+    get(key, defaultValue) {
+        key = this.getScopedKey(key);
+        // immediately return value from cache
+        if (this._cache.has(key)) {
+            return this._cache.get(key);
+        }
+        // try loading value from local storage
+        const value = localStorage.getItem(key);
+        if (value) {
+            const v = JSON.parse(value);
+            this._cache.set(key, v);
+            return value;
+        }
+        // not found, return default value
+        return defaultValue;
+    }
+    /**
+     * Check if a key exists in the store.
+     *
+     * @param key The key.
+     * @returns True if the key exists in the store.
+     */
+    contains(key) {
+        key = this.getScopedKey(key);
+        return this._cache.has(key) || localStorage.getItem(key) !== null;
+    }
+    /**
+     * Remove a setting if present.
+     *
+     * @param key The key.
+     */
+    remove(key) {
+        key = this.getScopedKey(key);
+        this._cache.delete(key);
+        localStorage.removeItem(key);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: SettingsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * A component for editing a variant generation operation.
+ */
+class ChainOperationEditorComponent {
+    /**
+     * The operation to edit.
+     */
+    get operation() {
+        return this._operation || undefined;
+    }
+    set operation(value) {
+        if (this._operation === value) {
+            return;
+        }
+        this._operation = value;
+        this.updateForm(value);
+    }
+    /**
+     * The snapshot the operation refers to.
+     */
+    get snapshot() {
+        return this._snapshot;
+    }
+    set snapshot(value) {
+        if (this._snapshot === value) {
+            return;
+        }
+        const dirty = this.hasTextChanges(value || undefined);
+        this._snapshot = value || undefined;
+        if (dirty) {
+            this.requestPreview();
+            this._editorModel?.setValue(this.svg.value || '');
+        }
+    }
+    constructor(formBuilder, _clipboard, _settings) {
+        this._clipboard = _clipboard;
+        this._settings = _settings;
+        // monaco
+        this._disposables = [];
+        this._nanoid = customAlphabet('1234567890abcdef', 10);
+        this._editedSourceIndex = -1;
+        /**
+         * Emits when the operation is changed.
+         */
+        this.operationChange = new EventEmitter();
+        /**
+         * Emits when the operation preview is requested.
+         */
+        this.operationPreview = new EventEmitter();
+        /**
+         * Emits when the operation editing is cancelled.
+         */
+        this.operationCancel = new EventEmitter();
+        this.tabIndex = 0;
+        this.hasTo = false;
+        this.hasToRun = false;
+        this.hasValue = false;
+        this._subs = [];
+        // general
+        this.rank = formBuilder.control(0, { nonNullable: true });
+        this.groupId = formBuilder.control(null);
+        this.features = formBuilder.control([], { nonNullable: true });
+        this.sources = formBuilder.control([], {
+            nonNullable: true,
+        });
+        this.type = formBuilder.control(OperationType.replace, {
+            validators: Validators.required,
+            nonNullable: true,
+        });
+        this.at = formBuilder.control(0, {
+            validators: Validators.required,
+            nonNullable: true,
+        });
+        this.atAsIndex = formBuilder.control(false, { nonNullable: true });
+        this.to = formBuilder.control(0, { nonNullable: true });
+        this.toAsIndex = formBuilder.control(false, { nonNullable: true });
+        this.inputTag = formBuilder.control(null);
+        this.outputTag = formBuilder.control(null);
+        this.run = formBuilder.control(0, {
+            validators: Validators.required,
+            nonNullable: true,
+        });
+        this.toRun = formBuilder.control(0, { nonNullable: true });
+        this.value = formBuilder.control(null);
+        // svg
+        this.svg = formBuilder.control('', {
+            validators: [SvgValidators.rootGValidator()],
+            nonNullable: true,
+        });
+        this.elementFeatures = formBuilder.control({}, { nonNullable: true });
+        this.dpFeatures = formBuilder.control([], { nonNullable: true });
+        this.form = formBuilder.group({
+            rank: this.rank,
+            groupId: this.groupId,
+            features: this.features,
+            sources: this.sources,
+            type: this.type,
+            at: this.at,
+            atAsIndex: this.atAsIndex,
+            to: this.to,
+            toAsIndex: this.toAsIndex,
+            inputTag: this.inputTag,
+            outputTag: this.outputTag,
+            run: this.run,
+            toRun: this.toRun,
+            value: this.value,
+            svg: this.svg,
+            elementFeatures: this.elementFeatures,
+            dpFeatures: this.dpFeatures,
+        });
+        // SVG elements
+        this.elements = [];
+    }
+    ngOnInit() {
+        // whenever svg or base change, update preview
+        this._subs.push(this.form.valueChanges
+            .pipe(filter((changes) => 'svg' in changes || 'snapshot' in changes), debounceTime$1(500))
+            .subscribe(() => {
+            this.requestPreview();
+        }));
+        // whenever type changes, update args UI
+        this._subs.push(this.type.valueChanges.subscribe(() => this.updateArgsUI()));
+    }
+    ngOnDestroy() {
+        this._disposables.forEach((d) => d.dispose());
+        for (const sub of this._subs) {
+            sub.unsubscribe();
+        }
+    }
+    hasTextChanges(snapshot) {
+        if ((!snapshot && this._snapshot) || (snapshot && !this._snapshot)) {
+            return true;
+        }
+        if (snapshot?.size?.width !== this._snapshot?.size?.width ||
+            snapshot?.size?.height !== this._snapshot?.size?.height) {
+            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) {
+            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(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();
+    }
+    onDpFeaturesChange(features) {
+        this.dpFeatures.setValue(features);
+        this.dpFeatures.markAsDirty();
+    }
+    // #region sources
+    addSource() {
+        this.editedSource = { id: '', type: '' };
+        this._editedSourceIndex = -1;
+    }
+    editSource(index) {
+        this._editedSourceIndex = index;
+        this.editedSource = this.sources.value[index];
+    }
+    closeSource() {
+        this._editedSourceIndex = -1;
+        this.editedSource = undefined;
+    }
+    onSourceChange(source) {
+        const sources = [...this.sources.value];
+        if (this._editedSourceIndex === -1) {
+            sources.push(source);
+        }
+        else {
+            sources[this._editedSourceIndex] = source;
+        }
+        this.sources.setValue(sources);
+        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/');
+        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.svg.setValue(e.target?.result);
+                };
+                reader.readAsText(file);
+            }
+        };
+        input.click();
+    }
+    setSvgFromClipboard() {
+        navigator.clipboard.readText().then((text) => {
+            this.svg.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 [];
+        }
+    }
+    // #endregion
+    // #region element features
+    onTabIndexChange(index) {
+        this.tabIndex = index;
+        if (index === 3) {
+            this.elements = 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 = id;
+    }
+    deleteElementFeatures(element) {
+        const id = element.id;
+        const elementFeatures = { ...this.elementFeatures.value };
+        delete elementFeatures[id];
+        this.elementFeatures.setValue(elementFeatures);
+        if (this.editedElementId === id) {
+            this.editedElementId = undefined;
+        }
+    }
+    onElementFeaturesChange(features) {
+        if (this.editedElementId) {
+            this.elementFeatures.setValue({
+                ...this.elementFeatures.value,
+                [this.editedElementId]: features,
+            });
+        }
+    }
+    // #endregion
+    updateArgsUI() {
+        let to = false, toRun = false, value = false;
+        switch (this.type.value) {
+            case OperationType.moveAfter:
+            case OperationType.moveBefore:
+                to = true;
+                break;
+            case OperationType.swap:
+                to = true;
+                toRun = true;
+                break;
+            case OperationType.addAfter:
+            case OperationType.addBefore:
+            case OperationType.replace:
+                value = true;
+                break;
+        }
+        this.hasTo = to;
+        this.hasToRun = toRun;
+        this.hasValue = value;
+        if (!to) {
+            this.to.reset();
+        }
+        if (!toRun) {
+            this.toRun.reset();
+        }
+        if (!value) {
+            this.value.reset();
+        }
+    }
+    updateForm(operation) {
+        if (!operation) {
+            this.form.reset();
+            this.updateArgsUI();
+            return;
+        }
+        // get or generate ID
+        if (operation.id) {
+            this.id = operation.id;
+        }
+        else {
+            this.id = this._nanoid();
+        }
+        this.rank.setValue(operation.rank || 0);
+        this.groupId.setValue(operation.groupId || null);
+        this.features.setValue(operation.features || []);
+        this.sources.setValue(operation.sources || []);
+        this.dpFeatures.setValue(operation.diplomatics?.features || []);
+        this.type.setValue(operation.type);
+        this.at.setValue(operation.at);
+        this.atAsIndex.setValue(operation.atAsIndex || false);
+        this.to.setValue(operation.to || 0);
+        this.toAsIndex.setValue(operation.toAsIndex || false);
+        this.inputTag.setValue(operation.inputTag || null);
+        this.outputTag.setValue(operation.outputTag || null);
+        this.run.setValue(operation.run);
+        this.toRun.setValue(operation.toRun || 0);
+        this.value.setValue(operation.value || null);
+        this.svg.setValue(operation.diplomatics?.g || '');
+        this._editorModel?.setValue(this.svg.value || '');
+        this.elementFeatures.setValue(operation.diplomatics?.elementFeatures || {});
+        this.form.markAsPristine();
+        this.elements = this.parseSvg(operation.diplomatics?.g);
+        // SVG
+        this.requestPreview();
+        this.updateArgsUI();
+    }
+    cancel() {
+        this.operationCancel.emit();
+    }
+    getOperation() {
+        return {
+            rank: this.rank.value,
+            groupId: this.groupId.value || undefined,
+            features: this.features.value,
+            sources: this.sources.value?.length ? this.sources.value : undefined,
+            diplomatics: {
+                g: this.svg.value,
+                features: this.dpFeatures.value,
+                elementFeatures: this.elementFeatures.value,
+            },
+            id: this.id,
+            type: this.type.value,
+            at: this.at.value,
+            atAsIndex: this.atAsIndex.value,
+            to: this.to.value,
+            toAsIndex: this.toAsIndex.value,
+            inputTag: this.inputTag.value || undefined,
+            outputTag: this.outputTag.value || undefined,
+            run: this.run.value,
+            toRun: this.toRun.value,
+            value: this.value.value || undefined,
+        };
+    }
+    requestPreview() {
+        this.operationPreview.emit(this.getOperation());
+    }
+    save() {
+        if (!this.form.valid) {
+            return;
+        }
+        this._operation = this.getOperation();
+        this.operationChange.emit(this._operation);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ChainOperationEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i2$3.Clipboard }, { token: SettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: ChainOperationEditorComponent, isStandalone: true, selector: "gve-chain-operation-editor", inputs: { operation: "operation", snapshot: "snapshot", hidePreview: "hidePreview" }, outputs: { operationChange: "operationChange", operationPreview: "operationPreview", operationCancel: "operationCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group\r\n    [selectedIndex]=\"tabIndex\"\r\n    (selectedIndexChange)=\"onTabIndexChange($event)\"\r\n  >\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"0\">replace</mat-option>\r\n            <mat-option [value]=\"1\">delete</mat-option>\r\n            <mat-option [value]=\"2\">add-before</mat-option>\r\n            <mat-option [value]=\"3\">add-after</mat-option>\r\n            <mat-option [value]=\"4\">move-before</mat-option>\r\n            <mat-option [value]=\"5\">move-after</mat-option>\r\n            <mat-option [value]=\"6\">swap</mat-option>\r\n            <mat-option [value]=\"7\">annotate</mat-option>\r\n          </mat-select>\r\n          <mat-error\r\n            *ngIf=\"$any(type).errors?.required && (type.dirty || type.touched)\"\r\n            >type required</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(at).errors?.required && (at.dirty || at.touched)\"\r\n            >at required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(run).errors?.required && (run.dirty || run.touched)\"\r\n            >run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to</mat-label>\r\n          <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(to).errors?.required && (to.dirty || to.touched)\"\r\n            >to required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- toAsIndex -->\r\n        <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- toRun -->\r\n        @if (hasToRun) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to run</mat-label>\r\n          <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n            \"\r\n            >to run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n        } }\r\n\r\n        <!-- value -->\r\n        @if (hasValue) {\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(rank).errors?.required && (rank.dirty || rank.touched)\"\r\n            >rank required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(groupId).errors?.required &&\r\n              (groupId.dirty || groupId.touched)\r\n            \"\r\n            >group ID required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [features]=\"features.value\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          ></gve-feature-set-editor>\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                (click)=\"editSource($index)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button type=\"button\" mat-icon-button color=\"warn\">\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>{{ s.type }}</td>\r\n            <td>{{ s.id }}</td>\r\n            <td>{{ s.rank }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- source editor -->\r\n      <mat-expansion-panel [disabled]=\"!editedSource\" [expanded]=\"editedSource\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>source</mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <gve-operation-source-editor\r\n          [source]=\"editedSource\"\r\n          (sourceChange)=\"onSourceChange($event!)\"\r\n          (sourceCancel)=\"closeSource()\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DIPLOMATIC -->\r\n    <mat-tab label=\"diplomatic\">\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          id=\"btn-save\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Save to file\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"saveSvg()\"\r\n        >\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-load\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Load from file\"\r\n          (click)=\"loadSvg()\"\r\n        >\r\n          <mat-icon>folder</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-copy\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Copy\"\r\n          [cdkCopyToClipboard]=\"svg.value\"\r\n        >\r\n          <mat-icon>content_copy</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-paste\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Set SVG from clipboard\"\r\n          (click)=\"setSvgFromClipboard()\"\r\n        >\r\n          <mat-icon>content_paste_go</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-editor\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Open SVG external editor\"\r\n          (click)=\"openSvgEditor()\"\r\n        >\r\n          <mat-icon>launch</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div id=\"code\">\r\n        <nge-monaco-editor\r\n          style=\"--editor-height: 400px\"\r\n          (ready)=\"onCreateEditor($event)\"\r\n        />\r\n        @if (svg.invalid) {\r\n        <mat-error>invalid SVG</mat-error>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- ELEMENTS -->\r\n    <mat-tab label=\"elements\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>id</th>\r\n            <th>visual</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (e of elements; track e.id) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                (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                (click)=\"deleteElementFeatures(e)\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>{{ e.id }}</td>\r\n            <td class=\"svg-cell\">\r\n              <svg [innerHTML]=\"e.outerHTML | safeHtml : 'html'\"></svg>\r\n            </td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n\r\n      <mat-expansion-panel\r\n        [disabled]=\"!editedElementId\"\r\n        [expanded]=\"editedElementId\"\r\n      >\r\n        <mat-expansion-panel-header>element</mat-expansion-panel-header>\r\n        <gve-feature-set-editor\r\n          [features]=\"elementFeatures.value[editedElementId!] || []\"\r\n          (featuresChange)=\"onElementFeaturesChange($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DP FEATS -->\r\n    <mat-tab label=\"d-features\">\r\n      <gve-feature-set-editor\r\n        [features]=\"dpFeatures.value\"\r\n        (featuresChange)=\"onDpFeaturesChange($event)\"\r\n      ></gve-feature-set-editor>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\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=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid silver}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:5em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:#beb9b9;color:#fff;margin-top:-16px}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:silver}table{width:100%;border-collapse:collapse;margin:8px 0}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr{border-bottom:1px solid silver}th,td{text-align:center}#btn-save{color:#072d3e}#btn-load{color:#dbd112}#btn-copy{color:#22549f}#btn-preview{color:#095409}#code{height:500px;border:1px solid silver}#monaco{height:100%}.svg-cell{padding:0 8px}.svg-cell svg{border:1px solid silver;width:100%;height:auto}#preview{box-sizing:border-box;width:100%;border:1px solid silver;border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:#e5e5e5}.child-title{font-weight:700;margin:0;background-color:#ccc;color:#fff;padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid silver;border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid silver;border-radius:6px;margin:8px 0}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
+                // material
+                ClipboardModule }, { kind: "directive", type: i2$3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: 
+                // monaco
+                NgeMonacoModule }, { kind: "component", type: i15.NgeMonacoEditorComponent, selector: "nge-monaco-editor", inputs: ["autoLayout", "options"], outputs: ["ready"] }, { kind: "ngmodule", type: NgToolsModule }, { kind: "pipe", type: i2$1.SafeHtmlPipe, name: "safeHtml" }, { kind: "ngmodule", type: NgMatToolsModule }, { kind: "component", type: 
+                // myrmex
+                FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "noFilter", "features"], outputs: ["featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-chain-operation-editor', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        // material
+                        ClipboardModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTabsModule,
+                        MatTooltipModule,
+                        // monaco
+                        NgeMonacoModule,
+                        NgToolsModule,
+                        NgMatToolsModule,
+                        // myrmex
+                        FeatureSetEditorComponent,
+                        SimpleTreeComponent,
+                        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\">replace</mat-option>\r\n            <mat-option [value]=\"1\">delete</mat-option>\r\n            <mat-option [value]=\"2\">add-before</mat-option>\r\n            <mat-option [value]=\"3\">add-after</mat-option>\r\n            <mat-option [value]=\"4\">move-before</mat-option>\r\n            <mat-option [value]=\"5\">move-after</mat-option>\r\n            <mat-option [value]=\"6\">swap</mat-option>\r\n            <mat-option [value]=\"7\">annotate</mat-option>\r\n          </mat-select>\r\n          <mat-error\r\n            *ngIf=\"$any(type).errors?.required && (type.dirty || type.touched)\"\r\n            >type required</mat-error\r\n          >\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(at).errors?.required && (at.dirty || at.touched)\"\r\n            >at required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(run).errors?.required && (run.dirty || run.touched)\"\r\n            >run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to</mat-label>\r\n          <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(to).errors?.required && (to.dirty || to.touched)\"\r\n            >to required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- toAsIndex -->\r\n        <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- toRun -->\r\n        @if (hasToRun) {\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>to run</mat-label>\r\n          <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n            \"\r\n            >to run required</mat-error\r\n          >\r\n        </mat-form-field>\r\n        } }\r\n\r\n        <!-- value -->\r\n        @if (hasValue) {\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          <mat-error\r\n            *ngIf=\"$any(rank).errors?.required && (rank.dirty || rank.touched)\"\r\n            >rank required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          <mat-error\r\n            *ngIf=\"\r\n              $any(groupId).errors?.required &&\r\n              (groupId.dirty || groupId.touched)\r\n            \"\r\n            >group ID required</mat-error\r\n          >\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [features]=\"features.value\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          ></gve-feature-set-editor>\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                (click)=\"editSource($index)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <button type=\"button\" mat-icon-button color=\"warn\">\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>{{ s.type }}</td>\r\n            <td>{{ s.id }}</td>\r\n            <td>{{ s.rank }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- source editor -->\r\n      <mat-expansion-panel [disabled]=\"!editedSource\" [expanded]=\"editedSource\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>source</mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <gve-operation-source-editor\r\n          [source]=\"editedSource\"\r\n          (sourceChange)=\"onSourceChange($event!)\"\r\n          (sourceCancel)=\"closeSource()\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DIPLOMATIC -->\r\n    <mat-tab label=\"diplomatic\">\r\n      <div class=\"toolbar-row\">\r\n        <button\r\n          id=\"btn-save\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Save to file\"\r\n          [disabled]=\"!svg.value\"\r\n          (click)=\"saveSvg()\"\r\n        >\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-load\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Load from file\"\r\n          (click)=\"loadSvg()\"\r\n        >\r\n          <mat-icon>folder</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-copy\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Copy\"\r\n          [cdkCopyToClipboard]=\"svg.value\"\r\n        >\r\n          <mat-icon>content_copy</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-paste\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Set SVG from clipboard\"\r\n          (click)=\"setSvgFromClipboard()\"\r\n        >\r\n          <mat-icon>content_paste_go</mat-icon>\r\n        </button>\r\n        <button\r\n          id=\"btn-editor\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTooltip=\"Open SVG external editor\"\r\n          (click)=\"openSvgEditor()\"\r\n        >\r\n          <mat-icon>launch</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div id=\"code\">\r\n        <nge-monaco-editor\r\n          style=\"--editor-height: 400px\"\r\n          (ready)=\"onCreateEditor($event)\"\r\n        />\r\n        @if (svg.invalid) {\r\n        <mat-error>invalid SVG</mat-error>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- ELEMENTS -->\r\n    <mat-tab label=\"elements\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>id</th>\r\n            <th>visual</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (e of elements; track e.id) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                color=\"primary\"\r\n                (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                (click)=\"deleteElementFeatures(e)\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>{{ e.id }}</td>\r\n            <td class=\"svg-cell\">\r\n              <svg [innerHTML]=\"e.outerHTML | safeHtml : 'html'\"></svg>\r\n            </td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n\r\n      <mat-expansion-panel\r\n        [disabled]=\"!editedElementId\"\r\n        [expanded]=\"editedElementId\"\r\n      >\r\n        <mat-expansion-panel-header>element</mat-expansion-panel-header>\r\n        <gve-feature-set-editor\r\n          [features]=\"elementFeatures.value[editedElementId!] || []\"\r\n          (featuresChange)=\"onElementFeaturesChange($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- DP FEATS -->\r\n    <mat-tab label=\"d-features\">\r\n      <gve-feature-set-editor\r\n        [features]=\"dpFeatures.value\"\r\n        (featuresChange)=\"onDpFeaturesChange($event)\"\r\n      ></gve-feature-set-editor>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\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=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid silver}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:5em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:#beb9b9;color:#fff;margin-top:-16px}fieldset{border:1px solid silver;border-radius:6px;padding:8px;margin:8px 0}legend{color:silver}table{width:100%;border-collapse:collapse;margin:8px 0}th{color:#909090;font-weight:400;text-align:left;background-color:#e1e0e0}th,td{padding:4px;border-bottom:1px solid silver}tbody tr:nth-child(2n){background-color:#e8e8e8}td.fit-width{width:1px;white-space:nowrap}tr{border-bottom:1px solid silver}th,td{text-align:center}#btn-save{color:#072d3e}#btn-load{color:#dbd112}#btn-copy{color:#22549f}#btn-preview{color:#095409}#code{height:500px;border:1px solid silver}#monaco{height:100%}.svg-cell{padding:0 8px}.svg-cell svg{border:1px solid silver;width:100%;height:auto}#preview{box-sizing:border-box;width:100%;border:1px solid silver;border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:#e5e5e5}.child-title{font-weight:700;margin:0;background-color:#ccc;color:#fff;padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid silver;border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid silver;border-radius:6px;margin:8px 0}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$3.Clipboard }, { type: SettingsService }], propDecorators: { operation: [{
+                type: Input
+            }], snapshot: [{
+                type: Input
+            }], hidePreview: [{
+                type: Input
+            }], operationChange: [{
+                type: Output
+            }], operationPreview: [{
+                type: Output
+            }], operationCancel: [{
+                type: Output
+            }] } });
+
+class FeatureSetViewComponent {
+    /**
+     * The features.
+     */
+    get features() {
+        return this._features;
+    }
+    set features(value) {
+        if (this._features === value) {
+            return;
+        }
+        this._features = value || undefined;
+        this.filter.reset();
+        this.applyFeatureFilter();
+    }
+    constructor(formBuilder) {
+        this._features = [];
+        /**
+         * The minimum count of features required for filter to be visible.
+         */
+        this.minFilterCount = 6;
+        this.filteredFeatures = [];
+        this.filter = formBuilder.control(null);
+    }
+    applyFeatureFilter(name) {
+        this.filteredFeatures = this._features.filter((feature) => {
+            return !name || feature.name.toLowerCase().includes(name.toLowerCase());
+        });
+    }
+    ngOnInit() {
+        this._sub = this.filter.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(300))
+            .subscribe((value) => {
+            this.applyFeatureFilter(value);
+        });
+        this.applyFeatureFilter();
+    }
+    ngOnDestroy() {
+        this._sub?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FeatureSetViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: FeatureSetViewComponent, isStandalone: true, selector: "gve-feature-set-view", inputs: { features: "features", featNames: "featNames", featValues: "featValues", minFilterCount: "minFilterCount" }, ngImport: i0, template: "<div>\r\n  <!-- filter -->\r\n  <div>\r\n    @if (features.length && features.length >= minFilterCount) {\r\n    <div class=\"form-row\">\r\n      <mat-form-field id=\"filter\">\r\n        <mat-label>filter</mat-label>\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      <span>{{ filteredFeatures.length }}</span>\r\n    </div>\r\n    }\r\n\r\n    <!-- list -->\r\n    @if (filteredFeatures.length) {\r\n    <table>\r\n      <tbody>\r\n        @for (feature of filteredFeatures; track feature) {\r\n        <tr>\r\n          <th>\r\n            @if (featNames?.length) {\r\n            <span>{{\r\n              feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.name }}</span>\r\n            }\r\n          </th>\r\n          <td>\r\n            @if (featValues) {\r\n            <span>{{\r\n              feature.value | flatLookup : featValues[feature.name]\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.value }}</span>\r\n            }\r\n          </td>\r\n        </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse}th{text-align:left;background-color:#c8d9eb;color:#333;font-weight:400}th,td{border:1px solid silver;padding:4px}tr:nth-child(2n){background-color:#dfdfdf}#filter{width:7em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: NgToolsModule }, { kind: "pipe", type: i2$1.FlatLookupPipe, name: "flatLookup" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FeatureSetViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-feature-set-view', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        NgToolsModule,
+                    ], template: "<div>\r\n  <!-- filter -->\r\n  <div>\r\n    @if (features.length && features.length >= minFilterCount) {\r\n    <div class=\"form-row\">\r\n      <mat-form-field id=\"filter\">\r\n        <mat-label>filter</mat-label>\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      <span>{{ filteredFeatures.length }}</span>\r\n    </div>\r\n    }\r\n\r\n    <!-- list -->\r\n    @if (filteredFeatures.length) {\r\n    <table>\r\n      <tbody>\r\n        @for (feature of filteredFeatures; track feature) {\r\n        <tr>\r\n          <th>\r\n            @if (featNames?.length) {\r\n            <span>{{\r\n              feature.name | flatLookup : featNames : \"id\" : \"label\"\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.name }}</span>\r\n            }\r\n          </th>\r\n          <td>\r\n            @if (featValues) {\r\n            <span>{{\r\n              feature.value | flatLookup : featValues[feature.name]\r\n            }}</span>\r\n            } @else {\r\n            <span>{{ feature.value }}</span>\r\n            }\r\n          </td>\r\n        </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse}th{text-align:left;background-color:#c8d9eb;color:#333;font-weight:400}th,td{border:1px solid silver;padding:4px}tr:nth-child(2n){background-color:#dfdfdf}#filter{width:7em}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { features: [{
+                type: Input
+            }], featNames: [{
+                type: Input
+            }], featValues: [{
+                type: Input
+            }], minFilterCount: [{
+                type: Input
+            }] } });
+
+/**
+ * A map of steps in a chain operation context.
+ */
+class StepsMapComponent {
+    constructor() {
+        /**
+         * The font size of the steps text.
+         */
+        this.textFontSize = '0.5em';
+        /**
+         * Emitted when the selectd step has changed.
+         */
+        this.selectedStepChange = new EventEmitter();
+    }
+    /**
+     * The steps to display.
+     */
+    get steps() {
+        return this._steps;
+    }
+    set steps(value) {
+        if (this._steps === value) {
+            return;
+        }
+        this.selectedStep = undefined;
+        this._steps = value || undefined;
+    }
+    onSelectStep(step) {
+        this.selectedStep = step;
+        this.selectedStepChange.emit(step);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: StepsMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: StepsMapComponent, isStandalone: true, selector: "gve-steps-map", inputs: { steps: "steps", selectedStep: "selectedStep", textFontSize: "textFontSize" }, outputs: { selectedStepChange: "selectedStepChange" }, ngImport: i0, template: "<div>\r\n  @if (steps?.length) { @for (step of steps; track step.outputTag) {\r\n  <div\r\n    matRipple\r\n    class=\"step form-row\"\r\n    [ngClass]=\"{ selected: step === selectedStep }\"\r\n    (click)=\"onSelectStep(step)\"\r\n  >\r\n    <div class=\"tag\">\r\n      <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n      {{ step.outputTag }}\r\n    </div>\r\n    <div class=\"text\" [style.fontSize]=\"textFontSize\">{{ step.result }}</div>\r\n  </div>\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}.selected{background-color:#fbfb9d}.step{border-top:1px solid rgb(68,114,253);border-bottom:1px solid rgb(68,114,253);border-right:1px solid rgb(68,114,253);border-radius:6px;margin:8px 0}.tag{background-color:#4472fd;color:#fff;border:1px solid rgb(68,114,253);border-radius:6px;padding:4px;cursor:pointer}.muted-tag{color:silver}.text{font-size:.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: StepsMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-steps-map', standalone: true, imports: [CommonModule, MatButtonModule, MatRippleModule, MatTooltipModule], template: "<div>\r\n  @if (steps?.length) { @for (step of steps; track step.outputTag) {\r\n  <div\r\n    matRipple\r\n    class=\"step form-row\"\r\n    [ngClass]=\"{ selected: step === selectedStep }\"\r\n    (click)=\"onSelectStep(step)\"\r\n  >\r\n    <div class=\"tag\">\r\n      <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n      {{ step.outputTag }}\r\n    </div>\r\n    <div class=\"text\" [style.fontSize]=\"textFontSize\">{{ step.result }}</div>\r\n  </div>\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}.selected{background-color:#fbfb9d}.step{border-top:1px solid rgb(68,114,253);border-bottom:1px solid rgb(68,114,253);border-right:1px solid rgb(68,114,253);border-radius:6px;margin:8px 0}.tag{background-color:#4472fd;color:#fff;border:1px solid rgb(68,114,253);border-radius:6px;padding:4px;cursor:pointer}.muted-tag{color:silver}.text{font-size:.5em}\n"] }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }], selectedStep: [{
+                type: Input
+            }], textFontSize: [{
+                type: Input
+            }], selectedStepChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Component to display a chain result.
+ */
+class ChainResultViewComponent {
+    /**
+     * The result to display.
+     */
+    get result() {
+        return this._result;
+    }
+    set result(value) {
+        if (this._result === value) {
+            return;
+        }
+        this._result = value || undefined;
+        this.updateForm(this._result);
+        // select last step by default
+        if (this._result?.steps?.length) {
+            this._stepPickFrozen = true;
+            this.step = this._result.steps[this._result.steps.length - 1];
+            this.tag.setValue(this.step.outputTag);
+            this._stepPickFrozen = false;
+        }
+    }
+    constructor(formBuilder) {
+        /**
+         * Emits when a result's step is picked.
+         */
+        this.stepPick = new EventEmitter();
+        this.versionTags = [];
+        this.tags = [];
+        this.selectionFeatures = [];
+        this.versionTag = formBuilder.control(null);
+        this.tag = formBuilder.control(null);
+    }
+    ngOnInit() {
+        this._subs = [
+            this.versionTag.valueChanges
+                .pipe(distinctUntilChanged(), debounceTime(200))
+                .subscribe((value) => {
+                this.tag.setValue(this.getTagFromVersion(value) || null);
+            }),
+            this.tag.valueChanges
+                .pipe(distinctUntilChanged(), debounceTime(200))
+                .subscribe((value) => {
+                this.step = this._result?.steps.find((step) => step.outputTag === value);
+                if (this.step && !this._stepPickFrozen) {
+                    this.stepPick.emit(this.step);
+                }
+            }),
+        ];
+    }
+    ngOnDestroy() {
+        this._subs?.forEach((sub) => sub.unsubscribe());
+    }
+    updateVersionTags() {
+        if (!this._result) {
+            this.versionTags = [];
+            return;
+        }
+        // extract version tags from result steps features named 'version'
+        const tags = new Set();
+        for (const step of this._result.steps) {
+            for (const feature of step.featureSet.features) {
+                if (feature.name === 'version') {
+                    tags.add(feature.value);
+                }
+            }
+        }
+        this.versionTags = Array.from(tags).sort();
+    }
+    getTagFromVersion(version) {
+        if (!this._result || !version) {
+            return undefined;
+        }
+        for (const step of this._result.steps) {
+            for (const feature of step.featureSet.features) {
+                if (feature.name === 'version' && feature.value === version) {
+                    return step.outputTag;
+                }
+            }
+        }
+        return undefined;
+    }
+    updateForm(result) {
+        this.selectionFeatures = [];
+        if (!result) {
+            this.step = undefined;
+            this.selection = undefined;
+            this.tags = [];
+            this.versionTags = [];
+        }
+        else {
+            this.tags = result.chainTags;
+            this.updateVersionTags();
+        }
+    }
+    getNodeFeatures(id) {
+        if (!this.step) {
+            return [];
+        }
+        return (this.step.featureSet.nodeFeatures[this.step.outputTag + '_' + id] || []);
+    }
+    findNode(id) {
+        if (!this.step) {
+            return null;
+        }
+        for (let key of Object.keys(this._result.taggedNodes)) {
+            const node = this._result.taggedNodes[key].find((n) => n.id === id);
+            if (node) {
+                return node;
+            }
+        }
+        return null;
+    }
+    onStepCharPick(event) {
+        const features = this.getNodeFeatures(event.char.id);
+        const node = this.findNode(event.char.id);
+        this.selection = `${event.char.label} (${node.sourceTag})`;
+        this.selectionFeatures = [...features];
+    }
+    onStepRangePick(range) {
+        if (range.run === 1) {
+            // already handled by onStepCharPick
+            return;
+        }
+        this.selection = range.at + '×' + range.run;
+        const end = range.at + range.run;
+        const features = [];
+        const tagNodes = this._result.taggedNodes[this.tag.value];
+        for (let node of tagNodes) {
+            // if in range, intersect features
+            if (node.id >= range.at && node.id < end) {
+                const nodeFeatures = this.getNodeFeatures(node.id);
+                if (node.id === range.at) {
+                    for (let f of nodeFeatures) {
+                        features.push(f);
+                    }
+                }
+                else {
+                    // features = intersection of features and charFeatures
+                    features.splice(0, features.length, ...features.filter((f) => nodeFeatures.some((cf) => cf.name === f.name)));
+                }
+            }
+        }
+        this.selectionFeatures = features;
+    }
+    onStepChange(step) {
+        this.tag.setValue(step.outputTag);
+        this.selectionFeatures = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ChainResultViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: ChainResultViewComponent, isStandalone: true, selector: "gve-chain-result-view", inputs: { result: "result" }, outputs: { stepPick: "stepPick" }, ngImport: i0, template: "@if (result) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    <mat-form-field *ngIf=\"versionTags?.length\">\r\n      <mat-label>version</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        <mat-option *ngFor=\"let t of versionTags\" [value]=\"t\">{{\r\n          t\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!-- tag -->\r\n    <mat-form-field *ngIf=\"tags?.length\">\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        <mat-option *ngFor=\"let t of tags\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- step -->\r\n  @if (step) {\r\n  <div id=\"step\">\r\n    <!-- text -->\r\n    <div id=\"text\">\r\n      <gve-base-text-view\r\n        [text]=\"result.taggedNodes[step.outputTag]\"\r\n        (charPick)=\"onStepCharPick($event)\"\r\n        (rangePick)=\"onStepRangePick($event)\"\r\n      />\r\n    </div>\r\n    <!-- features -->\r\n    <div id=\"feats\" class=\"form-row-top\">\r\n      <div id=\"g-feats\">\r\n        <div class=\"feat-header\">{{ step.outputTag }}</div>\r\n        <gve-feature-set-view [features]=\"step.featureSet.features\" />\r\n      </div>\r\n      <div id=\"n-feats\">\r\n        @if (selectionFeatures.length) {\r\n        <div class=\"feat-header\">{{ selection }}</div>\r\n        <gve-feature-set-view [features]=\"selectionFeatures\" />\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- steps map -->\r\n  <div id=\"map\">\r\n    <gve-steps-map\r\n      [steps]=\"result.steps\"\r\n      [selectedStep]=\"step\"\r\n      (selectedStepChange)=\"onStepChange($event)\"\r\n    />\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row-top{display:flex;gap:8px;align-items:start;flex-wrap:wrap}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px}div#bar{grid-area:bar}div#map{grid-area:map}div#step{grid-area:step}.feat-header{background-color:#3e92cc;color:#fff;text-align:center;border:1px solid #3e92cc;border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"bar\" \"step\"}#map{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FeatureSetViewComponent, selector: "gve-feature-set-view", inputs: ["features", "featNames", "featValues", "minFilterCount"] }, { 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"], outputs: ["charPick", "rangePick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ChainResultViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-chain-result-view', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        FeatureSetViewComponent,
+                        StepsMapComponent,
+                        BaseTextViewComponent,
+                    ], template: "@if (result) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    <mat-form-field *ngIf=\"versionTags?.length\">\r\n      <mat-label>version</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        <mat-option *ngFor=\"let t of versionTags\" [value]=\"t\">{{\r\n          t\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!-- tag -->\r\n    <mat-form-field *ngIf=\"tags?.length\">\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        <mat-option *ngFor=\"let t of tags\" [value]=\"t\">{{ t }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- step -->\r\n  @if (step) {\r\n  <div id=\"step\">\r\n    <!-- text -->\r\n    <div id=\"text\">\r\n      <gve-base-text-view\r\n        [text]=\"result.taggedNodes[step.outputTag]\"\r\n        (charPick)=\"onStepCharPick($event)\"\r\n        (rangePick)=\"onStepRangePick($event)\"\r\n      />\r\n    </div>\r\n    <!-- features -->\r\n    <div id=\"feats\" class=\"form-row-top\">\r\n      <div id=\"g-feats\">\r\n        <div class=\"feat-header\">{{ step.outputTag }}</div>\r\n        <gve-feature-set-view [features]=\"step.featureSet.features\" />\r\n      </div>\r\n      <div id=\"n-feats\">\r\n        @if (selectionFeatures.length) {\r\n        <div class=\"feat-header\">{{ selection }}</div>\r\n        <gve-feature-set-view [features]=\"selectionFeatures\" />\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- steps map -->\r\n  <div id=\"map\">\r\n    <gve-steps-map\r\n      [steps]=\"result.steps\"\r\n      [selectedStep]=\"step\"\r\n      (selectedStepChange)=\"onStepChange($event)\"\r\n    />\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row-top{display:flex;gap:8px;align-items:start;flex-wrap:wrap}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px}div#bar{grid-area:bar}div#map{grid-area:map}div#step{grid-area:step}.feat-header{background-color:#3e92cc;color:#fff;text-align:center;border:1px solid #3e92cc;border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (max-width: 959px){div#container{grid-template-columns:1fr;grid-template-areas:\"bar\" \"step\"}#map{display:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { result: [{
+                type: Input
+            }], stepPick: [{
+                type: Output
+            }] } });
+
+class LnHeightsEditorComponent {
+    get lineCount() {
+        return this._lineCount;
+    }
+    set lineCount(value) {
+        if (this._lineCount === value)
+            return;
+        this._lineCount = value;
+        this.lineNumbers = Array.from({ length: value }, (_, i) => i + 1);
+    }
+    get heights() {
+        return this._heights;
+    }
+    set heights(value) {
+        if (this._heights === value)
+            return;
+        this._heights = value || undefined;
+    }
+    constructor(formBuilder) {
+        this._lineCount = 0;
+        this.heightsChange = new EventEmitter();
+        this.lineNumbers = [];
+        this.lineNumber = formBuilder.control(0, { nonNullable: true });
+        this.height = formBuilder.control(0, { nonNullable: true });
+    }
+    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)
+                return;
+            this._heights[this.lineNumber.value] = value;
+            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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: LnHeightsEditorComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: LnHeightsEditorComponent, isStandalone: true, selector: "gve-ln-heights-editor", inputs: { lineCount: "lineCount", heights: "heights" }, outputs: { heightsChange: "heightsChange" }, ngImport: i0, template: "@if (lineNumbers.length) {\r\n<div class=\"form-row\">\r\n  <!-- line number -->\r\n  <mat-form-field class=\"input-nr\">\r\n    <mat-label>line</mat-label>\r\n    <mat-select [formControl]=\"lineNumber\">\r\n      <mat-option *ngFor=\"let n of lineNumbers\" [value]=\"n\">\r\n        {{ n }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- height -->\r\n  <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  <!-- reset button -->\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    color=\"warn\"\r\n    (click)=\"reset()\"\r\n    matTooltip=\"Remove all the heights\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [".input-nr{width:5em}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: LnHeightsEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-ln-heights-editor', standalone: true, imports: [
+                        CommonModule,
+                        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      <mat-option *ngFor=\"let n of lineNumbers\" [value]=\"n\">\r\n        {{ n }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- height -->\r\n  <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  <!-- reset button -->\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    color=\"warn\"\r\n    (click)=\"reset()\"\r\n    matTooltip=\"Remove all the heights\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [".input-nr{width:5em}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { lineCount: [{
+                type: Input
+            }], heights: [{
+                type: Input
+            }], heightsChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Service to interact with the GVE API.
+ */
+class GveApiService {
+    constructor(_http, _error, _env) {
+        this._http = _http;
+        this._error = _error;
+        this._env = _env;
+    }
+    /**
+     * Parse the specified text into operations. Each operation is a line
+     * of the text.
+     * @param text The text to parse.
+     * @returns The operations.
+     */
+    parseOperations(text) {
+        return this._http
+            .post(`${this._env.get('apiUrl')}text/operations/parse`, {
+            text,
+        })
+            .pipe(catchError(this._error.handleError));
+    }
+    /**
+     * Run operations on the specified text.
+     *
+     * @param text The base text.
+     * @param operations The operations to run.
+     * @returns Result wrapper.
+     */
+    runOperations(text, operations) {
+        return this._http
+            .post(`${this._env.get('apiUrl')}text/operations/run`, {
+            text,
+            operations,
+        })
+            .pipe(catchError(this._error.handleError));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: GveApiService, deps: [{ token: i1$1.HttpClient }, { token: i2$1.ErrorService }, { token: i2$1.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: GveApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: GveApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2$1.ErrorService }, { type: i2$1.EnvService }] });
+
+const VIEW_TITLE = 'preview';
+/**
+ * A component to edit a text snapshot.
+ */
+class SnapshotEditorComponent {
+    /**
+     * The snapshot to edit.
+     */
+    get snapshot() {
+        return this._snapshot;
+    }
+    set snapshot(value) {
+        if (this._snapshot === value) {
+            return;
+        }
+        this._snapshot = value || undefined;
+        this.updateForm(this._snapshot);
+        this.updateViewData();
+    }
+    constructor(formBuilder, _api, _dialogService, _snackbar) {
+        this._api = _api;
+        this._dialogService = _dialogService;
+        this._snackbar = _snackbar;
+        /**
+         * Emitted when the user saves the edited snapshot.
+         */
+        this.snapshotChange = new EventEmitter();
+        /**
+         * Emitted when the user cancels the snapshot editing.
+         */
+        this.snapshotCancel = new EventEmitter();
+        this.editedOpIndex = -1;
+        this.opTypeMap = {
+            0: 'replace',
+            1: 'delete',
+            2: 'addBefore',
+            3: 'addAfter',
+            4: 'moveBefore',
+            5: 'moveAfter',
+            6: 'swap',
+            7: 'annotate',
+        };
+        this.lineCount = 0;
+        this.viewTitle = VIEW_TITLE;
+        this.rulers = true;
+        // general
+        this.width = new FormControl(800, { nonNullable: true });
+        this.height = new FormControl(600, { nonNullable: true });
+        this.style = new FormControl(null);
+        // 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.inputOps = new FormControl(null);
+        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);
+        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,
+            inputOps: this.inputOps,
+            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,
+        });
+    }
+    ngOnInit() {
+        if (this.batchOps) {
+            this.inputOps.setValue(this.batchOps);
+            this.parseOperations();
+        }
+    }
+    updateViewData(newOperation, snapshot, title = VIEW_TITLE) {
+        if (!snapshot) {
+            snapshot = this.getSnapshot();
+        }
+        // update or add new operation in copy
+        if (newOperation) {
+            const index = snapshot.operations.findIndex((op) => op.id === newOperation.id);
+            if (index > -1) {
+                snapshot.operations.splice(index, 1, newOperation);
+            }
+            else {
+                snapshot.operations.push(newOperation);
+            }
+        }
+        // update view data
+        this.viewTitle = title;
+        this.visualInfo = undefined;
+        this.viewData = {
+            snapshot: snapshot,
+            options: {
+                // debug: true,
+                delayedRender: true,
+                showRulers: true,
+                showGrid: true,
+                panZoom: true,
+            },
+        };
+    }
+    updateForm(snapshot) {
+        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);
+            this.baseText.setValue(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.inputOps.reset();
+            this.opStyle.setValue(snapshot.opStyle || null);
+        }
+        this.form.markAsPristine();
+    }
+    editNewOperation() {
+        this.editedOp = {
+            id: '',
+            type: 0,
+            at: this.textRange?.at || 0,
+            run: this.textRange?.run || 1,
+        };
+        this.editedOpIndex = -1;
+    }
+    editOperation(index) {
+        this.editedOp = this.operations.value[index];
+        this.editedOpIndex = index;
+    }
+    closeEditedOp() {
+        this.editedOp = undefined;
+        this.editedOpIndex = -1;
+    }
+    onOperationCancel() {
+        this.closeEditedOp();
+    }
+    onOperationChange(op) {
+        const operations = [...this.operations.value];
+        if (this.editedOpIndex > -1) {
+            operations.splice(this.editedOpIndex, 1, op);
+        }
+        else {
+            operations.push(op);
+        }
+        this.operations.setValue(operations);
+        this.operations.markAsDirty();
+        this.operations.updateValueAndValidity();
+        this.closeEditedOp();
+    }
+    deleteOperation(index) {
+        this._dialogService
+            .confirm('Confirm Deletion', `Delete operation "${this.operations.value[index].id}"?`)
+            .subscribe((yes) => {
+            if (yes) {
+                if (this.resultOperationId === this.operations.value[index].id) {
+                    this.resultOperationId = undefined;
+                }
+                const operations = [...this.operations.value];
+                operations.splice(index, 1);
+                this.operations.setValue(operations);
+                this.operations.markAsDirty();
+                this.operations.updateValueAndValidity();
+            }
+        });
+    }
+    onTextChange(text) {
+        this.baseText.setValue(text);
+        this.baseText.updateValueAndValidity();
+        this.baseText.markAsDirty();
+        if (!text.length) {
+            this.lineCount = 0;
+        }
+        else {
+            this.lineCount = text.filter((c) => c.data === '\n').length + 1;
+        }
+        this.textRange = undefined;
+        this.closeEditedOp();
+        this.operations.reset();
+        this.updateViewData();
+    }
+    onRangePick(range) {
+        this.textRange = range;
+    }
+    parseOperations() {
+        if (this.busy || !this.inputOps.value) {
+            return;
+        }
+        this._dialogService
+            .confirm('Confirm', 'Parse operations?')
+            .subscribe((yes) => {
+            if (yes) {
+                this.busy = true;
+                this.parseError = undefined;
+                this._api.parseOperations(this.inputOps.value).subscribe({
+                    next: (wrapper) => {
+                        const operations = [...this.operations.value];
+                        operations.push(...wrapper.result);
+                        this.operations.setValue(operations);
+                        this.operations.markAsDirty();
+                        this.operations.updateValueAndValidity();
+                        this.updateViewData();
+                    },
+                    error: (error) => {
+                        this.parseError = error.message;
+                    },
+                    complete: () => {
+                        this.busy = false;
+                    },
+                });
+            }
+        });
+    }
+    clearOperations() {
+        this._dialogService
+            .confirm('Confirm', 'Remove all operations?')
+            .subscribe((yes) => {
+            if (yes) {
+                this.resultOperationId = undefined;
+                this.operations.reset();
+                this.operations.markAsDirty();
+                this.operations.updateValueAndValidity();
+                this.updateViewData();
+            }
+        });
+    }
+    onOperationPreview(operation) {
+        this.updateViewData(operation);
+    }
+    runTo(index) {
+        const snapshot = this.getSnapshot();
+        if (!snapshot.text) {
+            return;
+        }
+        const operations = this.operations.value.slice(0, index + 1);
+        this.busy = true;
+        this._api.runOperations(snapshot.text, operations).subscribe({
+            next: (wrapper) => {
+                if (wrapper.error) {
+                    this._snackbar.open(wrapper.error, 'OK');
+                    return;
+                }
+                this.result = wrapper.result;
+                // TODO update view
+                // this.updateViewData(
+                //   undefined,
+                //   snapshot,
+                //   this.operations.value[index].outputTag
+                // );
+            },
+            error: (error) => {
+                console.error(error);
+                this._snackbar.open('Error running operations', 'OK');
+            },
+            complete: () => {
+                this.busy = false;
+            },
+        });
+    }
+    onStepPick(step) {
+        if (!this.result) {
+            return;
+        }
+        this.resultOperationId = step.operation.id;
+        // get snapshot for preview by updating its text and
+        // removing operations past the last executed
+        const stepNodes = this.result.taggedNodes[step.outputTag];
+        // we always display the original base text, just updating
+        // its nodes features to those of the picked step, and adding
+        // new nodes if they are not in the original text. It is assumed
+        // that these new nodes have a manually set position.
+        const snapshot = this.getSnapshot();
+        const nodes = deepCopy(snapshot.text);
+        for (const sn of stepNodes) {
+            const i = nodes.findIndex((n) => n.id === sn.id);
+            if (i > -1) {
+                nodes[i].features = sn.features;
+            }
+            else {
+                nodes.push(sn);
+            }
+        }
+        // find max ID in snapshot.text (=original) nodes,
+        // so that any ID greater than it belongs to new nodes
+        const maxOriginalId = snapshot.text.reduce((max, n) => Math.max(max, n.id), 0);
+        // append nodes introduced before the picked step if any
+        // (those introduced by the picked step have already been added)
+        const stepIndex = this.result.steps.indexOf(step);
+        for (let i = 0; i < stepIndex; i++) {
+            const stepNodes = this.result.taggedNodes[this.result.steps[i].outputTag];
+            for (const n of stepNodes) {
+                if (n.id > maxOriginalId && !nodes.find((x) => x.id === n.id)) {
+                    nodes.push(n);
+                }
+            }
+        }
+        snapshot.text = nodes;
+        const i = snapshot.operations.findIndex((o) => o.id === step.operation.id);
+        if (i > -1) {
+            snapshot.operations = snapshot.operations.slice(0, i + 1);
+        }
+        this.updateViewData(undefined, snapshot, step.outputTag);
+    }
+    onVisualEvent(event) {
+        const d = event.detail;
+        if (d.event.type === 'mouseover') {
+            const visual = d.source;
+            const sb = [];
+            sb.push('#' + visual.id);
+            sb.push(` (${visual.type})`);
+            if (visual.data?.label) {
+                sb.push(': ');
+                sb.push(visual.data.label);
+            }
+            if (visual.data?.features?.length) {
+                sb.push(visual.data.features
+                    .map((f) => `${f.name}=${f.value}`)
+                    .join('\n'));
+            }
+            this.visualInfo = sb.join('');
+        }
+    }
+    onHeightsChange(heights) {
+        this.lnHeights.setValue(heights || null);
+        this.lnHeights.markAsDirty();
+        this.lnHeights.updateValueAndValidity();
+    }
+    close() {
+        this.snapshotCancel.emit();
+    }
+    onSnapshotRender(event) {
+        this._renderer = event.detail.renderer;
+    }
+    toggleRulers() {
+        if (!this._renderer) {
+            return;
+        }
+        this.rulers = this._renderer.toggleRulers();
+    }
+    getSnapshot() {
+        const snapshot = {
+            size: {
+                width: this.width.value,
+                height: this.height.value,
+            },
+            style: this.style.value || undefined,
+            defs: this.defs.value || undefined,
+            text: 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,
+            timelines: {}, // TODO
+        };
+        // 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,
+                };
+            }
+        }
+        return snapshot;
+    }
+    save() {
+        if (this.form.invalid) {
+            return;
+        }
+        this._snapshot = this.getSnapshot();
+        this.snapshotChange.emit(this._snapshot);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: SnapshotEditorComponent, deps: [{ token: i1.FormBuilder }, { token: GveApiService }, { token: i2$2.DialogService }, { token: i4$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: SnapshotEditorComponent, isStandalone: true, selector: "gve-snapshot-editor", inputs: { snapshot: "snapshot", batchOps: "batchOps" }, outputs: { snapshotChange: "snapshotChange", snapshotCancel: "snapshotCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab label=\"text\">\r\n      <mat-expansion-panel [expanded]=\"!baseText.value\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <gve-base-text-editor\r\n          [text]=\"baseText.value\"\r\n          (textChange)=\"onTextChange($event)\"\r\n        />\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>\r\n              <gve-ln-heights-editor\r\n                [lineCount]=\"lineCount\"\r\n                [heights]=\"lnHeights.value\"\r\n                (heightsChange)=\"onHeightsChange($event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <!-- textStyle -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>text style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"textStyle\"\r\n                placeholder=\"text style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </fieldset>\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab label=\"operations\">\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            <!-- add op -->\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                [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></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 [ngClass]=\"{ selected: operation.id === resultOperationId }\">\r\n                <td class=\"fit-width\">\r\n                  <!-- edit -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    color=\"primary\"\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                    color=\"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                    color=\"accent\"\r\n                    (click)=\"runTo(index)\"\r\n                    matTooltip=\"Run to this operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                  </button>\r\n                </td>\r\n                <td>{{ operation.id }}</td>\r\n                <td>{{ operation.type | flatLookup : opTypeMap }}</td>\r\n                <td>{{ operation.at }}</td>\r\n                <td>{{ operation.run }}</td>\r\n                <td>{{ operation.value }}</td>\r\n                <td>{{ operation.inputTag }}</td>\r\n                <td>{{ operation.outputTag }}</td>\r\n                <td>{{ operation.groupId }}</td>\r\n                <td>{{ operation.features?.length }}</td>\r\n              </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          <mat-expansion-panel [expanded]=\"editedOp\" [disabled]=\"!editedOp\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [operation]=\"editedOp\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n\r\n          <div>\r\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"busy\" />\r\n          </div>\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\r\n          <!-- batch ops -->\r\n          <div>\r\n            <mat-expansion-panel>\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title>batch operations</mat-panel-title>\r\n              </mat-expansion-panel-header>\r\n              <fieldset>\r\n                <div id=\"batch-container\">\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]=\"inputOps\"\r\n                          placeholder=\"operations\"\r\n                          rows=\"8\"\r\n                          spellcheck=\"false\"\r\n                        ></textarea>\r\n                      </mat-form-field>\r\n                    </div>\r\n                    <div class=\"form-row\">\r\n                      <button\r\n                        type=\"button\"\r\n                        color=\"warn\"\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                        clear\r\n                      </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=\"Parse text and add results to the operations\"\r\n                        [disabled]=\"!inputOps.value || busy\"\r\n                        (click)=\"parseOperations()\"\r\n                      >\r\n                        batch add\r\n                      </button>\r\n                      @if (parseError) {\r\n                      <span class=\"error\">{{ parseError }}</span>\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\r\n                        output tags, separated by colon.\r\n                      </li>\r\n                      <li>\r\n                        prepend <code>&#x40;</code> to AT to use character\r\n                        indexes (0-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>,\r\n                        separated by space, where:\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\r\n                          feature (no value). Suffixes:\r\n                          <code>^</code>=short-lived (like\r\n                          <code>*version^=alpha</code>).\r\n                        </li>\r\n                        <li>\r\n                          OPERATOR is <code>=</code> (multiple),\r\n                          <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                    </ul>\r\n                  </div>\r\n                </div>\r\n              </fieldset>\r\n            </mat-expansion-panel>\r\n          </div>\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            (stepPick)=\"onStepPick($event)\"\r\n          />\r\n        </fieldset>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- image -->\r\n    <mat-tab label=\"image\">\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          </div>\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]=\"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          </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 alt=\"background\" [src]=\"imageUrl.value\" width=\"600\" />\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- preview -->\r\n  @if (snapshot) {\r\n  <fieldset id=\"preview\">\r\n    <legend class=\"button-row\">\r\n      <span>{{ viewTitle }}</span>\r\n      <button\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        type=\"button\"\r\n        matTooltip=\"Refresh preview\"\r\n        (click)=\"updateViewData()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">refresh</mat-icon>\r\n      </button>\r\n    </legend>\r\n    <gve-snapshot-view\r\n      [data]=\"viewData\"\r\n      (snapshotRender)=\"onSnapshotRender($any($event))\"\r\n      (visualEvent)=\"onVisualEvent($any($event))\"\r\n    />\r\n    <div>\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    </div>\r\n    @if (visualInfo) {\r\n    <div id=\"visual-info\">{{ visualInfo }}</div>\r\n    }\r\n  </fieldset>\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    <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 || 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-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{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}#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}div#batch-container{display:grid;gap:16px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"batch-input batch-help\"}div#batch-input{grid-area:batch-input}div#batch-help{grid-area:batch-help}div#batch-help strong{color:#ff8c00}#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}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}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}@media only screen and (max-width: 959px){div#batch-container{grid-template-columns:1fr;grid-template-areas:\"batch-input\" \"batch-help\"}div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "component", type: i7.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i4$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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: MatSnackBarModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: NgToolsModule }, { kind: "pipe", type: i2$1.FlatLookupPipe, name: "flatLookup" }, { kind: "component", type: BaseTextEditorComponent, selector: "gve-base-text-editor", inputs: ["text"], outputs: ["textChange"] }, { kind: "component", type: ChainOperationEditorComponent, selector: "gve-chain-operation-editor", inputs: ["operation", "snapshot", "hidePreview"], outputs: ["operationChange", "operationPreview", "operationCancel"] }, { kind: "component", type: ChainResultViewComponent, selector: "gve-chain-result-view", inputs: ["result"], outputs: ["stepPick"] }, { kind: "component", type: LnHeightsEditorComponent, selector: "gve-ln-heights-editor", inputs: ["lineCount", "heights"], outputs: ["heightsChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: SnapshotEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gve-snapshot-editor', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatCheckboxModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatProgressBarModule,
+                        MatSnackBarModule,
+                        MatTabsModule,
+                        MatTooltipModule,
+                        NgToolsModule,
+                        BaseTextEditorComponent,
+                        BaseTextViewComponent,
+                        ChainOperationEditorComponent,
+                        ChainResultViewComponent,
+                        LnHeightsEditorComponent,
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab label=\"text\">\r\n      <mat-expansion-panel [expanded]=\"!baseText.value\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <gve-base-text-editor\r\n          [text]=\"baseText.value\"\r\n          (textChange)=\"onTextChange($event)\"\r\n        />\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>\r\n              <gve-ln-heights-editor\r\n                [lineCount]=\"lineCount\"\r\n                [heights]=\"lnHeights.value\"\r\n                (heightsChange)=\"onHeightsChange($event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <!-- textStyle -->\r\n          <div>\r\n            <mat-form-field class=\"long-text\" appearance=\"outline\">\r\n              <mat-label>text style</mat-label>\r\n              <textarea\r\n                matInput\r\n                [formControl]=\"textStyle\"\r\n                placeholder=\"text style\"\r\n              ></textarea>\r\n            </mat-form-field>\r\n          </div>\r\n        </fieldset>\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab label=\"operations\">\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            <!-- add op -->\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                [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></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 [ngClass]=\"{ selected: operation.id === resultOperationId }\">\r\n                <td class=\"fit-width\">\r\n                  <!-- edit -->\r\n                  <button\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    color=\"primary\"\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                    color=\"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                    color=\"accent\"\r\n                    (click)=\"runTo(index)\"\r\n                    matTooltip=\"Run to this operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                  </button>\r\n                </td>\r\n                <td>{{ operation.id }}</td>\r\n                <td>{{ operation.type | flatLookup : opTypeMap }}</td>\r\n                <td>{{ operation.at }}</td>\r\n                <td>{{ operation.run }}</td>\r\n                <td>{{ operation.value }}</td>\r\n                <td>{{ operation.inputTag }}</td>\r\n                <td>{{ operation.outputTag }}</td>\r\n                <td>{{ operation.groupId }}</td>\r\n                <td>{{ operation.features?.length }}</td>\r\n              </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n          }\r\n\r\n          <!-- operation editor -->\r\n          <mat-expansion-panel [expanded]=\"editedOp\" [disabled]=\"!editedOp\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [operation]=\"editedOp\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n\r\n          <div>\r\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"busy\" />\r\n          </div>\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\r\n          <!-- batch ops -->\r\n          <div>\r\n            <mat-expansion-panel>\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title>batch operations</mat-panel-title>\r\n              </mat-expansion-panel-header>\r\n              <fieldset>\r\n                <div id=\"batch-container\">\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]=\"inputOps\"\r\n                          placeholder=\"operations\"\r\n                          rows=\"8\"\r\n                          spellcheck=\"false\"\r\n                        ></textarea>\r\n                      </mat-form-field>\r\n                    </div>\r\n                    <div class=\"form-row\">\r\n                      <button\r\n                        type=\"button\"\r\n                        color=\"warn\"\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                        clear\r\n                      </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=\"Parse text and add results to the operations\"\r\n                        [disabled]=\"!inputOps.value || busy\"\r\n                        (click)=\"parseOperations()\"\r\n                      >\r\n                        batch add\r\n                      </button>\r\n                      @if (parseError) {\r\n                      <span class=\"error\">{{ parseError }}</span>\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\r\n                        output tags, separated by colon.\r\n                      </li>\r\n                      <li>\r\n                        prepend <code>&#x40;</code> to AT to use character\r\n                        indexes (0-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>,\r\n                        separated by space, where:\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\r\n                          feature (no value). Suffixes:\r\n                          <code>^</code>=short-lived (like\r\n                          <code>*version^=alpha</code>).\r\n                        </li>\r\n                        <li>\r\n                          OPERATOR is <code>=</code> (multiple),\r\n                          <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                    </ul>\r\n                  </div>\r\n                </div>\r\n              </fieldset>\r\n            </mat-expansion-panel>\r\n          </div>\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            (stepPick)=\"onStepPick($event)\"\r\n          />\r\n        </fieldset>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- image -->\r\n    <mat-tab label=\"image\">\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          </div>\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]=\"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          </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 alt=\"background\" [src]=\"imageUrl.value\" width=\"600\" />\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- preview -->\r\n  @if (snapshot) {\r\n  <fieldset id=\"preview\">\r\n    <legend class=\"button-row\">\r\n      <span>{{ viewTitle }}</span>\r\n      <button\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        type=\"button\"\r\n        matTooltip=\"Refresh preview\"\r\n        (click)=\"updateViewData()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">refresh</mat-icon>\r\n      </button>\r\n    </legend>\r\n    <gve-snapshot-view\r\n      [data]=\"viewData\"\r\n      (snapshotRender)=\"onSnapshotRender($any($event))\"\r\n      (visualEvent)=\"onVisualEvent($any($event))\"\r\n    />\r\n    <div>\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    </div>\r\n    @if (visualInfo) {\r\n    <div id=\"visual-info\">{{ visualInfo }}</div>\r\n    }\r\n  </fieldset>\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    <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 || 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-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{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}#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}div#batch-container{display:grid;gap:16px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"batch-input batch-help\"}div#batch-input{grid-area:batch-input}div#batch-help{grid-area:batch-help}div#batch-help strong{color:#ff8c00}#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}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}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}@media only screen and (max-width: 959px){div#batch-container{grid-template-columns:1fr;grid-template-areas:\"batch-input\" \"batch-help\"}div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: GveApiService }, { type: i2$2.DialogService }, { type: i4$3.MatSnackBar }], propDecorators: { snapshot: [{
+                type: Input
+            }], batchOps: [{
+                type: Input
+            }], snapshotChange: [{
+                type: Output
+            }], snapshotCancel: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of gve-core
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AnimationTimelineComponent, AnimationTweenComponent, AnimationVarsComponent, BaseTextCharComponent, BaseTextEditorComponent, BaseTextViewComponent, ChainOperationEditorComponent, ChainResultViewComponent, FeatureEditorComponent, FeatureSetEditorComponent, FeatureSetViewComponent, GveApiService, LnHeightsEditorComponent, OperationSourceEditorComponent, SettingsService, SimpleTreeComponent, SnapshotEditorComponent, StepsMapComponent };
+//# sourceMappingURL=myrmidon-gve-core.mjs.map