### Get Laioutr App Starter with git clone

Source: https://docs.laioutr.io/raw/apps/app-development/app-starter

Clone the Laioutr App Starter repository directly using git. Change into the 'app-starter' directory to start.

```bash
git clone https://github.com/laioutr/app-starter.git
cd app-starter
```

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

### Install Commerce App in Project A

Source: https://docs.laioutr.io/llms-full.txt

Example of installing a shared commerce app and a brand-specific UI app in Project A's package.json.

```json
// Project A: package.json
{
  "dependencies": {
    "@your-org/commerce-app": "^2.0.0",
    "@your-org/brand-a-ui": "^1.0.0"
  }
}
```

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

### Installation

Source: https://docs.laioutr.io/raw/getting-started/next-steps/cli

Instructions on how to install the Laioutr CLI globally or use it directly without installation.

```APIDOC
## Installation

Install the Laioutr CLI globally:

```bash
pnpm install -g @laioutr/cli@latest
```

Or run commands directly without installing:

```bash
npx @laioutr/cli@latest <command>
```
```

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

### Nuxt Image Provider Setup

Source: https://docs.laioutr.io/llms-full.txt

Example of how product and variant media are mapped to the canonical MediaImage type. Installs '@nuxt/image' and suggests using an Emporix Nuxt Image provider if needed.

```javascript
provider: "emporix"
```

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

### Install Project Dependencies

Source: https://docs.laioutr.io/raw/apps/app-development/app-starter

Run this command in your project directory to install all necessary dependencies.

```bash
pnpm install
```

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

### Install Commerce App in Project B

Source: https://docs.laioutr.io/llms-full.txt

Example of installing the same shared commerce app and a different brand-specific UI app in Project B's package.json.

```json
// Project B: package.json
{
  "dependencies": {
    "@your-org/commerce-app": "^2.0.0",
    "@your-org/brand-b-ui": "^1.0.0"
  }
}
```

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

### Example: Full App Shipping Workflow

Source: https://docs.laioutr.io/raw/getting-started/key-concepts/ci-cd-pipeline

A comprehensive example demonstrating the steps to ship a new Laioutr app, from code push and CI/CD build to registration, preview deployment, and final production deployment.

```bash
# 1. Push your code
git push origin main

# 2. CI/CD builds and publishes (e.g. in GitHub Actions)
pnpm install && pnpm build && npm publish

# 3. Register the version with Laioutr
laioutr app publish --key orgKey_xxx

# 4. Deploy a preview for QA
laioutr deploy trigger \
  --project acme/storefront \
  --key orgKey_xxx \
  --preview test-my-app \
  --with-app @laioutr-org/acme__my-app@1.0.0

# 5. Once tested, deploy to production
laioutr deploy trigger --project acme/storefront --key orgKey_xxx
```

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

### Setup Checklist

Source: https://docs.laioutr.io/raw/apps/app-docs/adobe-commerce

A summary checklist for setting up and configuring the integration.

```APIDOC
## Summary Checklist

- Add `@laioutr-app/adobe-commerce` to Nuxt modules.
- Set `baseURL`, `consumerKey`, `consumerSecret`, `accessToken`, `accessTokenSecret`, and optionally `imagesConfig` under `@laioutr-app/adobe-commerce` (e.g. from env).
- Ensure the Adobe Commerce GraphQL API is reachable and the access token has catalog and cart permissions.
- Rely on orchestr queries, actions, links, resolvers, and query template providers for cart, menu, category, product, and variant data.
- Use the `adobecommerce` Nuxt Image provider for product/category images when using Nuxt Image.
```

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

### Install BYOS Agent

Source: https://docs.laioutr.io/raw/hosting/bring-your-own-server-byos/byos-agent

Install the @laioutr/byos-agent package using npm.

```bash
npm install @laioutr/byos-agent
```

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

### Start BYOS Agent

Source: https://docs.laioutr.io/raw/hosting/bring-your-own-server-byos/byos-agent

Run the BYOS agent using npx to start the HTTP server for handling webhooks.

```bash
npx @laioutr/byos-agent
```

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

### ProductTileFlag Usage Example

Source: https://docs.laioutr.io/raw/laioutr-ui/ui-kit/indicators/producttileflag

Example demonstrating how to use the ProductTileFlag component with different variants and custom content.

```APIDOC
## ProductTileFlag Usage Example

### Description
Illustrates the implementation of the ProductTileFlag component in a Vue.js template, showcasing its usage with the 'sale' variant and custom text content.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Example
```vue-template
<ProductTileFlag variant="sale">
  -25%
