@cueplusplus/ui 0.13.0

package/dist/overlays/popover.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/overlays/popover.d.ts
+interface PopoverRootProps extends Popover.Root.Props {
+  /**
+   * Close the popover when the viewport moves under it — a wheel anywhere
+   * outside the popup, or a window resize. Defaults to `true`.
+   *
+   * An anchored popup is positioned from its trigger's rect. A canvas that pans
+   * by mutating a CSS transform fires no `scroll` event, so without this the
+   * popup silently detaches from the thing it belongs to. Set `false` when the
+   * popover must survive page scrolling (a pinned inspector, say).
+   */
+  closeOnWheel?: boolean;
+}
+/**
+ * Groups the parts of a popover and owns its open state. Renders no element.
+ */
+declare function PopoverRoot({ closeOnWheel, actionsRef, ...rootProps }: PopoverRootProps): React.JSX.Element;
+interface PopoverTriggerProps extends Popover.Trigger.Props {}
+interface PopoverContentProps extends Omit<Popover.Popup.Props, "className"> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the positioner that places the popup. */
+  positionerClassName?: string;
+  /** Preferred side of the trigger. Defaults to `"bottom"`. */
+  side?: Popover.Positioner.Props["side"];
+  /** Alignment along that side. Defaults to `"center"`. */
+  align?: Popover.Positioner.Props["align"];
+  /** Gap in px between trigger and popup. Defaults to `4`. */
+  sideOffset?: Popover.Positioner.Props["sideOffset"];
+  /** Nudge along the alignment axis, in px. */
+  alignOffset?: Popover.Positioner.Props["alignOffset"];
+  /** Keep the popup mounted while closed. */
+  keepMounted?: boolean;
+}
+interface PopoverTitleProps extends Popover.Title.Props {}
+interface PopoverDescriptionProps extends Popover.Description.Props {}
+interface PopoverCloseProps extends Popover.Close.Props {}
+/**
+ * A small floating surface anchored to a control — a filter form, an inspector,
+ * a colour picker.
+ *
+ * Wraps Base UI's `Popover`, so anchoring, collision flipping, Escape and
+ * outside-press dismissal are the primitive's. This layer adds the token skin,
+ * the portal theme stamp and the canvas-safe wheel dismissal.
+ *
+ * @example
+ * <Popover.Root>
+ *   <Popover.Trigger render={<IconButton aria-label="Filter" icon={Filter} />} />
+ *   <Popover.Content side="bottom" align="end">
+ *     <Popover.Title>Filter cues</Popover.Title>
+ *     <SearchInput aria-label="Query" />
+ *   </Popover.Content>
+ * </Popover.Root>
+ */
+declare const Popover$1: {
+  Root: typeof PopoverRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Title: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+  Close: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Popover$1 as Popover, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps };

package/dist/overlays/popover.js

