@myrmidon/gve-snapshot-rendition 0.0.1

package/dist/ui/version-text-area.d.ts

@@ -0,0 +1,131 @@
+import { GveRenditionSettings } from "../settings/settings";
+import { Logger } from "../core/logger";
+/**
+ * Version text area component - displays plain text for current version.
+ * Can be collapsed/expanded and includes toolbar for text manipulation.
+ * Now includes previous text (Text B), pinning, and diff view.
+ */
+export declare class VersionTextArea {
+    private container;
+    private textAreaA;
+    private textAreaB;
+    private diffPanel;
+    private textPanelA;
+    private textPanelB;
+    private textPanelDiff;
+    private copyBtn;
+    private wrapBtn;
+    private increaseFontBtn;
+    private decreaseFontBtn;
+    private pinBtn;
+    private diffDirectionBtn;
+    private collapseBtn;
+    private resizeHandle;
+    private _settings;
+    private _logger;
+    private _isCollapsed;
+    private _wordWrap;
+    private _currentFontSize;
+    private _isDragging;
+    private _startY;
+    private _startHeight;
+    private _isPinned;
+    private _diffDirection;
+    private _previousText;
+    private _panelResizing;
+    constructor(settings: GveRenditionSettings, logger: Logger);
+    /**
+     * Create and return the version text area container.
+     */
+    create(): HTMLElement;
+    /**
+     * Replace feather icon placeholders with actual SVG icons.
+     */
+    private replaceFeatherIcons;
+    /**
+     * Apply text styles from settings.
+     */
+    private applyTextStyles;
+    /**
+     * Attach event listeners to toolbar buttons.
+     */
+    private attachEventListeners;
+    /**
+     * Copy current text (A) to clipboard.
+     */
+    private copyText;
+    /**
+     * Toggle word wrap for text areas.
+     */
+    private toggleWordWrap;
+    /**
+     * Increase font size.
+     */
+    private increaseFontSize;
+    /**
+     * Decrease font size.
+     */
+    private decreaseFontSize;
+    /**
+     * Toggle pin state for previous text (B).
+     */
+    private togglePin;
+    /**
+     * Toggle diff direction (B→A or A→B).
+     */
+    private toggleDiffDirection;
+    /**
+     * Toggle collapse/expand state.
+     */
+    private toggleCollapse;
+    /**
+     * Update the displayed text.
+     * @param text - The plain text to display
+     */
+    updateText(text: string): void;
+    /**
+     * Update the diff panel.
+     */
+    private updateDiff;
+    /**
+     * Render diff results as HTML.
+     * @param diffs - Array of diff operations
+     */
+    private renderDiff;
+    /**
+     * Escape HTML special characters.
+     */
+    private escapeHtml;
+    /**
+     * Clear the text area.
+     */
+    clear(): void;
+    /**
+     * Update settings.
+     */
+    updateSettings(settings: GveRenditionSettings): void;
+    /**
+     * Start resize operation.
+     */
+    private startResize;
+    /**
+     * Handle resize during drag.
+     */
+    private handleResize;
+    /**
+     * End resize operation.
+     */
+    private endResize;
+    /**
+     * Start panel resize operation.
+     */
+    private startPanelResize;
+    /**
+     * Handle panel resize during drag.
+     */
+    private handlePanelResize;
+    /**
+     * End panel resize operation.
+     */
+    private endPanelResize;
+}

package/dist/ui/versions-list-area.d.ts

@@ -0,0 +1,88 @@
+import { GveRenditionSettings } from "../settings/settings";
+import { Logger } from "../core/logger";
+import { CharChainResult } from "../models";
+/**
+ * Versions list area component - displays list of all versions with hilite and navigation.
+ */
+export declare class VersionsListArea {
+    private container;
+    private listContainer;
+    private stagedOnlyCheckbox;
+    private collapseBtn;
+    private _settings;
+    private _logger;
+    private _colorPalette;
+    private _isCollapsed;
+    private _showStagedOnly;
+    private _data;
+    private _currentVersionTag;
+    private _hilitedVersionTag;
+    private _versions;
+    private _hasStagedVersions;
+    private _onNavigate?;
+    private _onHiliteToggle?;
+    constructor(settings: GveRenditionSettings, logger: Logger);
+    create(): HTMLElement;
+    /**
+     * Replace feather icon placeholders with actual SVG icons.
+     */
+    private replaceFeatherIcons;
+    /**
+     * Attach event listeners.
+     */
+    private attachEventListeners;
+    /**
+     * Toggle collapse/expand state.
+     */
+    private toggleCollapse;
+    /**
+     * Set navigation callback.
+     */
+    setNavigateCallback(callback: (versionTag: string) => void): void;
+    /**
+     * Set hilite toggle callback.
+     */
+    setHiliteToggleCallback(callback: (versionTag: string | null) => void): void;
+    /**
+     * Update with new data.
+     * @param data - The CharChainResult data
+     */
+    updateData(data: CharChainResult | null): void;
+    /**
+     * Update current version tag.
+     * @param versionTag - Current version tag
+     */
+    updateCurrentVersion(versionTag: string): void;
+    /**
+     * Clear hilites (e.g., when navigating to another version).
+     */
+    clearHilites(): void;
+    /**
+     * Build the versions list from data.
+     */
+    private buildVersionsList;
+    /**
+     * Render the versions list.
+     */
+    private renderVersionsList;
+    /**
+     * Create a version list item.
+     */
+    private createVersionItem;
+    /**
+     * Get color for a version tag.
+     */
+    getVersionColor(versionTag: string): string;
+    /**
+     * Handle navigate button click.
+     */
+    private handleNavigate;
+    /**
+     * Handle hilite toggle on version link click.
+     */
+    private handleHiliteToggle;
+    /**
+     * Update settings.
+     */
+    updateSettings(settings: GveRenditionSettings): void;
+}