</ProductTileFlag>
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

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

### Initialize a New Laioutr Project

Source: https://docs.laioutr.io/raw/getting-started/what-is-laioutr

Use this command to start a new Laioutr project, which is a Nuxt application. Navigate into the project directory and start the development server.

```bash
npx @laioutr/cli init my-storefront
cd my-storefront
pnpm dev
```

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

### Install Laioutr CLI

Source: https://docs.laioutr.io/raw/apps/app-development/app-starter

Install the Laioutr CLI globally to manage laioutrrc.json files. Ensure you have Node.js and pnpm installed.

```bash
pnpm add -g @laioutr/cli@latest
```

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

### Install Webhook Types

Source: https://docs.laioutr.io/llms-full.txt

Install the @laioutr/webhook-types package using npm.

```bash
npm install @laioutr/webhook-types
```

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

### Nuxt Configuration Example

Source: https://docs.laioutr.io/raw/apps/app-docs/adobe-commerce

Example of how to configure the @laioutr-app/adobe-commerce module in your nuxt.config.ts file. Ensure to use environment variables for sensitive credentials.

```APIDOC
## Nuxt Configuration Example

### Description
This snippet shows the configuration for the `@laioutr-app/adobe-commerce` module within `nuxt.config.ts`. It includes essential environment variables for authentication and optional image optimization settings.

### Code
```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@laioutr-app/adobe-commerce', '@laioutr-core/orchestr', '@nuxt/image'],
  '@laioutr-app/adobe-commerce': {
    baseURL: process.env.ADOBE_COMMERCE_BASE_URL!,
    consumerKey: process.env.ADOBE_COMMERCE_CONSUMER_KEY!,
    consumerSecret: process.env.ADOBE_COMMERCE_CONSUMER_SECRET!,
    accessToken: process.env.ADOBE_COMMERCE_ACCESS_TOKEN!,
    accessTokenSecret: process.env.ADOBE_COMMERCE_ACCESS_TOKEN_SECRET!,
    imagesConfig: {
      optInForProbing: false,
      smallImageSize: { width: 1000, height: 1000 },
      thumbnailSize: { width: 600, height: 600 },
    },
  },
});
```

### Notes
- Use environment variables for all credentials in production.
- Do not commit sensitive credentials directly into your configuration files.
```

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

### Hosting Describe Event Response Example

Source: https://docs.laioutr.io/raw/hosting/bring-your-own-server-byos/webhook-config

An example of the JSON payload your endpoint should return for the 'hosting.describe' event, detailing supported capabilities.

```json
{
  "ok": true,
  "data": {
    "name": "Your CI/CD System",
    "url": "https://storefront.example.com",
    "capabilities": {
      "statusUpdates": true,
      "cancelDeployment": false,
      "promoteDeployment": false,
      "rollbackDeployment": false,
      "deleteDeployment": false
    }
  }
}
```

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

### Label Component Usage Examples

Source: https://docs.laioutr.io/raw/laioutr-ui/ui-kit/form/label

Examples demonstrating how to use the Label component with different sizes and the required indicator.

```APIDOC
## Label Component Usage Examples

### Different Sizes

#### Example: Label Small

```vue-template
<Label />
```

#### Example: Label Medium

```vue-template
<Label size="medium" />
```

### With Required Mark

#### Example: Label Small Required

```vue-template
<Label isRequired />
```

#### Example: Label Medium Required

```vue-template
<Label size="medium" isRequired />
```
```

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

### Start UI Playground

Source: https://docs.laioutr.io/raw/getting-started/next-steps/local-setup

Starts the UI playground for developing sections and blocks with your full project configuration. This command is used for local development and testing.

```bash
pnpm dev
```

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

### Install a Laioutr App

Source: https://docs.laioutr.io/raw/getting-started/key-concepts/architecture

Apps are installed as npm packages using pnpm. This allows for easy versioning and replacement without affecting the rest of the project.

```bash
pnpm add
```

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

### Install Nuxt OG Image

Source: https://docs.laioutr.io/raw/frontend/seo/og-image

Install the Nuxt OG Image module using nuxi. This is a required step before configuration.

```bash
npx nuxi module add nuxt-og-image
```

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

### Hosting Describe Event Request Example

Source: https://docs.laioutr.io/raw/hosting/bring-your-own-server-byos/webhook-config

An example of the JSON payload sent by Cockpit for the 'hosting.describe' event, used to discover system capabilities.