@@ -0,0 +1,114 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayDescriptionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTitleClasses } from "./_surface.js";
+import { useCloseOnWheel } from "./_wheel.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/overlays/popover.tsx
+const PopoverDismissContext = React.createContext({
+	closeOnWheel: false,
+	close: () => {}
+});
+/**
+* Groups the parts of a popover and owns its open state. Renders no element.
+*/
+function PopoverRoot({ closeOnWheel = true, actionsRef, ...rootProps }) {
+	const fallbackActions = React.useRef(null);
+	const actions = actionsRef ?? fallbackActions;
+	const close = React.useCallback(() => {
+		actions.current?.close();
+	}, [actions]);
+	const dismiss = React.useMemo(() => ({
+		closeOnWheel,
+		close
+	}), [closeOnWheel, close]);
+	return /* @__PURE__ */ jsx(PopoverDismissContext.Provider, {
+		value: dismiss,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			actionsRef: actions,
+			...rootProps
+		})
+	});
+}
+/**
+* A small floating surface anchored to a control — a filter form, an inspector,
+* a colour picker.
+*
+* Wraps Base UI's `Popover`, so anchoring, collision flipping, Escape and
+* outside-press dismissal are the primitive's. This layer adds the token skin,
+* the portal theme stamp and the canvas-safe wheel dismissal.
+*
+* @example
+* <Popover.Root>
+*   <Popover.Trigger render={<IconButton aria-label="Filter" icon={Filter} />} />
+*   <Popover.Content side="bottom" align="end">
+*     <Popover.Title>Filter cues</Popover.Title>
+*     <SearchInput aria-label="Query" />
+*   </Popover.Content>
+* </Popover.Root>
+*/
+const Popover$1 = {
+	Root: PopoverRoot,
+	Trigger: React.forwardRef(function PopoverTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Popover.Trigger, {
+			ref,
+			"data-slot": "popover-trigger",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function PopoverContent({ className, positionerClassName, side, align, sideOffset = 4, alignOffset, keepMounted, children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		const { closeOnWheel, close } = React.useContext(PopoverDismissContext);
+		const popupRef = React.useRef(null);
+		const composedRef = useComposedRefs(ref, popupRef);
+		useCloseOnWheel(closeOnWheel, close, popupRef);
+		return /* @__PURE__ */ jsx(Popover.Portal, {
+			keepMounted,
+			...portalProps,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				className: cn(overlayPositionerClasses, positionerClassName),
+				side,
+				align,
+				sideOffset,
+				alignOffset,
+				children: /* @__PURE__ */ jsx(Popover.Popup, {
+					ref: composedRef,
+					"data-slot": "popover-popup",
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "flex max-w-[calc(100vw-2rem)] flex-col gap-(--cue-space-3) p-(--cue-space-4) outline-none", className),
+					...popupProps,
+					children
+				})
+			})
+		});
+	}),
+	Title: React.forwardRef(function PopoverTitle({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Popover.Title, {
+			ref,
+			"data-slot": "popover-title",
+			className: cn(overlayTitleClasses, className),
+			...elementProps
+		});
+	}),
+	Description: React.forwardRef(function PopoverDescription({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Popover.Description, {
+			ref,
+			"data-slot": "popover-description",
+			className: cn(overlayDescriptionClasses, className),
+			...elementProps
+		});
+	}),
+	Close: React.forwardRef(function PopoverClose({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Popover.Close, {
+			ref,
+			"data-slot": "popover-close",
+			className: cn(className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { Popover$1 as Popover };

package/dist/overlays/sheet.d.ts

@@ -0,0 +1,78 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/overlays/sheet.d.ts
+/**
+ * An edge-anchored modal surface, one variant per edge.
+ *
+ * The entry and exit are a translate rather than the dialog's scale, and both
+ * ends of it are expressed as `data-[starting-style]` / `data-[ending-style]`
+ * classes: Base UI stamps those attributes around the transition, so the whole
+ * animation is CSS with nothing to schedule on the main thread — and one
+ * `motion-reduce` clause switches it off wholesale.
+ *
+ * Each variant also drops the rim and the radius on the edge it is flush
+ * against. A sheet that keeps all four sides reads as a dialog that has drifted
+ * into a corner; killing the outer edge is what makes it read as part of the
+ * window.
+ */
+declare const sheetPopupVariants: (props?: ({
+  side?: "bottom" | "left" | "right" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface SheetRootProps extends Dialog.Root.Props {}
+/**
+ * Groups the parts of a sheet and owns its open state. Renders no element.
+ *
+ * @example
+ * <Sheet.Root open={open} onOpenChange={setOpen}>…</Sheet.Root>
+ */
+declare function SheetRoot(props: SheetRootProps): React.JSX.Element;
+interface SheetTriggerProps extends Dialog.Trigger.Props {}
+interface SheetContentProps extends Omit<Dialog.Popup.Props, "className">, VariantProps<typeof sheetPopupVariants> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the scrim behind it. */
+  backdropClassName?: string;
+  /** Keep the popup mounted while closed, so its content is not re-created. */
+  keepMounted?: boolean;
+  /** Show the corner close affordance. Defaults to `true`. */
+  showCloseButton?: boolean;
+  /** Accessible name for the corner close affordance. Defaults to `"Close"`. */
+  closeLabel?: string;
+}
+interface SheetTitleProps extends Dialog.Title.Props {}
+interface SheetDescriptionProps extends Dialog.Description.Props {}
+interface SheetFooterProps extends React.ComponentPropsWithoutRef<"div"> {}
+interface SheetCloseProps extends Dialog.Close.Props {}
+/**
+ * A modal panel that slides in from an edge: an inspector, a filter drawer, a
+ * details pane too wide for a popover.
+ *
+ * The same Base UI `Dialog` as {@link Dialog} — same focus trap, same
+ * dismissal, same portal theme stamp — anchored to an edge instead of centred.
+ * Reach for it when the content is a *side channel* to the page rather than an
+ * interruption of it; a task that must be finished before anything else belongs
+ * in a `Dialog`. On a phone-shaped viewport prefer {@link Drawer}, which is the
+ * same idea with a swipe.
+ *
+ * @example
+ * <Sheet.Root>
+ *   <Sheet.Trigger render={<Button>Inspect</Button>} />
+ *   <Sheet.Content side="right">
+ *     <Sheet.Title>Fixture inspector</Sheet.Title>
+ *     <Sheet.Description>Everything patched at this address.</Sheet.Description>
+ *     <Sheet.Footer><Sheet.Close render={<Button>Done</Button>} /></Sheet.Footer>
+ *   </Sheet.Content>
+ * </Sheet.Root>
+ */
+declare const Sheet: {
+  Root: typeof SheetRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<SheetTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<SheetContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Title: React.ForwardRefExoticComponent<Omit<SheetTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<SheetDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+  Footer: React.ForwardRefExoticComponent<SheetFooterProps & React.RefAttributes<HTMLDivElement>>;
+  Close: React.ForwardRefExoticComponent<Omit<SheetCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Sheet, SheetCloseProps, SheetContentProps, SheetDescriptionProps, SheetFooterProps, SheetRootProps, SheetTitleProps, SheetTriggerProps };

package/dist/overlays/sheet.js

@@ -0,0 +1,131 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import { CrossGlyph } from "./_glyphs.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayDescriptionClasses, overlayFooterClasses, overlaySurfaceClasses, overlayTitleClasses, scrimClasses } from "./_surface.js";
+import { IconButton } from "../primitives/icon-button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/overlays/sheet.tsx
+/**
+* An edge-anchored modal surface, one variant per edge.
+*
+* The entry and exit are a translate rather than the dialog's scale, and both
+* ends of it are expressed as `data-[starting-style]` / `data-[ending-style]`
+* classes: Base UI stamps those attributes around the transition, so the whole
+* animation is CSS with nothing to schedule on the main thread — and one
+* `motion-reduce` clause switches it off wholesale.
+*
+* Each variant also drops the rim and the radius on the edge it is flush
+* against. A sheet that keeps all four sides reads as a dialog that has drifted
+* into a corner; killing the outer edge is what makes it read as part of the
+* window.
+*/
+const sheetPopupVariants = cva(`${overlaySurfaceClasses} fixed z-50 flex flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none transition-transform duration-200 ease-out motion-reduce:transition-none`, {
+	variants: { side: {
+		right: "inset-y-0 right-0 w-[min(28rem,calc(100vw-2rem))] rounded-r-none border-y-0 border-r-0 data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
+		left: "inset-y-0 left-0 w-[min(28rem,calc(100vw-2rem))] rounded-l-none border-y-0 border-l-0 data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",
+		bottom: "inset-x-0 bottom-0 max-h-[85vh] rounded-b-none border-x-0 border-b-0 data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full"
+	} },
+	defaultVariants: { side: "right" }
+});
+/**
+* Groups the parts of a sheet and owns its open state. Renders no element.
+*
+* @example
+* <Sheet.Root open={open} onOpenChange={setOpen}>…</Sheet.Root>
+*/
+function SheetRoot(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+/**
+* A modal panel that slides in from an edge: an inspector, a filter drawer, a
+* details pane too wide for a popover.
+*
+* The same Base UI `Dialog` as {@link Dialog} — same focus trap, same
+* dismissal, same portal theme stamp — anchored to an edge instead of centred.
+* Reach for it when the content is a *side channel* to the page rather than an
+* interruption of it; a task that must be finished before anything else belongs
+* in a `Dialog`. On a phone-shaped viewport prefer {@link Drawer}, which is the
+* same idea with a swipe.
+*
+* @example
+* <Sheet.Root>
+*   <Sheet.Trigger render={<Button>Inspect</Button>} />
+*   <Sheet.Content side="right">
+*     <Sheet.Title>Fixture inspector</Sheet.Title>
+*     <Sheet.Description>Everything patched at this address.</Sheet.Description>
+*     <Sheet.Footer><Sheet.Close render={<Button>Done</Button>} /></Sheet.Footer>
+*   </Sheet.Content>
+* </Sheet.Root>
+*/
+const Sheet = {
+	Root: SheetRoot,
+	Trigger: React.forwardRef(function SheetTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Dialog.Trigger, {
+			ref,
+			"data-slot": "sheet-trigger",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function SheetContent({ className, backdropClassName, keepMounted, side, showCloseButton = true, closeLabel = "Close", children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		return /* @__PURE__ */ jsxs(Dialog.Portal, {
+			keepMounted,
+			...portalProps,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+				"data-slot": "sheet-backdrop",
+				className: cn(scrimClasses, backdropClassName)
+			}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+				ref,
+				"data-slot": "sheet-popup",
+				"data-side": side ?? "right",
+				className: cn(sheetPopupVariants({ side }), className),
+				...popupProps,
+				children: [children, showCloseButton ? /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": closeLabel,
+					icon: CrossGlyph,
+					size: "sm",
+					className: "absolute top-(--cue-space-3) right-(--cue-space-3)"
+				}) }) : null]
+			})]
+		});
+	}),
+	Title: React.forwardRef(function SheetTitle({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Dialog.Title, {
+			ref,
+			"data-slot": "sheet-title",
+			className: cn(overlayTitleClasses, className),
+			...elementProps
+		});
+	}),
+	Description: React.forwardRef(function SheetDescription({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Dialog.Description, {
+			ref,
+			"data-slot": "sheet-description",
+			className: cn(overlayDescriptionClasses, className),
+			...elementProps
+		});
+	}),
+	Footer: React.forwardRef(function SheetFooter({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "sheet-footer",
+			className: cn(overlayFooterClasses, "mt-auto", className),
+			...elementProps
+		});
+	}),
+	Close: React.forwardRef(function SheetClose({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Dialog.Close, {
+			ref,
+			"data-slot": "sheet-close",
+			className: cn(className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { Sheet };

package/dist/overlays/toast.d.ts

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { Toast } from "@base-ui/react/toast";
+//#region src/overlays/toast.d.ts
+/**
+ * The status vocabulary shared with `Chip`, `StatusDot` and `Meter`, so a
+ * "warn" toast is the same colour as the warn chip that raised it.
+ */
+type ToastTone = "neutral" | "accent" | "ok" | "busy" | "warn" | "danger" | "info";
+interface ToastProviderProps extends Toast.Provider.Props {}
+/**
+ * Holds the toast queue. Mount it once, high in the tree, around everything
+ * that might raise a toast — and render exactly one {@link ToastViewport}
+ * inside it.
+ *
+ * `limit` defaults to `3`: beyond that the oldest toasts are marked
+ * `data-limited` and hidden rather than dropped, so they reappear as the stack
+ * drains.
+ *
+ * @example
+ * <Toast.Provider timeout={4000}><App /><Toast.Viewport /></Toast.Provider>
+ */
+declare function ToastProvider({ limit, ...providerProps }: ToastProviderProps): React.JSX.Element;
+/** Everything a toast can say, in this system's vocabulary. */
+interface ToastOptions {
+  /** The headline. One line — a toast is not a dialog. */
+  title?: React.ReactNode;
+  /** Optional second line with the detail. */
+  description?: React.ReactNode;
+  /** Status colour for the leading rail. Defaults to `"neutral"`. */
+  tone?: ToastTone;
+  /** ms before auto-dismissal; `0` pins the toast until dismissed. */
+  timeout?: number;
+  /** `"high"` announces urgently (`role="alertdialog"`). Defaults to `"low"`. */
+  priority?: "low" | "high";
+  /** Reuse an id to update a toast in place instead of stacking a second one. */
+  id?: string;
+  /** Called when the toast closes, however it closes. */
+  onClose?: () => void;
+  /**
+   * The toast's one action — `{ children: "Undo", onClick: undo }`. Rendered as
+   * a button under the description; omit it and no button exists at all.
+   */
+  actionProps?: React.ComponentPropsWithoutRef<"button">;
+}
+/** What {@link useToast} hands back. */
+interface ToastManager {
+  /** The live queue, newest first — including the `data-limited` overflow. */
+  toasts: readonly Toast.Root.ToastObject[];
+  /** Raise a toast. Returns its id. */
+  add: (options: ToastOptions) => string;
+  /** Close one toast by id, or the most recent when called with no argument. */
+  close: (toastId?: string) => void;
+  /** Change a toast that is already on screen. */
+  update: (toastId: string, options: ToastOptions) => void;
+}
+/**
+ * Raise, update and dismiss toasts from anywhere inside a {@link ToastProvider}.
+ *
+ * A thin wrapper over Base UI's `useToastManager` that swaps the primitive's
+ * free-form `type` string for this system's `tone` vocabulary, so a caller
+ * cannot invent a colour the theme does not define.
+ *
+ * @example
+ * const toast = useToast();
+ * toast.add({ title: "Patched 24 fixtures", tone: "ok" });
+ */
+declare function useToast(): ToastManager;
+interface ToastViewportProps {
+  /** Extra classes for the viewport (move the corner, change the width). */
+  className?: string;
+  /** Extra classes for every toast card. */
+  toastClassName?: string;
+  /** Accessible name for each card's close affordance. Defaults to `"Dismiss"`. */
+  closeLabel?: string;
+}
+/**
+ * Where the stack appears: bottom-right, newest nearest the corner.
+ *
+ * Portalled through {@link useCuePortalProps} so the cards render in the app's
+ * theme and density regardless of which subtree raised them. Render exactly one
+ * per {@link ToastProvider}.
+ *
+ * @example
+ * <Toast.Viewport />
+ */
+declare function ToastViewport({ className, toastClassName, closeLabel }: ToastViewportProps): React.JSX.Element;
+/**
+ * Transient confirmations and failures: "patched", "export finished",
+ * "Art-Net node went away".
+ *
+ * Wraps Base UI's `Toast`, which owns the queue, the auto-dismiss timers, the
+ * live-region announcements, swipe-to-dismiss and the F6 focus hotkey. This
+ * layer supplies the surface, the tone rail and the portal theme stamp.
+ *
+ * @example
+ * <Toast.Provider>
+ *   <App />
+ *   <Toast.Viewport />
+ * </Toast.Provider>
+ */
+declare const Toast$1: {
+  Provider: typeof ToastProvider;
+  Viewport: typeof ToastViewport;
+};
+//#endregion
+export { Toast$1 as Toast, ToastManager, ToastOptions, ToastProviderProps, ToastTone, ToastViewportProps, useToast };

package/dist/overlays/toast.js

@@ -0,0 +1,146 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { CrossGlyph } from "./_glyphs.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlaySurfaceClasses } from "./_surface.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/overlays/toast.tsx
+/**
+* A toast says one thing, so it gets one tone mark: a 2px rail down its leading
+* edge. No tinted fill — three tinted cards stacked in a corner turn into
+* noise, and the rail reads at a glance without competing with the text.
+*/
+const TOAST_TONE_RAIL = {
+	neutral: "border-l-border-strong",
+	accent: "border-l-accent",
+	ok: "border-l-ok",
+	busy: "border-l-busy",
+	warn: "border-l-warn",
+	danger: "border-l-danger",
+	info: "border-l-info"
+};
+function toToastTone(type) {
+	return type !== void 0 && type in TOAST_TONE_RAIL ? type : "neutral";
+}
+/**
+* Holds the toast queue. Mount it once, high in the tree, around everything
+* that might raise a toast — and render exactly one {@link ToastViewport}
+* inside it.
+*
+* `limit` defaults to `3`: beyond that the oldest toasts are marked
+* `data-limited` and hidden rather than dropped, so they reappear as the stack
+* drains.
+*
+* @example
+* <Toast.Provider timeout={4000}><App /><Toast.Viewport /></Toast.Provider>
+*/
+function ToastProvider({ limit = 3, ...providerProps }) {
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		limit,
+		...providerProps
+	});
+}
+/**
+* Raise, update and dismiss toasts from anywhere inside a {@link ToastProvider}.
+*
+* A thin wrapper over Base UI's `useToastManager` that swaps the primitive's
+* free-form `type` string for this system's `tone` vocabulary, so a caller
+* cannot invent a colour the theme does not define.
+*
+* @example
+* const toast = useToast();
+* toast.add({ title: "Patched 24 fixtures", tone: "ok" });
+*/
+function useToast() {
+	const manager = Toast.useToastManager();
+	const add = React.useCallback(({ tone, ...rest }) => manager.add({
+		...rest,
+		type: tone
+	}), [manager]);
+	const update = React.useCallback((toastId, { tone, ...rest }) => manager.update(toastId, {
+		...rest,
+		type: tone
+	}), [manager]);
+	return {
+		toasts: manager.toasts,
+		add,
+		close: manager.close,
+		update
+	};
+}
+/** One card in the stack. */
+function ToastItem({ toast, className, closeLabel }) {
+	return /* @__PURE__ */ jsxs(Toast.Root, {
+		toast,
+		"data-slot": "toast-root",
+		className: cn(overlaySurfaceClasses, "relative flex flex-col gap-(--cue-space-1) border-l-2 py-(--cue-space-3) pr-(--cue-space-6) pl-(--cue-space-4) outline-none", "transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
+		children: [
+			/* @__PURE__ */ jsx(Toast.Title, {
+				"data-slot": "toast-title",
+				className: "font-mono text-(length:--cue-text-ui) font-medium text-fg"
+			}),
+			/* @__PURE__ */ jsx(Toast.Description, {
+				"data-slot": "toast-description",
+				className: "font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg-muted"
+			}),
+			/* @__PURE__ */ jsx(Toast.Action, {
+				"data-slot": "toast-action",
+				className: "mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-(--radius-control) border border-border px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.1em] text-fg-muted uppercase transition-colors outline-none hover:border-border-strong hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+			}),
+			/* @__PURE__ */ jsx(Toast.Close, {
+				"aria-label": closeLabel,
+				"data-slot": "toast-close",
+				className: "absolute top-(--cue-space-2) right-(--cue-space-2) flex size-icon-md cursor-pointer items-center justify-center rounded-(--radius-control) text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+				children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
+			})
+		]
+	});
+}
+/**
+* Where the stack appears: bottom-right, newest nearest the corner.
+*
+* Portalled through {@link useCuePortalProps} so the cards render in the app's
+* theme and density regardless of which subtree raised them. Render exactly one
+* per {@link ToastProvider}.
+*
+* @example
+* <Toast.Viewport />
+*/
+function ToastViewport({ className, toastClassName, closeLabel = "Dismiss" }) {
+	const portalProps = useCuePortalProps();
+	const { toasts } = Toast.useToastManager();
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			"data-slot": "toast-viewport",
+			className: cn("fixed right-(--cue-space-6) bottom-(--cue-space-6) z-50 flex w-[20rem] max-w-[calc(100vw-2rem)] flex-col-reverse gap-(--cue-space-3) outline-none", className),
+			children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
+				toast,
+				className: toastClassName,
+				closeLabel
+			}, toast.id))
+		})
+	});
+}
+/**
+* Transient confirmations and failures: "patched", "export finished",
+* "Art-Net node went away".
+*
+* Wraps Base UI's `Toast`, which owns the queue, the auto-dismiss timers, the
+* live-region announcements, swipe-to-dismiss and the F6 focus hotkey. This
+* layer supplies the surface, the tone rail and the portal theme stamp.
+*
+* @example
+* <Toast.Provider>
+*   <App />
+*   <Toast.Viewport />
+* </Toast.Provider>
+*/
+const Toast$1 = {
+	Provider: ToastProvider,
+	Viewport: ToastViewport
+};
+//#endregion
+export { Toast$1 as Toast, useToast };