CropWatch User Interface

CwToast

Toast notifications with tone variants and auto-dismiss.

Long-lived toast

createCwToastContext();
const toast = useCwToast();

<CwToastContainer />
<CwButton onclick={() => toast.add({ tone: 'success', message: 'Saved!' })}>
	Show toast
</CwButton>

Documentation Upgrade

Start here

The toast system is a small context-based API rather than a single component. Create the context once, mount a container once, and then call `toast.add(...)` anywhere below that tree.

How to think about it

Create the context high in the tree Call `createCwToastContext()` in a layout or root component so all child routes can access the toast API.
Render one container Mount `CwToastContainer` once, usually near the root layout, so notifications have a consistent stack location.
Trigger toasts from feature code Use `useCwToast()` in child components and call `toast.add(...)` after save, error, or background events.

System API

API	Type	Details
`createCwToastContext(maxItems?)`	`(maxItems?: number) => CwToastApi`	Creates and stores the toast context. Call this once near the app root.
`useCwToast()`	`() => CwToastApi`	Reads the toast API from context inside child components.
`<CwToastContainer />`	`component`	Renders the visible toast stack for the current context.
`toast.add({ tone, message, duration, dismissible })`	`(options) => string`	Pushes a toast and returns its generated id.
`toast.dismiss(id)`	`(id: string) => void`	Removes a toast explicitly.
`toast.items`	`readonly CwToastItem[]`	Current visible toast items in the context.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Create the toast system in a layout

Mount the context and container once at the top of the route tree.

// src/routes/+layout.svelte
<script lang="ts">
	import { createCwToastContext, CwToastContainer } from '@cropwatchdevelopment/cwui';

	createCwToastContext(5);
</script>

<slot />
<CwToastContainer />

Trigger success, warning, and sticky toasts

Use the toast API anywhere below the provider.

<script lang="ts">
	import { CwButton, useCwToast } from '@cropwatchdevelopment/cwui';

	const toast = useCwToast();
</script>

<CwButton onclick={() => toast.add({ tone: 'success', message: 'Saved!' })}>
	Show success
</CwButton>

<CwButton
	variant="secondary"
	onclick={() =>
		toast.add({
			tone: 'warning',
			message: 'Gateway has not checked in for 15 minutes.',
			duration: 10000,
			dismissible: true
		})
	}
>
	Show warning
</CwButton>