Macros 2.0 (v0.7.1) - Macro Autocomplete everywhere (#5019)

* Add macro autocomplete for free text inputs

Implements macro autocomplete (`{{`) for textareas and input fields marked with `data-macros` attribute. Extracts shared autocomplete logic into MacroAutoCompleteHelper.js for consistency between slash command and free text contexts. Includes MutationObserver for dynamic element initialization and supports variable shorthands, operators, flags, and scoped macro closing tags.

* fix annoying circular dependency again

* Add `data-macros` attribute to enable macro autocomplete on text inputs

Enables macro autocomplete (`{{`) for various textareas and input fields throughout the UI by adding the `data-macros` attribute. Includes context template fields, instruct mode sequences, character/persona descriptions, world info content, and other prompt-related inputs. Also ensures the attribute is preserved when expanding editors and creating world info entries.

* Allow macro autocomplete in editing messages

Enables macro autocomplete (`{{`) when editing messages by adding the `data-macros` attribute to the dynamically created edit textarea element.

* Add autocomplete visibility setting support for macro autocomplete

Respects the global STScript autocomplete visibility setting (`power_user.stscript.autocomplete.state`) for macro autocomplete in free text inputs. When set to "Input length > 1", macro autocomplete only activates after typing `{{` plus at least 2 characters. Also adds a tooltip to the visibility setting explaining it applies to both slash commands and macros.

* Fix unclosed div tag in STScript autocomplete visibility setting

Closes the `<div>` tag that was incorrectly left open in the autocomplete visibility setting markup.

* Add setting to control macro autocomplete visibility in non-expanded fields

Introduces a new `showInAllMacroFields` setting that controls whether macro autocomplete appears in all macro-enabled fields or only in expanded editors and when pressing Ctrl+Space. Also adds `data-macros-autocomplete` attribute support with `always` and `hide` modes for per-field override. When the setting is off, autocomplete only shows in expanded editors (which now get `data-macros-autocomplete="always"`) and the completion

* Add `data-macros-autocomplete-style` attribute to control macro autocomplete popup size

Introduces a new `data-macros-autocomplete-style` attribute with `small` (33vw, max 700px) and `expanded` (default chat width) modes to control macro autocomplete popup dimensions. The `small` style is now the default for inline fields, while `expanded` is used for expanded editors and prompt manager. Also refactors `getAutocompleteMode` to return `DEFAULT` instead of `null` and adds corresponding `getAutocompleteStyle` helper

* Fix autocomplete details panel alignment when list is constrained by viewport edge

Adjusts the details panel position to align with the actual autocomplete list position when the list is constrained by the right edge of the viewport. Previously, the panel would position based on cursor location even when the list was pushed left, causing misalignment. Now checks if the list's actual position differs from the calculated position (with 5px tolerance) and uses the list's position instead.

* Guard autocomplete details panel alignment check with `isReplaceable` condition

Prevents attempting to read the autocomplete list's bounding rect when the list is not visible. The alignment adjustment for viewport-constrained lists now only runs when `isReplaceable` is true, avoiding potential errors when the list DOM is not rendered.

* Fix macro autocomplete cursor detection to handle nested macros correctly

Updates `findMacroAtCursor` to track nesting depth when searching for opening `{{` and closing `}}` braces. Previously would incorrectly stop at the first brace pair encountered in either direction, breaking autocomplete when cursor was inside nested macros like `{{getvar::{{getvar::name}}}}`. Now properly skips over nested macro boundaries by incrementing/decrementing depth counters until finding the matching braces at depth

* gief me my comments back (and fixes, that were missed)

- Added detailed JSDoc comments to all exported functions explaining parameters, return types, and behavior
- Added inline comments throughout functions explaining logic flow, edge cases, and implementation details
- Documented parser-based vs regex-based unclosed scope detection approaches
- Clarified variable shorthand autocomplete logic including operator filtering, context display, and priority

* refactor(macros): freeze MACRO_AUTOCOMPLETE_MODE and MACRO_AUTOCOMPLETE_STYLE enums

* feat(macros): explicitly set `makeSelectable` flag for non-insertable autocomplete options

- Set `makeSelectable = true` for variable shorthand options in {{if}} conditions (already insertable)
- Set `makeSelectable = false` for already-typed operators in variable shorthand autocomplete
- Set `makeSelectable = false` for already-typed flags in macro autocomplete
- Set `makeSelectable = false` for non-selectable closing block flags when no unclosed scopes exist
- Set `makeSelectable = false` for sc

* refactor(macros): consolidate typedef imports in MacroAutoCompleteHelper

- Fixed typo in MacroDefinition typedef import (removed extra `/` from JSDoc comment)
- Replaced long-form typedef imports with short-form aliases for MacroAutoCompleteContext and MacroDefinition
- Improved code consistency by using imported typedefs throughout function signatures

* refactor(autocomplete): select first selectable item as default instead of always first item

- Extracted default item selection logic into `selectDefaultItem()` method
- Changed default selection to prioritize first selectable item over first item in list
- Falls back to last item when no selectable items exist (preserves context for info-only options)
- Added JSDoc documentation explaining selection behavior

* feat(macros): make already-typed variable names non-selectable in autocomplete

- Set `makeSelectable = false` for variable name options that match the currently typed name
- Set empty `valueProvider` for matched variables to prevent re-insertion
- Prevents redundant selection of variables that are already fully typed in the input

* feat(macros): add value context autocomplete option for variable shorthand operators

- Created `VariableValueContextAutoCompleteOption` class to display context about expected values
- Shows operator name, symbol, and description when typing variable shorthand values
- Displays currently typed value and completion hint
- Non-selectable option (context only) with priority 4
- Added to variable shorthand autocomplete when operator is typed and value is being entered

* fix lint

---------

Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

public/style.css

@@ -1654,6 +1654,13 @@ button {
             width: 50vw;
         }
 
+        /* Small style variant for macro autocomplete (33vw, max 700px) */
+        &[data-macros-autocomplete-style="small"] .autoComplete {
+            width: 33vw;
+            max-width: 700px;
+            min-width: 250px;
+        }
+
         &:after {
             content: "";
             flex: 1 1 0;
@@ -1706,6 +1713,38 @@ button {
             width: 25vw;
         }
 
+        /* Small style variant for macro autocomplete (33vw, max 700px) */
+        &[data-macros-autocomplete-style="small"] .autoComplete-details {
+            width: 33vw;
+            max-width: 700px;
+            min-width: 250px;
+        }
+
+        &[data-macros-autocomplete-style="small"] {
+            &.left {
+                &:before {
+                    flex: 0 1 calc(var(--targetOffset) * 1px - 33vw);
+                }
+
+                &:after {
+                    flex: 1 0 auto;
+                    max-width: 33vw;
+                }
+            }
+
+            &.right {
+                &:before {
+                    flex: 0 0 calc(var(--targetOffset) * 1px + 33vw);
+                }
+            }
+
+            &.full {
+                .autoComplete-details {
+                    max-width: 33vw;
+                }
+            }
+        }
+
         &.left {
             &:before {
                 flex: 0 1 calc(var(--targetOffset) * 1px - 25vw);