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/ExampleD-SearchExtension.tsx

@@ -0,0 +1,30 @@
+// Example D — existing Layer / Color components next to a NEW consumer control (SWSearchControl).
+import { useState } from "react"
+import { SWHeaderColorMenu, SWHeaderLayerMenu, SWTheme, type SWHeaderColorValue } from "@hm-design/sw"
+import { colors, layers } from "./sample-data"
+import { SWSearchControl } from "./SWSearchControl"
+import "./example-layout.css"
+
+export function ExampleDSearchExtension({ onEvent }: { onEvent?: (name: string) => void }) {
+  const [activeLayerId, setActiveLayerId] = useState("0")
+  const [color, setColor] = useState<SWHeaderColorValue>({ value: "ByLayer", swatch: "#ffffff" })
+  const [query, setQuery] = useState("")
+  return (
+    <SWTheme className="app-sw-bar" role="banner" aria-label="검색 헤더">
+      <div className="app-sw-surface" role="toolbar" aria-label="객체 찾기">
+        <SWHeaderLayerMenu
+          value={{ name: "0" }}
+          layers={layers}
+          activeLayerId={activeLayerId}
+          onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
+        />
+        <SWHeaderColorMenu
+          value={color}
+          colors={colors}
+          onColorSelect={option => { setColor({ value: option.label ?? option.color, swatch: option.color }); onEvent?.(`color:${option.id}`) }}
+        />
+        <SWSearchControl value={query} onValueChange={setQuery} onSearch={text => onEvent?.(`search:${text}`)} />
+      </div>
+    </SWTheme>
+  )
+}