### Quick Start: Coupon Form and Applied List

Source: https://docs.ohmyetch.com/woo/component-families/coupons

Quick start example showing the coupon form and applied coupon list with a remove button slot.

```svelte
<OmeWooCouponForm />  

  

<OmeWooCouponAppliedList>  

{#slot default}  

  <OmeWooCouponRemoveButton />  

{/slot}  

</OmeWooCouponAppliedList>  

```

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

### Serialized Multi-Value Meta authoring setup

Source: https://docs.ohmyetch.com/docs/facets/argument-modes.md

Configuration example for the Serialized Multi-Value Meta mode. Authored option values must match the stored string values, not visible labels.

```text
argument_mode = serialized_meta
serialized_meta_argument.meta_key = mk_meta_types
option values = omv, ff, veg
```

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

### Facet Target Configuration Example

Source: https://docs.ohmyetch.com/docs/facets/component-families/facet-target.md

Text-based example illustrating how to configure a Facet Target and a Search Facet with a shared target ID.

```text
Target ID: article-results
Facet Target:
- target = article-results
- loop slot = WP Query loop
- fallback slot = "No posts found."

Search Facet:
- target = article-results
- default query argument = search
```

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

### Install Devkit Dependencies

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/install-and-prepare.md

Installs the devkit's dependencies using Bun. Run this after extracting the ZIP.

```sh
bun install
```

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

### Session start sequence: etch_recall_project_memory, etch_get_status, etch_get_document_tree

Source: https://docs.ohmyetch.com/oh-my-idetch/mcp/daily-workflow

Run these three commands at the start of every session to inherit previous sessions' learning. The comment indicates to record a brief and digest first, then check availability and unsaved changes, then get the current document.

```shell

etch_recall_project_memory     → digest + record brief first, always  

etch_get_status                → availability, unsaved changes  

etch_get_document_tree         → current document  

```

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

### Meta Filter: Example Data and Authoring Setup

Source: https://docs.ohmyetch.com/facets/recipes

Shows example post meta data and the corresponding authoring setup for a meta filter. Use meta mode when the filtered value lives in post meta. The meta query E2E suite verifies exact matches, numeric ranges, char values, bool values, LIKE, NOT LIKE, IN, NOT IN, BETWEEN, and NOT BETWEEN.

```text
Meta key: facet_price  

Values: 10, 25, 50, 75, 100  
```

```text
argument_mode = meta  

meta_key = facet_price  

meta_compare = BETWEEN  

meta_type = numeric  

option value = 25,75  
```

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

### /new-project

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/first-project.md

Sends the /new-project command to the agent to start the onboarding workflow.

```text
/new-project
```

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

### Unzip package structure and install runtime with bun install

Source: https://docs.ohmyetch.com/oh-my-idetch/mcp/install

Shows the unzipped package layout and the command to install the locked runtime from the package root. Requires Bun 1.3.14 or newer; the ZIP contains no connector code, which is installed locally under its own license terms.

```text
etch-agent/  

├── README.md  

├── AGENTS.md  

├── CHANGELOG.md  

├── onboarding.md  

├── LICENSE  

└── mcp/  

    ├── server.js            ← the MCP server your harness launches  

    ├── package.json         ← locked runtime manifest  

    ├── bun.lock  

    └── skills/              ← core and user agent skills  


```

```bash
bun install --cwd mcp --frozen-lockfile --no-save  


```

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

### Serialized Multi-Value Meta Option Setup

Source: https://docs.ohmyetch.com/llms-facets.txt

Example option setup for the serialized multi-value meta filter: a label for human-readable text and a value matching the stored option key.

```text
Option label: Vegetarian
Option value: veg
```

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

### Select Facet configuration example

Source: https://docs.ohmyetch.com/facets/component-families/select-facet

Example configuration for the Select Facet: target products, default argument mode, facet_key category_name, single selection mode, and an option with value shoes and label Shoes.

```text
Select Facet:  

- target = products  

- argument_mode = default  

- facet_key = category_name  

- selection_mode = single  

  

Option:  

- value = shoes  

- label = Shoes  

```

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

### Map Facet Example Configuration (text)

Source: https://docs.ohmyetch.com/docs/facets/component-families/map-facet.md

Example configuration for Map Facet, Facet Target, and Map POI. Uses target ID 'stores', with metadata keys store_lat and store_lng.

```text
Map Facet:
- target = stores
- lat_meta_key = store_lat
- lng_meta_key = store_lng

Facet Target:
- target = stores
- used_with_map = true

Map POI inside loop:
- value = current post ID or slug
- lat = current item store_lat
- lng = current item store_lng
```

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

### SearchSelect Facet Example

Source: https://docs.ohmyetch.com/docs/facets/component-families/search-select-facet.md

Example configuration for a SearchSelect facet targeting posts with a placeholder and an option with value and label.

```text
SearchSelect Facet:
- target = posts
- argument_mode = default
- facet_key = name
- placeholder = Search by slug

Option:
- value = beta-bar
- label = Beta Bar Post
```

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

### Create project with project:create

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/first-project

Creates a new project with the given slug. This is part of the manual setup flow.

```bash
bun run project:create -- my-site  
```

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

### Start every session with recall commands

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/mcp/daily-workflow.md

Run these three commands at the start of every session to inherit previous session context. The first command recalls the project memory digest and brief, the second checks availability and unsaved changes, and the third retrieves the current document tree.

