Noticescomponent

Render the global list of notices and subscribe to incoming "notice" events.

• Listens for "notice" events on window (or that bubble up to window) and shows them in the global notice list.
• This is how e.g. <Button> and <FormNotify> components send notices into the global list.

Renders the global list of active notices and subscribes to incoming "notice" events. It listens for "notice" events on window (dispatched by the notify() helpers) and shows each one as a <Notice> — this is how components like <Button> and <FormNotify> send notices into the global list.

Things to know:

• Mount <Notices> once near the root of your app. It renders at that point in the DOM and listens automatically — no context required.
• Notices auto-dismiss after a short delay unless they carry a "loading" status.
• Backed by the NOTICES store singleton; for advanced use you can keep a reference to a notice to update or close it manually.

Usage

Mount once near the root of your app:

import { Notices } from "shelving/ui";

export function AppLayout({ children }) {
  return (
    <>
      {children}
      <Notices />
    </>
  );
}

Dispatch notices from anywhere — no context required:

import { notifySuccess, notifyError, callNotified } from "shelving/ui";

notifySuccess("Profile updated.");
notifyError("Could not connect.");

// Wrap an async callback — dispatches success or error automatically.
callNotified(async () => {
  await saveProfile(data);
  return "Profile updated.";
});

Programmatic control via the NOTICES singleton:

import { NOTICES } from "shelving/ui";

// Show a loading notice and hold a reference to it.
const notice = NOTICES.show(undefined, "loading");
await uploadFile(file);
notice.show("Upload complete.", "success"); // Update in place.
notice.close(); // Or close it immediately.