@myrmidon/gve-core 1.0.0 → 3.0.2

package/lib/components/feature-set-editor/feature-set-editor.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
 import { LabeledId, Feature, OperationFeature } from '@myrmidon/gve-snapshot-view';
 import { FeatureMap } from '../feature-editor/feature-editor.component';
@@ -19,7 +19,7 @@ import * as i0 from "@angular/core";
  * - ▶️ `filterThreshold` (`number`): the threshold at which the features filter
  * should become visible. If set to 0, the filter is always visible; if set to -1,
  * it is always invisible; otherwise, it gets visible when the number of features
- * is greater than the threshold. Default is 5.
+ * is equal to or greater than the threshold. Default is 5.
  * - ▶️ `features` (`Feature[]`): the features to edit.
  * - ▶️ `isVar`: true if the feature is a variant operation feature, which
  * has additional properties like negation, global, and short-lived.
@@ -27,40 +27,38 @@ import * as i0 from "@angular/core";
  */
 export declare class FeatureSetEditorComponent implements OnInit, OnDestroy {
     private _sub?;
-    private _features;
     private _editedFeatureIndex;
     POLICIES: string[];
     /**
      * True if the features are variable features.
      */
-    isVar: boolean;
+    readonly isVar: import("@angular/core").InputSignal<boolean>;
     /**
      * The list of feature names to display in the name selection.
      * This is used when you have a closed list of features.
      */
-    featNames: LabeledId[] | undefined;
+    readonly featNames: import("@angular/core").InputSignal<LabeledId[] | undefined>;
     /**
      * 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.
      */
-    featValues: FeatureMap | undefined;
+    readonly featValues: import("@angular/core").InputSignal<FeatureMap | undefined>;
     /**
      * The threshold at which the features filter should become visible.
      * If set to 0, the filter is always visible; if set to -1, it is always
      * invisible; otherwise, it gets visible when the number of features
-     * is greater than the threshold. Default is 5.
+     * is greater than or equal to the threshold. Default is 5.
      */
-    filterThreshold: number;
+    readonly filterThreshold: import("@angular/core").InputSignal<number>;
     /**
      * The features to edit.
      */
-    get features(): Feature[] | OperationFeature[];
-    set features(value: Feature[] | OperationFeature[]);
+    readonly features: import("@angular/core").ModelSignal<Feature[] | OperationFeature[]>;
     /**
      * Emitted when the features change.
      */
-    featuresChange: EventEmitter<Feature[] | OperationFeature[]>;
+    readonly featuresChange: import("@angular/core").OutputEmitterRef<Feature[] | OperationFeature[]>;
     editedFeature?: Feature | OperationFeature;
     filter: FormControl<string | null>;
     filteredFeatures: Feature[] | OperationFeature[];
@@ -71,8 +69,8 @@ export declare class FeatureSetEditorComponent implements OnInit, OnDestroy {
     addFeature(): void;
     editFeature(feature: Feature | OperationFeature): void;
     deleteFeature(feature: Feature | OperationFeature): void;
-    onFeatureChange(feature: Feature | OperationFeature): void;
+    onFeatureChange(feature?: Feature | OperationFeature): void;
     onFeatureCancel(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FeatureSetEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FeatureSetEditorComponent, "gve-feature-set-editor", never, { "isVar": { "alias": "isVar"; "required": false; }; "featNames": { "alias": "featNames"; "required": false; }; "featValues": { "alias": "featValues"; "required": false; }; "filterThreshold": { "alias": "filterThreshold"; "required": false; }; "features": { "alias": "features"; "required": false; }; }, { "featuresChange": "featuresChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵ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"; "featuresChange": "featuresChange"; }, never, never, true, never>;
 }

package/lib/components/feature-set-view/feature-set-view.component.d.ts

@@ -21,30 +21,28 @@ import * as i0 from "@angular/core";
  */
 export declare class FeatureSetViewComponent {
     private _sub?;
-    private _features;
     /**
      * The features.
      */
-    get features(): Feature[] | OperationFeature[];
-    set features(value: Feature[] | OperationFeature[]);
+    readonly features: import("@angular/core").InputSignal<Feature[] | OperationFeature[]>;
     /**
      * The list of feature names to display in the name selection.
      * This is used when you have a closed list of features.
      */
-    featNames: LabeledId[] | undefined;
+    readonly featNames: import("@angular/core").InputSignal<LabeledId[] | undefined>;
     /**
      * 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.
      */
-    featValues: FeatureMap | undefined;
+    readonly featValues: import("@angular/core").InputSignal<FeatureMap | undefined>;
     /**
      * The threshold at which the features filter should become visible.
      * If set to 0, the filter is always visible; if set to -1, it is always
      * invisible; otherwise, it gets visible when the number of features
      * is greater than the threshold. Default is 5.
      */
-    filterThreshold: number;
+    readonly filterThreshold: import("@angular/core").InputSignal<number>;
     filter: FormControl<string | null>;
     filteredFeatures: Feature[] | OperationFeature[];
     constructor(formBuilder: FormBuilder);
@@ -52,5 +50,5 @@ export declare class FeatureSetViewComponent {
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FeatureSetViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FeatureSetViewComponent, "gve-feature-set-view", never, { "features": { "alias": "features"; "required": false; }; "featNames": { "alias": "featNames"; "required": false; }; "featValues": { "alias": "featValues"; "required": false; }; "filterThreshold": { "alias": "filterThreshold"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/lib/components/ln-heights-editor/ln-heights-editor.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 /**
@@ -15,24 +15,21 @@ import * as i0 from "@angular/core";
 export declare class LnHeightsEditorComponent implements OnInit, OnDestroy {
     private _subs?;
     private _heights?;
-    private _lineCount;
     lineNumber: FormControl<number>;
     height: FormControl<number>;
     /**
      * The total number of lines in the text.
      */
-    get lineCount(): number;
-    set lineCount(value: number);
+    readonly lineCount: import("@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.
      */
-    get heights(): Record<number, number> | undefined;
-    set heights(value: Record<number, number> | undefined | null);
+    readonly heights: import("@angular/core").InputSignal<Record<number, number> | undefined>;
     /**
      * The event emitted when the heights change.
      */
-    readonly heightsChange: EventEmitter<Record<number, number> | undefined>;
+    readonly heightsChange: import("@angular/core").OutputEmitterRef<Record<number, number> | undefined>;
     lineNumbers: number[];
     constructor(formBuilder: FormBuilder);
     private pruneHeights;
@@ -40,5 +37,5 @@ export declare class LnHeightsEditorComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     reset(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LnHeightsEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LnHeightsEditorComponent, "gve-ln-heights-editor", never, { "lineCount": { "alias": "lineCount"; "required": false; }; "heights": { "alias": "heights"; "required": false; }; }, { "heightsChange": "heightsChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/lib/components/operation-source-editor/operation-source-editor.component.d.ts

@@ -1,4 +1,3 @@
-import { EventEmitter } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { LabeledId, OperationSource } from '@myrmidon/gve-snapshot-view';
 import * as i0 from "@angular/core";
@@ -19,28 +18,26 @@ import * as i0 from "@angular/core";
  * edit is canceled.
  */
 export declare class OperationSourceEditorComponent {
-    private _source;
     /**
      * The source to edit.
      */
-    get source(): OperationSource | undefined;
-    set source(value: OperationSource | undefined | null);
+    readonly source: import("@angular/core").ModelSignal<OperationSource | undefined>;
     /**
-     * The list of source IDs when it's closed.
+     * The list of source IDs when it's a closed set.
      */
-    ids?: LabeledId[];
+    readonly ids: import("@angular/core").InputSignal<LabeledId[] | undefined>;
     /**
-     * The list of source types when it's closed.
+     * The list of source types when it's a closed set.
      */
-    types?: LabeledId[];
+    readonly types: import("@angular/core").InputSignal<LabeledId[] | undefined>;
     /**
      * The event emitted when the source changes.
      */
-    readonly sourceChange: EventEmitter<OperationSource | undefined>;
+    readonly sourceChange: import("@angular/core").OutputEmitterRef<OperationSource | undefined>;
     /**
      * The event emitted when the edit is canceled.
      */
-    sourceCancel: EventEmitter<void>;
+    sourceCancel: import("@angular/core").OutputEmitterRef<void>;
     id: FormControl<string>;
     type: FormControl<string>;
     rank: FormControl<number>;
@@ -51,5 +48,5 @@ export declare class OperationSourceEditorComponent {
     cancel(): void;
     save(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OperationSourceEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OperationSourceEditorComponent, "gve-operation-source-editor", never, { "source": { "alias": "source"; "required": false; }; "ids": { "alias": "ids"; "required": false; }; "types": { "alias": "types"; "required": false; }; }, { "sourceChange": "sourceChange"; "sourceCancel": "sourceCancel"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OperationSourceEditorComponent, "gve-operation-source-editor", never, { "source": { "alias": "source"; "required": false; "isSignal": true; }; "ids": { "alias": "ids"; "required": false; "isSignal": true; }; "types": { "alias": "types"; "required": false; "isSignal": true; }; }, { "source": "sourceChange"; "sourceChange": "sourceChange"; "sourceCancel": "sourceCancel"; }, never, never, true, never>;
 }

package/lib/components/snapshot-editor/snapshot-editor.component.d.ts

@@ -1,11 +1,11 @@
-import { ElementRef, EventEmitter } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatDialog } from '@angular/material/dialog';
-import { DialogService } from '@myrmidon/ng-mat-tools';
+import { DialogService } from '@myrmidon/ngx-mat-tools';
 import { CharChainOperation, CharNode, GveAnimationTimeline, GveVisualEvent, Snapshot, SnapshotViewComponent, SnapshotViewData, SnapshotViewRenderEvent } from '@myrmidon/gve-snapshot-view';
 import { VarBaseTextRange } from '../base-text-view/base-text-view.component';
-import { ChainOperationContextStep, CharChainResult, GveApiService } from '../../services/gve-api.service';
+import { ChainOperationContextStep, CharChain, CharChainResult, GveApiService } from '../../services/gve-api.service';
 import * as i0 from "@angular/core";
 /**
  * 🔑 `gve-snapshot-editor`
@@ -25,7 +25,6 @@ export declare class SnapshotEditorComponent {
     private _dialogService;
     private _snackbar;
     private readonly _nanoid;
-    private _snapshot?;
     private _renderer?;
     private _previewing?;
     private _transparentIds?;
@@ -34,32 +33,31 @@ export declare class SnapshotEditorComponent {
     /**
      * The snapshot to edit.
      */
-    get snapshot(): Snapshot | undefined;
-    set snapshot(value: Snapshot | undefined | null);
+    readonly snapshot: import("@angular/core").ModelSignal<Snapshot | undefined>;
     /**
      * The batch operations text to set for the editor.
      */
-    batchOps?: string;
+    readonly batchOps: import("@angular/core").InputSignal<string | undefined>;
     /**
      * True to disable saving.
      */
-    noSave?: boolean;
+    readonly noSave: import("@angular/core").InputSignal<boolean | undefined>;
     /**
      * True to enable debug mode for view rendition.
      */
-    debug?: boolean;
+    readonly debug: import("@angular/core").InputSignal<boolean | undefined>;
     /**
      * Emitted when the user saves the edited snapshot.
      */
-    readonly snapshotChange: EventEmitter<Snapshot>;
+    readonly snapshotChange: import("@angular/core").OutputEmitterRef<Snapshot>;
     /**
      * Emitted when the user cancels the snapshot editing.
      */
-    readonly snapshotCancel: EventEmitter<void>;
+    readonly snapshotCancel: import("@angular/core").OutputEmitterRef<void>;
     width: FormControl<number>;
     height: FormControl<number>;
     style: FormControl<string | null>;
-    baseText: FormControl<CharNode[] | string>;
+    baseText: FormControl<CharNode[]>;
     offsetX: FormControl<number>;
     offsetY: FormControl<number>;
     lineHeightOffset: FormControl<number>;
@@ -103,6 +101,8 @@ export declare class SnapshotEditorComponent {
     result?: CharChainResult;
     resultOperationId?: string;
     initialStepIndex: number;
+    readonly showChain: FormControl<boolean>;
+    chain?: CharChain;
     constructor(formBuilder: FormBuilder, _api: GveApiService, _dialog: MatDialog, _dialogService: DialogService, _snackbar: MatSnackBar);
     /**
      * Set the view data for the snapshot view.
@@ -113,6 +113,7 @@ export declare class SnapshotEditorComponent {
      */
     private setViewData;
     private updateForm;
+    inputBaseText(): void;
     /**
      * Update the line count based on the received text.
      * @param text The text to use for counting lines.
@@ -122,12 +123,7 @@ export declare class SnapshotEditorComponent {
      * Handle the event fired by the base text editor to pick a text range.
      * @param range The picked range.
      */
-    onRangePick(range: VarBaseTextRange): void;
-    /**
-     * Handle the event fired by the base text editor to change the base text.
-     * @param text The text to set.
-     */
-    onTextChange(text: CharNode[]): void;
+    onRangePick(range?: VarBaseTextRange): 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
@@ -158,7 +154,7 @@ export declare class SnapshotEditorComponent {
      * was a new operation.
      * @param op The changed operation.
      */
-    onOperationChange(op: CharChainOperation): Promise<void>;
+    onOperationChange(op?: CharChainOperation | null): void;
     /**
      * Delete the operation at the specified index.
      * @param index The index of the operation to delete.
@@ -169,6 +165,9 @@ export declare class SnapshotEditorComponent {
      * snapshot operations.
      */
     parseOperations(): void;
+    /**
+     * Remove all the operations, close the edited operation and update the view data.
+     */
     private removeAllOperations;
     /**
      * Remove all the operations.
@@ -183,6 +182,24 @@ export declare class SnapshotEditorComponent {
      */
     private parseSvgIds;
     private getTransparentIds;
+    /**
+     * Supply operation nodes to the snapshot text nodes. An execution result is
+     * a compact object, so that to build a snapshot accumulating all the nodes
+     * and their features up to the last executed operation, we need to start
+     * with the base text nodes, and then examine each execution step in the
+     * result. Each step contains only those nodes used by the version of the
+     * text corresponding to its stage. Among them, some are new nodes, and some
+     * are base text nodes. Also, the step contains the full set of features
+     * current at its time, both for the text as a whole and for each node.
+     * This method accumulates the nodes and their features up to the specified
+     * step, updating the features of the nodes already present in the snapshot
+     * text nodes, and adding the new nodes.
+     *
+     * @param snapshot The snapshot to supply the nodes to.
+     * @param result The operations execution result.
+     * @param tag The output tag of the operation to supply the nodes from.
+     */
+    private supplyOpNodes;
     /**
      * Run the operations up to the specified index (included).
      * This is called when:
@@ -198,14 +215,16 @@ export declare class SnapshotEditorComponent {
      * @param lastOperation The operation to use in place of the existing
      * operation in the snapshot at index. This is used when previewing
      * the edited operation from within the operation editor.
+     * @returns A promise that resolves to the execution result.
      */
-    runTo(index: number, lastOperation?: CharChainOperation): Promise<CharChainResult>;
+    runTo(index: number, lastOperation?: CharChainOperation): void;
     /**
      * Run the operations up to the last operation if any, updating the
      * execution result. The execution result is always the result from
      * all the operations, as users must be able to browse across its steps.
      */
-    runToLast(): Promise<void>;
+    runToLast(): void;
+    getChainAt(index: number, lastOperation?: CharChainOperation): void;
     /**
      * Update the snapshot view by running the operations up to the
      * currently edited operation if any.
@@ -213,24 +232,13 @@ export declare class SnapshotEditorComponent {
      * @param operation The operation being previewed.
      */
     onOperationPreview(operation: CharChainOperation): void;
-    /**
-     * Build the snapshot at the specified execution step. This implies adding
-     * the nodes introduced by the operations up to the specified step, and
-     * updating the features of the nodes introduced by the specified step.
-     * Also, the operations after the specified step are removed from the
-     * snapshot.
-     *
-     * @param step The step to build the snapshot at.
-     * @returns The snapshot at the specified step.
-     */
-    private buildSnapshotAtStep;
     private playTimeline;
     /**
      * Handle the event fired by the chain result view to pick a step.
      *
      * @param step The step to pick.
      */
-    onStepPick(step: ChainOperationContextStep): Promise<void>;
+    onStepPick(step: ChainOperationContextStep): void;
     /**
      * Handle the event fired by a visual in the snapshot view.
      *
@@ -248,7 +256,7 @@ export declare class SnapshotEditorComponent {
      *
      * @param timelines The timelines.
      */
-    onTimelinesChange(timelines: GveAnimationTimeline[]): void;
+    onTimelinesChange(timelines?: GveAnimationTimeline[] | null): void;
     /**
      * Emit the cancel event for this snapshot edit.
      */
@@ -260,6 +268,9 @@ export declare class SnapshotEditorComponent {
      * @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.
      */
@@ -276,5 +287,5 @@ export declare class SnapshotEditorComponent {
      */
     save(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SnapshotEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SnapshotEditorComponent, "gve-snapshot-editor", never, { "snapshot": { "alias": "snapshot"; "required": false; }; "batchOps": { "alias": "batchOps"; "required": false; }; "noSave": { "alias": "noSave"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; }, { "snapshotChange": "snapshotChange"; "snapshotCancel": "snapshotCancel"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵ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; }; }, { "snapshot": "snapshotChange"; "snapshotChange": "snapshotChange"; "snapshotCancel": "snapshotCancel"; }, never, never, true, never>;
 }

package/lib/components/snapshot-text-editor/snapshot-text-editor.component.d.ts

@@ -0,0 +1,37 @@
+import { OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { CharNode } from '@myrmidon/gve-snapshot-view';
+import { PayloadMatDialogConfig } from '../../models';
+import * as i0 from "@angular/core";
+/**
+ * 🔑 `gve-snapshot-text-editor`
+ *
+ * A component to edit a snapshot text. This component can be used both in a dialog
+ * and as a standalone component.
+ *
+ * - ▶️ `text` (`CharNode[]`): the text to edit.
+ * - 🔥 `textChange` (`CharNode[]`): event emitted when text changes.
+ */
+export declare class SnapshotTextEditorComponent implements OnInit {
+    dialogRef?: MatDialogRef<SnapshotTextEditorComponent> | undefined;
+    data?: PayloadMatDialogConfig<{
+        text?: CharNode[];
+    }> | undefined;
+    userText: FormControl<string>;
+    form: FormGroup;
+    readonly text: import("@angular/core").ModelSignal<CharNode[]>;
+    /**
+     * Emitted when text changes.
+     */
+    readonly textChange: import("@angular/core").OutputEmitterRef<CharNode[]>;
+    constructor(formBuilder: FormBuilder, dialogRef?: MatDialogRef<SnapshotTextEditorComponent> | undefined, data?: PayloadMatDialogConfig<{
+        text?: CharNode[];
+    }> | undefined);
+    private updateUserText;
+    ngOnInit(): void;
+    close(): void;
+    save(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnapshotTextEditorComponent, [null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SnapshotTextEditorComponent, "gve-snapshot-text-editor", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "text": "textChange"; "textChange": "textChange"; }, never, never, true, never>;
+}

package/lib/components/steps-map/steps-map.component.d.ts

@@ -1,4 +1,3 @@
-import { EventEmitter } from '@angular/core';
 import { ChainOperationContextStep } from '../../services/gve-api.service';
 import * as i0 from "@angular/core";
 /**
@@ -21,28 +20,29 @@ import * as i0 from "@angular/core";
  * automatically selected.
  */
 export declare class StepsMapComponent {
-    private _steps?;
-    lines: string[];
+    lines: {
+        [key: string]: string[];
+    };
     /**
      * The steps to display.
      */
-    get steps(): ChainOperationContextStep[] | undefined;
-    set steps(value: ChainOperationContextStep[] | undefined | null);
+    readonly steps: import("@angular/core").InputSignal<ChainOperationContextStep[]>;
     /**
      * The step that is currently selected.
      */
-    selectedStep: ChainOperationContextStep | undefined;
+    readonly selectedStep: import("@angular/core").ModelSignal<ChainOperationContextStep | undefined>;
     /**
      * The font size of the steps text.
      */
-    textFontSize: string;
+    readonly textFontSize: import("@angular/core").InputSignal<string>;
     /**
      * Emitted when the selected step has changed by user, or when
      * the steps are set for the first time.
      */
-    selectedStepChange: EventEmitter<ChainOperationContextStep>;
+    selectedStepChange: import("@angular/core").OutputEmitterRef<ChainOperationContextStep | undefined>;
+    constructor();
     private updateLines;
     onStepClick(step: ChainOperationContextStep): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepsMapComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StepsMapComponent, "gve-steps-map", never, { "steps": { "alias": "steps"; "required": false; }; "selectedStep": { "alias": "selectedStep"; "required": false; }; "textFontSize": { "alias": "textFontSize"; "required": false; }; }, { "selectedStepChange": "selectedStepChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵ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"; "selectedStepChange": "selectedStepChange"; }, never, never, true, never>;
 }

package/lib/services/gve-api.service.d.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { ErrorService, EnvService } from '@myrmidon/ng-tools';
+import { ErrorService, EnvService } from '@myrmidon/ngx-tools';
 import { CharChainOperation, CharNode, OperationFeature } from '@myrmidon/gve-snapshot-view';
 import { ResultWrapper } from '../models';
 import * as i0 from "@angular/core";
@@ -21,13 +21,16 @@ export interface ChainOperationContextStep {
      */
     outputTag: string;
     /**
-     * The string synthetically representing the result.
+     * The string synthetically representing the resulting text
+     * version.
      */
     result?: string;
     /**
      * The features emitted up to the executed operation.
      * These are the features of the text as a whole, and
-     * those belonging to specific nodes.
+     * those belonging to specific nodes, each keyed under
+     * a string built with `v` + output version tag + `_`
+     * + node ID (e.g. `v1_2` for node with ID 2 at version 1).
      */
     featureSet: {
         features: OperationFeature[];
@@ -52,11 +55,15 @@ export interface CharChainResult {
      */
     chainDump: string;
     /**
-     * The list of unique tags in the chain.
+     * The list of all unique tags in the chain.
      */
     chainTags: string[];
     /**
      * The sets of nodes in their order, for each version tag.
+     * These nodes are collected by following the path defined
+     * by the set of links of each version tag; so each of the
+     * sets contains only the nodes used at that step to build
+     * the text version, with their features up to that stage.
      */
     taggedNodes: {
         [key: string]: CharNode[];
@@ -69,6 +76,33 @@ export interface ChainOperationTags {
     inputTag: string;
     outputTag: string;
 }
+/**
+ * The node of a character-based chain, used for diagnostic
+ * or demonstration purposes.
+ */
+export interface CharChainNode {
+    id: number;
+    label: string;
+    data: string;
+    sourceTag?: string;
+}
+/**
+ * The link of a character-based chain, used for diagnostic
+ * or demonstration purposes.
+ */
+export interface CharChainLink {
+    tag: string;
+    sourceId: number;
+    targetId: number;
+}
+/**
+ * The character-based chain, as resulting from running operations
+ * on a base text, used for diagnostic or demonstration purposes.
+ */
+export interface CharChain {
+    nodes: CharChainNode[];
+    links: CharChainLink[];
+}
 /**
  * Service to interact with the GVE API.
  */
@@ -99,6 +133,16 @@ export declare class GveApiService {
      * @returns Result wrapper.
      */
     getTags(operations: CharChainOperation[]): Observable<ResultWrapper<string[]>>;
+    /**
+     * Get the chain corresponding to the operations run on the
+     * specified text. This is used for diagnostic or demonstration
+     * purposes.
+     *
+     * @param text The base text.
+     * @param operations The operations to run.
+     * @returns Result wrapper.
+     */
+    getChain(text: CharNode[], operations: CharChainOperation[]): Observable<ResultWrapper<CharChain>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<GveApiService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<GveApiService>;
 }

package/lib/services/gve-graphviz.service.d.ts

@@ -0,0 +1,20 @@
+import { CharChain } from './gve-api.service';
+import * as i0 from "@angular/core";
+export type GraphvizRankdir = 'TB' | 'LR' | 'BT' | 'RL';
+export 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: i0.ɵɵFactoryDeclaration<GveGraphvizService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GveGraphvizService>;
+}