feat(sw): prepare reusable AI-friendly component package

- Ship an AI guide in the package (ai/: usage rules, component catalog,
  design rules, composition patterns) via package.json files.
- Add examples A-D that import only public exports: default header,
  viewer header, feature header, and a consumer-side search extension
  that reuses SWHeaderInput and the public SW tokens.
- Add SW-only checks: docs/API consistency, tarball consumer project
  (React 19 + TS + Vite typecheck/build) and a browser check (27/27).
- No runtime source or public API change; README gains a pointer section.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/sw/ai/examples/sw-search-control.css

@@ -0,0 +1,48 @@
+/* Consumer extension styles. Every value is a public SW token (see ../DESIGN_RULES.md); the
+   38px field height, 12px label / 14px bold value and 1px gradient hover ring follow the SW field rules. */
+.app-sw-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  height: var(--hm-sw-header-field-height);
+  padding: 0 6px 0 11px;
+  border: 1px solid var(--hm-sw-header-property-border-color);
+  border-radius: var(--hm-sw-header-property-radius);
+  background: var(--hm-sw-header-property-background);
+  box-shadow: var(--hm-sw-header-property-shadow);
+}
+/* Hover: the bordered-control rule — the 1px border becomes the yellow gradient; nothing moves. */
+.app-sw-search::after {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--hm-sw-header-hover-border-width));
+  padding: var(--hm-sw-header-hover-border-width);
+  border-radius: inherit;
+  background: var(--hm-sw-header-hover-border-gradient);
+  /* Ring only: the content box is cut out (prefixed first, the standard declaration last wins). */
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  opacity: 0;
+  pointer-events: none;
+}
+.app-sw-search:hover:not([data-disabled])::after { opacity: 1; }
+.app-sw-search__text { display: flex; flex-direction: column; min-width: 0; }
+.app-sw-search__label {
+  height: 14px;
+  font-size: var(--hm-sw-header-label-size);
+  line-height: 14px;
+  letter-spacing: 0.02em;
+  text-shadow: var(--hm-sw-header-label-outline);
+}
+.app-sw-search__button {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--hm-sw-header-property-radius);
+}
+/* Text-only hover / selected color, like the SW toggles. */
+.app-sw-search__button:hover:not(:disabled) { color: var(--hm-sw-header-selected-color); }