@vtex/faststore 0.0.1

package/dist/docs/variant-selector.md

@@ -0,0 +1,450 @@
+# VariantSelector
+
+**Category:** commerce
+**Purpose:** Renders the variant (SKU) swatches of a PDP — one selectable group per option axis (Color, Size, Material, …). Derives the axes and per-value availability from the product's variants and publishes the shopper's selection so sibling blocks (gallery, pricing, buy button) update in place.
+
+---
+
+## Visual cues (how to identify in an image)
+
+Use these signals to detect that a VariantSelector block is present. Position on the page is irrelevant for detection — it can appear anywhere, in any orientation. The image is the source of truth for layout.
+
+A VariantSelector block contains any combination of:
+
+- One or more **rows of small selectable options** representing a single product's variants — not a list of different products.
+- An **axis label** like *"Color: Red"* / *"Tamanho: M"* — the option name followed by the currently selected value (often the value is bold).
+- **Color circles/squares** — solid color chips, one per color.
+- **Size/label pills or boxes** — short text like *P / M / G*, *38 / 39 / 40*, *Único*.
+- **Thumbnail swatches** — small product images, one per variant (image swatches).
+- A **radio-dot list** — a control circle with a dot when selected, beside a value label (common for voltage/material lists).
+- A **selected swatch** with a visible highlight (ring, border, or filled background).
+- **Greyed-out / struck-through / dimmed** options — unavailable (out-of-stock) variants, shown but not selectable.
+- A **"+N more"** pill/button at the end of a row when there are more swatches than fit.
+
+If the image shows **any one** of the above for a single product, use `VariantSelectorRoot` with one `VariantSelectorOptionGroup` per axis visible — composing inside each a title, the swatch list whose look matches the image, and (when a "+N more" pill shows) an overflow trigger (see Composition).
+
+---
+
+## When to use
+
+- PDP variant/SKU selection (canonical use) — Color, Size, Material, or any option axis the product defines.
+
+## When NOT to use
+
+- Product image gallery / thumbnail strip → use `ProductGalleryRoot`. Those thumbnails switch the *displayed image*, not the *selected variant*.
+- Quantity steppers → not a variant axis.
+- PLP/search facets and filters (Color/Size filters across many products) → those are search facets, not this component.
+- Tabbed content or generic option pickers unrelated to a product's variants → use `TabsRoot` / a plain control.
+
+---
+
+## Composition
+
+`VariantSelectorRoot` is the only entry point. Inside it add **one `VariantSelectorOptionGroup` per option axis** visible in the image, in top-to-bottom visual order. The group is a **container**: it binds the axis (and owns the collapse/expand state) but draws nothing itself — you compose its contents from these parts, in any order:
+
+- `VariantSelectorGroupTitle` — the **axis name** (`Color`). Omit it when the design shows no axis label.
+- `VariantSelectorGroupValue` — the **live selected value** (`Red`), a separate placeable part. Compose it beside the title (usually both inside a `Container`) to render the common `Color: Red` header; the colon separator and the value weight are **styling** on the `data-fs-*` hooks, not props. Omit it when the design shows only the axis name (e.g. above a radio list, whose selected dot already conveys the choice).
+- **One swatch list** — the radiogroup of swatches. **The look is chosen by which list component you reference — there is no `displayMode` prop.** Pick one per group:
+  - `VariantSelectorColorSwatches` — solid color chips.
+  - `VariantSelectorImageSwatches` — variant thumbnail swatches.
+  - `VariantSelectorLabelSwatches` — text pills/boxes (sizes, materials, voltages).
+  - `VariantSelectorRadioSwatches` — a radio-dot list (control circle + dot + label).
+  - `VariantSelectorSwatches` — **auto**: infers color/image/label from the option data when you cannot tell, or want the data to decide. It never infers radio.
+- `VariantSelectorOverflow` — the "+N more" trigger. Add it when the design shows the pill (or whenever a long swatch row should collapse to fit its width); it renders nothing when the swatches already fit. Composing it is what opts the group into automatic space-based collapse — there is no cap prop.
+
+The individual swatches (`VariantSelectorOption`) are **rendered automatically** by the swatch list from the product's option values — you do **not** place `VariantSelectorOption` nodes in the schema yourself.
+
+```text
+VariantSelectorRoot
+├── VariantSelectorOptionGroup          (optionIndex=0)   ← one group (container) per axis, in visual order
+│   ├── Container                       ← "Color: Red" header (layout by composition)
+│   │   ├── VariantSelectorGroupTitle   "Color"  → data-fs-variant-selector-group-title
+│   │   └── VariantSelectorGroupValue   "Red"    → data-fs-variant-selector-group-value (aria-hidden echo)
+│   ├── VariantSelectorColorSwatches    ← the look = the swatch-list component
+│   │   └── VariantSelectorOption       (auto-rendered per value; rarely authored by hand)
+│   └── VariantSelectorOverflow         (add to collapse a row that overflows its width)
+└── VariantSelectorOptionGroup          (optionIndex=1)
+    ├── VariantSelectorGroupTitle       "Size"   (no value part → shows the axis name alone)
+    └── VariantSelectorLabelSwatches
+        └── VariantSelectorOption        (auto-rendered per value)
+```
+
+Child order reflects visual order. Because the parts read the axis and selection from the group via context, they can be placed freely — e.g. the title in an accordion header and the swatch list in its panel. Showing the selected value is **composition** — place a `VariantSelectorGroupValue` (usually beside the title in a `Container`) or leave it out — not a boolean prop.
+
+**Composition rules:**
+
+- Every `VariantSelectorOptionGroup` must be a descendant of `VariantSelectorRoot` (it throws otherwise).
+- `VariantSelectorGroupTitle`, `VariantSelectorGroupValue`, the swatch list, `VariantSelectorOverflow`, and `VariantSelectorOption` must each be a descendant of a `VariantSelectorOptionGroup` (they throw otherwise) — and prefer letting the swatch list render its options automatically rather than authoring `VariantSelectorOption`.
+- **Put exactly one swatch list inside each group** — its component is the look. Add a `VariantSelectorGroupTitle` unless the design shows no label, a `VariantSelectorGroupValue` beside it when the header echoes the selection (`Color: Red`), and a `VariantSelectorOverflow` only when a "+N more" pill is visible.
+- **Bind the group to its axis — prefer `optionIndex`.** `optionIndex` is the zero-based axis position in the product's option order. Because you place one group per axis in top-to-bottom visual order, the index you assign lines up with the product's options by construction — this is the reliable binding when authoring from an image. Use `optionName` only when you actually know the exact catalog `ProductOption.name` (e.g. you were given the product's option list): it is matched ignoring case and accents only — the runtime does **no** plural or translation guessing, so a label read off the image (`"Voltagem"`, `"Cor"`, `"Sizes"`) will not match a differing catalog name (`"Voltagens"`, `"Color"`, `"Size"`). You may set both: a successful `optionName` match wins, and `optionIndex` is the fallback — so passing `optionIndex` as a safety net is recommended whenever you also pass `optionName`.
+- A group that resolves no axis renders nothing and logs a dev warning listing the available axes (index and name) — check that warning if a group is missing.
+- The `VariantSelectorGroupTitle` defaults to the catalog axis name, not the `optionName` you pass — so a tolerant or positional match still shows the correct localized label. To reproduce a design's prompt copy (e.g. `"Selecione a cor"`) set the title's `label` prop; it only changes the displayed axis name, never the axis binding. The separator (a colon) is styling, not part of the `label`.
+- One group per axis — do not create two groups for the same axis.
+
+---
+
+## Components
+
+### VariantSelectorRoot
+
+Root container. Derives the option axes, per-value availability, and active selection from the product, provides them via context, and publishes the selected variant id for sibling blocks. Renders a `<div data-fs-variant-selector>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `selectedVariantId` | string | — | Pre-selects the viewed SKU before the shopper interacts (the page supplies it, since `productBySlug` resolves to the product group). The shopper's in-page selection wins once a swatch is activated; this prop is only the initial fallback. Usually bound by the page, not authored by hand. |
+
+**Data:** declares `fragment VariantSelectorData on Query` (`productBySlug.options` + `productBySlug.variants`). The compiler merges it into the page query — no explicit `dataSources` entry needed.
+
+### VariantSelectorOptionGroup
+
+The **container** for one option axis. Binds the axis, owns the collapse/expand state, and renders whatever you compose inside it (a title, a swatch list, an overflow trigger). Renders a `<div data-fs-variant-selector-group>` carrying `data-fs-variant-selector-group-overflow` (`"true" | "false"`). Draws no title or swatches by itself.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `optionIndex` | number | — | Zero-based axis position, in the product's option order. **Preferred binding when authoring from an image** — you place groups in visual order, which matches the product's option order. Robust when the on-image label differs from the catalog name. With both set, an `optionName` match wins and this is the fallback |
+| `optionName` | string | — | Exact catalog option name to bind (e.g. `"Color"`). Matched ignoring case and accents only — **no** plural or translation guessing. Use only when you know the real catalog name; otherwise bind by `optionIndex` |
+| `reserveTriggerSpace` | boolean | `false` | Reserve space for the `+N more` trigger in the fit. Off by default: the trigger is a sibling of the swatch list (its own space), so the swatches use the full row width. Turn it **on** only when the trigger is styled **inline at the end of the swatch row** (content-sized) so it stays on the line — its measured width is then subtracted from the space available to the swatches |
+
+> **Space-based overflow (no cap prop).** When a `VariantSelectorOverflow` is composed inside the group, the group measures its swatch row and keeps only the swatches that fit on one line, collapsing the rest behind the `+N more` trigger; the visible count re-fits on resize. The currently selected swatch is always kept visible. Without a composed `VariantSelectorOverflow`, the group never collapses (every swatch shows). There is no cap prop — space is the sole driver. By default the trigger sits in its own space (a separate line/slot), so the swatches use the full row width; set `reserveTriggerSpace` when the design places the trigger inline at the end of the swatch row.
+>
+> **The collapse assumes a horizontal-row swatch list.** The measurement sums the swatches' widths and reads `column-gap`, so it only makes sense when the swatch list flows as a horizontal (wrapping) row — the common case. Do **not** compose a `VariantSelectorOverflow` on a list styled as a vertical stack (`flex-col`), where a width-based fit does not apply and would collapse swatches that actually fit; a column list should simply show all its swatches.
+
+### VariantSelectorGroupTitle
+
+The **axis name** inside a `VariantSelectorOptionGroup` (catalog axis name, or your `label`). Reads the axis from group context, so it stays correct wherever it is placed (including an accordion header). Renders a `<span data-fs-variant-selector-group-title>` — it labels the *radiogroup* (via `aria-labelledby`), not a single control, so it is a `<span>`, not a `<label>`. It renders the name only; compose a `VariantSelectorGroupValue` beside it to echo the selection.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `label` | string | — | Overrides the displayed **axis name**. Defaults to the catalog axis name (`"Color"`). Set it to match a design's prompt copy (e.g. `"Selecione a cor"`). Does **not** change which axis the group binds to (that is still the group's `optionName`/`optionIndex`). Any separator (a trailing colon) is **styling** on the title's `data-fs-*` hook, not part of `label` |
+
+### VariantSelectorGroupValue
+
+The **live selected value** of a `VariantSelectorOptionGroup` (`"Red"`), as its own placeable part. Compose it beside a `VariantSelectorGroupTitle` — typically both inside a `Container` — to render the common `Color: Red` header. Reads the selection from group context, so it stays live wherever it is placed. Renders a `<span data-fs-variant-selector-group-value aria-hidden="true">`. **Decorative:** the selection is announced per option, so this echo never participates in the radiogroup's accessible name (which stays the axis name). Omit it when the design shows only the axis name (e.g. above a radio list). No editor props.
+
+### Swatch lists — `VariantSelectorColorSwatches` / `VariantSelectorImageSwatches` / `VariantSelectorLabelSwatches` / `VariantSelectorRadioSwatches` / `VariantSelectorSwatches`
+
+The radiogroup of swatches inside a `VariantSelectorOptionGroup`. Renders a `<div data-fs-variant-selector-group-list>` carrying `data-fs-variant-selector-group-mode` (`"color" | "image" | "label" | "radio"`) for styling, and one swatch (`VariantSelectorOption`) per option value **automatically**. **They differ only in the swatch they render** — choose the component, don't pass a mode. They take no binding props (the axis comes from the group). Use **exactly one** per group.
+
+- **`VariantSelectorColorSwatches`** — solid color chips. A value with no hex color (hex has no catalog source — see below) degrades **per value** to its variant image, then to the value label, so a chip is never empty. Safe to choose from a design's colored swatches even when you can't supply hex.
+- **`VariantSelectorImageSwatches`** — variant thumbnail swatches; degrades to the value label when a value has no image.
+- **`VariantSelectorLabelSwatches`** — text pills/boxes. Use for sizes, materials, voltages, and any axis that should read as text.
+- **`VariantSelectorRadioSwatches`** — a radio-dot list: a control circle showing a dot when selected, beside the value label. Use when the design shows a radio list (common for voltage/material). Typically show only the `VariantSelectorGroupTitle` (axis name) and omit the `VariantSelectorGroupValue`, since the selected dot already conveys the choice.
+- **`VariantSelectorSwatches`** (auto) — infers `color` (every value has a hex color), `image` (values resolve to differing variant images), else `label`. It **never** infers radio. Reach for an explicit list when you know the look and don't want the data to decide.
+
+> **Prefer an explicit swatch list over auto for non-color axes.** Swatch images are derived per variant, so the auto `VariantSelectorSwatches` can resolve to `image` for an axis (e.g. Size) whose values happen to map to differing variant photos. When an axis should read as text, choose `VariantSelectorLabelSwatches` rather than relying on auto. (Auto never resolves to radio — choose `VariantSelectorRadioSwatches` for a radio list.)
+>
+> **Shape is styling, not a component.** Swatch shape (square vs circle vs pill), size, and the selected-state highlight are expressed via the `data-fs-*` hooks in `style`. The component chooses *what content* a swatch shows; CSS chooses *how it looks*. A square radio control is `VariantSelectorRadioSwatches` + `rounded-none` on `data-fs-variant-selector-option-control` — not a different component.
+>
+> **`VariantSelectorColorSwatches` is safe even without a hex source.** Per-value hex (`hexColor`) has no Core Graph origin — it only reaches the component when a host injects it through context. A color list whose values carry no hex no longer renders blank chips: it falls back **per value** to the variant image, and then to the value label. So choosing the color list from a design's colored swatches is safe — worst case the chip reads as a thumbnail or text rather than an empty square.
+>
+> **The rendered group count follows the live product's axes, not the design.** A product may expose fewer axes — or in a different order — than the image showed, so do not assume every axis in the screenshot exists at runtime. A group bound by position (`optionIndex`) attaches to whatever axis lands at that index; with `VariantSelectorLabelSwatches` that is harmless (a mismatch just shows different text), but with `VariantSelectorImageSwatches`/`VariantSelectorColorSwatches` it is visible — an image list paints the wrong axis's variant photo, e.g. a size axis rendered as clothing photos when the catalog carries only `Tamanho`. So when a design mixes swatch looks across axes, prefer binding the group of a non-label list by `optionName` — set only when you know the exact catalog `ProductOption.name`, never the on-image label (the runtime does no plural/translation guessing) — so the look pairs with its intended axis. This is a trade-off, not an absolute: a name that does not match renders nothing, which is acceptable for an image/color list (a phantom photo-swatch is worse) but not for the only label list, whose group should keep an `optionIndex` fallback so a lone axis still renders as readable text.
+
+### VariantSelectorOverflow
+
+The "+N more" trigger inside a `VariantSelectorOptionGroup`. Composing it opts the group into automatic space-based collapse: the group measures the swatch row and, when the swatches do not fit on one line, collapses the extras behind this trigger, which expands them in place when clicked (the count is `data-fs-variant-selector-overflow-count`). Renders a `<button data-fs-variant-selector-overflow-trigger>`, or nothing while the swatches fit. Author it after the swatch list; omit it when the row should never collapse. No editor props.
+
+### VariantSelectorOption
+
+A single swatch within a swatch list. Reflects checked/disabled state and activates the matching variant on selection. Rendered automatically by the swatch list from the axis values — usually not authored directly in a schema. Renders the swatch per its list: a text label (`data-fs-variant-selector-option-label`), `<img data-fs-variant-selector-option-image>`, a color chip `data-fs-variant-selector-option-color`, or — in a radio list — a control circle (`data-fs-variant-selector-option-control`) holding the dot (`data-fs-variant-selector-option-indicator`, shown when checked) beside the value label (`data-fs-variant-selector-option-label`). The value text carries `data-fs-variant-selector-option-label` in every list (label, image/color fallback, and radio), so "an option's value text" has one selector everywhere. In a color list a value with no hex falls back to its variant image, then to the value label, so a swatch is never empty. No editor props.
+
+---
+
+## Canonical schema example
+
+A two-axis PDP variant selector as it would appear in a generated page schema — color chips for the first axis, text pills for the second. The color group shows the `Color: Red` header composed from a `Container` wrapping the axis-name title and the selected-value part; the size group shows the axis name alone:
+
+```json
+{
+  "variant-selector": {
+    "type": "VariantSelectorRoot",
+    "children": ["variant-color", "variant-size"]
+  },
+  "variant-color": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 0 },
+    "children": ["variant-color-header", "variant-color-swatches"]
+  },
+  "variant-color-header": {
+    "type": "Container",
+    "children": ["variant-color-title", "variant-color-value"],
+    "style": ["inline-flex", "items-center", "gap-[4px]", "[&_[data-fs-variant-selector-group-title]]:after:content-[':']", "[&_[data-fs-variant-selector-group-value]]:font-bold"]
+  },
+  "variant-color-title": { "type": "VariantSelectorGroupTitle" },
+  "variant-color-value": { "type": "VariantSelectorGroupValue" },
+  "variant-color-swatches": { "type": "VariantSelectorColorSwatches" },
+  "variant-size": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 1 },
+    "children": ["variant-size-title", "variant-size-swatches"]
+  },
+  "variant-size-title": { "type": "VariantSelectorGroupTitle" },
+  "variant-size-swatches": { "type": "VariantSelectorLabelSwatches" }
+}
+```
+
+> Groups bind by `optionIndex` in visual order (0 = first axis from the top). Add `"optionName"` only when you know the exact catalog name; the index stays as the safety net. The swatch look is the swatch-list `type` — no `displayMode` prop. The colon and value weight in the `Color: Red` header are **styling** on the `Container` (targeting the title/value hooks); showing the value at all is composition — include a `VariantSelectorGroupValue` or leave it out.
+
+### Custom axis-name label (design prompt copy)
+
+When the design labels the axis with prompt copy (`"Selecione a cor"`, `"Choose a size"`) instead of the bare catalog name, set `label` on the title. The axis still binds on the group (`optionIndex`/`optionName`); only the displayed axis name changes. The selected value stays a separate `VariantSelectorGroupValue`, and the colon between them is styling — so keep the colon **out** of `label`.
+
+```json
+{
+  "variant-color": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 0 },
+    "children": ["variant-color-header", "variant-color-swatches"]
+  },
+  "variant-color-header": {
+    "type": "Container",
+    "children": ["variant-color-title", "variant-color-value"],
+    "style": ["inline-flex", "items-center", "gap-[4px]", "[&_[data-fs-variant-selector-group-title]]:after:content-[':']", "[&_[data-fs-variant-selector-group-value]]:font-bold"]
+  },
+  "variant-color-title": {
+    "type": "VariantSelectorGroupTitle",
+    "props": { "label": "Selecione a cor" }
+  },
+  "variant-color-value": { "type": "VariantSelectorGroupValue" },
+  "variant-color-swatches": { "type": "VariantSelectorColorSwatches" }
+}
+```
+
+### Single-axis variant (only one axis visible in the image)
+
+```json
+{
+  "variant-selector": {
+    "type": "VariantSelectorRoot",
+    "children": ["variant-size"]
+  },
+  "variant-size": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 0 },
+    "children": ["variant-size-title", "variant-size-swatches"]
+  },
+  "variant-size-title": { "type": "VariantSelectorGroupTitle" },
+  "variant-size-swatches": { "type": "VariantSelectorLabelSwatches" }
+}
+```
+
+### Radio-dot variant (a stacked voltage list with the design's prompt copy)
+
+```json
+{
+  "variant-voltage": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 1 },
+    "children": ["variant-voltage-title", "variant-voltage-swatches"]
+  },
+  "variant-voltage-title": {
+    "type": "VariantSelectorGroupTitle",
+    "props": { "label": "Selecione a voltagem:" }
+  },
+  "variant-voltage-swatches": { "type": "VariantSelectorRadioSwatches" }
+}
+```
+
+> The radio dot already conveys the selection, so this group composes **only** the title (no `VariantSelectorGroupValue`) — the way to "not echo the value" is to leave the value part out, not a boolean prop.
+
+### Overflow variant ("+N more" pill visible on a long row)
+
+Add a `VariantSelectorOverflow` after the swatch list — composing it is what enables the collapse; the group measures the row and keeps only the swatches that fit, revealing the rest via the trigger. There is no cap prop:
+
+```json
+{
+  "variant-selector": {
+    "type": "VariantSelectorRoot",
+    "children": ["variant-size"]
+  },
+  "variant-size": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 0 },
+    "children": ["variant-size-title", "variant-size-swatches", "variant-size-overflow"]
+  },
+  "variant-size-title": { "type": "VariantSelectorGroupTitle" },
+  "variant-size-swatches": { "type": "VariantSelectorLabelSwatches" },
+  "variant-size-overflow": { "type": "VariantSelectorOverflow" }
+}
+```
+
+By default the trigger sits in its **own space** (a separate line/slot below the swatch row). To place it **inline at the end of the swatch row**, set `reserveTriggerSpace` on the group and style the trigger out of flow at the row's end (pin it with `absolute`); the reserved width keeps the last visible swatch clear of it. The style hooks live on the group, targeting the `data-fs-variant-selector-overflow-trigger` descendant:
+
+```json
+{
+  "variant-size": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 0, "reserveTriggerSpace": true },
+    "children": ["variant-size-swatches", "variant-size-overflow"],
+    "style": [
+      "relative",
+      "[&_[data-fs-variant-selector-group-list]]:flex",
+      "[&_[data-fs-variant-selector-group-list]]:flex-wrap",
+      "[&_[data-fs-variant-selector-group-list]]:gap-[8px]",
+      "[&_[data-fs-variant-selector-overflow-trigger]]:absolute",
+      "[&_[data-fs-variant-selector-overflow-trigger]]:right-0",
+      "[&_[data-fs-variant-selector-overflow-trigger]]:bottom-0"
+    ]
+  },
+  "variant-size-swatches": { "type": "VariantSelectorLabelSwatches" },
+  "variant-size-overflow": { "type": "VariantSelectorOverflow" }
+}
+```
+
+> A trigger that should flow **right after** the swatches (rather than pinned to the row's end) needs no `reserveTriggerSpace`: lay the group out as a flex row with a `flex-1` swatch list, and flexbox makes room for the trigger on its own.
+
+---
+
+## Common mistakes
+
+- **Inventing `SkuSelector`, `Swatch`, `VariantPicker`, `OptionSelector`.** The root is `VariantSelectorRoot`; each axis is a `VariantSelectorOptionGroup` holding a title and a swatch list.
+- **Passing a `displayMode` / `variant` / `type` / `mode` prop to pick the look.** There is no such prop. The swatch look is the swatch-list component you reference: `VariantSelectorColorSwatches`, `VariantSelectorImageSwatches`, `VariantSelectorLabelSwatches`, `VariantSelectorRadioSwatches`, or `VariantSelectorSwatches` (auto). Picking the wrong component, not a wrong prop value, is the failure mode to avoid.
+- **Leaving the group empty, or with no swatch list.** `VariantSelectorOptionGroup` is a container that draws nothing itself — it needs a swatch list inside it (plus, usually, a `VariantSelectorGroupTitle`). Put **exactly one** swatch list per group; two lists for the same axis is wrong.
+- **Putting the title/swatch list/overflow on the old `VariantSelectorColorGroup` etc.** Those merged components no longer exist. Use `VariantSelectorOptionGroup` as the container and compose the parts inside it.
+- **Inventing a `shape`/`variant` prop, or a component per shape (`square`, `circle`, `pill`).** Shape, size, and the selected-state highlight are styling — express them with the `data-fs-*` hooks in `style`. The component chooses *what content* a swatch shows; CSS chooses *how it looks*. A square radio control is `VariantSelectorRadioSwatches` + `rounded-none` on `data-fs-variant-selector-option-control`.
+- **Authoring a `VariantSelectorOption` per value.** The swatch list renders its options automatically from the product data — only compose `VariantSelectorRoot` + one group per axis, each holding a title and a swatch list.
+- **Putting a `VariantSelectorOptionGroup` outside `VariantSelectorRoot`, or a title/swatch list/overflow outside a group.** They read context and throw otherwise.
+- **One group with multiple axes, or two groups for the same axis.** Use exactly one group per distinct axis.
+- **Relying on auto (`VariantSelectorSwatches`) for a text axis.** Per-variant images can make auto resolve a Size axis to image (clothing photos instead of size pills). Choose `VariantSelectorLabelSwatches` when the axis should read as text. Auto also never picks radio — choose `VariantSelectorRadioSwatches` for a radio list.
+- **Putting `label` on the group.** `label` is a `VariantSelectorGroupTitle` prop. The group only takes `optionName`, `optionIndex`, and `reserveTriggerSpace`.
+- **Looking for a `showSelectedValue` prop to hide the selection.** There is none. The selected value is its own part (`VariantSelectorGroupValue`): to show `Color: Red`, compose a value beside the title (usually in a `Container`); to show only the axis name, leave the value out. The colon and value weight are styling on the `data-fs-*` hooks, never props or hard-coded text.
+- **Expecting the radiogroup's accessible name to be `Color: Red`.** It is the axis name alone (`Color`). The value is `aria-hidden` and the selection is announced per option, so the group name never churns on selection.
+- **Copying the on-image label into `optionName`.** The image label is a display hint; matching is case/accent-insensitive only — it does not guess plurals or translations (`"Voltagem"`≠`"Voltagens"`, `"Cor"`≠`"Color"`, `"Sizes"`≠`"Size"`). Bind with `optionIndex` (the group's visual position) and only add `optionName` when you know the exact catalog name. If you want the on-image prompt text (`"Selecione a cor:"`) shown, put it in the title's `label`, not `optionName`.
+- **Assuming every axis in the design renders, and letting an image/color list fall onto the wrong one.** The rendered group count follows the live product's axes, not the screenshot. A group bound only by `optionIndex` attaches to whatever axis sits at that index, so when the product exposes fewer/reordered axes an image list paints that axis's variant photo (sizes shown as clothing photos). Prefer binding the group of an image/color list by `optionName`; keep the `optionIndex` fallback on the label list's group, where a positional mismatch only swaps text.
+- **Using it for the image gallery thumbnails.** Those switch the displayed image only — use `ProductGalleryRoot`. VariantSelector changes the *selected variant* (which in turn refreshes the gallery).
+- **Using it for PLP/search Color/Size filters.** Those are search facets across many products, not a single product's variants.
+- **Passing variant data as props (`options`, `variants`, `value`).** The component reads from `$data` (the merged fragment); the only configuration props are `optionName`/`optionIndex`/`reserveTriggerSpace` on the group and `label` on the title.
+- **Wrapping `VariantSelectorRoot` on a non-PDP page.** It requires `productBySlug` in the page query context. Use only on routes that resolve a product.
+
+---
+
+## Styling
+
+Style `VariantSelectorRoot` as a vertical stack of axis groups. Each `VariantSelectorOptionGroup` styles its own header and lays its swatches out in a wrapping row; because the swatch list renders the swatches and the group is their common ancestor, per-swatch styling is expressed on the **group's** `style` via descendant arbitrary variants targeting the `data-fs-*` hooks (e.g. `[&_[data-fs-variant-selector-option]]:rounded-full`). Read swatch shape, size, and the selected-state highlight off the image. All swatch lists expose the same `data-fs-*` hooks, so the style sets below apply regardless of which list you chose.
+
+**The `Color: Red` header is styling, not baked in.** The title (`data-fs-variant-selector-group-title`) renders only the axis name and the value (`data-fs-variant-selector-group-value`) renders only the selection — the **separator, weight, and spacing** between them are yours to set. Put the pair in a row (a `Container`, or the group itself) and express:
+
+- **separator** (the colon): `[&_[data-fs-variant-selector-group-title]]:after:content-[':']` — or an em-dash, or nothing.
+- **value weight:** `[&_[data-fs-variant-selector-group-value]]:font-bold`.
+- **spacing / layout:** `inline-flex items-center gap-[4px]` on the row.
+
+A design wanting no colon, the value beside the swatches, or no value at all just changes the composition/styling.
+
+| Component | What you style | Plausible classes |
+|---|---|---|
+| `VariantSelectorRoot` | Stacks the axis groups | `flex flex-col gap-[24px]` |
+| `VariantSelectorOptionGroup` | The axis: header + wrapping swatch row, plus per-swatch look via descendant selectors | `flex flex-col gap-[8px]` · `[&_[data-fs-variant-selector-group-title]]:text-[13px] [&_[data-fs-variant-selector-group-title]]:text-[#666]` · `[&_[data-fs-variant-selector-group-list]]:flex [&_[data-fs-variant-selector-group-list]]:flex-wrap [&_[data-fs-variant-selector-group-list]]:gap-[8px]` |
+| `VariantSelectorGroupTitle` / `VariantSelectorGroupValue` | The `axis-name : value` header, laid out in a row (Container or the group) | `inline-flex items-center gap-[4px]` · `[&_[data-fs-variant-selector-group-title]]:after:content-[':']` · `[&_[data-fs-variant-selector-group-value]]:font-bold` |
+
+Per-swatch descendant variants you place on the group's `style` (pick the set matching the swatch list inside it):
+
+- **`VariantSelectorLabelSwatches` (label/box swatches):** `[&_[data-fs-variant-selector-option]]:rounded-[6px] [&_[data-fs-variant-selector-option]]:border [&_[data-fs-variant-selector-option]]:border-[#ccc] [&_[data-fs-variant-selector-option]]:px-[16px] [&_[data-fs-variant-selector-option]]:py-[8px] [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:border-[#111] [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:bg-[#111] [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:text-white [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-disabled=true]]:opacity-40 [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-disabled=true]]:line-through`
+- **`VariantSelectorColorSwatches` (color chips):** `[&_[data-fs-variant-selector-option-color]]:h-[28px] [&_[data-fs-variant-selector-option-color]]:w-[28px] [&_[data-fs-variant-selector-option-color]]:rounded-full [&_[data-fs-variant-selector-option-color]]:[background-color:var(--fs-variant-selector-option-color-bkg-color)] [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:ring-2 [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:ring-[#111]`
+- **`VariantSelectorImageSwatches` (image swatches):** `[&_[data-fs-variant-selector-option-image]]:block [&_[data-fs-variant-selector-option-image]]:h-[64px] [&_[data-fs-variant-selector-option-image]]:w-[64px] [&_[data-fs-variant-selector-option-image]]:object-cover [&_[data-fs-variant-selector-option]]:rounded-[6px] [&_[data-fs-variant-selector-option]]:border-2 [&_[data-fs-variant-selector-option]]:border-transparent [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:border-[#111]`
+- **`VariantSelectorRadioSwatches` (radio-dot):** lay each option out as a row and draw the ring + dot on the control/indicator hooks. For a square control swap `rounded-full` → `rounded-none` — no component change. `[&_[data-fs-variant-selector-option]]:flex [&_[data-fs-variant-selector-option]]:items-center [&_[data-fs-variant-selector-option]]:gap-[8px] [&_[data-fs-variant-selector-option-control]]:grid [&_[data-fs-variant-selector-option-control]]:place-items-center [&_[data-fs-variant-selector-option-control]]:h-[18px] [&_[data-fs-variant-selector-option-control]]:w-[18px] [&_[data-fs-variant-selector-option-control]]:rounded-full [&_[data-fs-variant-selector-option-control]]:border [&_[data-fs-variant-selector-option-control]]:border-[#8A8A8A] [&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]_[data-fs-variant-selector-option-control]]:border-[#C8102E] [&_[data-fs-variant-selector-option-indicator]]:h-[10px] [&_[data-fs-variant-selector-option-indicator]]:w-[10px] [&_[data-fs-variant-selector-option-indicator]]:rounded-full [&_[data-fs-variant-selector-option-indicator]]:bg-[#C8102E]`
+- **`VariantSelectorOverflow` ("+N more" trigger):** `[&_[data-fs-variant-selector-overflow-trigger]]:rounded-[6px] [&_[data-fs-variant-selector-overflow-trigger]]:border [&_[data-fs-variant-selector-overflow-trigger]]:border-dashed [&_[data-fs-variant-selector-overflow-trigger]]:px-[16px] [&_[data-fs-variant-selector-overflow-trigger]]:py-[8px] [&_[data-fs-variant-selector-overflow-trigger]]:text-[13px]`
+
+Styled example (color + label-size; the color row composes a `VariantSelectorOverflow`, so it collapses to fit its width):
+
+```json
+{
+  "variant-selector": {
+    "type": "VariantSelectorRoot",
+    "children": ["variant-color", "variant-size"],
+    "style": ["flex", "flex-col", "gap-[24px]"]
+  },
+  "variant-color": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 0 },
+    "children": ["variant-color-title", "variant-color-swatches", "variant-color-overflow"],
+    "style": [
+      "flex", "flex-col", "gap-[8px]",
+      "[&_[data-fs-variant-selector-group-title]]:text-[13px]",
+      "[&_[data-fs-variant-selector-group-list]]:flex",
+      "[&_[data-fs-variant-selector-group-list]]:flex-wrap",
+      "[&_[data-fs-variant-selector-group-list]]:gap-[8px]",
+      "[&_[data-fs-variant-selector-option-color]]:h-[28px]",
+      "[&_[data-fs-variant-selector-option-color]]:w-[28px]",
+      "[&_[data-fs-variant-selector-option-color]]:rounded-full",
+      "[&_[data-fs-variant-selector-option-color]]:[background-color:var(--fs-variant-selector-option-color-bkg-color)]",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:ring-2",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:ring-[#111]"
+    ]
+  },
+  "variant-color-title": { "type": "VariantSelectorGroupTitle" },
+  "variant-color-swatches": { "type": "VariantSelectorColorSwatches" },
+  "variant-color-overflow": { "type": "VariantSelectorOverflow" },
+  "variant-size": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 1 },
+    "children": ["variant-size-title", "variant-size-swatches"],
+    "style": [
+      "flex", "flex-col", "gap-[8px]",
+      "[&_[data-fs-variant-selector-group-list]]:flex",
+      "[&_[data-fs-variant-selector-group-list]]:flex-wrap",
+      "[&_[data-fs-variant-selector-group-list]]:gap-[8px]",
+      "[&_[data-fs-variant-selector-option]]:rounded-[6px]",
+      "[&_[data-fs-variant-selector-option]]:border",
+      "[&_[data-fs-variant-selector-option]]:border-[#ccc]",
+      "[&_[data-fs-variant-selector-option]]:px-[16px]",
+      "[&_[data-fs-variant-selector-option]]:py-[8px]",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:border-[#111]",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:bg-[#111]",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]]:text-white",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-disabled=true]]:opacity-40",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-disabled=true]]:line-through"
+    ]
+  },
+  "variant-size-title": { "type": "VariantSelectorGroupTitle" },
+  "variant-size-swatches": { "type": "VariantSelectorLabelSwatches" }
+}
+```
+
+The per-swatch style lives on the group (the swatches' common ancestor); the title, swatch list, and overflow children carry no `style` of their own unless you need to tweak one in isolation.
+
+Radio-dot example (a stacked voltage list with the design's prompt copy):
+
+```json
+{
+  "variant-voltage": {
+    "type": "VariantSelectorOptionGroup",
+    "props": { "optionIndex": 1 },
+    "children": ["variant-voltage-title", "variant-voltage-swatches"],
+    "style": [
+      "flex", "flex-col", "gap-[8px]",
+      "[&_[data-fs-variant-selector-group-list]]:flex",
+      "[&_[data-fs-variant-selector-group-list]]:flex-col",
+      "[&_[data-fs-variant-selector-group-list]]:gap-[12px]",
+      "[&_[data-fs-variant-selector-option]]:flex",
+      "[&_[data-fs-variant-selector-option]]:items-center",
+      "[&_[data-fs-variant-selector-option]]:gap-[8px]",
+      "[&_[data-fs-variant-selector-option]]:cursor-pointer",
+      "[&_[data-fs-variant-selector-option-control]]:grid",
+      "[&_[data-fs-variant-selector-option-control]]:place-items-center",
+      "[&_[data-fs-variant-selector-option-control]]:h-[18px]",
+      "[&_[data-fs-variant-selector-option-control]]:w-[18px]",
+      "[&_[data-fs-variant-selector-option-control]]:rounded-full",
+      "[&_[data-fs-variant-selector-option-control]]:border",
+      "[&_[data-fs-variant-selector-option-control]]:border-[#8A8A8A]",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-checked=true]_[data-fs-variant-selector-option-control]]:border-[#C8102E]",
+      "[&_[data-fs-variant-selector-option-indicator]]:h-[10px]",
+      "[&_[data-fs-variant-selector-option-indicator]]:w-[10px]",
+      "[&_[data-fs-variant-selector-option-indicator]]:rounded-full",
+      "[&_[data-fs-variant-selector-option-indicator]]:bg-[#C8102E]",
+      "[&_[data-fs-variant-selector-option][data-fs-variant-selector-option-disabled=true]]:opacity-40"
+    ]
+  },
+  "variant-voltage-title": {
+    "type": "VariantSelectorGroupTitle",
+    "props": { "label": "Selecione a voltagem:" }
+  },
+  "variant-voltage-swatches": { "type": "VariantSelectorRadioSwatches" }
+}
+```
+
+---
+
+## Related
+
+- [[product-gallery]] — the product media gallery. It *consumes* the variant the selector publishes: picking a swatch refreshes the gallery image in place. Distinct block; do not nest.
+- [[pricing]] — the product offer block; updates to reflect the selected variant. Distinct block; do not nest.
+- [[buy-button]] — the add-to-cart action for the selected variant. Distinct block; do not nest.

package/dist/graphql/define-subgraph.d.ts

@@ -0,0 +1,12 @@
+import { SubgraphDefinition } from "./types.js";
+//#region src/graphql/define-subgraph.d.ts
+/**
+ * The single authoring primitive: a validating identity. `defineSubgraph`
+ * does not build a schema (see `buildSubgraph`); it hands the declaration
+ * back unchanged so the same object can be inspected by the runner, printed
+ * by `printSubgraphSdl`, and built by `buildSubgraph` — one declaration,
+ * three consumers.
+ */
+export declare function defineSubgraph(definition: SubgraphDefinition): SubgraphDefinition;
+//#endregion
+//# sourceMappingURL=define-subgraph.d.ts.map

package/dist/graphql/define-subgraph.js

@@ -0,0 +1,15 @@
+//#region src/graphql/define-subgraph.ts
+/**
+* The single authoring primitive: a validating identity. `defineSubgraph`
+* does not build a schema (see `buildSubgraph`); it hands the declaration
+* back unchanged so the same object can be inspected by the runner, printed
+* by `printSubgraphSdl`, and built by `buildSubgraph` — one declaration,
+* three consumers.
+*/
+function defineSubgraph(definition) {
+	return definition;
+}
+//#endregion
+export { defineSubgraph };
+
+//# sourceMappingURL=define-subgraph.js.map

package/dist/graphql/define-subgraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-subgraph.js","names":[],"sources":["../../src/graphql/define-subgraph.ts"],"sourcesContent":["import type { SubgraphDefinition } from './types';\n\n/**\n * The single authoring primitive: a validating identity. `defineSubgraph`\n * does not build a schema (see `buildSubgraph`); it hands the declaration\n * back unchanged so the same object can be inspected by the runner, printed\n * by `printSubgraphSdl`, and built by `buildSubgraph` — one declaration,\n * three consumers.\n */\nexport function defineSubgraph(definition: SubgraphDefinition): SubgraphDefinition {\n  return definition;\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,eAAe,YAAoD;CACjF,OAAO;AACT"}

package/dist/graphql/gql.d.ts

@@ -0,0 +1,10 @@
+//#region src/graphql/gql.d.ts
+/**
+ * Identity template literal tag: returns the interpolated string unchanged.
+ * `typeDefs` is a plain SDL string (see `SubgraphDefinition`); `gql` exists
+ * purely so editor tooling (GraphQL syntax highlighting, embedded-language
+ * plugins) recognizes the literal. It performs no parsing.
+ */
+export declare function gql(literals: TemplateStringsArray, ...args: unknown[]): string;
+//#endregion
+//# sourceMappingURL=gql.d.ts.map

package/dist/graphql/gql.js

@@ -0,0 +1,16 @@
+//#region src/graphql/gql.ts
+/**
+* Identity template literal tag: returns the interpolated string unchanged.
+* `typeDefs` is a plain SDL string (see `SubgraphDefinition`); `gql` exists
+* purely so editor tooling (GraphQL syntax highlighting, embedded-language
+* plugins) recognizes the literal. It performs no parsing.
+*/
+function gql(literals, ...args) {
+	let result = literals[0] ?? "";
+	for (let i = 0; i < args.length; i++) result += String(args[i]) + (literals[i + 1] ?? "");
+	return result;
+}
+//#endregion
+export { gql };
+
+//# sourceMappingURL=gql.js.map

package/dist/graphql/gql.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gql.js","names":[],"sources":["../../src/graphql/gql.ts"],"sourcesContent":["/**\n * Identity template literal tag: returns the interpolated string unchanged.\n * `typeDefs` is a plain SDL string (see `SubgraphDefinition`); `gql` exists\n * purely so editor tooling (GraphQL syntax highlighting, embedded-language\n * plugins) recognizes the literal. It performs no parsing.\n */\nexport function gql(literals: TemplateStringsArray, ...args: unknown[]): string {\n  let result = literals[0] ?? '';\n\n  for (let i = 0; i < args.length; i++) {\n    result += String(args[i]) + (literals[i + 1] ?? '');\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,IAAI,UAAgC,GAAG,MAAyB;CAC9E,IAAI,SAAS,SAAS,MAAM;CAE5B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAC/B,UAAU,OAAO,KAAK,EAAE,KAAK,SAAS,IAAI,MAAM;CAGlD,OAAO;AACT"}

package/dist/graphql/types.d.ts

@@ -0,0 +1,88 @@
+import { GraphQLFieldResolver, GraphQLScalarType } from "graphql";
+//#region src/graphql/types.d.ts
+/**
+ * The extension's entire resolver security surface — exactly five keys, and
+ * nothing more (see ADR-0003). `buildContext` assembles it from the inbound
+ * subgraph request plus the declared secrets; the Seam A key-set test pins
+ * that a resolver sees these five keys and no raw request state.
+ */
+export type SubgraphContext = {
+  /** Canonical `x-vtex-account`, verbatim; `''` when absent (router-bypass). */
+  account: string;
+  /** Canonical `x-vtex-workspace`, verbatim; `''` when absent. */
+  workspace: string;
+  /**
+   * The curated allow-list of forwarded `x-vtex-*` headers (locale, segment,
+   * session) — never `authorization` (that is `token`) or the tenant pair
+   * (that is `account`/`workspace`). Values keep Node's `string | string[]`
+   * shape; absent allow-listed headers are omitted.
+   */
+  headers: Record<string, string | string[]>;
+  /** Forwarded `authorization` header, verbatim (no `Bearer`-stripping); `''` when absent. */
+  token: string;
+  /**
+   * The declared secret names present in the environment, mapped to their
+   * values. Undeclared and declared-but-unset names are both absent (open
+   * record — declared-names typing holds at runtime, not in TS generics).
+   */
+  secrets: Record<string, string | undefined>;
+};
+/**
+ * The same resolver map shape `buildSubgraphSchema` accepts, with the context an author's
+ * resolver actually receives as the default.
+ *
+ * `TContext` defaults to `SubgraphContext` rather than being fixed to `unknown`, because under
+ * `strictFunctionTypes` an `unknown` context makes the third argument contravariant, and that
+ * rejects the very annotation this type is meant to support:
+ * `(_parent, _args, ctx: SubgraphContext) => …` did not compile. Naming it also lets an
+ * unannotated `ctx` infer instead of widening to `unknown`.
+ *
+ * The runner passes `SubgraphResolvers<unknown>` where it hands the map to
+ * `buildSubgraphSchema`, whose own signature is context-agnostic (`GraphQLResolverMap<any>`).
+ *
+ * Restated locally, rather than imported from `@apollo/subgraph`'s `GraphQLResolverMap<unknown>`,
+ * so `./graphql` stays a zero-import island with no `@apollo/subgraph` dependency.
+ */
+export type SubgraphResolvers<TContext = SubgraphContext> = {
+  [typeName: string]: {
+    [fieldName: string]: GraphQLFieldResolver<any, TContext> | {
+      requires?: string;
+      resolve?: GraphQLFieldResolver<any, TContext>;
+      subscribe?: GraphQLFieldResolver<any, TContext>;
+    };
+  } | GraphQLScalarType | {
+    [enumValue: string]: string | number;
+  };
+};
+/**
+ * The single primitive an extension author calls. `typeDefs` is plain SDL:
+ * the author writes `@key`/`@external` on entities they extend; the SDK
+ * injects the federation `@link` preamble, generates each entity's
+ * `__resolveReference`, and prefixes every name the extension contributes
+ * with `vendor_` (see `applyVendorPrefix` in `./vendor-prefix`).
+ */
+export type SubgraphDefinition = {
+  /**
+   * Required. The publisher's VTEX vendor; validated `^[a-z][a-z0-9]*$`.
+   * Prefixes every name this subgraph contributes (entity-extension fields,
+   * root fields, and declared types) — applied by the SDK, never typed by
+   * the author. See ADR-0001.
+   */
+  vendor: string;
+  /** Defaults to the package name; the subgraph name used at compose time. */
+  name?: string;
+  /** Plain SDL, authored with bare names. The SDK applies the vendor prefix. */
+  typeDefs: string;
+  /** Core entities this subgraph extends (e.g. `['Product']`); must be on the bundled allow-list. */
+  extends: string[];
+  /** Author resolvers keyed by bare names; the SDK remaps keys to the prefixed names and merges __resolveReference. */
+  resolvers: SubgraphResolvers;
+  /**
+   * Env-var names this extension declares it needs. Their values populate
+   * `ctx.secrets` (read from `process.env`); undeclared names never reach a
+   * resolver. Optional — an extension with no secrets omits it. See ADR-0003.
+   */
+  secrets?: string[];
+};
+//#endregion
+//# sourceMappingURL=types.d.ts.map

package/dist/graphql.d.ts

@@ -0,0 +1,4 @@
+import { SubgraphContext, SubgraphDefinition, SubgraphResolvers } from "./graphql/types.js";
+import { defineSubgraph } from "./graphql/define-subgraph.js";
+import { gql } from "./graphql/gql.js";
+export { type SubgraphContext, type SubgraphDefinition, type SubgraphResolvers, defineSubgraph, gql };