@octanejs/hot-toast 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LICENSE.upstream

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Timo Lins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,77 @@
-# Temporary Holding Version
+# @octanejs/hot-toast
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[react-hot-toast](https://react-hot-toast.com/) ported to the
+[Octane](https://github.com/octanejs/octane) renderer. The package tracks the
+published `react-hot-toast@2.6.1` API and behavior: the callable `toast` API
+and its `success`, `error`, `loading`, `custom`, `promise`, `dismiss` and
+`remove` variants, `Toaster`, `ToastBar`, `ToastIcon`, the icon components,
+multiple toasters, pausing on hover, and the headless `useToaster` hook.
+
+## Install
+
+```bash
+npm install @octanejs/hot-toast
+pnpm add @octanejs/hot-toast
+```
+
+## Usage
+
+Mount one toaster near the root of the application, then call `toast` from any
+event handler or module:
+
+```tsrx
+import toast, { Toaster } from '@octanejs/hot-toast';
+
+export function App() {
+	return (
+		<main>
+			<button onClick={() => toast.success('Saved')}>Save</button>
+			<Toaster position="top-right" />
+		</main>
+	);
+}
+```
+
+`toast.promise` follows a promise through loading, success and error:
+
+```ts
+toast.promise(saveSettings(settings), {
+	loading: 'Saving…',
+	success: 'Settings saved',
+	error: (error) => `Could not save: ${error.message}`,
+});
+```
+
+Render your own toast UI with the `Toaster` render prop and `ToastBar`, or drop
+the bundled UI entirely and build on the headless entry:
+
+```ts
+import { toast, useToaster } from '@octanejs/hot-toast/headless';
+```
+
+## Differences from react-hot-toast
+
+- The `Toaster` pauses its timers on the native `mouseenter` and `mouseleave`
+  events of its container. A real pointer behaves as in React. In tests, fire
+  those events on the `[data-rht-toaster]` container rather than on a toast.
+- The port never calls goober's `setup()`, so an application that also uses
+  goober keeps its own pragma.
+- The root and `/headless` entries share one toast store. Upstream bundles
+  them separately, each with its own store.
+- Renderables, styles and refs use Octane's types (`ElementDescriptor`,
+  `CSSProperties`, refs as props).
+
+Class names and the injected stylesheet are the ones `react-hot-toast@2.6.1`
+ships, so CSS that targets them keeps working.
+
+## Server rendering
+
+`Toaster` renders on the server without browser globals, and toasts already in
+the store render with it. goober collects the generated rules on the server;
+inline them with `extractCss()` from `goober`. On the client, `hydrateRoot`
+adopts the server markup.
+
+## Provenance
+
+See [`UPSTREAM.md`](./UPSTREAM.md). Ported code keeps the upstream MIT license
+in `LICENSE.upstream`.

package/UPSTREAM.md

@@ -0,0 +1,91 @@
+# Upstream
+
+- Package: `react-hot-toast@2.6.1`
+- Repository: https://github.com/timolins/react-hot-toast
+- Release tag: `v2.6.1`, which resolves to commit
+  `e725d38e0faec05f7b8fb10644b616ef978d2f4d`.
+- npm tarball: `https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.1.tgz`,
+  integrity `sha512-gjFsf05dxcku0FkyMtFH+XmYFdA2odXfBVknEr/IZ+XpUjwsgvtY2616sOpUynK+l9ykQDRNpaJ1hYfuximUiA==`,
+  SHA-256 `336bae521480e2f77425cf7c993ffbb58ca0b61407df9f99c63ca954b8099360`, kept as
+  `upstream-artifact/react-hot-toast-2.6.1.tgz`.
+- License: MIT. The exact upstream text ships as `LICENSE.upstream`.
+
+## Pinning the commit
+
+npm publishes no `gitHead` and no provenance attestation for this release, so the
+repository preflight cannot derive the commit from the registry. The pin comes from the
+`v2.6.1` tag instead and is proven by content: the tag commit's `package.json` declares
+`react-hot-toast@2.6.1`, and every file in the tarball's `src/`, plus `LICENSE`, is
+byte-identical to the commit's. `audit/upstream.lock.json` was written in pin mode
+(`pnpm react-port:materialize lock --pin react-hot-toast@2.6.1 --repo
+timolins/react-hot-toast --commit e725d38e…`).
+
+## Source boundary
+
+The lock pins `LICENSE`, `package.json`, `jest.config.js`, `tsconfig.json`, `src/` and
+`test/`. `upstream/` holds those files byte for byte as unpublished evidence, verified
+offline with `pnpm react-port:materialize run --check --package-dir packages/hot-toast`.
+`tests/upstream/` is regenerated from them using the lock's mechanical rewrites (React
+imports to `octane`, `@testing-library/react` to `@octanejs/testing-library`, `../src`
+to the port, and Jest `done` callbacks to plain functions), plus the one divergence patch
+in `audit/upstream-patches/`.
+
+`src/` mirrors upstream's layout. The core (`types`, `utils`, `store`, `toast`,
+`use-toaster`) is ported nearly unchanged with Octane hooks. The components are
+re-authored in `.tsrx`. goober is reused unchanged as a dependency for `css` and
+`keyframes`. Its `styled()` builds React elements through a global pragma, so
+`src/components/styled.tsrx` authors those elements instead. `src/goober.js` re-exports
+goober's runtime with its own declaration file, because goober 2.1.19's `goober.d.ts`
+fails TypeScript's library check in ESM projects (cristianbote/goober#606).
+
+The published build collapses every whitespace run in the source's template literals
+(`esbuild-minify-templates`), and goober names classes by hashing that text. The port's
+templates carry the collapsed text, so its class names and stylesheet match the
+published package. This was checked against every template literal in the tarball's
+`dist/index.mjs`.
+
+## Export crosswalk
+
+| Upstream export | Disposition |
+| --- | --- |
+| `toast` (default and named) with `success`, `error`, `loading`, `custom`, `promise`, `dismiss`, `dismissAll`, `remove`, `removeAll` | ported (`src/core/toast.ts`) |
+| `Toaster` | ported (`src/components/toaster.tsrx`) |
+| `ToastBar` | ported (`src/components/toast-bar.tsrx`) |
+| `ToastIcon` | ported (`src/components/toast-icon.tsrx`) |
+| `CheckmarkIcon`, `ErrorIcon`, `LoaderIcon` | ported (`src/components/{checkmark,error,loader}.ts`) |
+| `useToaster` | ported (`src/core/use-toaster.ts`) |
+| `useToasterStore` | ported (`useStore` in `src/core/store.ts`) |
+| `resolveValue` | ported (`src/core/types.ts`) |
+| types `DefaultToastOptions`, `IconTheme`, `Renderable`, `Toast`, `ToasterProps`, `ToastOptions`, `ToastPosition`, `ToastType`, `ValueFunction`, `ValueOrFunction` | ported with Octane renderable and style types |
+| `./headless` entry: `toast`, `resolveValue`, `useToaster`, `useToasterStore` and the types | ported (`src/headless/index.ts`) |
+
+## Divergences
+
+Each is declared in `audit/react-parity.json` and pinned by a test.
+
+- `native-mouseenter`: the Toaster's pause handlers are native `mouseenter`/`mouseleave`
+  listeners on its container. React synthesizes both from `mouseover`/`mouseout`, so its
+  `fireEvent.mouseEnter(toast)` reaches the container. The adapted `pause toast` case fires
+  on the container instead.
+- `goober-pragma`: upstream calls goober's `setup(React.createElement)` at load. The port
+  never calls `setup()`.
+- `shared-headless-store`: upstream bundles the root and `/headless` entries separately, each
+  with its own store. The port publishes its source, so both entries share one store.
+- Types: renderables, styles and refs use Octane's `ElementDescriptor`, `OctaneNode`,
+  `CSSProperties` and ref-as-prop types. The icon components are typed as Octane components
+  over `div` props rather than goober's `StyledVNode`.
+
+## Behavioral oracle
+
+- `hot-toast-pristine-upstream`: all 14 upstream Jest registrations run byte for byte against
+  the pinned React source (`jest.pristine.config.cjs`; Babel strips the TypeScript that
+  upstream's ts-jest does).
+- `hot-toast-adapted-full`: the same 14 registrations run against the port.
+- `hot-toast-differential`: one fixture runs through the port and through the published
+  `react-hot-toast@2.6.1` on React, comparing HTML after every step. It covers every toast
+  type, updates, the promise lifecycle, dismissal, removal, both render props, the icons and
+  headless `useToaster`.
+
+Octane-only conformance, hydration and SSR tests live in `tests/conformance` and
+`tests/ssr`. The SSR test compares the server HTML with React's `renderToString` of the
+published package. Upstream ships no type tests.

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@octanejs/hot-toast",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "description": "react-hot-toast for Octane: the toast store, Toaster, ToastBar, icons, and headless useToaster hook, ported from react-hot-toast 2.6.1.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/hot-toast"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md",
+    "UPSTREAM.md",
+    "LICENSE",
+    "LICENSE.upstream"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./headless": "./src/headless/index.ts",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "goober": "2.1.19"
+  },
+  "peerDependencies": {
+    "octane": "^0.16.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.29.7",
+    "@babel/preset-react": "7.29.7",
+    "@babel/preset-typescript": "7.29.7",
+    "@octanejs/testing-library": "0.1.66",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@tsrx/react": "^0.4.5",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "babel-jest": "30.4.1",
+    "esbuild": "^0.28.1",
+    "jest": "30.4.2",
+    "jest-environment-jsdom": "30.4.1",
+    "octane": "0.16.4",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-hot-toast": "2.6.1",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "test": "vitest run --root ../.. --project hot-toast --project hot-toast-adapted --project hot-toast-ssr",
+    "test:pristine": "CI=true jest --config jest.pristine.config.cjs --runInBand",
+    "typecheck": "octane-tsc -p tsconfig.json",
+    "verify:upstream": "node ../../scripts/react-parity/verify-provenance.mjs"
+  }
 }