```text
etch_recall_project_memory     → digest + record brief first, always
etch_get_status                → availability, unsaved changes
etch_get_document_tree         → current document
```

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

### Checkbox List Facet example configuration

Source: https://docs.ohmyetch.com/docs/facets/component-families/checkbox-list-facet.md

Example configuration for a Checkbox List Facet with target 'posts', default argument mode, and facet key 'name', along with two options.

```text
Checkbox List Facet:
- target = posts
- argument_mode = default
- facet_key = name

Options:
- beta-bar
- gamma-baz
```

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

### Install locked runtime with bun install

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/mcp/install.md

Installs the locked runtime from the package root. Requires Bun 1.3.14 or newer. Installs the connector, ws, and zod locally inside mcp/node_modules/.

```sh
bun install --cwd mcp --frozen-lockfile --no-save
```

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

### Quick Start: OmeWooCheckoutProvider and OmeWooCheckoutForm

Source: https://docs.ohmyetch.com/woo/component-families/checkout-shell

Quick start markup for the checkout shell. Wrap the checkout form and its fields in OmeWooCheckoutProvider, then place the form with billing, shipping, payment, terms, notices, and the place order button inside its default slot.

```markup
<OmeWooCheckoutProvider>  

{#slot default}  

  <OmeWooCheckoutForm>  

    {#slot default}  

      <OmeWooBillingAddressForm />  

      <OmeWooShippingAddressForm />  

      <OmeWooPaymentMethodSelector />  

      <OmeWooTermsCheckbox />  

      <OmeWooCheckoutNotices />  

      <OmeWooPlaceOrderButton />  

    {/slot}  

  </OmeWooCheckoutForm>  

{/slot}  

</OmeWooCheckoutProvider>  
```

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

### Purchase draft stepper usage example

Source: https://docs.ohmyetch.com/llms-woo.txt

Example demonstrating how to configure the component with counter-stepper presentation suitable for integration within a ProductProvider for variable products, showcasing typical attribute values for behavior, quantity constraints, and accessibility labels.

```JSX
```jsx
<OmeWooAddToBasketButton
  behavior='{{"mode":"counter","prosentasjon":"stepper","trigger":"form_submit"}}'
  quantity='{{"default":"1","minimum":"1",maximum":"","step":"1"}}'
  content='{{"decrement_content":"−","increments_content":"+"}}'
  accessibility='{{"input_watermark_label":"Quantity","decrement_watermark_label":"Decrease quantity","increments_watermark_label":"Increase quantity"}}'
/>
```
```

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

### Variable product purchase form with ProductProvider

Source: https://docs.ohmyetch.com/woo/component-families/product-purchase

Quick start example for a variable product purchase form. Uses ProductProvider as the structural container, with ProductImage, ProductMedia, ProductPrice, ProductSku, ProductAvailability, ProductDescription, ProductCartQuantity, and AddToCartForm. Includes attribute selectors, variation reset button, add-to-cart button with counter behavior, and buy-now button. Use {item.*} instead of {this.*} when inside a product loop.

```html
<OmeWooProductProvider product="{this.omewoo}">  

{#slot default}  

  <OmeWooProductImage media_id="{this.omewoo.media.image.id}" />  

  <OmeWooProductMedia media="{this.omewoo.media.gallery}">  

    {#slot default}  

      <OmeWooProductImage media_id="{media.id}" maximum_size="woocommerce_gallery_thumbnail" />  

    {/slot}  

  </OmeWooProductMedia>  

  

  <OmeWooProductPrice content="{this.omewoo.price.html}" />  

  <OmeWooProductSku content="{this.omewoo.product.sku}" />  

  <OmeWooProductAvailability content="{this.omewoo.purchase.availabilityHtml}" />  

  <OmeWooProductDescription content="{this.omewoo.description.shortHtml}" />  

  

  <OmeWooProductCartQuantity />  

  

  <OmeWooAddToCartForm product='{{"product_id":"{this.id}","product_type":"{this.omewoo.product.type}","variants":{this.omewoo.variants}}}'>  

    {#slot default}  

      {#loop this.omewoo.attributes as attribute}  

        <OmeWooAttributeSelector target='{{"attribute":{attribute}}}' />  

      {/loop}  

      <OmeWooVariationResetButton content='{{"label":"Clear selections"}}' />  

      <OmeWooAddToCartButton behavior='{{"mode":"counter","counter_presentation":"stepper","trigger":"form_submit"}}' />  

      <OmeWooBuyNowButton content='{{"label":"Buy now"}}' />  

    {/slot}  

  </OmeWooAddToCartForm>  

{/slot}  

</OmeWooProductProvider>  
```

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

### Install locked runtime with Bun

Source: https://docs.ohmyetch.com/llms-oh-my-idetch.txt

Installs the connector (`@digital-gravy/etch-connector`), `ws`, and `zod` locally inside `mcp/node_modules/`. Requires Bun 1.3.14 or newer.

```sh
bun install --cwd mcp --frozen-lockfile --no-save

```

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

### Install PHPStan dependencies

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/troubleshooting.md

Run the exact Composer command from the error to install missing PHPStan binary.

```sh
composer install --working-dir=projects/<slug>
```

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

### Check and sync project manually

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/first-project

Runs the first check and sync for the project. These commands are part of the manual setup flow.

```bash
bun run project:check -- --project my-site  

bun run localwp:sync -- --project my-site  
```

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

### Shipping method selector JSX example

Source: https://docs.ohmyetch.com/docs/woo/component-families/shipping-selector.md

