<script lang="ts">
  // v0.3 Phase 5a — shared page skeleton.
  //
  // Six-zone layout used by every quietware page so structure stays
  // consistent across Dictation / Files / Tasks / History / Settings.
  // Sidebar lives in AppChrome above this — the skeleton owns the
  // right-of-sidebar column only.
  //
  //   +----------------------------+
  //   | header                     |  page title + status cluster
  //   |----------------------------|
  //   | notice (slim, optional)    |  one-line ambient state
  //   |----------------------------|
  //   |                            |
  //   |  primary work surface      |  the page's centre of attention
  //   |                            |
  //   |----------------------------|
  //   | action bar (optional)      |  post-capture / per-row actions
  //   |----------------------------|
  //   | metadata (mono, tiny)      |  hotkey hint · backend · model
  //   +----------------------------+
  //
  // Every snippet is optional except primary. Pages compose the
  // skeleton; the skeleton does not impose copy or controls.
  import type { Snippet } from "svelte";

  interface Props {
    header?: Snippet;
    notice?: Snippet;
    primary: Snippet;
    actionBar?: Snippet;
    metadata?: Snippet;
    /** Right rail / drawer — opt-in narrow column to the right of the primary surface. */
    rightRail?: Snippet;
    /** Drop the primary surface's outer padding for full-bleed content (eg. transcript canvas). */
    primaryBleed?: boolean;
    classes?: string;
  }

  let {
    header,
    notice,
    primary,
    actionBar,
    metadata,
    rightRail,
    primaryBleed = false,
    classes = "",
  }: Props = $props();
</script>

<div class="flex flex-col h-full min-h-0 bg-bg {classes}">
  {#if header}
    <!-- v0.3 Phase 5c polish: tighter vertical rhythm. -->
    <div class="shrink-0 px-7 pt-3 pb-2 border-b border-border-subtle">
      {@render header()}
    </div>
  {/if}

  {#if notice}
    <div class="shrink-0 px-7 pt-2">
      {@render notice()}
    </div>
  {/if}

  <div class="flex-1 min-h-0 flex {rightRail ? 'gap-5' : ''} px-7 pt-3 pb-2">
    <!-- v0.3 Phase 5c polish: subtle inset top-shadow gives the
         transcript surface a faint paper edge in light mode. The
         shadow's near-zero opacity makes it invisible against the
         dark surface — light-only effect by accident of luminance. -->
    <div class="flex-1 min-w-0 {primaryBleed ? '' : 'bg-bg-card border border-border-subtle rounded-lg overflow-hidden shadow-[inset_0_1px_0_rgba(0,0,0,0.05)]'}">
      {@render primary()}
    </div>
    {#if rightRail}
      <aside class="w-72 shrink-0 hidden lg:flex flex-col gap-3">
        {@render rightRail()}
      </aside>
    {/if}
  </div>

  {#if actionBar}
    <div class="shrink-0 px-7 py-3 border-t border-border-subtle bg-bg-elevated/60">
      {@render actionBar()}
    </div>
  {/if}

  {#if metadata}
    <div class="shrink-0 px-7 py-2 text-[11px] font-mono text-text-tertiary">
      {@render metadata()}
    </div>
  {/if}
</div>
