Svelte 5 - Uncaught ReferenceError: $state is not defined

I am trying to make Svelte 5 project (I know it is still in alpha, but I want to play a bit with it), and I am using this as a template for now

My App.svelte

<script>
    import { withPrevSignals } from './withPrev'

    const color = withPrevSignals('green')

    let inputVal = $state('')

    function save() {
        color.curr = inputVal;
        inputVal = ''
    }
</script>

<p>Prev: {color.prev}</p>
<p>Curr: {color.curr}</p>
<input bind:value={inputVal} />
<button on:click={save}>Save</button>
<button on:click={color.undo}>Undo</button>

withPrev.js

export function withPrevSignals(initialValue) {
    let curr = $state(initialValue)
    let prev = $state(undefined)

    function undo() {
        curr = prev
        prev = undefined
    }
    return {
        get curr() { return curr },
        set curr(newValue) {
            prev = curr
            curr = newValue
        },
        get prev() { return prev },
        undo
    }
}

I keep getting an Uncaught ReferenceError: $state is not defined both in the svelte 5 playground and on the local. What am I doing wrong here?

Files using runes require the extension .svelte.js or .svelte.ts (docs).

(For tests, which commonly end in .spec.js/.test.js or the like, the check was changed to allow .svelte in other places as well, so you can have a thing.svelte.spec.js.)

Fixed Playground