package/src/components/checkmark.ts

@@ -0,0 +1,18 @@
+// Ported from react-hot-toast@2.6.1 src/components/checkmark.tsx
+// (https://github.com/timolins/react-hot-toast/tree/v2.6.1).
+//
+// Octane adaptations: goober's styled('div') becomes styledDiv, and templates
+// carry the published build's collapsed whitespace (see styled.tsrx).
+import { keyframes } from '../goober.js';
+import { styledDiv } from './styled.tsrx';
+
+const circleAnimation = keyframes` from { transform: scale(0) rotate(45deg); opacity: 0; } to { transform: scale(1) rotate(45deg); opacity: 1; }`;
+
+const checkmarkAnimation = keyframes` 0% { height: 0; width: 0; opacity: 0; } 40% { height: 0; width: 6px; opacity: 1; } 100% { opacity: 1; height: 10px; }`;
+
+export interface CheckmarkTheme {
+	primary?: string;
+	secondary?: string;
+}
+
+export const CheckmarkIcon = styledDiv<CheckmarkTheme>` width: 20px; opacity: 0; height: 20px; border-radius: 10px; background: ${(p) => p.primary || '#61d345'}; position: relative; transform: rotate(45deg); animation: ${circleAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: 100ms; &:after { content: ''; box-sizing: border-box; animation: ${checkmarkAnimation} 0.2s ease-out forwards; opacity: 0; animation-delay: 200ms; position: absolute; border-right: 2px solid; border-bottom: 2px solid; border-color: ${(p) => p.secondary || '#fff'}; bottom: 6px; left: 6px; height: 10px; width: 6px; } `;

