@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/dist/toast/toast.css

@@ -0,0 +1,207 @@
+@layer components {
+  .viewport_QXnIWW {
+    bottom: var(--space-4);
+    right: var(--space-4);
+    z-index: var(--z-toast);
+    width: 360px;
+    max-width: calc(100vw - var(--space-8));
+    pointer-events: none;
+    outline: none;
+    flex-direction: column;
+    list-style: none;
+    display: flex;
+    position: fixed;
+  }
+
+  .viewport-list_QXnIWW {
+    gap: var(--space-2);
+  }
+
+  .viewport-stacked_QXnIWW {
+    gap: 0;
+  }
+
+  .toast_QXnIWW {
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-popover);
+    pointer-events: auto;
+    cursor: default;
+    width: 100%;
+    display: flex;
+  }
+
+  @supports (backdrop-filter: blur(12px)) {
+    .toast_QXnIWW {
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
+    }
+  }
+
+  .viewport-list_QXnIWW .toast_QXnIWW {
+    transform-origin: 100% 100%;
+    opacity: 1;
+    transition: opacity .3s var(--easing-ease-out),
+      transform .3s var(--easing-spring);
+    transform: translateX(0);
+
+    @starting-style {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--space-4)));
+    }
+  }
+
+  .viewport-list_QXnIWW .toast_QXnIWW[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition: opacity .2s var(--easing-ease-in),
+      transform .2s var(--easing-ease-in);
+  }
+
+  .viewport-stacked_QXnIWW {
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+    box-sizing: content-box;
+    clip-path: inset(0 0 0 0 round var(--radius-xl));
+    transition: clip-path .2s var(--easing-ease-out),
+      height .2s var(--easing-ease-out);
+    padding-top: 20px;
+  }
+
+  .viewport-stacked_QXnIWW[data-expanded] {
+    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+  }
+
+  .viewport-stacked_QXnIWW[data-expanded]:after {
+    content: "";
+    pointer-events: auto;
+    z-index: 0;
+    position: absolute;
+    inset: -9999px 0 0;
+  }
+
+  .toast-stacked_QXnIWW {
+    z-index: calc(50 - var(--toast-index));
+    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * .04));
+    transform-origin: bottom;
+    opacity: calc(1 - var(--toast-index) * .15);
+    transition: transform .2s var(--easing-ease-out),
+      opacity .2s var(--easing-ease-out);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .viewport-stacked_QXnIWW[data-expanded] .toast-stacked_QXnIWW {
+    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .viewport-stacked_QXnIWW .toast-stacked_QXnIWW {
+    @starting-style {
+      opacity: 0;
+      transform: translateY(16px) scale(calc(1 - var(--toast-index) * .04));
+    }
+  }
+
+  .viewport-stacked_QXnIWW .toast-stacked_QXnIWW[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition: opacity .15s var(--easing-ease-in),
+      transform .15s var(--easing-ease-in);
+  }
+
+  .toast-success_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));
+  }
+
+  .toast-error_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));
+  }
+
+  .toast-warning_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));
+  }
+
+  .toast-info_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));
+  }
+
+  .icon_QXnIWW {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 1px;
+  }
+
+  .icon-success_QXnIWW {
+    color: var(--color-success-solid);
+  }
+
+  .icon-warning_QXnIWW {
+    color: var(--color-warning-solid);
+  }
+
+  .icon-error_QXnIWW {
+    color: var(--color-error-solid);
+  }
+
+  .icon-info_QXnIWW {
+    color: var(--color-info-solid);
+  }
+
+  .content_QXnIWW {
+    gap: var(--space-0-5);
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .title_QXnIWW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary);
+    line-height: var(--line-height-normal);
+  }
+
+  .description_QXnIWW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  .close_QXnIWW {
+    border-radius: var(--radius-sm);
+    width: 20px;
+    height: 20px;
+    color: var(--color-tertiary);
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard);
+    background: none;
+    border: none;
+    outline: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1px;
+    display: flex;
+  }
+
+  .close_QXnIWW:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
+  }
+
+  .close_QXnIWW:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+}

