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

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

@@ -13,6 +13,11 @@ export interface SuiteAppLayoutProps {
   sidebarWidth?: number;
   /** True when the sidebar is collapsed to the icon rail. */
   collapsed?: boolean;
+  /**
+   * When true, `#main-content` does not scroll — the page owns an internal
+   * scrollport (e.g. Deep Research: fixed header + composer, chat scrolls).
+   */
+  lockMainScroll?: boolean;
   /** Drag this to resize the sidebar. */
   onStartResize?: (e: PointerEvent<HTMLDivElement>) => void;
   /** Double-click to reset sidebar width. */
@@ -21,10 +26,9 @@ export interface SuiteAppLayoutProps {
 }
 
 /**
- * Responsive ShellStack app shell. Desktop: resizable fixed sidebar +
- * scrollable content with an optional drag handle. Mobile/tablet: mobile
- * header + content + bottom nav. This is the single layout primitive every
- * app should use.
+ * Responsive ShellStack app shell. One content tree (no duplicate children),
+ * one `#main-content` landmark. Desktop: fixed sidebar + scrollable main.
+ * Mobile: header + main + bottom nav.
  */
 export function SuiteAppLayout({
   sidebar,
@@ -33,36 +37,52 @@ export function SuiteAppLayout({
   bottomNav,
   sidebarWidth = 240,
   collapsed = false,
+  lockMainScroll = false,
   onStartResize,
   onResetWidth,
   className,
 }: SuiteAppLayoutProps) {
   return (
-    <div data-test="app-shell" className={cn('min-h-screen', className)}>
-      <div className="hidden lg:flex h-screen overflow-hidden">
-        <aside
-          className="relative flex shrink-0 flex-col border-r border-ph-border transition-[width] duration-200 ease-out"
-          style={{ width: `${sidebarWidth}px` }}
-        >
-          {sidebar}
-          {onStartResize ? (
-            <div
-              role="separator"
-              aria-orientation="vertical"
-              aria-label="Resize sidebar"
-              onPointerDown={onStartResize}
-              onDoubleClick={onResetWidth}
-              className="absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
-            />
-          ) : null}
-        </aside>
-        <main className="min-w-0 flex-1 overflow-y-auto bg-ph-canvas">{children}</main>
-      </div>
+    <div
+      data-test="app-shell"
+      className={cn('flex min-h-dvh lg:h-screen lg:overflow-hidden', className)}
+    >
+      <aside
+        className="relative hidden shrink-0 flex-col overflow-hidden border-r border-ph-border transition-[width] duration-200 ease-out lg:flex"
+        style={{ width: `${sidebarWidth}px` }}
+        data-collapsed={collapsed ? 'true' : 'false'}
+      >
+        {sidebar}
+        {onStartResize ? (
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize sidebar"
+            onPointerDown={onStartResize}
+            onDoubleClick={onResetWidth}
+            className="absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+          />
+        ) : null}
+      </aside>
 
-      <div className="flex min-h-screen flex-col lg:hidden">
-        {mobileHeader ? <div className="shrink-0">{mobileHeader}</div> : null}
-        <main className="min-w-0 flex-1 overflow-y-auto bg-ph-canvas">{children}</main>
-        {bottomNav ? <div className="shrink-0">{bottomNav}</div> : null}
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+        {mobileHeader ? (
+          <div className="shrink-0 lg:hidden">{mobileHeader}</div>
+        ) : null}
+        <main
+          id="main-content"
+          tabIndex={-1}
+          data-lock-scroll={lockMainScroll ? 'true' : undefined}
+          className={cn(
+            'flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none',
+            lockMainScroll ? 'overflow-hidden' : 'overflow-y-auto',
+          )}
+        >
+          {children}
+        </main>
+        {bottomNav ? (
+          <div className="shrink-0 lg:hidden">{bottomNav}</div>
+        ) : null}
       </div>
     </div>
   );

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,
       )}