ui/src/routes/<route-name>/
├── +page.svelte      # Page component
├── +page.ts          # Load function (optional, for SSR data)
└── +layout.svelte    # Layout wrapper (optional, inherits parent)

<script lang="ts">
  import { onMount } from 'svelte';
  import { API_BASE, type MyType } from '$lib/api';
 
  // State — use $state(), never Svelte 4 stores
  let items: MyType[] = $state([]);
  let loading = $state(true);
  let error = $state('');
 
  // Derived values — use $derived()
  let itemCount = $derived(items.length);
  let hasItems = $derived(items.length > 0);
 
  // Complex derived — use $derived.by()
  let summary = $derived.by(() => {
    return items.reduce((acc, item) => acc + item.value, 0);
  });
 
  // Side effects — use $effect()
  $effect(() => {
    console.log(`Items changed: ${items.length}`);
  });
 
  onMount(async () => {
    try {
      const res = await fetch(`${API_BASE}/internal/my-endpoint?org_id=...&project_id=...`);
      items = await res.json();
    } catch (e: any) {
      error = e?.message || 'Failed to load';
    }
    loading = false;
  });
</script>
 
<div class="app-shell-wide">
  {#if loading}
    <p class="text-zinc-500 text-sm">Loading...</p>
  {:else if error}
    <div class="alert-danger">{error}</div>
  {:else}
    <div class="table-float">
      <!-- Content here -->
    </div>
  {/if}
</div>

<script lang="ts">
  // Props — use $props(), never export let
  let {
    items = [],
    selected = null,
    onSelect = undefined,
  }: {
    items: Item[];
    selected?: string | null;
    onSelect?: (id: string) => void;
  } = $props();
 
  // Internal state
  let expanded = $state(false);
</script>
 
<div class="surface-panel">
  {#each items as item (item.id)}
    <button
      class="btn-ghost"
      class:active={selected === item.id}
      onclick={() => onSelect?.(item.id)}
    >
      {item.name}
    </button>
  {/each}
</div>

export async function getMyEntities(): Promise<MyEntity[]> {
  const res = await fetch(`${API_BASE}/internal/my-entities?org_id=${getOrgId()}&project_id=${getProjectId()}`);
  if (!res.ok) throw new Error(`Failed to fetch: ${res.statusText}`);
  const data = await res.json();
  return data.items;
}

export type MyEntity = Schemas['MyEntity'];