package/src/components/error.ts

@@ -0,0 +1,20 @@
+// Ported from react-hot-toast@2.6.1 src/components/error.tsx
+// (https://github.com/timolins/react-hot-toast/tree/v2.6.1).
+//
+// Octane adaptations: goober's styled('div') becomes styledDiv, and templates
+// carry the published build's collapsed whitespace (see styled.tsrx).
+import { keyframes } from '../goober.js';
+import { styledDiv } from './styled.tsrx';
+
+const circleAnimation = keyframes` from { transform: scale(0) rotate(45deg); opacity: 0; } to { transform: scale(1) rotate(45deg); opacity: 1; }`;
+
+const firstLineAnimation = keyframes` from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; }`;
+
+const secondLineAnimation = keyframes` from { transform: scale(0) rotate(90deg); opacity: 0; } to { transform: scale(1) rotate(90deg); opacity: 1; }`;
+
+export interface ErrorTheme {
+	primary?: string;
+	secondary?: string;
+}
+
+export const ErrorIcon = styledDiv<ErrorTheme>` width: 20px; opacity: 0; height: 20px; border-radius: 10px; background: ${(p) => p.primary || '#ff4b4b'}; position: relative; transform: rotate(45deg); animation: ${circleAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: 100ms; &:after, &:before { content: ''; animation: ${firstLineAnimation} 0.15s ease-out forwards; animation-delay: 150ms; position: absolute; border-radius: 3px; opacity: 0; background: ${(p) => p.secondary || '#fff'}; bottom: 9px; left: 4px; height: 2px; width: 12px; } &:before { animation: ${secondLineAnimation} 0.15s ease-out forwards; animation-delay: 180ms; transform: rotate(90deg); } `;

