BreakoutContainer

---
/**
 * Ignores the parent’s width: spans the viewport (with caps) via negative
 * side margins and a computed width (`wide` ≈ gist code pane cap at 1320px).
 * Pair with `Container` when you need in-flow layout elsewhere. Site
 * `body { overflow-x: clip }` avoids horizontal scroll from `100vw` on `full`.
 *
 * `backgroundReset`: clears layered `background-image` / blend on this node
 * (e.g. under `/_/ui` where `html.ui-gallery-canvas` adds noise). Pair with
 * `bg-surface` or another `bg-*` utility for the fill color.
 */
interface Props {
  width?: 'default' | 'wide' | 'full'
  class?: string
  /** Strip wallpaper/gradient layers so `class` `bg-*` is a flat fill. */
  backgroundReset?: boolean
}

const { width = 'default', class: className, backgroundReset = false } = Astro.props

const spanClass = {
  full: 'w-[100vw] max-w-none shrink-0 ml-[calc(50%-50vw)] mr-[calc(50%-50vw)]',
  wide: 'w-[min(100vw,1320px)] max-w-[min(100vw,1320px)] shrink-0 ml-[calc(50%-min(50vw,660px))] mr-[calc(50%-min(50vw,660px))]',
  default:
    'w-[min(100vw,896px)] max-w-[min(100vw,896px)] shrink-0 ml-[calc(50%-min(50vw,448px))] mr-[calc(50%-min(50vw,448px))]',
}[width]

/** After `className` so it wins over any accidental `bg-gradient-*` in `class`. */
const backgroundResetClass = backgroundReset
  ? '[background-image:none] [background-blend-mode:normal]'
  : ''
---

<div class:list={[spanClass, className, backgroundResetClass]}>
  <slot />
</div>