// Copyright (c) Meta Platforms, Inc. and affiliates.

/**
 * @file containerReveal.pool.stylex.ts
 * @input Uses StyleX, theme tokens
 * @output A fixed pool of scoped markers, each paired with its reveal style
 *   blocks (reveal / conceal, each with a layout-preserved variant) compiled
 *   against that marker.
 * @position Internal to useContainerReveal. GENERATED by
 *   scripts/gen-container-reveal-pool.mjs — do not edit by hand.
 *
 * WHY A POOL: `stylex.when.ancestor(':hover', marker)` welds the marker's
 * class into the compiled selector (`.marker:hover *`), so a marker and the
 * styles referencing it are inseparable at compile time. A single shared
 * marker would leak hover/focus across NESTED reveal containers (an ancestor
 * container's `:hover` matches a descendant container's revealed content).
 * Pre-declaring N markers lets useContainerReveal hand each concurrently
 * mounted container a distinct marker (free-list in useContainerReveal),
 * isolating nested containers without the caller authoring any StyleX.
 *
 * SYNC: When the block shape changes, edit
 * scripts/gen-container-reveal-pool.mjs and useContainerReveal.ts, then
 * regenerate (node scripts/gen-container-reveal-pool.mjs) and commit.
 */

import * as stylex from '@stylexjs/stylex';
import {durationVars, easeVars} from '../theme/tokens.stylex';

export const POOL_SIZE = 6;

export const m0 = stylex.defineMarker();
const s0 = stylex.create({
  // Hidden at rest via position + opacity (kept in the a11y tree and tab
  // order); on container :hover (fine pointer) or :focus-within it returns to
  // flow and fades in. Always shown on touch. The position flip is discrete,
  // so it transitions with allow-discrete + a state-conditional delay: 0 on
  // entry (flips to static immediately, then fades in) and the fade duration
  // on exit (stays in flow until the fade finishes, then snaps out) — without
  // this, the exit would snap out of flow at full opacity and flicker.
  reveal: {
    transitionProperty: 'opacity, position',
    transitionDuration: {
      default: durationVars['--duration-fast'] + ', 0s',
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    transitionBehavior: 'allow-discrete',
    transitionDelay: {
      default: '0s, ' + durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': '0s, 0s'},
      [stylex.when.ancestor(':focus-within', m0)]: '0s, 0s',
      '@media (any-pointer: coarse)': '0s, 0s',
    },
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m0)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
    position: {
      default: 'absolute',
      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 'static'},
      [stylex.when.ancestor(':focus-within', m0)]: 'static',
      '@media (any-pointer: coarse)': 'static',
    },
  },
  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
  // content that is already positioned (e.g. an absolute overlay).
  revealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m0)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
  },
  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
  // :focus-within (a keyboard user must never watch content vanish) and stays
  // visible on touch. Never leaves the a11y tree.
  conceal: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 0},
    },
  },
  concealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 0},
    },
  },
});

export const m1 = stylex.defineMarker();
const s1 = stylex.create({
  // Hidden at rest via position + opacity (kept in the a11y tree and tab
  // order); on container :hover (fine pointer) or :focus-within it returns to
  // flow and fades in. Always shown on touch. The position flip is discrete,
  // so it transitions with allow-discrete + a state-conditional delay: 0 on
  // entry (flips to static immediately, then fades in) and the fade duration
  // on exit (stays in flow until the fade finishes, then snaps out) — without
  // this, the exit would snap out of flow at full opacity and flicker.
  reveal: {
    transitionProperty: 'opacity, position',
    transitionDuration: {
      default: durationVars['--duration-fast'] + ', 0s',
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    transitionBehavior: 'allow-discrete',
    transitionDelay: {
      default: '0s, ' + durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': '0s, 0s'},
      [stylex.when.ancestor(':focus-within', m1)]: '0s, 0s',
      '@media (any-pointer: coarse)': '0s, 0s',
    },
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m1)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
    position: {
      default: 'absolute',
      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 'static'},
      [stylex.when.ancestor(':focus-within', m1)]: 'static',
      '@media (any-pointer: coarse)': 'static',
    },
  },
  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
  // content that is already positioned (e.g. an absolute overlay).
  revealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m1)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
  },
  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
  // :focus-within (a keyboard user must never watch content vanish) and stays
  // visible on touch. Never leaves the a11y tree.
  conceal: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 0},
    },
  },
  concealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 0},
    },
  },
});