```json
{
  "event": "hosting.describe",
  "timestamp": "2025-01-30T12:00:00.000Z",
  "project": "acme-corp/storefront"
}
```

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

### Text Component Usage Examples

Source: https://docs.laioutr.io/raw/laioutr-ui/ui-kit/typography/text

Examples demonstrating the usage of the Text component for different text types and sizes.

```APIDOC
## Text Component Usage Examples

### Body Text
```vue-template
<Text size="xs">body-xs</Text>
<Text size="s">body-s</Text>
<Text size="sm">body-sm</Text>
<Text size="m">body-m</Text>
<Text size="ml">body-ml</Text>
<Text size="l">body-l</Text>
<Text size="xl">body-xl</Text>
<Text size="2xl">body-2xl</Text>
<Text size="3xl">body-3xl</Text>
<Text size="4xl">body-4xl</Text>
```

### Heading Text
```vue-template
<Text type="heading" size="xs">heading-xs</Text>
<Text type="heading" size="s">heading-s</Text>
<Text type="heading" size="sm">heading-sm</Text>
<Text type="heading" size="m">heading-m</Text>
<Text type="heading" size="ml">heading-ml</Text>
<Text type="heading" size="l">heading-l</Text>
<Text type="heading" size="xl">heading-xl</Text>
<Text type="heading" size="2xl">heading-2xl</Text>
<Text type="heading" size="3xl">heading-3xl</Text>
<Text type="heading" size="4xl">heading-4xl</Text>
```

### Subline Text
```vue-template
<Text type="subline" size="xs">subline-xs</Text>
<Text type="subline" size="s">subline-s</Text>
<Text type="subline" size="sm">subline-sm</Text>
<Text type="subline" size="m">subline-m</Text>
<Text type="subline" size="ml">subline-ml</Text>
<Text type="subline" size="l">subline-l</Text>
<Text type="subline" size="xl">subline-xl</Text>
<Text type="subline" size="2xl">subline-2xl</Text>
<Text type="subline" size="3xl">subline-3xl</Text>
<Text type="subline" size="4xl">subline-4xl</Text>
```

### Caption Text
```vue-template
<Text type="caption" size="xs">caption-xs</Text>
<Text type="caption" size="s">caption-s</Text>
<Text type="caption" size="sm">caption-sm</Text>
<Text type="caption" size="m">caption-m</Text>
<Text type="caption" size="ml">caption-ml</Text>
<Text type="caption" size="l">caption-l</Text>
<Text type="caption" size="xl">caption-xl</Text>
<Text type="caption" size="2xl">caption-2xl</Text>
<Text type="caption" size="3xl">caption-3xl</Text>
<Text type="caption" size="4xl">caption-4xl</Text>
```
```

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

### LuiQuoteCard Usage Example

Source: https://docs.laioutr.io/llms-full.txt

Example demonstrating the usage of the LuiQuoteCard component. This component is suitable for presenting customer testimonials in various layouts.

```html
#### Example: LuiQuoteCard

Live preview: <https://storybook.laioutr.cloud/?path=/story/molecules-quote-quotecard--default-center-with-stars>
```

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

### Install Laioutr CLI Globally

Source: https://docs.laioutr.io/raw/getting-started/next-steps/cli

Use this command to install the Laioutr CLI globally on your system. This makes the `laioutr` command available in your terminal.

```bash
pnpm install -g @laioutr/cli@latest
```

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

### Start Orchestrator Playground

Source: https://docs.laioutr.io/raw/getting-started/next-steps/local-setup

Starts the Orchestrator playground for testing queries, actions, and resolvers with DevTools. This is useful for backend logic development.

```bash
pnpm orchestr-dev
```

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

### Path Syntax Examples

Source: https://docs.laioutr.io/raw/apps/app-development/schema-fields

Illustrates different path syntaxes for accessing values within nested objects and arrays in conditional expressions. These examples show how to reference values from the current scope, parent scopes, the root, and nested properties.

```json
['get', 'foo']
```

```json
['get', '^foo']
```

```json
['get', '^^foo']
```

```json
['get', '/foo']
```

```json
['get', 'obj.nested']
```

```json
['get', 'arr[0].name']
```

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

### Get Laioutr App Starter with npx

Source: https://docs.laioutr.io/raw/apps/app-development/app-starter

Use npx to clone the Laioutr App Starter template. Navigate into the cloned directory to begin development.

```bash
npx giget@latest gh:laioutr/app-starter
cd app-starter
```

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

