estreui 1.3.0 → 1.4.0

package/index.html

@@ -64,6 +64,7 @@
     <script defer type="text/javascript" src="./scripts/estreUi-core.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-dialog.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-notation.js"></script>
+    <script defer type="text/javascript" src="./scripts/estreUi-notification.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-pageModel.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-pageManager.js"></script>
     <script defer type="text/javascript" src="./scripts/estreUi-handles.js"></script>

package/managedOverlay.html

@@ -199,12 +199,13 @@
             <div class="container top" data-container-id="noti" data-static="1" data-on-top="1">
                 <article class="" data-article-id="noti" data-static="" data-multi-instance="1" data-instance-origin="">
                     <div class="h_icon_set post_block" data-bind-attr="interactive@data-interactive" data-bind-style="bgColor@--bg-color">
-                        <div class="icon_place"><img data-bind-attr="iconSrc@src" /></div>
+                        <div class="icon_place"><img data-bind-attr="largeIconSrc@src" /></div>
                         <div class="content_place">
                             <div class="title_line"><span data-bind="contentTitle"></span></div>
+                            <div class="subtitle_line"><span data-bind="subtitle"></span></div>
                             <div class="h_icon_Set content_area">
                                 <div class="content_place" data-bind="content" data-bind-style="textColor@--color textSize@--size textWeight@--weight"></div>
