estreui 1.4.0 → 1.5.0

package/scripts/estreUi-pageModel.js

@@ -45,6 +45,80 @@ class EstrePageHandle {
 
     get title() { return this.$host?.attr(eds.title); }
 
+    /**
+     * Cover-bar entry label override. Falls back to `title` (= `data-title`) when unset.
+     * Set via `setCoverTitle(value)`; pass `undefined` to clear the override.
+     * @type {string|undefined}
+     */
+    #coverTitle = undefined;
+    get coverTitle() { return this.#coverTitle ?? this.title; }
+    setCoverTitle(value) {
+        this.#coverTitle = value;
+        if (this.#coverEntryToken != null) {
+            estreUi.coverBarHandle?.updateEntry(this.#coverEntryToken, { title: this.coverTitle });
+        }
+    }
+
+    /**
+     * Cover-bar entry icon override. Distinguishes "unset" (falls back to
+     * `data-icon`) from explicit set values via #isCoverIconSet — `undefined`,
+     * `null`, `""`, `"none"`, and an arbitrary URL are all distinct outcomes
+     * the bar's fallback branch interprets in Phase 1C.
+     * @type {string|null|undefined}
+     */
+    #coverIcon = undefined;
+    #isCoverIconSet = false;
+    get coverIcon() {
+        if (this.#isCoverIconSet) return this.#coverIcon;
+        return this.$host?.attr(eds.icon);
+    }
+    setCoverIcon(value) {
+        this.#coverIcon = value;
+        this.#isCoverIconSet = true;
+        if (this.#coverEntryToken != null) {
+            estreUi.coverBarHandle?.updateEntry(this.#coverEntryToken, { icon: this.coverIcon });
+        }
+    }
+
+    /**
+     * Opt-in flag for cover-bar mounting. `data-cover-mount="1"` on the page
+     * section enables this; sub-class handlers can override the getter for
+     * programmatic opt-in (Phase 1C will also expose a constructor option).
+     */
+    get coverMount() { return this.$host?.attr(eds.coverMount) == t1; }
+
+    /**
+     * Token returned by `estreUi.coverBarHandle.pushEntry()` when this handle's
+     * page was registered in the cover bar. `null` whenever no entry is live
+     * (page closed / cover bar not ready / coverMount opt-out).
+     */
+    #coverEntryToken = null;
+    get coverEntryToken() { return this.#coverEntryToken; }
+
+    /**
+     * Internal — push an entry for this handle into the cover bar when opt-in
+     * is set and the bar is ready. Re-entry-safe: noop if already registered.
+     */
+    #registerCoverEntry() {
+        if (this.#coverEntryToken != null) return;
+        if (!this.coverMount) return;
+        const handle = estreUi.coverBarHandle;
+        if (handle == null) return;
+        this.#coverEntryToken = handle.pushEntry({
+            pageHandle: this,
+            sectionBound: this.sectionBound,
+            title: this.coverTitle,
+            icon: this.coverIcon,
+        });
+    }
+
+    /** Internal — remove this handle's cover-bar entry, if any. */
+    #releaseCoverEntry() {
+        if (this.#coverEntryToken == null) return;
+        estreUi.coverBarHandle?.removeEntry(this.#coverEntryToken);
+        this.#coverEntryToken = null;
+    }
+
     #appbarLeft = null;
     #appbarRight = null;
     #appbarCenter = null;
@@ -403,6 +477,7 @@ class EstrePageHandle {
         if (!this.isOpened) {
             if (window.isDebug) console.log("[onOpen] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
             this.#isOpened = true;
+            this.#registerCoverEntry();
             if (this.handler?.onOpen != null) this.handler.onOpen(this);
             if (this.intent?.onOpen != null) for (var item of this.intent.onOpen) if (item.from == this.hostType && !item.disabled) this.processAction(item);
             return true;
@@ -414,6 +489,7 @@ class EstrePageHandle {
             if (window.isVerbosely) console.log("[onShow] " + this.sectionBound + " " + this.hostType + " " + this.pid, this.host);
             else if (window.isDebug) console.log("[onShow] " + this.sectionBound + " " + this.hostType + " " + this.pid);
             this.#isShowing = true;
+            if (this.#coverEntryToken != null) estreUi.coverBarHandle?.setMinimizedByToken(this.#coverEntryToken, false);
             if (this.handler?.onShow != null) this.handler.onShow(this);
             if (this.intent?.onShow != null) for (var item of this.intent.onShow) if (item.from == this.hostType && !item.disabled) this.processAction(item);
             return true;
@@ -426,6 +502,7 @@ class EstrePageHandle {
             if (window.isDebug) console.log("[onFocus] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
             this.#isFocused = true;
             this.#everFocused = true;
+            if (this.#coverEntryToken != null) estreUi.coverBarHandle?.setActiveByToken(this.#coverEntryToken);
             const handled = this.handler?.onFocus?.(this, isFirstFocus);
             if (this.intent?.onFocus != null) for (var item of this.intent.onFocus) if (item.from == this.hostType && !item.disabled) this.processAction(item);
             if (handled === true) {
@@ -475,6 +552,7 @@ class EstrePageHandle {
             this.#isShowing = false;
             if (window.isVerbosely) console.log("[onHide] " + this.sectionBound + " " + this.hostType + " " + this.pid, this.host);
             else if (window.isDebug) console.log("[onHide] " + this.sectionBound + " " + this.hostType + " " + this.pid);
+            if (this.#coverEntryToken != null) estreUi.coverBarHandle?.setMinimizedByToken(this.#coverEntryToken, true);
             if (this.intent?.onHide != null) for (var item of this.intent.onHide) if (item.from == this.hostType && !item.disabled) await this.processAction(item);
             if (this.handler?.onHide != null) await this.handler.onHide(this, fullyHide);
             if (this.intent?.bringOnBack != null && this.intent.bringOnBack.pid != n) {
@@ -499,6 +577,7 @@ class EstrePageHandle {
             this.#everFocused = false;
             this.lastFocusedElement = null;
             if (window.isDebug) console.log("[onClose] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
+            this.#releaseCoverEntry();
             if (this.intent?.onClose != null) for (var item of this.intent.onClose) if (item.from == this.hostType && !item.disabled) await this.processAction(item);
             if (this.handler?.onClose != null) await this.handler.onClose(this);
             if (this.intent?.bringOnBack != null && this.intent.bringOnBack.pid != n) {
@@ -2774,6 +2853,17 @@ class EstrePageHandler {
     /** @type {*} The data field of the intent. */
     get intentData() { return this.intent?.data; }
 
+    /** Cover-bar entry label — see EstrePageHandle.coverTitle. */
+    get coverTitle() { return this.handle?.coverTitle; }
+    /** Cover-bar entry icon — see EstrePageHandle.coverIcon. */
+    get coverIcon() { return this.handle?.coverIcon; }
+    /** Cover-bar opt-in flag — see EstrePageHandle.coverMount. */
+    get coverMount() { return this.handle?.coverMount ?? false; }
+    /** Updates the cover-bar entry label for this handler's page. */
+    setCoverTitle(value) { return this.handle?.setCoverTitle(value); }
+    /** Updates the cover-bar entry icon for this handler's page. See EstrePageHandle.coverIcon for unset/empty/"none"/URL semantics. */
+    setCoverIcon(value) { return this.handle?.setCoverIcon(value); }
+
     /**
      * @param {EstrePageHandle} handle - The page handle to bind.
      * @param {*} [provider] - The provider that registered this handler.

package/serviceWorker.js

@@ -1,4 +1,4 @@
-const INSTALLATION_VERSION_NAME = "1.4.0-r20260424";
+const INSTALLATION_VERSION_NAME = "1.5.0-r20260524";
 // ^^ 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-20260424";
+const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260524";
 
 const COMMON_FILES_TO_CACHE = [
     "./",
@@ -61,7 +61,7 @@ const COMMON_FILES_TO_CACHE = [
 
 
 // Static files cache - Rarely changes after release
-const CACHE_NAME_STATIC_FILES = "static-files-cache-v1-20260221";
+const CACHE_NAME_STATIC_FILES = "static-files-cache-v1-20260524";
 
 const STATIC_FILES_TO_CACHE = [
     "./favicon.ico",
@@ -97,6 +97,9 @@ const STATIC_FILES_TO_CACHE = [
 
     "./vectors/more_vertical_slim_icon.svg",
     "./vectors/app_icon.svg",
+    "./vectors/cover-icon-default-static.svg",
+    "./vectors/cover-icon-default-instant.svg",
+    "./vectors/cover-icon-default-overlay.svg",
 ];
 
 

package/styles/estreUiCore.css

@@ -142,14 +142,14 @@ nav#overwatchPanel > .dynamic_section_host > .host_item { flex-grow: 1; padding:
 nav#overwatchPanel > .dynamic_section_host > .host_item[data-showing="1"] { padding-bottom: 6px; border-bottom: solid 2px var(--color-indicator-bold); color: var(--color-text-darker); }
 nav#overwatchPanel > .dynamic_section_block { display: flex; flex-flow: row nowrap; flex-shrink: 1; height: var(--panel-block-height); max-height: calc(100vh - var(--top-pad) - 42px - var(--bottom-safe-pad)); overflow-x: overlay; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; background-color: rgba(var(--cabr) / 40%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(calc(-100vh - var(--panel-block-height))); transition-duration: 0.3s; }
 nav#overwatchPanel > .dynamic_section_block > .block_item { width: 100%; flex-shrink: 0; overflow-y: auto; scroll-snap-align: start; }
-nav#overwatchPanel > section#panelGrabArea { flex-grow: 0; flex-shrink: 0; height: 42px; background-color: transparent; opacity: 0; transition-duration: 0.3s; }
+nav#overwatchPanel > section#panelGrabArea { flex-grow: 0; flex-shrink: 0; height: 42px; background-color: transparent; opacity: 0; pointer-events: none; transition-duration: 0.3s; }
 nav#overwatchPanel > section#panelGrabArea > div.handle { --width: 64px; --height: 4px; display: block; width: var(--width); height: var(--height); margin: 10px auto 0; border-radius: calc(var(--height) / 2); background-color: var(--color-boundary-lightside); }
 nav#overwatchPanel > section#panelGrabArea > div.pad { flex-grow: 1; }
 
 nav#overwatchPanel[data-opened="1"] > header#panelHeader,
 nav#overwatchPanel[data-opened="1"] > .dynamic_section_host,
 nav#overwatchPanel[data-opened="1"] > .dynamic_section_block { transform: translateY(0); }
-nav#overwatchPanel[data-opened="1"] > section#panelGrabArea { opacity: 1; background-color: rgb(var(--cadm) / 20%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
+nav#overwatchPanel[data-opened="1"] > section#panelGrabArea { opacity: 1; pointer-events: auto; background-color: rgb(var(--cadm) / 20%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
 
 nav#overwatchPanel[data-on-grab="1"] > header#panelHeader,
 nav#overwatchPanel[data-on-grab="1"] > .dynamic_section_host,
@@ -244,8 +244,359 @@ footer#fixedBottom nav:not(#rootbar) { width: -moz-available; width: -webkit-fil
 footer#fixedBottom nav:not(#rootbar):first-child { padding-left: var(--left-pad); }
 footer#fixedBottom nav:not(#rootbar):last-child { padding-right: var(--right-pad); }
 }
-footer#fixedBottom nav#customFixedSections { }
-footer#fixedBottom nav#instantSections { }
+footer#fixedBottom nav#customFixedSections { position: relative; display: flex; flex-flow: row nowrap; align-items: stretch; gap: 4px; overflow: hidden; }
+footer#fixedBottom nav#instantSections { position: relative; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: flex-start; gap: 4px; overflow: hidden; }
+
+/* Hairline separators between the rootbar tabs and the cover-bar areas — only on
+ * wide viewports where the three areas actually sit side-by-side. 1px wide,
+ * 66% tall and centered vertically; a soft vertical gradient fades to
+ * transparent at the top and bottom 20% so the bar doesn't get a hard edge.
+ * Rendered as a relative-positioned flex item so margin-left/right (the inset
+ * away from the rootbar edge) actually pushes the line — absolute positioning
+ * would ignore those margins for layout. */
+@media all and (min-height: 700px) and (min-width: 740px) {
+    footer#fixedBottom nav#customFixedSections::after,
+    footer#fixedBottom nav#instantSections::before {
+        content: "";
+        position: relative;
+        flex: 0 0 1px;
+        align-self: center;
+        height: 66%;
+        pointer-events: none;
+        background: linear-gradient(180deg,
+            transparent 0%,
+            var(--color-boundary-o5) 20%,
+            var(--color-boundary-o5) 80%,
+            transparent 100%);
+    }
+    /* Push the separator away from the cover-bar entries on its area side so
+     * the line doesn't touch a filled-out tile. The rootbar-facing edge stays
+     * flush against the rootbar so the boundary still reads as boundary. */
+    footer#fixedBottom nav#customFixedSections::after { margin-left: var(--basic-ui-inset-h-half); }
+    footer#fixedBottom nav#instantSections::before { margin-right: var(--basic-ui-inset-h-half); }
+}
+
+/* Top layer — host surface that paints above every embed (including those that
+ * sit at extreme z-index). The container itself is pointer-event-transparent;
+ * only its mounted children take input, so it never blocks the page underneath.
+ * Mount points include cover-bar overflow dropdowns and any other generic-host
+ * UI that must outrank embeds. Z-index is set to the max safe signed-int value
+ * so an embed cannot accidentally outpaint it. */
+div#topLayer { position: fixed; z-index: 2147483647; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
+div#topLayer > * { pointer-events: auto; }
+
+/* Cover bar entries — see EstreCoverBarHandle. One button per opt-in page or
+ * external embed window. Two layouts share the same markup:
+ *   - footer-mounted (instantSections / customFixedSections): column-stacked
+ *     icon-on-top + label-below, sized as a near-square tile (6/7 ~ 8/7 of
+ *     rootbar-height) to line up with rootbar tab buttons.
+ *   - dropdown-mounted (#topLayer .cover_overflow_dropdown): row-laid out
+ *     icon-then-label, free-width — a horizontal list of overflowed entries.
+ * Visual states are driven by data-active / data-minimized so the controller
+ * can flip them with attr() without touching class lists.
+ * flex-shrink: 0 keeps entries readable — when they don't fit, the leading
+ * (instantSections) or trailing (customFixedSections) ones get
+ * data-overflowed="1" and disappear from layout via display:none. The
+ * sentinel + dropdown expose them. */
+footer#fixedBottom nav#customFixedSections .cover_entry,
+footer#fixedBottom nav#instantSections .cover_entry {
+    position: relative;
+    display: inline-flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 0;
+    margin: 0; padding: 0;
+    height: 100%;
+    min-width: calc(var(--rootbar-height) * 6 / 7);
+    max-width: calc(var(--rootbar-height) * 8 / 7);
+    flex-shrink: 0;
+    border: 0; outline: 0;
+    border-radius: 0;
+    color: var(--color-text-pale, rgb(var(--ca) / 70%));
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    /* Zero out the user-agent button line-height baseline so the icon + label
+     * column stacks at the rootbar tab's exact pixel position. Children opt
+     * back in with their own line-height (label) or display:block (img). */
+    font-size: 0; line-height: 0;
+    transition-duration: 0.15s;
+    transition-property: color, opacity;
+}
+div#topLayer .cover_overflow_dropdown .cover_entry {
+    position: relative;
+    display: flex; flex-flow: row nowrap; align-items: center; gap: 6px;
+    width: 100%;
+    margin: 0; padding: 6px 12px;
+    border: 0; outline: 0;
+    border-radius: 0;
+    color: var(--color-text-darker, rgb(var(--ca) / 95%));
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    text-align: left;
+    font-size: 0.875rem; line-height: 1.25rem;
+    transition-duration: 0.15s;
+    transition-property: background-color, color, opacity;
+}
+/* Footer entries — keep the visual minimal: indicator bar + label color tell the
+ * state, no background fill. Dropdown rows are a contextual list so they keep
+ * the hover/active background highlight. */
+footer#fixedBottom nav .cover_entry[data-active="1"] { color: var(--color-text-darker, rgb(var(--ca) / 95%)); }
+footer#fixedBottom nav .cover_entry[data-minimized="1"] { opacity: 0.55; }
+footer#fixedBottom nav .cover_entry[data-minimized="1"][data-active="1"] { opacity: 0.8; }
+div#topLayer .cover_overflow_dropdown .cover_entry:hover { background-color: rgb(var(--ca) / 8%); }
+div#topLayer .cover_overflow_dropdown .cover_entry[data-active="1"] { color: var(--color-text-darker, rgb(var(--ca) / 95%)); background-color: rgb(var(--ca) / 12%); }
+div#topLayer .cover_overflow_dropdown .cover_entry[data-minimized="1"] { opacity: 0.55; }
+div#topLayer .cover_overflow_dropdown .cover_entry[data-minimized="1"][data-active="1"] { opacity: 0.8; }
+/* Footer icon matches rootbar tab maskable_icon size (32x32) for visual line-up. */
+footer#fixedBottom nav .cover_entry > .cover_icon { display: inline-flex; flex-shrink: 0; width: 32px; height: 32px; margin-bottom: 5px; align-items: center; justify-content: center; line-height: 0; }
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; align-items: center; justify-content: center; line-height: 0; }
+footer#fixedBottom nav .cover_entry > .cover_icon > img,
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon > img { display: block; width: 100%; height: 100%; }
+/* footer label — small caption under the icon, follows rootbar tab label style. */
+footer#fixedBottom nav .cover_entry > label {
+    flex-shrink: 1; min-width: 0; max-width: 100%;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font-size: 0.625rem; line-height: 0.75rem;
+    color: inherit;
+    cursor: inherit;
+}
+/* dropdown label — full readable text inline next to the icon. flex-grow so
+ * the row stretches to fill the dropdown's max-content width consistently
+ * even when the title is shorter than the widest sibling. */
+div#topLayer .cover_overflow_dropdown .cover_entry > label {
+    flex: 1 1 auto; min-width: 0;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    color: inherit;
+    font-size: 0.875rem; line-height: 1.25rem;
+    cursor: inherit;
+}
+/* Match the default cover_entry's specificity by repeating the nav id, so
+ * the display:none here actually wins. Without the id duplication the
+ * default rule `nav#instantSections .cover_entry { display: inline-flex }`
+ * outranks this one and overflowed entries stay visible. */
+footer#fixedBottom nav#customFixedSections .cover_entry[data-overflowed="1"],
+footer#fixedBottom nav#instantSections .cover_entry[data-overflowed="1"] { display: none; }
+
+/* Top-edge indicator bar — Windows-11 taskbar-style. A pseudo-element sits at
+ * the top of each footer-mounted entry; its width and color reflect the state.
+ * The fixedBottom sits at the bottom of the viewport, so the bar lives on the
+ * *upper* edge of the button (opposite the taskbar). Default state is "open
+ * but inactive" (a cover-bar entry exists iff its embed is open) — the
+ * not-open state is represented by the absence of the entry itself.
+ *   - inactive          : short bar, pale color
+ *   - active            : long bar, accent color
+ *   - minimized         : short bar, dimmed (opacity)
+ *   - minimized+active  : long bar, dimmed (opacity)
+ * Dropdown rows do not carry the indicator — selection there is communicated
+ * with the background highlight only. */
+footer#fixedBottom nav .cover_entry::before {
+    content: "";
+    position: absolute; top: 0; left: 50%;
+    width: 30%; height: 2px;
+    transform: translateX(-50%);
+    background-color: rgb(var(--ca) / 35%);
+    border-radius: 0 0 2px 2px;
+    transition-duration: 0.2s;
+    transition-property: width, background-color, opacity;
+}
+footer#fixedBottom nav .cover_entry[data-active="1"]::before {
+    width: 70%;
+    background-color: var(--color-point-dark, rgb(var(--ca) / 80%));
+}
+footer#fixedBottom nav .cover_entry[data-active="1"] > label { color: var(--color-point-dark, rgb(var(--ca) / 95%)); }
+
+/* Per-entry unread / notification badge — surfaces via [data-badge] on the
+ * entry's .cover_icon so it sits in the icon's top-right corner. Mirrors the
+ * project-wide `article [data-badge]::after` convention (see estreUi.css)
+ * so host themes can override `--badge-color` once and have it apply
+ * everywhere. Cover bar uses a slightly tighter --height than article badges
+ * to suit the 32px icon. Display rules (see #refreshEntryBadge):
+ *   data-badge=""    → dot
+ *   data-badge="<n>" → numeric pill (2 ≤ n ≤ 99)
+ *   data-badge="99+" → cap label
+ *   attribute absent → no badge */
+footer#fixedBottom nav .cover_entry > .cover_icon,
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon { position: relative; }
+
+footer#fixedBottom nav .cover_entry > .cover_icon[data-badge]::after,
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon[data-badge]::after {
+    --height: 14px;
+    --badge-color: var(--color-point);
+    content: attr(data-badge);
+    position: absolute; z-index: 1;
+    top: -2px; right: -6px;
+    display: flex; align-items: center; justify-content: center;
+    width: max-content;
+    min-width: var(--height); min-height: var(--height); max-height: var(--height);
+    padding: 0 4px;
+    box-sizing: border-box;
+    border-radius: var(--height);
+    background-color: var(--badge-color);
+    color: var(--color-text-inverse, #FFFFFF);
+    font-size: 0.625rem; line-height: var(--height); font-weight: 700;
+    text-align: center;
+    pointer-events: none;
+    transition-timing-function: ease;
+    transition-duration: 0.3s;
+}
+footer#fixedBottom nav .cover_entry > .cover_icon[data-badge=""]::after,
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon[data-badge=""]::after {
+    top: 0; right: -2px;
+    width: 8px; height: 8px;
+    min-width: 8px; min-height: 8px;
+    aspect-ratio: 1;
+    padding: 0;
+    border-radius: 100%;
+}
+
+/* Per-entry close ✕ — rendered when the entry was pushed with closable:true
+ * (Phase 3 external embed hook). Lives inside the entry button as a span so
+ * the click handler can stopPropagation and route to onAction("close") without
+ * the surrounding row registering as a focus/minimize click. The embed is
+ * responsible for actually removing the entry; the ✕ only signals intent.
+ * Footer tiles deliberately hide the ✕ to stay visually tidy — close is
+ * still reachable via the overflow dropdown row, where the ✕ sits inline at
+ * the trailing edge. */
+footer#fixedBottom nav .cover_entry > .cover_entry_close { display: none; }
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_entry_close {
+    display: inline-flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    width: 18px; height: 18px;
+    margin-left: 2px;
+    border-radius: 50%;
+    color: var(--color-text-pale, rgb(var(--ca) / 50%));
+    font-size: 0.75rem; line-height: 1;
+    cursor: pointer;
+    transition-duration: 0.15s;
+    transition-property: background-color, color;
+}
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_entry_close:hover {
+    background-color: rgb(var(--ca) / 15%);
+    color: var(--color-text-darker, rgb(var(--ca) / 95%));
+}
+
+/* Overflow sentinel — narrow chevron button at the leading edge of each area
+ * (right-aligned bars' clipped side). Visibility flips via the `hidden`
+ * attribute from #recomputeOverflow. data-opened mirrors the dropdown's
+ * open state so the sentinel feels pressed while its dropdown is up.
+ * Rendered as a thin column-flex button with a small ^-chevron SVG glued
+ * to the top edge — the chevron points to the overflow dropdown that opens
+ * upward from above. */
+footer#fixedBottom nav .cover_overflow_sentinel {
+    display: inline-flex; flex-flow: column nowrap; align-items: center; justify-content: flex-start;
+    flex-shrink: 0;
+    width: 16px; height: 100%;
+    padding: 6px 0 0 0;
+    border: 0; outline: 0;
+    border-radius: 0;
+    color: var(--color-text-pale, rgb(var(--ca) / 60%));
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    /* Push the sentinel to the trailing edge of its area regardless of DOM
+     * position — entries (default order 0) pack flush to the area's leading
+     * edge, sentinel sits at the trailing end indicating "more this way". */
+    order: 1;
+    transition-duration: 0.15s;
+    transition-property: background-color, color;
+}
+footer#fixedBottom nav .cover_overflow_sentinel > svg { width: 10px; height: 6px; }
+footer#fixedBottom nav .cover_overflow_sentinel:hover { background-color: rgb(var(--ca) / 8%); color: var(--color-text-darker, rgb(var(--ca) / 90%)); }
+footer#fixedBottom nav .cover_overflow_sentinel[data-opened="1"] { color: var(--color-point-dark, rgb(var(--ca) / 95%)); background-color: rgb(var(--ca) / 12%); }
+footer#fixedBottom nav .cover_overflow_sentinel[hidden] { display: none; }
+
+/* Overflow dropdown — mounted in #topLayer, anchored above its sentinel.
+ * Vertical list of cover_entry rows (one per overflowed entry). Chrome
+ * matches the right-click context menu (`.cover_entry_menu`): same
+ * color-mix background wash, backdrop-filter, 1px outset border, and
+ * border-radius. Width sizes to the widest row (max-content) and clamps
+ * to 320px so a long title doesn't push the dropdown past the host.
+ * Positioning is set inline by #positionDropdown. */
+div#topLayer .cover_overflow_dropdown {
+    position: fixed;
+    display: flex; flex-flow: column nowrap;
+    width: max-content; max-width: min(320px, calc(100vw - 16px));
+    padding: 4px 0;
+    border: 1px outset var(--color-boundary-o15);
+    border-radius: 8px;
+    background-color: color-mix(in srgb, var(--common-bg-color) 5%, transparent);
+    backdrop-filter: var(--basic-backdrop-blur);
+    -webkit-backdrop-filter: var(--basic-backdrop-blur);
+    box-shadow: 0 6px 16px rgb(0 0 0 / 14%), 0 1px 4px rgb(0 0 0 / 8%);
+}
+
+/* Context menu — right-click affordance on cover-bar entries. Mounted in
+ * #topLayer so it paints above embed surfaces. Positioned at the cursor
+ * (clamped to the viewport) by #positionContextMenu, which picks a quadrant
+ * (origin corner) so the menu always opens toward viewport center. The
+ * --menu-origin inline custom property drives transform-origin for the
+ * scale-grow open animation. */
+div#topLayer .cover_entry_menu {
+    --menu-origin: top left;
+    position: fixed;
+    display: flex; flex-flow: column nowrap;
+    min-width: 180px; max-width: 280px;
+    padding: 4px 0;
+    border: 1px outset var(--color-boundary-o15);
+    border-radius: 8px;
+    background-color: color-mix(in srgb, var(--common-bg-color) 5%, transparent);
+    backdrop-filter: var(--basic-backdrop-blur);
+    -webkit-backdrop-filter: var(--basic-backdrop-blur);
+    box-shadow: 0 6px 16px rgb(0 0 0 / 14%), 0 1px 4px rgb(0 0 0 / 8%);
+    transform-origin: var(--menu-origin);
+    /* Two-stage open: first 0.2s grows the width (a thin horizontal sliver
+     * around 4~8px tall expands left/right toward full menu width); next 0.2s
+     * grows the height. Total ~0.4s. Origin matches the cursor corner so the
+     * grow unfolds from the click point. */
+    animation: cover_menu_enter 0.4s ease-out;
+}
+div#topLayer .cover_entry_menu[data-closing="1"] {
+    opacity: 0;
+    transform: scale(1);
+    transition: opacity 0.2s ease;
+    animation: none;
+}
+@keyframes cover_menu_enter {
+    0%   { transform: scale(0.15, 0.1); opacity: 0; }
+    50%  { transform: scale(1,    0.1); opacity: 1; }
+    100% { transform: scale(1,    1);   opacity: 1; }
+}
+div#topLayer .cover_entry_menu > header.cover_menu_title {
+    margin: 0 0 4px 0;
+    padding: 6px 12px 6px;
+    border-bottom: 1px solid rgb(var(--ca) / 10%);
+    font-size: 0.75rem; line-height: 1rem;
+    color: var(--color-text-pale, rgb(var(--ca) / 60%));
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+div#topLayer .cover_entry_menu > button.cover_menu_item {
+    display: flex; flex-flow: row nowrap; align-items: center; gap: 8px;
+    width: 100%; margin: 0;
+    padding: 6px 12px;
+    border: 0; outline: 0;
+    background-color: transparent;
+    text-align: left;
+    font-size: 0.875rem; line-height: 1.25rem;
+    color: var(--color-text-darker, rgb(var(--ca) / 95%));
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    transition-duration: 0.15s;
+    transition-property: background-color;
+}
+div#topLayer .cover_entry_menu > button.cover_menu_item > .cover_menu_item_icon { display: inline-flex; flex-shrink: 0; width: 14px; height: 14px; align-items: center; justify-content: center; line-height: 0; color: var(--color-text-pale, rgb(var(--ca) / 60%)); }
+div#topLayer .cover_entry_menu > button.cover_menu_item > .cover_menu_item_icon > svg { width: 14px; height: 14px; display: block; }
+div#topLayer .cover_entry_menu > button.cover_menu_item > .cover_menu_item_label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+div#topLayer .cover_entry_menu > button.cover_menu_item:hover { background-color: rgb(var(--ca) / 8%); }
+div#topLayer .cover_entry_menu > button.cover_menu_item:disabled,
+div#topLayer .cover_entry_menu > button.cover_menu_item[disabled] {
+    color: var(--color-text-pale, rgb(var(--ca) / 50%));
+    cursor: not-allowed;
+}
+div#topLayer .cover_entry_menu > button.cover_menu_item:disabled:hover,
+div#topLayer .cover_entry_menu > button.cover_menu_item[disabled]:hover { background-color: transparent; }
 
 
 /* session manager */

package/vectors/cover-icon-default-instant.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="8" width="20" height="16" rx="2" stroke="#333333" stroke-width="2" stroke-linejoin="round" fill="none"/>
+</svg>

package/vectors/cover-icon-default-overlay.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="10" y="12" width="12" height="8" rx="1.5" stroke="#333333" stroke-width="2" stroke-linejoin="round" fill="none"/>
+</svg>

package/vectors/cover-icon-default-static.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="8" width="20" height="16" rx="2" stroke="#333333" stroke-width="2" stroke-linejoin="round" fill="none"/>
+<line x1="7" y1="12" x2="25" y2="12" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
+<line x1="7" y1="20" x2="25" y2="20" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
+</svg>