export const m2 = stylex.defineMarker();
const s2 = stylex.create({
  // Hidden at rest via position + opacity (kept in the a11y tree and tab
  // order); on container :hover (fine pointer) or :focus-within it returns to
  // flow and fades in. Always shown on touch. The position flip is discrete,
  // so it transitions with allow-discrete + a state-conditional delay: 0 on
  // entry (flips to static immediately, then fades in) and the fade duration
  // on exit (stays in flow until the fade finishes, then snaps out) — without
  // this, the exit would snap out of flow at full opacity and flicker.
  reveal: {
    transitionProperty: 'opacity, position',
    transitionDuration: {
      default: durationVars['--duration-fast'] + ', 0s',
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    transitionBehavior: 'allow-discrete',
    transitionDelay: {
      default: '0s, ' + durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': '0s, 0s'},
      [stylex.when.ancestor(':focus-within', m2)]: '0s, 0s',
      '@media (any-pointer: coarse)': '0s, 0s',
    },
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m2)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
    position: {
      default: 'absolute',
      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 'static'},
      [stylex.when.ancestor(':focus-within', m2)]: 'static',
      '@media (any-pointer: coarse)': 'static',
    },
  },
  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
  // content that is already positioned (e.g. an absolute overlay).
  revealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m2)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
  },
  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
  // :focus-within (a keyboard user must never watch content vanish) and stays
  // visible on touch. Never leaves the a11y tree.
  conceal: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 0},
    },
  },
  concealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 0},
    },
  },
});

export const m3 = stylex.defineMarker();
const s3 = stylex.create({
  // Hidden at rest via position + opacity (kept in the a11y tree and tab
  // order); on container :hover (fine pointer) or :focus-within it returns to
  // flow and fades in. Always shown on touch. The position flip is discrete,
  // so it transitions with allow-discrete + a state-conditional delay: 0 on
  // entry (flips to static immediately, then fades in) and the fade duration
  // on exit (stays in flow until the fade finishes, then snaps out) — without
  // this, the exit would snap out of flow at full opacity and flicker.
  reveal: {
    transitionProperty: 'opacity, position',
    transitionDuration: {
      default: durationVars['--duration-fast'] + ', 0s',
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    transitionBehavior: 'allow-discrete',
    transitionDelay: {
      default: '0s, ' + durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': '0s, 0s'},
      [stylex.when.ancestor(':focus-within', m3)]: '0s, 0s',
      '@media (any-pointer: coarse)': '0s, 0s',
    },
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m3)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
    position: {
      default: 'absolute',
      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 'static'},
      [stylex.when.ancestor(':focus-within', m3)]: 'static',
      '@media (any-pointer: coarse)': 'static',
    },
  },
  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
  // content that is already positioned (e.g. an absolute overlay).
  revealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m3)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
  },
  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
  // :focus-within (a keyboard user must never watch content vanish) and stays
  // visible on touch. Never leaves the a11y tree.
  conceal: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 0},
    },
  },
  concealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 0},
    },
  },
});

export const m4 = stylex.defineMarker();
const s4 = stylex.create({
  // Hidden at rest via position + opacity (kept in the a11y tree and tab
  // order); on container :hover (fine pointer) or :focus-within it returns to
  // flow and fades in. Always shown on touch. The position flip is discrete,
  // so it transitions with allow-discrete + a state-conditional delay: 0 on
  // entry (flips to static immediately, then fades in) and the fade duration
  // on exit (stays in flow until the fade finishes, then snaps out) — without
  // this, the exit would snap out of flow at full opacity and flicker.
  reveal: {
    transitionProperty: 'opacity, position',
    transitionDuration: {
      default: durationVars['--duration-fast'] + ', 0s',
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    transitionBehavior: 'allow-discrete',
    transitionDelay: {
      default: '0s, ' + durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': '0s, 0s'},
      [stylex.when.ancestor(':focus-within', m4)]: '0s, 0s',
      '@media (any-pointer: coarse)': '0s, 0s',
    },
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m4)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
    position: {
      default: 'absolute',
      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 'static'},
      [stylex.when.ancestor(':focus-within', m4)]: 'static',
      '@media (any-pointer: coarse)': 'static',
    },
  },
  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
  // content that is already positioned (e.g. an absolute overlay).
  revealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m4)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
  },
  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
  // :focus-within (a keyboard user must never watch content vanish) and stays
  // visible on touch. Never leaves the a11y tree.
  conceal: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 0},
    },
  },
  concealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 0},
    },
  },
});