Quick start example for the OmeWooShippingMethodSelector component. Use this on the cart page or checkout page to let the customer choose a shipping rate. The ui.mode is set to 'button-radio' with an aria label, and content.show_price is true with a price separator.

```jsx
<OmeWooShippingMethodSelector
  ui='{{"mode":"button-radio","aria_label":"Choose a shipping method"}}'
  content='{{"show_price":true,"price_separator":" - "}}'
/>
```

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

### Account provider with every endpoint

Source: https://docs.ohmyetch.com/woo/flows/my-account-page

Example of the OmeWooAccountProvider component with slots for auth, dashboard, and orders. Use this as a starting point for composing the account page.

```svelte
<OmeWooAccountProvider>  

{#slot auth}  

  <OmeWooAccountNotices />  

  <OmeWooAccountLoginForm />  

  <OmeWooAccountRegisterForm />  

  <OmeWooAccountLostPasswordForm />  

  <OmeWooAccountResetPasswordForm />  

{/slot}  

{#slot dashboard}  

  <OmeWooAccountGreeting />  

  <OmeWooLogoutLink />  

  <OmeWooAccountNotices />  

  <OmeWooAccountNavigation />  

{/slot}  

{#slot orders}  

  <OmeWooAccountNavigation />  

  <OmeWooAccountOrders />  

{/slot}  

</OmeWooAccountProvider>  


```

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

### Inspect readiness and capabilities

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/first-project.md

Inspects project readiness and installed capabilities.

```sh
bun run localwp:doctor -- --project my-site
bun run localwp:capabilities -- --project my-site
```

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

### URL State Serialization Examples

Source: https://docs.ohmyetch.com/facets/how-facets-work

Examples of serialized facet state in URLs, where keys are determined by the facet clause type and specific configuration options.

```text
ome[products][category_name]=shoes

ome[products][meta_value:price]=50

ome[products][tax_query:facet_color]=red

ome[products][acf_relationship:facet_related_posts]=123

ome[products][geo_bbox]=40.5,-74.3,40.9,-73.7
```

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

### Mapped Bundle Option Example

Source: https://docs.ohmyetch.com/facets/recipes

Example option for a mapped bundle facet that applies several query clauses. The label is 'News + High priority' with category and priority mappings.

```plaintext
Label: News + High priority  

category mapping: category_name = facets-e2e-news  

priority mapping: facet_priority = high  

```

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

### Mapped bundle option example

Source: https://docs.ohmyetch.com/docs/facets/recipes.md

Use mapped bundle when one option applies several query clauses. The example option maps category and priority, and the parent facet defines how those mapping keys expand into query arguments.

```text
Label: News + High priority
category mapping: category_name = facets-e2e-news
priority mapping: facet_priority = high
```

```text
target_multiple_query_arguments = true
query_argument_mappings:
- mapping_key = category, argument_mode = default, facet_key = category_name
- mapping_key = priority, argument_mode = meta, meta_key = facet_priority, meta_compare = =, meta_type = char
```

```text
used_with_multiple_arguments = true
query_value_mappings:
- mapping_key = category, value = facets-e2e-news
- mapping_key = priority, value = high
```

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

### Account provider with the core endpoints

Source: https://docs.ohmyetch.com/llms-woo.txt

Example showing how to compose the account provider with slots for authentication, dashboard, and orders endpoints.

