{{!-- token-image-editor.hbs --}}
{{!-- Root element for the ApplicationV2 window body --}}

<div class="tie-layout">

  {{!-- ================================================================== --}}
  {{!-- TOOLBAR                                                             --}}
  {{!-- ================================================================== --}}
  <nav class="tie-toolbar" role="toolbar" aria-label="{{localize "TOKENIZER-2.ToolbarAriaLabel"}}">

    {{!-- Mode toggle: Token / Avatar --}}
    <div class="tie-mode-toggle">
      <button type="button" class="tie-btn tie-btn--ghost {{#unless isAvatarMode}}is-active{{/unless}}"
        data-action="set-editor-mode" data-mode="token" data-tooltip="{{localize "TOKENIZER-2.ModeTokenTooltip"}}">
        <i class="fa-solid fa-id-badge"></i> {{localize "TOKENIZER-2.ModeToken"}}
      </button>
      <button type="button" class="tie-btn tie-btn--ghost {{#if isAvatarMode}}is-active{{/if}}"
        data-action="set-editor-mode" data-mode="avatar" data-tooltip="{{localize "TOKENIZER-2.ModeAvatarTooltip"}}">
        <i class="fa-solid fa-portrait"></i> {{localize "TOKENIZER-2.ModeAvatar"}}
      </button>
      <button type="button" class="tie-btn tie-btn--ghost"
        data-action="copy-to-other-mode"
        data-tooltip="{{#if isAvatarMode}}{{localize "TOKENIZER-2.CopyCompositeToTokenHint"}}{{else}}{{localize "TOKENIZER-2.CopyCompositeToAvatarHint"}}{{/if}}"
        aria-label="{{#if isAvatarMode}}{{localize "TOKENIZER-2.CopyCompositeToToken"}}{{else}}{{localize "TOKENIZER-2.CopyCompositeToAvatar"}}{{/if}}">
        <i class="fa-solid fa-right-left"></i>
      </button>
    </div>

    <div class="tie-toolbar__group tie-toolbar__group--tools">
      <button
        type="button"
        class="tie-tool-btn {{#if (eq activeTool 'move')}}is-active{{/if}}"
        data-tool="move"
        data-tooltip="{{localize "TOKENIZER-2.PaletteTools"}}"
        aria-pressed="{{eq activeTool 'move'}}"
      >
        <i class="fa-solid fa-swatchbook"></i>
      </button>

      <button
        type="button"
        class="tie-tool-btn {{#if (eq activeTool 'transform')}}is-active{{/if}}"
        data-tool="transform"
        data-tooltip="{{localize "TOKENIZER-2.TransformTool"}}"
        aria-pressed="{{eq activeTool 'transform'}}"
      >
        <i class="fa-solid fa-vector-square"></i>
      </button>

      <button
        type="button"
        class="tie-tool-btn {{#if (eq activeTool 'lasso')}}is-active{{/if}}"
        data-tool="lasso"
        {{#if toolsDisabledOnVideo.lasso}}disabled{{/if}}
        data-tooltip="{{#if toolsDisabledOnVideo.lasso}}{{localize "TOKENIZER-2.ToolDisabledOnVideo"}}{{else}}{{localize "TOKENIZER-2.ToolLassoTooltip"}}{{/if}}"
        aria-pressed="{{eq activeTool 'lasso'}}"
      >
        <i class="fa-solid fa-lasso"></i>
      </button>

      <button
        type="button"
        class="tie-tool-btn {{#if (eq activeTool 'freehand')}}is-active{{/if}}"
        data-tool="freehand"
        {{#if toolsDisabledOnVideo.freehand}}disabled{{/if}}
        data-tooltip="{{#if toolsDisabledOnVideo.freehand}}{{localize "TOKENIZER-2.ToolDisabledOnVideo"}}{{else}}{{localize "TOKENIZER-2.ToolFreehandTooltip"}}{{/if}}"
        aria-pressed="{{eq activeTool 'freehand'}}"
      >
        <i class="fa-solid fa-draw-polygon"></i>
      </button>

      <button
        type="button"
        class="tie-tool-btn {{#if (eq activeTool 'liquify')}}is-active{{/if}}"
        data-tool="liquify"
        {{#if toolsDisabledOnVideo.liquify}}disabled{{/if}}
        data-tooltip="{{#if toolsDisabledOnVideo.liquify}}{{localize "TOKENIZER-2.ToolDisabledOnVideo"}}{{else}}{{localize "TOKENIZER-2.ToolLiquifyTooltip"}}{{/if}}"
        aria-pressed="{{eq activeTool 'liquify'}}"
      >
        <i class="fa-solid fa-droplet"></i>
      </button>

      <button
        type="button"
        class="tie-tool-btn {{#if (eq activeTool 'erase')}}is-active{{/if}}"
        data-tool="erase"
        {{#if toolsDisabledOnVideo.erase}}disabled{{/if}}
        data-tooltip="{{#if toolsDisabledOnVideo.erase}}{{localize "TOKENIZER-2.ToolDisabledOnVideo"}}{{else}}Erase / Restore{{/if}}"
        aria-pressed="{{eq activeTool 'erase'}}"
      >
        <i class="fa-solid fa-eraser"></i>
      </button>

      <button
        type="button"
        class="tie-tool-btn {{#if (eq activeTool 'clone-heal')}}is-active{{/if}}"
        data-tool="clone-heal"
        {{#if toolsDisabledOnVideo.cloneHeal}}disabled{{/if}}
        data-tooltip="{{#if toolsDisabledOnVideo.cloneHeal}}{{localize "TOKENIZER-2.ToolDisabledOnVideo"}}{{else}}Clone / Heal Brush{{/if}}"
        aria-pressed="{{eq activeTool 'clone-heal'}}"
      >
        <i class="fa-solid fa-stamp"></i>
      </button>

      <button
        type="button"
        class="tie-tool-btn {{#if (eq activeTool 'layer-effects')}}is-active{{/if}}"
        data-tool="layer-effects"
        {{#if toolsDisabledOnVideo.layerEffects}}disabled{{/if}}
        data-tooltip="{{#if toolsDisabledOnVideo.layerEffects}}{{localize "TOKENIZER-2.ToolDisabledOnVideo"}}{{else}}{{localize "TOKENIZER-2.ToolLayerEffectsTooltip"}}{{/if}}"
        aria-pressed="{{eq activeTool 'layer-effects'}}"
      >
        <i class="fa-solid fa-wand-magic-sparkles"></i>
      </button>

    </div>

    {{#if pluginTools.length}}
    <div class="tie-toolbar__group tie-toolbar__group--plugins">
      {{#each pluginTools}}
      <button
        type="button"
        class="tie-tool-btn {{#if this.isActive}}is-active{{/if}}"
        data-tool="{{this.id}}"
        {{#if this.disabled}}disabled{{/if}}
        data-tooltip="{{#if this.disabled}}{{localize "TOKENIZER-2.ToolDisabledOnVideo"}}{{else}}{{this.tooltip}}{{/if}}"
        aria-pressed="{{this.isActive}}"
      >
        <i class="{{this.icon}}"></i>
      </button>
      {{/each}}
    </div>
    {{/if}}

    <div class="tie-toolbar__group tie-toolbar__group--zoom-controls">
      <button type="button" class="tie-icon-btn" data-action="zoom-out" data-tooltip="{{localize "TOKENIZER-2.ZoomOut"}}">
        <i class="fa-solid fa-minus"></i>
      </button>
      <span class="tie-zoom-level" aria-live="polite">{{zoomPercent}}%</span>
      <button type="button" class="tie-icon-btn" data-action="zoom-in" data-tooltip="{{localize "TOKENIZER-2.ZoomIn"}}">
        <i class="fa-solid fa-plus"></i>
      </button>
      <button type="button" class="tie-icon-btn" data-action="zoom-reset" data-tooltip="{{localize "TOKENIZER-2.ZoomReset"}}">
        <i class="fa-solid fa-expand"></i>
      </button>
    </div>

    <div class="tie-toolbar__group tie-toolbar__group--actions">
      <button type="button" class="tie-icon-btn" data-action="undo"
        data-tooltip="{{localize "TOKENIZER-2.Undo"}}" {{#unless canUndo}}disabled{{/unless}}>
        <i class="fa-solid fa-rotate-left"></i>
      </button>
      <button type="button" class="tie-icon-btn" data-action="redo"
        data-tooltip="{{localize "TOKENIZER-2.Redo"}}" {{#unless canRedo}}disabled{{/unless}}>
        <i class="fa-solid fa-rotate-right"></i>
      </button>
    </div>

    <div class="tie-toolbar__group tie-toolbar__group--preview">
      <button type="button"
        class="tie-icon-btn {{#if isPreviewPlaying}}tie-icon-btn--active{{/if}}"
        data-action="toggle-preview"
        {{#unless hasAnimation}}disabled{{/unless}}
        data-tooltip="{{#if hasAnimation}}{{#if isPreviewPlaying}}{{localize "TOKENIZER-2.Animation.Pause"}}{{else}}{{localize "TOKENIZER-2.Animation.Play"}}{{/if}}{{else}}{{localize "TOKENIZER-2.Animation.NoneAvailable"}}{{/if}}">
        <i class="fa-solid {{#if isPreviewPlaying}}fa-pause{{else}}fa-play{{/if}}"></i>
      </button>
    </div>

    <div class="tie-toolbar__group tie-toolbar__group--save">

      {{#if isWildcard}}
        <span class="tie-wildcard-badge" data-tooltip="{{localize "TOKENIZER-2.WildcardTooltip"}}">
          <i class="fa-solid fa-shuffle"></i> {{localize "TOKENIZER-2.WildcardBadge"}}
        </span>
      {{/if}}

      {{!-- Quick Token (hidden in avatar mode) --}}
      {{#unless isAvatarMode}}
      <details class="tie-quick-token">
        <summary class="tie-btn tie-btn--ghost" data-tooltip="{{localize "TOKENIZER-2.QuickToken"}}">
          <i class="fa-solid fa-wand-sparkles"></i> {{localize "TOKENIZER-2.QuickToken"}}
          <i class="fa-solid fa-chevron-down tie-quick-token__caret"></i>
        </summary>
        <div class="tie-quick-token__menu">
          <button type="button" class="tie-dropdown-item" data-action="reset-token-from-actor">
            <i class="fa-solid fa-rotate-left"></i> {{localize "TOKENIZER-2.BuildTokenFromActor"}}
          </button>
          <button type="button" class="tie-dropdown-item" data-action="reset-token-from-image">
            <i class="fa-solid fa-rotate-left"></i> {{localize "TOKENIZER-2.BuildTokenFromImage"}}
          </button>
          <button type="button" class="tie-dropdown-item" data-action="shadowdark-lineart">
            <i class="fa-solid fa-pen-nib"></i> {{localize "TOKENIZER-2.ShadowDarkLineArt"}}
          </button>
        </div>
      </details>
      {{/unless}}

      <button type="button" class="tie-btn tie-btn--ghost" data-action="download" data-tooltip="Download">
        <i class="fa-solid fa-download"></i>
      </button>

      {{!-- Save (opens modal SaveDialog) --}}
      <button type="button" class="tie-btn tie-btn--primary" data-action="open-save-dialog">
        <i class="fa-solid fa-floppy-disk"></i> Save...
      </button>

      <button type="button" class="tie-btn tie-btn--ghost" data-action="cancel">
        {{localize "TOKENIZER-2.Cancel"}}
      </button>
      <button type="button" class="tie-icon-btn" data-action="open-settings" data-tooltip="{{localize "TOKENIZER-2.Settings.MenuName"}}">
        <i class="fa-solid fa-cogs"></i>
      </button>
      <button type="button" class="tie-icon-btn" data-action="clear-tokenizer-data" data-tooltip="{{localize "TOKENIZER-2.ClearTokenizerData"}}">
        <i class="fa-solid fa-trash-can"></i>
      </button>
      <button type="button" class="tie-icon-btn" data-action="start-tour" data-tooltip="{{localize "TOKENIZER-2.Tour.StartTourTooltip"}}">
        <i class="fa-solid fa-circle-question"></i>
      </button>
    </div>

  </nav>

  {{!-- ================================================================== --}}
  {{!-- MAIN BODY: three-column layout                                      --}}
  {{!-- ================================================================== --}}
  <div class="tie-body">

    {{!-- ---------------------------------------------------------------- --}}
    {{!-- LEFT PANEL: Adjustments                                          --}}
    {{!-- ---------------------------------------------------------------- --}}
    <aside class="tie-panel tie-panel--left" aria-label="{{localize "TOKENIZER-2.AdjustmentsAriaLabel"}}">

      {{!-- Plugin tool panel - populated via DOM by the active plugin tool --}}
      <div id="tie-plugin-panel" class="tie-plugin-panel"></div>

      {{!-- Paint Mask: visible when mask-paint tool is active (outside activeLayer guard) --}}
      {{#if (eq activeTool 'mask-paint')}}
        <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.ToolMaskPaint"}}</h3>
        <div class="tie-control">
          <label class="tie-control__label">
            {{localize "TOKENIZER-2.MaskPaintBrushSize"}}
            <span class="tie-control__value tie-paint-brush-size-value">20</span>
          </label>
          <p class="tie-hint">{{localize "TOKENIZER-2.MaskPaintHint"}}</p>
        </div>
      {{/if}}

      {{!-- Liquify: visible when liquify tool is active (outside activeLayer guard) --}}
      {{#if (eq activeTool 'liquify')}}
        <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.ToolLiquify"}}</h3>
        <div class="tie-control">
          <label class="tie-control__label">
            {{localize "TOKENIZER-2.LiquifyBrushSize"}}
            <span class="tie-control__value tie-liquify-brush-size-value">40</span>
          </label>
          <input type="range" id="liquify-brush-size" class="tie-slider"
            min="4" max="200" step="2" value="40" />
          <p class="tie-hint">{{localize "TOKENIZER-2.LiquifyBrushSizeHint"}}</p>
        </div>
        <div class="tie-control">
          <label class="tie-control__label">
            {{localize "TOKENIZER-2.LiquifyStrength"}}
            <span class="tie-control__value tie-liquify-strength-value">30</span>%
          </label>
          <input type="range" id="liquify-strength" class="tie-slider"
            min="1" max="100" step="1" value="30" />
        </div>
        <div class="tie-control">
          <label class="tie-control__label">{{localize "TOKENIZER-2.LiquifyMode"}}</label>
          <div class="tie-btn-group">
            <button type="button" class="tie-icon-btn {{#if (eq activeLiquifyMode 'warp')}}is-active{{/if}}" data-liquify-mode="warp"
              data-tooltip="{{localize "TOKENIZER-2.LiquifyModeWarp"}}">
              <i class="fa-solid fa-arrows-up-down-left-right"></i>
            </button>
            <button type="button" class="tie-icon-btn {{#if (eq activeLiquifyMode 'blend')}}is-active{{/if}}" data-liquify-mode="blend"
              data-tooltip="{{localize "TOKENIZER-2.LiquifyModeBlend"}}">
              <i class="fa-solid fa-paintbrush"></i>
            </button>
          </div>
        </div>
        <p class="tie-hint">{{localize "TOKENIZER-2.LiquifyHint"}}</p>
      {{/if}}

      {{!-- Erase / Restore: visible when erase tool is active --}}
      {{#if (eq activeTool 'erase')}}
        <h3 class="tie-panel__heading">Erase / Restore</h3>
        <div class="tie-control">
          <label class="tie-control__label">
            Brush Size
            <span class="tie-control__value tie-erase-brush-size-value">{{eraseSize}}</span>
          </label>
          <input type="range" id="erase-brush-size" class="tie-slider"
            min="4" max="200" step="2" value="{{eraseSize}}" />
          <p class="tie-hint">Shift+scroll to resize</p>
        </div>
        <div class="tie-control">
          <label class="tie-control__label">
            Softness
            <span class="tie-control__value tie-erase-softness-value">{{eraseSoftness}}</span>
          </label>
          <input type="range" id="erase-softness" class="tie-slider"
            min="0" max="1" step="0.05" value="{{eraseSoftness}}" />
        </div>
        <div class="tie-control">
          <label class="tie-control__label">
            Flow
            <span class="tie-control__value tie-erase-flow-value">{{eraseFlow}}</span>
          </label>
          <input type="range" id="erase-flow" class="tie-slider"
            min="0.05" max="1" step="0.05" value="{{eraseFlow}}" />
        </div>
        <p class="tie-hint">Left-click to erase · Right-click or Shift to restore</p>
      {{/if}}

      {{!-- Clone / Heal: visible when clone-heal tool is active --}}
      {{#if (eq activeTool 'clone-heal')}}
        <h3 class="tie-panel__heading">Clone / Heal</h3>
        <div class="tie-control">
          <label class="tie-control__label">
            Brush Size
            <span class="tie-control__value tie-clone-brush-size-value">{{cloneBrushSize}}</span>
          </label>
          <input type="range" id="clone-brush-size" class="tie-slider"
            min="4" max="200" step="2" value="{{cloneBrushSize}}" />
          <p class="tie-hint">Shift+scroll to resize</p>
        </div>
        <div class="tie-control">
          <label class="tie-control__label">
            Opacity
            <span class="tie-control__value tie-clone-opacity-value">{{cloneOpacity}}</span>%
          </label>
          <input type="range" id="clone-opacity" class="tie-slider"
            min="1" max="100" step="1" value="{{cloneOpacity}}" />
        </div>
        <div class="tie-control">
          <label class="tie-control__label">Mode</label>
          <div class="tie-btn-group">
            <button type="button"
              class="tie-icon-btn {{#if (eq cloneMode 'clone')}}is-active{{/if}}"
              data-clone-mode="clone"
              data-tooltip="Clone - copy pixels verbatim">
              <i class="fa-solid fa-stamp"></i>
            </button>
            <button type="button"
              class="tie-icon-btn {{#if (eq cloneMode 'heal')}}is-active{{/if}}"
              data-clone-mode="heal"
              data-tooltip="Heal - blend into destination">
              <i class="fa-solid fa-bandage"></i>
            </button>
          </div>
        </div>
        <p class="tie-hint">Alt+click sets clone source · Left-drag to paint · Escape to discard</p>
      {{/if}}

      {{!-- Palette Tools shortcuts: visible when the move tool is active --}}
      {{#if (eq activeTool 'move')}}
        <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.ShortcutsHeading"}}</h3>
        <ul class="tie-shortcut-list">
          <li><kbd>{{localize "TOKENIZER-2.ShortcutDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutDragDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutShiftDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutShiftDragDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutSpaceDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutSpaceDragDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutScroll"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutScrollDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutShiftScroll"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutShiftScrollDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutAltScroll"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutAltScrollDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutCtrlZ"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutCtrlZDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutCtrlShiftZ"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutCtrlShiftZDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutPaste"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutPasteDesc"}}</span></li>
        </ul>
      {{/if}}

      {{!-- Transform tool shortcuts --}}
      {{#if (eq activeTool 'transform')}}
        <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.ShortcutsHeading"}}</h3>
        <ul class="tie-shortcut-list">
          <li><kbd>{{localize "TOKENIZER-2.ShortcutDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutDragDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutShiftDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutShiftDragDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutScroll"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutScrollDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutShiftScroll"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutShiftScrollDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutAltScroll"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutAltScrollDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutHandleDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutHandleDragDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutRotateHandle"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutRotateHandleDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutShiftHandleDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutShiftHandleDragDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutCtrlZ"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutCtrlZDesc"}}</span></li>
          <li><kbd>{{localize "TOKENIZER-2.ShortcutCtrlShiftZ"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutCtrlShiftZDesc"}}</span></li>
        </ul>
      {{/if}}

      {{#if activeLayer}}

        {{!-- Palette adjustments: visible when the Palette Tools button is active --}}
        {{#if showAdjustments}}

          <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.AdjustmentsHeading"}}</h3>

          {{!-- Brightness --}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-brightness">
              {{localize "TOKENIZER-2.Brightness"}}
              <span class="tie-control__value">{{activeLayer.adjustments.brightnessDisplay}}%</span>
            </label>
            <input
              type="range"
              id="adj-brightness"
              class="tie-slider"
              name="brightness"
              min="0" max="200" step="1"
              value="{{activeLayer.adjustments.brightnessDisplay}}"
              data-action="adjust"
              data-property="brightness"
            />
          </div>

          {{!-- Contrast --}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-contrast">
              {{localize "TOKENIZER-2.Contrast"}}
              <span class="tie-control__value">{{activeLayer.adjustments.contrastDisplay}}%</span>
            </label>
            <input
              type="range"
              id="adj-contrast"
              class="tie-slider"
              name="contrast"
              min="0" max="200" step="1"
              value="{{activeLayer.adjustments.contrastDisplay}}"
              data-action="adjust"
              data-property="contrast"
            />
          </div>

          {{!-- Opacity --}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-opacity">
              {{localize "TOKENIZER-2.Opacity"}}
              <span class="tie-control__value">{{activeLayer.adjustments.opacityDisplay}}%</span>
            </label>
            <input
              type="range"
              id="adj-opacity"
              class="tie-slider"
              name="opacity"
              min="0" max="100" step="1"
              value="{{activeLayer.adjustments.opacityDisplay}}"
              data-action="adjust"
              data-property="opacity"
            />
          </div>

          {{!-- Gaussian Blur --}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-blur">
              {{localize "TOKENIZER-2.GaussianBlur"}}
              <span class="tie-control__value">{{activeLayer.adjustments.blurDisplay}}px</span>
            </label>
            <input type="range" id="adj-blur" class="tie-slider"
              name="blur" min="0" max="20" step="0.5"
              value="{{activeLayer.adjustments.blurDisplay}}"
              data-action="adjust" data-property="blur" />
          </div>

          {{!-- Blend Mode --}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-blend-mode">
              {{localize "TOKENIZER-2.BlendMode"}}
            </label>
            <select
              id="adj-blend-mode"
              class="tie-select"
              name="blend-mode"
              data-action="adjust"
              data-property="blendMode"
            >
              <option value="source-over" {{#if (eq activeLayer.blendMode "source-over")}}selected{{/if}}>
                {{localize "TOKENIZER-2.BlendModeNormal"}}
              </option>
              <option value="multiply" {{#if (eq activeLayer.blendMode "multiply")}}selected{{/if}}>
                {{localize "TOKENIZER-2.BlendModeMultiply"}}
              </option>
              <option value="screen" {{#if (eq activeLayer.blendMode "screen")}}selected{{/if}}>
                {{localize "TOKENIZER-2.BlendModeScreen"}}
              </option>
              <option value="overlay" {{#if (eq activeLayer.blendMode "overlay")}}selected{{/if}}>
                {{localize "TOKENIZER-2.BlendModeOverlay"}}
              </option>
              <option value="soft-light" {{#if (eq activeLayer.blendMode "soft-light")}}selected{{/if}}>
                {{localize "TOKENIZER-2.BlendModeSoftLight"}}
              </option>
            </select>
          </div>

          {{!-- Animation preset --}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-animation-preset">
              {{localize "TOKENIZER-2.Animation.LayerPreset"}}
            </label>
            <select
              id="adj-animation-preset"
              class="tie-select"
              name="animation-preset"
              data-action="adjust"
              data-property="animationPreset"
              {{#if animationLocked}}disabled{{/if}}
              data-tooltip="{{#if animationLocked}}{{localize "TOKENIZER-2.DynamicRing.AnimationLockedTooltip"}}{{/if}}"
            >
              <option value="" {{#unless activeLayer.animation.preset}}selected{{/unless}}>
                {{localize "TOKENIZER-2.Animation.None"}}
              </option>
              {{#each animationPresets}}
                <option value="{{id}}" {{#if isActive}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>

          {{#if activeLayer.animation.preset}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-animation-duration">
              {{localize "TOKENIZER-2.Animation.Duration"}}
              <span class="tie-control__value">{{activeLayer.animation.duration}}s</span>
            </label>
            <input
              type="range"
              id="adj-animation-duration"
              class="tie-slider"
              min="0.25" max="10" step="0.25"
              value="{{activeLayer.animation.duration}}"
              data-action="adjust"
              data-property="animationDuration"
            />
          </div>
          <div class="tie-control">
            <label class="tie-control__label" for="adj-animation-amplitude">
              {{localize "TOKENIZER-2.Animation.Amplitude"}}
              <span class="tie-control__value">{{activeLayer.animation.amplitudeDisplay}}%</span>
            </label>
            <input
              type="range"
              id="adj-animation-amplitude"
              class="tie-slider"
              min="0" max="200" step="1"
              value="{{activeLayer.animation.amplitudeDisplay}}"
              data-action="adjust"
              data-property="animationAmplitude"
            />
          </div>
          {{#if activeLayer.animation.isRotate}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-animation-direction">
              {{localize "TOKENIZER-2.Animation.Direction"}}
            </label>
            <select
              id="adj-animation-direction"
              class="tie-select"
              name="animation-direction"
              data-action="adjust"
              data-property="animationDirection"
            >
              <option value="cw" {{#unless (eq activeLayer.animation.direction "ccw")}}selected{{/unless}}>
                {{localize "TOKENIZER-2.Animation.Clockwise"}}
              </option>
              <option value="ccw" {{#if (eq activeLayer.animation.direction "ccw")}}selected{{/if}}>
                {{localize "TOKENIZER-2.Animation.AntiClockwise"}}
              </option>
            </select>
          </div>
          {{/if}}
          {{/if}}

          {{!-- Tint --}}
          <div class="tie-control tie-control--tint">
            <label class="tie-control__label">{{localize "TOKENIZER-2.Tint"}}</label>
            <div class="tie-tint-row">
              <input
                type="color"
                id="adj-tint-color"
                class="tie-color-picker"
                value="{{activeLayer.adjustments.tintHex}}"
                data-action="adjust"
                data-property="tintColor"
              />
              <input
                type="range"
                id="adj-tint-strength"
                class="tie-slider tie-slider--inline"
                min="0" max="100" step="1"
                value="{{activeLayer.adjustments.tintStrength}}"
                data-action="adjust"
                data-property="tintStrength"
              />
              <span class="tie-control__value">{{activeLayer.adjustments.tintStrength}}%</span>
            </div>
            {{#if activeLayer.adjustments.tintActive}}
              <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="clear-tint">
                {{localize "TOKENIZER-2.ClearTint"}}
              </button>
            {{/if}}
          </div>

          {{!-- Color Grading --}}
          <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.ColorGradingHeading"}}</h3>

          <div class="tie-control">
            <label class="tie-control__label" for="adj-hue">
              {{localize "TOKENIZER-2.Hue"}}
              <span class="tie-control__value">{{activeLayer.adjustments.hueDisplay}}°</span>
            </label>
            <input
              type="range"
              id="adj-hue"
              class="tie-slider"
              min="-180" max="180" step="1"
              value="{{activeLayer.adjustments.hueDisplay}}"
              data-action="adjust"
              data-property="hue"
            />
          </div>

          <div class="tie-control">
            <label class="tie-control__label" for="adj-saturation">
              {{localize "TOKENIZER-2.Saturation"}}
              <span class="tie-control__value">{{activeLayer.adjustments.saturationDisplay}}%</span>
            </label>
            <input
              type="range"
              id="adj-saturation"
              class="tie-slider"
              min="0" max="200" step="1"
              value="{{activeLayer.adjustments.saturationDisplay}}"
              data-action="adjust"
              data-property="saturation"
            />
          </div>

          <div class="tie-control">
            <label class="tie-control__label" for="adj-grayscale">
              {{localize "TOKENIZER-2.Greyscale"}}
              <span class="tie-control__value">{{activeLayer.adjustments.grayscaleDisplay}}%</span>
            </label>
            <input
              type="range"
              id="adj-grayscale"
              class="tie-slider"
              min="0" max="100" step="1"
              value="{{activeLayer.adjustments.grayscaleDisplay}}"
              data-action="adjust"
              data-property="grayscale"
            />
          </div>

          <div class="tie-control">
            <label class="tie-control__label" for="adj-temperature">
              {{localize "TOKENIZER-2.Temperature"}}
              <span class="tie-control__value">{{activeLayer.adjustments.temperatureDisplay}}°</span>
            </label>
            <input
              type="range"
              id="adj-temperature"
              class="tie-slider"
              min="-100" max="100" step="1"
              value="{{activeLayer.adjustments.temperatureDisplay}}"
              data-action="adjust"
              data-property="temperature"
            />
            <div class="tie-temperature-labels">
              <span>{{localize "TOKENIZER-2.TemperatureCool"}}</span>
              <span>{{localize "TOKENIZER-2.TemperatureWarm"}}</span>
            </div>
          </div>

          <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="reset-color-grading">
            {{localize "TOKENIZER-2.ResetColorGrading"}}
          </button>

        {{/if}}{{!-- /showAdjustments --}}

        {{!-- Layer Effects controls: visible when the Layer Effects tool button is active --}}
        {{#if showLayerEffects}}

          <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.LayerEffectsHeading"}}</h3>

          {{!-- Line Art --}}
          <div class="tie-fx-section">
            <label class="tie-fx-header" for="adj-lineart-enabled">
              <span>{{localize "TOKENIZER-2.LineArtHeading"}}</span>
              <input type="checkbox" id="adj-lineart-enabled"
                data-action="adjust" data-property="lineArtEnabled"
                {{#if activeLayer.adjustments.lineArtEnabled}}checked{{/if}} />
            </label>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-lineart-blur">
                {{localize "TOKENIZER-2.LineArtBlur"}}
                <span class="tie-control__value">{{activeLayer.adjustments.lineArtBlurSize}}px</span>
              </label>
              <input type="range" id="adj-lineart-blur" class="tie-slider"
                min="1" max="50" step="1"
                value="{{activeLayer.adjustments.lineArtBlurSize}}"
                data-action="adjust" data-property="lineArtBlurSize" />
            </div>
          </div>

          {{!-- Rim Light --}}
          <div class="tie-fx-section">
            <label class="tie-fx-header" for="adj-rimlight-enabled">
              <span>{{localize "TOKENIZER-2.RimLightHeading"}}</span>
              <input type="checkbox" id="adj-rimlight-enabled"
                data-action="adjust" data-property="rimLightEnabled"
                {{#if activeLayer.adjustments.rimLightEnabled}}checked{{/if}} />
            </label>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-rimlight-color">
                {{localize "TOKENIZER-2.RimLightColor"}}
              </label>
              <input type="color" id="adj-rimlight-color" class="tie-color-input"
                value="{{activeLayer.adjustments.rimLightColor}}"
                data-action="adjust" data-property="rimLightColor" />
            </div>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-rimlight-size">
                {{localize "TOKENIZER-2.RimLightSize"}}
                <span class="tie-control__value">{{activeLayer.adjustments.rimLightSize}}px</span>
              </label>
              <input type="range" id="adj-rimlight-size" class="tie-slider"
                min="1" max="20" step="1"
                value="{{activeLayer.adjustments.rimLightSize}}"
                data-action="adjust" data-property="rimLightSize" />
            </div>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-rimlight-intensity">
                {{localize "TOKENIZER-2.RimLightIntensity"}}
                <span class="tie-control__value">{{activeLayer.adjustments.rimLightIntensity}}%</span>
              </label>
              <input type="range" id="adj-rimlight-intensity" class="tie-slider"
                min="0" max="100" step="1"
                value="{{activeLayer.adjustments.rimLightIntensity}}"
                data-action="adjust" data-property="rimLightIntensity" />
            </div>
          </div>

          {{!-- Vignette --}}
          <div class="tie-fx-section">
            <label class="tie-fx-header" for="adj-vignette-enabled">
              <span>{{localize "TOKENIZER-2.VignetteHeading"}}</span>
              <input type="checkbox" id="adj-vignette-enabled"
                data-action="adjust" data-property="vignetteEnabled"
                {{#if activeLayer.adjustments.vignetteEnabled}}checked{{/if}} />
            </label>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-vignette-intensity">
                {{localize "TOKENIZER-2.VignetteIntensity"}}
                <span class="tie-control__value">{{activeLayer.adjustments.vignetteIntensity}}%</span>
              </label>
              <input type="range" id="adj-vignette-intensity" class="tie-slider"
                min="0" max="100" step="1"
                value="{{activeLayer.adjustments.vignetteIntensity}}"
                data-action="adjust" data-property="vignetteIntensity" />
            </div>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-vignette-size">
                {{localize "TOKENIZER-2.VignetteSize"}}
                <span class="tie-control__value">{{activeLayer.adjustments.vignetteSize}}%</span>
              </label>
              <input type="range" id="adj-vignette-size" class="tie-slider"
                min="0" max="100" step="1"
                value="{{activeLayer.adjustments.vignetteSize}}"
                data-action="adjust" data-property="vignetteSize" />
            </div>
          </div>

          {{!-- Film Grain --}}
          <div class="tie-fx-section">
            <label class="tie-fx-header" for="adj-grain-enabled">
              <span>{{localize "TOKENIZER-2.FilmGrainHeading"}}</span>
              <input type="checkbox" id="adj-grain-enabled"
                data-action="adjust" data-property="filmGrainEnabled"
                {{#if activeLayer.adjustments.filmGrainEnabled}}checked{{/if}} />
            </label>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-grain-intensity">
                {{localize "TOKENIZER-2.FilmGrainIntensity"}}
                <span class="tie-control__value">{{activeLayer.adjustments.filmGrainIntensity}}%</span>
              </label>
              <input type="range" id="adj-grain-intensity" class="tie-slider"
                min="0" max="100" step="1"
                value="{{activeLayer.adjustments.filmGrainIntensity}}"
                data-action="adjust" data-property="filmGrainIntensity" />
            </div>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-grain-size">
                {{localize "TOKENIZER-2.FilmGrainSize"}}
                <span class="tie-control__value">{{activeLayer.adjustments.filmGrainSize}}x</span>
              </label>
              <input type="range" id="adj-grain-size" class="tie-slider"
                min="1" max="4" step="0.5"
                value="{{activeLayer.adjustments.filmGrainSize}}"
                data-action="adjust" data-property="filmGrainSize" />
            </div>
          </div>

          {{!-- Chromatic Aberration --}}
          <div class="tie-fx-section">
            <label class="tie-fx-header" for="adj-chroma-enabled">
              <span>{{localize "TOKENIZER-2.ChromaticAberrationHeading"}}</span>
              <input type="checkbox" id="adj-chroma-enabled"
                data-action="adjust" data-property="chromaticAberrationEnabled"
                {{#if activeLayer.adjustments.chromaticAberrationEnabled}}checked{{/if}} />
            </label>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-chroma-intensity">
                {{localize "TOKENIZER-2.ChromaticAberrationIntensity"}}
                <span class="tie-control__value">{{activeLayer.adjustments.chromaticAberrationIntensity}}px</span>
              </label>
              <input type="range" id="adj-chroma-intensity" class="tie-slider"
                min="0" max="20" step="1"
                value="{{activeLayer.adjustments.chromaticAberrationIntensity}}"
                data-action="adjust" data-property="chromaticAberrationIntensity" />
            </div>
          </div>

          {{!-- Unsharp Mask --}}
          <div class="tie-fx-section">
            <label class="tie-fx-header" for="adj-usm-enabled">
              <span>{{localize "TOKENIZER-2.UnsharpMaskHeading"}}</span>
              <input type="checkbox" id="adj-usm-enabled"
                data-action="adjust" data-property="unsharpMaskEnabled"
                {{#if activeLayer.adjustments.unsharpMaskEnabled}}checked{{/if}} />
            </label>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-usm-amount">
                {{localize "TOKENIZER-2.UnsharpMaskAmount"}}
                <span class="tie-control__value">{{activeLayer.adjustments.unsharpMaskAmount}}%</span>
              </label>
              <input type="range" id="adj-usm-amount" class="tie-slider"
                min="0" max="200" step="1"
                value="{{activeLayer.adjustments.unsharpMaskAmount}}"
                data-action="adjust" data-property="unsharpMaskAmount" />
            </div>
            <div class="tie-control">
              <label class="tie-control__label" for="adj-usm-radius">
                {{localize "TOKENIZER-2.UnsharpMaskRadius"}}
                <span class="tie-control__value">{{activeLayer.adjustments.unsharpMaskRadius}}px</span>
              </label>
              <input type="range" id="adj-usm-radius" class="tie-slider"
                min="0.5" max="20" step="0.5"
                value="{{activeLayer.adjustments.unsharpMaskRadius}}"
                data-action="adjust" data-property="unsharpMaskRadius" />
            </div>
          </div>

        {{/if}}{{!-- /showLayerEffects --}}

        {{!-- Transform controls: visible when the Transform tool button is active --}}
        {{#if showTransform}}

          <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.TransformHeading"}}</h3>

          {{!-- Rotation --}}
          <div class="tie-control">
            <label class="tie-control__label" for="adj-rotation">
              {{localize "TOKENIZER-2.Rotation"}}
              <span class="tie-control__value">{{activeLayer.rotationDeg}}°</span>
            </label>
            <input
              type="range"
              id="adj-rotation"
              class="tie-slider"
              name="rotation"
              min="-180" max="180" step="1"
              value="{{activeLayer.rotationDeg}}"
              data-action="adjust"
              data-property="rotation"
            />
          </div>

          {{!-- Alignment --}}
          <div class="tie-control">
            <label class="tie-control__label">{{localize "TOKENIZER-2.Alignment"}}</label>
            <div class="tie-btn-group">
              <button type="button" class="tie-icon-btn" data-action="align-center-h"
                data-tooltip="{{localize "TOKENIZER-2.AlignCenterH"}}"
                {{#if activeLayer.locked}}disabled{{/if}}>
                <i class="fa-solid fa-arrows-left-right"></i>
              </button>
              <button type="button" class="tie-icon-btn" data-action="align-center-v"
                data-tooltip="{{localize "TOKENIZER-2.AlignCenterV"}}"
                {{#if activeLayer.locked}}disabled{{/if}}>
                <i class="fa-solid fa-arrows-up-down"></i>
              </button>
            </div>
          </div>

          {{!-- Fit to Canvas --}}
          <div class="tie-control">
            <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="fit-to-canvas"
              data-tooltip="{{localize "TOKENIZER-2.FitToCanvas"}}"
              {{#if activeLayer.locked}}disabled{{/if}}>
              <i class="fa-solid fa-up-right-and-down-left-from-center"></i> {{localize "TOKENIZER-2.FitToCanvas"}}
            </button>
          </div>

          {{!-- Scale --}}
          <div class="tie-control">
            <label class="tie-control__label">{{localize "TOKENIZER-2.Scale"}}</label>
            <div class="tie-btn-group">
              <button type="button"
                class="tie-icon-btn"
                data-aspect-lock
                data-tooltip="{{localize "TOKENIZER-2.LockAspectRatio"}}">
                <i class="fa-solid fa-lock-open"></i>
              </button>
              <button type="button" class="tie-icon-btn" data-action="reset-aspect-ratio"
                data-tooltip="{{localize "TOKENIZER-2.ResetAspectRatio"}}"
                {{#if activeLayer.locked}}disabled{{/if}}>
                <i class="fa-solid fa-expand"></i>
              </button>
            </div>
          </div>

          <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="reset-layer">
            <i class="fa-solid fa-arrow-rotate-left"></i> {{localize "TOKENIZER-2.ResetLayer"}}
          </button>

          {{!-- Canvas Size (avatar mode only) --}}
          {{#if isAvatarMode}}
          <hr>
          <div class="tie-control">
            <label class="tie-control__label">{{localize "TOKENIZER-2.CanvasSizeHeading"}}</label>
            <div class="tie-avatar-aspect">
              <button type="button" class="{{#if (eq avatarAspect 'square')}}is-active{{/if}}"
                data-action="set-avatar-aspect" data-aspect="square">
                {{localize "TOKENIZER-2.AvatarAspectSquare"}}
              </button>
              <button type="button" class="{{#if (eq avatarAspect 'portrait')}}is-active{{/if}}"
                data-action="set-avatar-aspect" data-aspect="portrait">
                {{localize "TOKENIZER-2.AvatarAspectPortrait"}}
              </button>
              <button type="button" class="{{#if (eq avatarAspect 'custom')}}is-active{{/if}}"
                data-action="set-avatar-aspect" data-aspect="custom">
                {{localize "TOKENIZER-2.AvatarAspectCustom"}}
              </button>
            </div>
          </div>
          <div class="tie-control">
            <div class="tie-canvas-size">
              <div class="tie-canvas-size__field">
                <label for="canvas-width">{{localize "TOKENIZER-2.CanvasWidth"}}</label>
                <input type="number" id="canvas-width" class="tie-input--sm"
                  min="64" max="2048" step="1"
                  value="{{canvasWidth}}"
                  data-action="set-canvas-size" data-property="width" />
              </div>
              <span class="tie-canvas-size__sep">&times;</span>
              <div class="tie-canvas-size__field">
                <label for="canvas-height">{{localize "TOKENIZER-2.CanvasHeight"}}</label>
                <input type="number" id="canvas-height" class="tie-input--sm"
                  min="64" max="2048" step="1"
                  value="{{canvasHeight}}"
                  data-action="set-canvas-size" data-property="height" />
              </div>
            </div>
          </div>
          {{/if}}

        {{/if}}{{!-- /showTransform --}}

        {{!-- Selection tools: visible when lasso or freehand tool is active --}}
        {{#if showSelection}}

          <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.SelectionHeading"}}</h3>

          {{#if (eq activeTool 'lasso')}}
            <ul class="tie-shortcut-list">
              <li><kbd>{{localize "TOKENIZER-2.ShortcutClick"}}</kbd><span>{{localize "TOKENIZER-2.LassoShortcutClickDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutDrag"}}</kbd><span>{{localize "TOKENIZER-2.LassoShortcutDragDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutCtrlClick"}}</kbd><span>{{localize "TOKENIZER-2.LassoShortcutCtrlClickDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutDeleteBackspace"}}</kbd><span>{{localize "TOKENIZER-2.LassoShortcutDeleteDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutEscape"}}</kbd><span>{{localize "TOKENIZER-2.LassoShortcutEscapeDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutSpaceDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutSpaceDragDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutScroll"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutScrollDesc"}}</span></li>
            </ul>
          {{/if}}

          {{#if (eq activeTool 'freehand')}}
            <ul class="tie-shortcut-list">
              <li><kbd>{{localize "TOKENIZER-2.ShortcutDrag"}}</kbd><span>{{localize "TOKENIZER-2.FreehandShortcutDragDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutRelease"}}</kbd><span>{{localize "TOKENIZER-2.FreehandShortcutReleaseDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutSpaceDrag"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutSpaceDragDesc"}}</span></li>
              <li><kbd>{{localize "TOKENIZER-2.ShortcutScroll"}}</kbd><span>{{localize "TOKENIZER-2.ShortcutScrollDesc"}}</span></li>
            </ul>
          {{/if}}

          {{#if (eq activeTool 'lasso')}}
            <div class="tie-control">
              <label class="tie-control__label" for="lasso-blur-radius">
                {{localize "TOKENIZER-2.EdgeBlur"}}
                <span class="tie-control__value" id="lasso-blur-radius-value">{{lassoBlurRadius}}</span>
              </label>
              <input
                type="range"
                id="lasso-blur-radius"
                class="tie-slider"
                min="0" max="20" step="1"
                value="{{lassoBlurRadius}}"
              />
            </div>

            <button type="button" class="tie-btn tie-btn--danger tie-btn--sm" data-action="apply-selection">
              <i class="fa-solid fa-scissors"></i> {{localize "TOKENIZER-2.RemoveSelected"}}
            </button>
            <button type="button" class="tie-btn tie-btn--sm" data-action="invert-selection">
              <i class="fa-solid fa-arrows-rotate"></i> {{localize "TOKENIZER-2.InvertSelection"}}
            </button>
            <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="clear-selection">
              <i class="fa-solid fa-xmark"></i> {{localize "TOKENIZER-2.DiscardSelection"}}
            </button>

            <div class="tie-tool-row tie-tool-row--lasso-mask">
              <select name="lasso-target-mask" id="lasso-target-mask" class="tie-select">
                <option value="__new__">{{localize "TOKENIZER-2.LassoNewMask"}}</option>
                {{#each lassoTargetMasks}}
                  <option value="{{id}}" {{#if selected}}selected{{/if}}>{{name}}</option>
                {{/each}}
              </select>
              <button type="button" class="tie-btn tie-btn--sm" data-action="add-selection-to-mask">
                <i class="fa-solid fa-paint-roller"></i> {{localize "TOKENIZER-2.LassoAddToMask"}}
              </button>
            </div>
          {{/if}}

          <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="clear-lasso"
            {{#unless activeLayer.hasLassoRegions}}disabled{{/unless}}>
            <i class="fa-solid fa-eraser"></i> {{localize "TOKENIZER-2.ClearAllCuts"}}
          </button>

        {{/if}}{{!-- /showSelection --}}

      {{else}}
        <p class="tie-panel__empty">{{localize "TOKENIZER-2.SelectLayerPrompt"}}</p>
      {{/if}}

    </aside>

    {{!-- ---------------------------------------------------------------- --}}
    {{!-- CENTRE: Canvas viewport                                          --}}
    {{!-- ---------------------------------------------------------------- --}}
    <main class="tie-canvas-viewport" aria-label="{{localize "TOKENIZER-2.CanvasViewportAriaLabel"}}">

      {{!-- The canvas itself. JS sizes it to fill this container. --}}
      <canvas
        id="tie-canvas"
        class="tie-canvas"
        aria-label="{{localize "TOKENIZER-2.CanvasAriaLabel"}}"
      ></canvas>

      {{!-- UI overlay canvas for tool feedback (lasso path, handles). --}}
      {{!-- Sits on top of #tie-canvas via CSS absolute positioning.   --}}
      <canvas
        id="tie-canvas-overlay"
        class="tie-canvas tie-canvas--overlay"
        aria-hidden="true"
      ></canvas>

      {{!-- Mini-map --}}
      <div class="tie-minimap" id="tie-minimap" title="{{localize "TOKENIZER-2.MiniMapTitle"}}">
        <canvas id="tie-minimap-canvas"></canvas>
        <div class="tie-minimap__viewport-rect" id="tie-minimap-rect"></div>
      </div>

      {{!-- Lasso mode hint banner --}}
      {{#if (eq activeTool 'lasso')}}
        <div class="tie-canvas-hint" role="status">
          <i class="fa-solid fa-draw-polygon"></i>
          {{localize "TOKENIZER-2.LassoHint"}}
        </div>
      {{/if}}

    </main>

    {{!-- ---------------------------------------------------------------- --}}
    {{!-- RIGHT PANEL: Layers / Masks / Frames (tabbed)                    --}}
    {{!-- ---------------------------------------------------------------- --}}
    <aside class="tie-panel tie-panel--right" aria-label="{{localize "TOKENIZER-2.LayersAriaLabel"}}">

      {{!-- Tab bar --}}
      <nav class="tie-rp-tabs" role="tablist">
        <button type="button" class="tie-rp-tab {{#if (eq activeRightTab 'layers')}}is-active{{/if}}"
          data-right-tab="layers" role="tab" aria-selected="{{#if (eq activeRightTab 'layers')}}true{{else}}false{{/if}}">
          {{localize "TOKENIZER-2.TabLayers"}}
        </button>
        <button type="button" class="tie-rp-tab {{#if (eq activeRightTab 'masks')}}is-active{{/if}}"
          data-right-tab="masks" role="tab" aria-selected="{{#if (eq activeRightTab 'masks')}}true{{else}}false{{/if}}">
          {{localize "TOKENIZER-2.TabMasks"}}
        </button>
        {{#unless isAvatarMode}}
        <button type="button" class="tie-rp-tab {{#if (eq activeRightTab 'frames')}}is-active{{/if}}"
          data-right-tab="frames" role="tab" aria-selected="{{#if (eq activeRightTab 'frames')}}true{{else}}false{{/if}}">
          {{localize "TOKENIZER-2.TabRings"}}
        </button>
        {{/unless}}
      </nav>

      {{!-- ══════════════════════════════════════════════════════════════ --}}
      {{!-- TAB: Layers                                                    --}}
      {{!-- ══════════════════════════════════════════════════════════════ --}}
      <div class="tie-rp-panel {{#if (eq activeRightTab 'layers')}}is-active{{/if}}" data-right-tab-panel="layers">

        <div class="tie-panel__section">
          <div class="tie-panel__section-header">
            <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.LayersHeading"}}</h3>
          </div>
          <div class="tie-panel__section-header">
            <details class="tie-add-layer-dropdown">
              <summary class="tie-add-layer-dropdown__trigger" data-tooltip="{{localize "TOKENIZER-2.AddLayer"}}">
                <i class="fa-solid fa-plus"></i> {{localize "TOKENIZER-2.AddLayer"}}
              </summary>
              <div class="tie-add-layer-dropdown__menu">
                {{#unless isAvatarMode}}
                <button type="button" class="tie-dropdown-item" data-action="add-frame-layer">
                  <i class="fa-solid fa-user-circle"></i> {{localize "TOKENIZER-2.BrowseFrames"}}
                </button>
                <button type="button" class="tie-dropdown-item" data-action="add-ring-layer">
                  <i class="fa-solid fa-circle-dot"></i> {{localize "TOKENIZER-2.AddRingLayer"}}
                </button>
                {{/unless}}
                <button type="button" class="tie-dropdown-item" data-action="add-image-layer">
                  <i class="fa-solid fa-image"></i> {{localize "TOKENIZER-2.AddImageLayer"}}
                </button>
                {{#if actorImg}}
                <button type="button" class="tie-dropdown-item" data-action="add-avatar-layer">
                  <i class="fa-solid fa-person"></i> {{localize "TOKENIZER-2.AddAvatarLayer"}}
                </button>
                {{/if}}
                {{#if tokenImg}}
                <button type="button" class="tie-dropdown-item" data-action="add-token-layer">
                  <i class="fa-solid fa-id-badge"></i> {{localize "TOKENIZER-2.AddTokenLayer"}}
                </button>
                {{/if}}
                <button type="button" class="tie-dropdown-item" data-action="add-text-layer">
                  <i class="fa-solid fa-font"></i> {{localize "TOKENIZER-2.AddTextLayer"}}
                </button>
                <button type="button" class="tie-dropdown-item" data-action="add-solid-color-layer">
                  <i class="fa-solid fa-fill-drip"></i> {{localize "TOKENIZER-2.AddSolidColorLayer"}}
                </button>
                <button type="button" class="tie-dropdown-item" data-action="add-mask-layer">
                  <i class="fa-solid fa-mask"></i> {{localize "TOKENIZER-2.BrowseMasks"}}
                </button>
                <button type="button" class="tie-dropdown-item" data-action="add-painted-mask">
                  <i class="fa-solid fa-paintbrush"></i> {{localize "TOKENIZER-2.AddPaintedMask"}}
                </button>
              </div>
            </details>
          </div>

          {{!-- Layer list. JS wires up drag-to-reorder on this element. --}}
          <ul class="tie-layer-list" id="tie-layer-list" role="listbox" aria-label="{{localize "TOKENIZER-2.LayerStackAriaLabel"}}">

            {{#each layers}}
              <li
                class="tie-layer {{#if this.active}}is-active{{/if}} {{#if this.locked}}is-locked{{/if}}"
                data-layer-id="{{this.id}}"
                role="option"
                aria-selected="{{this.active}}"
                draggable="true"
              >
                {{!-- Drag handle --}}
                <span class="tie-layer__drag-handle" aria-hidden="true">
                  <i class="fa-solid fa-grip-vertical"></i>
                </span>

                {{!-- Thumbnail --}}
                <span class="tie-layer__thumb">
                  {{#if (eq this.type 'ring')}}
                    <i class="fa-solid fa-circle-dot"></i>
                  {{else if (eq this.type 'solidColor')}}
                    <i class="fa-solid fa-fill-drip" style="color: {{this.colorConfig.color}};"></i>
                  {{else if this.thumbSrc}}
                    <img src="{{this.thumbSrc}}" alt="" aria-hidden="true" />
                    {{#if this.isVideo}}
                      <i class="fa-solid fa-play tie-layer__thumb-badge" aria-hidden="true"></i>
                    {{/if}}
                  {{else if this.isVideo}}
                    <i class="fa-solid fa-film"></i>
                  {{else if this.isFrame}}
                    <i class="fa-solid fa-mask"></i>
                  {{else}}
                    <i class="fa-solid fa-image"></i>
                  {{/if}}
                </span>

                {{!-- Name (editable on double-click via JS) --}}
                <span class="tie-layer__name" title="{{this.name}}">
                  {{this.name}}
                </span>

                {{!-- Layer type badge --}}
                {{#if this.isDynamicRingPreview}}
                  <span class="tie-layer__badge tie-layer__badge--dynamic" data-tooltip="{{localize "TOKENIZER-2.DynamicRingBadge"}}">DR</span>
                {{else if this.isFrame}}
                  <span class="tie-layer__badge">{{localize "TOKENIZER-2.FrameBadge"}}</span>
                {{else if (eq this.type 'ring')}}
                  <span class="tie-layer__badge">{{localize "TOKENIZER-2.FrameBadge"}}</span>
                {{/if}}
                {{#if (eq this.type 'adjustment')}}
                  <span class="tie-layer__badge">{{localize "TOKENIZER-2.AdjBadge"}}</span>
                {{/if}}

                {{!-- Controls --}}
                <div class="tie-layer__controls">
                  {{#if this.canEditMask}}
                  {{#if (eq this.id ../paintingMaskLayerId)}}
                  <button
                    type="button"
                    class="tie-layer__btn is-active"
                    data-action="stop-edit-mask"
                    data-layer-id="{{this.id}}"
                    data-tooltip="{{localize "TOKENIZER-2.StopEditMask"}}"
                    aria-label="{{localize "TOKENIZER-2.StopEditMask"}}"
                  >
                    <i class="fa-solid fa-circle-stop"></i>
                  </button>
                  {{else}}
                  <button
                    type="button"
                    class="tie-layer__btn"
                    data-action="edit-mask"
                    data-layer-id="{{this.id}}"
                    data-tooltip="{{#if this.isAlphaMask}}{{localize "TOKENIZER-2.EditMask"}}{{else}}{{localize "TOKENIZER-2.CreatePaintedMask"}}{{/if}}"
                    aria-label="{{#if this.isAlphaMask}}{{localize "TOKENIZER-2.EditMask"}}{{else}}{{localize "TOKENIZER-2.CreatePaintedMask"}}{{/if}}"
                  >
                    {{#if this.isAlphaMask}}
                      <i class="fa-solid fa-pen"></i>
                    {{else}}
                      <i class="fa-solid fa-wand-magic-sparkles"></i>
                    {{/if}}
                  </button>
                  {{/if}}
                  {{/if}}

                  {{#unless this.isAlphaMask}}
                  <button
                    type="button"
                    class="tie-layer__btn {{#unless this.visible}}is-hidden{{/unless}}"
                    data-action="toggle-visible"
                    data-layer-id="{{this.id}}"
                    data-tooltip="{{#if this.visible}}{{localize "TOKENIZER-2.HideLayer"}}{{else}}{{localize "TOKENIZER-2.ShowLayer"}}{{/if}}"
                    aria-label="{{#if this.visible}}{{localize "TOKENIZER-2.HideLayerAriaLabel"}}{{else}}{{localize "TOKENIZER-2.ShowLayerAriaLabel"}}{{/if}}"
                  >
                    <i class="fa-solid {{#if this.visible}}fa-eye{{else}}fa-eye-slash{{/if}}"></i>
                  </button>
                  {{/unless}}
                </div>

              </li>
            {{else}}
              <li class="tie-layer-list__empty">
                {{localize "TOKENIZER-2.NoLayers"}}
              </li>
            {{/each}}

          </ul>
        </div>

        {{!-- Ring config section (shown when a ring layer is active) --}}
        {{#if (eq activeLayer.type 'ring')}}
          <div class="tie-panel__section">

            <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.RingSettingsHeading"}}</h3>

            <div class="tie-control">
              <label class="tie-control__label" for="ring-shape">{{localize "TOKENIZER-2.RingShape"}}</label>
              <select id="ring-shape" class="tie-select" data-tie-select="set-ring-shape">
                <option value="circle" {{#if (eq activeLayer.ringConfig.shape 'circle')}}selected{{/if}}>{{localize "TOKENIZER-2.RingShapeCircle"}}</option>
                <option value="square" {{#if (eq activeLayer.ringConfig.shape 'square')}}selected{{/if}}>{{localize "TOKENIZER-2.RingShapeSquare"}}</option>
                <option value="hex"    {{#if (eq activeLayer.ringConfig.shape 'hex')}}selected{{/if}}>{{localize "TOKENIZER-2.RingShapeHex"}}</option>
              </select>
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="ring-texture">{{localize "TOKENIZER-2.RingTexture"}}</label>
              <select id="ring-texture" class="tie-select" data-tie-select="set-ring-texture">
                <option value=""          {{#unless activeLayer.ringConfig.texture}}selected{{/unless}}>{{localize "TOKENIZER-2.RingTextureNone"}}</option>
                <option value="gold"      {{#if (eq activeLayer.ringConfig.texture 'gold')}}selected{{/if}}>{{localize "TOKENIZER-2.RingTextureGold"}}</option>
                <option value="silver"    {{#if (eq activeLayer.ringConfig.texture 'silver')}}selected{{/if}}>{{localize "TOKENIZER-2.RingTextureSilver"}}</option>
                <option value="bronze"    {{#if (eq activeLayer.ringConfig.texture 'bronze')}}selected{{/if}}>{{localize "TOKENIZER-2.RingTextureBronze"}}</option>
                <option value="stone"     {{#if (eq activeLayer.ringConfig.texture 'stone')}}selected{{/if}}>{{localize "TOKENIZER-2.RingTextureStone"}}</option>
                <option value="wood"      {{#if (eq activeLayer.ringConfig.texture 'wood')}}selected{{/if}}>{{localize "TOKENIZER-2.RingTextureWood"}}</option>
                <option value="chainmail" {{#if (eq activeLayer.ringConfig.texture 'chainmail')}}selected{{/if}}>{{localize "TOKENIZER-2.RingTextureChainmail"}}</option>
                {{#if activeLayer.ringConfig.textureIsCustom}}
                <option value="{{activeLayer.ringConfig.texture}}" selected>{{localize "TOKENIZER-2.RingTextureCustom"}}: {{activeLayer.ringConfig.textureFilename}}</option>
                {{/if}}
                <option value="__browse__">{{localize "TOKENIZER-2.RingTextureBrowse"}}</option>
              </select>
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="ring-stroke-width">
                {{localize "TOKENIZER-2.RingStrokeWidth"}}
                <span class="tie-control__value">{{activeLayer.ringConfig.strokeWidth}}px</span>
              </label>
              <input type="range" id="ring-stroke-width" class="tie-slider"
                min="1" max="40" step="1"
                value="{{activeLayer.ringConfig.strokeWidth}}"
                data-action="adjust-ring"
                data-property="strokeWidth"
              />
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="ring-stroke-color">{{localize "TOKENIZER-2.RingStrokeColor"}}</label>
              <input type="color" id="ring-stroke-color" class="tie-color-picker"
                value="{{activeLayer.ringConfig.strokeColor}}"
                data-action="adjust-ring"
                data-property="strokeColor"
              />
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="ring-stroke-opacity">
                {{localize "TOKENIZER-2.RingStrokeOpacity"}}
                <span class="tie-control__value">{{activeLayer.ringConfig.strokeOpacityDisplay}}%</span>
              </label>
              <input type="range" id="ring-stroke-opacity" class="tie-slider"
                min="0" max="100" step="1"
                value="{{activeLayer.ringConfig.strokeOpacityDisplay}}"
                data-action="adjust-ring"
                data-property="strokeOpacity"
              />
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="ring-glow-color">{{localize "TOKENIZER-2.RingGlowColor"}}</label>
              <div class="tie-tint-row">
                <input type="color" id="ring-glow-color" class="tie-color-picker"
                  value="{{activeLayer.ringConfig.glowColor}}"
                  data-action="adjust-ring"
                  data-property="glowColor"
                />
                <input type="range" class="tie-slider tie-slider--inline"
                  min="0" max="40" step="1"
                  value="{{activeLayer.ringConfig.glowBlur}}"
                  data-action="adjust-ring"
                  data-property="glowBlur"
                />
                <span class="tie-control__value">{{activeLayer.ringConfig.glowBlur}}px</span>
              </div>
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="ring-inner-feather">
                {{localize "TOKENIZER-2.RingInnerFeather"}}
                <span class="tie-control__value">{{activeLayer.ringConfig.innerFeather}}px</span>
              </label>
              <input type="range" id="ring-inner-feather" class="tie-slider"
                min="0" max="30" step="1"
                value="{{activeLayer.ringConfig.innerFeather}}"
                data-action="adjust-ring"
                data-property="innerFeather"
              />
            </div>

          </div>
        {{/if}}

        {{!-- Solid colour config section (shown when a colour layer is active) --}}
        {{#if (eq activeLayer.type 'solidColor')}}
          <div class="tie-panel__section">
            <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.SolidColorHeading"}}</h3>
            <div class="tie-control">
              <label class="tie-control__label" for="solid-color-color">{{localize "TOKENIZER-2.SolidColorColor"}}</label>
              <input type="color" id="solid-color-color" class="tie-color-picker"
                value="{{activeLayer.colorConfig.color}}"
                data-action="adjust" data-property="solidColorColor" />
            </div>
          </div>
        {{/if}}

        {{!-- Text config section (shown when a text layer is active) --}}
        {{#if (eq activeLayer.type 'text')}}
          <div class="tie-panel__section">

            <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.TextSettingsHeading"}}</h3>

            <div class="tie-control">
              <label class="tie-control__label" for="text-content">{{localize "TOKENIZER-2.TextContent"}}</label>
              <input type="text" id="text-content" class="tie-input"
                value="{{activeLayer.textConfig.content}}"
                data-action="adjust-text"
                data-property="content"
              />
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="text-font-family">{{localize "TOKENIZER-2.TextFontFamily"}}</label>
              <select id="text-font-family" class="tie-select" data-action="adjust-text" data-property="fontFamily">
                {{#each availableFonts}}
                  <option value="{{this}}" {{#if (eq this ../activeLayer.textConfig.fontFamily)}}selected{{/if}}>{{this}}</option>
                {{/each}}
              </select>
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="text-font-size">
                {{localize "TOKENIZER-2.TextFontSize"}}
                <span class="tie-control__value">{{activeLayer.textConfig.fontSize}}px</span>
              </label>
              <input type="range" id="text-font-size" class="tie-slider"
                min="8" max="200" step="1"
                value="{{activeLayer.textConfig.fontSize}}"
                data-action="adjust-text"
                data-property="fontSize"
              />
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="text-font-weight">{{localize "TOKENIZER-2.TextFontWeight"}}</label>
              <select id="text-font-weight" class="tie-select" data-action="adjust-text" data-property="fontWeight">
                <option value="normal" {{#if (eq activeLayer.textConfig.fontWeight 'normal')}}selected{{/if}}>Normal</option>
                <option value="bold" {{#if (eq activeLayer.textConfig.fontWeight 'bold')}}selected{{/if}}>Bold</option>
              </select>
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="text-fill">{{localize "TOKENIZER-2.TextFill"}}</label>
              <input type="color" id="text-fill" class="tie-color-picker"
                value="{{activeLayer.textConfig.fill}}"
                data-action="adjust-text"
                data-property="fill"
              />
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="text-stroke">{{localize "TOKENIZER-2.TextStroke"}}</label>
              <div class="tie-tint-row">
                <input type="color" id="text-stroke" class="tie-color-picker"
                  value="{{activeLayer.textConfig.stroke}}"
                  data-action="adjust-text"
                  data-property="stroke"
                />
                <input type="range" class="tie-slider tie-slider--inline"
                  min="0" max="10" step="1"
                  value="{{activeLayer.textConfig.strokeWidth}}"
                  data-action="adjust-text"
                  data-property="strokeWidth"
                />
                <span class="tie-control__value">{{activeLayer.textConfig.strokeWidth}}px</span>
              </div>
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="text-shadow-color">{{localize "TOKENIZER-2.TextShadowColor"}}</label>
              <div class="tie-tint-row">
                <input type="color" id="text-shadow-color" class="tie-color-picker"
                  value="{{activeLayer.textConfig.shadowColor}}"
                  data-action="adjust-text"
                  data-property="shadowColor"
                />
                <input type="range" class="tie-slider tie-slider--inline"
                  min="0" max="20" step="1"
                  value="{{activeLayer.textConfig.shadowBlur}}"
                  data-action="adjust-text"
                  data-property="shadowBlur"
                />
                <span class="tie-control__value">{{activeLayer.textConfig.shadowBlur}}px</span>
              </div>
            </div>

            <div class="tie-control">
              <label class="tie-control__label" for="text-align">{{localize "TOKENIZER-2.TextAlign"}}</label>
              <select id="text-align" class="tie-select" data-action="adjust-text" data-property="textAlign">
                <option value="left" {{#if (eq activeLayer.textConfig.textAlign 'left')}}selected{{/if}}>Left</option>
                <option value="center" {{#if (eq activeLayer.textConfig.textAlign 'center')}}selected{{/if}}>Center</option>
                <option value="right" {{#if (eq activeLayer.textConfig.textAlign 'right')}}selected{{/if}}>Right</option>
              </select>
            </div>

          </div>
        {{/if}}

      </div>{{!-- /layers panel --}}

      {{!-- ══════════════════════════════════════════════════════════════ --}}
      {{!-- TAB: Masks (global view - all layers)                          --}}
      {{!-- ══════════════════════════════════════════════════════════════ --}}
      <div class="tie-rp-panel {{#if (eq activeRightTab 'masks')}}is-active{{/if}}" data-right-tab-panel="masks">

        {{#each layerMaskGroups}}
          <div class="tie-mask-group" data-layer-id="{{this.layerId}}">
            <div class="tie-mask-group__header">
              <span class="tie-mask-group__thumb">
                {{#if (eq this.layerType 'ring')}}
                  <i class="fa-solid fa-circle-dot"></i>
                {{else if this.layerThumbSrc}}
                  <img src="{{this.layerThumbSrc}}" alt="" aria-hidden="true" />
                {{else if this.layerIsFrame}}
                  <i class="fa-solid fa-mask"></i>
                {{else}}
                  <i class="fa-solid fa-image"></i>
                {{/if}}
              </span>
              <span class="tie-mask-group__name" title="{{this.layerName}}">{{this.layerName}}</span>
              <button type="button" class="tie-icon-btn" data-action="add-mask-for-layer"
                data-layer-id="{{this.layerId}}" title="{{localize "TOKENIZER-2.AddMask"}}">
                <i class="fa-solid fa-plus"></i>
              </button>
            </div>
            <ul class="tie-mask-list">
              {{#each this.masks}}
                <li class="tie-mask-item{{#if this.isActive}} is-active{{/if}}"
                    data-mask-id="{{this.id}}" data-layer-id="{{../layerId}}"
                    data-action="select-mask-global">
                  <span class="tie-mask-item__label">
                    {{#if (eq this.type 'alpha')}}{{localize "TOKENIZER-2.MaskTypeAlpha"}}
                    {{else if (eq this.type 'ring-frame')}}{{localize "TOKENIZER-2.MaskTypeRing"}}
                    {{else if (eq this.type 'custom')}}{{localize "TOKENIZER-2.MaskTypeCustom"}}
                    {{else if (eq this.type 'frame-ray')}}{{localize "TOKENIZER-2.MaskTypeFrameRay"}}
                    {{else if (eq this.type 'frame-marching')}}{{localize "TOKENIZER-2.MaskTypeFrameMarching"}}
                    {{else}}{{localize "TOKENIZER-2.MaskTypeNone"}}
                    {{/if}}
                  </span>
                  <button type="button" class="tie-icon-btn tie-icon-btn--danger"
                          data-action="remove-mask-global" data-mask-id="{{this.id}}" data-layer-id="{{../layerId}}"
                          title="{{localize "TOKENIZER-2.RemoveMask"}}">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </li>
              {{else}}
                <li class="tie-mask-list__empty">{{localize "TOKENIZER-2.NoMasks"}}</li>
              {{/each}}
            </ul>
          </div>
        {{else}}
          <p class="tie-panel__empty">{{localize "TOKENIZER-2.NoLayersForMasks"}}</p>
        {{/each}}

        {{!-- Detail controls for the globally selected mask --}}
        {{#if globalActiveMask}}

          {{!-- Mask type selector --}}
          <div class="tie-panel__section">
            <div class="tie-control">
              <label class="tie-control__label" for="global-mask-type">{{localize "TOKENIZER-2.MaskType"}}</label>
              <select id="global-mask-type" class="tie-select" data-tie-select="set-mask-type">
                <option value="none"            {{#if (eq globalActiveMask.type null)}}selected{{/if}}>{{localize "TOKENIZER-2.MaskTypeNone"}}</option>
                <option value="alpha"           {{#if (eq globalActiveMask.type 'alpha')}}selected{{/if}}>{{localize "TOKENIZER-2.MaskTypeAlpha"}}</option>
                <option value="frame-ray"       {{#if (eq globalActiveMask.type 'frame-ray')}}selected{{/if}}>{{localize "TOKENIZER-2.MaskTypeFrameRay"}}</option>
                <option value="frame-marching"  {{#if (eq globalActiveMask.type 'frame-marching')}}selected{{/if}}>{{localize "TOKENIZER-2.MaskTypeFrameMarching"}}</option>
              </select>
            </div>

            {{!-- Alpha mask source --}}
            {{#if isGlobalMaskAlpha}}
              <div class="tie-control">
                <label class="tie-control__label" for="global-mask-layer-src">{{localize "TOKENIZER-2.MaskLayer"}}</label>
                {{#if maskLayers.length}}
                  <select id="global-mask-layer-src" class="tie-select" data-tie-select="set-frame-mask-src">
                    <option value="">{{localize "TOKENIZER-2.SelectMaskPlaceholder"}}</option>
                    {{#each maskLayers}}
                      <option value="{{this.src}}" {{#if (eq ../globalActiveMask.src this.src)}}selected{{/if}}>
                        {{this.name}}
                      </option>
                    {{/each}}
                  </select>
                {{else}}
                  <p class="tie-hint">{{localize "TOKENIZER-2.NoMaskLayersHint"}}</p>
                {{/if}}
                {{#if globalActiveMask.src}}
                  <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="clear-mask">
                    {{localize "TOKENIZER-2.ClearMask"}}
                  </button>
                {{/if}}
                <p class="tie-hint">{{localize "TOKENIZER-2.AlphaMaskHint"}}</p>
              </div>
            {{/if}}

            {{!-- Frame mask options --}}
            {{#if isGlobalMaskFrame}}
              <div class="tie-control">
                <label class="tie-control__label" for="global-frame-mask-src">{{localize "TOKENIZER-2.FrameLayer"}}</label>
                {{#if frameLayers.length}}
                  <select id="global-frame-mask-src" class="tie-select" data-tie-select="set-frame-mask-src">
                    <option value="">{{localize "TOKENIZER-2.SelectFramePlaceholder"}}</option>
                    {{#each frameLayers}}
                      <option value="{{this.src}}" {{#if (eq ../globalActiveMask.src this.src)}}selected{{/if}}>
                        {{this.name}}
                      </option>
                    {{/each}}
                  </select>
                {{else}}
                  <p class="tie-hint">{{localize "TOKENIZER-2.NoFrameLayersHint"}}</p>
                {{/if}}
                {{#if globalActiveMask.src}}
                  <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="clear-mask">
                    {{localize "TOKENIZER-2.ClearMask"}}
                  </button>
                {{/if}}
                {{#if (eq globalActiveMask.type 'frame-ray')}}
                  <p class="tie-hint">{{localize "TOKENIZER-2.FrameRayHint"}}</p>
                {{else}}
                  <p class="tie-hint">{{localize "TOKENIZER-2.FrameMarchingHint"}}</p>
                {{/if}}
              </div>

              {{#if (eq globalActiveMask.type 'frame-ray')}}
                <div class="tie-control">
                  <label class="tie-control__label" for="ray-mask-edge-mode">{{localize "TOKENIZER-2.RayMaskEdgeMode"}}</label>
                  <select id="ray-mask-edge-mode" class="tie-select" data-tie-select="set-ray-edge-mode">
                    <option value="highest-alpha" {{#if (eq globalActiveMaskRayEdgeMode 'highest-alpha')}}selected{{/if}}>{{localize "TOKENIZER-2.RayMaskEdgeModeHighestAlpha"}}</option>
                    <option value="first-opaque"  {{#if (eq globalActiveMaskRayEdgeMode 'first-opaque')}}selected{{/if}}>{{localize "TOKENIZER-2.RayMaskEdgeModeFirstOpaque"}}</option>
                  </select>
                </div>
                <div class="tie-control">
                  <label class="tie-control__label" for="ray-mask-sample-size">{{localize "TOKENIZER-2.RayMaskSampleSize"}}</label>
                  <input type="number" id="ray-mask-sample-size" class="tie-input--sm" min="1" step="1"
                    value="{{globalActiveMaskRaySampleSize}}" data-tie-input="set-ray-sample-size" />
                  <p class="tie-hint">{{localize "TOKENIZER-2.RayMaskSampleSizeHint"}}</p>
                </div>
              {{/if}}
            {{/if}}
          </div>

        {{/if}}{{!-- /globalActiveMask --}}

      </div>{{!-- /masks panel --}}

      {{!-- ══════════════════════════════════════════════════════════════ --}}
      {{!-- TAB: Frames (hidden in avatar mode)                            --}}
      {{!-- ══════════════════════════════════════════════════════════════ --}}
      {{#unless isAvatarMode}}
      <div class="tie-rp-panel {{#if (eq activeRightTab 'frames')}}is-active{{/if}}" data-right-tab-panel="frames">

        <div class="tie-panel__section">
          <div class="tie-panel__section-header">
            <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.FrameRing"}}</h3>
          </div>
          {{#unless isDynamicRingMode}}
          <div class="tie-panel__section-header">
            <details class="tie-add-layer-dropdown">
              <summary class="tie-add-layer-dropdown__trigger" data-tooltip="{{localize "TOKENIZER-2.AddLayer"}}">
                <i class="fa-solid fa-plus"></i> {{localize "TOKENIZER-2.AddLayer"}}
              </summary>
              <div class="tie-add-layer-dropdown__menu">
                <button type="button" class="tie-dropdown-item" data-action="add-frame-layer">
                  <i class="fa-solid fa-user-circle"></i> {{localize "TOKENIZER-2.BrowseFrames"}}
                </button>
                <button type="button" class="tie-dropdown-item" data-action="add-ring-layer">
                  <i class="fa-solid fa-circle-dot"></i> {{localize "TOKENIZER-2.AddRingLayer"}}
                </button>
              </div>
            </details>
          </div>
          {{/unless}}

          <div class="tie-sa-field">
            <button type="button" class="tie-btn tie-btn--ghost {{#if isDynamicRingMode}}is-active{{/if}}" data-action="toggle-dynamic-ring">
              <i class="fa-solid fa-ring"></i>
              {{#if isDynamicRingMode}}
                {{localize "TOKENIZER-2.DisableDynamicRing"}}
              {{else}}
                {{localize "TOKENIZER-2.EnableDynamicRing"}}
              {{/if}}
            </button>
          </div>
          <div class="tie-sa-field">
            <button type="button" class="tie-btn tie-btn--ghost {{#if isOversized}}is-active{{/if}}" data-action="toggle-oversized">
              <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
              {{#if isOversized}}
                {{localize "TOKENIZER-2.OversizedRingDisable"}}
              {{else}}
                {{localize "TOKENIZER-2.OversizedRingEnable"}}
              {{/if}}
            </button>
          </div>
        </div>

        {{!-- Dynamic ring color controls --}}
        {{#if isDynamicRingMode}}
        <div class="tie-panel__section">
          <h3 class="tie-panel__heading">{{localize "TOKENIZER-2.DynamicRingColorsHeading"}}</h3>
          <div class="tie-sa-field">
            <label class="tie-sa-label">{{localize "TOKENIZER-2.DynamicRingColor"}}</label>
            <input type="color" class="tie-color-input" value="{{dynamicRingColor}}" data-action="set-dynamic-ring-color" />
          </div>
          <div class="tie-sa-field">
            <label class="tie-sa-label">{{localize "TOKENIZER-2.DynamicRingBgColor"}}</label>
            <input type="color" class="tie-color-input" value="{{dynamicRingBgColor}}" data-action="set-dynamic-ring-bg-color" />
          </div>
        </div>
        {{/if}}

      </div>{{!-- /frames panel --}}
      {{/unless}}

    </aside>

  </div>{{!-- /.tie-body --}}

</div>{{!-- /.tie-layout --}}