### Creating a New Granite Project

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

Initializes a new Granite application using the specified package manager. This command starts an interactive CLI to guide you through project setup, including naming and selecting development tools.

```sh
npx create-granite-app@latest
```

```sh
pnpm create granite-app
```

```sh
yarn create granite-app
```

--------------------------------

### Starting the Granite Development Server

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

Launches the Granite development server, which compiles and serves the microservice application. This server enables hot reloading and provides a local environment for testing and development.

```sh
npm run dev
```

```sh
pnpm run dev
```

```sh
yarn dev
```

--------------------------------

### Granite Project Directory Structure Overview

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

Illustrates the standard directory and file structure of a newly created Granite project, highlighting key folders like `pages/` for screens and `src/` for source code, along with configuration files.

```text
my-granite-app/
├── pages/                  # Screens in your microservices
│   ├── _404.tsx           # 404 error page
│   └── index.tsx          # Home screen
│
├── src/                   # Source code
│   ├── _app.tsx          # Microservice entry point
│   └── router.gen.ts     # Auto-generated type-safe routing
│
├── granite.config.ts      # Granite configuration
├── react-native.config.js # React Native settings
└── require.context.ts     # Auto-generated routing context
```

--------------------------------

### Navigating to the Project Directory

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

Changes the current directory to the newly created Granite project folder, which is a prerequisite for installing dependencies and running development commands.

```sh
cd my-granite-app
```

--------------------------------

### Granite Development Server Welcome Output

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

Displays the console output upon successful startup of the Granite development server, including the Granite ASCII art logo and a list of common development commands for interacting with the running application.

```text
 ██████╗ ██████╗  █████╗ ███╗   ██╗██╗████████╗███████╗
██╔════╝ ██╔══██╗██╔══██╗████╗  ██║██║╚══██╔══╝██╔════╝
██║  ███╗██████╔╝███████║██╔██╗ ██║██║   ██║   █████╗  
██║   ██║██╔══██╗██╔══██║██║╚██╗██║██║   ██║   ██╔══╝  
╚██████╔╝██║  ██║██║  ██║██║ ╚████║██║   ██║   ███████╗
 ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝   ╚═╝   ╚══════╝

                  Welcome to Granite

To reload the app press "r"
To open developer menu press "d"
To open debugger press "j"
```

--------------------------------

### Installing Project Dependencies

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

Installs all required Node.js dependencies for the Granite project using the chosen package manager (npm, pnpm, or yarn). This step is crucial for the application to function correctly.

```sh
npm install
```

```sh
pnpm install
```

```sh
yarn install
```

--------------------------------

### Interactive CLI Output for Granite Project Creation

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

Demonstrates the interactive command-line interface output when creating a new Granite project, showing prompts for project name, development tools, and the next steps to set up and run the application.

```sh
$ npx create-granite-app@latest

┌  Create Granite App Project
│
◆  Project Setup
◇  Project name or path:
│  my-granite-app
│
◇  Select development tools:
│  ◻ ESLint + Prettier (recommended)
│  ◻ Biome
│
◇  ✅ Created Granite App successfully!
│
◇  Next steps ─────────────╮
│                          │
│  cd my-granite-app       │
│  npm install             │
│  npm run dev             │
│                          │
├──────────────────────────╯
│
└  🎉 Done! Your Granite app is ready.
```

--------------------------------

### Building Production Bundles for Granite App (Shell)

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

These commands show how to build optimized production bundles for a Granite application using different package managers. Running these commands generates microservice bundles in the `dist/` directory, ready for deployment.

```sh
npm run build
```

```sh
pnpm run build
```

```sh
yarn build
```

--------------------------------

### Installing and Configuring AWS CLI

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Installs the AWS Command Line Interface (CLI) and then prompts the user to configure their AWS access key ID, secret access key, default region, and output format. This setup allows Pulumi to authenticate and interact with your AWS account.

```bash
# Install AWS CLI
# macOS: brew install awscli
# Windows: winget install Amazon.AWSCLI
# Linux: apt install awscli

# Configure your credentials
aws configure
```

--------------------------------

### Example URL Scheme with Specific Parameters

Source: https://github.com/toss/granite/blob/main/docs/guides/granite-router/params.md

Provides a concrete example of launching an application named `test-app` via a URL scheme, passing `name` as 'tom' and `age` as '10' as query parameters.

```URL Scheme
granite://test-app?name=tom&age=10
```

--------------------------------

### Granite Forge Deployment Output Example

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/deploy-your-app.md

This snippet shows an example of the console output during a successful deployment using the Granite Forge CLI. It illustrates the steps involved, from fetching deployment state to bundle upload and final success confirmation.

```sh
$ npx granite-forge deploy --bucket {Your bucket name}
┌  Start deployment
│
◇  Successfully fetched current deployment state
│
▲  No deployment state found
│
◇  Are you sure you want to deploy test-granite-app?
│  Yes
│
◇  Bundle uploaded
│
◇  Bundle list updated
│
◇  Deployed successfully! (Deployment ID: **********************)
│
└  Done
```

--------------------------------

### Creating a New Profile Screen Component (React Native)

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

Defines a new React Native functional component for a 'Profile Screen' within the `pages/` directory. This component renders a simple view with text, demonstrating how to add new screens to a Granite microservice. It requires `react` and `react-native` dependencies.

```tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Profile Screen</Text>
      <Text style={styles.description}>
        This is your profile microservice!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
    color: '#666',
  },
});
```

--------------------------------

### Basic Granite Service Configuration Example - TypeScript

