@myrmidon/gve-snapshot-rendition 0.0.1 → 0.0.3

package/README.md

@@ -16,6 +16,11 @@ Operations also inject metadata, in form of features (essentially name=value pai
 
 Both hints and animations are part of the settings for the component. The component is found under [src/core/gve-snapshot-rendition.ts](src/core/gve-snapshot-rendition.ts), and most of its logic is properly encapsulated in its own set of classes, following a systematic separation of concerns to ensure flexibility, extendibility, and easy maintenance.
 
+## Usage Guide
+
+- [Angular integration](docs/dev/angular-integration.md)
+- [vanilla integration](docs/dev/vanilla-integration.md)
+
 ## Documentation
 
 Conceptual documentation and sample data:
@@ -133,3 +138,16 @@ npm unpublish @myrmidon/gve-snapshot-rendition --force
 ```
 
 >⚠️ Unpublishing can break projects that depend on your package. Only do this for critical security issues or accidental publications.
+
+Package structure:
+
+```txt
+@myrmidon/gve-snapshot-rendition/
+├── dist/
+│   ├── index.js              # ES Module bundle
+│   ├── index.d.ts            # TypeScript declarations
+│   ├── index.cjs.min.js      # CommonJS bundle (minified)
+│   └── ...
+├── README.md
+└── LICENSE
+```

package/dist/hint-designer/gve-hint-designer.d.ts

@@ -23,6 +23,8 @@ export declare class GveHintDesigner extends HTMLElement {
     private _svgHighlightContainer?;
     private _jsHighlightContainer?;
     private _hintsDropdown?;
+    private _svgWordWrapEnabled;
+    private _jsWordWrapEnabled;
     private _animationsDropdown?;
     private _embeddedJsCheckbox?;
     private _newAnimationCheckbox?;
@@ -39,6 +41,8 @@ export declare class GveHintDesigner extends HTMLElement {
     private _pauseButton?;
     private _restartButton?;
     private _progressBar?;
+    private _variablesValidationMsg?;
+    private _variablesPanelHeader?;
     private _currentTimeline?;
     private _isPlaying;
     private _progressUpdateInterval?;
@@ -120,7 +124,10 @@ export declare class GveHintDesigner extends HTMLElement {
      */
     private createPositionSelect;
     /**
-     * Make a panel resizable.
+     * Make a splitter resizable between two panels.
+     * @param panelAbove The panel above the splitter
+     * @param _panelBelow The panel below the splitter (unused but kept for API clarity)
+     * @param splitter The splitter element between them
      */
     private makeResizable;
     /**
@@ -163,6 +170,11 @@ export declare class GveHintDesigner extends HTMLElement {
      * Clear the hint form.
      */
     private clearHintForm;
+    /**
+     * Validate SVG code for well-formedness and structure.
+     * Returns an error message if validation fails, or null if valid.
+     */
+    private validateSvgCode;
     /**
      * Add a new hint.
      */
@@ -187,6 +199,19 @@ export declare class GveHintDesigner extends HTMLElement {
      * Resolve variables in SVG code.
      */
     private resolveVariables;
+    /**
+     * Extract variable names from SVG code (variables in {{...}} placeholders).
+     */
+    private extractVariablesFromSvg;
+    /**
+     * Validate SVG variables and update validation message.
+     * Shows a warning if any variables used in SVG are not defined in hint variables.
+     */
+    private validateSvgVariables;
+    /**
+     * Update warning icon in variables panel header.
+     */
+    private updateVariablesHeaderWarning;
     /**
      * Play animation.
      */
@@ -231,6 +256,18 @@ export declare class GveHintDesigner extends HTMLElement {
      * Update SVG transform based on zoom and pan.
      */
     private updateSvgTransform;
+    /**
+     * Size to fit the SVG content.
+     */
+    private sizeToFit;
+    /**
+     * Toggle word wrap for SVG textarea.
+     */
+    private toggleSvgWordWrap;
+    /**
+     * Toggle word wrap for JS textarea.
+     */
+    private toggleJsWordWrap;
     /**
      * Save data to file.
      */
@@ -263,6 +300,17 @@ export declare class GveHintDesigner extends HTMLElement {
      * Delete all variables.
      */
     private deleteAllVariables;
+    /**
+     * Extract all variable names from all hints in data.
+     * Returns a sorted array of unique variable names.
+     */
+    private extractAllVariablesFromHints;
+    /**
+     * Populate hint variables from all hints.
+     * Extracts all variables from all hints' SVG code and merges them into hintVariables.
+     * Only adds variables that don't already exist.
+     */
+    private populateVariablesFromHints;
     /**
      * Refresh the variables table.
      */