-                                <div class="icon_place"><img data-bind-attr="subIconSrc@src" /></div>
+                                <div class="icon_place"><img data-bind-attr="iconSrc@src" /></div>
                             </div>
                         </div>
                     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "estreui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "EstreUI Core Library - A comprehensive UI framework for web applications",
   "main": "scripts/estreUi.js",
   "files": [

package/scripts/estreUi-dialog.js

@@ -502,10 +502,7 @@ const arrived = function (instanceOrigin) {
 }
 
 
-
-const noti = function (title, htmlContent, onTakeInteraction = (intent) => {}, mainIconSrc, subIconSrc) {
-    //<= To do implement
-}
+// noti() moved to estreUi-notification.js (roadmap #009).
 
 
 // ======================================================================

package/scripts/estreUi-main.js

@@ -283,6 +283,7 @@ const estreUi = {
             this.setPanelSwipeHandler();
             this.scheduleOverwatchPanelClock();
             this.initOverwatchPanelHandles();
+            this.initOverwatchPanelTimeline();
             this.updateDarkModeToggleWidgets();
             return this.initStaticPanels(subTerm);
         }
@@ -729,6 +730,16 @@ const estreUi = {
         new EstreDynamicSectionBlockHandle($block[0], host).init();
     },
 
+    // Mounts EstreTimelineView onto overwatchPanel #timeline slot (roadmap #010).
+    // Timeline persists entries left by checkOut()ed noti banners.
+    initOverwatchPanelTimeline() {
+        if (typeof EstreTimelineView === "undefined") return;
+        if (this.$overwatchPanel == null || this.$overwatchPanel.length < 1) return;
+        const $timeline = this.$overwatchPanel.find("#timeline");
+        if ($timeline.length < 1) return;
+        this.timelineView = new EstreTimelineView($timeline);
+    },
+
     setOverwatchPanelClock() {
         if (this.$panelClock == null) return;
         const now = new Date();

package/scripts/estreUi-notification.js

@@ -0,0 +1,539 @@
+/*
+    EstreUI rimwork — Notification Banner
+    Part of the split from estreUi.js (roadmap #002 phase 2; roadmap #009).
+
+    This file is loaded as a plain <script> tag and shares the global scope
+    with the other estreUi-*.js files. Load order matters: see index.html.
+*/
+
+// MODULE: Notification -- EstreNotificationManager, noti(), push adapters
+// ======================================================================
+
+/**
+ * iOS-style notification banner queue manager.
+ * Mirrors EstreNotationManager (note toast) — one-at-a-time, per-item showTime.
+ */
+class EstreNotificationManager {
+
+    // static
+    static #page = "popNoti";
+
+    static #queue = [];
+    static current = null;
+
+    static postHandle = null;
+
+    /** Default auto-dismiss ms for banners (longer than note toast). */
+    static defaultShowTime = 4500;
+
+    static get noInteraction() { return (intent) => {}; }
+
+    /**
+     * Enqueue a banner.
+     * @param {object} options - Normalized banner options (see EstreNotificationManager#data).
+     * @returns {Promise<EstreNotificationManager>|undefined}
+     */
+    static post(options) {
+        if (options != null && typeof options === "object") {
+            if (this.#isTimelineVisible()) {
+                this.#appendToTimelineDirect(options);
+                return Promise.resolve(null);
+            }
+            return new Promise((resolve) => {
+                const it = new EstreNotificationManager(options, resolve);
+                this.#queue.push(it);
+                if (window.isDebug) console.log(this.#page + " posted: ", it);
+                postQueue(_ => this.postHandler());
+            });
+        }
+    }
+
+    /**
+     * True when the overwatchPanel is open and the timeline section is currently showing.
+     * In that case banner posts are diverted into the timeline list directly (iOS behavior).
+     * @returns {boolean}
+     */
+    static #isTimelineVisible() {
+        if (typeof estreUi === "undefined" || !estreUi.isOpenOverwatchPanel) return false;
+        if (typeof EstreTimelineStore === "undefined") return false;
+        return estreUi.$overwatchPanel.find('.host_item[data-showing="1"][data-id="timeline"]').length > 0;
+    }
+
+    /**
+     * Build a timeline entry directly from noti options and append to the store.
+     * Mirrors the shape used in checkOut().
+     */
+    static #appendToTimelineDirect(options) {
+        const ui = options.ui ?? {};
+        EstreTimelineStore.append({
+            postedAt: Date.now(),
+            title: options.title,
+            body: options.body,
+            subtitle: options.subtitle,
+            iconSrc: options.icon,
+            largeIconSrc: options.largeIcon,
+            url: options.url,
+            payload: options.data,
+            bgColor: ui.bgColor,
+            textColor: ui.textColor,
+        });
+    }
+
+    static postHandler() {
+        if (window.isDebug) console.log("queue: ", this.#queue);
+        if (this.postHandle == null && this.current == null && this.#queue.length > 0) {
+            const handle = Date.now();
+            this.postHandle = handle;
+            const current = this.#queue.splice(0, 1)[0];
+            current.data.posted = handle;
+            if (window.isDebug) console.log(this.#page + " bring: ", current);
+            return pageManager.bringPage("!" + this.#page, current, handle);
+        }
+    }
+
+    /** True when at least one banner is waiting to be brought. */
+    static get hasQueued() { return this.#queue.length > 0; }
+
+    /**
+     * Release the queue lock at close-start so the next banner can begin its
+     * enter animation in parallel with the outgoing banner's exit animation.
+     * Does the timeline-append + resolver work; checkOut() becomes a noop
+     * afterwards via the `_earlyCheckedOut` flag.
+     */
+    static beginCheckOut(intent) {
+        if (intent == null || intent._earlyCheckedOut) return;
+        if (intent.data.posted != null && this.postHandle == intent.data.posted) {
+            if (this.current == intent) this.current = null;
+            this.postHandle = null;
+            if (typeof EstreTimelineStore !== "undefined") {
+                const d = intent.data;
+                EstreTimelineStore.append({
+                    postedAt: d.posted,
+                    title: d.contentTitle,
+                    body: d.content,
+                    subtitle: d.subtitle,
+                    iconSrc: d.iconSrc,
+                    largeIconSrc: d.largeIconSrc,
+                    url: d.url,
+                    payload: d.payload,
+                    bgColor: d.bgColor,
+                    textColor: d.textColor,
+                });
+            }
+            intent._earlyCheckedOut = true;
+            intent.resolver?.(intent);
+            if (window.isDebug) console.log(this.#page + " early checked out: ", intent);
+            postQueue(_ => this.postHandler());
+        }
+    }
+
+    static checkOut(intent) {
+        if (intent?._earlyCheckedOut) return;
+        if (intent.data.posted != null && this.postHandle == intent.data.posted) {
+            if (this.current == intent) {
+                this.current = null;
+            }
+            this.postHandle = null;
+            if (window.isDebug) console.log(this.#page + " checked out: ", intent);
+            postQueue(_ => this.postHandler());
+        }
+        if (typeof EstreTimelineStore !== "undefined") {
+            const d = intent.data;
+            EstreTimelineStore.append({
+                postedAt: d.posted,
+                title: d.contentTitle,
+                body: d.content,
+                subtitle: d.subtitle,
+                iconSrc: d.iconSrc,
+                largeIconSrc: d.largeIconSrc,
+                url: d.url,
+                payload: d.payload,
+                bgColor: d.bgColor,
+                textColor: d.textColor,
+            });
+        }
+        intent.resolver?.(intent);
+    }
+
+
+    // instance property
+    data = {
+        posted: undefined,
+        contentTitle: undefined,
+        subtitle: undefined,
+        content: undefined,
+        showTime: undefined,
+        interactive: undefined,
+
+        // icons
+        iconSrc: undefined,      // small / sub icon
+        largeIconSrc: undefined, // large / main icon (subIconSrc naming kept for template)
+
+        // payload / routing
+        buttons: undefined,
+        url: undefined,
+        payload: undefined,
+
+        // visual tokens
+        textSize: undefined,
+        textWeight: undefined,
+        textColor: undefined,
+        bgColor: undefined,
+    };
+
+    onTakeInteraction = undefined;
+    resolver = undefined;
+
+    /**
+     * @param {object} options - Normalized banner options.
+     * @param {Function} resolver - Promise resolver injected by post().
+     */
+    constructor(options, resolver) {
+        const d = this.data;
+        d.contentTitle = options.title;
+        d.content = options.body;
+        d.subtitle = options.subtitle;
+        d.iconSrc = options.icon;
+        d.largeIconSrc = options.largeIcon;
+        d.buttons = options.buttons;
+        d.url = options.url;
+        d.payload = options.data;
+
+        const ui = options.ui ?? {};
+        d.showTime = ui.showTime ?? EstreNotificationManager.defaultShowTime;
+        d.textSize = ui.textSize;
+        d.textWeight = ui.textWeight;
+        d.textColor = ui.textColor;
+        d.bgColor = ui.bgColor;
+
+        this.onTakeInteraction = options.onTakeInteraction ?? EstreNotificationManager.noInteraction;
+        const hasInteraction = this.onTakeInteraction !== EstreNotificationManager.noInteraction
+            || options.url != null
+            || (Array.isArray(options.buttons) && options.buttons.length > 0);
+        d.interactive = (ui.interactive ?? hasInteraction) ? "" : undefined;
+
+        this.resolver = resolver;
+    }
+}
+
+/**
+ * Post an iOS-style notification banner.
+ *
+ * Positional form (frequency-first, matches the original stub):
+ *   noti(title, body, onTakeInteraction, mainIconSrc, subIconSrc)
+ *
+ * Object overload — passes through to EstreNotificationManager.post():
+ *   noti({ title, body, subtitle, icon, largeIcon, data, url, buttons, onTakeInteraction, ui })
+ *
+ * @param {string|object} title - Title text, or the full options object (overload).
+ * @param {string} [body] - Body text (HTML-capable).
+ * @param {Function} [onTakeInteraction] - Tap callback. intent is passed.
+ * @param {string} [mainIconSrc] - Large/leading icon src (maps to largeIcon).
+ * @param {string} [subIconSrc] - Small/trailing icon src (maps to icon).
+ * @returns {Promise<EstreNotificationManager>|undefined}
+ */
+const noti = function (title, body, onTakeInteraction, mainIconSrc, subIconSrc) {
+    if (title != null && typeof title === "object") {
+        return EstreNotificationManager.post(title);
+    }
+    return EstreNotificationManager.post({
+        title,
+        body,
+        onTakeInteraction,
+        largeIcon: mainIconSrc,
+        icon: subIconSrc,
+    });
+}
+
+/**
+ * FCM payload adapter.
+ * Accepts either the full message (`{ notification, data }`) or the `notification` object directly.
+ * @param {object} payload
+ */
+noti.fromFcm = function (payload) {
+    if (payload == null) return;
+    const n = payload.notification ?? payload;
+    const data = payload.data ?? (payload !== n ? undefined : undefined);
+    return noti({
+        title: n.title,
+        body: n.body,
+        icon: n.icon,
+        largeIcon: n.image,
+        url: n.click_action ?? payload.fcm_options?.link,
+        data,
+    });
+}
+
+/**
+ * APNs payload adapter.
+ * Accepts the outer aps-bearing object (`{ aps: { alert: ... }, ...custom }`).
+ * `alert` may be a string or object.
+ * @param {object} payload
+ */
+noti.fromApns = function (payload) {
+    if (payload == null) return;
+    const aps = payload.aps ?? {};
+    const alert = typeof aps.alert === "string" ? { body: aps.alert } : (aps.alert ?? {});
+    return noti({
+        title: alert.title,
+        body: alert.body,
+        subtitle: alert.subtitle,
+        data: payload,
+    });
+}
+
+/**
+ * OneSignal payload adapter.
+ * `headings` / `contents` may be locale maps; first value is picked.
+ * @param {object} payload
+ */
+noti.fromOneSignal = function (payload) {
+    if (payload == null) return;
+    const pick = (v) => (v != null && typeof v === "object") ? Object.values(v)[0] : v;
+    return noti({
+        title: pick(payload.headings),
+        body: pick(payload.contents),
+        subtitle: pick(payload.subtitle),
+        largeIcon: payload.big_picture ?? payload.chrome_big_picture,
+        icon: payload.small_icon ?? payload.chrome_icon,
+        url: payload.url,
+        data: payload.data ?? payload.additionalData,
+    });
+}
+
+
+/**
+ * Persistent history for dismissed notification banners (roadmap #010).
+ * Backed by ECLS (localStorage, JSON). Retains up to maxEntries for ttlMs.
+ */
+class EstreTimelineStore {
+
+    static #key = "timelineEntries";
+    static maxEntries = 100;
+    static ttlMs = 7 * 24 * 60 * 60 * 1000;
+
+    static #listeners = new Set();
+
+    /** @returns {Array<object>} entries newest-first, TTL-pruned. */
+    static load() {
+        const raw = ECLS.get(this.#key, []);
+        if (!Array.isArray(raw)) return [];
+        const now = Date.now();
+        return raw.filter(it => it != null && (now - (it.postedAt ?? 0)) < this.ttlMs);
+    }
+
+    static save(entries) {
+        ECLS.set(this.#key, entries);
+    }
+
+    /**
+     * Append an entry (newest-first). Assigns id/postedAt if missing. Enforces cap + TTL.
+     * @param {object} entry
+     */
+    static append(entry) {
+        if (entry == null) return;
+        const now = Date.now();
+        const normalized = { ...entry,
+            id: entry.id ?? String(entry.postedAt ?? now),
+            postedAt: entry.postedAt ?? now,
+        };
+        const entries = this.load().filter(it => it.id !== normalized.id);
+        entries.unshift(normalized);
+        if (entries.length > this.maxEntries) entries.length = this.maxEntries;
+        this.save(entries);
+        this.#emit();
+    }
+
+    static remove(id) {
+        const entries = this.load().filter(it => it.id !== id);
+        this.save(entries);
+        this.#emit();
+    }
+
+    static clear() {
+        this.save([]);
+        this.#emit();
+    }
+
+    /**
+     * Subscribe to store changes. Callback receives the current entries array.
+     * @param {Function} cb
+     * @returns {Function} unsubscribe
+     */
+    static subscribe(cb) {
+        this.#listeners.add(cb);
+        return () => this.#listeners.delete(cb);
+    }
+
+    static #emit() {
+        const entries = this.load();
+        for (const cb of this.#listeners) {
+            try { cb(entries); } catch (ex) { if (window.isLogging) console.error(ex); }
+        }
+    }
+}
+
+
+/**
+ * Renders EstreTimelineStore entries into a host element (e.g. overwatchPanel #timeline).
+ * Groups by date bucket (Today / Yesterday / Older), item visuals share banner styles.
+ */
+class EstreTimelineView {
+
+    #$host;
+    #unsubscribe;
+    #lastIds = new Set();
+
+    /**
+     * @param {Element|JQuery} host - Container element for the list.
+     */
+    constructor(host) {
+        this.#$host = host instanceof jQuery ? host : $(host);
+        this.#$host.addClass("timeline_host");
+        this.render(EstreTimelineStore.load());
+        this.#unsubscribe = EstreTimelineStore.subscribe((entries) => this.render(entries));
+    }
+
+    destroy() {
+        this.#unsubscribe?.();
+        this.#$host.empty();
+        this.#$host.removeClass("timeline_host");
+    }
+
+    render(entries) {
+        const $host = this.#$host;
+        $host.empty();
+
+        if (!entries || entries.length === 0) {
+            this.#lastIds = new Set();
+            $host.append('<div class="timeline_empty">No notifications</div>');
+            return;
+        }
+
+        const currentIds = new Set(entries.map(e => e.id));
+        const lastIds = this.#lastIds;
+        const isFirstRender = lastIds.size === 0;
+
+        const groups = this.#groupByDate(entries);
+        for (let gi = 0; gi < groups.length; gi++) {
+            const group = groups[gi];
+            const $group = $('<div class="timeline_group"></div>');
+            const $header = $('<div class="timeline_group_header"></div>');
+            $header.append($('<span class="timeline_group_label"></span>').text(group.label));
+            if (gi === 0) {
+                const $btn = $('<button type="button" class="timeline_clear_all">Clear All</button>');
+                $btn.on("click", (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.#clearAllWithCascade();
+                });
+                $header.append($btn);
+            }
+            $group.append($header);
+            for (const entry of group.entries) {
+                const isNew = !isFirstRender && !lastIds.has(entry.id);
+                $group.append(this.#buildItem(entry, isNew));
+            }
+            $host.append($group);
+        }
+
+        this.#lastIds = currentIds;
+    }
+
+    #clearAllWithCascade() {
+        const $items = this.#$host.find(".timeline_item");
+        if ($items.length === 0) {
+            EstreTimelineStore.clear();
+            return;
+        }
+        const stagger = 50;
+        const maxDelay = 400;
+        $items.each(function (i) {
+            const delay = Math.min(i * stagger, maxDelay);
+            $(this).css("--exit-delay", delay + "ms").addClass("timeline_item_exit");
+        });
+        setTimeout(() => EstreTimelineStore.clear(), maxDelay + 300);
+    }
+
+    #groupByDate(entries) {
+        const now = new Date();
+        const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+        const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
+
+        const today = [], yesterday = [], older = [];
+        for (const entry of entries) {
+            const t = entry.postedAt ?? 0;
+            if (t >= startOfToday) today.push(entry);
+            else if (t >= startOfYesterday) yesterday.push(entry);
+            else older.push(entry);
+        }
+
+        const groups = [];
+        if (today.length) groups.push({ label: "Today", entries: today });
+        if (yesterday.length) groups.push({ label: "Yesterday", entries: yesterday });
+        if (older.length) groups.push({ label: "Older", entries: older });
+        return groups;
+    }
+
+    #buildItem(entry, isNew = false) {
+        const $item = $('<div class="h_icon_set post_block timeline_item"></div>');
+        $item.attr("data-id", entry.id);
+        if (entry.bgColor) $item.css("--bg-color", entry.bgColor);
+        if (isNew) $item.addClass("timeline_item_enter");
+
+        if (entry.largeIconSrc) {
+            const $mainIcon = $('<div class="icon_place"></div>');
+            $mainIcon.append($('<img />').attr("src", entry.largeIconSrc));
+            $item.append($mainIcon);
+        }
+
+        const $content = $('<div class="content_place"></div>');
+        if (entry.title) $content.append($('<div class="title_line"></div>').append($('<span></span>').text(entry.title)));
+        if (entry.subtitle) $content.append($('<div class="subtitle_line"></div>').append($('<span></span>').text(entry.subtitle)));
+        if (entry.body || entry.iconSrc) {
+            const $area = $('<div class="content_area"></div>');
+            if (entry.body) {
+                const $body = $('<div class="content_place"></div>').html(entry.body);
+                if (entry.textColor) $body.css("--color", entry.textColor);
+                $area.append($body);
+            }
+            if (entry.iconSrc) {
+                const $subIcon = $('<div class="icon_place"></div>');
+                $subIcon.append($('<img />').attr("src", entry.iconSrc));
+                $area.append($subIcon);
+            }
+            $content.append($area);
+        }
+        $item.append($content);
+
+        $item.on("click", (e) => {
+            e.preventDefault();
+            if (entry.url) {
+                window.open(entry.url, "_blank", "noopener");
+            }
+        });
+
+        // Left→right swipe to delete. Opposite direction to the parent's horizontal
+        // scroll-snap (quick panel switch), so the two gestures don't collide.
+        if (typeof EstreSwipeHandler !== "undefined") {
+            new EstreSwipeHandler($item)
+                .setStopPropagation()
+                .unuseY()
+                .setThresholdX(1)
+                .setDropStrayed(false)
+                .setResponseBound($item)
+                .setOnUp(function (grabX, grabY, handled, canceled, directed) {
+                    if (!handled) return;
+                    if (this.handledDirection === "right" && grabX > 80) {
+                        $item.css("--exit-delay", "0ms").addClass("timeline_item_exit");
+                        setTimeout(() => EstreTimelineStore.remove(entry.id), 300);
+                    }
+                });
+        }
+
+        return $item;
+    }
+}
+
+
+// ======================================================================

package/scripts/estreUi-pageModel.js

@@ -3723,7 +3723,147 @@ class EstreUiPage {
 
         },
 
-        "$i&o=notification#noti@noti^": class extends EstrePageHandler { },
+        "$i&o=notification#noti@noti^": class extends EstrePageHandler {
+            $postBlock;
+            $mainIconPlace;
+            $subIconPlace;
+            $titleLine;
+            $subtitleLine;
+            $contentLine;
+            swipeHandler;
+            #closeTimer;
+            #closing = false;
+
+            #applyIntentToBlock(intent) {
+                const data = intent?.data ?? {};
+                this.$mainIconPlace.toggle(data.largeIconSrc != null && data.largeIconSrc !== "");
+                this.$subIconPlace.toggle(data.iconSrc != null && data.iconSrc !== "");
+                this.$titleLine.toggle(data.contentTitle != null && data.contentTitle !== "");
+                this.$subtitleLine.toggle(data.subtitle != null && data.subtitle !== "");
+                this.$contentLine.toggle(data.content != null && data.content !== "");
+            }
+
+            #resetCloseTimer(handle) {
+                if (this.#closeTimer != null) {
+                    clearTimeout(this.#closeTimer);
+                    this.#closeTimer = null;
+                }
+                const showTime = handle.intent?.data?.showTime ?? EstreNotificationManager.defaultShowTime;
+                this.#closeTimer = setTimeout(_ => this.#beginClose(handle), showTime);
+            }
+
+            #beginClose(handle) {
+                if (this.#closing) return;
+                this.#closing = true;
+                if (this.#closeTimer != null) {
+                    clearTimeout(this.#closeTimer);
+                    this.#closeTimer = null;
+                }
+
+                if (!EstreNotificationManager.hasQueued) {
+                    handle.close();
+                    return;
+                }
+
+                const $block = this.$postBlock;
+                const blockEl = $block[0];
+                if (blockEl == null) { handle.close(); return; }
+                const $article = $block.parent();
+                const articleEl = $article[0];
+                const rect = blockEl.getBoundingClientRect();
+                const articleRect = articleEl.getBoundingClientRect();
+                const $ghost = $block.clone(false).removeClass("banner_incoming");
+                $ghost.addClass("banner_ghost_exit");
+                $ghost.css({
+                    position: "absolute",
+                    left: (rect.left - articleRect.left) + "px",
+                    top: (rect.top - articleRect.top) + "px",
+                    width: rect.width + "px",
+                    margin: 0,
+                    pointerEvents: "none",
+                });
+                $article.append($ghost);
+                setTimeout(() => $ghost.remove(), 550);
+
+                $block.css({ visibility: "hidden", pointerEvents: "none" });
+
+                EstreNotificationManager.beginCheckOut(handle.intent);
+            }
+
+            onBring(handle) {
+                const $host = handle.$host;
+                this.$postBlock = $host.find(".post_block");
+                this.$mainIconPlace = this.$postBlock.children(".icon_place");
+                this.$titleLine = this.$postBlock.find("> .content_place > .title_line");
+                this.$subtitleLine = this.$postBlock.find("> .content_place > .subtitle_line");
+                this.$contentLine = this.$postBlock.find("> .content_place > .content_area > .content_place");
+                this.$subIconPlace = this.$postBlock.find("> .content_place > .content_area > .icon_place");
+
+                this.#applyIntentToBlock(handle.intent);
+
+                EstreNotificationManager.current = handle.intent;
+                if (window.isVerbosely) console.log("pushed", handle.intent);
+            }
+
+            onOpen(handle) {
+                this.#closing = false;
+                this.$postBlock.click((e) => {
+                    e.preventDefault();
+
+                    if (window.isVerbosely) console.log("clicked: ", handle.intent);
+                    handle.intent?.onTakeInteraction?.(handle.intent);
+                    this.#beginClose(handle);
+
+                    return false;
+                });
+
+                const self = this;
+                this.swipeHandler = new EstreSwipeHandler(this.$postBlock)
+                    .setStopPropagation()
+                    .setPreventDefault()
+                    .unuseX()
+                    .setThresholdY(1)
+                    .setDropStrayed(false)
+                    .setResponseBound(this.$postBlock)
+                    .setOnUp(function (grabX, grabY, handled, canceled, directed) {
+                        if (!handled) return;
+                        if (this.handledDirection === "up" && Math.abs(grabY) > 20) {
+                            self.#beginClose(handle);
+                        } else if (this.handledDirection === "down" && Math.abs(grabY) > 40) {
+                            handle.intent?.onTakeInteraction?.(handle.intent);
+                            self.#beginClose(handle);
+                        }
+                    });
+
+                this.#resetCloseTimer(handle);
+                if (window.isVerbosely) console.log("showing: ", handle.intent);
+            }
+
+            onIntentUpdated(handle, intent) {
+                // Queue-chain handover: previous banner's exit is playing on a
+                // detached ghost clone; this article reuses the same DOM with
+                // fresh content + a restart-triggered enter animation.
+                this.#closing = false;
+                if (intent?.data != null) this.#applyIntentToBlock(intent);
+                EstreNotificationManager.current = handle.intent;
+
+                const $block = this.$postBlock;
+                $block.css({ visibility: "", pointerEvents: "" });
+                $block.removeClass("banner_incoming");
+                void $block[0]?.offsetWidth;
+                $block.addClass("banner_incoming");
+
+                this.#resetCloseTimer(handle);
+            }
+
+            onClose(handle) {
+                if (this.#closeTimer != null) {
+                    clearTimeout(this.#closeTimer);
+                    this.#closeTimer = null;
+                }
+                EstreNotificationManager.checkOut(handle.intent);
+            }
+        },
         "$i&o=notification#note@note^": class extends EstrePageHandler {
             $postBlock;
 

package/serviceWorker.js

@@ -1,4 +1,4 @@
-const INSTALLATION_VERSION_NAME = "1.3.0-r20260421";
+const INSTALLATION_VERSION_NAME = "1.4.0-r20260424";
 // ^^ Use for check new update "Native application(webview) version(or Android/iOS version combo) - PWA release version"
 // ex) "1.0.1/1.0.0-r20251101k"
 
@@ -22,7 +22,7 @@ const INSTALLATION_FILE_LIST = [
 
 
 // Common files cache - Be changes some time but, well not changed very often
-const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260421";
+const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260424";
 
 const COMMON_FILES_TO_CACHE = [
     "./",
@@ -51,6 +51,7 @@ const COMMON_FILES_TO_CACHE = [
     "./scripts/estreUi-core.js",
     "./scripts/estreUi-dialog.js",
     "./scripts/estreUi-notation.js",
+    "./scripts/estreUi-notification.js",
     "./scripts/estreUi-pageModel.js",
     "./scripts/estreUi-pageManager.js",
     "./scripts/estreUi-handles.js",

package/styles/estreUiCore.css

@@ -129,7 +129,11 @@ nav#overwatchPanel { --grab-y: 0px; --panel-block-height: calc(100vh - var(--top
 nav#overwatchPanel > header#panelHeader,
 nav#overwatchPanel > .dynamic_section_host,
 nav#overwatchPanel > .dynamic_section_block,
-nav#overwatchPanel > section#panelGrabArea { pointer-events: auto; }
+nav#overwatchPanel > section#panelGrabArea { position: relative; pointer-events: auto; }
+nav#overwatchPanel > header#panelHeader { z-index: 4; }
+nav#overwatchPanel > .dynamic_section_host { z-index: 3; }
+nav#overwatchPanel > .dynamic_section_block { z-index: 2; }
+nav#overwatchPanel > section#panelGrabArea { z-index: 1; }
 nav#overwatchPanel > header#panelHeader { display: flex; flex-direction: row; align-items: baseline; gap: 0.5em; padding: calc(var(--top-pad) + 4px) var(--basic-ui-inset-h) 4px; flex-shrink: 0; background-color: rgba(var(--cabr) / 60%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(-100%); transition-duration: 0.3s; }
 nav#overwatchPanel > header#panelHeader > #panelClock { font-size: 1.125rem; font-weight: 600; }
 nav#overwatchPanel > header#panelHeader > #panelDate { font-size: 0.875rem; opacity: 0.75; }
@@ -150,13 +154,20 @@ nav#overwatchPanel[data-opened="1"] > section#panelGrabArea { opacity: 1; backgr
 nav#overwatchPanel[data-on-grab="1"] > header#panelHeader,
 nav#overwatchPanel[data-on-grab="1"] > .dynamic_section_host,
 nav#overwatchPanel[data-on-grab="1"] > .dynamic_section_block { transition-delay: 0s; transition-duration: 0s; }
-nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > header#panelHeader { transform: translateY(calc(-100% + max(var(--grab-y), 0px))); }
-nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > .dynamic_section_host { transform: translateY(calc(-100% - var(--panel-block-height) + max(var(--grab-y), 0px))); }
-nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > .dynamic_section_block { transform: translateY(calc(-100vh - var(--panel-block-height) + max(var(--grab-y), 0px))); }
+nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > header#panelHeader { transform: translateY(calc(-100% + min(max(var(--grab-y), 0px), 100%))); }
+nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > .dynamic_section_host { transform: translateY(calc(-100% - var(--panel-block-height) + min(max(var(--grab-y), 0px), calc(100% + var(--panel-block-height))))); }
+nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > .dynamic_section_block { transform: translateY(calc(-100vh - var(--panel-block-height) + min(max(var(--grab-y), 0px), calc(100vh + var(--panel-block-height))))); }
 nav#overwatchPanel[data-opened="1"][data-on-grab="1"] > header#panelHeader,
 nav#overwatchPanel[data-opened="1"][data-on-grab="1"] > .dynamic_section_host,
 nav#overwatchPanel[data-opened="1"][data-on-grab="1"] > .dynamic_section_block { transform: translateY(min(var(--grab-y), 0px)); }
 
+/* Tablet+ (≥740 wide) — surface both block_items side-by-side instead of tab swipe. */
+@media all and (min-width: 740px) {
+    nav#overwatchPanel > .dynamic_section_host { display: none; }
+    nav#overwatchPanel > .dynamic_section_block { scroll-snap-type: none; overflow-x: hidden; }
+    nav#overwatchPanel > .dynamic_section_block > .block_item { width: auto; flex: 1 1 0; min-width: 0; }
+}
+
 /* Top swipe trigger strip. Sits above fixedTop (z-index 130) so the downward swipe can fire while the panel is closed.
    Height stays inside the safe area (status bar / notch) plus a small 8px bleed into fixedTop so the strip
    does not cover tappable fixedTop controls. */
@@ -171,6 +182,37 @@ nav#overwatchPanel[data-opened="1"] ~ section#panelTrigger { pointer-events: non
 #darkModeToggle[data-dark-mode-state="light"] { background-color: rgba(var(--cabr) / 50%); }
 #darkModeToggle[data-dark-mode-state="dark"] { background-color: rgba(var(--cadm) / 50%); }
 
+/* Timeline (overwatchPanel #timeline) — roadmap #010. Reuses .post_block visuals from estreUiCore2.css. */
+nav#overwatchPanel #timeline { --bg-color: rgb(var(--cabr) / 70%); box-sizing: border-box; padding: 8px var(--basic-ui-inset-h) calc(8px + var(--bottom-safe-pad)); }
+nav#overwatchPanel #timeline > .timeline_host { display: flex; flex-flow: column nowrap; gap: 10px; }
+nav#overwatchPanel #timeline .timeline_group { display: flex; flex-flow: column nowrap; gap: 6px; }
+nav#overwatchPanel #timeline .timeline_group_header { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 2px; font-size: 0.75rem; font-weight: 600; color: rgb(var(--ca) / 70%); letter-spacing: 0.02em; text-transform: uppercase; }
+nav#overwatchPanel #timeline .timeline_group_header > .timeline_group_label { flex: 1 1 auto; min-width: 0; }
+nav#overwatchPanel #timeline .timeline_clear_all { flex: 0 0 auto; margin-left: 8px; padding: 3px 10px; border: none; border-radius: 10px; background-color: rgb(var(--ca) / 10%); color: rgb(var(--ca) / 80%); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
+nav#overwatchPanel #timeline .timeline_clear_all:active { background-color: rgb(var(--ca) / 25%); }
+nav#overwatchPanel #timeline .timeline_item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; box-sizing: border-box; border-radius: 14px; background-color: var(--bg-color); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); box-shadow: 1px 2px 4px 1px rgb(var(--ca) / 18%); cursor: pointer; user-select: none; }
+nav#overwatchPanel #timeline .timeline_item > .icon_place { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+nav#overwatchPanel #timeline .timeline_item > .icon_place > img { width: 100%; height: 100%; object-fit: cover; }
+nav#overwatchPanel #timeline .timeline_item > .content_place { flex: 1 1 auto; min-width: 0; --color: var(--color-text); --size: 0.9375rem; --weight: 400; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .title_line { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); line-height: 1.25em; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .subtitle_line { font-size: 0.8125rem; font-weight: 400; color: rgb(var(--ca) / 70%); line-height: 1.25em; margin-top: 1px; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .content_area { display: flex; gap: 8px; align-items: flex-start; margin-top: 3px; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .content_area > .content_place { flex: 1 1 auto; min-width: 0; color: var(--color); font-size: var(--size); font-weight: var(--weight); line-height: 1.3em; word-break: break-word; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .content_area > .icon_place { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; overflow: hidden; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .content_area > .icon_place > img { width: 100%; height: 100%; object-fit: cover; }
+nav#overwatchPanel #timeline .timeline_empty { padding: 32px 16px; text-align: center; font-size: 0.875rem; color: rgb(var(--ca) / 60%); }
+nav#overwatchPanel #timeline .timeline_item.timeline_item_enter { animation: timeline-item-enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: top center; }
+@keyframes timeline-item-enter {
+    0%   { opacity: 0; transform: translateY(-14px) scale(0.96); }
+    60%  { opacity: 1; }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+nav#overwatchPanel #timeline .timeline_item.timeline_item_exit { animation: timeline-item-exit 0.3s ease-in both; animation-delay: var(--exit-delay, 0ms); pointer-events: none; }
+@keyframes timeline-item-exit {
+    0%   { opacity: 1; transform: translateX(0); }
+    100% { opacity: 0; transform: translateX(60px); }
+}
+
 /* root tabs (bottom) */
 footer#fixedBottom { position: fixed; display: flex; flex-direction: row; flex-wrap: nowrap; z-index: 110; bottom: 0; left: 0; right: 0; height: var(--rootbar-height); margin: 0; padding-bottom: var(--bottom-safe-pad); justify-content: center; background-color: var(--color-boundary-foggy-o66); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); justify-content: center; user-select: none; }
 footer#fixedBottom nav { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; height: var(--rootbar-height); flex-grow: 1; flex-shrink: 1; user-select: none; }

package/styles/estreUiCore2.css

@@ -290,7 +290,31 @@ nav#managedOverlay > section#notification > div.container > article { position:
 nav#managedOverlay > section#notification > div.container > article:not(:is([data-on-top^="1"], [data-on-top^="0"])) { display: none; }
 nav#managedOverlay > section#notification > div.container > article:not([data-on-top="1"]) { opacity: 0; }
 nav#managedOverlay > section#notification > div.container[data-container-id="noti"] { top: var(--top-pad); }
-nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article { top: 32px; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article { top: 0; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 0.45s; will-change: transform, opacity; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article[data-on-top="1"] { top: 12px; transform: translateY(0); }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article[data-on-top="0"] { top: 12px; transform: translateY(calc(-100% - var(--top-pad) - 12px)); }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block { display: flex; align-items: center; gap: 10px; padding: 10px 14px; max-width: calc(100vw - var(--left-pad) - var(--right-pad) - 16px); min-width: min(320px, calc(100vw - var(--left-pad) - var(--right-pad) - 16px)); box-sizing: border-box; border-radius: 18px; background-color: var(--bg-color); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); box-shadow: 1px 4px 8px 2px rgb(var(--ca) / 25%); cursor: pointer; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block:not([data-interactive]) { cursor: default; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .icon_place { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .icon_place > img { width: 100%; height: 100%; object-fit: cover; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place { flex: 1 1 auto; min-width: 0; --color: var(--color-text); --size: 0.9375rem; --weight: 400; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .title_line { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); line-height: 1.25em; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .subtitle_line { font-size: 0.8125rem; font-weight: 400; color: rgb(var(--ca) / 70%); line-height: 1.25em; margin-top: 1px; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .content_area { display: flex; gap: 8px; align-items: flex-start; margin-top: 3px; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .content_area > .content_place { flex: 1 1 auto; min-width: 0; color: var(--color); font-size: var(--size); font-weight: var(--weight); line-height: 1.3em; word-break: break-word; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .content_area > .icon_place { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; overflow: hidden; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .content_area > .icon_place > img { width: 100%; height: 100%; object-fit: cover; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block { position: relative; z-index: 1; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block.banner_incoming { animation: banner-incoming 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block.banner_ghost_exit { z-index: 0; animation: banner-ghost-exit 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; pointer-events: none; }
+@keyframes banner-incoming {
+    0%   { opacity: 0; transform: translateY(calc(-100% - var(--top-pad) - 12px)); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes banner-ghost-exit {
+    0%   { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(calc(-100% - var(--top-pad) - 12px)); }
+}
 nav#managedOverlay > section#notification > div.container[data-container-id="note"] { bottom: var(--bottom-pad); }
 nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article { bottom: 0; }
 nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article:is([data-on-top^="1"], [data-on-top="0"]) { }