website-xp-phone 2.2.1 → 2.2.11

package/src/themes/pageSlide/pageSlide.css

@@ -35,11 +35,25 @@ html.theme-page-slide .page-slide-ghost > .page {
   min-height: 0;
 }
 
-/* Fixed footer bars of the old page drop out of the bottom with it. */
+/* Fixed footer bars of the old page exit on their own beat: the slide
+   starts immediately (no fold-delay) and fades as it goes, so the bar
+   visibly rides out instead of blinking away at the route commit. */
 html.theme-page-slide .page-slide-bar {
   pointer-events: none;
-  animation: page-slide-drop var(--ps-drop-dur) linear var(--ps-drop-delay)
-    forwards;
+  animation: page-slide-bar-exit 280ms ease-in forwards;
+}
+
+@keyframes page-slide-bar-exit {
+  to {
+    translate: 0 100vh;
+    opacity: 0;
+  }
+}
+
+/* The live bar yields to its ride-out clone for the exit (visibility —
+   display would collapse the reserved body padding row). */
+html.theme-page-slide .page-slide-bar-hide {
+  visibility: hidden;
 }
 
 /* The new page eases from the old page's bottom padding to its own, so its
@@ -55,16 +69,22 @@ html.theme-page-slide[data-page-slide] main:not(.page-slide-ghost) > .page {
    edge falls to meet it (the outline sucks downward, as in XP), while the
    whole window is drawn the last stretch toward the measured fold point.
    Contents ride the squash, as in XP itself. */