package/dist/utils/color-palette.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Generates pastel colors for version tags with maximum visual distinction.
+ * Uses HSL color space to ensure consistent saturation and lightness
+ * while varying hue to maximize differentiation.
+ */
+/**
+ * Generate a deterministic pastel color for a version tag.
+ * The same version tag will always produce the same color.
+ *
+ * @param versionTag - The version tag (e.g., "v0", "v1", "v2")
+ * @returns A CSS color string in HSL format
+ */
+export declare function getVersionColor(versionTag: string): string;
+/**
+ * Generate a pastel color by index using golden ratio distribution.
+ * This ensures maximum visual distinction between colors.
+ *
+ * @param index - The index (0-based)
+ * @returns A CSS color string in HSL format
+ */
+export declare function getColorByIndex(index: number): string;
+/**
+ * Generate a color palette for all version tags.
+ *
+ * @param versionTags - Array of version tags
+ * @returns Map of version tag to color string
+ */
+export declare function generateVersionPalette(versionTags: string[]): Map<string, string>;
+/**
+ * Get a darker variant of a color for hover/active states.
+ *
+ * @param hslColor - HSL color string
+ * @param lightnessReduction - How much to reduce lightness (default: 10%)
+ * @returns Darker HSL color string
+ */
+export declare function getDarkerVariant(hslColor: string, lightnessReduction?: number): string;

package/dist/utils/feature-utils.d.ts

@@ -0,0 +1,76 @@
+import { Feature, OperationFeature } from "../models";
+/**
+ * Utility functions for working with features.
+ */
+/**
+ * Get the value of a feature by name from a feature array.
+ * Returns undefined if not found.
+ */
+export declare function getFeatureValue(features: Feature[] | undefined, name: string): string | undefined;
+/**
+ * Check if a feature exists in a feature array.
+ */
+export declare function hasFeature(features: Feature[] | undefined, name: string): boolean;
+/**
+ * Get all features with names starting with a specific prefix.
+ */
+export declare function getFeaturesByPrefix(features: Feature[] | undefined, prefix: string): Feature[];
+/**
+ * Get all rendition features (those starting with "r_").
+ */
+export declare function getRenditionFeatures(features: Feature[] | undefined): Feature[];
+/**
+ * Get all trace features (those starting with "$").
+ */
+export declare function getTraceFeatures(features: Feature[] | undefined): Feature[];
+/**
+ * Check if a feature is a trace feature.
+ */
+export declare function isTraceFeature(feature: Feature): boolean;
+/**
+ * Check if a feature is a rendition feature.
+ */
+export declare function isRenditionFeature(feature: Feature): boolean;
+/**
+ * Filter out trace features from a feature array.
+ */
+export declare function filterTraceFeatures(features: Feature[] | undefined): Feature[];
+/**
+ * Filter out rendition features from a feature array (unless debug mode is on).
+ */
+export declare function filterRenditionFeatures(features: Feature[] | undefined, debug: boolean): Feature[];
+/**
+ * Parse char-offsets feature value.
+ * Format: "ID:y=...,x=... ID:y=...,x=..." (multiple patterns separated by space)
+ * Each pattern: ID:y=value,x=value (y and x are optional, can be in any order)
+ *
+ * @returns Map of node ID to {x?: number, y?: number}
+ */
+export declare function parseCharOffsets(value: string): Map<number, {
+    x?: number;
+    y?: number;
+}>;
+/**
+ * Parse displaced span reference.
+ * Format: "IDxN" where ID is node ID and N is count
+ * Example: "21x7" means starting from node 21, include 7 characters
+ *
+ * @returns {nodeId, count} or undefined if invalid
+ */
+export declare function parseDisplacedSpan(value: string): {
+    nodeId: number;
+    count: number;
+} | undefined;
+/**
+ * Parse hint variable assignments from r_hint-vars feature.
+ * Format: "name=value name=value ..."
+ * Example: "color=red bold=1"
+ *
+ * @returns Map of variable name to value
+ */
+export declare function parseHintVars(value: string): Map<string, string>;
+/**
+ * Get node features for a specific node at a specific version.
+ * Node features are keyed as "vTAG_NODEID" in the nodeFeatures map.
+ */
+export declare function getNodeFeatures(nodeFeatures: Record<string, OperationFeature[]>, versionTag: string, nodeId: number): OperationFeature[];