```APIDOC
## OmeWooAccountProvider

### Description
Account area shell that owns one slot per account endpoint and switches between them. Slots not composed render nothing for that endpoint.

### Usage
```jsx
<OmeWooAccountProvider>
  {#slot auth}
    <OmeWooAccountNotices />
    <OmeWooAccountLoginForm />
  {/slot}
  {#slot dashboard}
    <OmeWooAccountGreeting />
    <OmeWooAccountNotices />
    <OmeWooAccountNavigation />
  {/slot}
  {#slot orders}
    <OmeWooAccountNavigation />
    <OmeWooAccountOrders />
  {/slot}
</OmeWooAccountProvider>
```

### Slots
- **auth** - Slot for the authentication endpoint (sign in and registration).
- **dashboard** - Slot for the dashboard endpoint.
- **orders** - Slot for the orders endpoint.

### Notes
Slots you do not compose render nothing for that endpoint. Start with the endpoints you need and add the rest later.
```

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

### Basic dropdown menu with OmeNavigationMenu

Source: https://docs.ohmyetch.com/ui-components/navigation-menu

Creates a navigation menu with a 'Products' trigger that opens a dropdown containing a link to '/shop'. The trigger is set to open on click and shows an arrow. Use this as a starting point for a simple navigation menu.

```html
<OmeNavigationMenu identity='{{"menuId":"primary-nav"}}'>  

{#slot default}  

  <OmeNavigationMenuList>  

    {#slot default}  

      <OmeNavigationMenuItem>  

        {#slot default}  

          <OmeNavigationMenuTrigger settings='{{"showArrow":true,"triggerAction":"click"}}'>  

            {#slot default}Products{/slot}  

          </OmeNavigationMenuTrigger>  

          <OmeNavigationMenuContent>  

            {#slot default}  

              <a href="/shop">Shop all products</a>  

            {/slot}  

          </OmeNavigationMenuContent>  

        {/slot}  

      </OmeNavigationMenuItem>  

  

      <OmeNavigationMenuItem>  

        {#slot default}  

          <a href="/about">About</a>  

        {/slot}  

      </OmeNavigationMenuItem>  

    {/slot}  

  </OmeNavigationMenuList>  

{/slot}  

</OmeNavigationMenu>  


```

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

### Meta Filter Authoring Setup

Source: https://docs.ohmyetch.com/llms-facets.txt

Authoring setup for the meta filter: sets argument_mode to meta, specifies the meta key, comparison type, and option value range.

```text
argument_mode = meta
meta_key = facet_price
meta_compare = BETWEEN
meta_type = numeric
option value = 25,75
```

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

### Multi-Argument Search Configuration

Source: https://docs.ohmyetch.com/docs/facets/component-families/search-facet.md

Example configuration for multi-argument search. When target_multiple_query_arguments is true, the input type becomes query_bundle and the typed value is copied into every row in query_argument_mappings.

```text
target_multiple_query_arguments = true
query_argument_relation = OR
query_argument_mappings:
- native-search -> default search
- priority -> meta facet_priority LIKE char
```

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

### Simple product readouts with OmeWooProductProvider

Source: https://docs.ohmyetch.com/docs/woo/component-families/product-purchase.md

JSX example showing how to render price, SKU, availability, and description readouts inside an OmeWooProductProvider. For variable products, attribute selection updates these readouts before the 'ome-woo:variation-selection-changed' event is dispatched.

```jsx
<OmeWooProductProvider product="{this.omewoo}" styling='{{"class":"product-summary"}}'>
  {#slot default}
    <OmeWooProductPrice content="{this.omewoo.price.html}" />
    <OmeWooProductSku content="{this.omewoo.product.sku}" />
    <OmeWooProductAvailability content="{this.omewoo.purchase.availabilityHtml}" />
    <OmeWooProductDescription content="{this.omewoo.description.html}" />
  {/slot}
</OmeWooProductProvider>
```

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

### WP-CLI via devkit wrapper

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/daily-workflow.md

Use WP-CLI through the devkit wrapper to run commands like plugin list and option get home.

```sh
bun run localwp:wp -- --project <slug> -- plugin list
```

```sh
bun run localwp:wp -- --project <slug> -- option get home
```

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

### Purchase Draft Stepper Example

Source: https://docs.ohmyetch.com/woo/component-families/product-purchase

Example of the AddToCartButton configured as a stepper for quantity selection. Use this inside AddToCartForm and ProductProvider for variable products. The stepper updates the purchase draft without sending Store API requests until the Add action is activated.

```html
<OmeWooAddToCartButton  

behavior='{{"mode":"counter","counter_presentation":"stepper","trigger":"form_submit"}}'  

quantity='{{"default":"1","min":"1","max":"","step":"1"}}'  

content='{{"decrement_content":"−","increment_content":"+"}}'  

accessibility='{{"input_aria_label":"Quantity","decrement_aria_label":"Decrease quantity","increment_aria_label":"Increase quantity"}}'  

/>  
```

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

### Desktop menu with animated and full-width settings

Source: https://docs.ohmyetch.com/docs/ui-components/navigation-menu.md

Desktop menu with animated and full-width settings. The fullWidthTargetSelector is set to ".site-shell". This is the desktop part of the mobile drawer helper example.

```jsx
<!-- Desktop menu -->
<OmeNavigationMenu
  identity='{{"menuId":"primary-nav"}}'
  settings='{{"useAnimatedMenu":true,"useFullWidth":true,"fullWidthTargetSelector":".site-shell"}}'
>
  {#slot default}
    <OmeNavigationMenuList>
      {#slot default}
        <OmeNavigationMenuItem>
          {#slot default}
            <OmeNavigationMenuTrigger settings='{{"showArrow":true,"triggerAction":"click"}}'>
              {#slot default}Services{/slot}
            </OmeNavigationMenuTrigger>
            <OmeNavigationMenuContent>
              {#slot default}
                Design
                Development
              {/slot}
            </OmeNavigationMenuContent>
          {/slot}
        </OmeNavigationMenuItem>
      {/slot}
    </OmeNavigationMenuList>
  {/slot}
</OmeNavigationMenu>
```

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

### Verify after sync with bun run localwp:verify

Source: https://docs.ohmyetch.com/llms-oh-my-idetch.txt

Fast read-only runtime verification checking compiled entity/resource digests, recorded ownership, required active capabilities, and the installed Builder contract without browser E2E. Add --path / for a lightweight frontend availability check when part of the task.

```sh
bun run localwp:verify -- --project <slug>
```

```sh
bun run localwp:verify -- --project <slug> --path /
```

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

### Verify runtime after sync with localwp:verify

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/command-reference.md

Runs the fast read-only runtime verification after sync. The first command checks compiled entity/resource digests, recorded ownership, required active capabilities, and the installed Builder contract without browser E2E. The second adds a lightweight frontend availability check when it is part of the task.

```sh
bun run localwp:verify -- --project my-site
```

```sh
bun run localwp:verify -- --project my-site --path /
```

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

### List Local sites and bind project

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/troubleshooting

Use localwp:list to see available sites, then bind the project to the exact site name.

```bash
bun run localwp:list  

bun run localwp:bind -- --project <slug> --site "<Local site name>"  
```

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

### Billing and shipping address forms

Source: https://docs.ohmyetch.com/llms-woo.txt

Example usage of the OmeWooBillingAddressForm and OmeWooShippingAddressForm components inside the OmeWooCheckoutForm.

```APIDOC
## OmeWooBillingAddressForm / OmeWooShippingAddressForm

### Description
Renders Etch-authored billing and shipping address fields that follow Woo's field schema. The shipping form includes a different-shipping toggle.

### Usage
```jsx
<OmeWooCheckoutForm>
  {#slot default}
    <OmeWooBillingAddressForm />
    <OmeWooShippingAddressForm />
  {/slot}
</OmeWooCheckoutForm>
```

### Shared Field Props
- `content.legend` - Fieldset legend text.
- `content.show_legend` - Renders or hides the legend.
- `{field}.use_woo_defaults` - Uses Woo label, hint text, and validation copy.
- `{field}.label` - Custom label when Woo defaults are disabled.
- Field hint copy - Custom input hint copy when Woo defaults are disabled.
- `{field}.error_message` - Custom local validation copy when Woo defaults are disabled.
- `accessibility.aria_label` - Fieldset accessible label.
- `preview.state` - Builder preview state.

### Shipping Toggle Props (ShippingAddressForm only)
- `shipping_toggle.label` - Visible toggle label.
- `shipping_toggle.use_aria_label` - Uses a separate ARIA label when true.
- `shipping_toggle.aria_label` - Accessible toggle label when enabled.
- `shipping_toggle.preview_checked` - Builder preview checked state.

### Notes
- Billing includes email and phone fields; shipping does not.
- Runtime hides shipping fields until the toggle is checked.
```

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

### Run localwp:doctor

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/daily-workflow

Checks site readiness.

```bash
bun run localwp:doctor -- --project <slug>  
```

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

### Project directory structure

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/first-project

Directory structure of a created project. The template also ships composer.json, composer.lock, phpstan.neon.dist, and phpunit.xml.dist for project-local PHP tooling, plus runnable typed-builder examples under examples/builders/.

```text
projects/my-site/  

  project.json  

  AGENTS.project.md  

  oh-my-idetch.php  

  src/  

  cms/  

  examples/  

  tests/  

  tools/  

  var/  
```

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

### Single product template uses this

Source: https://docs.ohmyetch.com/docs/woo/data-context-and-dynamic-sources.md

Use `{this.*}` on a single product template. The example shows the same fields as the loop version but with `this` prefix, and includes an add-to-cart form with a counter button.

```text
Product title: {this.title}
Product price: {this.omewoo.price.text}
<OmeWooAddToCartForm product='{{"product_id":"{this.id}","product_type":"{this.omewoo.product.type}"}}'>
  {#slot default}
    <OmeWooAddToCartButton behavior='{{"mode":"counter","trigger":"form_submit"}}' />
  {/slot}
</OmeWooAddToCartForm>
```

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

### Run localwp:capabilities

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/daily-workflow

Inspects runtime capabilities.

```bash
bun run localwp:capabilities -- --project <slug>  
```

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

### Option Facet Mapped Bundle Example

Source: https://docs.ohmyetch.com/facets/argument-modes

Shows the parent mappings and an option's value mappings for the mapped bundle facet. The parent defines query_argument_mappings (category -> default category_name, priority -> meta facet_priority), and the option 'News + High priority' defines its values (category = facets-e2e-news, priority = high). An option is valid only when its value mappings match the parent mapping keys.

```text
Parent mappings:  

- category -> default category_name  

- priority -> meta facet_priority  

  

Option "News + High priority":  

- category = facets-e2e-news  

- priority = high  
```

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

### Quick Start: OmeWooPaymentMethodSelector in OmeWooCheckoutForm

Source: https://docs.ohmyetch.com/woo/component-families/payment-selector

Use this selector inside a checkout form to let the customer choose from supported Woo payment methods. The example sets ui.mode to 'select' with an aria label and shows payment method descriptions.

```html
<OmeWooCheckoutForm>  

{#slot default}  

  <OmeWooPaymentMethodSelector  

    ui='{{"mode":"select","aria_label":"Choose a payment method"}}'  

    content='{{"show_description":true}}'  

  />  

{/slot}  

</OmeWooCheckoutForm>  
```

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

### URL state examples for facet target

Source: https://docs.ohmyetch.com/docs/facets/how-facets-work.md

Shows the URL query parameter format for a facet target, covering category, meta value, taxonomy, ACF relationship, and geo bounding box clauses. The exact key depends on the clause type and mode-specific options.

```text
ome[products][category_name]=shoes
ome[products][meta_value:price]=50
ome[products][tax_query:facet_color]=red
ome[products][acf_relationship:facet_related_posts]=123
ome[products][geo_bbox]=40.5,-74.3,40.9,-73.7
```

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

### builder:help command

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/command-reference.md

Shows what an authoring capability allows. Use the --intent flag to specify the capability ID.

```sh
bun run builder:help -- --intent <capability-id>
```

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

### Create project with bun run project:create

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/first-project.md

Creates the project with the specified slug.

```sh
bun run project:create -- my-site
```

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

### Example selectedAttributesMap JSON

Source: https://docs.ohmyetch.com/docs/woo/woo-dynamic-data-tree.md

Example of the machine-readable selected value map. It uses normalized Store API keys, such as `attribute_pa_color` and `attribute_shoe-size`.

```json
{
  "attribute_pa_color": "blue",
  "attribute_shoe-size": "large"
}
```

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

### Initial project check and sync

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/first-project.md

Runs the first check and sync for the project.

```sh
bun run project:check -- --project my-site
bun run localwp:sync -- --project my-site
```

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

### Bind project to Local site with localwp:bind

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/first-project

Binds the project to a Local site by name. The site must exist in LocalWP.

```bash
bun run localwp:bind -- --project my-site --site "My Site"  
```

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

### List LocalWP sites with localwp:list

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/first-project

Lists available LocalWP sites. Use this to see the site name before binding a project.

```bash
bun run localwp:list  
```

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

### Meta Filter Example Data

Source: https://docs.ohmyetch.com/llms-facets.txt

Example data for the meta filter: a meta key named facet_price with numeric values 10, 25, 50, 75, and 100.

```text
Meta key: facet_price
Values: 10, 25, 50, 75, 100
```

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

### Example stored serialized meta value

Source: https://docs.ohmyetch.com/docs/facets/argument-modes.md

Shows an example of a PHP serialized array stored in a post meta field, as used by the Serialized Multi-Value Meta mode.

```text
a:3:{i:0;s:3:"omv";i:1;s:2:"ff";i:2;s:3:"veg";}
```

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

### Serialized Multi-Value Meta Example Data

Source: https://docs.ohmyetch.com/llms-facets.txt

Example stored post meta for a serialized multi-value meta filter: a meta key with a PHP serialized array of option keys.

```text
Meta key: mk_meta_types
Stored value: a:3:{i:0;s:3:"omv";i:1;s:2:"ff";i:2;s:3:"veg";}
Stored option values: omv, ff, veg
```

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

### ACF Relationship Filter Authoring Setup

Source: https://docs.ohmyetch.com/facets/recipes

Authoring setup for an ACF relationship filter. The relationship field must be stored on the posts being filtered; the facet does not reverse-resolve a relationship stored only on the related posts.

```plaintext
Filtered posts: Projects  

Related posts: People  

Relationship field on Projects: project_people  

Facet option value: numeric Person post ID  

```

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

### Output ZIP path for build:zip

Source: https://docs.ohmyetch.com/llms-oh-my-idetch.txt

The ZIP file is written to this path after running build:zip.

```text
projects/my-site/dist/oh-my-idetch-<version>.zip
```

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

### Check and sync workflow with bun run

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/first-project.md

The workflow creates and binds a project, then checks the initial runtime surface before the first sync.

```sh
bun run localwp:list
bun run project:create -- <slug>
bun run localwp:bind -- --project <slug> --site "<Local site name>"
bun run project:check -- --project <slug>
bun run localwp:sync -- --project <slug>
bun run localwp:doctor -- --project <slug>
bun run localwp:capabilities -- --project <slug>
```

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

### Project source path

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/daily-workflow

Work under this path in the project folder. The synced Local plugin copy is not the source of truth and is replaced by sync.

```text
projects/<slug>  
```

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

### Sync project to Local site with localwp:sync

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/command-reference.md

Copies checked runtime plugin files into the bound Local site. Sync output goes to the Local site plugin path.

```sh
bun run localwp:sync -- --project my-site
```

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

### Bind a project to a Local site with localwp:bind

Source: https://docs.ohmyetch.com/llms-oh-my-idetch.txt

Binds a project to one Local site. You can bind by site name, site ID, or web root. Binding writes the Local web root and target plugin path into projects/my-site/project.json.

```sh
bun run localwp:bind -- --project my-site --site "My Site"
```

```sh
bun run localwp:bind -- --project my-site --site-id <local-site-id>
```

```sh
bun run localwp:bind -- --project my-site --web-root "/Users/me/Local Sites/my-site/app/public"
```

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

### Purchase draft stepper JSX example

Source: https://docs.ohmyetch.com/docs/woo/component-families/product-purchase.md

Example of the AddToCartButton in counter mode with stepper presentation and form_submit trigger. Use inside AddToCartForm with a ProductProvider for variable products. The stepper updates a purchase draft without sending Store API requests until Add is activated.

```jsx
<OmeWooAddToCartButton
  behavior='{{"mode":"counter","counter_presentation":"stepper","trigger":"form_submit"}}'
  quantity='{{"default":"1","min":"1","max":"","step":"1"}}'
  content='{{"decrement_content":"−","increment_content":"+"}}'
  accessibility='{{"input_aria_label":"Quantity","decrement_aria_label":"Decrease quantity","increment_aria_label":"Increase quantity"}}'
/>
```

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

### builder:component command

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/command-reference.md

Looks up a component contract. Use the --key flag to specify the component key.

```sh
bun run builder:component -- --key <component-key>
```

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

### Project directory structure

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/first-project.md

Shows the file and folder layout of the created project directory.

```text
projects/my-site/
  project.json
  AGENTS.project.md
  oh-my-idetch.php
  src/
  cms/
  examples/
  tests/
  tools/
  var/
```

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

### LocalWP verification loop commands

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/ship-plugin-zip.md

Runs the normal LocalWP verification loop before shipping. The project ZIP command only proves the package can be built from checked source; browser/runtime verification is required for interactive OhMyEtch behavior.

```sh
bun run project:check -- --project <slug>
bun run localwp:sync -- --project <slug>
bun run localwp:verify -- --project <slug>
bun run localwp:doctor -- --project <slug>
bun run localwp:capabilities -- --project <slug>

```

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

### Listen to ome-woo:variation-selection-changed event

Source: https://docs.ohmyetch.com/woo/custom-events

Example of listening to the event and logging the selected variation when the selection phase is resolved.

```TypeScript
document.addEventListener("ome-woo:variation-selection-changed", (event) => {  

	const detail = (event as CustomEvent).detail;  

  

	if (detail.selection.phase === "resolved") {  

		console.log(detail.selected_variation);  

	}  

});  

  
```

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

### Checkout page composition with OmeWooOrderReceivedProvider

Source: https://docs.ohmyetch.com/woo/flows/order-received-page

Example of wrapping the checkout form and order received components within the OmeWooOrderReceivedProvider.

```html
<OmeWooOrderReceivedProvider>  

{#slot checkout}  

  <OmeWooCheckoutProvider>  

    {#slot default}  

      <OmeWooCheckoutForm />  

    {/slot}  

  </OmeWooCheckoutProvider>  

{/slot}  

{#slot received}  

  <OmeWooOrderReceivedNotice />  

  <OmeWooOrderReceivedDetails />  

  <OmeWooOrderReceivedItems />  

  <OmeWooOrderReceivedTotals />  

  <OmeWooOrderReceivedCustomerDetails />  

{/slot}  

</OmeWooOrderReceivedProvider>
```

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

### Check site readiness

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/daily-workflow.md

Runs the devkit doctor to check site readiness.

```sh
bun run localwp:doctor -- --project <slug>
```

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

### Check project runtime source with project:check

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/command-reference.md

Checks the project runtime source before sync or packaging. Run before every sync after changing 'src/**' or 'cms/**'.

```sh
bun run project:check -- --project my-site
```

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

### Bind project to Local site

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/first-project.md

Binds the project to a Local site by name.

```sh
bun run localwp:bind -- --project my-site --site "My Site"
```

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

### Sync target path

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/daily-workflow.md

The runtime plugin surface is written to this path in the bound Local site.

```text
wp-content/plugins/oh-my-idetch
```

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

### Extract Devkit Directory

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/install-and-prepare.md

The devkit ZIP extracts into a directory named oh-my-idetch-localwp-devkit/. Place it in a durable working directory before installing dependencies.

```text
oh-my-idetch-localwp-devkit/
```

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

### OmeWooShippingMethodSelector usage example

Source: https://docs.ohmyetch.com/woo/component-families/shipping-selector

Renders the shipping method selector with button-radio mode and price display. Use on cart or checkout page.

```html
<OmeWooShippingMethodSelector  

ui='{{"mode":"button-radio","aria_label":"Choose a shipping method"}}'  

content='{{"show_price":true,"price_separator":" - "}}'  

/>  

```

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

### Cross-Facet Behavior E2E Scenario

Source: https://docs.ohmyetch.com/facets/availability-counts-and-options

Example output from an E2E test showing how searching for 'Foo' affects category availability and counts.

```text
Search "Foo" narrows results to Alpha Foo.  

Category "news" remains available with count 1.  

Category "guides" becomes unavailable with count 0.
```

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

### Basic image gallery with OmeLightbox and OmeLightboxItem

Source: https://docs.ohmyetch.com/ui-components/lightbox

Use this snippet to create a basic image gallery with a trigger image, full image, and caption. When the trigger and full slots contain exactly one <img> each, the runtime automatically enters image mode, enabling PhotoSwipe pinch-to-zoom, swipe gestures, and responsive image sizing.

```svelte
<OmeLightbox>  

{#slot default}  

  <OmeLightboxItem content='{{"triggerLabel":"Open image one"}}'>  

    {#slot trigger}  

      <img src="/wp-content/uploads/thumb-1.jpg" alt="Preview one" />  

    {/slot}  

    {#slot full}  

      <img src="/wp-content/uploads/full-1.jpg" alt="Gallery image one" width="1200" height="800" />  

    {/slot}  

    {#slot caption}  

      <p>Gallery image one with <a href="/project-notes">project notes</a>.</p>  

    {/slot}  

  </OmeLightboxItem>  

{/slot}  

</OmeLightbox>  
```

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

### Sync to LocalWP

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/daily-workflow

Syncs the project runtime plugin surface into the bound Local site after the check passes. Writes to wp-content/plugins/oh-my-idetch, reruns the no-write project check, copies the runtime surface, and applies the compiled site definition. Fails closed on any failure and prints exact applied and unchanged evidence on success. Does not sync project notes, tests, tools, package metadata, agent files, local environment files, or user-owned premium plugins.

```bash
bun run localwp:sync -- --project <slug>  
```

```text
wp-content/plugins/oh-my-idetch  
```

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

### Basic Carousel with slides only

Source: https://docs.ohmyetch.com/docs/ui-components/carousel.md

Minimal carousel setup with two slides. The settings prop configures slidesPerView and spaceBetween. The default slot contains OmeCarouselSlide components.

```jsx
<OmeCarousel settings='{{"slidesPerView":"1","spaceBetween":"16"}}'>
  {#slot default}
    <OmeCarouselSlide>
      {#slot default}Slide 1{/slot}
    </OmeCarouselSlide>
    <OmeCarouselSlide>
      {#slot default}Slide 2{/slot}
    </OmeCarouselSlide>
  {/slot}
</OmeCarousel>
```

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

### TabsTrigger Slot Content Example

Source: https://docs.ohmyetch.com/ui-components/tabs

Use this slot content to render rich trigger content like icons or badges. When the slot is populated, it replaces the fallback label.

```svelte
<TabsTrigger>  

  {#slot default}  

    <span class="icon">⚙</span> Settings  

  {/slot}  

</TabsTrigger>  
```

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

### builder:explain command

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/command-reference.md

Explains a builder diagnostic code. Provide the diagnostic code as an argument.

```sh
bun run builder:explain <diagnostic-code>
```

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

### Single product template using this prefix

Source: https://docs.ohmyetch.com/woo/data-context-and-dynamic-sources

Use `{this.*}` on a single product template. The example shows accessing product title, price, and passing product data to `OmeWooAddToCartForm` and `OmeWooAddToCartButton`.

```html
Product title: {this.title}  

Product price: {this.omewoo.price.text}  

<OmeWooAddToCartForm product='{{"product_id":"{this.id}","product_type":"{this.omewoo.product.type}"}}'>  

{#slot default}  

  <OmeWooAddToCartButton behavior='{{"mode":"counter","trigger":"form_submit"}}' />  

{/slot}  

</OmeWooAddToCartForm>  

```

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

### ome-woo:checkout-loaded

Source: https://docs.ohmyetch.com/llms-woo.txt

Fires after checkout boot loads and checkout components are bound. The detail payload contains the checkout object.

```APIDOC
## Event: ome-woo:checkout-loaded

### Description
Fires after checkout boot loads and checkout components are bound.

### Dispatch Target
First matching checkout root: `[data-ome-woo-checkout-provider]`, `form[data-ome-woo-checkout-form]`, `[data-ome-woo-checkout-notices]`, or `document.body`.

### Bubbles
Yes.

### When it fires
After checkout boot loads and checkout components are bound.

### Detail Payload
`{ checkout }`
```

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

### OmeWooProductProvider scope example

Source: https://docs.ohmyetch.com/docs/woo/data-context-and-dynamic-sources.md

Shows how to wrap an add-to-cart form with `OmeWooProductProvider` on a single product template. The provider stores base product and derived variation state for its nearest descendants.

```etch
<OmeWooProductProvider product="{this.omewoo}">
  {#slot default}
    <OmeWooAddToCartForm>...</OmeWooAddToCartForm>
  {/slot}
</OmeWooProductProvider>
```

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

### Starter Skill Smoke Recipe Required Slugs (text)

Source: https://docs.ohmyetch.com/docs/woo/flows/template-integration-contract.md

Lists the required starter route slugs and assigned Woo page options that a starter-building skill or generated recipe must explicitly mention before claiming Woo route integration is complete. The smoke should fail if any slug is missing or if cart/checkout pages are not assigned.

```text
Required starter route slugs:
- archive-product
- single-product
- page-cart
- page-checkout
- order-confirmation

Required assigned Woo page options:
- woocommerce_cart_page_id
- woocommerce_checkout_page_id
```

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

### Custom separator slot with SVG icon

Source: https://docs.ohmyetch.com/docs/ui-components/breadcrumbs.md

Use the `separator` slot to provide custom markup instead of the plain text separator. The example shows an SVG icon inside the slot.

```jsx
<OmeBreadcrumbs>
  {#slot separator}
    
      <svg><!-- your icon --></svg>
    
  {/slot}
</OmeBreadcrumbs>
```

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

### Account provider with the core endpoints

Source: https://docs.ohmyetch.com/woo/component-families/my-account

Compose the account area shell with the core endpoints. Slots you do not compose render nothing for that endpoint, so start with the endpoints you need and add the rest later.

```markup
<OmeWooAccountProvider>  

{#slot auth}  

  <OmeWooAccountNotices />  

  <OmeWooAccountLoginForm />  

{/slot}  

{#slot dashboard}  

  <OmeWooAccountGreeting />  

  <OmeWooAccountNotices />  

  <OmeWooAccountNavigation />  

{/slot}  

{#slot orders}  

  <OmeWooAccountNavigation />  

  <OmeWooAccountOrders />  

{/slot}  

</OmeWooAccountProvider>  
```

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

### Synced Local plugin copy is not source

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/troubleshooting

The synced plugin copy in the Local site is not the source; changes should be made in projects/<slug>.

```text
~/Local Sites/<site>/app/public/wp-content/plugins/oh-my-idetch  
```

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

### Date Range Filter Configuration

Source: https://docs.ohmyetch.com/facets/recipes

Configure a date range facet. The first date is the start date and the second is the end date. Supported columns are post_date, post_modified, post_date_gmt, and post_modified_gmt.

```plaintext
argument_mode = date  

column = post_date  

option value = 2024-01-01,2024-12-31  

```

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

### Date Range Filter

Source: https://docs.ohmyetch.com/docs/facets/recipes.md

Configures a facet to filter posts by a date range using the 'date' argument mode. The option value must be a comma-separated pair of start and end dates.

```APIDOC
## Date Range Filter

### Description
Use date mode when authored options represent date ranges. The first date is the start date and the second date is the end date.

### Configuration
- **argument_mode** (string) - Required - Set to `date`.
- **column** (string) - Required - The date column to filter on. Supported values: `post_date`, `post_modified`, `post_date_gmt`, `post_modified_gmt`.
- **option value** (string) - Required - Comma-separated start and end dates, e.g., `2024-01-01,2024-12-31`.

### Example
text
argument_mode = date
column = post_date
option value = 2024-01-01,2024-12-31

```

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

### Print runtime capabilities with localwp:capabilities

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/command-reference.md

Prints JSON describing active runtime capabilities. Use it before assuming Etch, OhMyEtch, AutomaticCSS, CMS fields, or WooCommerce support exists in the bound Local site.

```sh
bun run localwp:capabilities -- --project my-site
```

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

### Build project ZIP with build:zip -- --project

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/command-reference.md

Checks and packages the specified project as a production plugin ZIP. The ZIP is written to projects/my-site/dist/oh-my-idetch-<version>.zip.

```sh
bun run build:zip -- --project my-site
```