Source: https://github.com/toss/granite/blob/main/docs/ko/reference/react-native/config/defineConfig.md

This example demonstrates a fundamental `granite.config.ts` setup. It configures the application name as 'my-app', sets the deep link URL scheme to 'granite', specifies 'index.ts' as the entry point, and integrates the Hermes plugin for JavaScript bundle optimization.

```typescript
import { defineConfig } from '@granite-js/react-native/config';
import { hermes } from '@granite-js/plugin-hermes';

export default defineConfig({
  // 마이크로서비스의 이름
  appName: 'my-app',
  // 딥링크를 위한 URL 스킴
  scheme: 'granite',
  // 진입점 파일 경로
  entryFile: 'index.ts',
  // 사용할 플러그인 배열
  plugins: [hermes()],
});
```

--------------------------------

### Installing Pulumi CLI on Windows

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Installs the Pulumi command-line interface on Windows using winget. Pulumi is a tool for infrastructure as code, enabling you to define and deploy cloud resources using programming languages.

```sh
winget install pulumi
```

--------------------------------

### Pulumi Project Initialization Prompt Example

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Shows the interactive prompts during Pulumi project initialization, including setting the project name, description, stack name, preferred package manager, and the target AWS region for deployment.

```bash
This command will walk you through creating a new Pulumi project.

Enter a value or leave blank to accept the (default), and press <ENTER>.
Press ^C at any time to quit.

Project name: my-granite-infrastructure
Project description: Granite app CDN infrastructure
Created project 'my-granite-infrastructure'

stack name: dev
Created stack 'dev'

The package manager to use for installing dependencies: {Your package manager}
The AWS region to deploy into (aws:region): {Your AWS region}
Saved config
```

--------------------------------

### Implementing Screen Navigation with Granite Router (TypeScript)

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/create-your-app.md

This snippet demonstrates how to add navigation between screens in a React Native application using the `@granite/router` library. It defines a `HomeScreen` component with a `TouchableOpacity` that navigates to a '/profile' route when pressed. It also includes basic styling for the component.

```tsx
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useRouter } from '@granite/router';

export default function HomeScreen() {
  const router = useRouter();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to Granite!</Text>
      
      <TouchableOpacity 
        style={styles.button}
        onPress={() => router.push('/profile')}
      >
        <Text style={styles.buttonText}>Go to Profile</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 32,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});
```

--------------------------------

### Installing Granite Forge CLI

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/deploy-your-app.md

This command installs the Granite Forge CLI as a development dependency. This tool is essential for deploying Granite application bundles to AWS.

```sh
npm install @granite-js/forge-cli --save-dev
```

```sh
pnpm add @granite-js/forge-cli --save-dev
```

```sh
yarn add @granite-js/forge-cli --dev
```

--------------------------------

### Installing Pulumi CLI on Linux

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Installs the Pulumi command-line interface on Linux by downloading and executing a script. Pulumi is a tool for infrastructure as code, enabling you to define and deploy cloud resources using programming languages.

```sh
curl -fsSL https://get.pulumi.com | sh
```

--------------------------------

### Installing Granite Router Plugin

Source: https://github.com/toss/granite/blob/main/docs/guides/granite-router/plugin-router.md

These commands demonstrate how to install the @granite-js/plugin-router package as a development dependency using npm, pnpm, or yarn. This plugin is essential for enabling file-based routing in a Granite project.

```Shell
$ npm install @granite-js/plugin-router --save-dev
```

```Shell
$ pnpm install @granite-js/plugin-router --save-dev
```

```Shell
$ yarn add @granite-js/plugin-router --dev
```

--------------------------------

### Installing Hermes Plugin for Granite

Source: https://github.com/toss/granite/blob/main/packages/plugin-hermes/README.md

Provides instructions for installing the `@granite-js/plugin-hermes` using popular Node.js package managers: npm, pnpm, and yarn. These commands add the plugin as a dependency to your project.

```bash
# NPM
npm install @granite-js/plugin-hermes

# pnpm
pnpm install @granite-js/plugin-hermes

# yarn
yarn add @granite-js/plugin-hermes
```

--------------------------------

### Installing Granite Android App using ADB Command (Bash)

Source: https://github.com/toss/granite/blob/main/docs/guides/miscellaneous/install-native-app.md

This command installs the Granite Android application package (APK) onto a connected Android device or emulator using the Android Debug Bridge (ADB). It requires ADB to be installed and configured on the computer, typically provided with Android Studio. The command takes the path to the APK file as an argument, facilitating direct installation from the command line.

```bash
adb install granite_android.zip
```

--------------------------------

### Installing Pulumi CLI on macOS

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Installs the Pulumi command-line interface on macOS using Homebrew. Pulumi is a tool for infrastructure as code, enabling you to define and deploy cloud resources using programming languages.

```sh
brew install pulumi
```

--------------------------------

### Installing Granite Infrastructure Package with npm

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Installs the `@granite-js/pulumi-aws` package as a development dependency using npm. This package provides pre-built Pulumi components specifically designed for creating Granite CDN infrastructure.

```sh
npm install @granite-js/pulumi-aws --save-dev
```

--------------------------------

### Basic Granite Application Configuration with Hermes Plugin

Source: https://github.com/toss/granite/blob/main/docs/reference/react-native/config/defineConfig.md

This example demonstrates a basic `defineConfig` setup for a Granite application. It sets the app name to 'my-app', defines the URL scheme as 'granite', specifies 'index.ts' as the entry file, and integrates the Hermes plugin for JavaScript bundle optimization. This configuration makes the app accessible via `granite://my-app`.

