Text Flow Smart Diff

<div class="color-example">
  <div class="color-sliders">
    <label>
      Red
      <input id="red-slider" type="range" max="255" value="99" />
    </label>

    <label>
      Green
      <input id="green-slider" type="range" max="255" value="45" />
    </label>

    <label>
      Blue
      <input id="blue-slider" type="range" max="255" value="210" />
    </label>
  </div>

  <sv-text-flow id="color-value" use-diff>rgb(99, 45, 210)</sv-text-flow>

  <label class="diff-toggle">
    <input id="use-diff-checkbox" type="checkbox" checked />
    Use smart diff
  </label>

  <script type="module">
14 collapsed lines
    /** @type {HTMLInputElement} */
    const redSlider = document.querySelector("#red-slider");

    /** @type {HTMLInputElement} */
    const greenSlider = document.querySelector("#green-slider");

    /** @type {HTMLInputElement} */
    const blueSlider = document.querySelector("#blue-slider");

    /** @type {HTMLInputElement} */
    const diffCheckbox = document.querySelector("#use-diff-checkbox");

    /** @type {TextFlow} */
    const colorFlow = document.querySelector("#color-value");

    function render() {
      colorFlow.value = `rgb(${redSlider.value}, ${greenSlider.value}, ${blueSlider.value})`;
    }

    for (const slider of [redSlider, greenSlider, blueSlider]) {
      slider.addEventListener("input", render);
    }

    diffCheckbox.addEventListener("change", () => {
      colorFlow.useDiff = diffCheckbox.checked;
    });
  </script>
</div>

29 collapsed lines
<style>
  .color-example {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    align-items: center;
  }

  .color-sliders {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
  }

  .color-sliders label {
    display: grid;
    grid-template-columns: 3.5em 12em;
    gap: 0.75em;
    align-items: center;
  }

  .diff-toggle {
    display: flex;
    gap: 0.5em;
    align-items: center;
    cursor: pointer;
  }

  sv-text-flow {
    --sv-anim-dur: 0.5s;

    &::part(text) {
      font-family: monospace;
      font-size: 1.25rem;
    }
2 collapsed lines
  }
</style>