Add a Synced class to track changes

[simon-lund]

Describe the feature in detail (code, mocks, or screenshots encouraged)

A calss for tracking whether a value has changed from its last "synced" state. Useful for forms, editors, and any UI that needs to track local changes against baseline (e.g. server state).

Use Case

When editin content that syncs with a server, you need to:

• Detect unsaved changed
• Reset to last saved state
• Mark new sync points after saving

Proposed API

<script lang="ts">
  import { Synced } from "runed";
  
  let note = $state("Initial content");
  const synced = new Synced(() => note);
  
  async function save() {
    await api.saveNote(note);
    synced.commit(); // Server and local are now in sync
  }
</script>

<textarea bind:value={note}></textarea>

<button onclick={save} disabled={!synced.dirty}>
  Save
</button>

<button onclick={() => synced.reset()} disabled={!synced.dirty}>
  Discard changes
</button>

{#if synced.dirty}
  <p>Unsaved changes</p>
{/if}

Properties & Methods

• original - The baseline/synced value (read-only)
• current - The current tracked value (read-only)
• dirty - Boolean: trueif changed from original
• reset() - Reverts source value to original
• commit() - Updates original to current value (marks new sync point)

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response