```typescript
import { defineConfig } from '@granite-js/react-native/config';
import { hermes } from '@granite-js/plugin-hermes';

export default defineConfig({
  // The name of your microservice
  appName: 'my-app',
  // The URL scheme for deep linking
  scheme: 'granite',
  // Entry file path
  entryFile: 'index.ts',
  // Array of plugins to use
  plugins: [hermes()],
});
```

--------------------------------

### Installing @granite-js/pulumi-aws Package

Source: https://github.com/toss/granite/blob/main/infra/pulumi-aws/README.md

These commands install the `@granite-js/pulumi-aws` package and its dependencies using npm, yarn, or pnpm. This package provides the `ReactNativeBundleCDN` component for managing React Native CDN infrastructure on AWS.

```bash
npm install @granite-js/pulumi-aws
# or
yarn add @granite-js/pulumi-aws
# or
pnpm add @granite-js/pulumi-aws
```

--------------------------------

### AWS CLI Configuration Prompt Example

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Illustrates the interactive prompts for configuring AWS credentials using `aws configure`, showing where to input the access key ID, secret access key, default region, and desired output format (e.g., json).

```bash
AWS Access Key ID: [Your access key]
AWS Secret Access Key: [Your secret key]  
Default region: [Your region]
Default output format: json
```

--------------------------------

### Installing Granite Infrastructure Package with yarn

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Installs the `@granite-js/pulumi-aws` package as a development dependency using yarn. This package provides pre-built Pulumi components specifically designed for creating Granite CDN infrastructure.

```sh
yarn add @granite-js/pulumi-aws --dev
```

--------------------------------

### Example Application Registration with Granite.registerApp - TSX

Source: https://github.com/toss/granite/blob/main/docs/reference/react-native/core/Granite.md

This TSX example demonstrates how to register a React Native application using `Granite.registerApp`. It shows importing necessary modules, defining a basic `AppContainer` component, and then passing it along with `appName` and `context` to `Granite.registerApp` to enable features like file-based routing and query parameter handling.

```TSX
import { PropsWithChildren } from 'react';
import { Granite, InitialProps } from '@granite-js/react-native';
import { context } from '../require.context';

function AppContainer({ children }: PropsWithChildren<InitialProps>) {
  return <>{children}</>;
}

export default Granite.registerApp(AppContainer, {
  appName: 'my-app',
  context,
});
```

--------------------------------

### Creating a Basic Layout File (TypeScript)

Source: https://github.com/toss/granite/blob/main/docs/guides/granite-router/layouts.md

This snippet demonstrates the fundamental structure of a `_layout.tsx` file. It defines a simple React component that accepts `children` as props and renders them, serving as a placeholder for content that will be wrapped by the layout. This basic setup is the foundation for all layouts.

```tsx
import { PropsWithChildren } from 'react';

export default function Layout({ children }: PropsWithChildren) {
  return <>{children}</>;
}
```

--------------------------------

### Installing Granite Infrastructure Package with pnpm

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Installs the `@granite-js/pulumi-aws` package as a development dependency using pnpm. This package provides pre-built Pulumi components specifically designed for creating Granite CDN infrastructure.

```sh
pnpm add @granite-js/pulumi-aws --save-dev
```

--------------------------------

### Deploying AWS Infrastructure with Pulumi using Yarn PnP

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Installs the `pnpify` package for Yarn Plug'n'Play and then runs the Pulumi deployment command using `pnpify`. This is required when using Yarn PnP to ensure Pulumi commands execute correctly within the PnP environment.

```bash
yarn add @yarnpkg/pnpify -D
yarn pnpify pulumi up
```

--------------------------------

### Example HTML Body Element (HTML)

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/elements_breadcrumbs/basic.html

Represents the basic HTML 'body' tag, which would typically contain the main content of a web page and serve as a root for other elements.

```HTML
body
```

--------------------------------

### Example Usage of useWaitForReturnNavigator in React Native

Source: https://github.com/toss/granite/blob/main/docs/reference/react-native/screen-control/useWaitForReturnNavigator.md

This example demonstrates how to use `useWaitForReturnNavigator` within a React Native component. It shows how to navigate to another screen and execute code (e.g., logging) synchronously upon returning to the original screen, ensuring actions are performed post-navigation return.

```TSX
import { Button } from 'react-native';
import { useWaitForReturnNavigator } from '@granite-js/react-native';

export function UseWaitForReturnNavigator() {
  const navigate = useWaitForReturnNavigator();

  return (
    <>
      <Button
        title="Navigate"
        onPress={async () => {
          console.log(1);
          await navigate('/examples/use-visibility');
          // This code executes when returning to the screen
          console.log(2);
        }}
      />
    </>
  );
}
```

--------------------------------

### Example HTML Div with ID (HTML)

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/elements_breadcrumbs/basic.html

Represents an HTML 'div' element with the ID 'test-id', which can be uniquely targeted by CSS or JavaScript for specific styling or manipulation.

```HTML
div#test-id
```

--------------------------------

### Example of Auto-Generated Granite Router Type Definitions

Source: https://github.com/toss/granite/blob/main/docs/guides/granite-router/plugin-router.md

This TypeScript code shows an example of the src/router.gen.ts file, which is automatically generated by Granite. It defines type interfaces for routing paths, ensuring type safety and preventing errors when navigating with incorrect paths or parameters.

