### Quick Start Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/06.modifiers/01.presets.md

Demonstrates how to use `useModifiersPreset` and `useUtilitiesPreset` to register modifiers and create utilities with them.

```APIDOC
## Quick Start Example

This example shows how to register all modifiers using `useModifiersPreset` and then use them with `useUtilitiesPreset` to create background color and opacity utilities.

### Configuration

```ts
import { styleframe } from 'styleframe';
import { useModifiersPreset, useUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

// Register all modifiers
const { hover, focus, active, dark, disabled, first, last } = useModifiersPreset(s);

// Register utilities and create values with modifiers
const { createBackgroundColorUtility, createOpacityUtility } = useUtilitiesPreset(s);

createBackgroundColorUtility({
    primary: '#006cff',
    secondary: '#6c757d',
}, [hover, focus, dark]);

createOpacityUtility({
    0: '0',
    50: '0.5',
    100: '1',
}, [hover]);

export default s;
```

### Output CSS

The following CSS is generated based on the configuration above:

```css
/* Base utilities */
._background-color\:primary { background-color: #006cff; }
._background-color\:secondary { background-color: #6c757d; }

/* Hover modifier variants */
._hover\:background-color\:primary:hover { background-color: #006cff; }
._hover\:background-color\:secondary:hover { background-color: #6c757d; }

/* Focus modifier variants */
._focus\:background-color\:primary:focus { background-color: #006cff; }
._focus\:background-color\:secondary:focus { background-color: #6c757d; }

/* Dark mode modifier variants */
@media (prefers-color-scheme: dark) {
    ._dark\:background-color\:primary { background-color: #006cff; }
    ._dark\:background-color\:secondary { background-color: #6c757d; }
}

/* Opacity with hover */
._opacity\:0 { opacity: 0; }
._opacity\:50 { opacity: 0.5; }
._opacity\:100 { opacity: 1; }
._hover\:opacity\:0:hover { opacity: 0; }
._hover\:opacity\:50:hover { opacity: 0.5; }
._hover\:opacity\:100:hover { opacity: 1; }
```
```

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

### Quick Start Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/05.utilities/01.presets.md

Demonstrates how to register all utility factories using `useUtilitiesPreset` and define a recipe that leverages auto-generated utility classes.

```APIDOC
## Quick Start

### `styleframe.config.ts`
```ts
import { styleframe } from 'styleframe';
import { useUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

// Register all utility factories at once
const utilities = useUtilitiesPreset(s);

// Define a recipe - utilities auto-generate from property values
s.recipe({
    name: 'button',
    base: {
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    variants: {
        size: {
            sm: { padding: '0.5rem 1rem' },
            md: { padding: '0.75rem 1.5rem' },
            lg: { padding: '1rem 2rem' },
        },
    },
});

export default s;
```

### Output (`styleframe/index.css`)
```css
/* Auto-generated utilities from recipe declarations */
._display\:inline-flex { display: inline-flex; }
._align-items\:center { align-items: center; }
._justify-content\:center { justify-content: center; }
._padding\:0\.5rem\ 1rem { padding: 0.5rem 1rem; }
._padding\:0\.75rem\ 1\.5rem { padding: 0.75rem 1.5rem; }
._padding\:1rem\ 2rem { padding: 1rem 2rem; }

/* Recipe classes */
.button { ... }
.button--size-sm { ... }
.button--size-md { ... }
.button--size-lg { ... }
```
```

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

### Complete Fluid Design System Setup with Styleframe

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/03.guides/01.create-design-system-in-under-15-minutes.md

This is the main setup file for a fluid design system. It imports all necessary Styleframe hooks and configures design tokens for colors, typography, spacing, and borders. Ensure all theme and pro packages are installed.

```typescript
import { styleframe } from 'styleframe';
import {
    useColorDesignTokens,
    useColorLevelDesignTokens,
    useColorShadeDesignTokens,
    useColorTintDesignTokens,
    useScaleDesignTokens,
    useScalePowersDesignTokens,
    useFontFamilyDesignTokens,
    useFontWeightDesignTokens,
    useLineHeightDesignTokens,
    useLetterSpacingDesignTokens,
    useSpacingDesignTokens,
    useBorderWidthDesignTokens,
    useBorderStyleDesignTokens,
    useBorderColorDesignTokens,
    useBorderRadiusDesignTokens,
    useBoxShadowDesignTokens,
    useBreakpointDesignTokens,
    useMultiplierDesignTokens,
    defaultScaleValues,
} from '@styleframe/theme';
import { useFluidViewport, useFluidFontSize } from '@styleframe/pro';

const s = styleframe();

// 1. Colors
const { colorPrimary, colorSecondary, colorGray } = useColorDesignTokens(s, {
    primary: '#0066ff',
    secondary: '#7c3aed',
    gray: '#64748b',
} as const);

const { colorSuccess, colorWarning, colorError, colorInfo } = useColorDesignTokens(s, {
    success: '#10b981',
    warning: '#f59e0b',
    error: '#ef4444',
    info: '#06b6d4',
} as const);

// Generate color variants
// Generate level variants for primary color
const {
    colorPrimary50,
    colorPrimary100,
    colorPrimary200,
    colorPrimary300,
    colorPrimary400,
    colorPrimary500,
    colorPrimary600,
    colorPrimary700,
    colorPrimary800,
    colorPrimary900,
    colorPrimary950,
} = useColorLevelDesignTokens(s, colorPrimary);

// Generate level variants for gray (for UI backgrounds, borders, text)
const {
    colorGray50,
    colorGray100,
    colorGray200,
    colorGray300,
    colorGray400,
    colorGray500,
    colorGray600,
    colorGray700,
    colorGray800,
    colorGray900,
    colorGray950,
} = useColorLevelDesignTokens(s, colorGray);

// Generate shades and tints for interactive states
const {
    colorPrimaryShade50,
    colorPrimaryShade100,
    colorPrimaryShade150,
    colorPrimaryShade200,
} = useColorShadeDesignTokens(s, colorPrimary);

const {
    colorPrimaryTint50,
    colorPrimaryTint100,
    colorPrimaryTint150,
    colorPrimaryTint200,
} = useColorTintDesignTokens(s, colorPrimary);

// 2. Scales for Fluid Typography
const { scaleMin, scaleMax } = useScaleDesignTokens(s, {
    ...defaultScaleValues,
    min: '@minor-third',   // 1.2 for mobile
    max: '@major-third',   // 1.25 for desktop
});

const scaleMinPowers = useScalePowersDesignTokens(s, scaleMin, [-3, -2, -1, 0, 1, 2, 3, 4, 5]);
const scaleMaxPowers = useScalePowersDesignTokens(s, scaleMax, [-3, -2, -1, 0, 1, 2, 3, 4, 5]);

// 3. Fluid Typography
useFluidViewport(s);

const { fontFamily, fontFamilyMono, fontFamilyDisplay } = useFontFamilyDesignTokens(s, {
    default: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    mono: '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace',
    display: '"Inter Display", -apple-system, sans-serif',
} as const);

const fontSizes = useFluidFontSize(
    s,
    { min: 16, max: 18 },
    {
        xs: { min: scaleMinPowers[-2], max: scaleMaxPowers[-2] },
        sm: { min: scaleMinPowers[-1], max: scaleMaxPowers[-1] },
        md: { min: scaleMinPowers[0], max: scaleMaxPowers[0] },
        lg: { min: scaleMinPowers[1], max: scaleMaxPowers[1] },
        xl: { min: scaleMinPowers[2], max: scaleMaxPowers[2] },
        '2xl': { min: scaleMinPowers[3], max: scaleMaxPowers[3] },
        '3xl': { min: scaleMinPowers[4], max: scaleMaxPowers[4] },
        '4xl': { min: scaleMinPowers[5], max: scaleMaxPowers[5] },
        default: '@md',
    }
);

const { fontWeight, fontWeightNormal, fontWeightMedium, fontWeightSemibold, fontWeightBold } = useFontWeightDesignTokens(s);
const { lineHeight, lineHeightTight, lineHeightNormal, lineHeightRelaxed } = useLineHeightDesignTokens(s);
const { letterSpacing, letterSpacingTight, letterSpacingNormal, letterSpacingWide } = useLetterSpacingDesignTokens(s);

// 4. Spacing
const { spacing } = useSpacingDesignTokens(s, { default: '1rem' } as const);
const spacings = useMultiplierDesignTokens(s, spacing, {
    '3xs': scaleMinPowers[-3],
    '2xs': scaleMinPowers[-2],
    xs: scaleMinPowers[-1],
    sm: scaleMinPowers[-1],
    md: scaleMinPowers[0],
    lg: scaleMinPowers[1],
    xl: scaleMinPowers[2],
    '2xl': scaleMinPowers[3],
    '3xl': scaleMinPowers[4],
});

// 5. Visual Depth

const { borderStyle } = useBorderStyleDesignTokens(s);

const { borderWidth, borderWidthThin, borderWidthMedium, borderWidthThick } = useBorderWidthDesignTokens(s);

const { borderColor, borderColorLight, borderColorDark } = useBorderColorDesignTokens(s, {
    default: s.ref(colorGray300),
    light: s.ref(colorGray200),
    dark: s.ref(colorGray400),
} as const);

const { 
    borderRadius,
    borderRadiusFull, 
} = useBorderRadiusDesignTokens(s, { 
    default: '0.25rem',
    full: '9999px',
});

```

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

### Start Documentation Site

Source: https://github.com/styleframe-dev/styleframe/blob/main/WARP.md

Starts the documentation site locally. This command is used for previewing documentation changes during development.

```bash
pnpm --filter @styleframe/docs dev
```

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

### Run Playground Development Server

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/playground/README.md

Use these commands to start the development server for the @styleframe/playground. Open http://localhost:5173 in your browser after starting.

```sh
pnpm dev --filter @styleframe/playground
```

```sh
pnpm dev:playground
```

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

### Install Styleframe Packages (bun)

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/02.installation/03.custom.md

Install all styleframe packages as development dependencies using bun. The runtime package is installed separately.

```bash
bun install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
bun install @styleframe/runtime
```

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

### Customization Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/04.components/02.composables/09.placeholder.md

Example of how to override default styles for the placeholder recipe.

```APIDOC
## Customization

### Overriding Defaults

The composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:

```ts [src/components/placeholder.styleframe.ts]
import { styleframe } from 'virtual:styleframe';
import { usePlaceholderRecipe } from '@styleframe/theme';

const s = styleframe();

const placeholder = usePlaceholderRecipe(s, {
	base: {
		borderRadius: '@border-radius.lg',
		borderColor: '@color.gray-400',
		opacity: '0.5',
	},
});

export default s;
```
```

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

### Install Styleframe CLI

Source: https://github.com/styleframe-dev/styleframe/blob/main/engine/styleframe/README.md

Use the Styleframe CLI to initialize your project, install Styleframe as a dev dependency, and configure the Vite plugin if applicable.

```bash
npx styleframe init && npm install
```

```bash
pnpx styleframe init && pnpm install
```

```bash
yarn styleframe init && yarn install
```

```bash
bunx styleframe init && bun install
```

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

### Setup Integration App Locally

Source: https://github.com/styleframe-dev/styleframe/blob/main/testing/integration/README.md

Perform a one-time setup to create the `.app/` directory, which contains the full integration project for local development. This is a prerequisite for running local tests.

```bash
pnpm run setup
```

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

### Nuxt Configuration Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/shared/AGENTS.md

Example of how to extend the Nuxt layer in a consuming application's nuxt.config.ts file.

```typescript
export default defineNuxtConfig({
  extends: ['@styleframe/app-shared'],
});
```

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

### Install Dependencies with pnpm

Source: https://github.com/styleframe-dev/styleframe/blob/main/WARP.md

Installs all project dependencies using pnpm. Ensure pnpm is installed and version 10.7.1 or higher.

```bash
pnpm install
```

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

### CLI Installation

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/06.tooling/01.cli.md

Install the Styleframe CLI as a development dependency using your preferred package manager.

```APIDOC
## CLI Installation

Install the CLI as a development dependency:

```bash
pnpm install -g styleframe
```

```bash
yarn add -g styleframe
```

```bash
npm install -g styleframe
```

```bash
bun add -g styleframe
```
```

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

### Install Styleframe CLI

Source: https://context7.com/styleframe-dev/styleframe/llms.txt

Initialize Styleframe in a Vite project using the CLI. Choose your preferred package manager (pnpm, npm, yarn, or bun) for installation.

```bash
# Install with pnpm
pnpx styleframe init
pnpm install
```

```bash
# Install with npm
npx styleframe init
npm install
```

```bash
# Install with yarn
yarn create styleframe
yarn install
```

```bash
# Install with bun
bunx styleframe init
bun install
```

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

### Install Styleframe Packages (yarn)

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/02.installation/03.custom.md

Install all styleframe packages as development dependencies using yarn. The runtime package is installed separately.

```bash
yarn add -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
yarn add @styleframe/runtime
```

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

### Styleframe Configuration Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/AGENTS.md

Example of a Styleframe configuration file. Ensure all config files end with 'export default s;'.

```typescript
import { styleframe } from "styleframe";
// code here
export default s;
```

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

### Design Tokens Quick Start

Source: https://github.com/styleframe-dev/styleframe/blob/main/AGENTS.md

Demonstrates how to quickly integrate design tokens, modifiers, and utilities using presets.

```APIDOC
## DESIGN TOKENS (@styleframe/theme)

### Quick Start with Presets

```ts
import { styleframe } from 'styleframe';
import { useDesignTokensPreset, useModifiersPreset, useUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

const { colorPrimary, spacingMd } = useDesignTokensPreset(s); // Flat — all tokens directly
const modifiers = useModifiersPreset(s);   // All pseudo-state/element/media modifiers
useUtilitiesPreset(s);                      // All utility classes

export default s;
```
```

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

### Install Styleframe Packages (pnpm)

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/02.installation/03.custom.md

Install all styleframe packages as development dependencies using pnpm. The runtime package is installed separately.

```bash
pnpm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
pnpm install @styleframe/runtime
```

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

### Start Storybook Development Server

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/storybook/AGENTS.md

Launch the Storybook development server to view and interact with components. This command starts the server on port 6006.

```sh
pnpm storybook dev
```

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

### Install Styleframe Packages (npm)

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/02.installation/03.custom.md

Install all styleframe packages as development dependencies using npm. The runtime package is installed separately.

```bash
npm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
npm install @styleframe/runtime
```

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

### Start Core Package in Development Mode

Source: https://github.com/styleframe-dev/styleframe/blob/main/WARP.md

Launches the core package in development mode. This typically involves starting a local server or enabling hot-reloading for rapid development.

```bash
pnpm --filter @styleframe/core dev
```

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

### Install Styleframe CLI

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/06.tooling/01.cli.md

Install the Styleframe CLI as a global development dependency using your preferred package manager.

```bash
pnpm install -g styleframe
```

```bash
yarn add -g styleframe
```

```bash
npm install -g styleframe
```

```bash
bun add -g styleframe
```

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

### Quick Start with Styleframe Presets

Source: https://github.com/styleframe-dev/styleframe/blob/main/theme/AGENTS.md

Initializes Styleframe and applies common presets for design tokens, modifiers, and utilities.

```typescript
import { styleframe } from 'styleframe';
import { useDesignTokensPreset, useModifiersPreset, useUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

const { colorPrimary, spacingMd, scalePowers } = useDesignTokensPreset(s);
const modifiers = useModifiersPreset(s);
useUtilitiesPreset(s);

export default s;
```

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

### Usage of Border Collapse Utilities

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/05.utilities/02.composables/12.tables.md

HTML examples demonstrating the application of 'collapse' and 'separate' border utilities on tables.

```html
<table class="_border-collapse:collapse">Merged borders</table>
<table class="_border-collapse:separate">Separate borders</table>
```

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

### Initialize Styleframe Configuration

Source: https://github.com/styleframe-dev/styleframe/blob/main/WARP.md

Initializes Styleframe configuration files in a project. This command is typically run by users installing Styleframe.

```bash
pnpx styleframe init
```

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

### Tip Component Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/AGENTS.md

Markdown structure for displaying a 'tip' component, often used for helpful advice.

```markdown
::tip
**Pro tip:** Description of helpful advice here.
::
```

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

### Astro Plugin Setup

Source: https://github.com/styleframe-dev/styleframe/blob/main/AGENTS.md

Incorporate the Styleframe Astro integration by importing and using the `styleframe/plugin/astro` adapter in your `astro.config.mjs` file.

```typescript
// astro.config.mjs
import styleframe from 'styleframe/plugin/astro';
export default { integrations: [styleframe()] };
```

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

### Cross-Reference Link Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/AGENTS.md

Use relative paths starting with `/docs/` for internal links. Do not invent cross-references.

```markdown
[Learn more about variables →](/docs/api/variables)
[See the recipes API](/docs/api/recipes)
```

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

### Get Placeholder Classes

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/04.components/02.composables/09.placeholder.md

Call the `placeholder` function without arguments to generate the necessary CSS classes for the placeholder component. This is typically done within a component's setup.

```typescript
const classes = placeholder();
```

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

### Register Modifiers and Utilities with Presets

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/06.modifiers/01.presets.md

This example demonstrates how to register all modifier categories using `useModifiersPreset` and then create utility functions with these modifiers using `useUtilitiesPreset`. It shows the setup for background color and opacity utilities with hover, focus, and dark mode modifiers.

```typescript
import { styleframe } from 'styleframe';
import { useModifiersPreset, useUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

// Register all modifiers
const { hover, focus, active, dark, disabled, first, last } = useModifiersPreset(s);

// Register utilities and create values with modifiers
const { createBackgroundColorUtility, createOpacityUtility } = useUtilitiesPreset(s);

createBackgroundColorUtility({
    primary: '#006cff',
    secondary: '#6c757d',
}, [hover, focus, dark]);

createOpacityUtility({
    0: '0',
    50: '0.5',
    100: '1',
}, [hover]);

export default s;
```

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

### Initialize and Use Composed Design System

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/02.api/12.composables.md

Example of initializing a comprehensive design system with `useDesignSystem`. It demonstrates how to use the returned design tokens for custom styling.

```typescript
import { styleframe } from "styleframe";
import { useDesignSystem } from "./useDesignSystem";

const s = styleframe();
const { selector, ref } = s;

// One line sets up your entire design system
const { colors, spacing } = useDesignSystem(s);

// You can still use the returned tokens directly
selector(".custom-element", {
    color: ref(colors.colorPrimary),
    margin: ref(spacing.spacingMd),
});

export default s;

```

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

### HTML Usage Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/AGENTS.md

Example of HTML using Styleframe utility classes, shown in the 'Usage' tab of code examples.

```html
<div class="_background-color:primary">Content</div>
```

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

### Initialize Project (`init`)

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/06.tooling/01.cli.md

Initialize a new Styleframe project in your current directory. This command sets up the necessary configuration files and dependencies.

```APIDOC
## Initialize Project (`init`)

### Description
Initialize a new Styleframe project in your current directory.

### Method
CLI Command

### Endpoint
`styleframe init [options]`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### Options
| Option | Alias | Type | Default | Description |
|---|---|---|---|---|
| `--cwd` | `-d`, `--dir` | `string` | `process.cwd()` | Directory where the project will be initialized |

### Usage

```bash
styleframe init
```

```bash
styleframe init --cwd ./my-project
```

```bash
styleframe init -d ./my-project
```

### Notes
1. Creates a `styleframe.config.ts` file with basic configuration.
2. Creates or updates `tsconfig.json` with styleframe includes.
3. Adds all `styleframe` packages to your `package.json` dependencies.
4. Detects and configures your framework (Vite or Nuxt), if applicable.
5. Skips creating files that already exist (won't overwrite existing config).

**Pro tip**: After running `init`, don't forget to run `npm install` to install the added dependencies.
```

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

### Build with Multiple Configuration Files

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/06.tooling/01.cli.md

Execute the build command with different configuration files and specify distinct output directories for each.

```bash
styleframe build styleframe.theme.config.ts -o dist/theme
styleframe build styleframe.components.config.ts -o dist/components
```

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

### Local Development Workflow for Integration Tests

Source: https://github.com/styleframe-dev/styleframe/blob/main/testing/integration/AGENTS.md

Steps to set up, run, and update the integration tests locally. This includes one-time setup, running tests, and re-syncing fixtures.

```bash
pnpm run setup
pnpm run test:e2e
pnpm run update
pnpm run test:e2e
```

```bash
pnpm run start
```

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

### Manual Token Setup with Styleframe

Source: https://github.com/styleframe-dev/styleframe/blob/main/theme/AGENTS.md

Set up theme tokens like colors, spacing, and scales manually. Imports `styleframe`, `useColor`, `useSpacing`, `useMultiplier`, `useScale`, and `useScalePowers`.

```typescript
import { styleframe } from 'styleframe';
import { useColor, useSpacing, useMultiplier, useScale, useScalePowers } from '@styleframe/theme';

const s = styleframe();
const { ref, selector } = s;

const { scale } = useScale(s, { default: '@minor-third' });
const scalePowers = useScalePowers(s, scale);

const { colorPrimary } = useColor(s, { primary: '#006cff' } as const);
const { spacing } = useSpacing(s, { default: '1rem' } as const);
const { spacingSm, spacingMd, spacingLg } = useMultiplier(s, spacing, {
    sm: scalePowers[-1],
    md: scalePowers[0],
    lg: scalePowers[1],
});

selector('.card', {
    padding: ref(spacingLg),
    backgroundColor: ref(colorPrimary),
});

export default s;
```

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

### Filtering Variants Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/04.components/02.composables/01.badge.md

Example of how to filter variants for the badge recipe to generate a subset of CSS.

```APIDOC
## Filtering Variants

If you only need a subset of the available variants, use the `filter` option to limit which values are generated. This reduces the output CSS and keeps your component API focused:

```ts
import { styleframe } from 'virtual:styleframe';
import { useBadgeRecipe } from '@styleframe/theme';

const s = styleframe();

// Only generate primary and error colors, with solid and outline styles
const badge = useBadgeRecipe(s, {
    filter: {
        color: ['primary', 'error'],
        variant: ['solid', 'outline'],
    },
});

export default s;
```

**Note:** Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.
```

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

### build

Source: https://github.com/styleframe-dev/styleframe/blob/main/engine/loader/AGENTS.md

Transpile a `Styleframe` instance to CSS and write files to disk. Validates the license before building.

```APIDOC
## build(instance, options?)

### Description
Transpile a `Styleframe` instance to CSS and write files to disk. Validates the license before building.

### Method
`build`

### Parameters
#### Path Parameters
- **instance** (Styleframe) - Required - The Styleframe instance to build.

#### Query Parameters
- **clean** (boolean) - Optional - Remove output dir before writing (default: true).
- **outputDir** (string) - Optional - Output directory (default: "./styleframe").
- **transpiler** (object) - Optional - Transpiler options.

### Request Example
```ts
await build(instance, {
  clean: true,
  outputDir: "./styleframe",
  transpiler: { /* TranspileOptions */ }
});
```

### Notes
Requires `STYLEFRAME_LICENSE` environment variable for license validation.
```

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

### Initialize Styleframe Project

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/06.tooling/01.cli.md

Initialize a new Styleframe project in the current or a specified directory. This command sets up configuration files, dependencies, and framework integration.

```bash
styleframe init
```

```bash
styleframe init --cwd ./my-project
```

```bash
styleframe init -d ./my-project
```

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

### Generated CSS Output

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/AGENTS.md

Example of CSS generated by Styleframe, typically shown in the 'Output' tab of code examples.

```css
:root {
    --color--primary: #006cff;
}
```

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

### Initialize Styleframe Project

Source: https://github.com/styleframe-dev/styleframe/blob/main/README.md

Use the CLI to initialize Styleframe in your project. This installs dependencies, creates configuration files, and sets up build tool integrations.

```bash
# pnpm
pnpx styleframe init
pnpm install

# npm
npx styleframe init
npm install

# yarn
yarn create styleframe
yarn install

# bun
bunx styleframe init
bun install
```

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

### CodeMirror 6 Initialization Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/playground/AGENTS.md

Demonstrates how to create a CodeMirror 6 editor instance with specified parent element, document content, language, and an onChange callback.

```typescript
createEditor({
  parent,
  doc,
  language,
  onChange
})
```

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

### Configure Opacity and Background Color Utilities

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/05.utilities/02.composables/04.effects.md

Set up utility classes for background colors and opacity levels. This example defines a black background and 50% and 75% opacity levels.

```typescript
import { styleframe } from "styleframe";
import { useOpacityUtility } from "@styleframe/theme";
import { useBackgroundColorUtility } from "@styleframe/theme";

const s = styleframe();

useBackgroundColorUtility(s, {
    black: '#000',
});

useOpacityUtility(s, {
    '50': '0.5',
    '75': '0.75',
});

export default s;
```

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

### Clone Styleframe Repository and Run Development Commands

Source: https://github.com/styleframe-dev/styleframe/blob/main/engine/styleframe/README.md

Commands for cloning the Styleframe repository, installing dependencies, running tests, and building the project for development.

```bash
# Clone the repository
git clone https://github.com/styleframe-dev/styleframe.git

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build
pnpm build
```

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

### Build Static Deployable Bundle

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/playground/README.md

Command to build a static, deployable bundle for the @styleframe/playground.

```sh
pnpm build --filter @styleframe/playground
```

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

### Run Documentation Site Locally

Source: https://github.com/styleframe-dev/styleframe/blob/main/WARP.md

Commands for running the documentation site locally, including development mode and static generation.

```bash
pnpm --filter @styleframe/docs dev
```

```bash
pnpm --filter @styleframe/docs generate
```

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

### Example Shorthand CSS Output

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/05.utilities/01.presets.md

This example shows the generated CSS output when using shorthand class names, such as `._m:sm` for margin, as opposed to the default long-form names.

```css
/* Shorthand class names */
._m\:sm { margin: 0.5rem; }
._p\:md { padding: 1rem; }
._w\:full { width: 100%; }
._rounded\:lg { border-radius: 0.5rem; }
._bg\:primary { background-color: var(--color--primary); }

/* Instead of the default long-form names */
/* ._margin\:sm, ._padding\:md, ._width\:full, etc. */
```

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

### Styleframe Instance Creation

Source: https://github.com/styleframe-dev/styleframe/blob/main/AGENTS.md

Demonstrates the essential step of creating a Styleframe instance and destructuring its core methods for use in your configuration files.

```APIDOC
## Instance Creation

ALWAYS create a Styleframe instance and destructure the methods:

```ts
import { styleframe } from 'styleframe';

const s = styleframe();
const { variable, ref, selector, utility, modifier, recipe, theme, atRule, keyframes, media, css } = s;

export default s;
```
```

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

### HTML Usage Example for Cursor Styles

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/05.utilities/02.composables/07.interactivity.md

Apply cursor styles to HTML elements using the generated utility classes. For example, `_cursor:pointer` makes an element clickable.

```html
<button class="_cursor:pointer">Clickable button</button>
<div class="_cursor:not-allowed">Disabled area</div>
<div class="_cursor:grab">Draggable element</div>
```

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

### Initialize Styleframe Project

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/06.tooling/01.cli.md

Use this command if the `styleframe` command is not found in your local node_modules/.bin directory. It ensures the CLI is accessible.

```bash
npx styleframe init
```

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

### DTCG Format Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/06.tooling/03.figma-plugin.md

An example of the Design Tokens Community Group (DTCG) JSON format used by Styleframe for token interchange. It includes basic token definitions and theme modifiers.

```json
{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$extensions": {
    "dev.styleframe": {
      "collection": "Design Tokens",
      "modes": ["Light", "Dark"]
    }
  },
  "color": {
    "primary": {
      "$value": "#006cff",
      "$type": "color"
    },
    "background": {
      "$value": "#ffffff",
      "$type": "color"
    }
  },
  "$modifiers": {
    "theme": {
      "$type": "modifier",
      "contexts": {
        "Dark": {
          "color": {
            "primary": { "$value": "#60a5fa" },
            "background": { "$value": "#1a1a1a" }
          }
        }
      }
    }
  }
}
```

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

### Styleframe Runtime Resolution Examples

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/02.api/11.recipes/01.runtime.md

Demonstrates how the Styleframe runtime function resolves class names based on provided variant props and default variants. Examples show calls with no props, one prop, and multiple props.

```typescript
// With defaultVariants: { color: "primary", size: "md" }

button({})
// Output: "button _border-width:thin _border-style:[solid] _background:primary _color:white _padding:md"

button({ color: "secondary" })
// Output: "button _border-width:thin _border-style:[solid] _background:secondary _color:white _padding:md"

button({ color: "secondary", size: "lg" })
// Output: "button _border-width:thin _border-style:[solid] _background:secondary _color:white _padding:lg"
```

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

### Chip Anatomy Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/04.components/02.composables/12.chip.md

Demonstrates the basic structure of a Chip component with an avatar and an indicator.

```html
<div class="chip()">
    <img src="avatar.png" alt="User avatar" />
    <span class="chipIndicator({ color: 'success', size: 'xs' })"></span>
</div>
```

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

### Build Styleframe Theme Files with CLI

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/01.getting-started/02.installation/03.custom.md

Use the styleframe CLI command to build your theme files.

```bash
styleframe build
```

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

### Note Component Example

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/AGENTS.md

Markdown structure for displaying a 'note' component, used for informational content.

```markdown
::note
**Good to know:** Informational content here.
::
```

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

### Usage Example for Grid Auto-Flow

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/05.utilities/02.composables/06.flexbox-grid.md

Applies the `_grid-flow:dense` class to a grid container for dense auto-placement.

```html
<div class="_display:grid _grid-flow:dense">
    Dense auto-placement grid
</div>
```

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

### HTML Table with Caption at Bottom

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/05.utilities/02.composables/12.tables.md

Example of applying the 'bottom' caption-side utility class to an HTML table.

```html
<table class="_caption-side:bottom">
    <caption>Table title at bottom</caption>
</table>
```

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

### styleframe init

Source: https://github.com/styleframe-dev/styleframe/blob/main/tooling/cli/AGENTS.md

Initializes a new Styleframe project in the specified directory.

```APIDOC
## styleframe init [cwd]

### Description
Initializes a new Styleframe project in the target directory.

### Method
CLI Command

### Endpoint
N/A (CLI Command)

### Parameters
#### Path Parameters
- **cwd** (string) - Optional - Directory to initialize. Defaults to `process.cwd()`.

### Actions Performed
1. Creates `styleframe.config.ts` with a basic template (skips if exists).
2. Creates or updates `tsconfig.json` to include Styleframe-related files.
3. Adds necessary Styleframe dependencies to `package.json`.
4. Auto-detects and updates framework configurations (Vite, Nuxt) to include Styleframe plugins/modules.

### Edge Cases
- Skips file creation if the file already exists, logging a warning.
- Merges `tsconfig.json` includes instead of overwriting.
- Only adds missing dependencies to `package.json`.
- Warns with a documentation URL if framework configuration is not found.
```

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

### HTML Table with Caption at Top

Source: https://github.com/styleframe-dev/styleframe/blob/main/apps/docs/content/docs/05.utilities/02.composables/12.tables.md

Example of applying the 'top' caption-side utility class to an HTML table.

```html
<table class="_caption-side:top">
    <caption>Table title at top</caption>
</table>
```