@myrmidon/gve-core 5.0.3 → 6.0.0

package/{index.d.ts → types/myrmidon-gve-core.d.ts}

@@ -2,180 +2,139 @@ import { MatDialogConfig, MatDialogRef, MatDialog } from '@angular/material/dial
 import * as _angular_core from '@angular/core';
 import { OnInit, OnDestroy, ElementRef, AfterViewInit } from '@angular/core';
 import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
-import { GveAnimationTimeline, GveAnimationTween, TweenType, CharNode, Feature, CharChainOperation, OperationFeature, LabeledId, FeatureSetPolicy, SnapshotBase, OperationSource, OperationType, SnapshotViewComponent, Snapshot, SnapshotViewData, GveVisualEvent, SnapshotViewRenderEvent } from '@myrmidon/gve-snapshot-view';
 import { DialogService } from '@myrmidon/ngx-mat-tools';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { ErrorService, EnvService } from '@myrmidon/ngx-tools';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { GveSnapshotRendition, GveRenditionSettings } from '@myrmidon/gve-snapshot-rendition';
 
 /**
- * API call result wrapper.
+ * A labeled ID. This can be used when a feature is from a closed set,
+ * and you want to provide localized or human-readable labels for the
+ * possible values.
  */
-interface ResultWrapper<T> {
-    result?: T;
-    error?: string;
+interface LabeledId {
+    id: string;
+    label: string;
 }
 /**
- * PayloadMatDialogConfig is a MatDialogConfig with a payload, used
- * to pass data of type T to a dialog.
+ * A generic tree node.
  */
-interface PayloadMatDialogConfig<T> extends MatDialogConfig {
+interface TreeNode<T> {
+    label: string;
     payload?: T;
+    parent?: TreeNode<T>;
+    children?: TreeNode<T>[];
+    isExpanded?: boolean;
 }
-
 /**
- * 🔑 `gve-animation-timeline`
- *
- * A component to edit an animation timeline.
- * Used by the `gve-animation-timeline-set` component.
- *
- * - ▶️ `timeline` (`GveAnimationTimeline`): the animation timeline to edit.
- * - ▶️ `elementIds` (`string[]`): the IDs of the elements that can be selected
- * by the tween.
- * - ▶️ `tags` (`string[]`): the tags that can be used by the timeline.
- * - 🔥 `timelineChange` (`GveAnimationTimeline`): emitted when the timeline
- * is changed.
- * - 🔥 `timelineCancel` (`void`): emitted when the timeline editing is canceled.
+ * Generic name=value feature.
  */
-declare class AnimationTimelineComponent {
-    /**
-     * The animation timeline to edit.
-     */
-    readonly timeline: _angular_core.ModelSignal<GveAnimationTimeline | undefined>;
-    /**
-     * The IDs of the elements that can be selected by the tween.
-     * This list is used to allow the user to select an element from a dropdown.
-     */
-    readonly elementIds: _angular_core.InputSignal<string[] | undefined>;
-    /**
-     * The tags that can be used by the timeline.
-     */
-    readonly tags: _angular_core.InputSignal<string[]>;
-    /**
-     * Emitted when the timeline is changed.
-     */
-    readonly timelineChange: _angular_core.OutputEmitterRef<GveAnimationTimeline>;
-    /**
-     * Emitted when the timeline editing is canceled.
-     */
-    readonly timelineCancel: _angular_core.OutputEmitterRef<void>;
-    readonly editedTweenIndex: _angular_core.WritableSignal<number>;
-    readonly editedTween: _angular_core.WritableSignal<GveAnimationTween | undefined>;
-    tag: FormControl<string>;
-    tweens: FormControl<GveAnimationTween[]>;
-    vars: FormControl<string | null>;
-    form: FormGroup;
-    constructor(formBuilder: FormBuilder);
-    private jsonValidator;
-    private updateForm;
-    addTween(): void;
-    editTween(index: number): void;
-    deleteTween(index: number): void;
-    closeTween(): void;
-    saveTween(tween?: GveAnimationTween): void;
-    moveTweenUp(index: number): void;
-    moveTweenDown(index: number): void;
-    private getTimeline;
-    close(): void;
-    save(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AnimationTimelineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AnimationTimelineComponent, "gve-animation-timeline", never, { "timeline": { "alias": "timeline"; "required": false; "isSignal": true; }; "elementIds": { "alias": "elementIds"; "required": false; "isSignal": true; }; "tags": { "alias": "tags"; "required": false; "isSignal": true; }; }, { "timeline": "timelineChange"; "timelineChange": "timelineChange"; "timelineCancel": "timelineCancel"; }, never, never, true, never>;
+interface Feature {
+    name: string;
+    value: string;
+    setPolicy: FeatureSetPolicy;
 }
-
 /**
- * 🔑 `gve-animation-timeline-set`
- *
- * A component to edit a set of animation timelines.
- * Used by the `gve-snapshot-editor` component.
- *
- * - ▶️ `timelines` (`GveAnimationTimeline[]`): the animation timelines to edit.
- * - ▶️ `elementIds` (`string[]`): the IDs of the elements that can be selected by the tween.
- * - ▶️ `tags` (`string[]`): the tags that can be used by the timeline.
- * - 🔥 `timelinesChange` (`GveAnimationTimeline[]`): emitted when the timelines are changed.
- * - 🔥 `timelinesCancel` (`void`): emitted when the timeline editing is canceled.
+ * Operation feature set policy.
  */
-declare class AnimationTimelineSetComponent {
-    private _dialogService;
-    /**
-     * The animation timelines to edit.
-     */
-    readonly timelines: _angular_core.ModelSignal<GveAnimationTimeline[]>;
-    /**
-     * The IDs of the elements that can be selected by the tween.
-     * This list is used to allow the user to select an element from a dropdown.
-     */
-    readonly elementIds: _angular_core.InputSignal<string[] | undefined>;
-    /**
-     * The tags that can be used by the timeline.
-     */
-    readonly tags: _angular_core.InputSignal<string[]>;
-    /**
-     * Emitted when the timeline editing is canceled.
-     */
-    readonly timelinesCancel: _angular_core.OutputEmitterRef<void>;
-    readonly editedTimeline: _angular_core.WritableSignal<GveAnimationTimeline | undefined>;
-    readonly editedIndex: _angular_core.WritableSignal<number>;
-    constructor(_dialogService: DialogService);
-    closeTimeline(): void;
-    newTimeline(): void;
-    editTimeline(index: number): void;
-    onTimelineChange(timeline: GveAnimationTimeline): void;
-    deleteTimeline(index: number): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AnimationTimelineSetComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AnimationTimelineSetComponent, "gve-animation-timeline-set", never, { "timelines": { "alias": "timelines"; "required": false; "isSignal": true; }; "elementIds": { "alias": "elementIds"; "required": false; "isSignal": true; }; "tags": { "alias": "tags"; "required": false; "isSignal": true; }; }, { "timelines": "timelinesChange"; "timelinesCancel": "timelinesCancel"; }, never, never, true, never>;
+declare enum FeatureSetPolicy {
+    multiple = 0,
+    single = 1,
+    singleFirst = 2
 }
-
 /**
- * 🔑 `gve-animation-tween`
- *
- * A component to edit an animation tween.
- * Used by the `gve-animation-timeline` component.
- *
- * - ▶️ `tween` (`GveAnimationTween`): the tween to edit.
- * - ▶️ `elementIds` (`string[]`): the IDs of the elements that can be selected by the tween.
- * - 🔥 `tweenChange` (`GveAnimationTween`): emitted when the tween is changed.
- * - 🔥 `tweenCancel` (`void`): emitted when the user cancels the edit.
+ * Operation feature.
  */
-declare class AnimationTweenComponent implements OnInit, OnDestroy {
-    private _sub?;
-    /**
-     * The tween to edit.
-     */
-    readonly tween: _angular_core.ModelSignal<GveAnimationTween | undefined>;
-    /**
-     * The IDs of the elements that can be selected by the tween.
-     * This list is used to allow the user to select an element from a dropdown.
-     */
-    readonly elementIds: _angular_core.InputSignal<string[] | undefined>;
-    /**
-     * Emitted when the user cancels the edit.
-     */
-    readonly tweenCancel: _angular_core.OutputEmitterRef<void>;
-    readonly types: string[];
-    label: FormControl<string>;
-    note: FormControl<string | null>;
-    type: FormControl<TweenType>;
-    selector: FormControl<string>;
-    vars: FormControl<string>;
-    vars2: FormControl<string | null>;
-    position: FormControl<string | null>;
-    form: FormGroup;
-    elementId: FormControl<string | null>;
-    constructor(formBuilder: FormBuilder);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    onVarsChange(vars: string): void;
-    onVars2Change(vars: string): void;
-    close(): void;
-    private jsonValidator;
-    private updateForm;
-    private getTween;
-    openUrl(url: string): void;
-    save(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AnimationTweenComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AnimationTweenComponent, "gve-animation-tween", never, { "tween": { "alias": "tween"; "required": false; "isSignal": true; }; "elementIds": { "alias": "elementIds"; "required": false; "isSignal": true; }; }, { "tween": "tweenChange"; "tweenCancel": "tweenCancel"; }, never, never, true, never>;
+interface OperationFeature extends Feature {
+    isNegated?: boolean;
+    isGlobal?: boolean;
+    isShortLived?: boolean;
+}
+/**
+ * Source about a text variant. This is typically used when
+ * variants come from different witnesses.
+ */
+interface OperationSource {
+    id: string;
+    type: string;
+    rank?: number;
+    note?: string;
+}
+/**
+ * Generic metadata about a text variant generation operation.
+ */
+interface OperationMetadata {
+    type: OperationType;
+    id: string;
+    rank?: number;
+    groupId?: string;
+    features?: OperationFeature[];
+    sources?: OperationSource[];
+}
+/**
+ * Type of a text operation.
+ */
+declare enum OperationType {
+    replace = 0,
+    delete = 1,
+    addBefore = 2,
+    addAfter = 3,
+    moveBefore = 4,
+    moveAfter = 5,
+    swap = 6,
+    annotate = 7
+}
+/**
+ * Metadata of a char-based chain operation.
+ */
+interface CharChainOperation extends OperationMetadata {
+    at: number;
+    atAsIndex?: boolean;
+    to?: number;
+    toAsIndex?: boolean;
+    inputTag?: string;
+    outputTag?: string;
+    run: number;
+    toRun?: number;
+    value?: string;
+    noTraceFeautures?: boolean;
+    dsl?: string;
+}
+/**
+ * A single character node in an operation execution result.
+ */
+interface CharNode {
+    id: number;
+    index: number;
+    label: string;
+    data: string;
+    sourceTag?: string;
+    features?: Feature[];
+}
+/**
+ * A text snapshot, including the base text and the operations that
+ * have been applied to it.
+ */
+interface Snapshot {
+    text: string | CharNode[];
+    operations: CharChainOperation[];
+}
+/**
+ * API call result wrapper.
+ */
+interface ResultWrapper<T> {
+    result?: T;
+    error?: string;
+}
+/**
+ * PayloadMatDialogConfig is a MatDialogConfig with a payload, used
+ * to pass data of type T to a dialog.
+ */
+interface PayloadMatDialogConfig<T> extends MatDialogConfig {
+    payload?: T;
 }
 
 /**
@@ -225,7 +184,7 @@ declare class BaseTextCharComponent {
 /**
  * A range in the base text.
  */
-interface VarBaseTextRange {
+interface BaseTextRange {
     at: number;
     run: number;
 }
@@ -233,7 +192,9 @@ interface VarBaseTextRange {
  * 🔑 `gve-base-text-view`
  *
  * A component to display a selectable base text. Its input is either a string or an
- * array of `CharNode`'s.
+ * array of `CharNode`'s. The base text is the starting text in a set of transformations,
+ * and is represented as a sequence of characters with optional metadata.
+ * This component allows users to view and select characters or ranges of characters.
  * Used by the chain result view component and the base text editor component.
  *
  * - ▶️ `defaultColor` (`string`): the default color for the text.
@@ -247,10 +208,15 @@ interface VarBaseTextRange {
  * to each line.
  * - ▶️ `text` (`string` | `CharNode[]`): the text to display.
  * - 🔥 `charPick` (`BaseTextCharEvent`): emitted when a character is picked.
- * - 🔥 `rangePick` (`VarBaseTextRange`): emitted when a range is picked.
+ * - 🔥 `rangePick` (`BaseTextRange`): emitted when a range is picked.
  */
-declare class BaseTextViewComponent {
+declare class BaseTextViewComponent implements OnInit {
+    private readonly _destroyRef;
+    private readonly _clipboard;
+    private readonly _snackBar;
+    private readonly _searchSubject;
     private _lastSelectedPosition?;
+    private _selectionAnchor?;
     /**
      * The default color for the text.
      */
@@ -263,10 +229,22 @@ declare class BaseTextViewComponent {
      * The color for the selected text.
      */
     readonly selectionColor: _angular_core.InputSignal<string>;
+    /**
+     * The color for search match highlights.
+     */
+    readonly searchHighlightColor: _angular_core.InputSignal<string>;
     /**
      * True if line numbers should be displayed next to each line.
      */
     readonly hasLineNumber: _angular_core.InputSignal<boolean>;
+    /**
+     * The search query entered in the toolbar.
+     */
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    /**
+     * The positions of search matches (start and length pairs).
+     */
+    private readonly searchMatches;
     /**
      * The text to display.
      */
@@ -290,7 +268,7 @@ declare class BaseTextViewComponent {
      * The range is defined by the starting character and the number of characters.
      * The range is inclusive.
      */
-    readonly rangePick: _angular_core.OutputEmitterRef<VarBaseTextRange>;
+    readonly rangePick: _angular_core.OutputEmitterRef<BaseTextRange>;
     /**
      * The base characters organized by lines, computed from text input.
      */
@@ -300,10 +278,12 @@ declare class BaseTextViewComponent {
      */
     private readonly selectedRange;
     /**
-     * The lines with selection state applied, computed from base lines and selection.
+     * The lines with selection or search highlight state applied.
+     * Search highlights take priority over selection when present.
      */
     readonly lines: _angular_core.Signal<BaseTextChar[][]>;
     constructor();
+    ngOnInit(): void;
     private buildLines;
     onCharPick(event: BaseTextCharEvent): void;
     /**
@@ -316,8 +296,55 @@ declare class BaseTextViewComponent {
      * Returns the ID or -1 if position is out of bounds.
      */
     private getCharIdAtPosition;
+    /**
+     * Handle search input changes and trigger debounced search.
+     */
+    onSearchInput(query: string): void;
+    /**
+     * Perform the actual search and update match positions.
+     */
+    private performSearch;
+    /**
+     * Clear the search query and remove search highlights.
+     */
+    clearSearch(): void;
+    /**
+     * Get the total number of characters in the text.
+     */
+    private getTotalCharCount;
+    /**
+     * Get the character at a specific position.
+     */
+    private getCharAtPosition;
+    /**
+     * Handle keyboard events for arrow key navigation.
+     * - Left/Right: Move single selection to previous/next character
+     * - Shift+Left/Right: Extend selection range
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Copy the currently selected text to the clipboard.
+     */
+    copySelection(): void;
+    /**
+     * Copy the currently selected range coordinates to the clipboard.
+     * Format: "ID" for single character, "IDxCOUNT" for range.
+     */
+    copyCoordinates(): void;
+    /**
+     * Check if there is an active selection.
+     */
+    readonly hasSelection: _angular_core.Signal<boolean>;
+    /**
+     * Get the total count of matched characters.
+     */
+    readonly matchCount: _angular_core.Signal<number>;
+    /**
+     * Check if a search is active (query is not empty).
+     */
+    readonly isSearchActive: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseTextViewComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseTextViewComponent, "gve-base-text-view", never, { "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; "defaultBorderColor": { "alias": "defaultBorderColor"; "required": false; "isSignal": true; }; "selectionColor": { "alias": "selectionColor"; "required": false; "isSignal": true; }; "hasLineNumber": { "alias": "hasLineNumber"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "colorCallback": { "alias": "colorCallback"; "required": false; "isSignal": true; }; "borderColorCallback": { "alias": "borderColorCallback"; "required": false; "isSignal": true; }; }, { "charPick": "charPick"; "rangePick": "rangePick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseTextViewComponent, "gve-base-text-view", never, { "defaultColor": { "alias": "defaultColor"; "required": false; "isSignal": true; }; "defaultBorderColor": { "alias": "defaultBorderColor"; "required": false; "isSignal": true; }; "selectionColor": { "alias": "selectionColor"; "required": false; "isSignal": true; }; "searchHighlightColor": { "alias": "searchHighlightColor"; "required": false; "isSignal": true; }; "hasLineNumber": { "alias": "hasLineNumber"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "colorCallback": { "alias": "colorCallback"; "required": false; "isSignal": true; }; "borderColorCallback": { "alias": "borderColorCallback"; "required": false; "isSignal": true; }; }, { "charPick": "charPick"; "rangePick": "rangePick"; }, never, never, true, never>;
 }
 
 /**
@@ -337,24 +364,29 @@ declare class BaseTextEditorComponent {
      * objects.
      */
     readonly text: _angular_core.InputSignalWithTransform<CharNode[] | undefined, string | CharNode[] | undefined>;
+    /**
+     * The IDs of the features that are multi-valued. If a feature being
+     * edited is in this list, the feature editor will allow adding multiple
+     * values to it. Passed down to feature editors.
+     */
+    readonly multiValuedFeatureIds: _angular_core.InputSignal<string[] | undefined>;
     /**
      * Emitted for the edited text as an array of `CharNode`'s whenever it changes.
      */
     readonly textChange: _angular_core.OutputEmitterRef<CharNode[]>;
     readonly selectedChar: _angular_core.WritableSignal<CharNode | undefined>;
     readonly selectedCharLabel: _angular_core.WritableSignal<string | undefined>;
-    readonly textRange: _angular_core.WritableSignal<VarBaseTextRange | undefined>;
+    readonly textRange: _angular_core.WritableSignal<BaseTextRange | undefined>;
     userText: FormControl<string>;
     form: FormGroup;
     constructor(formBuilder: FormBuilder, _dialogService: DialogService);
     private resetSelectedChar;
     onSelectedChar(event: BaseTextCharEvent): void;
     onFeaturesChange(features: Feature[]): void;
-    onRangePick(range: VarBaseTextRange): void;
-    patchTextFromUser(): void;
+    onRangePick(range: BaseTextRange): void;
     setTextFromUser(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseTextEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseTextEditorComponent, "gve-base-text-editor", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; }, { "textChange": "textChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseTextEditorComponent, "gve-base-text-editor", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "multiValuedFeatureIds": { "alias": "multiValuedFeatureIds"; "required": false; "isSignal": true; }; }, { "textChange": "textChange"; }, never, never, true, never>;
 }
 
 /**
@@ -399,6 +431,12 @@ interface ChainOperationContextStep {
  * Result of execution of a char-based chain.
  */
 interface CharChainResult {
+    /**
+     * The base text, as an array of character nodes or string.
+     * This is not returned by the API, but can be supplied
+     * by the caller for rendering purposes.
+     */
+    text?: CharNode[] | string;
     /**
      * The execution steps of the chain.
      */
@@ -629,7 +667,7 @@ declare class SettingsService {
 /**
  * Features map. This is used for features from closed sets,
  * and lists the possible values for each feature.
- * The key is the feature name, and the value is an array of
+ * The key is the feature name's ID, and the value is an array of
  * labeled IDs representing the allowed values for that feature.
  */
 interface FeatureMap {
@@ -651,6 +689,11 @@ interface FeatureMap {
  * - ▶️ `featValues` (`FeatureMap`): the feature values map. When
  * specified and the user selects a feature name present in the map keys,
  * the corresponding values will be used to populate the value selection.
+ * - ▶️ `multiValuedFeatureIds` (`string[]`): the IDs of the features that are
+ * multi-valued. Used to determine if the current feature being edited should
+ * display multi-value controls.
+ * - ▶️ `isVar`: true if the feature is a variant operation feature, which
+ * has additional properties like negation, global, and short-lived.
  * - 🔥 `featureChange` (`Feature`): emitted when feature has changed.
  * - 🔥 `featureCancel`: emitted when the user cancels the feature editing.
  */
@@ -678,13 +721,20 @@ declare class FeatureEditorComponent implements OnInit, OnDestroy {
      * additional properties like negation, global, and short-lived.
      */
     readonly isVar: _angular_core.InputSignal<boolean>;
+    /**
+     * The IDs of the features that are multi-valued. Used to determine
+     * if the current feature being edited should display multi-value controls.
+     */
+    readonly multiValuedFeatureIds: _angular_core.InputSignal<string[] | undefined>;
     /**
      * Event emitted when the user cancels the feature editing.
      */
     readonly featureCancel: _angular_core.OutputEmitterRef<void>;
     readonly nameIds: _angular_core.WritableSignal<LabeledId[] | undefined>;
+    readonly isMultiValued: _angular_core.WritableSignal<boolean>;
     name: FormControl<string>;
     value: FormControl<string>;
+    selectedValue: FormControl<string>;
     setPolicy: FormControl<FeatureSetPolicy>;
     isNegated: FormControl<boolean>;
     isGlobal: FormControl<boolean>;
@@ -695,10 +745,11 @@ declare class FeatureEditorComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     private getLabeledIdsFor;
     private updateForm;
+    addValueToComposite(): void;
     cancel(): void;
     save(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FeatureEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureEditorComponent, "gve-feature-editor", never, { "featNames": { "alias": "featNames"; "required": false; "isSignal": true; }; "featValues": { "alias": "featValues"; "required": false; "isSignal": true; }; "feature": { "alias": "feature"; "required": false; "isSignal": true; }; "isVar": { "alias": "isVar"; "required": false; "isSignal": true; }; }, { "feature": "featureChange"; "featureCancel": "featureCancel"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureEditorComponent, "gve-feature-editor", never, { "featNames": { "alias": "featNames"; "required": false; "isSignal": true; }; "featValues": { "alias": "featValues"; "required": false; "isSignal": true; }; "feature": { "alias": "feature"; "required": false; "isSignal": true; }; "isVar": { "alias": "isVar"; "required": false; "isSignal": true; }; "multiValuedFeatureIds": { "alias": "multiValuedFeatureIds"; "required": false; "isSignal": true; }; }, { "feature": "featureChange"; "featureCancel": "featureCancel"; }, never, never, true, never>;
 }
 
 /**
@@ -723,7 +774,7 @@ interface FeatureDefinitions {
  * A component for editing a variant generation operation.
  * Used by the `gve-snapshot-editor` component.
  * - ▶️ `operation` (`CharChainOperation`): the operation to edit.
- * - ▶️ `snapshot` (`SnapshotBase`): the snapshot the operation refers to.
+ * - ▶️ `snapshot` (`Snapshot`): the snapshot the operation refers to.
  * - ▶️ `hidePreview` (`boolean`): whether to hide the preview request button.
  * - 🔥 `operationChange` (`CharChainOperation`): emitted when the operation
  * is changed.
@@ -771,11 +822,8 @@ declare class ChainOperationEditorComponent implements OnInit, OnDestroy {
     private _clipboard;
     private _settings;
     private _dialogService;
-    private readonly _disposables;
     private readonly _subs;
     private readonly _nanoid;
-    private _editorModel?;
-    private _editor?;
     /**
      * The operation to edit.
      */
@@ -783,7 +831,7 @@ declare class ChainOperationEditorComponent implements OnInit, OnDestroy {
     /**
      * The snapshot the operation refers to.
      */
-    readonly snapshot: _angular_core.InputSignal<SnapshotBase | undefined>;
+    readonly snapshot: _angular_core.InputSignal<Snapshot | undefined>;
     /**
      * Whether to hide the preview request button.
      */
@@ -793,17 +841,15 @@ declare class ChainOperationEditorComponent implements OnInit, OnDestroy {
      */
     readonly featureDefs: _angular_core.InputSignal<FeatureDefinitions | undefined>;
     /**
-     * Definitions for element features, including names and values.
-     */
-    readonly elementFeatureDefs: _angular_core.InputSignal<FeatureDefinitions | undefined>;
-    /**
-     * Definitions for diplomatic features, including names and values.
+     * Set when the edited operation's text range is to be patched.
      */
-    readonly diplomaticFeatureDefs: _angular_core.InputSignal<FeatureDefinitions | undefined>;
+    readonly rangePatch: _angular_core.InputSignal<BaseTextRange | undefined>;
     /**
-     * Set when the edited operation's text range is to be patched.
+     * The IDs of the features that are multi-valued. If a feature being
+     * edited is in this list, the feature editor will allow adding multiple
+     * values to it. Passed down to feature editors.
      */
-    readonly rangePatch: _angular_core.InputSignal<VarBaseTextRange | undefined>;
+    readonly multiValuedFeatureIds: _angular_core.InputSignal<string[] | undefined>;
     /**
      * Emitted when the operation is changed.
      */
@@ -849,24 +895,12 @@ declare class ChainOperationEditorComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     private toggleLfEscape;
     private hasTextChanges;
-    onCreateEditor(editor: monaco.editor.IEditor): void;
     onFeaturesChange(features: OperationFeature[]): void;
     onDpFeaturesChange(features: Feature[]): void;
     addSource(): void;
     editSource(index: number): void;
     closeSource(): void;
     onSourceChange(source: OperationSource): void;
-    saveSvg(): void;
-    openSvgEditor(): void;
-    loadSvg(): void;
-    setSvgFromClipboard(): void;
-    private parseSvg;
-    removeDecimals(): void;
-    wrapInGroup(): void;
-    onTabIndexChange(index: number): void;
-    editElementFeatures(element: SVGElement): void;
-    deleteElementFeatures(element: SVGElement): void;
-    onElementFeaturesChange(features: Feature[]): void;
     private updateArgsUI;
     private updateForm;
     cancel(): void;
@@ -874,7 +908,7 @@ declare class ChainOperationEditorComponent implements OnInit, OnDestroy {
     requestPreview(): void;
     save(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChainOperationEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChainOperationEditorComponent, "gve-chain-operation-editor", never, { "operation": { "alias": "operation"; "required": false; "isSignal": true; }; "snapshot": { "alias": "snapshot"; "required": false; "isSignal": true; }; "hidePreview": { "alias": "hidePreview"; "required": false; "isSignal": true; }; "featureDefs": { "alias": "featureDefs"; "required": false; "isSignal": true; }; "elementFeatureDefs": { "alias": "elementFeatureDefs"; "required": false; "isSignal": true; }; "diplomaticFeatureDefs": { "alias": "diplomaticFeatureDefs"; "required": false; "isSignal": true; }; "rangePatch": { "alias": "rangePatch"; "required": false; "isSignal": true; }; }, { "operation": "operationChange"; "operationChange": "operationChange"; "operationPreview": "operationPreview"; "operationCancel": "operationCancel"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChainOperationEditorComponent, "gve-chain-operation-editor", never, { "operation": { "alias": "operation"; "required": false; "isSignal": true; }; "snapshot": { "alias": "snapshot"; "required": false; "isSignal": true; }; "hidePreview": { "alias": "hidePreview"; "required": false; "isSignal": true; }; "featureDefs": { "alias": "featureDefs"; "required": false; "isSignal": true; }; "rangePatch": { "alias": "rangePatch"; "required": false; "isSignal": true; }; "multiValuedFeatureIds": { "alias": "multiValuedFeatureIds"; "required": false; "isSignal": true; }; }, { "operation": "operationChange"; "operationChange": "operationChange"; "operationPreview": "operationPreview"; "operationCancel": "operationCancel"; }, never, never, true, never>;
 }
 
 /**
@@ -912,7 +946,7 @@ declare class ChainResultViewComponent implements OnInit, OnDestroy, AfterViewIn
     readonly step: _angular_core.WritableSignal<ChainOperationContextStep | undefined>;
     readonly selection: _angular_core.WritableSignal<string | undefined>;
     readonly selectionFeatures: _angular_core.WritableSignal<OperationFeature[]>;
-    readonly selectionRange: _angular_core.WritableSignal<VarBaseTextRange | undefined>;
+    readonly selectionRange: _angular_core.WritableSignal<BaseTextRange | undefined>;
     /**
      * True to disable range picking. For instance the snapshot editor,
      * which uses rangePick to set the edited operation's range, disables
@@ -922,7 +956,7 @@ declare class ChainResultViewComponent implements OnInit, OnDestroy, AfterViewIn
     /**
      * Emitted when a range is picked.
      */
-    readonly rangePick: _angular_core.OutputEmitterRef<VarBaseTextRange>;
+    readonly rangePick: _angular_core.OutputEmitterRef<BaseTextRange>;
     versionTag: FormControl<string | null>;
     tag: FormControl<string | null>;
     constructor(formBuilder: FormBuilder);
@@ -938,67 +972,13 @@ declare class ChainResultViewComponent implements OnInit, OnDestroy, AfterViewIn
     private getNodeFeatures;
     private findNode;
     onTextCharPick(event: BaseTextCharEvent): void;
-    onTextRangePick(range: VarBaseTextRange): void;
+    onTextRangePick(range: BaseTextRange): void;
     onStepChange(step?: ChainOperationContextStep): void;
     pickRange(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChainResultViewComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChainResultViewComponent, "gve-chain-result-view", never, { "result": { "alias": "result"; "required": false; "isSignal": true; }; "initialStepIndex": { "alias": "initialStepIndex"; "required": false; "isSignal": true; }; "disabledRangePick": { "alias": "disabledRangePick"; "required": false; "isSignal": true; }; }, { "stepPick": "stepPick"; "rangePick": "rangePick"; }, never, never, true, never>;
 }
 
-type GraphvizRankdir = 'TB' | 'LR' | 'BT' | 'RL';
-declare class GveGraphvizService {
-    private hashString;
-    private hslToRgb;
-    private getColorForTag;
-    private getExcludedNodeIds;
-    /**
-     * Represent the received chain as a Graphviz digraph.
-     *
-     * @param chain The source chain if any.
-     * @param tags The tags to show. When set, only the links with these tags are shown.
-     * @param rankdir The rank direction.
-     * @returns Graphviz representation of the chain.
-     */
-    generateGraph(chain?: CharChain, tags?: string[], rankdir?: GraphvizRankdir): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GveGraphvizService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<GveGraphvizService>;
-}
-
-declare class ChainViewComponent implements OnDestroy {
-    private _graphviz;
-    private _settings;
-    private _clipboard;
-    private _snackbar;
-    private readonly _sub?;
-    /**
-     * The chain to display.
-     */
-    readonly chain: _angular_core.InputSignal<CharChain | undefined>;
-    /**
-     * The direction of the graph.
-     */
-    readonly direction: _angular_core.InputSignal<GraphvizRankdir>;
-    /**
-     * All the distinct tags in the chain.
-     */
-    readonly tags: _angular_core.Signal<string[]>;
-    /**
-     * The tags to show, or empty to show all of them.
-     */
-    readonly selectedTags: _angular_core.ModelSignal<string[]>;
-    /**
-     * The Graphviz representation of the chain.
-     */
-    readonly graph: _angular_core.Signal<string>;
-    userTags: FormControl<string[]>;
-    constructor(_graphviz: GveGraphvizService, _settings: SettingsService, _clipboard: Clipboard, _snackbar: MatSnackBar);
-    ngOnDestroy(): void;
-    copyGraph(): void;
-    openExternalEditor(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChainViewComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChainViewComponent, "gve-chain-view", never, { "chain": { "alias": "chain"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "selectedTags": { "alias": "selectedTags"; "required": false; "isSignal": true; }; }, { "selectedTags": "selectedTagsChange"; }, never, never, true, never>;
-}
-
 /**
  * 🔑 `gve-feature-set-editor`
  *
@@ -1017,6 +997,9 @@ declare class ChainViewComponent implements OnDestroy {
  * it is always invisible; otherwise, it gets visible when the number of features
  * is equal to or greater than the threshold. Default is 5.
  * - ▶️ `features` (`Feature[]`): the features to edit.
+ * - ▶️ `multiValuedFeatureIds` (`string[]`): the IDs of the features that are
+ * multi-valued. If a feature being edited is in this list, the feature editor
+ * will allow adding multiple values to it.
  * - ▶️ `isVar`: true if the feature is a variant operation feature, which
  * has additional properties like negation, global, and short-lived.
  * - 🔥 `featuresChange` (`Feature[]`): emitted when features have changed.
@@ -1047,13 +1030,19 @@ declare class FeatureSetEditorComponent implements OnInit, OnDestroy {
      * is greater than or equal to the threshold. Default is 5.
      */
     readonly filterThreshold: _angular_core.InputSignal<number>;
+    /**
+     * The IDs of the features that are multi-valued. If a feature being
+     * edited is in this list, the feature editor will allow adding multiple
+     * values to it.
+     */
+    readonly multiValuedFeatureIds: _angular_core.InputSignal<string[] | undefined>;
     /**
      * The features to edit.
      */
-    readonly features: _angular_core.ModelSignal<Feature[] | OperationFeature[]>;
+    readonly features: _angular_core.ModelSignal<OperationFeature[] | Feature[]>;
     readonly editedFeature: _angular_core.WritableSignal<Feature | OperationFeature | undefined>;
     readonly editedFeatureIndex: _angular_core.WritableSignal<number>;
-    filteredFeatures: _angular_core.WritableSignal<Feature[] | OperationFeature[]>;
+    filteredFeatures: _angular_core.WritableSignal<OperationFeature[] | Feature[]>;
     filter: FormControl<string | null>;
     constructor(formBuilder: FormBuilder);
     private applyFeatureFilter;
@@ -1062,10 +1051,11 @@ declare class FeatureSetEditorComponent implements OnInit, OnDestroy {
     addFeature(): void;
     editFeature(feature: Feature | OperationFeature): void;
     deleteFeature(feature: Feature | OperationFeature): void;
+    isFeatureMultiValued(feature?: Feature | OperationFeature): boolean;
     onFeatureChange(feature?: Feature | OperationFeature): void;
     onFeatureCancel(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FeatureSetEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureSetEditorComponent, "gve-feature-set-editor", never, { "isVar": { "alias": "isVar"; "required": false; "isSignal": true; }; "featNames": { "alias": "featNames"; "required": false; "isSignal": true; }; "featValues": { "alias": "featValues"; "required": false; "isSignal": true; }; "filterThreshold": { "alias": "filterThreshold"; "required": false; "isSignal": true; }; "features": { "alias": "features"; "required": false; "isSignal": true; }; }, { "features": "featuresChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureSetEditorComponent, "gve-feature-set-editor", never, { "isVar": { "alias": "isVar"; "required": false; "isSignal": true; }; "featNames": { "alias": "featNames"; "required": false; "isSignal": true; }; "featValues": { "alias": "featValues"; "required": false; "isSignal": true; }; "filterThreshold": { "alias": "filterThreshold"; "required": false; "isSignal": true; }; "multiValuedFeatureIds": { "alias": "multiValuedFeatureIds"; "required": false; "isSignal": true; }; "features": { "alias": "features"; "required": false; "isSignal": true; }; }, { "features": "featuresChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1090,7 +1080,7 @@ declare class FeatureSetViewComponent {
     /**
      * The features.
      */
-    readonly features: _angular_core.InputSignal<Feature[] | OperationFeature[]>;
+    readonly features: _angular_core.InputSignal<OperationFeature[] | Feature[]>;
     /**
      * The list of feature names to display in the name selection.
      * This is used when you have a closed list of features.
@@ -1109,7 +1099,7 @@ declare class FeatureSetViewComponent {
      * is greater than the threshold. Default is 5.
      */
     readonly filterThreshold: _angular_core.InputSignal<number>;
-    readonly filteredFeatures: _angular_core.WritableSignal<Feature[] | OperationFeature[]>;
+    readonly filteredFeatures: _angular_core.WritableSignal<OperationFeature[] | Feature[]>;
     filter: FormControl<string | null>;
     constructor(formBuilder: FormBuilder);
     private applyFeatureFilter;
@@ -1119,45 +1109,6 @@ declare class FeatureSetViewComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureSetViewComponent, "gve-feature-set-view", never, { "features": { "alias": "features"; "required": false; "isSignal": true; }; "featNames": { "alias": "featNames"; "required": false; "isSignal": true; }; "featValues": { "alias": "featValues"; "required": false; "isSignal": true; }; "filterThreshold": { "alias": "filterThreshold"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * 🔑 `gve-ln-heights-editor`
- *
- * A component to edit line heights.
- * Used by the `gve-snapshot-editor` component.
- *
- * - ▶️ `lineCount` (`number`): the number of lines.
- * - ▶️ `heights` (`Record<number, number>`): the line heights.
- * - 🔥 `heightsChange` (`EventEmitter<Record<number, number>>`): the event
- * emitted when the heights change.
- */
-declare class LnHeightsEditorComponent implements OnInit, OnDestroy {
-    private _subs?;
-    private _heights?;
-    lineNumber: FormControl<number>;
-    height: FormControl<number>;
-    /**
-     * The total number of lines in the text.
-     */
-    readonly lineCount: _angular_core.InputSignal<number>;
-    /**
-     * The heights map of the lines. Each key is a line number and the value is
-     * the height of the line.
-     */
-    readonly heights: _angular_core.InputSignal<Record<number, number> | undefined>;
-    /**
-     * The event emitted when the heights change.
-     */
-    readonly heightsChange: _angular_core.OutputEmitterRef<Record<number, number> | undefined>;
-    readonly lineNumbers: _angular_core.Signal<number[]>;
-    constructor(formBuilder: FormBuilder);
-    private pruneHeights;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    reset(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LnHeightsEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LnHeightsEditorComponent, "gve-ln-heights-editor", never, { "lineCount": { "alias": "lineCount"; "required": false; "isSignal": true; }; "heights": { "alias": "heights"; "required": false; "isSignal": true; }; }, { "heightsChange": "heightsChange"; }, never, never, true, never>;
-}
-
 /**
  * 🔑 `gve-operation-source-editor`
  *
@@ -1222,13 +1173,14 @@ declare class SnapshotEditorComponent {
     private _dialogService;
     private _snackbar;
     private readonly _nanoid;
-    private _renderer?;
     private _previewing?;
-    private _transparentIds?;
     private _stepPickFrozen?;
-    private _handlingOver?;
-    private _lastOverId?;
-    snapshotView?: ElementRef<SnapshotViewComponent>;
+    /**
+     * Reference to the snapshot rendition web component.
+     * Using viewChild signal to handle conditionally rendered element -
+     * the element only exists when result() is truthy.
+     */
+    readonly renditionRef: _angular_core.Signal<ElementRef<GveSnapshotRendition> | undefined>;
     /**
      * The snapshot to edit.
      */
@@ -1255,49 +1207,32 @@ declare class SnapshotEditorComponent {
      */
     readonly featureDefs: _angular_core.InputSignal<FeatureDefinitions | undefined>;
     /**
-     * Definitions for element features, including names and values.
+     * The IDs of the features that are multi-valued. If a feature being
+     * edited is in this list, the feature editor will allow adding multiple
+     * values to it. Passed down to feature editors.
      */
-    readonly elementFeatureDefs: _angular_core.InputSignal<FeatureDefinitions | undefined>;
+    readonly multiValuedFeatureIds: _angular_core.InputSignal<string[] | undefined>;
     /**
-     * Definitions for diplomatic features, including names and values.
+     * Settings for rendering the snapshot. These are passed to the snapshot rendition
+     * component.
      */
-    readonly diplomaticFeatureDefs: _angular_core.InputSignal<FeatureDefinitions | undefined>;
+    readonly renditionSettings: _angular_core.InputSignal<GveRenditionSettings>;
     /**
      * Emitted when the user cancels the snapshot editing.
      */
     readonly snapshotCancel: _angular_core.OutputEmitterRef<void>;
-    width: FormControl<number>;
-    height: FormControl<number>;
-    style: FormControl<string | null>;
     baseText: FormControl<CharNode[]>;
-    offsetX: FormControl<number>;
-    offsetY: FormControl<number>;
-    lineHeightOffset: FormControl<number>;
-    lnHeights: FormControl<Record<number, number> | null>;
-    charSpacingOffset: FormControl<number>;
-    spcWidthOffset: FormControl<number>;
-    textStyle: FormControl<string | null>;
     operations: FormControl<CharChainOperation[]>;
-    opStyle: FormControl<string | null>;
     form: FormGroup;
-    imageUrl: FormControl<string | null>;
-    imageOpacity: FormControl<number>;
-    imageX: FormControl<number>;
-    imageY: FormControl<number>;
-    imageWidth: FormControl<number>;
-    imageHeight: FormControl<number>;
-    defs: FormControl<string | null>;
-    timelines: FormControl<GveAnimationTimeline[]>;
     readonly showChain: FormControl<boolean>;
     readonly featDetails: FormControl<boolean>;
+    readonly autoRun: FormControl<boolean>;
     readonly chain: _angular_core.WritableSignal<CharChain | undefined>;
-    readonly opTags: _angular_core.WritableSignal<string[]>;
-    readonly opElementIds: _angular_core.WritableSignal<string[]>;
-    readonly textRange: _angular_core.WritableSignal<VarBaseTextRange | undefined>;
+    readonly textRange: _angular_core.WritableSignal<BaseTextRange | undefined>;
     readonly lineCount: _angular_core.WritableSignal<number>;
     readonly editedOp: _angular_core.WritableSignal<CharChainOperation | undefined>;
     readonly editedOpIndex: _angular_core.WritableSignal<number>;
-    readonly editedOpRangePatch: _angular_core.WritableSignal<VarBaseTextRange | undefined>;
+    readonly editedOpRangePatch: _angular_core.WritableSignal<BaseTextRange | undefined>;
     readonly busy: _angular_core.WritableSignal<boolean>;
     readonly opTypeMap: {
         0: string;
@@ -1309,14 +1244,23 @@ declare class SnapshotEditorComponent {
         6: string;
         7: string;
     };
-    viewTitle: string;
-    viewData?: SnapshotViewData;
-    visualInfo?: string;
-    rulers: boolean;
-    result?: CharChainResult;
-    resultOperationId?: string;
-    initialStepIndex: number;
+    readonly result: _angular_core.WritableSignal<CharChainResult | undefined>;
+    readonly resultOperationId: _angular_core.WritableSignal<string | undefined>;
+    readonly initialStepIndex: _angular_core.WritableSignal<number>;
     constructor(formBuilder: FormBuilder, _api: GveApiService, _dialog: MatDialog, _dialogService: DialogService, _snackbar: MatSnackBar);
+    /**
+     * Initialize rendition settings and event listeners when the element becomes available.
+     * Called via effect since the element is conditionally rendered.
+     */
+    private initRendition;
+    /**
+     * Apply settings to the rendition component.
+     */
+    private applyRenditionSettings;
+    /**
+     * Update the snapshot rendition component with the current result data.
+     */
+    private updateRendition;
     /**
      * Set the view data for the snapshot view.
      *
@@ -1337,13 +1281,7 @@ declare class SnapshotEditorComponent {
      * @param range The picked range.
      * @param applyToOp True to also apply the picked range to the edited operation.
      */
-    onRangePick(range?: VarBaseTextRange, applyToOp?: boolean): void;
-    /**
-     * Update the lists of operation output tags and element IDs by collecting
-     * all the operation tags and the IDs of the elements in their diplomatic.g
-     * SVG code if any.
-     */
-    private updateOpLists;
+    onRangePick(range?: BaseTextRange, applyToOp?: boolean): void;
     /**
      * Edit a new operation.
      */
@@ -1374,6 +1312,23 @@ declare class SnapshotEditorComponent {
      * @param index The index of the operation to delete.
      */
     deleteOperation(index: number): void;
+    /**
+     * Duplicate the operation at the specified index, inserting the copy
+     * immediately after the original.
+     * @param index The index of the operation to duplicate.
+     */
+    duplicateOperation(index: number): void;
+    /**
+     * Move the operation at the specified index up by one position.
+     * @param index The index of the operation to move up.
+     */
+    moveOperationUp(index: number): void;
+    /**
+     * Move the operation at the specified index down by one position.
+     * @param index The index of the operation to move down.
+     */
+    moveOperationDown(index: number): void;
+    copyOperationsJson(): void;
     /**
      * Parse the operations from their text and append them to the current
      * snapshot operations.
@@ -1446,50 +1401,16 @@ declare class SnapshotEditorComponent {
      * @param operation The operation being previewed.
      */
     onOperationPreview(operation: CharChainOperation): void;
-    private playTimeline;
     /**
      * Handle the event fired by the chain result view to pick a step.
      *
      * @param step The step to pick.
      */
     onStepPick(step: ChainOperationContextStep): void;
-    /**
-     * Handle the event fired by a visual in the snapshot view.
-     *
-     * @param event The event.
-     */
-    onVisualEvent(event: CustomEvent<GveVisualEvent>): void;
-    /**
-     * Handle the change of line heights by updating the form control.
-     *
-     * @param heights The line heights.
-     */
-    onHeightsChange(heights: Record<number, number> | undefined): void;
-    /**
-     * Handle the change of timelines by updating the form control.
-     *
-     * @param timelines The timelines.
-     */
-    onTimelinesChange(timelines?: GveAnimationTimeline[] | null): void;
     /**
      * Emit the cancel event for this snapshot edit.
      */
     close(): void;
-    /**
-     * Handle the render event from the snapshot view to get a reference
-     * to the renderer.
-     *
-     * @param event The rendition event.
-     */
-    onSnapshotRender(event: CustomEvent<SnapshotViewRenderEvent>): void;
-    onImageLoad(imageElement: HTMLImageElement): void;
-    onImageOpacityChange(value: number): void;
-    resetImgMetadata(): void;
-    /**
-     * Toggle rulers in the snapshot view.
-     */
-    toggleRulers(): void;
-    private defaultCharDecorator;
     /**
      * Get a snapshot from the form data.
      *
@@ -1502,7 +1423,7 @@ declare class SnapshotEditorComponent {
      */
     save(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnapshotEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnapshotEditorComponent, "gve-snapshot-editor", never, { "snapshot": { "alias": "snapshot"; "required": false; "isSignal": true; }; "batchOps": { "alias": "batchOps"; "required": false; "isSignal": true; }; "noSave": { "alias": "noSave"; "required": false; "isSignal": true; }; "debug": { "alias": "debug"; "required": false; "isSignal": true; }; "noDecoration": { "alias": "noDecoration"; "required": false; "isSignal": true; }; "featureDefs": { "alias": "featureDefs"; "required": false; "isSignal": true; }; "elementFeatureDefs": { "alias": "elementFeatureDefs"; "required": false; "isSignal": true; }; "diplomaticFeatureDefs": { "alias": "diplomaticFeatureDefs"; "required": false; "isSignal": true; }; }, { "snapshot": "snapshotChange"; "snapshotCancel": "snapshotCancel"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnapshotEditorComponent, "gve-snapshot-editor", never, { "snapshot": { "alias": "snapshot"; "required": false; "isSignal": true; }; "batchOps": { "alias": "batchOps"; "required": false; "isSignal": true; }; "noSave": { "alias": "noSave"; "required": false; "isSignal": true; }; "debug": { "alias": "debug"; "required": false; "isSignal": true; }; "noDecoration": { "alias": "noDecoration"; "required": false; "isSignal": true; }; "featureDefs": { "alias": "featureDefs"; "required": false; "isSignal": true; }; "multiValuedFeatureIds": { "alias": "multiValuedFeatureIds"; "required": false; "isSignal": true; }; "renditionSettings": { "alias": "renditionSettings"; "required": false; "isSignal": true; }; }, { "snapshot": "snapshotChange"; "snapshotCancel": "snapshotCancel"; }, never, never, true, never>;
 }
 
 /**
@@ -1515,6 +1436,7 @@ declare class SnapshotEditorComponent {
  * - 🔥 `textChange` (`CharNode[]`): event emitted when text changes.
  */
 declare class SnapshotTextEditorComponent implements OnInit {
+    private _snackbar;
     dialogRef?: MatDialogRef<SnapshotTextEditorComponent> | undefined;
     data?: PayloadMatDialogConfig<{
         text?: CharNode[];
@@ -1522,14 +1444,15 @@ declare class SnapshotTextEditorComponent implements OnInit {
     userText: FormControl<string>;
     form: FormGroup;
     readonly text: _angular_core.ModelSignal<CharNode[]>;
-    constructor(formBuilder: FormBuilder, dialogRef?: MatDialogRef<SnapshotTextEditorComponent> | undefined, data?: PayloadMatDialogConfig<{
+    constructor(formBuilder: FormBuilder, _snackbar: MatSnackBar, dialogRef?: MatDialogRef<SnapshotTextEditorComponent> | undefined, data?: PayloadMatDialogConfig<{
         text?: CharNode[];
     }> | undefined);
     private updateUserText;
     ngOnInit(): void;
     close(): void;
+    copyToClipboard(): void;
     save(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnapshotTextEditorComponent, [null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnapshotTextEditorComponent, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnapshotTextEditorComponent, "gve-snapshot-text-editor", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "text": "textChange"; }, never, never, true, never>;
 }
 
@@ -1579,5 +1502,45 @@ declare class StepsMapComponent implements AfterViewInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepsMapComponent, "gve-steps-map", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "selectedStep": { "alias": "selectedStep"; "required": false; "isSignal": true; }; "textFontSize": { "alias": "textFontSize"; "required": false; "isSignal": true; }; }, { "selectedStep": "selectedStepChange"; }, never, never, true, never>;
 }
 
-export { AnimationTimelineComponent, AnimationTimelineSetComponent, AnimationTweenComponent, BaseTextCharComponent, BaseTextEditorComponent, BaseTextViewComponent, BatchOperationEditorComponent, ChainOperationEditorComponent, ChainResultViewComponent, ChainViewComponent, FeatureEditorComponent, FeatureSetEditorComponent, FeatureSetViewComponent, GveApiService, GveGraphvizService, LnHeightsEditorComponent, OperationSourceEditorComponent, SettingsService, SnapshotEditorComponent, SnapshotTextEditorComponent, StepsMapComponent };
-export type { BaseTextChar, BaseTextCharEvent, ChainOperationContextStep, ChainOperationTags, CharChain, CharChainLink, CharChainNode, CharChainResult, FeatureDefinitions, FeatureMap, GraphvizRankdir, PayloadMatDialogConfig, ResultWrapper, VarBaseTextRange };
+/**
+ * Service for base text operations.
+ */
+declare class GveBaseTextService {
+    private static readonly _asciiTable;
+    /**
+     * Translate an ASCII special character to a printable character.
+     *
+     * @param c The character to translate.
+     * @returns The translated character.
+     */
+    static translateSpecialChar(c: string): string;
+    /**
+     * Convert a string to the character nodes of a base text.
+     *
+     * @param text The text to convert to base characters.
+     * @returns Character nodes for the given text.
+     */
+    static stringToBaseChars(text?: string): CharNode[];
+}
+
+type GraphvizRankdir = 'TB' | 'LR' | 'BT' | 'RL';
+declare class GveGraphvizService {
+    private hashString;
+    private hslToRgb;
+    private getColorForTag;
+    private getExcludedNodeIds;
+    /**
+     * Represent the received chain as a Graphviz digraph.
+     *
+     * @param chain The source chain if any.
+     * @param tags The tags to show. When set, only the links with these tags are shown.
+     * @param rankdir The rank direction.
+     * @returns Graphviz representation of the chain.
+     */
+    generateGraph(chain?: CharChain, tags?: string[], rankdir?: GraphvizRankdir): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GveGraphvizService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<GveGraphvizService>;
+}
+
+export { BaseTextCharComponent, BaseTextEditorComponent, BaseTextViewComponent, BatchOperationEditorComponent, ChainOperationEditorComponent, ChainResultViewComponent, FeatureEditorComponent, FeatureSetEditorComponent, FeatureSetPolicy, FeatureSetViewComponent, GveApiService, GveBaseTextService, GveGraphvizService, OperationSourceEditorComponent, OperationType, SettingsService, SnapshotEditorComponent, SnapshotTextEditorComponent, StepsMapComponent };
+export type { BaseTextChar, BaseTextCharEvent, BaseTextRange, ChainOperationContextStep, ChainOperationTags, CharChain, CharChainLink, CharChainNode, CharChainOperation, CharChainResult, CharNode, Feature, FeatureDefinitions, FeatureMap, GraphvizRankdir, LabeledId, OperationFeature, OperationMetadata, OperationSource, PayloadMatDialogConfig, ResultWrapper, Snapshot, TreeNode };