-html.theme-page-slide .page-slide-ghost .page > .window {
+html.theme-page-slide .page-slide-ghost .page > .window,
+html.theme-page-slide .page-slide-ghost .page > .maximized-shell > .window {
   transform-origin: bottom center;
   /* Linear, per preference: the top edge falls towards the taskbar line
      at a constant rate for the entire fold. */
   animation: page-slide-fold var(--ps-minimize, 98ms) linear forwards;
 }
 
-/* Paper look for the swapped-out document iframes (resume previews etc.). */
+/* Fallback look for the swapped-out iframes (music embeds etc.) — the
+   PAGE's background colour: the placeholder is what shows through while
+   the page fades/slides, and a white flash reads as visual pollution
+   against the themed background. Document frames that carry their own
+   opaque background (the white resume preview) adopt it in JS instead —
+   a dark placeholder there reads as the PDF unloading mid-exit. */
 html.theme-page-slide .page-slide-ghost .page-slide-placeholder-frame {
-  background: #fff;
+  background: var(--background-color);
 }
 
 @keyframes page-slide-fold {
@@ -79,6 +99,79 @@ html.theme-page-slide .page-slide-ghost .page-slide-placeholder-frame {
   }
 }
 
+/* Departing dimmed overlays: the dark level fades in step with the
+   departing windows (slide-off on dismissal, page fold on navigation);
+   ride clones keep the fade going even when the portals unmount
+   mid-animation. The ride carries its OWN full backdrop look — it must
+   drop the .maximized-backdrop class, or body:has() would keep the page
+   raised over the menu bar for the ride's whole lifetime. */
+.maximized-backdrop.page-slide-backdrop-close,
+.page-slide-backdrop-ride {
+  position: fixed;
+  inset: 0;
+  z-index: 4000;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.6);
+  /* The ride carries its OWN flex alignment that used to come from
+     .maximized-backdrop (dropped from the clone): without it, the
+     window copy block-docks left of the page. */
+  display: flex;
+  align-items: safe center;
+  justify-content: safe center;
+  animation: page-slide-backdrop-fade 180ms ease-out forwards;
+}
+
+@keyframes page-slide-backdrop-fade {
+  to {
+    opacity: 0;
+    background: rgba(0, 0, 0, 0);
+  }
+}
+
+/* Departing exit on a closing maximized window: MaximizedWindow adds
+   .window-minimize to the ride-out clone and measures --page-fold-dy to
+   the taskbar line exactly like the ghost clone above, and the squish
+   plays the same fold: the bottom edge slides to the taskbar line while
+   the top edge falls to meet it. The !important outranks theme
+   animations (theme-experimental-flash on maximized experimental windows
+   would otherwise replace the fold); the clone paints above the raised
+   page, above its fading dimmed layer. Since the ride clone is inert and
+   the real window returns to the flow the moment the fold starts, the
+   collapsing content never glitches beneath the squash. */
+html.theme-page-slide .window.window-minimize {
+  z-index: 4001;
+  transform-origin: bottom center;
+  animation: window-minimize-exit var(--ps-minimize, 98ms) linear forwards
+    !important;
+}
+
+@keyframes window-minimize-exit {
+  to {
+    /* Fold onto the taskbar line, then clear it: without the extra
+       100% offset the squashed sliver would rest exactly AT the bottom
+       edge (the page drop that normally carries it away doesn't exist
+       for a standalone dismissal). */
+    transform: translateY(calc(var(--page-fold-dy, 80vh) + 100%))
+      scaleY(0.06);
+  }
+}
+
+/* Parked (a hyperlink/maximized seed load): play NOTHING. Aiming the
+   entrance at zero distance would still emit translate(0,0) — a live
+   transform on <main> makes it the containing block for the in-tree
+   position:fixed maximized backdrop, which then centers against main's
+   box instead of the viewport. No animation = no transform = the
+   backdrop stays viewport-anchored. First navigation applies a real
+   direction (update of data-page-slide) and restarts the animations. */
+html.theme-page-slide[data-page-slide="parked"] main:not(.page-slide-ghost) {
+  animation: none;
+}
+
+html.theme-page-slide[data-page-slide="parked"] main:not(.page-slide-ghost)
+  > .page {
+  animation: none;
+}
+
 @keyframes page-slide-pad {
   from {
     padding-bottom: var(--ps-pad-from, 0px);

package/src/window/Embed.tsx

@@ -34,7 +34,9 @@ export function EmbedView({ embed }: { embed: EmbedItem }) {
         height={spec.height}
         allowFullScreen
         allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-        loading="lazy"
+        // NO loading="lazy": these frames live inside fixed-size window
+        // cards, so lazy loads never trigger on mobile and leave tall
+        // blank areas behind.
         referrerPolicy="strict-origin-when-cross-origin"
       />
     );

package/src/window/MaximizedWindow.tsx

@@ -0,0 +1,250 @@
+import { useRef, useState, type ReactNode, type RefObject } from "react";
+import type { WindowFlags } from "./state";
+import { descendantIds } from "./model";
+import { permalinkFor, useWindowStore } from "./state";
+
+/** Machinery for maximized-foreground windows: the dimmed sibling layer,
+ * the reserved flow slot beneath the fixed overlay, the dismissal paths
+ * (silent restore / title-bar-minimize slide) and the URL-hash hand-off.
+ *
+ * The component ALWAYS wraps the window element so React keeps its DOM
+ * identity across maximize/dismiss — the window lives in the last child
+ * slot in both states and is never remounted. */
+
+export type MaximizedController = {
+  /** Enters the maximized view: anchors the section hash, reserves the
+   * flow slot (measured pre-lift) and lifts the window. Silent. */
+  maximize: () => void;
+  /** Silent, instant restore: ✕ on a maximized window, Escape and the
+   * out-of-bounds backdrop click all restore without sound (sounds
+   * stay with the callers) and without the slide. */
+  dismiss: () => void;
+  /** OK entry: restore AND reveal the window's content on return. */
+  dismissRevealed: () => void;
+  /** Title-bar minimize only: restores with the slide-off ride. */
+  dismissWithSlide: () => void;
+  backdropRef: RefObject<HTMLDivElement | null>;
+  parkedSize: { width: number; height: number } | null;
+};
+
+export function useMaximizedController(
+  nodeId: string,
+  patch: (id: string, flags: WindowFlags) => void,
+  flagsOf: (id: string) => WindowFlags,
+  windowRef: RefObject<HTMLDivElement | null>,
+): MaximizedController {
+  const backdropRef = useRef<HTMLDivElement | null>(null);
+  const { windows, permalinkMode } = useWindowStore();
+  /** The window's own flags at maximize time: dismissal restores them
+   * instead of expanding anything ("only scroll to" — and a window that
+   * was minimized before maximizing gets minimized back). */
+  const preFlags = useRef<WindowFlags | null>(null);
+  /** The maximized window keeps its flow slot reserved underneath: the
+   * surrounding windows never reflow when it lifts or returns. */
+  const [parkedSize, setParkedSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  /** Hands the URL to the topmost remaining maximized window's permalink
+   * after a dismissal (the page's own address form — ?post=slug on the
+   * blog — so a refresh lands back there), or clears it entirely when
+   * none remain — pathname WITHOUT the query, so a stale ?post can't
+   * resurrect a maximized window after the last one was dismissed. The
+   * dismissed window's own backdrop is excluded via backdropRef, and
+   * ride-out clones carry no id to ever qualify. */
+  const settleHashAfterDismiss = () => {
+    const remaining = [
+      ...document.querySelectorAll<HTMLElement>(
+        ".maximized-backdrop[data-window-id]",
+      ),
+    ].filter((candidate) => candidate !== backdropRef.current);
+    const topId = remaining[remaining.length - 1]?.dataset.windowId;
+    const topNode = topId ? windows.find((w) => w.id === topId) : undefined;
+    history.replaceState(
+      history.state,
+      "",
+      topNode ? permalinkFor(topNode, permalinkMode) : `${location.pathname}`,
+    );
+  };
+
+  const dismiss = (slide: boolean, revealed = false) => {
+    const riders: HTMLElement[] = [];
+    const shell = backdropRef.current;
+    if (shell) {
+      // The whole foreground (dimmed layer + the window inside it) leaves
+      // with a FADE, not a blink — even on non-slide dismissals. Clone
+      // first, then hide the real one at once so the two never stack on
+      // screen: two rgba(0,0,0,.6) layers read as complete darkness
+      // before the commit removes the real one. The clone mounts INSIDE
+      // the page tree (the raised page paints above body-level content
+      // while a backdrop exists) — see the z-index ladder in extras.css.
+      const riding = shell.cloneNode(true) as HTMLElement;
+      riding.classList.add("page-slide-backdrop-ride");
+      // Drop the backdrop class: body:has(.maximized-backdrop) raises the
+      // whole page over the menu bar, and it must unlock the instant the
+      // real backdrop unmounts — the ride's darkening carries its own
+      // fixed/full-size look via .page-slide-backdrop-ride instead.
+      riding.classList.remove("maximized-backdrop");
+      riding.removeAttribute("data-window-id");
+      riding.setAttribute("inert", "");
+      if (!slide) {
+        // Non-slide dismissals restore the real window at once; the ride
+        // rides only the darkening, so strip the frozen window copy.
+        riding.querySelector(".window")?.remove();
+      } else {
+        const popped = windowRef.current;
+        if (popped) {
+          const rect = popped.getBoundingClientRect();
+          riding
+            .querySelector<HTMLElement>(".window")
+            ?.style.setProperty(
+              "--page-fold-dy",
+              `${Math.max(0, Math.round(window.innerHeight - rect.bottom))}px`,
+            );
+          riding
+            .querySelector<HTMLElement>(".window")
+            ?.classList.add("window-minimize");
+        }
+      }
+      const page = shell.closest(".page") ?? document.body;
+      page.appendChild(riding);
+      riders.push(riding);
+      shell.style.opacity = "0";
+    }
+    settleHashAfterDismiss();
+    // The title-bar minimize parks the restored window MINIMIZED (the
+    // mascot's un-hide list / summon brings it back). Every other exit
+    // restores the window's OWN flags as they stood at maximize time —
+    // never maximizing content, only scrolling back to it; hash-navigated
+    // windows hold no snapshot and simply persist their inline state.
+    if (slide) {
+      patch(nodeId, { maximized: false, minimized: true });
+    } else {
+      patch(nodeId, { maximized: false, ...(preFlags.current ?? {}) });
+      if (revealed) {
+        const root = windows.find((w) => w.id === nodeId);
+        const direct =
+          root?.children.flatMap((c) =>
+            c.kind === "window" ? [c.node.id] : [],
+          ) ?? [];
+        for (const id of [nodeId, ...direct]) {
+          patch(id, { expanded: true, minimized: false });
+        }
+      }
+    }
+    if (riders.length) {
+      window.setTimeout(() => riders.forEach((rider) => rider.remove()), 400);
+    }
+    // Parked windows land nowhere: a minimized window has no content to
+    // settle, so only the non-minimize exits bring the page back to
+    // their hash position.
+    if (!slide) {
+      window.setTimeout(
+        () =>
+          windowRef.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+          }),
+        riders.length ? 240 : 60,
+      );
+    }
+  };
+
+  return {
+    maximize: () => {
+      // Snapshot the window's own flags first: the dismissal restores
+      // exactly these (never maximizes content, re-minimizes if it was
+      // minimized before the lift).
+      preFlags.current = { ...flagsOf(nodeId) };
+      // The hash anchors the maximized window so a refresh lands back on
+      // the revealed section. replaceState is untouched by the pageSlide
+      // pushState patch — no transition, no sound.
+      const el = windowRef.current;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        setParkedSize({
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+        });
+      }
+      // Anchor the URL so a refresh lands back on the revealed section —
+      // in the page's own permalink form (?post=slug on the blog, hash
+      // elsewhere). Mobile still PUSHes a #tree-index hash: the OS back
+      // button's dismissal keys off the hash leaving THIS window; a
+      // query-only change never fires hashchange, so the permalink form
+      // can't drive that choreography.
+      if (matchMedia("(max-width: 768px)").matches) {
+        history.pushState(null, "", `#${nodeId}`);
+      } else {
+        const node = windows.find((w) => w.id === nodeId);
+        const url = node ? permalinkFor(node, permalinkMode) : `#${nodeId}`;
+        history.replaceState(null, "", url);
+      }
+      // A maximized window always shows its body — a stale minimized
+      // flag would leave it title-bar-only in the foreground — and the
+      // WHOLE subtree expands: every child window reveals beneath it.
+      patch(nodeId, { maximized: true, minimized: false });
+      for (const id of descendantIds(windows, nodeId)) {
+        patch(id, { expanded: true, minimized: false });
+      }
+    },
+    dismiss: () => dismiss(false),
+    dismissRevealed: () => dismiss(false, true),
+    dismissWithSlide: () => dismiss(true),
+    backdropRef,
+    parkedSize,
+  };
+}
+
+export function MaximizedWindow({
+  maximized,
+  controller,
+  nodeId,
+  onOutsideClick,
+  windowEl,
+}: {
+  /** Whether the window is currently lifted over the backdrop. */
+  maximized: boolean;
+  controller: MaximizedController;
+  nodeId: string;
+  onOutsideClick: () => void;
+  /** The live window element — always rendered INSIDE the shell (the
+   * background element while maximized), in the same child slot, so its
+   * DOM identity survives maximize/dismiss round-trips. */
+  windowEl: ReactNode;
+}) {
+  return (
+    <>
+      {maximized && controller.parkedSize && (
+        // The flow slot the lifted window left behind: measured at lift
+        // time, keeps the surrounding windows from reflowing (no jitter
+        // on maximize/unmaximize).
+        <div
+          className="window-parked"
+          style={{
+            width: controller.parkedSize.width,
+            height: controller.parkedSize.height,
+          }}
+          aria-hidden
+        />
+      )}
+      <div
+        ref={controller.backdropRef}
+        className={maximized ? "maximized-backdrop" : "maximized-shell"}
+        data-window-id={nodeId}
+        onClick={
+          maximized
+            ? (event) => {
+                // Clicks inside the window bubble up to the backdrop
+                // (containment!) — only dimmed-area clicks dismiss.
+                if (event.target === event.currentTarget) onOutsideClick();
+              }
+            : undefined
+        }
+      >
+        {windowEl}
+      </div>
+    </>
+  );
+}