package/dist/toast/toast.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+import styles from "./toast.module.css";
+
+//#region src/toast/toast.d.ts
+type ToastType = "default" | "success" | "warning" | "error" | "info";
+declare const useToastManager: typeof Toast.useToastManager;
+interface ToastViewportProps {
+  /**
+   * "stacked" — toasts fan out behind each other like Sonner.
+   *   Collapsed: only the front toast is fully visible; others peek as
+   *   scaled-down cards behind it. Hover/focus expands the full stack.
+   *
+   * "list" — toasts stack vertically, each fully visible (default behaviour).
+   */
+  variant?: "stacked" | "list";
+  /**
+   * Maximum number of toasts shown at once.
+   * Defaults to 5 for "stacked", 3 for "list".
+   * Oldest toasts are removed when the limit is exceeded.
+   */
+  limit?: number;
+}
+interface ToastProviderProps {
+  children: ReactNode;
+  variant?: ToastViewportProps["variant"];
+  limit?: number;
+  timeout?: number;
+}
+declare function ToastProvider({
+  children,
+  variant,
+  limit,
+  timeout
+}: ToastProviderProps): react_jsx_runtime0.JSX.Element;
+declare function ToastViewport({
+  variant,
+  limit: _limit
+}: ToastViewportProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ToastProvider, ToastProviderProps, ToastType, ToastViewport, ToastViewportProps, styles, useToastManager };
+//# sourceMappingURL=toast.d.ts.map

package/dist/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","names":[],"sources":["../../src/toast/toast.tsx"],"mappings":";;;;;;KAIY,SAAA;AAAA,cAGC,eAAA,SAAe,KAAA,CAAA,eAAA;AAAA,UAgDX,kBAAA;EAnDL;;;;;AAGZ;;EAwDE,OAAA;EAxD0B;;AAgD5B;;;EAcE,KAAA;AAAA;AAAA,UAQe,kBAAA;EACf,QAAA,EAAU,SAAA;EACV,OAAA,GAAU,kBAAA;EACV,KAAA;EACA,OAAA;AAAA;AAAA,iBAYc,aAAA,CAAA;EAAgB,QAAA;EAAU,OAAA;EAAkB,KAAA;EAAO;AAAA,GAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAShF,aAAA,CAAA;EAAgB,OAAA;EAAkB,KAAA,EAAO;AAAA,GAAU,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/toast/toast.js