package/src/components/loader.ts

@@ -0,0 +1,16 @@
+// Ported from react-hot-toast@2.6.1 src/components/loader.tsx
+// (https://github.com/timolins/react-hot-toast/tree/v2.6.1).
+//
+// Octane adaptations: goober's styled('div') becomes styledDiv, and templates
+// carry the published build's collapsed whitespace (see styled.tsrx).
+import { keyframes } from '../goober.js';
+import { styledDiv } from './styled.tsrx';
+
+const rotate = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `;
+
+export interface LoaderTheme {
+	primary?: string;
+	secondary?: string;
+}
+
+export const LoaderIcon = styledDiv<LoaderTheme>` width: 12px; height: 12px; box-sizing: border-box; border: 2px solid; border-radius: 100%; border-color: ${(p) => p.secondary || '#e0e0e0'}; border-right-color: ${(p) => p.primary || '#616161'}; animation: ${rotate} 1s linear infinite; `;

package/src/components/styled.tsrx

@@ -0,0 +1,40 @@
+// Octane stand-in for the goober `styled('div')` components react-hot-toast@2.6.1
+// builds after `setup(React.createElement)`. Element construction is authored
+// here instead of going through goober's global pragma, so the port never calls
+// goober's `setup()` and leaves any application pragma in place. goober's own
+// `css` still compiles and injects every rule.
+//
+// goober names a class by hashing its template text, and react-hot-toast's
+// published build (esbuild-minify-templates) collapses every whitespace run in
+// its template literals. The port's templates carry that collapsed text, so its
+// class names and injected stylesheet are the ones react-hot-toast@2.6.1 ships.
+import { css } from '../goober.js';
+import type { ComponentProps } from 'octane';
+
+type Interpolation<T> = string | number | ((props: StyledDivProps<T>) => string | number);
+
+// goober types className as a string, so the clsx-style forms Octane's hosts
+// accept are not part of this contract.
+export type StyledDivProps<T = {}> = Omit<ComponentProps<'div'>, 'className'> & {
+	className?: string;
+} & T;
+
+// As goober's styled: interpolations read the element's props, the generated
+// class comes before a caller's className (and its rules are prepended when that
+// className already carries a goober class), and every prop reaches the div.
+export function styledDiv<T extends object = {}>(
+	template: TemplateStringsArray,
+	...interpolations: Interpolation<T>[]
+) {
+	return function Styled(props: StyledDivProps<T>) @{
+		const { className: previous, children, ...rest } = props;
+		const generated = css.call(
+			{ p: props, o: /go\d/.test(previous ?? '') },
+			template,
+			...(interpolations as (string | number)[]),
+		);
+		<div {...rest} className={previous ? generated + ' ' + previous : generated}>
+			{children}
+		</div>
+	};
+}

package/src/components/toast-bar.tsrx

@@ -0,0 +1,81 @@
+// Ported from react-hot-toast@2.6.1 src/components/toast-bar.tsx
+// (https://github.com/timolins/react-hot-toast/tree/v2.6.1).
+//
+// Octane adaptations: memo and the style types come from octane, goober's
+// styled('div') becomes styledDiv, templates carry the published build's
+// collapsed whitespace (see styled.tsrx), and the render-prop branch is an @if
+// block.
+import { keyframes } from '../goober.js';
+import { type CSSProperties, type FC, memo } from 'octane';
+import { type Renderable, type Toast, type ToastPosition, resolveValue } from '../core/types';
+import { prefersReducedMotion } from '../core/utils';
+import { styledDiv } from './styled.tsrx';
+import { ToastIcon } from './toast-icon.tsrx';
+
+const enterAnimation = (factor: number) =>
+	` 0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;} 100% {transform: translate3d(0,0,0) scale(1); opacity:1;} `;
+
+const exitAnimation = (factor: number) =>
+	` 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;} 100% {transform: translate3d(0,${factor * -150}%,-1px) scale(.6); opacity:0;} `;
+
+const fadeInAnimation = `0%{opacity:0;} 100%{opacity:1;}`;
+const fadeOutAnimation = `0%{opacity:1;} 100%{opacity:0;}`;
+
+// Use :where() for zero specificity - allows Tailwind to override easily
+const ToastBarBase = styledDiv` :where(&) { display: flex; align-items: center; background: #fff; color: #363636; line-height: 1.3; will-change: transform; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05); max-width: 350px; pointer-events: auto; padding: 8px 10px; border-radius: 8px; } `;
+
+const Message = styledDiv` display: flex; justify-content: center; margin: 4px 10px; color: inherit; flex: 1 1 auto; white-space: pre-line; `;
+
+interface ToastBarProps {
+	toast: Toast;
+	position?: ToastPosition;
+	style?: CSSProperties;
+	children?: (components: { icon: Renderable; message: Renderable }) => Renderable;
+}
+
+const getAnimationStyle = (position: ToastPosition, visible: boolean): CSSProperties => {
+	const top = position.includes('top');
+	const factor = top ? 1 : -1;
+
+	const [enter, exit] = prefersReducedMotion()
+		? [fadeInAnimation, fadeOutAnimation]
+		: [enterAnimation(factor), exitAnimation(factor)];
+
+	return {
+		animation: visible
+			? `${keyframes(enter)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`
+			: `${keyframes(exit)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
+	};
+};
+
+function ToastBarBody(props: ToastBarProps) @{
+	const { toast, position, style, children } = props;
+	const animationStyle: CSSProperties = toast.height
+		? getAnimationStyle(toast.position || position || 'top-center', toast.visible)
+		: { opacity: 0 };
+
+	const icon = <ToastIcon toast={toast} />;
+	const message = <Message {...toast.ariaProps}>{resolveValue(toast.message, toast)}</Message>;
+
+	<ToastBarBase
+		className={toast.className}
+		style={{
+			...animationStyle,
+			...style,
+			...toast.style,
+		}}
+	>
+		@if (typeof children === 'function') {
+			<>{children({ icon, message })}</>
+		} @else {
+			<>
+				{icon}
+				{message}
+			</>
+		}
+	</ToastBarBase>
+}
+
+// TypeScript 5.9 resolves `FC = memo(function … )` to memo's ComponentBody
+// overload, so the body is a declaration.
+export const ToastBar: FC<ToastBarProps> = memo(ToastBarBody);

package/src/components/toast-icon.tsrx

@@ -0,0 +1,54 @@
+// Ported from react-hot-toast@2.6.1 src/components/toast-icon.tsx
+// (https://github.com/timolins/react-hot-toast/tree/v2.6.1).
+//
+// Octane adaptations: goober's styled('div') becomes styledDiv, templates carry
+// the published build's collapsed whitespace (see styled.tsrx), and the
+// conditional status icon is an @if block.
+import { keyframes } from '../goober.js';
+import type { Toast } from '../core/types';
+import { type CheckmarkTheme, CheckmarkIcon } from './checkmark';
+import { type ErrorTheme, ErrorIcon } from './error';
+import { type LoaderTheme, LoaderIcon } from './loader';
+import { styledDiv } from './styled.tsrx';
+
+const StatusWrapper = styledDiv` position: absolute; `;
+
+const IndicatorWrapper = styledDiv` position: relative; display: flex; justify-content: center; align-items: center; min-width: 20px; min-height: 20px; `;
+
+const enter = keyframes` from { transform: scale(0.6); opacity: 0.4; } to { transform: scale(1); opacity: 1; }`;
+
+export const AnimatedIconWrapper = styledDiv` position: relative; transform: scale(0.6); opacity: 0.4; min-width: 20px; animation: ${enter} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; `;
+
+export type IconThemes = Partial<{
+	success: CheckmarkTheme;
+	error: ErrorTheme;
+	loading: LoaderTheme;
+}>;
+
+export function ToastIcon(props: { toast: Toast }) @{
+	const { icon, type, iconTheme } = props.toast;
+	if (icon !== undefined) {
+		if (typeof icon === 'string') {
+			return <AnimatedIconWrapper>{icon as string}</AnimatedIconWrapper>;
+		} else {
+			return icon;
+		}
+	}
+
+	if (type === 'blank') {
+		return null;
+	}
+
+	<IndicatorWrapper>
+		<LoaderIcon {...iconTheme} />
+		@if (type !== 'loading') {
+			<StatusWrapper>
+				@if (type === 'error') {
+					<ErrorIcon {...iconTheme} />
+				} @else {
+					<CheckmarkIcon {...iconTheme} />
+				}
+			</StatusWrapper>
+		}
+	</IndicatorWrapper>
+}

package/src/components/toaster.tsrx

@@ -0,0 +1,135 @@
+// Ported from react-hot-toast@2.6.1 src/components/toaster.tsx
+// (https://github.com/timolins/react-hot-toast/tree/v2.6.1).
+//
+// Octane adaptations: hooks and style types come from octane, the toast list is
+// a keyed @for block, and the template carries the published build's collapsed
+// whitespace (see styled.tsrx).
+//
+// OCTANE DIVERGENCE[goober-pragma][conformance:hot-toast-goober-pragma]: upstream
+// calls goober's setup(React.createElement) here. The port renders its own
+// elements (see styled.tsrx) and never calls setup().
+import { css } from '../goober.js';
+import { type CSSProperties, useCallback } from 'octane';
+import {
+	type ToasterProps,
+	type ToastPosition,
+	type ToastWrapperProps,
+	resolveValue,
+} from '../core/types';
+import { useToaster } from '../core/use-toaster';
+import { prefersReducedMotion } from '../core/utils';
+import { ToastBar } from './toast-bar.tsrx';
+
+function ToastWrapper(props: ToastWrapperProps) @{
+	const { id, className, style, onHeightUpdate, children } = props;
+	const ref = useCallback(
+		(el: HTMLElement | null) => {
+			if (el) {
+				const updateHeight = () => {
+					const height = el.getBoundingClientRect().height;
+					onHeightUpdate(id, height);
+				};
+				updateHeight();
+				new MutationObserver(updateHeight).observe(el, {
+					subtree: true,
+					childList: true,
+					characterData: true,
+				});
+			}
+		},
+		[id, onHeightUpdate],
+	);
+
+	<div ref={ref} className={className} style={style}>
+		{children}
+	</div>
+}
+
+const getPositionStyle = (position: ToastPosition, offset: number): CSSProperties => {
+	const top = position.includes('top');
+	const verticalStyle: CSSProperties = top ? { top: 0 } : { bottom: 0 };
+	const horizontalStyle: CSSProperties = position.includes('center')
+		? {
+				justifyContent: 'center',
+			}
+		: position.includes('right')
+			? {
+					justifyContent: 'flex-end',
+				}
+			: {};
+	return {
+		left: 0,
+		right: 0,
+		display: 'flex',
+		position: 'absolute',
+		transition: prefersReducedMotion() ? undefined : `all 230ms cubic-bezier(.21,1.02,.73,1)`,
+		transform: `translateY(${offset * (top ? 1 : -1)}px)`,
+		...verticalStyle,
+		...horizontalStyle,
+	};
+};
+
+// Prettier formats `css` templates; goober hashes the published text verbatim.
+// prettier-ignore
+const activeClass = css` z-index: 9999; > * { pointer-events: auto; } `;
+
+const DEFAULT_OFFSET = 16;
+
+export function Toaster(props: ToasterProps) @{
+	const {
+		reverseOrder,
+		position = 'top-center',
+		toastOptions,
+		gutter,
+		children,
+		toasterId,
+		containerStyle,
+		containerClassName,
+	} = props;
+	const { toasts, handlers } = useToaster(toastOptions, toasterId);
+
+	// OCTANE DIVERGENCE[native-mouseenter][conformance:hot-toast-native-pause]: the
+	// pause handlers are native mouseenter/mouseleave listeners, which a pointer
+	// entering any toast dispatches on this container.
+	<div
+		data-rht-toaster={toasterId || ''}
+		style={{
+			position: 'fixed',
+			zIndex: 9999,
+			top: DEFAULT_OFFSET,
+			left: DEFAULT_OFFSET,
+			right: DEFAULT_OFFSET,
+			bottom: DEFAULT_OFFSET,
+			pointerEvents: 'none',
+			...containerStyle,
+		}}
+		className={containerClassName}
+		onMouseEnter={handlers.startPause}
+		onMouseLeave={handlers.endPause}
+	>
+		@for (const t of toasts; key t.id) {
+			const toastPosition = t.position || position;
+			const offset = handlers.calculateOffset(t, {
+				reverseOrder,
+				gutter,
+				defaultPosition: position,
+			});
+			const positionStyle = getPositionStyle(toastPosition, offset);
+
+			<ToastWrapper
+				id={t.id}
+				onHeightUpdate={handlers.updateHeight}
+				className={t.visible ? activeClass : ''}
+				style={positionStyle}
+			>
+				@if (t.type === 'custom') {
+					<>{resolveValue(t.message, t)}</>
+				} @else if (children) {
+					<>{children(t)}</>
+				} @else {
+					<ToastBar toast={t} position={toastPosition} />
+				}
+			</ToastWrapper>
+		}
+	</div>
+}