@vjdesigns/vjdesigns-ui 2.1.0 → 2.2.0

package/dist/ai/llms-full.txt

@@ -1,4 +1,4 @@
-# @vjdesigns/vjdesigns-ui 2.0.0: full reference
+# @vjdesigns/vjdesigns-ui 2.1.0: full reference
 
 > Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.
 
@@ -2411,6 +2411,7 @@ announce it yourself if needed.
 - Update (progressive upload)
 - Placements
 - Queue and max
+- One viewport per store: Two providers on one store (here, one at the "app root" and one inside a Japanese `LocaleProvider`) share a single viewport: the first one mounted draws it, so toasts and the "+N more" note never appear twice. Use one provider near the root, inside your `LocaleProvider`, or give a provider its own `store={createToastStore()}` to keep separate toasts.
 - Hotkey focus (F8)
 - Pause on hover and focus
 - Announcements: Announcements go through two persistent live regions inside the viewport: `role="status"` (polite) for most tones and `role="alert"` for errors, with the tone said in words ("Success:").
@@ -2425,7 +2426,10 @@ import { ToastProvider } from "@vjdesigns/vjdesigns-ui";
 Category: feedback · Storybook: Feedback/Toast
 
 Renders the toast viewport (in a portal) and provides `useToast()`.
-Place it once near the root of your app.
+Place it once near the root of your app, inside your `LocaleProvider` so
+its built-in text (like "+2 more notifications") is in the app's language.
+Each store gets one viewport: a second provider on the same store (nested
+or not) only provides `useToast()`, so toasts are never drawn twice.
 
 Accessibility:
 - The viewport is a labelled region ("Notifications (F8)"). The hotkey

package/dist/ai/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@vjdesigns/vjdesigns-ui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "summary": "Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.",
   "install": "npm install @vjdesigns/vjdesigns-ui",
   "stylesheet": "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css",
@@ -5706,6 +5706,10 @@
           "name": "Queue and max",
           "description": ""
         },
