@flamingo-stack/openframe-frontend-core 0.0.584 → 0.0.585-snapshot.20260903083645

package/src/components/features/auth/login-form.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import type { KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
 import { cn } from '../../../utils/cn';
+import { AlertTriangleIcon } from '../../icons-v2-generated/interface/alert-triangle-icon';
+import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
+import { LabeledDivider } from './labeled-divider';
 import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 
@@ -11,8 +14,6 @@ export interface LoginFormProps {
   /** Controlled email value */
   email: string;
   onEmailChange: (value: string) => void;
-  /** Enter-key handler on the email field (optional). */
-  onSubmit?: () => void;
   emailPlaceholder?: string;
   loading?: boolean;
   disabled?: boolean;
@@ -22,8 +23,8 @@ export interface LoginFormProps {
   /** Informational status under the email field (e.g. live tenant discovery). `errors.email` wins. */
   emailStatus?: { message: string; variant: 'error' | 'warning' | 'success' | 'muted' };
   /**
-   * SSO providers rendered below the email field. Always visible; gate
-   * clickability with `ssoDisabled` / `ssoEnabledProviders`.
+   * SSO providers, rendered ABOVE the email field with a divider between the two. Always visible;
+   * gate clickability with `ssoDisabled` / `ssoEnabledProviders`.
    */
   ssoProviders: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
@@ -31,21 +32,44 @@ export interface LoginFormProps {
   ssoDisabled?: boolean;
   /** When set, only these providers are clickable; the rest stay disabled. */
   ssoEnabledProviders?: AuthSsoProvider[];
-  /** Verb prefix for provider buttons, e.g. "Continue with". Ignored for "openframe". */
+  /** Verb prefix for provider buttons, e.g. "Continue with". */
   ssoActionLabel?: string;
+  /** Label on the divider between the provider buttons and the email field. */
+  dividerLabel?: string;
+  /**
+   * The discovered tenant's own SSO options, rendered UNDER the email field — unlike `ssoProviders`
+   * above, these depend on knowing the tenant, so they cannot be offered before an address is
+   * typed. Shares `onSsoClick`.
+   *
+   * Three states, and the empty array is not the same as nothing: `undefined` means discovery has
+   * not resolved a tenant yet and the slot stays empty, while `[]` means it resolved and the tenant
+   * has none — which is an answer worth showing rather than silence.
+   */
+  customSsoProviders?: AuthSsoProvider[];
+  /** Shown in place of the custom SSO buttons when the resolved tenant has none configured. */
+  noCustomSsoLabel?: string;
+  /** Primary submit under the email field. Omit the handler to hide the button. */
+  onSubmitClick?: () => void;
+  submitLabel?: string;
+  /** Disables just the primary submit (fields stay editable). */
+  submitDisabled?: boolean;
+  /** Overrides the default heading. */
+  title?: string;
+  /** Overrides the default sub-heading. */
+  subtitle?: ReactNode;
   className?: string;
 }
 
 /**
  * Login form (Login tab). Presentational + controlled — the consumer owns
- * state, validation and discovery. Single-screen design: the email field and
- * the SSO provider buttons are always visible; the buttons unlock once the
- * consumer validates the email (real-time tenant discovery).
+ * state, validation and discovery. Single-screen design: the provider buttons come first and need
+ * nothing typed, then the email field below them. Whether the providers are gated is the
+ * consumer's call via `ssoDisabled`; the identity-first flows leave them open, because the server
+ * resolves the tenant from the identity the provider asserts.
  */
 export function LoginForm({
   email,
   onEmailChange,
-  onSubmit,
   emailPlaceholder = 'username@mail.com',
   loading = false,
   disabled = false,
@@ -56,6 +80,14 @@ export function LoginForm({
   ssoDisabled = false,
   ssoEnabledProviders,
   ssoActionLabel = 'Continue with',
+  dividerLabel = 'or continue with OpenFrame SSO',
+  customSsoProviders,
+  noCustomSsoLabel = 'No additional SSO configurations for this domain',
+  onSubmitClick,
+  submitLabel = 'Continue',
+  submitDisabled = false,
+  title = 'Login to OpenFrame',
+  subtitle = 'Enter your email to access your organization.',
   className,
 }: LoginFormProps) {
   const fieldDisabled = disabled || loading;
@@ -63,10 +95,11 @@ export function LoginForm({
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
 
+  // Enter drives the same action as the visible button, under the same gate. A form with no
+  // submit (the Login tab, where the providers are the only way on) simply does nothing.
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !fieldDisabled) {
-      onSubmit?.();
-    }
+    if (event.key !== 'Enter' || fieldDisabled || submitDisabled) return;
+    onSubmitClick?.();
   };
 
   return (
@@ -78,10 +111,25 @@ export function LoginForm({
     >
       {/* Header */}
       <div className="flex flex-col">
-        <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">Login to OpenFrame</h1>
-        <p className="text-ods-text-secondary text-h4">Enter your email to access your organization.</p>
+        <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">{title}</h1>
+        <p className="text-ods-text-secondary text-h4">{subtitle}</p>
       </div>
 
+      {/* Providers come FIRST. They need nothing typed, and putting the email above them taught
+          people to fill it in before tapping one — the behaviour that made a provider button look
+          broken while it waited on a field it never needed. */}
+      {ssoProviders.length > 0 && (
+        <SsoProviderButtons
+          providers={ssoProviders}
+          onSsoClick={onSsoClick}
+          actionLabel={ssoActionLabel}
+          disabled={disabled || loading || ssoDisabled}
+          enabledProviders={ssoEnabledProviders}
+        />
+      )}
+
+      {ssoProviders.length > 0 && <LabeledDivider label={dividerLabel} />}
+
       {/* Email */}
       <Input
         type="email"
@@ -96,14 +144,45 @@ export function LoginForm({
         onKeyDown={handleKeyDown}
       />
 
-      {/* SSO providers — always visible, unlocked by the consumer */}
-      <SsoProviderButtons
-        providers={ssoProviders}
-        onSsoClick={onSsoClick}
-        actionLabel={ssoActionLabel}
-        disabled={disabled || loading || ssoDisabled}
-        enabledProviders={ssoEnabledProviders}
-      />
+      {customSsoProviders &&
+        (customSsoProviders.length > 0 ? (
+          <SsoProviderButtons
+            providers={customSsoProviders}
+            onSsoClick={onSsoClick}
+            actionLabel={ssoActionLabel}
+            disabled={disabled || loading}
+          />
+        ) : (
+          // Same footprint as the button it stands in for, so nothing shifts when a tenant does
+          // have options. Tokens are the design's: soft-grey surface, grey text and icon, the
+          // bold-body step, a 24px icon, and 12/16 for the inset and the gap.
+          <div
+            role="status"
+            className="flex h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:h-12"
+          >
+            <AlertTriangleIcon className="h-6 w-6 shrink-0" />
+            {noCustomSsoLabel}
+          </div>
+        ))}
+
+      {onSubmitClick && (
+        // Full width on a phone, half the row and right-aligned from `md` up, matching the design.
+        // The spacer, rather than a width on the button, keeps it flush with the fields' right edge.
+        <div className="flex items-center gap-[var(--spacing-system-l)]">
+          <div className="hidden flex-1 md:block" />
+          <Button
+            type="button"
+            variant="accent"
+            fullWidth
+            className="md:flex-1"
+            loading={loading}
+            disabled={submitDisabled || fieldDisabled}
+            onClick={onSubmitClick}
+          >
+            {submitLabel}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/features/auth/openframe-sso-signup-form.tsx

@@ -5,7 +5,7 @@ import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
 import { cn } from '../../../utils/cn';
 import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
-import { PasswordInput } from '../../ui/password-input';
+import { AccountDetailsFields } from './account-details-fields';
 
 export interface OpenFrameSsoSignUpFormProps {
   /** Controlled field values */
@@ -75,10 +75,6 @@ export function OpenFrameSsoSignUpForm({
 
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
-  const firstNameErr = useDeferredError(errors?.firstName, firstName);
-  const lastNameErr = useDeferredError(errors?.lastName, lastName);
-  const passwordErr = useDeferredError(errors?.password, password);
-  const confirmErr = useDeferredError(errors?.confirmPassword, confirmPassword);
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
@@ -111,45 +107,17 @@ export function OpenFrameSsoSignUpForm({
         onKeyDown={handleKeyDown}
       />
 
-      {/* Name + password fields — single column on every breakpoint */}
-      <Input
-        label="First Name"
-        placeholder="Enter First Name"
-        value={firstName}
-        error={firstNameErr.error}
-        disabled={fieldsDisabled}
-        onBlur={firstNameErr.onBlur}
-        onChange={event => onFirstNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <Input
-        label="Last Name"
-        placeholder="Enter Last Name"
-        value={lastName}
-        error={lastNameErr.error}
-        disabled={fieldsDisabled}
-        onBlur={lastNameErr.onBlur}
-        onChange={event => onLastNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Password"
-        placeholder="Enter Password"
-        value={password}
-        error={passwordErr.error}
-        disabled={fieldsDisabled}
-        onBlur={passwordErr.onBlur}
-        onChange={event => onPasswordChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Confirm Password"
-        placeholder="Confirm Password"
-        value={confirmPassword}
-        error={confirmErr.error}
+      <AccountDetailsFields
+        firstName={firstName}
+        lastName={lastName}
+        password={password}
+        confirmPassword={confirmPassword}
+        onFirstNameChange={onFirstNameChange}
+        onLastNameChange={onLastNameChange}
+        onPasswordChange={onPasswordChange}
+        onConfirmPasswordChange={onConfirmPasswordChange}
+        errors={errors}
         disabled={fieldsDisabled}
-        onBlur={confirmErr.onBlur}
-        onChange={event => onConfirmPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
 

package/src/components/features/auth/sso-providers.tsx

@@ -12,7 +12,7 @@ export type AuthSsoProvider = 'openframe' | 'google' | 'microsoft' | 'apple';
 
 export const PROVIDER_META: Record<AuthSsoProvider, { name: string; Icon: ComponentType<{ className?: string }> }> = {
   openframe: {
-    name: 'OpenFrame SSO',
+    name: 'OpenFrame',
     Icon: ({ className }) => (
       <OpenFrameLogo
         className={className}
@@ -29,7 +29,7 @@ export const PROVIDER_META: Record<AuthSsoProvider, { name: string; Icon: Compon
 export interface SsoProviderButtonsProps {
   providers: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
-  /** Verb prefix for provider buttons, e.g. "Continue with". Ignored for "openframe". */
+  /** Verb prefix for provider buttons, e.g. "Continue with". */
   actionLabel?: string;
   disabled?: boolean;
   /**
@@ -65,7 +65,7 @@ export function SsoProviderButtons({
             leftIcon={<Icon className="h-5 w-5" />}
             onClick={() => onSsoClick?.(provider)}
           >
-            {provider === 'openframe' ? meta.name : `${actionLabel} ${meta.name}`}
+            {`${actionLabel} ${meta.name}`}
           </Button>
         );
       })}

package/src/components/features/media-gallery-manager.tsx

@@ -4,9 +4,10 @@ import { Upload, Image as ImageIcon, Video as VideoIcon, Trash2, Loader2, GripVe
 import type React from 'react';
 import { useState, useRef, useCallback } from 'react';
 import Image from '../../embed-shims/next-image';
+import { isVideoMedia } from '../../utils/media-type';
 import { Button, Card } from '../ui';
-import { Video } from './video';
 
+import { Video } from './video';
 export interface MediaItem {
   id?: string | number; // Optional for new items
   media_type: 'image' | 'video' | 'screenshot' | 'demo';
@@ -157,7 +158,7 @@ export function MediaGalleryManager({
 
           {/* Media Content */}
           <div className="relative aspect-video overflow-hidden rounded-lg bg-ods-bg">
-            {mediaItem.media_type === 'video' || mediaItem.media_type === 'demo' ? (
+            {isVideoMedia(mediaItem) || mediaItem.media_type === 'demo' ? (
               // <Video> SSOT (MuxPlayer) — plays Mux HLS + MP4 alike;
               // fit="cover" crops to the aspect-video cell.
               <Video kind="file" url={mediaItem.media_url} fit="cover" className="h-full w-full" />
@@ -175,7 +176,7 @@ export function MediaGalleryManager({
           {/* Media Info */}
           <div className="p-3">
             <div className="mb-1 flex items-center gap-2">
-              {mediaItem.media_type === 'video' || mediaItem.media_type === 'demo' ? (
+              {isVideoMedia(mediaItem) || mediaItem.media_type === 'demo' ? (
                 <VideoIcon className="h-4 w-4 text-ods-text-secondary" />
               ) : (
                 <ImageIcon className="h-4 w-4 text-ods-text-secondary" />

package/src/components/features/push-button-selector.tsx

@@ -7,8 +7,11 @@ import { UnifiedSkeleton } from '../loading';
 import { Badge, Input } from '../ui';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 
-export interface SelectableOption {
-  id: string; // Selection ID (UUID for platforms, value for others)
+/** Option ids are whatever the consumer keys its rows by — string (UUID / enum value) or numeric row id. */
+export type SelectableOptionId = string | number;
+
+export interface SelectableOption<Id extends SelectableOptionId = string> {
+  id: Id; // Selection ID (UUID / value for platforms, numeric row id for DB-keyed rows)
   name: string; // Primary identifier (platform enum or item name)
   displayName?: string; // Optional display name (for platforms)
   description?: string;
@@ -51,10 +54,10 @@ export interface PushButtonSelectorLazyLoad {
   maxHeight?: string;
 }
 
-interface PushButtonSelectorProps {
-  options: SelectableOption[];
-  selectedIds: string[];
-  onSelectionChange: (selectedIds: string[]) => void;
+interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
+  options: SelectableOption<Id>[];
+  selectedIds: Id[];
+  onSelectionChange: (selectedIds: Id[]) => void;
   multiSelect?: boolean;
   title?: string;
   helpText?: string;
@@ -116,7 +119,7 @@ function PushButtonSelectorError({ message, title }: { message: string; title?:
   );
 }
 
-export function PushButtonSelector({
+export function PushButtonSelector<Id extends SelectableOptionId = string>({
   options,
   selectedIds,
   onSelectionChange,
@@ -134,7 +137,7 @@ export function PushButtonSelector({
   lazyLoad,
   emptyMessage,
   footer,
-}: PushButtonSelectorProps) {
+}: PushButtonSelectorProps<Id>) {
   // Lazy-load sentinel: observe within the scroll viewport so onLoadMore
   // fires as the user approaches the bottom. Hooks run unconditionally
   // (before the early returns) per the rules of hooks. Pass a STABLE
@@ -209,7 +212,7 @@ export function PushButtonSelector({
     console.warn('[PushButtonSelector] Invalid selected IDs filtered:', invalidIds);
   }
 
-  const toggleSelection = (optionId: string) => {
+  const toggleSelection = (optionId: Id) => {
     if (multiSelect) {
       const isSelected = validSelectedIds.includes(optionId);
       if (isSelected) {
@@ -226,7 +229,7 @@ export function PushButtonSelector({
   const getSelectedOptions = () => options.filter(option => validSelectedIds.includes(option.id));
 
   // Helper to render a single option
-  const renderOption = (option: SelectableOption) => {
+  const renderOption = (option: SelectableOption<Id>) => {
     const isSelected = validSelectedIds.includes(option.id);
 
     const optionEl = (
@@ -297,8 +300,8 @@ export function PushButtonSelector({
     }
 
     // Group options by section
-    const optionsBySection = new Map<string, SelectableOption[]>();
-    const ungroupedOptions: SelectableOption[] = [];
+    const optionsBySection = new Map<string, SelectableOption<Id>[]>();
+    const ungroupedOptions: SelectableOption<Id>[] = [];
 
     options.forEach(option => {
       if (option.section) {

package/src/components/features/release-media-manager.tsx

@@ -4,9 +4,10 @@ import { Trash2, Plus, Image as ImageIcon, Video as VideoIcon, Upload, Loader2,
 import { useState, useRef } from 'react';
 import type { ChangeEvent, DragEvent } from 'react';
 import Image from '../../embed-shims/next-image';
+import { isVideoMedia } from '../../utils/media-type';
 import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui';
-import { Video } from './video';
 
+import { Video } from './video';
 export interface ReleaseMediaItem {
   media_type: 'image' | 'video' | 'screenshot' | 'demo';
   media_url: string;
@@ -199,7 +200,7 @@ export function ReleaseMediaManager({ media, onChange, onUpload, className = ''
                 {/* Media Preview */}
                 {item.media_url && (
                   <div className="relative aspect-video bg-ods-bg">
-                    {item.media_type === 'video' || item.media_type === 'demo' ? (
+                    {isVideoMedia(item) || item.media_type === 'demo' ? (
                       // <Video> SSOT (MuxPlayer) — plays Mux HLS + MP4 alike;
                       // fit="cover" crops to the aspect-video cell.
                       <Video kind="file" url={item.media_url} fit="cover" className="h-full w-full" />

package/src/components/features/video.tsx

@@ -34,6 +34,7 @@ import MuxPlayer from '@mux/mux-player-react';
 import type React from 'react';
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useAuthedAssetSrc } from '../../hooks/use-authed-asset-src';
+import { useNearViewport } from '../../hooks/use-near-viewport';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
 import { Button } from '../ui/button';
 import { useIosNativeVideoFullscreen } from './use-ios-native-video-fullscreen';
@@ -396,6 +397,14 @@ interface VideoCommonProps {
   className?: string;
   /** Accessible label (used as YT facade title; ignored for file branch). */
   title?: string;
+  /**
+   * Mount the player only once its box comes near the viewport (shared
+   * fire-once IntersectionObserver, `NEAR_VIEWPORT_ROOT_MARGIN` lookahead).
+   * Until then the box shows the poster (or nothing) — the caller's container
+   * still owns the size, so nothing shifts when the player mounts. For grids
+   * of players: a library of 20 clips costs 20 posters, not 20 players.
+   */
+  lazy?: boolean;
   /**
    * YouTube-only: hide YT player chrome (controls, info, fullscreen, related
    * videos, keyboard shortcuts). Used for marketing/landing-page embeds that
@@ -552,12 +561,31 @@ export type VideoProps = VideoFileProps | VideoYouTubeProps | VideoAutoProps;
 // =============================================================================
 
 export function Video(props: VideoProps): React.ReactElement | null {
+  // Hooks run unconditionally; the gate only applies when `lazy` is set.
+  const { ref: nearRef, isNear } = useNearViewport<HTMLDivElement>();
   const url = props.url;
   if (!url) return null;
 
   const effectiveKind = resolveKind(props, url);
   const layout = props.layout ?? 'native';
 
+  if (props.lazy && !isNear) {
+    // Same box, poster only: the observer target IS the reserved space.
+    return wrapWithLayout(
+      <div
+        ref={nearRef}
+        className={props.className}
+        style={
+          props.poster
+            ? { backgroundImage: `url(${props.poster})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+            : undefined
+        }
+        aria-hidden="true"
+      />,
+      layout,
+    );
+  }
+
   const inner =
     effectiveKind === 'youtube' ? (
       <YouTubeFacade

package/src/components/loading/__tests__/unified-skeleton.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { UnifiedSkeleton } from '../unified-skeleton';
+
+describe('UnifiedSkeleton sizing', () => {
+  it('applies the default height when nothing sizes the box', () => {
+    const { container } = render(<UnifiedSkeleton className="w-full" />);
+    expect(container.firstElementChild?.className).toMatch(/\bh-4\b/);
+  });
+
+  it('lets an aspect-* utility size the box instead of the default height', () => {
+    const { container } = render(<UnifiedSkeleton className="aspect-video w-full" />);
+    expect(container.firstElementChild?.className).not.toMatch(/\bh-4\b/);
+    expect(container.firstElementChild?.className).toMatch(/aspect-video/);
+  });
+});

package/src/components/loading/unified-skeleton.tsx

@@ -60,6 +60,10 @@ export function UnifiedSkeleton({
 
   const animationClasses = animate ? 'animate-pulse motion-reduce:animate-none' : '';
 
+  // An `aspect-*` utility sizes the box itself; a default height would win
+  // over it (explicit height beats aspect-ratio) and collapse the box to 16px.
+  const sizedByAspect = /(?:^|\s)aspect-/.test(className ?? '');
+
   const style: React.CSSProperties = {
     width: width,
     height: height,
@@ -70,7 +74,7 @@ export function UnifiedSkeleton({
       className={cn(
         baseClasses,
         variantClasses[variant],
-        !height && !style.height && defaultHeights[variant],
+        !height && !style.height && !sizedByAspect && defaultHeights[variant],
         !width && !style.width && variant !== 'circular' && 'w-full',
         animationClasses,
         className,

package/src/components/ui/__tests__/lazy-mount.test.tsx

@@ -0,0 +1,46 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { LazyMount } from '../lazy-mount';
+
+type IOCallback = (entries: Array<{ isIntersecting: boolean; intersectionRatio: number; target: Element }>) => void;
+
+describe('LazyMount', () => {
+  let callbacks: IOCallback[];
+  let observed: Element[];
+  beforeEach(() => {
+    callbacks = [];
+    observed = [];
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        constructor(cb: IOCallback) {
+          callbacks.push(cb);
+        }
+        observe(el: Element) {
+          observed.push(el);
+        }
+        unobserve() {}
+        disconnect() {}
+      },
+    );
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('renders the placeholder until the box intersects, then the content, and stays mounted', () => {
+    render(
+      <LazyMount rootMargin="1px" placeholder={<span>placeholder</span>}>
+        <span>player</span>
+      </LazyMount>,
+    );
+    expect(screen.getByText('placeholder')).toBeTruthy();
+    expect(screen.queryByText('player')).toBeNull();
+    // The observed element IS the wrapper the hook registered — no DOM walking.
+    const target = observed[observed.length - 1];
+    const fire = callbacks[callbacks.length - 1];
+    act(() => fire([{ isIntersecting: false, intersectionRatio: 0, target }]));
+    expect(screen.queryByText('player')).toBeNull();
+    act(() => fire([{ isIntersecting: true, intersectionRatio: 1, target }]));
+    expect(screen.getByText('player')).toBeTruthy();
+    expect(screen.queryByText('placeholder')).toBeNull();
+  });
+});

package/src/components/ui/index.ts

@@ -218,3 +218,6 @@ export * from './ticket-notes-section';
 export * from './marquee-wall';
 export * from './markdown';
 export * from './filter-pill-row';
+
+// Viewport-gated mounting for heavy previews (players, large images)
+export { LazyMount, type LazyMountProps } from './lazy-mount';

package/src/components/ui/lazy-mount.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import type { CSSProperties, ReactNode } from 'react';
+import { useNearViewport, NEAR_VIEWPORT_ROOT_MARGIN } from '../../hooks/use-near-viewport';
+
+export interface LazyMountProps {
+  /** Mounted the first time the box comes within `rootMargin` of the viewport; never unmounted after. */
+  children: ReactNode;
+  /** What fills the box until then. The box itself must already have its final size (aspect-ratio / min-height). */
+  placeholder?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  /** Lookahead — defaults to the shared `NEAR_VIEWPORT_ROOT_MARGIN`. */
+  rootMargin?: string;
+}
+
+/**
+ * Sized box whose CONTENT mounts only near the viewport (shared fire-once
+ * IntersectionObserver via `useNearViewport`). The box owns the layout —
+ * pass the aspect-ratio / min-height on it — so lazy mounting never shifts
+ * anything: the content appears inside a space that was already reserved.
+ * Grids of players or large images render their chrome immediately and pay
+ * for each preview only when it is about to be seen.
+ */
+export function LazyMount({
+  children,
+  placeholder = null,
+  className,
+  style,
+  rootMargin = NEAR_VIEWPORT_ROOT_MARGIN,
+}: LazyMountProps) {
+  const { ref, isNear } = useNearViewport<HTMLDivElement>(rootMargin);
+  return (
+    <div ref={ref} className={className} style={style}>
+      {isNear ? children : placeholder}
+    </div>
+  );
+}

package/src/stories/auth/Login.stories.tsx

@@ -48,8 +48,7 @@ function LoginPage(initial: Partial<LoginFormProps>) {
           email={email}
           onEmailChange={setEmail}
           submitDisabled={!isValid}
-          onSubmit={() => {}}
-          onForgotPassword={() => {}}
+          onSubmitClick={() => {}}
         />
       ) : (
         <div className="flex min-h-[240px] items-center justify-center rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)] text-ods-text-secondary text-h4">
@@ -70,9 +69,20 @@ export const Filled: Story = {
   render: () => <LoginPage email="roman@mail.com" />,
 };
 
-const SSO_PROVIDERS: AuthSsoProvider[] = ['openframe', 'google', 'microsoft', 'apple'];
+/** The generic providers, which need nothing typed and render above the email field. */
+const SSO_PROVIDERS: AuthSsoProvider[] = ['google', 'microsoft', 'apple'];
 
-/** SSO configured: email filled, submit replaced by provider buttons. */
+/** Providers above the email field, before anything is typed. */
 export const SSO: Story = {
-  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} />,
+  render: () => <LoginPage ssoProviders={SSO_PROVIDERS} />,
+};
+
+/** Discovery resolved a tenant that has its own SSO: its options appear under the email. */
+export const CustomSso: Story = {
+  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} customSsoProviders={['openframe']} />,
+};
+
+/** Discovery resolved a tenant with none configured — the empty array is the answer, not silence. */
+export const NoCustomSso: Story = {
+  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} customSsoProviders={[]} />,
 };

package/src/types/.marketing.md

@@ -51,7 +51,6 @@ const generatedPost: Partial<AIContent> = {
   status: 'draft',
   social_account_id: 7,
   url_injection_preference: 'as_comment',
-  selected_for_publish: false,
 };
 
 const provider: MediaProvider = 'flux-pro';