Function AppPageFrame

ui/src/components/layout/AppPageFrame.tsx:24–56

({
  children,
  mainId = "page-main",
  className,
  surface = "studio",
  mainClassName,
  ariaLabelledBy,
  showSkipLink = true,
}: AppPageFrameProps)

 * Shared layout: skip link, `touch-manipulation`, and a focusable `<main>` landmark (Web Interface Guidelines).
 */
export function AppPageFrame({
  children,
  mainId = "page-main",
  className,
  surface = "studio",
  mainClassName,
  ariaLabelledBy,
  showSkipLink = true,
}: AppPageFrameProps) {
  return (
    <div
      className={cn(
        "relative min-h-screen touch-manipulation",
        surface === "studio" && "bg-gradient-to-b from-background via-background to-muted/15",
        className,
      )}
    >
      {showSkipLink ? (
        <a href={`#${mainId}`} className={skipToContentLinkClassName}>
          Skip to content
        </a>
      ) : null}
      <main
        id={mainId}
        className={cn("scroll-mt-8 outline-none", mainClassName)}
        tabIndex={-1}
        {...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {})}
      >
        {children}
      </main>
    </div>
  );
}