+        {
+          "name": "One viewport per store",
+          "description": "Two providers on one store (here, one at the \"app root\" and one inside a\r\nJapanese `LocaleProvider`) share a single viewport: the first one mounted\r\ndraws it, so toasts and the \"+N more\" note never appear twice. Use one\r\nprovider near the root, inside your `LocaleProvider`, or give a provider\r\nits own `store={createToastStore()}` to keep separate toasts."
+        },
         {
           "name": "Hotkey focus (F8)",
           "description": ""
@@ -5737,7 +5741,7 @@
       "category": "feedback",
       "folder": "Toast",
       "import": "import { ToastProvider } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "Renders the toast viewport (in a portal) and provides `useToast()`.\r\nPlace it once near the root of your app.\r\n\r\nAccessibility:\r\n- The viewport is a labelled region (\"Notifications (F8)\"). The hotkey\r\n  moves focus to the newest toast; Tab moves through toasts and their\r\n  buttons; Escape closes the focused toast; focus then moves to the next\r\n  toast, or back to where it was before.\r\n- Announcements go through persistent live regions that exist before any\r\n  toast appears: `role=\"status\"` for most tones and `role=\"alert\"` for\r\n  `danger`.\r\n- Timers pause while the viewport is hovered or focused and while the\r\n  window is blurred or hidden. Toasts with an action, and `loading`\r\n  toasts, stay until dismissed by default.",
+      "description": "Renders the toast viewport (in a portal) and provides `useToast()`.\r\nPlace it once near the root of your app, inside your `LocaleProvider` so\r\nits built-in text (like \"+2 more notifications\") is in the app's language.\r\nEach store gets one viewport: a second provider on the same store (nested\r\nor not) only provides `useToast()`, so toasts are never drawn twice.\r\n\r\nAccessibility:\r\n- The viewport is a labelled region (\"Notifications (F8)\"). The hotkey\r\n  moves focus to the newest toast; Tab moves through toasts and their\r\n  buttons; Escape closes the focused toast; focus then moves to the next\r\n  toast, or back to where it was before.\r\n- Announcements go through persistent live regions that exist before any\r\n  toast appears: `role=\"status\"` for most tones and `role=\"alert\"` for\r\n  `danger`.\r\n- Timers pause while the viewport is hovered or focused and while the\r\n  window is blurred or hidden. Toasts with an action, and `loading`\r\n  toasts, stay until dismissed by default.",
       "props": [
         {
           "name": "children",

package/dist/components/feedback/Toast/ToastProvider.cjs.js

@@ -1 +1 @@
-const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("./toastStore.cjs.js"),n=require("./useToast.cjs.js"),r=require("./ToastViewport.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=[`F8`],s=({children:s,store:c=t.toastStore,placement:l=`bottom-end`,max:u=3,duration:d=5e3,gap:f=3,label:p,hotkey:m=o,showProgress:h=!1,toneLabels:g,closeLabel:_,queuedLabel:v,className:y})=>{let b=e.useMessages(),x=p??b.toast.region,S=_??b.toast.dismiss,C=v??b.toast.queued,w=(0,i.useMemo)(()=>({store:c,api:c===t.toastStore?t.toast:t.createToastApi(c)}),[c]),T=(0,i.useMemo)(()=>({neutral:``,...b.toast.tone,...g}),[b.toast.tone,g]);return(0,a.jsxs)(n.ToastContext.Provider,{value:w,children:[s,(0,a.jsx)(r.ToastViewport,{store:c,placement:l,max:u,duration:d,gap:f,label:x,hotkey:m,showProgress:h,toneLabels:T,closeLabel:S,queuedLabel:C,className:y})]})};exports.ToastProvider=s;
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("./toastStore.cjs.js"),n=require("./useToast.cjs.js"),r=require("./ToastViewport.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=[`F8`],s=globalThis.process?.env?.NODE_ENV!==`production`,c=typeof window<`u`?i.useLayoutEffect:i.useEffect,l=new Map,u=new Set,d=e=>(u.add(e),()=>{u.delete(e)}),f=()=>u.forEach(e=>e());function p(e,t){let[n]=(0,i.useState)(()=>Symbol(`ToastProvider`));return c(()=>{if(t)return;let r=l.get(e)??[];return s&&r.length>0&&console.warn("[ToastProvider] Another ToastProvider already shows this store's toasts, so this one won't draw a second viewport. Use one ToastProvider near the root of your app (inside your LocaleProvider), or pass `store={createToastStore()}` to keep separate toasts."),l.set(e,[...r,n]),f(),()=>{let t=(l.get(e)??[]).filter(e=>e!==n);t.length>0?l.set(e,t):l.delete(e),f()}},[e,t,n]),(0,i.useSyncExternalStore)(d,()=>!t&&l.get(e)?.[0]===n,()=>!t)}var m=({children:s,store:c=t.toastStore,placement:l=`bottom-end`,max:u=3,duration:d=5e3,gap:f=3,label:m,hotkey:h=o,showProgress:g=!1,toneLabels:_,closeLabel:v,queuedLabel:y,className:b})=>{let x=e.useMessages(),S=p(c,(0,i.useContext)(n.ToastContext)?.store===c),C=m??x.toast.region,w=v??x.toast.dismiss,T=y??x.toast.queued,E=(0,i.useMemo)(()=>({store:c,api:c===t.toastStore?t.toast:t.createToastApi(c)}),[c]),D=(0,i.useMemo)(()=>({neutral:``,...x.toast.tone,..._}),[x.toast.tone,_]);return(0,a.jsxs)(n.ToastContext.Provider,{value:E,children:[s,S&&(0,a.jsx)(r.ToastViewport,{store:c,placement:l,max:u,duration:d,gap:f,label:C,hotkey:h,showProgress:g,toneLabels:D,closeLabel:w,queuedLabel:T,className:b})]})};exports.ToastProvider=m;

package/dist/components/feedback/Toast/ToastProvider.d.ts

@@ -45,7 +45,10 @@ export interface ToastProviderProps {
 }
 /**
  * Renders the toast viewport (in a portal) and provides `useToast()`.
- * Place it once near the root of your app.
+ * Place it once near the root of your app, inside your `LocaleProvider` so
+ * its built-in text (like "+2 more notifications") is in the app's language.
+ * Each store gets one viewport: a second provider on the same store (nested
+ * or not) only provides `useToast()`, so toasts are never drawn twice.
  *
  * Accessibility:
  * - The viewport is a labelled region ("Notifications (F8)"). The hotkey

package/dist/components/feedback/Toast/ToastProvider.mjs

@@ -2,35 +2,53 @@ import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.
 import { createToastApi as t, toast as n, toastStore as r } from "./toastStore.mjs";
 import { ToastContext as i } from "./useToast.mjs";
 import { ToastViewport as a } from "./ToastViewport.mjs";
-import { useMemo as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useContext as o, useEffect as s, useLayoutEffect as c, useMemo as l, useState as u, useSyncExternalStore as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/feedback/Toast/ToastProvider.tsx
-var l = ["F8"], u = ({ children: u, store: d = r, placement: f = "bottom-end", max: p = 3, duration: m = 5e3, gap: h = 3, label: g, hotkey: _ = l, showProgress: v = !1, toneLabels: y, closeLabel: b, queuedLabel: x, className: S }) => {
-	let C = e(), w = g ?? C.toast.region, T = b ?? C.toast.dismiss, E = x ?? C.toast.queued, D = o(() => ({
-		store: d,
-		api: d === r ? n : t(d)
-	}), [d]), O = o(() => ({
+var m = ["F8"], h = globalThis.process?.env?.NODE_ENV !== "production", g = typeof window < "u" ? c : s, _ = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Set(), y = (e) => (v.add(e), () => {
+	v.delete(e);
+}), b = () => v.forEach((e) => e());
+function x(e, t) {
+	let [n] = u(() => Symbol("ToastProvider"));
+	return g(() => {
+		if (t) return;
+		let r = _.get(e) ?? [];
+		return h && r.length > 0 && console.warn("[ToastProvider] Another ToastProvider already shows this store's toasts, so this one won't draw a second viewport. Use one ToastProvider near the root of your app (inside your LocaleProvider), or pass `store={createToastStore()}` to keep separate toasts."), _.set(e, [...r, n]), b(), () => {
+			let t = (_.get(e) ?? []).filter((e) => e !== n);
+			t.length > 0 ? _.set(e, t) : _.delete(e), b();
+		};
+	}, [
+		e,
+		t,
+		n
+	]), d(y, () => !t && _.get(e)?.[0] === n, () => !t);
+}
+var S = ({ children: s, store: c = r, placement: u = "bottom-end", max: d = 3, duration: h = 5e3, gap: g = 3, label: _, hotkey: v = m, showProgress: y = !1, toneLabels: b, closeLabel: S, queuedLabel: C, className: w }) => {
+	let T = e(), E = x(c, o(i)?.store === c), D = _ ?? T.toast.region, O = S ?? T.toast.dismiss, k = C ?? T.toast.queued, A = l(() => ({
+		store: c,
+		api: c === r ? n : t(c)
+	}), [c]), j = l(() => ({
 		neutral: "",
-		...C.toast.tone,
-		...y
-	}), [C.toast.tone, y]);
-	return /* @__PURE__ */ c(i.Provider, {
-		value: D,
-		children: [u, /* @__PURE__ */ s(a, {
-			store: d,
-			placement: f,
-			max: p,
-			duration: m,
-			gap: h,
-			label: w,
-			hotkey: _,
-			showProgress: v,
-			toneLabels: O,
-			closeLabel: T,
-			queuedLabel: E,
-			className: S
+		...T.toast.tone,
+		...b
+	}), [T.toast.tone, b]);
+	return /* @__PURE__ */ p(i.Provider, {
+		value: A,
+		children: [s, E && /* @__PURE__ */ f(a, {
+			store: c,
+			placement: u,
+			max: d,
+			duration: h,
+			gap: g,
+			label: D,
+			hotkey: v,
+			showProgress: y,
+			toneLabels: j,
+			closeLabel: O,
+			queuedLabel: k,
+			className: w
 		})]
 	});
 };
 //#endregion
-export { u as ToastProvider };
+export { S as ToastProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vjdesigns/vjdesigns-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Component library for vertical-jump-designs and portfolio",
   "main": "dist/index.cjs.js",
   "module": "dist/index.mjs",