```TypeScript
// src/router.gen.ts

/* eslint-disable */
// This file is auto-generated by @granite-js/react-native. DO NOT EDIT.
import { Route as _PageARoute } from '../pages/page-a';
import { Route as _PageBRoute } from '../pages/page-b';
import { Route as _PageCRoute } from '../pages/page-c';

declare module '@granite-js/react-native' {
  interface RegisterScreen {
    '/page-a': ReturnType<typeof _PageARoute.useParams>;
    '/page-b': ReturnType<typeof _PageBRoute.useParams>;
    '/page-c': ReturnType<typeof _PageCRoute.useParams>;
  }
}
```

--------------------------------

### Example Usage of IOFlatList with InView - React Native TSX

Source: https://github.com/toss/granite/blob/main/docs/reference/react-native/screen-control/IOFlatList.md

This example demonstrates how to use `IOFlatList` in a React Native application to observe the visibility of list items. It integrates the `InView` component to track when individual items become visible on screen, updating their state accordingly. The `mockData` is rendered, and each item's visibility is displayed.

```tsx
import { ReactNode, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { InView, IOFlatList } from '@granite-js/react-native';

const mockData = Array.from({ length: 30 }, (_, i) => ({ key: String(i) }));

export default function FlatListPage() {
  return <IOFlatList data={mockData} renderItem={({ item }) => <InViewItem>{item.key}</InViewItem>} />;
}

function InViewItem({ children }: { children: ReactNode }) {
  const [visible, setVisible] = useState(false);

  return (
    <InView onChange={setVisible}>
      <View style={styles.item}>
        <Text>{children}</Text>
        <Text>{visible ? 'visible' : ''}</Text>
      </View>
    </InView>
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
});
```

--------------------------------

### Example: Executing Code After Navigation Return (TSX)

Source: https://github.com/toss/granite/blob/main/docs/ko/reference/react-native/screen-control/useWaitForReturnNavigator.md

This TSX example illustrates how to use `useWaitForReturnNavigator` to ensure code runs only after a user navigates away and then returns. Pressing the '이동하기' (Navigate) button first logs '1', then navigates, and finally logs '2' synchronously upon the user's return to the current screen.

```TSX
import { Button } from 'react-native';
import { useWaitForReturnNavigator } from '@granite-js/react-native';

export function UseWaitForReturnNavigator() {
  const navigate = useWaitForReturnNavigator();

  return (
    <>
      <Button
        title="이동하기"
        onPress={async () => {
          console.log(1);
          await navigate('/examples/use-visibility');
          // 화면에 돌아오면 이 코드가 실행됩니다.
          console.log(2);
        }}
      />
    </>
  );
}
```

--------------------------------

### Styling Container Element - CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/issue_counter/basic.html

This CSS rule defines the basic layout and appearance for an HTML element with the ID 'container'. It sets its width, border, padding, and height to establish its visual boundaries.

```CSS
#container { width: 80%; border: 1px solid black; padding: 20px; height: 300px; }
```

--------------------------------

### Navigating to a New Screen using useNavigation (TypeScript)

Source: https://github.com/toss/granite/blob/main/docs/ko/guides/granite-router/routing.md

This snippet demonstrates how to navigate to a new screen (/page-b) using the useNavigation hook from @granite-js/react-native. It shows the basic setup of a route with createRoute and a Pressable component that triggers the navigation action.

```TypeScript
// page-a.tsx
import { createRoute, useNavigation } from '@granite-js/react-native';
import { StyleSheet, View, Text, Pressable } from 'react-native';

export const Route = createRoute('/page-a', {
  validateParams: (params) => params,
  component: PageA,
});

function PageA() {
  const navigation = useNavigation();

  const handlePress = () => {
    navigation.navigate('/page-b');
  };

  return (
    <View style={[styles.container, { backgroundColor: '#3182f6' }]}>
      <Text style={styles.text}>Page A</Text>
      <Pressable onPress={handlePress}>
        <Text style={styles.buttonLabel}>B 페이지로 이동하기</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16,
    padding: 16,
  },
  text: {
    color: 'white',
    fontSize: 24,
  },
  buttonLabel: {
    color: 'white',
  },
});
```

--------------------------------

### Styling Root Container for Select Menu - CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/select_menu/wide-option.html

Defines basic padding, width, and auto margins for the root container of the select menu example, centering it on the page and providing internal spacing.

```CSS
#root { padding: 20px; width: 80%; margin: 0 auto; }
```

--------------------------------

### Styling an Element by ID in CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/icon_component/basic.html

This CSS snippet targets an HTML element with the ID 'icon-overview' and sets its width to 80%. It demonstrates how to apply specific styles to a unique element on a webpage using an ID selector.

```CSS
#icon-overview { width: 80%; }
```

--------------------------------

### Styling Container Element (CSS)

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/elements_breadcrumbs/basic.html

Defines basic styling for a container element, setting its width to 80% and adding a 1px solid black border.

```CSS
#container { width: 80%; border: 1px solid black; }
```

--------------------------------

### Setting AWS Credentials with Environment Variables

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Sets AWS access key ID, secret access key, and region as environment variables. This method is suitable for temporary setups and allows Pulumi to authenticate with AWS without persistent configuration files.

```bash
export AWS_ACCESS_KEY_ID="your-access-key-id"
export AWS_SECRET_ACCESS_KEY="your-secret-access-key"
export AWS_REGION="your-region"
```

--------------------------------

### Example of Horizontally Centering Elements with Flex.CenterHorizontal (TSX)

Source: https://github.com/toss/granite/blob/main/docs/reference/style-utils/ui/FlexCenterHorizontal.md

This example demonstrates how to use the `Flex.CenterHorizontal` component to horizontally center a `Text` element within a container. It imports `Flex` from `@granite-js/react-native` and `Text` from `react-native`, applying a basic style to the `Flex.CenterHorizontal` component for visual demonstration.