@@ -0,0 +1,156 @@
+import toast_module_default from "./toast.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/toast/toast.tsx
+const useToastManager = Toast.useToastManager;
+function XIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "10",
+		height: "10",
+		viewBox: "0 0 10 10",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M1 1L9 9M9 1L1 9",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})
+	});
+}
+function StatusIcon({ type }) {
+	if (type === "success") return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		className: `${toast_module_default.icon} ${toast_module_default["icon-success"]}`,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M4.5 8L6.5 10.5L11 5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+	if (type === "error") return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		className: `${toast_module_default.icon} ${toast_module_default["icon-error"]}`,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	});
+	if (type === "warning") return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		className: `${toast_module_default.icon} ${toast_module_default["icon-warning"]}`,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 2L14.5 13H1.5L8 2Z",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 6.5V9",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "11",
+				r: "0.75",
+				fill: "currentColor"
+			})
+		]
+	});
+	if (type === "info") return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		className: `${toast_module_default.icon} ${toast_module_default["icon-info"]}`,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "7",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 7V11",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "5",
+				r: "0.75",
+				fill: "currentColor"
+			})
+		]
+	});
+	return null;
+}
+const DEFAULT_LIMIT = {
+	stacked: 5,
+	list: 3
+};
+/**
+* Drop-in provider that wires limit defaults to the chosen variant.
+* Use this instead of base-ui's Toast.Provider when using ToastViewport.
+*/
+const MAX_LIMIT = {
+	stacked: 10,
+	list: 5
+};
+function ToastProvider({ children, variant = "list", limit, timeout }) {
+	const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		limit: resolvedLimit,
+		timeout,
+		children
+	});
+}
+function ToastViewport({ variant = "list", limit: _limit }) {
+	const manager = useToastManager();
+	const isStacked = variant === "stacked";
+	return /* @__PURE__ */ jsx(Toast.Viewport, {
+		className: `${toast_module_default.viewport} ${isStacked ? toast_module_default["viewport-stacked"] : toast_module_default["viewport-list"]}`,
+		children: manager.toasts.map((toast) => /* @__PURE__ */ jsxs(Toast.Root, {
+			toast,
+			className: `${toast_module_default.toast} ${isStacked ? toast_module_default["toast-stacked"] : ""} ${toast_module_default[`toast-${toast.type ?? "default"}`]}`,
+			swipeDirection: isStacked ? ["right", "down"] : ["right", "down"],
+			children: [
+				toast.type && toast.type !== "default" && /* @__PURE__ */ jsx(StatusIcon, { type: toast.type }),
+				/* @__PURE__ */ jsxs("div", {
+					className: toast_module_default.content,
+					children: [toast.title && /* @__PURE__ */ jsx(Toast.Title, { className: toast_module_default.title }), toast.description && /* @__PURE__ */ jsx(Toast.Description, { className: toast_module_default.description })]
+				}),
+				/* @__PURE__ */ jsx(Toast.Close, {
+					className: toast_module_default.close,
+					"aria-label": "Dismiss",
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})
+			]
+		}, toast.id))
+	});
+}
+//#endregion
+export { ToastProvider, ToastViewport, useToastManager };
+
+//# sourceMappingURL=toast.js.map

package/dist/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":["BaseToast","styles"],"sources":["../../src/toast/toast.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport styles from \"./toast.module.css\";\n\nexport type ToastType = \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n// Re-export for consumer convenience\nexport const useToastManager = BaseToast.useToastManager;\n\nfunction XIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n      <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nfunction StatusIcon({ type }: { type: string }) {\n  if (type === \"success\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-success\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M4.5 8L6.5 10.5L11 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    );\n  }\n  if (type === \"error\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-error\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n      </svg>\n    );\n  }\n  if (type === \"warning\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-warning\"]}`}>\n        <path d=\"M8 2L14.5 13H1.5L8 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\n        <path d=\"M8 6.5V9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n  if (type === \"info\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-info\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M8 7V11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"8\" cy=\"5\" r=\"0.75\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n  return null;\n}\n\nexport interface ToastViewportProps {\n  /**\n   * \"stacked\" — toasts fan out behind each other like Sonner.\n   *   Collapsed: only the front toast is fully visible; others peek as\n   *   scaled-down cards behind it. Hover/focus expands the full stack.\n   *\n   * \"list\" — toasts stack vertically, each fully visible (default behaviour).\n   */\n  variant?: \"stacked\" | \"list\";\n  /**\n   * Maximum number of toasts shown at once.\n   * Defaults to 5 for \"stacked\", 3 for \"list\".\n   * Oldest toasts are removed when the limit is exceeded.\n   */\n  limit?: number;\n}\n\nconst DEFAULT_LIMIT: Record<NonNullable<ToastViewportProps[\"variant\"]>, number> = {\n  stacked: 5,\n  list: 3,\n};\n\nexport interface ToastProviderProps {\n  children: ReactNode;\n  variant?: ToastViewportProps[\"variant\"];\n  limit?: number;\n  timeout?: number;\n}\n\n/**\n * Drop-in provider that wires limit defaults to the chosen variant.\n * Use this instead of base-ui's Toast.Provider when using ToastViewport.\n */\nconst MAX_LIMIT: Record<NonNullable<ToastViewportProps[\"variant\"]>, number> = {\n  stacked: 10,\n  list: 5,\n};\n\nexport function ToastProvider({ children, variant = \"list\", limit, timeout }: ToastProviderProps) {\n  const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);\n  return (\n    <BaseToast.Provider limit={resolvedLimit} timeout={timeout}>\n      {children}\n    </BaseToast.Provider>\n  );\n}\n\nexport function ToastViewport({ variant = \"list\", limit: _limit }: ToastViewportProps) {\n  const manager = useToastManager();\n  const isStacked = variant === \"stacked\";\n\n  return (\n    <BaseToast.Viewport className={`${styles.viewport} ${isStacked ? styles[\"viewport-stacked\"] : styles[\"viewport-list\"]}`}>\n      {manager.toasts.map((toast) => (\n        <BaseToast.Root\n          key={toast.id}\n          toast={toast}\n          className={`${styles.toast} ${isStacked ? styles[\"toast-stacked\"] : \"\"} ${styles[`toast-${toast.type ?? \"default\"}`]}`}\n          swipeDirection={isStacked ? [\"right\", \"down\"] : [\"right\", \"down\"]}\n        >\n          {toast.type && toast.type !== \"default\" && <StatusIcon type={toast.type} />}\n          <div className={styles.content}>\n            {toast.title && <BaseToast.Title className={styles.title} />}\n            {toast.description && <BaseToast.Description className={styles.description} />}\n          </div>\n          <BaseToast.Close className={styles.close} aria-label=\"Dismiss\">\n            <XIcon />\n          </BaseToast.Close>\n        </BaseToast.Root>\n      ))}\n    </BaseToast.Viewport>\n  );\n}\nexport { styles as ToastStyles };\n"],"mappings":"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"}

