docs(record): add bilingual usage guides

packages/record/docs/en-US/examples/record-list.mdx

@@ -0,0 +1,77 @@
+---
+title: Record list example
+description: Render a contextual record list with reusable field components.
+order: 30
+toc:
+  - id: define-field-components
+    title: Define field components
+  - id: render-the-list
+    title: Render the list
+  - id: iterator-callback
+    title: Use an iterator callback
+  - id: add-separators
+    title: Add separators
+---
+
+## Define field components {#define-field-components}
+
+Field components depend only on record context, so the same fields work in detail pages, lists, and nested records.
+
+```tsx
+function ProductName() {
+  const name = useFieldValue<Product, "name">({ source: "name" })
+  return <strong>{name}</strong>
+}
+
+function ProductPrice() {
+  const price = useFieldValue<Product, "price">({ source: "price" })
+  return <span>${price}</span>
+}
+```
+
+## Render the list {#render-the-list}
+
+Pass shared children to the iterator. It provides a fresh context for every record.
+
+```tsx
+<ul>
+  <RecordsIterator data={products}>
+    <li>
+      <ProductName />
+      <ProductPrice />
+    </li>
+  </RecordsIterator>
+</ul>
+```
+
+The iterator returns `null` when `data` is empty or undefined, or when neither children nor iterator is provided. The surrounding data view remains responsible for loading, error, and empty states.
+
+## Use an iterator callback {#iterator-callback}
+
+Simple views can use the callback argument directly. The callback is still rendered inside the matching record context, so nested components can keep using the hooks.
+
+```tsx
+<RecordsIterator
+  data={products}
+  iterator={(product, index) => (
+    <article>
+      <span>#{index + 1}</span>
+      <ProductName />
+      <button onClick={() => addToCart(product.id)}>Add</button>
+    </article>
+  )}
+/>
+```
+
+## Add separators {#add-separators}
+
+Use `separator` to insert content between adjacent records. It renders neither before the first record nor after the last one. Its argument is the index of the record following the separator, and the separator remains outside that record's `RecordProvider`.
+
+```tsx
+<RecordsIterator
+  data={products}
+  separator={(index) => <hr aria-label={`Separator ${index}`} />}
+>
+  <ProductCard />
+</RecordsIterator>
+```