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/ExampleA-DefaultHeader.tsx

@@ -0,0 +1,40 @@
+// Example A — reuse (1st priority): the complete SW Header, unchanged. Existing projects keep this code.
+import { useState } from "react"
+import { SWHeader, type SWHeaderColorMode, type SWHeaderColorValue } from "@hm-design/sw"
+import { colors, dimensionStyles, documents, layers, lineTypes, lineWeights, textStyles } from "./sample-data"
+
+export function ExampleADefaultHeader({ onEvent }: { onEvent?: (name: string) => void }) {
+  const [activeDocumentId, setActiveDocumentId] = useState(documents[0].id)
+  const [activeLayerId, setActiveLayerId] = useState("0")
+  const [color, setColor] = useState<SWHeaderColorValue>({ value: "ByLayer", swatch: "#ffffff" })
+  const [colorMode, setColorMode] = useState<SWHeaderColorMode | null>("byLayer")
+  const log = (name: string) => () => onEvent?.(name)
+  return (
+    <SWHeader
+      documentTitle={documents.find(item => item.id === activeDocumentId)?.name ?? ""}
+      logoAlt="예제 SW"
+      documents={documents}
+      activeDocumentId={activeDocumentId}
+      onDocumentSelect={document => { setActiveDocumentId(document.id); onEvent?.(`document:${document.id}`) }}
+      onDocumentNew={log("document:new")}
+      onDocumentOpen={log("document:open")}
+      layers={layers}
+      activeLayerId={activeLayerId}
+      onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
+      color={color}
+      colors={colors}
+      colorMode={colorMode}
+      onColorSelect={option => { setColor({ value: option.label ?? option.color, swatch: option.color }); setColorMode(null); onEvent?.(`color:${option.id}`) }}
+      onColorModeChange={mode => { setColorMode(mode); onEvent?.(`colorMode:${mode}`) }}
+      lineTypes={lineTypes}
+      lineWeights={lineWeights}
+      textStyles={textStyles}
+      dimensionStyles={dimensionStyles}
+      onHomeClick={log("home")}
+      onPrint={log("print")}
+      onPopupGuide={log("popupGuide")}
+      onMinimize={log("minimize")}
+      onClose={log("close")}
+    />
+  )
+}