@algolia/wizard 0.103.0-rc.217.761 → 0.103.0-rc.217.762

package/dist/main.js

@@ -2467,7 +2467,7 @@ async function ensureApplication(resumeAppId) {
 // package.json
 var package_default = {
   name: "@algolia/wizard",
-  version: "0.103.0-rc.217.761",
+  version: "0.103.0-rc.217.762",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {
@@ -6762,6 +6762,7 @@ function searchInstructions(input) {
     "Style the search surfaces through the widget's class and CSS-variable overrides (or, when hand-built, the app's existing theme tokens): give the results panel and the element that actually draws the input's border and background \u2014 for a widget, the form or wrapper it renders around the bare input \u2014 non-transparent surfaces, keep that frame distinguishable from the background behind it in every supported theme, and never assume a light surface or reuse the surrounding page's colors unchanged inside the panel.",
     "The panel takes its width from the input by default, so a small input makes it unreadably narrow: give it `min-width: min(320px, calc(100vw - 2rem))` independent of the input, cap its maximum width to the viewport, and anchor it to the input edge it opens from so widening does not push it off-screen.",
     "Match the application styles closely, including light, dark, and high-contrast themes the project already supports.",
+    "Give the search input frame the same height, corner radius, border color and width, background, and focus style as the input it replaces. When it replaces nothing, copy them from the form controls beside it. Read these values from their source (the theme, the component props, or the CSS). Do not keep the widget theme defaults, for example a 44px height and 4px corners, and do not invent colors. When the app theme exists only in code, take the values from that theme object.",
     "When you add UI text to a localized dictionary or message file, add the same keys, translated, to every locale the project supports.",
     "Before reporting, mount the component. Do not run a type check, build, or test command unless a later instruction allows it: the validation pass runs the type check, after the developer agrees to it. If a tool limit is reached or an error remains unresolved, keep the implementation, report status=success, and name the remaining issue in the summary so validation can drive the next pass. Report status=fail only when no search implementation can be written, with the concrete blocker as the reason.",
     "The summary should be extremely concise; do not mention manual testing steps."
@@ -6878,6 +6879,8 @@ function validationInstructions(input) {
     "Find how the app selects each theme it supports (a class or attribute on an ancestor, a prefers-color-scheme media query, or a theme that exists only in code). Confirm that the search input and results panel take their colors from the active app theme through that same switch. A search widget whose colors do not match the page theme, for example a light panel on a dark page, is a failure: set sufficient=false.",
     "When the project has a package.json, confirm that the theme CSS of the search widget (for InstantSearch, a theme from instantsearch.css) is imported once from a legal global-CSS entry for that framework (Next.js Pages Router: pages/_app; Next.js App Router: root layout; otherwise the app global stylesheet or a component module when allowed). If it is installed but not imported, or imported from a Next.js component file, set sufficient=false.",
     "Confirm that the search component is reachable from and fits the corresponding content task at every supported breakpoint; require app-wide reachability only when the search scope is genuinely app-wide.",
+    "For an InstantSearch Autocomplete, confirm that the item component (the React itemComponent, or the item template in indices[].templates) calls the onSelect that it receives when the user clicks the result, for example onClick={onSelect} on its root element. The widget goes to the getURL route only through onSelect: the click on its <li> only sends the Insights event. If the item ignores onSelect, set sufficient=false, because a click on a result then does nothing.",
+    "Confirm that the search input frame has the same height, corner radius, border, and background as the input that it replaces, or as the form controls beside it when it replaces nothing. If the frame keeps the widget theme defaults or uses colors that the app does not use, set sufficient=false.",
     "Do not run the test suite or any test command.",
     "Do not modify files. Report each implementation issue as a concrete instruction for the next implementation pass.",
     `Detected verification tools: ${JSON.stringify(input.findings.verification ?? [])}. Use only a type checker; ignore any linter or formatter in this list.`,
@@ -6892,7 +6895,7 @@ function validationInstructions(input) {
     "Set sufficient=false when a required placement, accessibility, or theme-color property is observed to fail, the implementation is incomplete, or checks have implementation-caused failures; include concrete additionalInstructions for the next pass.",
     "You can only read source files. If a required property can be checked in the source, check it there. If it can be established only in a browser (rendered contrast, keyboard behavior, 320-pixel reflow, live-region status, computed accessible name), set sufficient=true when the source shows no violation. Never request devtools, a screenshot, or a contrast tool, and never repeat a finding that an earlier pass already fixed.",
     "If a check fails only in untouched code, set unrelatedFailure to a concise failure description.",
-    "Set styleOnly=true when sufficient=false and every finding is one of these: the theme palette defaults remain, a palette override loses to the theme, or the highlight classes keep the theme blue. If any other finding exists, for example a light panel on a dark page, do not set styleOnly.",
+    "Set styleOnly=true when sufficient=false and every finding is one of these: the theme palette defaults remain, a palette override loses to the theme, the highlight classes keep the theme blue, or the input frame does not match the size, radius, border, or background of the controls that it must match. If any other finding exists, for example a light panel on a dark page or a result that a click does not open, do not set styleOnly.",
     "Keep the summary to one short sentence. Put the details in additionalInstructions."
   ];
 }
@@ -10162,7 +10165,7 @@ async function resetProjectState() {
 // package.json with { type: 'json' }
 var package_default2 = {
   name: "@algolia/wizard",
-  version: "0.103.0-rc.217.761",
+  version: "0.103.0-rc.217.762",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {

package/docs/algolia-sdk/instantsearch-setup-js.md

@@ -87,14 +87,15 @@ Ensure the attributes you map into the component match the entity. 'title' above
   `searchParameters` (for example `['body:20']`), or as an index setting. Do both
   for the same attribute names the template passes to Snippet.
 
-### Navigation is `getURL`'s job, not the template's
+### Navigation: `getURL` plus the template's `onSelect`
 
 - `indices[].getURL` — `(item) => string`, a route that already exists; don't invent one.
-  It navigates on click **and** on Enter over a highlighted item, and records the click
-  event.
-- The `item` template renders content only: **no `<a>`, no `href`, no click handler of
-  your own, never `stopPropagation`.** The widget's `<li>` owns the click — it sends the
-  Insights `click`, closes the panel, clears the active option.
+  The widget goes there when `onSelect` runs: on Enter over a highlighted item, and on a
+  click only when the `item` template calls `onSelect`.
+- The `item` template **must call the `onSelect` it is handed on click**, for example
+  `` html`<div onClick=${onSelect}>…</div>` ``. The widget's `<li>` click only sends the
+  Insights `click`. Without `onSelect`, a click on a result does nothing. No `<a>`, no
+  `href`, no other click handler, never `stopPropagation`.
 - Do not pass a top-level `onSelect` to `autocomplete()` to navigate. `getURL` already
   navigates.
 - `getSearchPageURL` sends Enter with nothing highlighted to a full results page; pass it
@@ -287,8 +288,8 @@ insights: {
 
 With `insights: true`, `autocomplete` sends `view` (on render) and `click` (from the
 result element's own handler) itself. Its item template gets `{ item, onSelect }` and
-**no `sendEvent`** — nothing to wire. Call `onSelect` for the widget's selection behavior
-(close the panel, record a recent search); the click event fires either way.
+**no `sendEvent`** — nothing to wire. Call `onSelect` on click: it goes to
+the `getURL` route and closes the panel. The click event fires either way.
 
 `hits` and `infiniteHits` behave the same; only a custom `item` template whose click
 target is your own element needs wiring — it gets `sendEvent` as the second argument.

package/docs/algolia-sdk/instantsearch-setup-react.md

@@ -79,14 +79,15 @@ Ensure the attributes you map into the component match the entity. 'title' above
   `searchParameters` (for example `['body:20']`), or as an index setting. Do both
   for the same attribute names the component passes to Snippet.
 
-### Navigation is `getURL`'s job, not the item component's
+### Navigation: `getURL` plus the item's `onSelect`
 
 - `indices[].getURL` — `(item) => string`, a route that already exists; don't invent one.
-  It navigates on click **and** on Enter over a highlighted item, and records the click
-  event.
-- `itemComponent` renders content only: **no `<a>`, no `href`, no `onClick` beyond the
-  `onSelect` it is handed, never `stopPropagation`.** The widget's `<li>` owns the click —
-  it sends the Insights `click`, closes the panel, clears the active option.
+  The widget goes there when `onSelect` runs: on Enter over a highlighted item, and on a
+  click only when the item component calls `onSelect`.
+- `itemComponent` **must call the `onSelect` it is handed on click**, for example
+  `<div onClick={onSelect}>`. The widget's `<li>` click only sends the Insights `click`.
+  Without `onSelect`, a click on a result does nothing. No `<a>`, no `href`, no other
+  `onClick`, never `stopPropagation`.
 - Do not pass a top-level `onSelect` to `<Autocomplete>` (for example to call
   `router.push`). `getURL` already navigates. The top-level callback can receive a
   `SyntheticEvent` instead of `{ item }`, so reading `item` from it fails the type check.
@@ -281,8 +282,8 @@ policy allows it:
 With `insights={true}`, `<Autocomplete>` sends `view` (on render) and `click` (from the
 result element's own handler) itself. Its `itemComponent` receives
 `{ item, onSelect, onApply }` and **no `sendEvent`** — nothing to wire. Call `onSelect`
-for the widget's selection behavior (close the panel, record a recent search); the click
-event fires either way.
+on click: it goes to the `getURL` route and closes the panel. The click event fires
+either way.
 
 `<Hits>` and `<InfiniteHits>` behave the same way. Two cases there need explicit wiring:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/wizard",
-  "version": "0.103.0-rc.217.761",
+  "version": "0.103.0-rc.217.762",
   "description": "Magically implement Algolia functionality in your codebase",
   "type": "module",
   "engines": {