package/src/window/OkButton.tsx

@@ -23,13 +23,18 @@ export function OkButton({
       return;
     }
     const { link } = node;
+    // OK revealing a section no longer rewrites the hash — the hash follows
+    // the maximized window (Window.tsx) and off-site departures only.
     if (!link) {
       expand(node.id);
-      history.replaceState(null, "", `#${node.id}`);
       return;
     }
     if (/^https?:/.test(link) || node.externalLink || /\.\w+$/.test(link)) {
+      // Leaving the site: bookmark this window into the hash first, so a
+      // return visit (via back or the external page) lands back on the
+      // last revealed maximized section.
       remember(node.id);
+      history.replaceState(null, "", `#${node.id}`);
       window.location.assign(link);
     } else {
       navigate(link);

package/src/window/PageWindows.tsx

@@ -10,15 +10,9 @@ import {
 } from "./state";
 import { Window } from "./Window";
 
-function Roots({
-  mode,
-  children,
-}: {
-  mode: PermalinkMode;
-  children?: ReactNode;
-}) {
+function Roots({ children }: { children?: ReactNode }) {
   const { windows } = useWindowStore();
-  usePermalinkTarget(mode);
+  usePermalinkTarget();
   useRememberLeave();
   return (
     <>
@@ -55,7 +49,7 @@ export function PageWindows({
       permalinkMode={permalinkMode}
       onLeave={onLeave}
     >
-      <Roots mode={permalinkMode}>{children}</Roots>
+      <Roots>{children}</Roots>
     </WindowProvider>
   );
 }