Improve page search.

Author: koculu

frontend/purestack.studio/components/site/search-box/search-box.mdx

@@ -86,8 +86,8 @@ The live field above searches the real documentation index. Try a matching term,
     <div class="component-appearance-cell">
       <code>Empty query</code>
       <p class="m-0">
-        The search field is visible; the results region stays hidden until a
-        query is entered.
+        Focus the search field to see a search prompt. Enter at least two
+        characters to search the site.
       </p>
     </div>
     <div class="component-appearance-cell">
@@ -114,7 +114,7 @@ The live field above searches the real documentation index. Try a matching term,
   </div>
 </ComponentExample>
 
-The current implementation derives its placeholder from site.siteTitle, even when a placeholder prop is supplied. Use the site title to configure the visible default; the API below describes the accepted prop separately.
+The default placeholder uses site.siteTitle. Supply a placeholder prop to customize the field for its context.
 
 ## Feature map
 
@@ -130,6 +130,8 @@ This component exposes tone and variant, but no variantMode.
 
 Pagefind indexes the built HTML, so new content appears after a successful indexed build. SearchBox does not fetch application records or replace autocomplete. Keyboard behavior and results are provided by the standard Pagefind search runtime.
 
+Press `/` outside an editable field to focus the first visible search box. Use the up and down arrow keys to move between results, Enter to open the focused link, and Escape to dismiss the panel. Tab follows the normal link order. Result counts and search errors are announced to screen readers.
+
 ## API reference
 
 <div class="api-overview">
@@ -179,8 +181,8 @@ Pagefind indexes the built HTML, so new content appears after a successful index
   defaultValue="Search + site title"
 >
   <p>
-    The current component derives its placeholder from site.siteTitle. The
-    registered placeholder prop is not read by the resolver.
+    Custom field placeholder. When omitted, the component uses site.siteTitle,
+    or simply Search when the site has no title.
   </p>
 </ApiProperty>
 

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "purestack-repo",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "packageManager": "yarn@4.18.1",
   "type": "module",
   "sideEffects": false,

packages/purestack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "purestack",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/purestack.mjs",
   "types": "./dist/purestack.d.mts",

packages/purestack/src/index.ts

@@ -1,3 +1,3 @@
-export const version: string = '1.1.29'
+export const version: string = '1.1.30'
 
 export * from '@purestack/ts-ssg'

packages/purestack/src/init/init.test.ts

@@ -782,7 +782,7 @@ describe('project generation', () => {
         await readFile(path.join(unpacked, 'template', file), 'utf8'),
       )
     }
-  })
+  }, 20_000)
 
   it('applies selected settings while preserving template configuration', async () => {
     const archive = await archiveFixture()

packages/ts-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-common",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-common.mjs",
   "types": "./dist/ts-common.d.mts",

packages/ts-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-components",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-components.mjs",
   "types": "./dist/ts-components.d.mts",

packages/ts-components/src/standard/searchBox/searchBox.ts

@@ -12,20 +12,26 @@ export interface SearchBox {
 }
 
 const searchBoxTemplate = html`<div class="site-search" data-pagefind-search>
-  <FormInputField
-    icon="tabler:search"
-    :tone="tone"
-    :variant="variant"
-    type="search"
-    name="q"
-    :placeholder="placeholder"
-    autocomplete="off"
-    spellcheck="false"
-    data-pagefind-input
-    aria-label="Search site content"/>
+  <div class="site-search__control">
+    <FormInputField
+      icon="tabler:search"
+      :tone="tone"
+      :variant="variant"
+      type="search"
+      name="q"
+      :placeholder="placeholder"
+      autocomplete="off"
+      spellcheck="false"
+      data-pagefind-input
+      aria-label="Search site content"/>
+    <kbd class="site-search__shortcut" aria-hidden="true">/</kbd>
+  </div>
+  <span class="site-search__sr-only" data-pagefind-status role="status"></span>
   <div
-    class="site-search__results doc-content"
+    class="site-search__results"
     data-pagefind-results
+    role="region"
+    aria-label="Site search"
     hidden
   ></div>
 </div>`
@@ -36,7 +42,9 @@ function defineSearchBoxComponent() {
     context: (head) => ({
       tone: head.props.tone,
       variant: head.props.variant,
-      placeholder: resolveSearchPlaceholder(resolvePageContext(head)),
+      placeholder:
+        head.props.placeholder ??
+        resolveSearchPlaceholder(resolvePageContext(head)),
     }),
   })
 }