component · platform-aware chrome

TuxFocusView

Full-viewport overlay for inspecting one piece of content without sidebar / navigation distraction. Lighter-weight than TuxModal — content-led, not dialog-led. Back / close affordance + title strip + actions, content fills the surface. Esc + backdrop click dismiss; focus is trapped; reduced-motion respected.

basic

Open the focus view

Click below to open a full-viewport overlay. Press Esc or click the backdrop / close button to dismiss. 

<UButton @click="open = true">Open focus view</UButton>
<tux-focus-view v-model:open="open" title="Document inspector" eyebrow="Focus mode">
  <p>Full-viewport surface with backdrop blur, back button + title +
    actions chrome, content slot fills the surface.</p>
</tux-focus-view>

composition · chart in focus

Chart pinned full-viewport

Composition pattern: a chart on the dashboard with a "expand to focus" button that opens the same chart in TuxFocusView with download / share actions in the top-bar. 

<tux-focus-view
  v-model:open="open"
  title="Monthly ingest rate"
  eyebrow="Exhibit 11.04"
>
  <template #actions>
    <UButton variant="ghost" icon="lucide:download" />
    <UButton variant="ghost" icon="lucide:share" />
  </template>
  <TuxChartLine :labels="months" :series="singleSeries" />
</tux-focus-view>