```tsx
import { Flex } from '@granite-js/react-native';
import { Text } from 'react-native';

function FlexCenterHorizontalExample() {
  return (
    <Flex.CenterHorizontal style={{ width: '100%', height: 100, borderWidth: 1 }}>
      <Text>Place at the horizontal center</Text>
    </Flex.CenterHorizontal>
  );
}
```

--------------------------------

### Styling Data Grid Container with CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/data_grid_controller/basic.html

This CSS snippet defines basic styling for a container element, likely intended to hold a data grid. It sets the container's width to 80%, applies a 1px solid black border, and adds 20 pixels of padding around its content.

```CSS
#container { width: 80%; border: 1px solid black; padding: 20px; }
```

--------------------------------

### Registering React Native App with InitialProps using Granite

Source: https://github.com/toss/granite/blob/main/docs/reference/react-native/core/InitialProps.md

This example demonstrates how to use `InitialProps` with `@granite-js/react-native` to register a React Native application. It shows an `AppContainer` component receiving `InitialProps` and then registering it with `Granite.registerApp`, passing the app name and context.

```TSX
import { PropsWithChildren } from 'react';
import { Granite, InitialProps } from '@granite-js/react-native';
import { context } from '../require.context';

const APP_NAME = 'my-app-name';

function AppContainer({ children, ...initialProps }: PropsWithChildren<InitialProps>) {
  console.log({ initialProps });
  return <>{children}</>;
}

export default Granite.registerApp(AppContainer, {
  appName: APP_NAME,
  context,
});
```

--------------------------------

### Example of Auto-Generated Granite Page Component (TSX)

Source: https://github.com/toss/granite/blob/main/docs/guides/granite-router/plugin-router.md

This TSX code illustrates an automatically generated screen component for a page like pages/page-a.tsx. It defines a React Native component PageA and uses createRoute to associate it with the /page-a path, including parameter validation.

```TypeScript
import React from 'react';
import { Text, View } from 'react-native';
import { createRoute } from '@granite-js/react-native';

export const Route = createRoute('/page-a', {
  validateParams: (params) => params,
  component: PageA,
});

function PageA() {
  return (
    <View>
      <Text>Hello PageA</Text>
    </View>
  );
}
```

--------------------------------

### Highlighting Crumb Element (CSS)

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/elements_breadcrumbs/basic.html

Defines a highlight style for the 'fake-crumb-element' when it also has the 'highlight' class, changing its background to blue.

```CSS
.fake-crumb-element.highlight { background: blue; }
```

--------------------------------

### Styling Table Cells in CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/icon_component/basic.html

This CSS snippet applies styles to both `<td>` (table data) and `<th>` (table header) elements. It sets text alignment to left, width to 50%, and height to 50px, providing a consistent layout for table cells.

```CSS
td, th { text-align: left; width: 50%; height: 50px; }
```

--------------------------------

### Styling a Container Element with CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/console_insight/basic.html

This CSS snippet defines styles for an HTML element with the ID 'container'. It sets the box model to 'border-box', adds a 1px solid border, specifies a fixed width, and applies margins, padding, and a background color. This is a foundational example for basic layout and visual presentation.

```CSS
#container { box-sizing: border-box; border: 1px solid; width: 600px; margin: 1em; padding: 1em; background-color: aqua; }
```

--------------------------------

### Styling Container Element with CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/linear_memory_inspector/basic.html

This CSS snippet defines the visual properties for an HTML element with the ID 'container'. It sets a fixed width of 850px and height of 400px, adds a 1px solid black border, and applies 'display: flex' for flexible box layout of its children.

```CSS
#container { width: 850px; height: 400px; border: 1px solid black; display: flex; }
```

--------------------------------

### Styling Container with CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/two_states_counter/basic.html

This CSS snippet defines the styling for an HTML element with the ID 'container'. It sets a fixed width and height, adds a solid black border, and configures it as a flex container with a 10px gap between its direct children. This is typically used for layout purposes.

```CSS
#container { width: 300px; height: 200px; border: 1px solid black; display: flex; gap: 10px; }
```

--------------------------------

### Styling Container for Shortcut Dialog - CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/shortcut_dialog/basic.html

This CSS snippet defines the styles for a container element, likely used to center and size a shortcut dialog. It sets a fixed width and height, centers the element horizontally using auto margins, and uses flexbox properties to center its content both vertically and horizontally.

```CSS
#container { width: 800px; height: 400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
```

--------------------------------

### Retrieving Initial Scheme Value in React Native - TSX

Source: https://github.com/toss/granite/blob/main/docs/reference/react-native/environment-check/getSchemeUri.md

This example demonstrates how to integrate and use the `getSchemeUri` function within a React Native functional component. It shows importing the function, calling it to get the initial URI scheme, and displaying the result using a `Text` component.

```tsx
import { getSchemeUri } from '@granite-js/react-native';
import { Text } from 'react-native';

function MyPage() {
  const schemeUri = getSchemeUri();

  return <Text>Initial scheme value: {schemeUri}</Text>;
}
```

--------------------------------

### Building Production Granite App

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/deploy-your-app.md

This command builds the Granite application for production, optimizing microservice bundles and placing them in the `dist/` directory. This is a prerequisite for deployment.

```sh
npm run build
```

```sh
pnpm run build
```

```sh
yarn build
```

--------------------------------

### Pulumi Preview Output

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Displays the planned changes that Pulumi will apply to the AWS infrastructure. This output includes a summary of resources to be created, updated, or deleted, and prompts the user for confirmation before proceeding with the deployment.

