Start with one: is the tab visible

import { Schema } from 'effect'
import type { HtmlBuilder } from 'foldkit/html'
import { Bundle } from 'foldkit-bundle'
import { Visibility } from 'foldkit-primitives/events'

const Page = Bundle.compose({}).pipe(Bundle.withChild('tab', Visibility))
type Model = typeof Page.Model.Type
type Message = typeof Page.Message.Type
const { placements } = Page

const config = placements.complete({
  init: () => placements.initial({}),
  update: placements.update(model => ({ model })),
  view: (model: Model, h: HtmlBuilder<Message>) =>
    h.div([], [model.tab.visible ? 'Watching' : 'Paused']),
  subscriptions: placements.subscriptions(),
})