package/dist/toast/toast.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/toast/toast.module.js

@@ -0,0 +1,25 @@
+//#region src/toast/toast.module.css
+var toast_module_default = {
+	"close": "close_QXnIWW",
+	"content": "content_QXnIWW",
+	"description": "description_QXnIWW",
+	"icon": "icon_QXnIWW",
+	"icon-error": "icon-error_QXnIWW",
+	"icon-info": "icon-info_QXnIWW",
+	"icon-success": "icon-success_QXnIWW",
+	"icon-warning": "icon-warning_QXnIWW",
+	"title": "title_QXnIWW",
+	"toast": "toast_QXnIWW",
+	"toast-error": "toast-error_QXnIWW",
+	"toast-info": "toast-info_QXnIWW",
+	"toast-stacked": "toast-stacked_QXnIWW",
+	"toast-success": "toast-success_QXnIWW",
+	"toast-warning": "toast-warning_QXnIWW",
+	"viewport": "viewport_QXnIWW",
+	"viewport-list": "viewport-list_QXnIWW",
+	"viewport-stacked": "viewport-stacked_QXnIWW"
+};
+//#endregion
+export { toast_module_default as default };
+
+//# sourceMappingURL=toast.module.js.map

package/dist/toast/toast.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.module.js","names":[],"sources":["../../src/toast/toast.module.css"],"sourcesContent":["@layer components {\n  /* ─── Viewport ───────────────────────────────────────────────────── */\n  .viewport {\n    position: fixed;\n    bottom: var(--space-4);\n    right: var(--space-4);\n    z-index: var(--z-toast);\n    display: flex;\n    flex-direction: column;\n    width: 360px;\n    max-width: calc(100vw - var(--space-8));\n    list-style: none;\n    pointer-events: none;\n    outline: none;\n  }\n  /* List variant — toasts sit in a normal column */\n  .viewport-list {\n    gap: var(--space-2);\n  }\n  /* Stacked variant — toasts overlap; viewport height = frontmost toast */\n  .viewport-stacked {\n    gap: 0;\n  }\n  /* ─── Toast base ─────────────────────────────────────────────────── */\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-4);\n    background-color: var(--color-overlay);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-xl);\n    box-shadow: var(--shadow-popover);\n    pointer-events: auto;\n    cursor: default;\n    width: 100%;\n  }\n  @supports (backdrop-filter: blur(12px)) {\n    .toast {\n      backdrop-filter: blur(12px) saturate(1.5);\n      -webkit-backdrop-filter: blur(12px) saturate(1.5);\n    }\n  }\n  /* ─── List mode animations ───────────────────────────────────────── */\n  .viewport-list .toast {\n    transform-origin: bottom right;\n    opacity: 1;\n    transform: translateX(0);\n    transition:\n      opacity 300ms var(--easing-ease-out),\n      transform 300ms var(--easing-spring);\n    @starting-style {\n      opacity: 0;\n      transform: translateX(calc(100% + var(--space-4)));\n    }\n  }\n  .viewport-list .toast[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 200ms var(--easing-ease-in),\n      transform 200ms var(--easing-ease-in);\n  }\n  /* ─── Stacked mode ───────────────────────────────────────────────── */\n  /*\n   * Base UI provides on each toast root (as inline styles):\n   *   --toast-index   : plain integer, 0 = frontmost/newest\n   *   --toast-offset-y: \"Npx\" — cumulative height of all toasts above\n   *   --toast-height  : \"Npx\" — this toast's measured height\n   *\n   * Base UI provides on the viewport:\n   *   --toast-frontmost-height: \"Npx\" — height of index-0 toast\n   *\n   * Collapsed: toasts sit at bottom:0, stacked via scale+translate.\n   * Expanded (data-expanded): each toast moves to its offset position.\n   */\n  .viewport-stacked {\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n    padding-top: 20px;\n    box-sizing: content-box;\n    clip-path: inset(0 0 0 0 round var(--radius-xl));\n    transition:\n      clip-path 200ms var(--easing-ease-out),\n      height 200ms var(--easing-ease-out);\n  }\n  .viewport-stacked[data-expanded] {\n    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n  }\n  /* Fill the gaps between expanded toasts so the mouse doesn't leave\n     the viewport as it moves between them, which would collapse the stack */\n  .viewport-stacked[data-expanded]::after {\n    content: \"\";\n    position: absolute;\n    inset: -9999px 0 0 0;\n    pointer-events: auto;\n    z-index: 0;\n  }\n  .toast-stacked {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: calc(50 - var(--toast-index));\n    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));\n    transform-origin: bottom center;\n    opacity: calc(1 - var(--toast-index) * 0.15);\n    transition:\n      transform 200ms var(--easing-ease-out),\n      opacity 200ms var(--easing-ease-out);\n  }\n  /* Expanded: each toast animates to its stacked position with a gap */\n  .viewport-stacked[data-expanded] .toast-stacked {\n    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Enter: new toast slides up from below */\n  .viewport-stacked .toast-stacked {\n    @starting-style {\n      opacity: 0;\n      transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));\n    }\n  }\n  /* Exit: dismissed toast slides right */\n  .viewport-stacked .toast-stacked[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n  /* ─── Variant tints ──────────────────────────────────────────────── */\n  .toast-success {\n    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));\n  }\n  .toast-error {\n    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));\n  }\n  .toast-warning {\n    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));\n  }\n  .toast-info {\n    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));\n  }\n  /* ─── Icon ───────────────────────────────────────────────────────── */\n  .icon {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    margin-top: 1px;\n  }\n  .icon-success {\n    color: var(--color-success-solid);\n  }\n  .icon-warning {\n    color: var(--color-warning-solid);\n  }\n  .icon-error {\n    color: var(--color-error-solid);\n  }\n  .icon-info {\n    color: var(--color-info-solid);\n  }\n  /* ─── Content ────────────────────────────────────────────────────── */\n  .content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n    min-width: 0;\n  }\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-primary);\n    line-height: var(--line-height-normal);\n  }\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  /* ─── Close button ───────────────────────────────────────────────── */\n  .close {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n    margin-top: 1px;\n  }\n  .close:hover {\n    background-color: var(--color-hover);\n    color: var(--color-primary);\n  }\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n}\n"],"mappings":";AAoCA,IAAA,uBAAE;CAAA,SAAA;CAAA,WAAA;CAAA,eAAA;CAAA,QAAA;CAAA,cAAA;CAAA,aAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,SAAA;CAAA,SAAA;CAAA,eAAA;CAAA,cAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,YAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA"}