```bash
Previewing update (dev)

View Live: https://app.pulumi.com/yourname/my-granite-infrastructure/dev/previews/...

     Type                              Name                              Plan       
 +   pulumi:pulumi:Stack               my-granite-infrastructure-dev     create     
 +   └─ {The infrastructure to create}   

Resources:
    + * to create

Do you want to perform this update? yes
```

--------------------------------

### Styling for Filterable Data Grid Controller - CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/data_grid_controller/filter.html

This CSS snippet defines the visual presentation for a data grid example. It sets dimensions and borders for a main container, styles input fields for typography and spacing, and specifies the height for a custom `devtools-data-grid-controller` element, ensuring proper layout and readability.

```CSS
#container {\n  width: 80%;\n  border: 1px solid black;\n  padding: 20px;\n  height: 500px;\n}\ninput {\n  font-size: 18px;\n  padding: 10px;\n  margin-bottom: 30px;\n}\ndevtools-data-grid-controller {\n  height: 300px;\n}
```

--------------------------------

### Creating and Navigating Infrastructure Directory

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Creates a new directory named `my-granite-infrastructure` and then changes the current working directory into it. This directory will serve as the root for your Pulumi project files.

```bash
mkdir my-granite-infrastructure
cd my-granite-infrastructure
```

--------------------------------

### Initializing New Pulumi AWS TypeScript Project

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Initializes a new Pulumi project using the `aws-typescript` template. This command sets up the basic project structure and necessary configuration files for deploying AWS infrastructure with TypeScript.

```bash
pulumi new aws-typescript
```

--------------------------------

### Granite App Deployment URL Structure

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/deploy-your-app.md

This snippet illustrates the general URL structure for a deployed Granite application, indicating how `your-cdn`, `platform`, `appName`, and `version` combine to form the bundle URL.

```bash
https://<your-cdn>/[platform]/[appName]/[version]/bundle
```

--------------------------------

### Building and Running Granite CLI - Bash

Source: https://github.com/toss/granite/blob/main/packages/cli/README.md

This snippet provides the commands to build the Granite CLI project and then execute its binary. It's typically used during development to compile the source code and test the application locally.

```bash
yarn build
yarn run bin
```

--------------------------------

### Deploying AWS Infrastructure with Pulumi

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Executes the Pulumi program to create or update the defined AWS infrastructure. This command initiates the deployment process, prompting the user for confirmation before applying changes.

```bash
pulumi up
```

--------------------------------

### Initializing a New Pulumi Project with AWS TypeScript

Source: https://github.com/toss/granite/blob/main/services/pulumi-testbed/README.md

This command initializes a new Pulumi project using the `aws-typescript` template. It prompts the user to configure project name, description, and AWS region, setting up the basic project structure.

```bash
pulumi new aws-typescript
```

--------------------------------

### Pulumi Deployment Success Output

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Shows the successful completion of the Pulumi deployment, indicating that the AWS infrastructure resources have been created. It provides a link to the live update view and a summary of the created resources.

```bash
Updating (dev)

View Live: https://app.pulumi.com/yourname/my-granite-infrastructure/dev/updates/1

     Type                              Name                              Status      
 +   pulumi:pulumi:Stack               my-granite-infrastructure-dev     created     
 +   └─ {The infrastructure to create}     

Resources:
    + * created

Duration: {duration}
```

--------------------------------

### Initializing Pulumi AWS TypeScript Project

Source: https://github.com/toss/granite/blob/main/infra/pulumi-aws/README.md

This command initializes a new Pulumi project using the AWS TypeScript template. It sets up the basic project structure and configuration files required for deploying AWS resources with TypeScript.

```bash
pulumi new aws-typescript
```

--------------------------------

### Initializing a new Granite App (Shell)

Source: https://github.com/toss/granite/blob/main/README.md

This command initializes a new Granite application using the `create-granite-app` CLI tool. It's the first step to set up a new project, fetching the latest version of the app generator.

```Shell
npx create-granite-app@latest
```

--------------------------------

### Deploying Infrastructure with Pulumi

Source: https://github.com/toss/granite/blob/main/infra/pulumi-aws/README.md

This command initiates the deployment of the infrastructure defined in the Pulumi program. It reviews proposed changes and, upon confirmation, provisions the React Native CDN infrastructure on AWS.

```bash
pulumi up
```

--------------------------------

### Running Granite in Development Mode

Source: https://github.com/toss/granite/blob/main/docs/guides/granite-router/plugin-router.md

These commands initiate the Granite development server. In development mode, Granite automatically generates screen component code and type definitions whenever a new page file is created, streamlining the development workflow.

```Shell
$ npx granite dev
```

```Shell
$ pnpm granite dev
```

```Shell
$ yarn granite dev
```

--------------------------------

### Granite Configuration for Scheme and App Name (TypeScript)

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/deploy-your-app.md

This TypeScript code snippet from `granite.config.ts` demonstrates how the `scheme` and `appName` values are defined within a Granite application's configuration. These values are crucial for constructing the URL scheme used by the Granite test app.

```ts
import { defineConfig } from '@granite-js/react-native/config';

export default defineConfig({
  // Example execution scheme: granite://showcase
  scheme: 'granite',
  appName: 'showcase',
  plugins: [
    // ...
  ],
});
```

--------------------------------

### Styling Basic Crumb Element (CSS)

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/elements_breadcrumbs/basic.html

Applies styles to a 'fake-crumb-element', including fixed dimensions, a red background, margin, padding, white text color, font size, and centered text alignment.