### Example: Shipping a New App from Scratch (CLI Commands)

Source: https://docs.laioutr.io/llms-full.txt

A sequence of bash commands demonstrating the process of pushing code, building and publishing an npm package, registering the new version with Laioutr, and deploying preview and production versions.

```bash
# 1. Push your code
git push origin main
```

```bash
# 2. CI/CD builds and publishes (e.g. in GitHub Actions)
pnpm install && pnpm build && npm publish
```

```bash
# 3. Register the version with Laioutr
laioutr app publish --key orgKey_xxx
```

```bash
# 4. Deploy a preview for QA
laioutr deploy trigger \
  --project acme/storefront \
  --key orgKey_xxx \
  --preview test-my-app \
  --with-app @laioutr-org/acme__my-app@1.0.0
```

```bash
# 5. Once tested, deploy to production
laioutr deploy trigger --project acme/storefront --key orgKey_xxx
```

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

### Get checkout URL (Vue.js)

Source: https://docs.laioutr.io/llms-full.txt

Vue.js example for fetching the checkout URL using `useQueryAction`. Import `CartGetCheckoutUrlAction`.

```vue
import { CartGetCheckoutUrlAction } from '@laioutr-core/canonical-types/ecommerce';

const { data, status } = useQueryAction(CartGetCheckoutUrlAction);
```

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

### Basic Checkbox Usage

Source: https://docs.laioutr.io/raw/laioutr-ui/ui-kit/form/checkbox

Demonstrates the basic usage of the Checkbox component. No specific setup or imports are required for this basic example.

```vue-template
<Checkbox />
```

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

### Implementing a Media Library Provider with Upload

Source: https://docs.laioutr.io/llms-full.txt

Example of how to implement a media library provider that supports both listing and uploading assets.

```APIDOC
## Implementing a Media Library Provider with Upload

### Description
This example demonstrates how to create a media library provider that handles both listing assets and uploading new files.

### Code Example
```typescript
export default defineMediaLibraryProvider({
  name: 'my-backend',
  label: 'My Backend',
  list: async (args) => { /* ... */ },
  upload: async ({ files }) => {
    const results = await Promise.all(
      files.map(async (file) => {
        const stream = file.getStream();
        const uploaded = await myBackendClient.upload(stream, { name: file.name, mimeType: file.mimeType });
        return {
          media: mapToMedia(uploaded),
          previewUrl: uploaded.previewUrl ?? '',
          fileName: uploaded.name,
        };
      })
    );
    return { items: results, total: results.length, offset: 0, limit: results.length };
  },
});

// Assume mapToMedia is defined elsewhere or imported
// function mapToMedia(uploaded: any): Media { ... }
```

### Registration
- The `defineMediaLibraryProvider` function is used to create the provider object.
- The default export of the module is the function returned by `defineMediaLibraryProvider`, which registers the provider globally when the Nitro server plugin runs.
```

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

### Project A package.json Example

Source: https://docs.laioutr.io/raw/getting-started/key-concepts/multi-tenancy

Demonstrates dependencies for Project A, including a commerce app and a brand-specific UI app.

```json
{
  "dependencies": {
    "@your-org/commerce-app": "^2.0.0",
    "@your-org/brand-a-ui": "^1.0.0"
  }
}
```

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

### Accordion Usage Example

Source: https://docs.laioutr.io/raw/laioutr-ui/ui-kit/general/accordion

Example of how to use the LuiAccordion and LuiAccordionItem components.

```APIDOC
## Usage Example

### LuiAccordion

```vue-template
<LuiAccordion>
  <LuiAccordionItem title="Hello, world!">
    Lorem Ipsum dolor
  </LuiAccordionItem>
  <LuiAccordionItem title="This is a headline!">
    And this might be the greatest content ever!
  </LuiAccordionItem>
</LuiAccordion>
```
```

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

### Fetch Project Configuration

Source: https://docs.laioutr.io/raw/apps/app-development/app-starter

Use the Laioutr CLI to fetch your project's configuration, enabling the playground to use your specific apps and settings. Replace placeholders with your organization and project slugs, and your project secret.

```bash
laioutr rc fetch -p <organization-slug>/<project-slug> -s <project-secret>
```

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

### Load More Component Example

Source: https://docs.laioutr.io/llms-full.txt

Basic usage example of the LoadMore component.

```vue-template
<LoadMore />
```

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

### Prepare and Run Development Playgrounds

Source: https://docs.laioutr.io/raw/apps/app-development/app-starter

