@xenide-io/the-old-ui-theme 0.4.4 → 0.4.6

package/src/suite/components/suite-layout.tsx

@@ -1,19 +1,22 @@
 'use client';
 
-import type { ComponentType, ElementType, ReactNode, SVGProps } from 'react';
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ElementType,
+  type ReactNode,
+} from 'react';
 import { cn } from '../lib/cn';
 import { TodayTimeIcon } from './today-ui';
 
-type LucideIcon = ComponentType<SVGProps<SVGSVGElement>>;
-
-const WIDTHS = {
-  full: 'max-w-none',
-  wide: 'max-w-7xl',
-  content: 'max-w-6xl',
-  narrow: 'max-w-4xl',
-} as const;
-
-export type SuitePageWidth = keyof typeof WIDTHS;
+/** Width tokens — applied as data-width; CSS in suite-skin.css owns max-width. */
+export type SuitePageWidth =
+  | 'full'
+  | 'wide'
+  | 'content'
+  | 'narrow'
+  | 'reading';
 
 export interface SuiteBreadcrumbsProps {
   items: { label: ReactNode; href?: string }[];
@@ -62,7 +65,7 @@ export function SuiteBreadcrumbs({ items, className }: SuiteBreadcrumbsProps) {
 
 export function SuitePage({
   children,
-  width = 'wide',
+  width = 'full',
   inset = true,
   className,
   as: Component = 'div',
@@ -85,13 +88,12 @@ export function SuitePage({
     <Component
       id={id}
       data-test={dataTest}
+      data-width={width}
       role={role}
       aria-live={ariaLive}
       className={cn(
-        'mx-auto flex w-full min-w-0 flex-col',
-        WIDTHS[width],
-        // Tight inset keeps page titles aligned without excessive whitespace.
-        inset && 'px-4 pb-5 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-8',
+        'suite-page-stage flex w-full min-w-0 flex-col',
+        inset && 'suite-page-inset',
         className,
       )}
     >
@@ -117,6 +119,8 @@ export function SuitePageHeader({
   badge,
   /** Breadcrumb line rendered above the title. */
   breadcrumb,
+  /** Stick to the top of the scrollport (desktop page titles). */
+  sticky = false,
 }: {
   title: ReactNode;
   description?: ReactNode;
@@ -130,11 +134,40 @@ export function SuitePageHeader({
   todayIconClassName?: string;
   badge?: ReactNode;
   breadcrumb?: ReactNode;
+  sticky?: boolean;
 }) {
+  const headerRef = useRef<HTMLElement>(null);
+  const [stuck, setStuck] = useState(false);
+
+  useEffect(() => {
+    if (!sticky) return;
+    const el = headerRef.current;
+    if (!el) return;
+
+    // Sentinel just above the header — when it leaves the scrollport, we're stuck.
+    const sentinel = document.createElement('div');
+    sentinel.setAttribute('aria-hidden', 'true');
+    sentinel.style.cssText =
+      'position:relative;height:1px;width:100%;margin:0;padding:0;pointer-events:none';
+    el.parentElement?.insertBefore(sentinel, el);
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setStuck(!entry.isIntersecting);
+      },
+      { threshold: [1], root: null },
+    );
+    observer.observe(sentinel);
+    return () => {
+      observer.disconnect();
+      sentinel.remove();
+    };
+  }, [sticky]);
+
   const resolvedIcon = todayIcon ? (
     <TodayTimeIcon
       className={cn(
-        'h-6 w-6 sm:h-7 sm:w-7 text-amber-500',
+        'h-7 w-7 text-amber-500 sm:h-8 sm:w-8',
         todayIconClassName,
       )}
     />
@@ -144,36 +177,42 @@ export function SuitePageHeader({
 
   return (
     <header
+      ref={headerRef}
       data-test={dataTest}
+      data-stuck={sticky ? (stuck ? 'true' : 'false') : undefined}
       className={cn(
         'flex items-start justify-between gap-4 pb-2 sm:pb-3',
+        // No extra pt here — page inset sets the shared title baseline.
+        // Stuck state adds pad via .suite-page-header-sticky[data-stuck].
+        sticky && 'suite-page-header-sticky',
         className,
       )}
     >
-      <div className="flex min-w-0 items-start gap-3">
-        {resolvedIcon ? (
-          <div
-            className="hidden shrink-0 pt-1 sm:block"
-            aria-hidden="true"
-          >
-            {resolvedIcon}
+      <div className="min-w-0 flex-1">
+        {eyebrow ? (
+          <div className="mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle">
+            {eyebrow}
           </div>
         ) : null}
-        <div className="flex min-w-0 flex-col gap-1">
-          {eyebrow ? (
-            <div className="mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle">
-              {eyebrow}
-            </div>
-          ) : null}
-          {breadcrumb ? (
-            <div className="mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle">
-              {breadcrumb}
+        {breadcrumb ? (
+          <div className="mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle">
+            {breadcrumb}
+          </div>
+        ) : null}
+        {/* Icon aligns with the title line only — not the description. */}
+        <div className="flex min-w-0 items-center gap-3">
+          {resolvedIcon ? (
+            <div
+              className="hidden shrink-0 sm:flex sm:items-center [&_svg]:h-7 [&_svg]:w-7 sm:[&_svg]:h-8 sm:[&_svg]:w-8"
+              aria-hidden="true"
+            >
+              {resolvedIcon}
             </div>
           ) : null}
           <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
             <h1
               className={cn(
-                'font-display text-[1.625rem] font-bold leading-tight tracking-tight text-ph-ink sm:text-[2.25rem]',
+                'font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink sm:text-[2.25rem]',
                 titleClassName,
               )}
             >
@@ -185,15 +224,20 @@ export function SuitePageHeader({
               </span>
             ) : null}
           </div>
-          {description ? (
-            <div className="mt-1 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle">
-              {description}
-            </div>
-          ) : null}
         </div>
+        {description ? (
+          <div
+            className={cn(
+              'mt-1.5 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle',
+              resolvedIcon && 'sm:pl-11',
+            )}
+          >
+            {description}
+          </div>
+        ) : null}
       </div>
       {actions ? (
-        <div className="flex shrink-0 items-center gap-2 pt-1">
+        <div className="flex shrink-0 items-center gap-2 self-center">
           {actions}
         </div>
       ) : null}

package/src/suite/components/suite-mobile-drawer.tsx

@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { Xmark as X } from 'iconoir-react';
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Xmark as X } from "iconoir-react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 
 /**
  * Suite mobile navigation drawer. Backdrop fade + panel slide, Escape to
@@ -14,11 +14,12 @@ export function SuiteMobileDrawer({
   open,
   onClose,
   children,
-  side = 'left',
+  side = "left",
   showCloseButton = false,
-  closeLabel = 'Close navigation',
-  backdropLabel = 'Close navigation',
-  dialogLabel = 'Navigation',
+  title,
+  closeLabel = "Close navigation",
+  backdropLabel = "Close navigation",
+  dialogLabel = "Navigation",
   durationMs = 200,
   dataTest,
   panelDataTest,
@@ -28,9 +29,11 @@ export function SuiteMobileDrawer({
   onClose: () => void;
   children: ReactNode;
   /** Edge the panel slides in from. */
-  side?: 'left' | 'right';
+  side?: "left" | "right";
   /** Standard close row (h-14, trailing X button) above the content. */
   showCloseButton?: boolean;
+  /** Optional label in the standard close row. */
+  title?: ReactNode;
   closeLabel?: string;
   backdropLabel?: string;
   /** Accessible name for the dialog panel. */
@@ -76,12 +79,12 @@ export function SuiteMobileDrawer({
     if (!open) return;
 
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onCloseRef.current();
+      if (event.key === "Escape") onCloseRef.current();
     };
-    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener("keydown", onKeyDown);
 
     const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflow = "hidden";
 
     const previouslyFocused =
       document.activeElement instanceof HTMLElement
@@ -90,7 +93,7 @@ export function SuiteMobileDrawer({
     const frame = requestAnimationFrame(() => panelRef.current?.focus());
 
     return () => {
-      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener("keydown", onKeyDown);
       document.body.style.overflow = previousOverflow;
       cancelAnimationFrame(frame);
       if (previouslyFocused?.isConnected) previouslyFocused.focus();
@@ -105,8 +108,8 @@ export function SuiteMobileDrawer({
         type="button"
         tabIndex={-1}
         className={cn(
-          'absolute inset-0 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle',
-          shown ? 'opacity-100' : 'opacity-0',
+          "absolute inset-0 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle",
+          shown ? "opacity-100" : "opacity-0",
         )}
         style={{ transitionDuration: `${durationMs}ms` }}
         onClick={onClose}
@@ -120,19 +123,29 @@ export function SuiteMobileDrawer({
         tabIndex={-1}
         data-test={panelDataTest}
         className={cn(
-          'suite-scroll-lock relative flex h-full w-[86%] max-w-64 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast',
-          side === 'right' && 'ml-auto',
+          "suite-scroll-lock relative flex h-full w-[86%] max-w-72 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast",
+          side === "right" && "ml-auto",
           shown
-            ? 'translate-x-0'
-            : side === 'right'
-              ? 'translate-x-full'
-              : '-translate-x-full',
+            ? "translate-x-0"
+            : side === "right"
+              ? "translate-x-full"
+              : "-translate-x-full",
           panelClassName,
         )}
         style={{ transitionDuration: `${durationMs}ms` }}
       >
         {showCloseButton ? (
-          <div className="flex h-14 shrink-0 items-center justify-end border-b border-ph-border px-3">
+          <div
+            className={cn(
+              "flex h-14 shrink-0 items-center border-b border-ph-border px-3",
+              title ? "justify-between" : "justify-end",
+            )}
+          >
+            {title ? (
+              <span className="truncate text-sm font-semibold text-ph-ink">
+                {title}
+              </span>
+            ) : null}
             <button
               type="button"
               onClick={onClose}

package/src/suite/components/suite-notification-bell.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Bell } from 'iconoir-react';
 
 import type { SuiteDropdownMenuComponent } from '../lib/injected';
+import { resolveSuiteNotificationHref } from '../lib/apps';
 
 const POLL_MS = 60_000;
 
@@ -134,9 +135,14 @@ export function SuiteNotificationBell({
           // ignore
         }
       }
-      if (!n.href) return;
-      if (/^https?:\/\//i.test(n.href)) window.location.assign(n.href);
-      else router.push(n.href);
+      const target = resolveSuiteNotificationHref(n.href, n.source_app);
+      if (!target) return;
+      // Cross-app notifications must leave this product origin.
+      if (/^https?:\/\//i.test(target)) {
+        window.location.assign(target);
+        return;
+      }
+      router.push(target);
     },
     [router, markRead],
   );

package/src/suite/components/suite-settings-layout.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { SuitePage, SuitePageHeader } from "./suite-layout";
+
+export interface SuiteSettingsLayoutProps {
+  children: ReactNode;
+  sidebar: ReactNode;
+  mobileNav?: ReactNode;
+  loading?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  header?: ReactNode;
+  dataTest?: string;
+  headerDataTest?: string;
+  className?: string;
+  contentClassName?: string;
+}
+
+/**
+ * Canonical settings geometry for every suite app.
+ * Apps own nav data and content; the suite owns spacing, scrolling and breakpoints.
+ */
+export function SuiteSettingsLayout({
+  children,
+  sidebar,
+  mobileNav,
+  loading,
+  title = "Settings",
+  description,
+  header,
+  dataTest = "settings-page",
+  headerDataTest = "settings-page-header",
+  className,
+  contentClassName,
+}: SuiteSettingsLayoutProps) {
+  return (
+    <SuitePage
+      dataTest={dataTest}
+      className={cn("flex h-full flex-col overflow-hidden", className)}
+    >
+      {header ?? (
+        <SuitePageHeader
+          sticky
+          dataTest={headerDataTest}
+          title={title}
+          description={description}
+        />
+      )}
+
+      {loading ?? (
+        <div className="suite-page-body mt-6 flex min-h-0 flex-1 flex-col">
+          {mobileNav ? (
+            <div className="sticky top-0 z-20 mb-2 shrink-0 bg-ph-canvas/95 backdrop-blur lg:hidden">
+              {mobileNav}
+            </div>
+          ) : null}
+
+          <div className="flex min-h-0 flex-1 flex-col gap-6 lg:flex-row lg:gap-8">
+            <aside
+              aria-label="Settings"
+              className="hidden w-56 shrink-0 bg-transparent lg:block lg:self-stretch lg:overflow-y-auto lg:overscroll-contain"
+            >
+              {sidebar}
+            </aside>
+
+            <div
+              className={cn(
+                "min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain pb-6",
+                contentClassName,
+              )}
+            >
+              {children}
+            </div>
+          </div>
+        </div>
+      )}
+    </SuitePage>
+  );
+}

package/src/suite/components/suite-settings-mobile-nav.tsx

@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { isValidElement, type ComponentType, type ReactNode } from 'react';
-import { cn } from '../lib/cn';
+import { isValidElement, type ElementType, type ReactNode } from "react";
+import { cn } from "../lib/cn";
 
 export interface SuiteSettingsNavItem {
   label: string;
   href: string;
-  icon: ComponentType<{ className?: string; 'aria-hidden'?: boolean }> | ReactNode;
+  icon: ElementType | ReactNode;
   testId?: string;
 }
 
@@ -15,6 +15,8 @@ interface SuiteSettingsMobileNavProps {
   activeHref: string;
   onSelect: (href: string) => void;
   dataTest?: string;
+  ariaLabel?: string;
+  className?: string;
 }
 
 /**
@@ -28,19 +30,18 @@ export function SuiteSettingsMobileNav({
   activeHref,
   onSelect,
   dataTest,
+  ariaLabel = "Settings sections",
+  className,
 }: SuiteSettingsMobileNavProps) {
   return (
     <nav
       data-test={dataTest}
-      aria-label="Settings sections"
-      className="-mx-4 px-4 lg:hidden"
+      aria-label={ariaLabel}
+      className={cn("suite-settings-mobile-nav lg:hidden", className)}
     >
       <div className="flex snap-x gap-2 overflow-x-auto pb-3 pt-1 scrollbar-hide [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         {items.map((item) => {
-          const Icon = item.icon as ComponentType<{
-            className?: string;
-            'aria-hidden'?: boolean;
-          }>;
+          const Icon = item.icon as ElementType;
           const active =
             activeHref === item.href || activeHref.startsWith(`${item.href}/`);
           const iconNode = isValidElement(item.icon) ? (
@@ -48,8 +49,8 @@ export function SuiteSettingsMobileNav({
           ) : (
             <Icon
               className={cn(
-                'h-4 w-4 shrink-0 transition',
-                active ? 'text-ph-surface' : 'text-ph-mutedtext',
+                "h-4 w-4 shrink-0 transition",
+                active ? "text-ph-surface" : "text-ph-mutedtext",
               )}
               aria-hidden
             />
@@ -60,13 +61,13 @@ export function SuiteSettingsMobileNav({
               type="button"
               data-test={item.testId}
               onClick={() => onSelect(item.href)}
-              aria-current={active ? 'page' : undefined}
+              aria-current={active ? "page" : undefined}
               className={cn(
-                'group relative flex shrink-0 snap-start items-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium transition',
-                'min-h-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand',
+                "group relative flex shrink-0 snap-start items-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium transition-colors",
+                "min-h-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
                 active
-                  ? 'bg-ph-ink text-ph-surface shadow-sm'
-                  : 'bg-ph-surface text-ph-subtle ring-1 ring-ph-border hover:bg-ph-muted hover:text-ph-ink',
+                  ? "bg-ph-ink text-ph-surface shadow-sm"
+                  : "bg-ph-surface text-ph-subtle ring-1 ring-ph-border hover:bg-ph-muted hover:text-ph-ink",
               )}
             >
               {iconNode}

package/src/suite/components/suite-skeleton.tsx

@@ -65,7 +65,7 @@ export function SuiteSkeletonCard({
   return (
     <div
       className={cn(
-        'ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-2xl border border-ph-border/70 bg-ph-surface p-6 shadow-sm',
+        'ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-2xl border border-ph-border bg-ph-surface p-6 shadow-sm',
         className,
       )}
       aria-hidden
@@ -115,7 +115,7 @@ export function SuiteSkeletonList({
           className="animate-[skeleton-stagger_0.6s_ease-out_both]"
           style={{ animationDelay: `${index * 100}ms` }}
         >
-          <div className="flex items-center gap-3 rounded-xl border border-ph-border/60 bg-ph-surface p-4">
+          <div className="flex items-center gap-3 rounded-xl border border-ph-border bg-ph-surface p-4">
             <div className="ph-skeleton h-10 w-10 rounded-lg" />
             <div className="min-w-0 flex-1 space-y-2">
               <div className="ph-skeleton h-3.5 w-3/4" />
@@ -152,7 +152,7 @@ export function SuiteEmptyState({
   return (
     <div
       className={cn(
-        'relative overflow-hidden rounded-2xl border border-ph-border/80 bg-ph-surface text-center',
+        'relative overflow-hidden rounded-2xl border border-ph-border bg-ph-surface text-center',
         size === 'sm' ? 'px-5 py-8' : 'px-6 py-12 sm:px-10 sm:py-16',
         className,
       )}

package/src/suite/components/today-calibrating.tsx

@@ -7,58 +7,40 @@ import type { SuiteSpinnerComponent } from '../lib/injected';
 
 /**
  * Today-page loading/empty calibrating state. Apps inject their branded
- * AppSpinner; `variant` picks the ornamentation style:
- * - `ring` — large spinner ring + ping behind the sun (TurtleTime/ShellStack)
- * - `pulse` — pulsing sun only (Tides/Kraken)
+ * AppSpinner. Kept deliberately quiet — single soft fade + one spinner,
+ * no ping/pulse stacks that compete with OAuth/launch handoffs.
  */
 export function TodayCalibrating({
   onRetry,
   retrying = false,
   className,
   spinner: Spinner,
-  variant = 'ring',
+  variant: _variant = 'ring',
   retrySpinnerClassName = 'text-ph-brand',
 }: {
   onRetry?: () => void;
   retrying?: boolean;
   className?: string;
   spinner: SuiteSpinnerComponent;
+  /** @deprecated Kept for call-site compat; ornamentation is always calm. */
   variant?: 'ring' | 'pulse';
   retrySpinnerClassName?: string;
 }) {
+  void _variant;
   return (
     <div
       className={cn(
-        'relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm',
+        'suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm',
         className,
       )}
       data-test="today-calibrating"
     >
       <div
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.12),transparent_55%)]"
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.1),transparent_55%)]"
         aria-hidden
       />
-      <div className="relative mb-6 flex h-24 w-24 items-center justify-center">
-        {variant === 'ring' ? (
-          <>
-            <Spinner
-              size="lg"
-              className="absolute inset-0 m-auto opacity-40"
-              label="Loading today"
-            />
-            <span
-              className="bg-ph-muted/30 absolute inset-2 animate-ping rounded-full"
-              aria-hidden
-            />
-          </>
-        ) : null}
-        <span className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm">
-          <Sun
-            className={cn('h-9 w-9', variant === 'pulse' && 'animate-pulse')}
-            strokeWidth={2}
-            aria-hidden
-          />
-        </span>
+      <div className="relative mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm">
+        <Sun className="h-8 w-8" strokeWidth={2} aria-hidden />
       </div>
       <h2 className="relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl">
         Calibrating your day
@@ -66,14 +48,8 @@ export function TodayCalibrating({
       <p className="relative mt-1.5 max-w-sm text-sm sm:text-[15px] leading-relaxed text-ph-subtle">
         Pulling together tasks, time and updates from your workspace…
       </p>
-      <div className="relative mt-5 flex gap-1.5" aria-hidden>
-        {[0, 1, 2, 3, 4].map((i) => (
-          <span
-            key={i}
-            className="h-1.5 w-5 animate-pulse rounded-full bg-ph-muted"
-            style={{ animationDelay: `${i * 120}ms` }}
-          />
-        ))}
+      <div className="relative mt-5 flex justify-center">
+        <Spinner size="sm" className="opacity-70" label="Loading today" />
       </div>
       {onRetry ? (
         <button

package/src/suite/components/today-page-frame.tsx

@@ -1,26 +1,34 @@
-'use client';
+"use client";
 
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 
-/** Full-bleed theme wash + soft clouds; uses ph-* tokens from each app's theme. */
+/**
+ * Today page content wrapper with soft atmosphere.
+ * Does not own scrolling — `#main-content` is the scrollport so sticky headers work.
+ * Glow/clouds are absolute and do not create a nested scrollport.
+ */
 export function TodayPageFrame({ children }: { children: ReactNode }) {
   return (
     <div
       data-test="today-page"
-      className="today-page-frame relative flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden"
+      className="today-page-frame relative flex min-h-0 w-full flex-1 flex-col overflow-x-hidden"
     >
       <div
-        className="pointer-events-none absolute inset-x-0 top-0 h-[34rem] overflow-hidden"
+        className="pointer-events-none absolute inset-0 overflow-hidden"
         aria-hidden
       >
         <div className="today-page-frame__glow absolute inset-0" />
-        <div className="today-page-frame__sun absolute -right-16 -top-16 h-72 w-72 rounded-full bg-gradient-to-br from-amber-300/30 via-rose-300/20 to-rose-400/10 blur-3xl opacity-60 motion-safe:animate-[pulse_8s_ease-in-out_infinite] motion-reduce:opacity-40" />
-        <div className="today-page-frame__top-fade absolute inset-x-0 top-0 h-64" />
-        <div className="today-page-frame__cloud today-page-frame__cloud--1 absolute -left-24 top-28 h-80 w-[26rem] rounded-[45%]" />
-        <div className="today-page-frame__cloud today-page-frame__cloud--2 absolute -right-20 top-40 h-72 w-80 rounded-[40%]" />
-        <div className="today-page-frame__cloud today-page-frame__cloud--3 absolute left-[28%] top-[58%] h-64 w-[22rem] rounded-[50%]" />
+        <div className="today-page-frame__top-fade absolute inset-x-0 top-0 h-[28rem]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--1 absolute -left-28 top-16 h-96 w-[30rem] rounded-[45%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--2 absolute -right-24 top-24 h-80 w-[22rem] rounded-[40%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--3 absolute left-[22%] top-48 h-72 w-[24rem] rounded-[50%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--4 absolute right-[18%] top-[42%] h-64 w-[20rem] rounded-[48%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--5 absolute left-[8%] top-[68%] h-56 w-[18rem] rounded-[42%]" />
       </div>
-      <div className="relative flex-1 px-4 pb-5 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-8 [&_.list-row]:min-h-[52px] [&_.list-row]:sm:min-h-[44px]">
+      <div
+        data-width="full"
+        className="suite-page-stage suite-page-inset relative z-[1] flex w-full min-w-0 flex-1 flex-col [&_.list-row]:min-h-[52px] [&_.list-row]:sm:min-h-[44px]"
+      >
         {children}
       </div>
     </div>