UI Components

lib/ui/screens/
├── home/
│   ├── wonders_home_screen.dart
│   └── widgets/
├── wonder_details/
│   ├── wonders_details_screen.dart
│   └── wonder_details_tab_menu.dart
├── editorial/
│   ├── editorial_screen.dart
│   └── widgets/
├── artifact/
│   ├── artifact_details/
│   ├── artifact_search/
│   └── artifact_carousel/
├── collection/
│   ├── collection_screen.dart
│   └── widgets/
├── timeline/
│   ├── timeline_screen.dart
│   └── widgets/
└── ...

class HomeScreen extends StatefulWidget with GetItStatefulWidgetMixin {
  HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> 
    with SingleTickerProviderStateMixin {
  // Access logic layer
  List<WonderData> get _wonders => wondersLogic.all;
  
  @override
  void initState() {
    super.initState();
    // Initialize controllers, load data
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Background layer
        _buildBackground(),
        // Middle layer
        _buildContent(),
        // Foreground layer
        _buildFloatingUI(),
      ],
    );
  }

  @override
  void dispose() {
    // Clean up controllers
    super.dispose();
  }
}

AppBtn(
  onPressed: () => print('pressed'),
  semanticLabel: 'Submit',
  child: Text('SUBMIT'),
)

AppBtn.from(
  text: 'Submit',
  icon: AppIcons.next,
  onPressed: () => print('pressed'),
  isSecondary: true,
)

AppBtn.basic(
  onPressed: () => print('pressed'),
  semanticLabel: 'Close',
  child: Icon(Icons.close),
  padding: EdgeInsets.zero,
)

CircleIconBtn(
  icon: AppIcons.menu,
  onPressed: () => _openMenu(),
  semanticLabel: 'Open menu',
  bgColor: $styles.colors.greyStrong,
)

BackBtn(
  onPressed: () => context.pop(),
  semanticLabel: 'Go back',
)

BackBtn.close(
  onPressed: () => Navigator.pop(context),
)

AppHeader(
  title: 'Timeline',
  subtitle: 'Historical Events',
  showBackBtn: true,
  onBack: () => context.pop(),
  trailing: (context) => CircleIconBtn(
    icon: AppIcons.search,
    onPressed: _handleSearch,
    semanticLabel: 'Search',
  ),
)

AppImage(
  image: NetworkImage(artifact.imageUrl),
  fit: BoxFit.cover,
  scale: 1.0,
)

AppPageIndicator(
  count: wonders.length,
  controller: _pageController,
  color: $styles.colors.white,
  dotSize: 8,
  onDotPressed: (index) => _jumpToPage(index),
  semanticPageTitle: 'Wonder',
)

AppLoadingIndicator(
  color: $styles.colors.accent1,
)

WonderIllustration(
  WonderType.chichenItza,
  config: WonderIllustrationConfig.mg(
    isShowing: true,
    zoom: 1.05,
  ),
)

class WonderIllustrationConfig {
  const WonderIllustrationConfig({
    this.zoom = 1.0,
    this.isShowing = true,
    this.enableFg = true,  // foreground
    this.enableBg = true,  // background
    this.enableMg = true,  // middleground
    this.enableHero = true,
    this.enableAnims = true,
    this.shortMode = false,
  });
}

// Background only
WonderIllustrationConfig.bg(
  zoom: 1.0,
  isShowing: true,
)

// Foreground only
WonderIllustrationConfig.fg(
  zoom: 1.0,
  isShowing: true,
)

// Middleground only
WonderIllustrationConfig.mg(
  zoom: 1.0,
  isShowing: true,
)

WonderTitleText(
  wonderData,
  enableShadows: true,
)

AnimatedClouds(
  wonderType: currentWonder.type,
  opacity: 1,
)

VtGradient(
  [$styles.colors.black.withOpacity(0), $styles.colors.black],
  [0.0, 1.0],
)

HzGradient(
  [$styles.colors.white.withOpacity(0), $styles.colors.white],
  [0.0, 1.0],
)

CenteredBox(
  child: Text('Centered content'),
  width: 400,
)

BlendMask(
  blendMode: BlendMode.multiply,
  child: Image.asset('background.png'),
)

PreviousNextNavigation(
  onPreviousPressed: () => _pageController.previousPage(),
  onNextPressed: () => _pageController.nextPage(),
  child: PageView(...),
)

FullscreenKeyboardListener(
  onKeyDown: (event) {
    if (event.logicalKey == LogicalKeyboardKey.escape) {
      Navigator.pop(context);
      return true;
    }
    return false;
  },
  child: MyScreen(),
)

EightWaySwipeDetector(
  onSwipe: (direction) {
    switch (direction) {
      case SwipeDirection.up:
        _handleSwipeUp();
        break;
      // ...
    }
  },
  child: MyContent(),
)

TrackpadListener(
  scrollSensitivity: 60,
  onScroll: (direction) {
    if (direction.dy < 0) {
      _showDetails();
    }
  },
  child: MyContent(),
)

appLogic.showFullscreenDialogRoute(
  context,
  FullscreenUrlImgViewer(urls: [imageUrl]),
);

appLogic.showFullscreenDialogRoute(
  context,
  FullscreenVideoViewer(id: youtubeId),
);

appLogic.showFullscreenDialogRoute(
  context,
  FullscreenMapsViewer(type: wonderType),
);

appLogic.showFullscreenDialogRoute(
  context,
  FullscreenWebView(url: 'https://example.com'),
);

LightText(
  child: Text('Light colored text'),
)

DarkText(
  child: Text('Dark colored text'),
)

StaticTextScale(
  child: Text('Fixed size text'),
)

AppHaptics.lightImpact();
AppHaptics.mediumImpact();
AppHaptics.heavyImpact();

Widget build(BuildContext context) {
  bool useNavRail = appLogic.shouldUseNavRail();
  return useNavRail ? _buildDesktopLayout() : _buildMobileLayout();
}

Widget build(BuildContext context) {
  return MyWidget()
    .maybeAnimate()
    .fadeIn(duration: $styles.times.fast);
}

CircleIconBtn(
  icon: AppIcons.menu,
  onPressed: _openMenu,
  semanticLabel: $strings.homeSemanticOpenMain,
)

Container(
  padding: EdgeInsets.all($styles.insets.md),
  decoration: BoxDecoration(
    color: $styles.colors.greyStrong,
    borderRadius: BorderRadius.circular($styles.corners.md),
  ),
)