@magicx-eng/ai-autocomplete-vanilla 0.23.3 → 0.24.0

package/README.md

@@ -178,11 +178,12 @@ new AIAutocomplete(container, {
 
 Each server item becomes a `Product` with `id` (the item's stable id), `title`,
 `price` (the item's lowest price, verbatim as the catalog spells it — the
-currency is yours to add), `vendor`, `imageUrl`, and a **relative** `url` of
-`/products/{handle}` — the right link for a widget running on the storefront
-itself. An item the catalog has no handle for gets no `url`: its card is still
-activatable and still emits `onProductSelect`, it just has nothing for
-cmd-click to open. `productFromMatchedItem` / `productsFromCustomFields` are
+currency is yours to add), `vendor`, `imageUrl`, and a `url`: the item's own
+`item_url` when the uploaded catalog named one (absolute or root-relative;
+anything else is ignored), else a **relative** `/products/{handle}` — the right
+link for a Shopify widget running on the storefront itself. An item with
+neither gets no `url`: its card is still activatable and still emits
+`onProductSelect`, it just has nothing for cmd-click to open. `productFromMatchedItem` / `productsFromCustomFields` are
 exported for a hand-rolled strip that wants the same mapping.
 
 Set `showProducts: false` to render no strip at all. The catalog report
@@ -781,6 +782,7 @@ Override these on the container element. The variables are declared with `:where
 | `--aia-border` | `rgba(17, 24, 39, 0.14)` | `#505050` | Input container border color |
 | `--aia-shadow` | `inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(16,24,40,0.1), 0 8px 24px rgba(16,24,40,0.16)` | `inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5)` | Input container elevation (box-shadow) |
 | `--aia-dropdown-offset` | `13px` | `13px` | Gap between the input box and the dropdown (the dropdown's margin toward the input). |
+| `--aia-content-inset-left` | `16px` | `16px` | Left inset of the SDK's content: the input wrapper's left padding, and the line the dropdown's content (parameter label, option text, product strip) starts on. Set it when you pad the field to clear a leading icon of your own, so the dropdown's content stays aligned under the typed text. Practical minimum is `10px` (the option text's own inset); both surfaces floor it there. |
 | `--aia-footer-gap` | `8px` | `8px` | Breathing room above the dropdown footer (badge / keyboard hints), additive to the dropdown's 8px section gap. |
 | `--aia-footer-chip-bg` | `--aia-surface` at 65% | `--aia-surface` at 65% | Fill behind the footer's keyboard hint and AI-Autocomplete badge. The option list scrolls under the footer, so this keeps both legible over the row passing behind them. `transparent` on the glass surface. |
 | `--aia-dropdown-bg` | — | — | Optional bg color the dropdown's "glass" rim shadow tints toward. Set this to the page background behind the dropdown so the bottom-corner glow blends seamlessly. |

package/dist/index.d.mts

@@ -118,6 +118,13 @@ interface MatchedItem {
      */
     handle?: string;
     image_url?: string;
+    /**
+     * The item's own page, as the merchant's catalog upload named it — absolute
+     * (`https://…`) or storefront-relative (`/menu/pizza`). Set on uploaded
+     * catalogs, where there is no platform slug to build a link from; a Shopify
+     * item carries `handle` instead. When both are present the strip links here.
+     */
+    item_url?: string;
 }
 /** The items the applied filters left standing. */
 interface MatchedItems {
@@ -1375,8 +1382,11 @@ declare function dateCellMarks(iso: string | null, args: {
  * suggestion bubbles, 2026-08-19): opacity 0→1 over ~150 ms, a ~16 px rise
  * easing out over ~280 ms, consecutive rows ~80–110 ms apart.
  *
- * The per-row motion is CSS (the option rule in each package's stylesheet —
- * keep the three copies identical; the parity test compares them). This module
+ * The per-row motion is CSS: the option rule in each package's stylesheet
+ * fades the cell, and the option's content rule rises it — the rise is on the
+ * inner content, not the cell, because a transformed cell extends the grid's
+ * scrollable area and flashed a scrollbar through the entrance (keep the three
+ * copies identical; the parity test compares them). This module
  * owns the *timing numbers* and the per-row delay, so vanilla, React and
  * Angular can't drift onto three different cascades. `OPTION_ENTER_RISE_MS` and
  * `OPTION_ENTER_FADE_MS` must match the durations declared in those rules.
@@ -1682,10 +1692,14 @@ declare function renderEditableContent(args: RenderEditableArgs): void;
  * its dropdown, grid and button elements:
  *
  * - `update()` after every render — re-measures where the grid's bottom edge
- *   is and re-evaluates visibility. The disc seats itself in the grid's
+ *   is and re-evaluates visibility. The chevron seats itself in the grid's
  *   reserved fade band when there is one (below-mode with the footer), and
  *   floats a small gap above the grid's edge in layouts that zero the band
- *   (`optionsPosition="above"`, product strip). A new
+ *   (`optionsPosition="above"`). When a product strip follows the grid it
+ *   instead centres itself on the strip's "Products" label row — the label
+ *   carries `data-aia-products-label` for this — so it sits on the seam
+ *   between the two sections rather than over the last visible option row
+ *   (2026-09-14, from the Shopify storefront). A new
  *   option group (`data-aia-group` on the grid changed) keeps the arrow hidden
  *   until the rows' entrance animation has settled, because a row mid-rise
  *   still extends the scrollable area and would flash the arrow on.
@@ -1808,8 +1822,10 @@ declare const PRODUCT_PATH_PREFIX = "/products/";
  * shape. Pure, so a Tier 3 consumer rendering its own strip from
  * `customFields` gets the same cards the built-in one draws.
  *
- * An item without a `handle` yields a card without a `url`: still activatable,
- * still emitting `onProductSelect`, just nothing for cmd-click to open.
+ * The link is the item's own `item_url` when the catalog named one, else the
+ * `/products/{handle}` path a Shopify item implies. An item with neither
+ * yields a card without a `url`: still activatable, still emitting
+ * `onProductSelect`, just nothing for cmd-click to open.
  */
 declare function productFromMatchedItem(item: MatchedItem): Product;
 /**

package/dist/index.d.ts

@@ -118,6 +118,13 @@ interface MatchedItem {
      */
     handle?: string;
     image_url?: string;
+    /**
+     * The item's own page, as the merchant's catalog upload named it — absolute
+     * (`https://…`) or storefront-relative (`/menu/pizza`). Set on uploaded
+     * catalogs, where there is no platform slug to build a link from; a Shopify
+     * item carries `handle` instead. When both are present the strip links here.
+     */
+    item_url?: string;
 }
 /** The items the applied filters left standing. */
 interface MatchedItems {
@@ -1375,8 +1382,11 @@ declare function dateCellMarks(iso: string | null, args: {
  * suggestion bubbles, 2026-08-19): opacity 0→1 over ~150 ms, a ~16 px rise
  * easing out over ~280 ms, consecutive rows ~80–110 ms apart.
  *
- * The per-row motion is CSS (the option rule in each package's stylesheet —
- * keep the three copies identical; the parity test compares them). This module
+ * The per-row motion is CSS: the option rule in each package's stylesheet
+ * fades the cell, and the option's content rule rises it — the rise is on the
+ * inner content, not the cell, because a transformed cell extends the grid's
+ * scrollable area and flashed a scrollbar through the entrance (keep the three
+ * copies identical; the parity test compares them). This module
  * owns the *timing numbers* and the per-row delay, so vanilla, React and
  * Angular can't drift onto three different cascades. `OPTION_ENTER_RISE_MS` and
  * `OPTION_ENTER_FADE_MS` must match the durations declared in those rules.
@@ -1682,10 +1692,14 @@ declare function renderEditableContent(args: RenderEditableArgs): void;
  * its dropdown, grid and button elements:
  *
  * - `update()` after every render — re-measures where the grid's bottom edge
- *   is and re-evaluates visibility. The disc seats itself in the grid's
+ *   is and re-evaluates visibility. The chevron seats itself in the grid's
  *   reserved fade band when there is one (below-mode with the footer), and
  *   floats a small gap above the grid's edge in layouts that zero the band
- *   (`optionsPosition="above"`, product strip). A new
+ *   (`optionsPosition="above"`). When a product strip follows the grid it
+ *   instead centres itself on the strip's "Products" label row — the label
+ *   carries `data-aia-products-label` for this — so it sits on the seam
+ *   between the two sections rather than over the last visible option row
+ *   (2026-09-14, from the Shopify storefront). A new
  *   option group (`data-aia-group` on the grid changed) keeps the arrow hidden
  *   until the rows' entrance animation has settled, because a row mid-rise
  *   still extends the scrollable area and would flash the arrow on.
@@ -1808,8 +1822,10 @@ declare const PRODUCT_PATH_PREFIX = "/products/";
  * shape. Pure, so a Tier 3 consumer rendering its own strip from
  * `customFields` gets the same cards the built-in one draws.
  *
- * An item without a `handle` yields a card without a `url`: still activatable,
- * still emitting `onProductSelect`, just nothing for cmd-click to open.
+ * The link is the item's own `item_url` when the catalog named one, else the
+ * `/products/{handle}` path a Shopify item implies. An item with neither
+ * yields a card without a `url`: still activatable, still emitting
+ * `onProductSelect`, just nothing for cmd-click to open.
  */
 declare function productFromMatchedItem(item: MatchedItem): Product;
 /**