package/dist/utils/node-utils.d.ts

@@ -0,0 +1,47 @@
+import { CharNode } from "../models";
+/**
+ * Utility functions for working with character nodes.
+ */
+/**
+ * Generate character nodes from a string.
+ * Each character gets a node with a sequential ID starting from 1.
+ *
+ * @param text - The text to convert to nodes
+ * @returns Array of character nodes
+ */
+export declare function stringToNodes(text: string): CharNode[];
+/**
+ * Get a label for a character node suitable for display.
+ * Uses special symbols for whitespace characters.
+ */
+export declare function getNodeLabel(node: CharNode): string;
+/**
+ * Check if a node represents a line break.
+ */
+export declare function isLineBreak(node: CharNode): boolean;
+/**
+ * Check if a node represents a space.
+ */
+export declare function isSpace(node: CharNode): boolean;
+/**
+ * Check if a node is printable (not a space or line break).
+ */
+export declare function isPrintable(node: CharNode): boolean;
+/**
+ * Find a node by ID in an array of nodes.
+ */
+export declare function findNodeById(nodes: CharNode[], id: number): CharNode | undefined;
+/**
+ * Get a range of nodes starting from a specific node ID.
+ * Used for processing displaced spans (IDxN format).
+ *
+ * @param nodes - All available nodes
+ * @param startId - Starting node ID
+ * @param count - Number of nodes to include
+ * @returns Array of nodes in the span, or empty array if not found
+ */
+export declare function getNodeSpan(nodes: CharNode[], startId: number, count: number): CharNode[];
+/**
+ * Get nodes by their IDs.
+ */
+export declare function getNodesByIds(nodes: CharNode[], ids: number[]): CharNode[];

package/dist/utils/text-utils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Text processing utilities.
+ */
+/**
+ * Escape HTML special characters to prevent injection.
+ */
+export declare function escapeHtml(text: string): string;
+/**
+ * Parse an offset value which can be either:
+ * - A number (e.g., 10)
+ * - A suffixed number with "th" (text height) or "tw" (text width)
+ *
+ * @param value - The offset value (number or string)
+ * @param textHeight - The height of reference text bounds
+ * @param textWidth - The width of reference text bounds
+ * @returns The computed offset in pixels
+ */
+export declare function parseOffset(value: number | string, textHeight: number, textWidth: number): number;
+/**
+ * Replace placeholders in SVG content.
+ * Placeholders are in the format {{featureName}}.
+ *
+ * @param svgContent - The SVG content with placeholders
+ * @param variables - Map of variable names to values
+ * @returns SVG content with placeholders replaced
+ */
+export declare function resolvePlaceholders(svgContent: string, variables: Map<string, string>): string;
+/**
+ * Generate a unique ID by combining prefix and suffix.
+ */
+export declare function generateId(prefix: string, suffix: string | number): string;
+/**
+ * Truncate a string to a maximum length, adding ellipsis if needed.
+ */
+export declare function truncate(text: string, maxLength: number): string;

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@myrmidon/gve-snapshot-rendition",
+  "version": "0.0.1",
+  "homepage": "https://github.com/vedph/gve-snapshot-rendition",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vedph/gve-snapshot-rendition"
+  },
+  "author": "Daniele Fusi",
+  "license": "",
+  "description": "Web components for rendering interactive text transformations with hint designer. This package is an early version published for internal evaluation and staging use only. A final open-source license will be published later.",
+  "keywords": [
+    "snapshot",
+    "rendition",
+    "VEdition",
+    "genetic-philology",
+    "hint-designer",
+    "text-transformation"
+  ],
+  "main": "./dist/index.js",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c -w",
+    "start": "concurrently \"rollup -c -w\" \"lite-server\"",
+    "start:designer": "concurrently \"rollup -c -w\" \"lite-server -c bs-config.designer.json\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test-ui": "vitest --ui",
+    "prepublishOnly": "npm run test && npm run build",
+    "prepack": "npm run build",
+    "publish:public": "npm publish --access=public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "packageManager": "pnpm@10.24.0",
+  "dependencies": {
+    "fast-diff": "^1.3.0",
+    "feather-icons": "^4.29.2",
+    "gsap": "^3.13.0",
+    "highlight.js": "^11.11.1",
+    "svg-pan-zoom": "^3.6.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@vitest/ui": "^4.0.14",
+    "concurrency": "^0.1.4",
+    "concurrently": "^9.2.1",
+    "lite-server": "^2.6.1",
+    "rollup": "^4.53.3",
+    "source-map-loader": "^5.0.0",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.14"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-win32-arm64-msvc": "^4.53.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "rollup": "npm:@rollup/wasm-node"
+    }
+  }
+}