@intlayer/docs 9.0.0-canary.7 → 9.0.0-canary.9

package/docs/ja/dynamic_dictionaries/variants.md

@@ -1,13 +1,15 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
+updatedAt: 2026-06-26
 title: バリアント
-description: コードを変更することなくランタイムに切り替えることができる、名前付きコンテンツ代替案（A/Bテスト、季節限定のバナー、機能フラグ付きのコピー）を宣言するために、Intlayerコンテンツファイルでvariantメタデータフィールドを使用します。
+description: Intlayer のコンテンツファイルで variant メタデータフィールドを使用し、名前付きまたは構造化されたコンテンツの代替（A/B テスト、季節バナー、フィーチャーフラグ付きコピー、CMS レコード、ユーザー固有コンテンツ）を宣言し、コード変更なしにランタイムで切り替えます。
 keywords:
   - バリアント
-  - A/Bテスト
-  - 機能フラグ
+  - A/B テスト
+  - フィーチャーフラグ
   - 動的コンテンツ
+  - 動的レコード
+  - CMS
   - Intlayer
   - 国際化
 slugs:
@@ -17,17 +19,27 @@ slugs:
 history:
   - version: 9.0.0
     date: 2026-06-12
-    changes: "バリアントディクショナリ機能のリリース"
+    changes: "バリアント機能のリリース"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "`variant` が文字列またはオブジェクトを受け取るようになりました — 旧 `meta` / 動的レコードはオブジェクトバリアントとして宣言します"
 author: aymericzip
 ---
 
 # バリアント
 
-**バリアント**（Variant）は、同じディクショナリキー（`key`）を共有するものの、それぞれ異なる `variant` 名を持つコンテンツファイルの集合です。Intlayerは、`useIntlayer` に渡されたセレクターに基づいて、適切なファイルを提供します。
+**バリアント**は、同じ辞書 `key` を共有しつつ、それぞれ異なる `variant` 値を持つコンテンツファイルの集合です。Intlayer は `useIntlayer` に渡されたセレクターに基づいて適切なファイルを提供します。
 
-## バリアントの宣言
+`variant` の値は**2 つの形式**を取れます:
 
-各ファイルは、名前付きの代替案を1つ表します。`variant` フィールドを省略する（または `"default"` に設定する）と、そのファイルがデフォルト（フォールバック）としてマークされます。
+- **文字列** — 単一の名前付き代替（A/B テスト、季節バナー、フィーチャーフラグ）。
+- **オブジェクト** — フィールドの集合でアドレス指定される構造化された識別子（CMS レコード、ユーザー固有コピー、不透明な ID をキーとする任意のコンテンツ）。オブジェクト全体が同一性です。エントリを解決するには、セレクターが**等しい**オブジェクトを提供する必要があります。
+
+> オブジェクト形式は旧 `meta` フィールドを置き換えます。以前 `meta: { id, … }` と書いていた箇所はすべて `variant: { id, … }` と書き、`{ variant: { id, … } }` で選択してください。
+
+## 名前付き（文字列）バリアント
+
+各ファイルは 1 つの名前付き代替を表します。`variant` を省略する（または `"default"` に設定する）と、フォールバックとして扱われます。
 
 ```ts fileName="hero-banner.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
@@ -65,9 +77,9 @@ const dictionary = {
 export default dictionary;
 ```
 
-## バリアントの利用
+### 名前付きバリアントの利用
 
-### デフォルトバリアント
+#### デフォルトバリアント
 
 <Tabs group="framework">
   <Tab label="React" value="react">
@@ -209,7 +221,7 @@ export default dictionary;
   </Tab>
 </Tabs>
 
-### 名前付きバリアント
+#### 名前付きバリアント
 
 ```tsx
 const { headline, cta } = useIntlayer("hero-banner", {
@@ -217,18 +229,264 @@ const { headline, cta } = useIntlayer("hero-banner", {
 });
 ```
 
-### ロケールを明示した名前付きバリアント
+#### ロケールを明示した名前付きバリアント
 
 ```tsx
 const content = useIntlayer("hero-banner", {
   variant: "black_friday",
-  locale: "ja",
+  locale: "fr",
 });
 ```
 
