<script lang="ts">
  import { onMount } from "svelte";

  let ready = $state(false);

  onMount(() => {
    const script = document.createElement("script");
    script.src = "/litter-app.umd.cjs";
    script.onload = () => {
      ready = true;
    };
    script.onerror = (e) => console.error("Script load error:", e);
    document.body.appendChild(script);

    return () => script.remove();
  });
</script>

<h1 class="mb-4 text-4xl font-bold">Litter App</h1>

{#if ready}
  <div class="relative flex-1">
    <div class="absolute inset-0">
      <litter-app></litter-app>
    </div>
  </div>
{:else}
  <p>Loading Litter App...</p>
{/if}
