/home/mrjunejune/zenbu: design_system/src/components/notifications.js comparison

comparison design_system/src/components/notifications.js @ 253:fdf3816959cb

[ui] Add Sonner-like notification stack Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Tue, 04 Aug 2026 12:21:19 -0700
parents	7a7581f040e8
children	2b6e732087ff

comparison

equal deleted inserted replaced

-:7a7581f040e8
+:fdf3816959cb
 };
 #announcementRunning = {
 polite: false,
 assertive: false,
 };
+#exitTimers = new Map();
+#exitingElements = new Set();
+#layoutFrame = null;
+#resizeObserver = null;
 constructor() {
 super();
 this.handleNotify = event => {
 if (!(event instanceof CustomEvent) ||
 };
 }
 connectedCallback() {
 if (!this.stack) this.createInternalElements();
+if (!this.#resizeObserver &&
+typeof ResizeObserver === "function") {
+this.#resizeObserver = new ResizeObserver(() => {
+this.requestLayout();
+});
+}
 this.addEventListener("zen-notify", this.handleNotify);
 this.addEventListener(
 "zen-dismiss-notification",
 this.handleDismiss,
 );
 this.handleVisibility,
 );
 for (const record of this.#records.values()) {
 this.clearTimer(record);
 }
+cancelAnimationFrame(this.#layoutFrame);
+this.#layoutFrame = null;
+this.#resizeObserver?.disconnect();
+for (const timer of this.#exitTimers.values()) {
+clearTimeout(timer);
+}
+this.#exitTimers.clear();
+this.#exitingElements.clear();
 this.#records.clear();
 for (const priority of ["polite", "assertive"]) {
 clearTimeout(this.#announcementTimers[priority]);
 this.#announcementTimers[priority] = null;
 this.#announcementQueues[priority].length = 0;
 removeRecord(id, reason, render) {
 const record = this.#records.get(id);
 if (!record) return;
 this.clearTimer(record);
 this.#records.delete(id);
-record.view?.article.remove();
+const article = record.view?.article;
+if (article && render && article.isConnected) {
+article.dataset.removing = "true";
+this.#exitingElements.add(article);
+const exitTimer = setTimeout(() => {
+this.#resizeObserver?.unobserve(article);
+article.remove();
+this.#exitingElements.delete(article);
+this.#exitTimers.delete(article);
+this.requestLayout();
+}, 180);
+this.#exitTimers.set(article, exitTimer);
+} else if (article) {
+this.#resizeObserver?.unobserve(article);
+article.remove();
+}
 record.view = null;
 this.dispatchEvent(new CustomEvent("zen-notification-removed", {
 bubbles: true,
 composed: false,
 detail: Object.freeze({
 description: null,
 dismiss,
 message,
 tone,
 };
+this.#resizeObserver?.observe(article);
 }
 const view = record.view;
 view.article.dataset.tone = record.tone;
 view.tone.textContent = {
 view.action = null;
 }
 return view.article;
 }
+requestLayout() {
+cancelAnimationFrame(this.#layoutFrame);
+this.#layoutFrame = requestAnimationFrame(() => {
+this.#layoutFrame = null;
+this.layoutStack();
+});
+}
+layoutStack() {
+if (!this.stack) return;
+const visible = [...this.#records.values()]
+.slice(-MAX_VISIBLE)
+.filter(record => record.view?.article.isConnected);
+const styles = getComputedStyle(this.stack);
+const configuredGap = Number.parseFloat(
+styles.getPropertyValue("--zen-notification-gap"),
+);
+const gap = Number.isFinite(configuredGap)
+? configuredGap
+: 12;
+let expandedHeight = 0;
+let newestHeight = 0;
+for (let index = visible.length - 1; index >= 0; index--) {
+const record = visible[index];
+const article = record.view.article;
+const depth = visible.length - 1 - index;
+const height = article.offsetHeight;
+if (depth === 0) newestHeight = height;
+article.style.setProperty(
+"--zen-notification-depth",
+String(depth),
+);
+article.style.setProperty(
+"--zen-notification-collapsed-offset",
+`${-depth * 10}px`,
+);
+article.style.setProperty(
+"--zen-notification-collapsed-opacity",
+String(Math.max(0.55, 1 - depth * 0.18)),
+);
+article.dataset.depth = String(depth);
+article.style.setProperty(
+"--zen-notification-offset",
+`${-expandedHeight}px`,
+);
+article.style.setProperty(
+"--zen-notification-scale",
+String(Math.max(0.88, 1 - depth * 0.055)),
+);
+article.style.zIndex = String(visible.length - depth);
+expandedHeight += height + gap;
+}
+this.stack.dataset.count = String(visible.length);
+this.stack.style.setProperty(
+"--zen-notification-collapsed-height",
+`${newestHeight + Math.max(0, visible.length - 1) * 10}px`,
+);
+this.stack.style.setProperty(
+"--zen-notification-expanded-height",
+`${Math.max(0, expandedHeight - gap)}px`,
+);
+}
 render() {
 if (!this.stack) return;
 const records = [...this.#records.values()];
 const visible = records.slice(-MAX_VISIBLE);
 const visibleIds = new Set(visible.map(record => record.id));
 this.resume(record, "queued");
 } else {
 this.pause(record, "queued");
 this.resume(record, "hover");
 this.resume(record, "focus");
-record.view?.article.remove();
+if (record.view?.article) {
+this.#resizeObserver?.unobserve(record.view.article);
+record.view.article.remove();
+}
 }
 if (document.hidden) this.pause(record, "hidden");
 else this.resume(record, "hidden");
 }
 const elements = visible.map(record =>
 this.createNotificationElement(record)
 );
 for (let index = 0; index < elements.length; index++) {
-if (this.stack.children[index] !== elements[index]) {
+const current = [...this.stack.children]
+.filter(element => !this.#exitingElements.has(element))[index];
+if (current !== elements[index]) {
 this.stack.insertBefore(
 elements[index],
-this.stack.children[index] || null,
+current || null,
 );
 }
-}
+this.#resizeObserver?.observe(elements[index]);
-while (this.stack.children.length > elements.length) {
+}
-this.stack.lastElementChild.remove();
+const desired = new Set(elements);
+for (const element of [...this.stack.children]) {
+if (!desired.has(element) &&
+!this.#exitingElements.has(element)) {
+element.remove();
+}
 }
 for (const record of visible) {
 const element = record.view.article;
 if (element.matches(":hover")) this.pause(record, "hover");
 this.pause(record, "focus");
 } else this.resume(record, "focus");
 this.announce(record);
 this.schedule(record);
 }
+this.requestLayout();
 }
 }
 const existing = customElements.get("zen-notifications");
 if (!existing) {