I have copied this Page from Andreas Sefzigs Homepage.

This is a Homepage Page.
The content is published.
It has the title "Toasts".
The summary is "How Homepage presents short-lived notices and tracks active issues.".

The canonical Web URL is `https://homepage.sefzig-net.workers.dev/docs/toasts`.
The Markdown URL is `https://homepage.sefzig-net.workers.dev/source/pages/docs/toasts/Content.md`.
The Prompt URL is `https://homepage.sefzig-net.workers.dev/source/pages/docs/toasts/Prompt.md`.

The Markdown:
"""
# Toasts

_A simple and unobtrusive mechanism to surface information._

Toasts provide the user with relevant information in the prominent yet unobtrusive bottom left position of the window (above the Homepage footer), keeping the UI free from clutter. 

Toasts can be triggered by the Homepage as well as all Apps it embeds.

## Use cases [v]

_How Toasts can add value to the user experience._

Here are some common use cases for Toasts:

| Use case | Text | Action | Example | [<] Use cases
| --- | --- | --- | --- |
| Guide the user to correct input       | Enter a description.       | –     | [Test](toast://show?severity=info&text=Enter a description.) |
| Confirm a completed action            | Image created and saved.   | –     | [Test](toast://show?severity=success&text=Image created and saved.) |
| Make a change reversible              | Removed from favorites.    | Undo  | [Test](toast://show?severity=success&text=Removed from favorites.&button=Undo) |
| Ask the user to complete setup        | Service credential needed. | Open  | [Test](toast://show?severity=warning&text=Service credential needed.&button=Open) |
| Help recover from a temporary failure | Service is unavailable.    | Retry | [Test](toast://show?severity=error&text=Service is unavailable.&button=Retry) |

See [this Excel](Toast-Tracker_01.xlsx) for all currently implemented Toasts.

## Emitters [v]

_Which systems can trigger a Toast, and how they do it._

Toasts are emitted by the Homepage or by an embedded App. Apps decide which events produce a Toast and when to emit it; Homepage validates App requests and owns Toast presentation. App-specific interaction delays remain inside the App.

### Homepage [v]

_Homepage can trigger a Toast via a function call._

Toasts inform the user of events within the Homepage system, for example if an API is unavailable.

Homepage triggers a Toast by calling its central `showToast` function. Example:

```js [<] Javascript: Request
showToast({
  source: "homepage:image-generator",
  severity: "success",
  title: "Image ready",
  message: "Your image was created and saved.",
  action: {
    id: "open-history",
    label: "Open",
    target: {
      type: "url",
      href: "#history"
    }
  },
  duration: 4_000,
  persistent: false,
  dedupeKey: "image-ready",
  contextKey: window.location.pathname
});
```

Detailed explanation of the request object:

| Key | Value | Mandatory | Purpose | [v] Request fields
| --- | --- | --- | --- |
| `source` | `homepage:image-generator` | ✗ | Identifies the Homepage subsystem that triggered the Toast. |
| `severity` | `info`, `success`, `warning`, or `error` | ✓ | Sets the Toast's importance, appearance, and default duration. |
| `title` | `Image ready` | ✗ | Optional short headline. |
| `message` | `Your image was created and saved.` | ✓ | Main text shown to the user. |
| `action` | An action object | ✗ | Adds one optional button. |
| `action.id` | `open-history` | ✓ when `action` is used | Identifies the action. |
| `action.label` | `Open` | ✓ when `action` is used | Sets the button text. |
| `action.target` | A target object | ✗ | Defines what happens when the button is clicked. |
| `action.target.type` | `url` or `app` | ✓ when `target` is used | Selects who handles the action. |
| `action.target.href` | `#history` | ✓ for a URL target | Gives Homepage the destination. |
| `duration` | `4000` milliseconds | ✗ | Overrides the default duration. |
| `persistent` | `true` or `false` | ✗ | Stays until actively dismissed. |
| `dedupeKey` | `image-ready` | ✗ | Groups repeated equivalent Toasts. |
| `contextKey` | The current route | ✗ | Tells Homepage where the Toast originated. |

Homepage represents an App-requested destination as `action.target`; the App Bridge request uses `action.href`.

### Apps [v]

_Apps can trigger a Toast via the Homepage bridge._

Toasts inform the user of events happening inside the App, for example if something was saved or not. The App owns event timing and sends a bridge request when its own state rules call for a Toast; Homepage does not infer App interaction state or add an activation delay.

Apps trigger a Toast via the [Homepage bridge](#tba):

```json [<] JSON: Request
{
  "type": "homepage/app/toast",
  "slug": "image-generator",
  "instanceId": "/app/image-generator#app:host",
  "severity": "warning",
  "title": "Almost there",
  "message": "Your service credential is missing.",
  "action": {
    "id": "open-settings",
    "label": "Open"
  },
  "dedupeKey": "credential-missing",
  "issueId": "credential-missing",
  "issueState": "active"
}
```

Detailed explanation of the request object:

| Key | Value | Mandatory | Purpose | [v] Request fields
| --- | --- | --- | --- |
| `type` | `homepage/app/toast` | ✓ | Identifies this as an App Toast request. |
| `slug` | App slug, such as `image-generator` | ✓ | Identifies the App sending the request. |
| `instanceId` | The exact ID of the current App instance | ✓ | Ensures that the request and any later action belong to the correct App instance. |
| `severity` | `info`, `success`, `warning`, or `error` | ✓ | Sets the Toast's severity, appearance, and default duration. |
| `title` | Short text | ✗ | Adds an optional headline above the message. |
| `message` | Text for the user | ✓ except resolve requests | Explains what happened or what the user should do. |
| `action` | An action object | ✗ | Adds one optional button to the Toast. |
| `action.id` | For example, `open-settings` | ✓ when `action` is used | Identifies the action sent back to the App. |
| `action.label` | For example, `Open` | ✓ when `action` is used | Sets the button text. |
| `action.href` | An approved URL or internal path | ✗ | Optional destination. If present, Homepage navigates to it. If absent, the App handles the action. |
| `duration` | A duration in milliseconds | ✗ | Overrides the default duration, within Homepage's allowed limits. |
| `persistent` | `true` or `false` | ✗ | Keeps the Toast visible until the user dismisses it. |
| `dedupeKey` | A stable identifier | ✗ | Groups repeated occurrences of the same event. |
| `issueId` | A stable issue identifier | ✓ in Warning and Error | Identifies the active problem behind a Warning or Error Toast. |
| `issueState` | `active` or `resolved` | ✓ in Warning and Error | Starts, updates, or resolves the associated issue. |

_Note_: Apps often use a Homepage-provided API. If the API does not work, the App will see that and trigger a Toast that is sent to the Homepage bridge and displayed by the Homepage. The API itself does not trigger a Toast.

## Elements [v]

_An overview and explanation of a Toast's UI elements._

Toasts have a very simple UI. This section explains its elements.

Trigger [this Toast](toast://show?severity=warning&title=Title&text=Text.&button=Action) to see all elements.

### Title [v]

_Description and specification of the Toast title._

Every Toast can display a Title, but it is optional. It is used to give the user context for the Toast's text.

List: Specifications [v]
  When present, the Title spans the upper line. 
  It is truncated with ellipsis if it exceeds the available width.
  The tone of the title is warm and slightly informal.
  It is used to add a human touch to info Toasts.

Add a title only if it adds to the user experience. Since it takes visual space, using a title must have a defensible reason.

### Text [v]

_Description and specification of the Toast text._

Every Toast must have a Text. It is used to give the user the information they need.

List: Specifications [v]
  The Text spans up to two lines. 
  It shares the available width with the optional Action. 
  The tone of the text is brief and informative.

Keep the text as short as possible. Try to start the sentence with a verb, use a direct, active, and supportive language.

### Action [v]

_Description and specification of the Action button._

Toasts can have an optional Action button. It is used to allow users to react with just one click.

List: Specifications [v]
  The Action button sits on the right of the Text. 
  Its label can use up to half of the available width, with compact button padding accounted for separately so an otherwise-fitting label is not truncated. 
  The ideal length of its text is 1 word.

Use Actions when something can be repeated to solve or was destroyed permanently – or to navigate the user.

List: Click behavior [v]
  For an App-originated Toast, an Action without an href is handled by the App. An Action with an href is handled by Homepage as navigation.

Use Actions without an `href` for App-specific operations. Use Actions with an `href` to navigate the user.

### Severity [v]

_Description and use cases of the severity indicator._

Every Toast has a severity indicator, a colored circle at its right side:

| Severity | Color | Meaning | Example | Reaction | [v] Specifications
| --- | --- | --- | --- | --- |
| Info | Gray | Neutral status or update | [Test](toast://show?severity=info&text=Copied text.) | Read and continue |
| Success | Green | An operation completed | [Test](toast://show?severity=success&text=Saved image.) | Continue |
| Warning | Yellow | Attention or recovery may be needed | [Test](toast://show?severity=warning&text=Need credential.) | Review or act |
| Error | Red | An operation failed or cannot continue | [Test](toast://show?severity=error&text=Missing input.) | Correct, retry, or seek help |

Toasts want to either inform the user about something that should interest them (Info, Success), make the user aware of an eventual issue (Warning), or guide them towards steps they have to take to resolve an issue (Error).

## Behavior [v]

_How Toasts behave, and when and how to influence that._

The behavior of Toasts depends on several factors. 

The common behavior is stacking to reduce clutter, automatic dismissal to reduce required reactions, and not interfering with the Homepage's navigation.

### Duration [v]

_Details on how long a Toast is visible._

Most Toasts disappear by themselves. The duration depends on the Severity:

| Severity | Duration | Reason | Example | [v] Durations by Severity
| ---     | --- | ---                                   | --- |
| Info    | 4s  | The user's awareness is not required   | [Test](toast://show?severity=info&text=Here for 4 seconds) |
| Success | 4s  | The user's awareness is not required   | [Test](toast://show?severity=success&text=Here for 4 seconds) |
| Warning | 6s  | The user should be aware of the issue | [Test](toast://show?severity=warning&text=Here for 6 seconds) |
| Error   | 10s | The user must be aware of the issue   | [Test](toast://show?severity=error&text=Here for 10 seconds) |

While the user hovers a Toast, the dismissal countdown is paused.
User can dismiss the Toast by clicking on it (except on the Action button).
The dismissal of a Toast is not communicated to the source (only Action buttons can do that).

Toasts can opt out of auto-dismissal by setting the key `persistent` to `true`.

```js [v] Javascript: Persistence
showToast({
  severity: "warning",
  message: "You really have to react.",
  persistent: true
});
```

A persistent Toast does not dismiss itself. The user must dismiss it manually, or trigger its Action if it has one.

### Stacking [v]

_How Toasts are stacked and queued._

At most three Toasts are visible at once. Additional Toasts wait in a queue and appear when a slot becomes available.

They appear stacked in the UI. Repeated equivalent Toasts are grouped and show a count instead of appearing twice.

Navigating within Homepage does not dismiss or reset them.

### Preferences [v]

_Errors and Warnings are deeply integrated._

Warning and Error Toasts may have a corresponding issue in Preferences → Warnings. Both emitters can resolve an issue. 

* _Homepage_ calls `resolveToastIssue(source, issueId)`. 
* _Apps_ send another `homepage/app/toast` request with the same `slug`, `instanceId`, `severity`, and `issueId`, but with issueState: `"resolved"`. 

Resolving the issue removes it from the Warnings Box, does not create a new Toast, and may omit message. 

### Integration [v]

_Some details on the Homepage integration._

The Toasts are tightly integrated with the Homepage.

The minimum width of a Toast is `150px`, their maximum width is `66vw`.
Action buttons use at most half of the available inside width.

Navigating away from an App does not clear related Toasts or unresolved issues.
Reloading or replacing the App iframe does clear that App instance’s Toast state.

Toasts do not steal focus.
In screen readers, they use polite status announcements by default.
Reduced-motion preferences remove animation.

## Appendix [v]

_Additional information._

Additional information for editors and admins.

### Management [v]

_How to manage all these Toasts._

The Excel file [Toast-Tracker_01.xlsx](Toast-Tracker_01.xlsx) contains a living list of all currently available Toasts.

### Testing [v]

_How to test the implementation._

Links triggering Toasts can be triggered with this link format: 

```md [<] Markdown
[Test](toast://show?severity=warning&title=Title&text=Text.&button=Action)
```

Here is a [Test](toast://show?severity=warning&title=Title&text=Text.&button=Action).
Toast links are unable to navigate the user.

### Technology [v]

_Technological details._

* The frontend library used to display toasts is [Radix UI](https://www.radix-ui.com/primitives/docs/components/toast) by WorkOS.
"""