src/lib/stores/editor.ts

import { writable } from "svelte/store";

export interface EditorState {
  content: string;
  language: string;
  theme: string;
}

const DEFAULT_CONTENT =
  `<canvas id="game-canvas"></canvas>

<world canvas="#game-canvas" sky="#87ceeb">
  <!-- Ground -->
  <static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"></static-part>

  <!-- Ball -->
  <dynamic-part pos="-2 4 -3" shape="sphere" size="1" color="#ff4500"></dynamic-part>
</world>

<script type="module">
  import * as GAME from 'vibegame';
  
  GAME.run();
<` + `/script>`;

function createEditorStore() {
  const { subscribe, set, update } = writable<EditorState>({
    content: DEFAULT_CONTENT,
    language: "html",
    theme: "vs-dark",
  });

  return {
    subscribe,
    setContent: (content: string) => update((state) => ({ ...state, content })),
    setLanguage: (language: string) =>
      update((state) => ({ ...state, language })),
    setTheme: (theme: string) => update((state) => ({ ...state, theme })),
    reset: () =>
      set({
        content: DEFAULT_CONTENT,
        language: "html",
        theme: "vs-dark",
      }),
  };
}

export const editorStore = createEditorStore();