```CSS
.fake-crumb-element { width: 300px; height: 40px; background: red; margin-bottom: 10px; padding: 2px; color: white; font-size: 20px; text-align: center; }
```

--------------------------------

### Previewing and Deploying Pulumi Infrastructure

Source: https://github.com/toss/granite/blob/main/services/pulumi-testbed/README.md

These commands allow users to preview the infrastructure changes before deployment (`pulumi preview`) and then deploy the changes to AWS (`pulumi up`). The preview step is crucial for verifying intended resource modifications.

```bash
pulumi preview
pulumi up
```

--------------------------------

### Styling Buttons (CSS)

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/data_grid/hide-cols.html

This CSS snippet applies styles to button elements, enhancing their appearance and spacing. It sets the font size, internal padding, and a bottom margin to ensure proper separation from subsequent elements.

```CSS
button { font-size: 18px; padding: 10px; margin-bottom: 20px; }
```

--------------------------------

### Implementing a Global Layout with Header and Footer (React Native)

Source: https://github.com/toss/granite/blob/main/docs/guides/granite-router/layouts.md

This set of snippets illustrates how to create a global layout that applies to all pages, integrating common UI elements like a header and footer. The `pages/_layout.tsx` file wraps the page content with these components, while `components/Header.tsx` and `components/Footer.tsx` define the reusable UI elements themselves. This pattern ensures consistent branding and navigation across the entire application.

```tsx
import { PropsWithChildren } from 'react';
import { View } from 'react-native';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';

export default function Layout({ children }: PropsWithChildren) {
  return (
    <View style={{ flex: 1 }}>
      <Header />
      {children}
      <Footer />
    </View>
  );
}
```

```tsx
import { View, Text, StyleSheet } from 'react-native';

export function Header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>My App</Text>
      <View style={styles.nav}>
        <Text style={styles.navItem}>Home</Text>
        <Text style={styles.navItem}>About</Text>
        <Text style={styles.navItem}>Settings</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    padding: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e5e5e5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  nav: {
    flexDirection: 'row',
    gap: 16,
  },
  navItem: {
    fontSize: 16,
    color: '#666666',
  }
});
```

```tsx
import { View, Text, StyleSheet } from 'react-native';

export function Footer() {
  return (
    <View style={styles.footer}>
      <Text style={styles.copyright}>© 2024 My App. All rights reserved.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  footer: {
    padding: 16,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
  },
  copyright: {
    fontSize: 14,
    color: '#666666',
  }
});
```

--------------------------------

### Aligning DevTools Issue Counter - CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/issue_counter/basic.html

This CSS rule targets a 'devtools-issue-counter' element that is a direct child of the '#container' element. It applies vertical alignment to ensure the counter is positioned centrally within its parent's vertical space.

```CSS
#container > devtools-issue-counter { vertical-align: middle; }
```

--------------------------------

### Defining a Custom Color Class in CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/icon_component/basic.html

This CSS snippet defines a class named 'custom-color' that sets the text color to blue. This class can be applied to any HTML element to easily change its text color, promoting reusability and consistent branding.

```CSS
.custom-color { color: blue; }
```

--------------------------------

### Arranging Elements Vertically with Gutter (React Native TSX)

Source: https://github.com/toss/granite/blob/main/docs/reference/style-utils/ui/StackVertical.md

This example demonstrates how to use the `Stack.Vertical` component to arrange `Text` elements vertically with a `gutter` of 16 pixels. This provides consistent spacing between child components in a React Native application.

```TSX
import { Stack } from '@granite-js/react-native';
import { View, Text } from 'react-native';

function StackVerticalExample() {
  return (
    <Stack.Vertical gutter={16}>
      <Text>Arrange vertically with 16 spacing</Text>
      <Text>1</Text>
      <Text>2</Text>
      <Text>3</Text>
    </Stack.Vertical>
  );
}
```

--------------------------------

### Returning to Previous Screen and Navigating with Data (TypeScript)

Source: https://github.com/toss/granite/blob/main/docs/ko/guides/granite-router/routing.md

This snippet illustrates how to return to the previous screen using navigation.goBack(), with a safety check using navigation.canGoBack() to prevent errors. It also shows how to navigate to a new screen (/page-c) while passing data (message and date) as parameters.

```TypeScript
// page-b.tsx
import { createRoute, useNavigation } from '@granite-js/react-native';
import { StyleSheet, View, Text, Pressable } from 'react-native';

export const Route = createRoute('/page-b', {
  validateParams: (params) => params,
  component: PageB,
});

function PageB() {
  const navigation = useNavigation();

  // 이전 화면으로 돌아가는 함수예요.
  const handlePressBackButton = () => {
    if (navigation.canGoBack()) {
      navigation.goBack();
    } else {
      console.warn('이전 화면으로 이동할 수 없습니다.');
    }
  };

  const handlePressNextButton = () => {
    navigation.navigate('/page-c', {
      message: '안녕!',
      date: new Date().getTime(),
    });
  };

  return (
    <View style={[styles.container, { backgroundColor: '#fe9800' }]}>
      <Text style={styles.text}>Page B</Text>
      <Pressable onPress={handlePressBackButton}>
        <Text style={styles.buttonLabel}>이전으로 이동하기</Text>
      </Pressable>
      <Pressable onPress={handlePressNextButton}>
        <Text style={styles.buttonLabel}>C 페이지로 이동하기</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16,
    padding: 16,
  },
  text: {
    color: 'white',
    fontSize: 24,
  },
  buttonLabel: {
    color: 'white',
  },
});
```