Commands to prepare your project for development and run the UI playground (Frontend Core + laioutrrc) or the orchestr playground (queries/actions + DevTools).

```bash
pnpm dev:prepare
```

```bash
pnpm dev          # UI playground (Frontend Core + laioutrrc)
```

```bash
pnpm orchestr-dev # Orchestr playground (queries/actions + DevTools)
```

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

### Clone Laioutr App Starter Template

Source: https://docs.laioutr.io/raw/getting-started/next-steps/local-setup

Use this command to clone the official App Starter template for a pre-configured project structure. Ensure you have npx installed.

```bash
npx giget@latest gh:laioutr/app-starter
cd laioutr-app-starter
```

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

### Laioutr Project Configuration Example

Source: https://docs.laioutr.io/raw/getting-started/key-concepts/ci-cd-pipeline

Configure Laioutr apps within a project using the `laioutrrc.json` file. Specify app name, version, and any app-specific configuration settings.

```json
{
  "apps": [
    {
      "name": "@laioutr-app/ui",
      "version": "latest",
      "config": {
        "theme": "sunny"
      }
    },
    {
      "name": "@laioutr-app/shopify",
      "version": "latest",
      "config": {
        "shopId": "84306067782",
        "storeDomain": "my-store.myshopify.com",
        "publicAccessKey": "074478fbce..."
      }
    },
    {
      "name": "@laioutr-org/acme__my-app",
      "version": "latest",
      "config": {}
    }
  ]
}
```

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

### Example URL with Multiple Queries

Source: https://docs.laioutr.io/llms-full.txt

Demonstrates how multiple queries on a single page use distinct prefixes for their parameters, ensuring independent pagination, sorting, and filtering.

```url
/shop?products[p]=2&products[f][color]=red&reviews[s]=date:desc
```

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

### Install Nuxt Link Checker

Source: https://docs.laioutr.io/raw/frontend/seo/link-checker

Install the Nuxt Link Checker module using npx. This command adds the module to your project.

```bash
npx nuxi module add nuxt-link-checker
```

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

### Example URL with Link Parameters

Source: https://docs.laioutr.io/llms-full.txt

Illustrates how link prefixes are nested under the parent query prefix to manage parameters for linked queries, such as product reviews.

```url
/product/sneaker?products[reviews][p]=3&products[reviews][s]=date:desc
```

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

### Hosting Disconnected Event Request Example

Source: https://docs.laioutr.io/raw/hosting/bring-your-own-server-byos/webhook-config

An example of the JSON payload sent by Cockpit for the 'hosting.disconnected' event, signaling a project disconnection.

```json
{
  "event": "hosting.disconnected",
  "timestamp": "2025-01-30T12:00:00.000Z",
  "project": "acme-corp/storefront"
}
```

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

### Implementing a List-Only Media Library Provider

Source: https://docs.laioutr.io/llms-full.txt

Example of how to implement a media library provider that only supports listing assets, without upload functionality.

```APIDOC
## Implementing a List-Only Media Library Provider

### Description
This example demonstrates how to create a server-side module for a read-only media library provider.

### Code Example
```typescript
// e.g. server/media-libraries/my-dam.ts
import { defineMediaLibraryProvider } from '#imports';
import type { ProviderStudioMediaItem } from '@laioutr-core/core-types/media-library';
import type { Media, MediaImage } from '@laioutr-core/core-types/common';

export default defineMediaLibraryProvider({
  name: 'my-dam',
  label: 'My DAM',
  iconSrc: '/app-my-dam/logo.svg',
  list: async ({ limit, offset, search, sort }) => {
    const api = getMyDamClient();
    const response = await api.getAssets({ limit, offset, q: search, sort });

    const items: ProviderStudioMediaItem[] = response.items.map((asset) => ({
      media: mapToMedia(asset),
      previewUrl: asset.thumbnailUrl ?? asset.url,
      fileName: asset.fileName,
    }));

    return {
      items,
      total: response.total,
      offset,
      limit,
    };
  },
});

function mapToMedia(asset: any): Media {
  const image: MediaImage = {
    type: 'image',
    sources: [
      {
        provider: 'my-dam',
        src: asset.id,
        width: asset.width,
        height: asset.height,
        responsive: 'static',
      },
    ],
    alt: asset.alt ?? '',
  };
  return image;
}
```

### Registration
- The `defineMediaLibraryProvider` function is used to create the provider object.
- The default export of the module is the function returned by `defineMediaLibraryProvider`, which registers the provider globally when the Nitro server plugin runs.
```

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