-## 一般的なユースケース
+## オブジェクト（構造化）バリアント
+
+オブジェクトバリアントは、`variant` フィールドで宣言された任意のキー・値ペアの集合でコンテンツをアドレス指定します。これにより、CMS レコード、ユーザー固有コピー、または不透明な ID をキーとする任意のコンテンツをモデル化できます。**オブジェクト全体**が同一性です。エントリが解決されるには、セレクターが等しいオブジェクトを提供する必要があります。
+
+```ts fileName="product.abc.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
+    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+```ts fileName="product.abcd.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abcd", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
+    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+### オブジェクトバリアントの利用
+
+一致するオブジェクトを `variant` に渡します。辞書で宣言された各フィールドはすべて提供され、等しくなければなりません。そうでない場合、結果は `null` です。フィールドの順序は問いません。
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "react-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "next-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+    ```vue fileName="Product.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script setup>
+    import { useIntlayer } from "vue-intlayer";
+
+    const props = defineProps({
+      productId: String,
+      userId: String,
+    });
+
+    const content = useIntlayer("product", {
+      variant: { id: props.productId, userId: props.userId },
+    });
+    </script>
+
+    <template>
+      <p v-if="content">{{ content.description }}</p>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+    ```svelte fileName="Product.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script lang="ts">
+    import { useIntlayer } from "svelte-intlayer";
+
+    export let productId: string;
+    export let userId: string;
+
+    const content = useIntlayer("product", {
+      variant: { id: productId, userId },
+    });
+    </script>
+
+    {#if $content}
+      <p>{$content.description}</p>
+    {/if}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "preact-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "solid-intlayer";
+
+    export const Product = (props: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: props.productId, userId: props.userId },
+      });
+
+      return (
+        <>
+          {content() && <p>{content().description}</p>}
+        </>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+    ```typescript fileName="product.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { Component, Input, OnInit } from "@angular/core";
+    import { useIntlayer } from "angular-intlayer";
+
+    @Component({
+      selector: "app-product",
+      template: `
+        @if (content()) {
+          <p>{{ content().description }}</p>
+        }
+      `,
+    })
+    export class ProductComponent implements OnInit {
+      @Input() productId!: string;
+      @Input() userId!: string;
+
+      content: any;
+
+      ngOnInit() {
+        this.content = useIntlayer("product", {
+          variant: { id: this.productId, userId: this.userId },
+        });
+      }
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+    ```javascript fileName="product.js"
+    import { useIntlayer } from "vanilla-intlayer";
+
+    const content = useIntlayer("product", {
+      variant: { id: "prod_abcd", userId: "user_123" },
+    });
+
+    if (content) {
+      document.body.innerHTML = `<p>${content.description}</p>`;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+#### ロケールを明示する場合
+
+```tsx
+const content = useIntlayer("product", {
+  variant: { id: "prod_abc", userId: "user_123" },
+  locale: "fr",
+});
+```
+
+#### フィールド欠落 — 一致なし
+
+```ts
+// null を返します: `userId` が欠落しているため、オブジェクトは宣言されたバリアントに一致しません
+const content = useIntlayer("product", { variant: { id: "prod_abc" } });
+```
+
+## 読み込みモード
+
+オブジェクトバリアントはしばしば遅延読み込みされます。これを制御するには辞書に `importMode` を設定します:
+
+```ts contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+const dictionary = {
+  key: "product",
+  importMode: "fetch", // or "dynamic"
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: { … },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+`static`、`dynamic`、`fetch` モードの詳細については[バンドル最適化](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/bundle_optimization.md)を参照してください。
+
+## 典型的なユースケース
 
-- 実験キーに基づいた見出しコピーのA/Bテスト
-- 季節限定のプロモーションやキャンペーンのバナー
-- 機能フラグ（feature flags）によって制御されるメッセージ文言
-- 特定の地域に特化したマーケティングキャンペーン
+- 実験キーで駆動される A/B コピーテスト
+- 季節またはプロモーションのバナー
+- フィーチャーフラグ付きメッセージ
+- ロケール固有のマーケティングキャンペーン
+- CMS で管理される製品ごとのマーケティングコピー
+- ユーザー固有またはアカウント固有のコンテンツ
+- 実行時に不透明な ID をキーとする任意のコンテンツ

package/docs/ja/plugins/sync-json.md

@@ -108,7 +108,6 @@ const config: IntlayerConfig = {
      * ロケールディレクトリ内のJSONファイルに、出力と翻訳をロードして書き戻します
      */
     syncJSON({
-      format: "i18next",
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
       priority: 0,
       format: "i18next",

package/docs/ja/releases/v9.md

@@ -1,15 +1,14 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-25
+updatedAt: 2026-06-26
 title: Intlayer v9の新機能
-description: Intlayer v9の新機能をご覧ください。主要なi18nライブラリ向けのドロップイン互換性パッケージと、コレクション、バリアント、動的レコードのサポートを導入します。
+description: Intlayer v9の新機能をご覧ください。主要なi18nライブラリ向けのドロップイン互換性パッケージと、コレクション、バリアントのサポートを導入します。
 keywords:
   - Intlayer
   - Compatibility
   - Migration
   - Collections
   - Variants
-  - Dynamic Records
   - i18next
   - next-intl
   - vue-i18n
@@ -22,7 +21,7 @@ author: aymericzip
 
 # Intlayer v9の新機能
 
-Intlayer v9へようこそ！このメジャーリリースは、主要なi18nライブラリ（`react-i18next`、`next-intl`、`vue-i18n`など）向けの**互換アダプターパッケージ**により、Intlayerへの移行パスを簡素化し、**コレクション**、**バリアント**、**動的レコード**といったリッチなコンテンツ構造のサポートを追加することで、大きな節目となります。
+Intlayer v9へようこそ！このメジャーリリースは、主要なi18nライブラリ（`react-i18next`、`next-intl`、`vue-i18n`など）向けの**互換アダプターパッケージ**により、Intlayerへの移行パスを簡素化し、**コレクション**、**バリアント**といったリッチなコンテンツ構造のサポートを追加することで、大きな節目となります。
 
 ## 目次
 
@@ -41,8 +40,10 @@ Intlayer v9へようこそ！このメジャーリリースは、主要なi18n
 - `@intlayer/i18next`
 - `@intlayer/react-i18next`
 - `@intlayer/next-intl`
+- `@intlayer/react-intl`
 - `@intlayer/next-i18next`
 - `@intlayer/vue-i18n`
+- `@intlayer/lingui`
 
 例えば、次のように変更するだけです。
 
@@ -100,7 +101,7 @@ export default defineConfig({
 
 ---
 
-## 機能仕様：コレクション、バリアント、動的レコード
+## 機能仕様：コレクション、バリアント
 
 Intlayer v9は、静的なキーと値のオブジェクトを超えて拡張され、辞書がエンドツーエンドで完全に型付けされた動的なレイアウト構造を宣言できるようになりました。
 
@@ -144,6 +145,8 @@ const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: s
 
 A/Bテスト、季節限定ヘッダー、機能フラグ、またはカスタムランディングページを提供します。
 
+#### 文字列バリアント（例：A/Bテスト）
+
 ```ts fileName="hero.content.ts"
 import { t, type Dictionary } from "intlayer";
 
@@ -167,16 +170,14 @@ export default {
 const banner = useIntlayer("hero-banner", { variant: "black_friday" });
 ```
 
-### 3. 動的レコード
-
-クエリIDを介してランタイムで動的にエントリがロードされる辞書を定義します。
+#### オブジェクトバリアント（例：動的レコード）
 
 ```ts fileName="product.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 export default {
   key: "product-copy",
-  meta: {
+  variant: {
     id: "prod_123",
     category: "books",
   },
@@ -229,7 +230,7 @@ export default defineConfig({
 });
 ```
 
-- **Compiler**: `compiler.enabled` が設定され、`compiler.output` パスが構成されている場合、自動的に有効化されます。`intlayerCompiler()` を個別に登録する必要はなくなりました。
+- **Compiler**: `compiler.enabled` が `true` に設定され、`compiler.output` パスが構成されている場合、自動的に有効化されます。`intlayerCompiler()` を個別に登録する必要はなくなりました。
 - **Proxy**: 新しい `routing.enableProxy` オプション（デフォルトは `true`）に基づいて自動的に有効化されます。開発、プレビュー、本番 SSR でロケール検出・リダイレクト・書き換えミドルウェアを配線します。`intlayerProxy()` を個別に登録する必要はなくなりました。
 
 ### `routing.enableProxy` オプション
@@ -252,6 +253,27 @@ export default config;
 
 ---
 
+## コンパイラはデフォルトで無効
+
+Intlayer v9 以降、**コンパイラはデフォルトで無効になっています**（`compiler.enabled` のデフォルト値は `false` になりました）。`.content.ts` ファイルのビルド時抽出を有効にするには、設定で `compiler.enabled: true` を指定します。
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  compiler: {
+    enabled: true, // デフォルト: false — v9 以降、コンパイラを有効にするために必要
+    output: ({ fileName }) => `./${fileName}.content.ts`,
+  },
+};
+
+export default config;
+```
+
+コンパイラが無効の場合、Intlayer はビルド時の抽出ステップをスキップし、すでに宣言済みの辞書に依存します。バンドラープラグイン（`@intlayer/swc`、`@intlayer/babel`、または `intlayer()` Vite プラグイン）にコンテンツを自動的に抽出させたい場合にのみ有効にしてください。
+
+---
+
 ## React Native: 単一パッケージでのインポート
 
 React Native または Expo アプリでは、`react-intlayer` と `react-native-intlayer` の両方を使い分ける必要がなくなりました。`react-native-intlayer` パッケージは現在、**`react-intlayer` の完全な API を再エクスポート**しており（フック、ユーティリティ、および `/format`、`/html`、`/markdown` サブパス）、その `IntlayerProvider` は自動的に React Native のポリフィルを適用します。
@@ -278,13 +300,14 @@ npm install intlayer react-native-intlayer
 
 v8からアップグレードする場合、v9には破壊的変更は含まれていません。ただし、主な変更点は次のとおりです。
 
+- **コンパイラはデフォルトで無効**: `compiler.enabled` のデフォルト値は `false` になりました。`.content.ts` ファイルのビルド時抽出に依存している場合は、`intlayer.config.ts` で `compiler.enabled: true` を設定してください。
 - **ロケールと方言**: 外部i18n依存関係を使用している場合、設定またはバンドラーセットアップにそれぞれの互換アダプタープラグインを追加して、インポートを自動的に書き換えるようにします。
-- **カスタムセレクター**: `useIntlayer`を呼び出す際、2番目のパラメーターは`{ locale, item, variant, id }`を含むオプションオブジェクトのために予約されるようになりました。以前にロケール文字列を直接渡していた場合でも引き続き可能ですが、高度な選択にはオプションオブジェクトの使用が推奨されます。
+- **カスタムセレクター**: `useIntlayer`を呼び出す際、2番目のパラメーターは`{ locale, item, variant }`を含むオプションオブジェクトのために予約されるようになりました。以前にロケール文字列を直接渡していた場合でも引き続き可能ですが、高度な選択にはオプションオブジェクトの使用が推奨されます。
 
 ---
 
 ## 役立つリンク
 
 - [互換アダプターパッケージガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compat/index.md)
-- [動的辞書 - コレクション、バリアント、動的レコード](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/index.md)
+- [動的辞書 - コレクション、バリアント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/index.md)
 - [設定リファレンス](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)

package/docs/ko/dynamic_dictionaries/index.md

@@ -1,13 +1,12 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
+updatedAt: 2026-06-26
 title: 동적 사전
-description: 유연하고 런타임 구동 방식의 i18n 콘텐츠를 구축하기 위한 Intlayer의 세 가지 동적 사전 기능 — 컬렉션, 변형, 동적 레코드 — 개요.
+description: Intlayer의 동적 사전 기능(컬렉션 및 변형) 개요 — 유연하고 런타임 기반의 i18n 콘텐츠를 구축하기 위한 것입니다.
 keywords:
   - 동적 사전
   - 컬렉션
   - 변형
-  - 동적 레코드
   - Intlayer
   - 국제화
 slugs:
@@ -18,31 +17,38 @@ history:
   - version: 9.0.0
     date: 2026-06-12
     changes: "동적 사전 기능 출시"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "동적 레코드를 변형으로 통합 — 이제 `variant`는 문자열 또는 객체를 허용합니다"
 author: aymericzip
 ---
 
 # 동적 사전
 
-Intlayer는 키당 하나의 정적 사전을 정의하는 것을 넘어선 콘텐츠를 표현하기 위한 세 가지 메커니즘을 지원합니다. 각각은 콘텐츠 파일 내의 **최상위 메타데이터 필드**를 통해 선언되며, 래퍼 함수는 필요하지 않습니다.
+Intlayer는 키당 단일 정적 사전을 넘어서는 콘텐츠를 표현하기 위한 두 가지 메커니즘을 지원합니다. 각각은 콘텐츠 파일의 **최상위 메타데이터 필드**를 통해 선언되며, 래퍼 함수가 필요하지 않습니다.
 
-| 기능                                                                                                                 | 메타데이터 필드   | `useIntlayer`에서의 선택기 |
-| -------------------------------------------------------------------------------------------------------------------- | ----------------- | -------------------------- |
-| [컬렉션](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/collections.md)          | `item: N`         | `{ item: N }`              |
-| [변형](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/variants.md)               | `variant: "name"` | `{ variant: "name" }`      |
-| [동적 레코드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/dynamic_content.md) | `meta: { id, … }` | `{ id, … }`                |
+| 기능                                                                                                        | 메타데이터 필드                           | `useIntlayer`의 셀렉터                            |
+| ----------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------- |
+| [컬렉션](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/collections.md) | `item: N`                                 | `{ item: N }`                                     |
+| [변형](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/variants.md)      | `variant: "name"` _또는_ `variant: { … }` | `{ variant: "name" }` _또는_ `{ variant: { … } }` |
 
-세 메커니즘 모두 로케일 인수와 결합하며, `importMode`를 통한 선택적 / 지연 로딩을 지원합니다.
+둘 다 locale 인수와 결합되며 `importMode`를 통한 선택적 / 지연 로딩을 지원합니다.
 
-## 언제 무엇을 사용해야 하는가
+## 무엇을 언제 사용할지
 
-- **컬렉션** — 별도의 파일로 관리되는 정렬된 항목 목록(FAQ 항목, 블로그 게시물, 상품 등).
-- **변형** — A/B 테스트, 시즌별 배너 또는 기능 플래그(feature flags)를 위한 이름이 지정된 대체 콘텐츠.
-- **동적 레코드** — 불투명한 ID를 사용하여 런타임에 검색되는 콘텐츠(CMS 레코드, 사용자별 텍스트 등).
+- **컬렉션** — 별도의 파일에서 관리되는 정렬된 항목 목록(FAQ 항목, 블로그 게시물, 제품).
+- **변형** — 이름이 지정되었거나 구조화된 콘텐츠 대안:
+  - A/B 테스트, 시즌 배너 또는 기능 플래그를 위한 **문자열** 변형;
+  - CMS 레코드, 사용자별 콘텐츠, 또는 필드 집합으로 주소가 지정되는 모든 콘텐츠를 위한 **객체** 변형(이전의 "동적 레코드").
 
-## 선택기 우선순위 해결
+> 이전 버전은 레코드 키 기반 콘텐츠를 위해 별도의 `meta` 필드를 제공했습니다. 이는 `variant`로 통합되었습니다. `meta`를 사용하는 대신 `variant`에 **객체**를 전달하세요.
 
-하나의 사전에 여러 선택기가 있는 경우 해결 순서는 다음과 같습니다:
+## 셀렉터 모호성 해소
+
+키는 두 차원을 동시에 선언할 수 있습니다(예: 각 항목에 변형이 있는 컬렉션). 이는 다음 순서로 해결됩니다:
 
 ```
-variant → meta → item
+variant → item
 ```
+
+따라서 variant × item 키에서 `{ variant: "promo" }`는 모든 promo 항목을 배열로 반환하고, `{ item: 2 }`를 추가하면 단일 항목으로 좁혀집니다.