--------------------------------

### Setting up React Native Bundle CDN with Pulumi (TypeScript)

Source: https://github.com/toss/granite/blob/main/README.md

This TypeScript snippet demonstrates how to provision a React Native bundle CDN using Pulumi and the `@granite-js/pulumi-aws` package. It configures an S3 bucket to host the React Native bundles, requiring `bucketName` and `region` as configuration parameters.

```TypeScript
import * as pulumi from '@pulumi/pulumi';
import * as aws from '@pulumi/aws';
import { ReactNativeBundleCDN } from '@granite-js/pulumi-aws';

const config = new pulumi.Config();

new ReactNativeBundleCDN('myReactNativeBundleCDN', {
  bucketName: config.require('bucketName'),
  region: config.require('region'),
});
```

--------------------------------

### Apache License 2.0 Text - Plain Text

Source: https://github.com/toss/granite/blob/main/packages/cli/README.md

This snippet contains the full text of the Apache License, Version 2.0, under which the @granite-js/cli software is distributed. It outlines the terms and conditions for use, reproduction, and distribution of the software.

```text
Copyright 2025 Viva Republica, Inc

Licensed under the Apache License, Version 2.0 (the "License");
You may not use this file except in compliance with the License.
You may obtain a copy of the License at:

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

```

--------------------------------

### Accessing Hermes Plugin Results in Other Granite Handlers

Source: https://github.com/toss/granite/blob/main/packages/plugin-hermes/README.md

Illustrates how to retrieve and process the results generated by the Hermes plugin from within other Granite plugin handlers. It shows how to access the `meta.hermes` property to get the compiled bytecode path (`hbc`) and its corresponding sourcemap path (`hbcSourcemap`).

```typescript
// In other plugin handlers
function handler() {
  const hermesPluginResults = this.meta.hermes ?? [];

  for (const hermesPluginResult of hermesPluginResults) {
    console.log(`Hermes bytecode path: ${hermesPluginResult.hbc}`);
    console.log(`Hermes sourcemap path: ${hermesPluginResult.hbcSourcemap ?? 'N/A'}`);
  }
}
```

--------------------------------

### Configuring Granite CDN Infrastructure in TypeScript

Source: https://github.com/toss/granite/blob/main/docs/guides/quick-start/setup-aws.md

Defines the Pulumi program in `index.ts` to create a `ReactNativeBundleCDN` resource. It retrieves the bucket name and region from Pulumi configuration and exports the CloudFront domain and bucket name for easy access.

```typescript
import * as pulumi from '@pulumi/pulumi';
import { ReactNativeBundleCDN } from '@granite-js/pulumi-aws';

const config = new pulumi.Config();

// Create your Granite CDN infrastructure
const cdn = new ReactNativeBundleCDN('granite-cdn', {
  bucketName: config.require('bucketName'),
  region: config.require('region'),
});

export const cdnUrl = cdn.cloudfrontDomain;
export const bucketName = cdn.bucketName;
```

--------------------------------

### Logging Screen Visibility Changes with useVisibilityChange in React Native

Source: https://github.com/toss/granite/blob/main/docs/reference/react-native/screen-control/useVisibilityChange.md

This example demonstrates how to use the `useVisibilityChange` hook within a React Native functional component. It tracks and displays a history of screen visibility states ('visible' or 'hidden') by updating a state variable whenever the visibility changes.

```TSX
import { useState } from 'react';
import { Text, View } from 'react-native';
import { useVisibilityChange, VisibilityState } from '@granite-js/react-native';

export function UseVisibilityChangeExample() {
  const [visibilityHistory, setVisibilityHistory] = useState<VisibilityState[]>([]);

  useVisibilityChange((visibility) => {
    setVisibilityHistory((prev) => [...prev, visibility]);
  });

  return (
    <View>
      <Text>Logs are created when leaving and returning to the home screen.</Text>

      {visibilityHistory.map((visibility, index) => (
        <Text key={index}>{JSON.stringify(visibility)}</Text>
      ))}
    </View>
  );
}
```

--------------------------------

### URL Scheme Structure for Passing Data

Source: https://github.com/toss/granite/blob/main/docs/guides/granite-router/params.md

Illustrates the general structure of a URL scheme used to pass key-value pair data to an application. `{serviceName}` represents the target application, followed by query parameters.

```URL Scheme
granite://{serviceName}?key1=value1&key2=value2
```

--------------------------------

### Styling a Container with CSS

Source: https://github.com/toss/granite/blob/main/packages/devtools-frontend/src/front_end/ui/components/docs/style_property_editor/flex.html

This CSS snippet defines a style rule for elements with the class `container`, setting their font size to 12 pixels. This is a fundamental styling example often used in conjunction with layout systems like Flexbox to control the appearance of elements.

```CSS
.container { font-size: 12px; }
```

--------------------------------

### Checking Screen Visibility with useVisibility Hook in React Native

Source: https://github.com/toss/granite/blob/main/docs/reference/react-native/screen-control/useVisibility.md

This example demonstrates how to use the `useVisibility` hook within a React Native component. It imports the hook, retrieves the current visibility state, and logs it to the console whenever the state changes, illustrating its reactivity to screen visibility changes.

```TSX
import { useEffect } from 'react';
import { Text } from 'react-native';
import { useVisibility } from '@granite-js/react-native';

export function UseVisibilityExample() {
  const visibility = useVisibility();

  useEffect(() => {
    console.log({ visibility });
  }, [visibility]);

  return <Text>Logs are created when leaving and returning to the home screen.</Text>;
}
```