<script lang="ts">
  // The docked-app layer: renders apps flagged `docked: true` on a
  // pointer-events-none absolute inset-0 overlay above WindowLayer's z-40,
  // below the desktop context menu's z-50. Docked apps have no wmkit window,
  // no titlebar, and no taskbar button; their visibility is toggled by
  // clicking their desktop icon (see stores/docked.ts). Replaces the
  // previously-hardcoded <MascotLayer /> in Desktop.svelte — the mascot is
  // now the first docked app, not a shell special case. Rendered as a sibling
  // inside the surface div so docked apps share the surface's coordinate
  // space (the mascot's ground-line computation depends on this).
  import { apps } from '$lib/apps'
  import { dockedVisibility } from '$lib/stores/docked'
  import LazyApp from '$lib/components/desktop-shell/LazyApp.svelte'

  const dockedApps = $derived($apps.filter((a) => a.docked))
</script>

<div class="pointer-events-none absolute inset-0 z-45">
  {#each dockedApps as app (app.id)}
    {#if $dockedVisibility[app.id] ?? true}
      <LazyApp load={app.component} />
    {/if}
  {/each}
</div>
