Hinweise & Protokolle

Alert

import { Alert, AlertTitle, AlertDescription, AlertActions } from '@rapold/framework-core'

<Alert tone="warning" dismissible onDismiss={() => setOpen(false)}>
  <AlertTitle>Wartung am Samstag</AlertTitle>
  <AlertDescription>Exporte sind von 06:00–08:00 nicht möglich.</AlertDescription>
  <AlertActions><Button size="sm">Details</Button></AlertActions>
</Alert>

Announcer & useDocumentTitle

Jetzt: Morgenrot · Lea Brunner. Der Screenreader hört den Wechsel erst, wenn der neue Titel 1,5 s hält; der Stand beim Laden bleibt still.

Tab-Titel: unverändert

import { Announcer, useDocumentTitle } from '@rapold/framework-core'

<Announcer message={`Jetzt läuft: ${title}`} announceKey={trackId} settleMs={5000} />

useDocumentTitle(playing ? `▶ ${title} – Atlas` : 'Atlas')

Hooks

useMediaQuery(≥ 48rem)

schmal

usePrefersReducedMotion

Bewegung erlaubt

useElementSize

noch nicht gemessen

useScrollDirection

nach oben (Kopfzeile sichtbar)

useVisibilityAwareInterval

0 Abfragen (pausiert im Hintergrund-Tab)

import { useMediaQuery, usePrefersReducedMotion, useElementSize,
  useScrollDirection, useVisibilityAwareInterval } from '@rapold/framework-core'

const wide = useMediaQuery('(min-width: 48rem)')
const size = useElementSize(ref)            // { width, height } | null
const dir = useScrollDirection({ container: ref })
useVisibilityAwareInterval({ interval: 5000, onTick: () => fetchStatus() })

LogView

Hochscrollen pausiert das Folgen; der Knopf zählt neue Einträge und springt zurück.

import { LogView } from '@rapold/framework-core'

<LogView
  lines={[{ id: 1, time: new Date(), source: 'api', message: 'GET /projekte 200', level: 'info' }]}
  maxLines={500}
  viewportClassName="h-96"
/>