### Example GraphQL Query for Hygraph

Source: https://docs.laioutr.io/llms-full.txt

An example of a GraphQL query that can be executed against the Hygraph Content API using the module's client.

```graphql
query GetBlogPosts {
  blogPosts {
    id
    title
    slug
    excerpt
    publishedAt
  }
}
```

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

### Implement Media Library Provider with Upload

Source: https://docs.laioutr.io/raw/frontend/features/media

Example of a media library provider that supports file uploads. It uses `Promise.all` to handle multiple file uploads concurrently.

```typescript
export default defineMediaLibraryProvider({
  name: 'my-backend',
  label: 'My Backend',
  list: async (args) => { /* ... */ },
  upload: async ({ files }) => {
    const results = await Promise.all(
      files.map(async (file) => {
        const stream = file.getStream();
        const uploaded = await myBackendClient.upload(stream, { name: file.name, mimeType: file.mimeType });
        return {
          media: mapToMedia(uploaded),
          previewUrl: uploaded.previewUrl ?? '',
          fileName: uploaded.name,
        };
      })
    );
    return { items: results, total: results.length, offset: 0, limit: results.length };
  },
});
```

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

### Install Nuxt Schema.org Module

Source: https://docs.laioutr.io/raw/frontend/seo/schema-org

Install the Nuxt Schema.org module using npx. This module is required for generating JSON-LD structured data.

```bash
npx nuxi module add @nuxtjs/schema-org
```

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

### Hosting Connected Event Request Example

Source: https://docs.laioutr.io/raw/hosting/bring-your-own-server-byos/webhook-config

An example of the JSON payload sent by Cockpit for the 'hosting.connected' event, indicating a successful project connection.

```json
{
  "event": "hosting.connected",
  "timestamp": "2025-01-30T12:00:00.000Z",
  "project": "acme-corp/storefront"
}
```

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

### Example URL with Range Filters

Source: https://docs.laioutr.io/llms-full.txt

Illustrates how to set minimum and maximum values for a numeric range filter in the URL.

```url
?products[f][price][min]=10&products[f][price][max]=50
```

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

### Example File Organization for Component Resolvers

Source: https://docs.laioutr.io/raw/frontend/orchestr/component-resolvers

Illustrates a typical directory structure for Laioutr component resolvers within the `orchestr/` directory. File names like `.resolver.ts` are conventional but not strictly required.

```text
src/runtime/server/orche/
├── Product/
│   ├── base.resolver.ts      # provides base, media, prices, ...
│   └── loyalty.resolver.ts   # provides loyalty
├── StoreLocation/
│   └── base.resolver.ts      # provides base
└── plugins/
    └── zodFix.ts
```

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

### Badge Component Example

Source: https://docs.laioutr.io/llms-full.txt

Example of the Badge component, used for displaying labels, counts, or status. Suitable for notifications, cart counts, or categories.

```vue-template
<LuiBadge />
```

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

### Laioutr App Configuration Example

Source: https://docs.laioutr.io/raw/apps/app-development/app-configuration

This JSON file defines the configuration for apps within a Laioutr project. The 'config' object holds settings specific to each app.

```json
{
  "apps": [
    {
      "name": "@laioutr-app/ui",
      "version": "1.23.4",
      "config": {
        "theme": "sunny"
      }
    }
  ]
}
```

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

### Userland Cache Example

Source: https://docs.laioutr.io/raw/frontend/orchestr/caching

Use `useUserlandCache` to cache data outside of query/link/component results. This example shows caching a category total, demonstrating `getItem` and `setItem`.

```typescript
import { useUserlandCache } from '#imports';

export const getCategoryTotal = async (
  adminClient: AdminApiClient,
  categoryId: string
): Promise<number | undefined> => {
  const cache = useUserlandCache<number>('shopify/categoryTotal');

  const cached = await cache.getItem(categoryId);
  if (typeof cached === 'number') {
    return cached;
  }

  const total = await fetchTotalFromApi(adminClient, categoryId);
  if (total !== undefined) {
    await cache.setItem(categoryId, total);
  }

  return total;
};
```

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

### Track Event cURL Example

Source: https://docs.laioutr.io/raw/frontend/api-reference/tracking/actions

Example of how to send an EventTrackAction payload to the tracking API endpoint using cURL. Ensure the Content-Type header is set to application/json.

```bash
curl -X POST http://localhost:3000/api/orchestr/action/tracking/event/track \
  -H "Content-Type: application/json" \
  -d '{ "input": ... }'
```