export const m5 = stylex.defineMarker();
const s5 = stylex.create({
  // Hidden at rest via position + opacity (kept in the a11y tree and tab
  // order); on container :hover (fine pointer) or :focus-within it returns to
  // flow and fades in. Always shown on touch. The position flip is discrete,
  // so it transitions with allow-discrete + a state-conditional delay: 0 on
  // entry (flips to static immediately, then fades in) and the fade duration
  // on exit (stays in flow until the fade finishes, then snaps out) — without
  // this, the exit would snap out of flow at full opacity and flicker.
  reveal: {
    transitionProperty: 'opacity, position',
    transitionDuration: {
      default: durationVars['--duration-fast'] + ', 0s',
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    transitionBehavior: 'allow-discrete',
    transitionDelay: {
      default: '0s, ' + durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': '0s, 0s'},
      [stylex.when.ancestor(':focus-within', m5)]: '0s, 0s',
      '@media (any-pointer: coarse)': '0s, 0s',
    },
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m5)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
    position: {
      default: 'absolute',
      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 'static'},
      [stylex.when.ancestor(':focus-within', m5)]: 'static',
      '@media (any-pointer: coarse)': 'static',
    },
  },
  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
  // content that is already positioned (e.g. an absolute overlay).
  revealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 0,
      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 1},
      [stylex.when.ancestor(':focus-within', m5)]: 1,
      '@media (any-pointer: coarse)': 1,
    },
  },
  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
  // :focus-within (a keyboard user must never watch content vanish) and stays
  // visible on touch. Never leaves the a11y tree.
  conceal: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 0},
    },
  },
  concealLayoutPreserved: {
    transitionProperty: 'opacity',
    transitionDuration: {
      default: durationVars['--duration-fast'],
      '@media (prefers-reduced-motion: reduce)': '0s',
    },
    transitionTimingFunction: easeVars['--ease-standard'],
    opacity: {
      default: 1,
      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 0},
    },
  },
});

// The compiled StyleX style objects carry `when.ancestor` conditionals that
// the public `StyleXStyles` type does not model, so the slot shape is inferred
// from the generated blocks rather than annotated.
export const POOL = [
  {
    marker: m0,
    reveal: s0.reveal,
    revealLayoutPreserved: s0.revealLayoutPreserved,
    conceal: s0.conceal,
    concealLayoutPreserved: s0.concealLayoutPreserved,
  },
  {
    marker: m1,
    reveal: s1.reveal,
    revealLayoutPreserved: s1.revealLayoutPreserved,
    conceal: s1.conceal,
    concealLayoutPreserved: s1.concealLayoutPreserved,
  },
  {
    marker: m2,
    reveal: s2.reveal,
    revealLayoutPreserved: s2.revealLayoutPreserved,
    conceal: s2.conceal,
    concealLayoutPreserved: s2.concealLayoutPreserved,
  },
  {
    marker: m3,
    reveal: s3.reveal,
    revealLayoutPreserved: s3.revealLayoutPreserved,
    conceal: s3.conceal,
    concealLayoutPreserved: s3.concealLayoutPreserved,
  },
  {
    marker: m4,
    reveal: s4.reveal,
    revealLayoutPreserved: s4.revealLayoutPreserved,
    conceal: s4.conceal,
    concealLayoutPreserved: s4.concealLayoutPreserved,
  },
  {
    marker: m5,
    reveal: s5.reveal,
    revealLayoutPreserved: s5.revealLayoutPreserved,
    conceal: s5.conceal,
    concealLayoutPreserved: s5.concealLayoutPreserved,
  },
] as const;

export type RevealSlot = (typeof POOL)[number];