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>

docs/sw/ai-template/evidence/report.json

@@ -0,0 +1,276 @@
+{
+  "checks": [
+    {
+      "name": "1 all SVG/PNG assets decode (data URI, no external path)",
+      "status": "PASS",
+      "data": {
+        "count": 33,
+        "broken": []
+      }
+    },
+    {
+      "name": "1 styles.css loaded; SWTheme provides tokens",
+      "status": "PASS",
+      "data": {
+        "height": "49px",
+        "font": "\"Noto Sans KR\", \"Malgun Gothic\", \"Apple SD Gothic Neo\", sans-serif"
+      }
+    },
+    {
+      "name": "2 A default header 1920 geometry = Figma (49 / 0·80 / 65·310 / 377·1301 / 1680·240)",
+      "status": "PASS",
+      "data": {
+        "header": {
+          "x": 0,
+          "y": 0,
+          "w": 1920,
+          "h": 49
+        },
+        "home": {
+          "x": 0,
+          "y": 0,
+          "w": 80,
+          "h": 48
+        },
+        "document": {
+          "x": 65,
+          "y": 0,
+          "w": 310,
+          "h": 48
+        },
+        "object": {
+          "x": 377,
+          "y": 0,
+          "w": 1301,
+          "h": 48
+        },
+        "window": {
+          "x": 1680,
+          "y": 0,
+          "w": 240,
+          "h": 48
+        }
+      }
+    },
+    {
+      "name": "2 A layer dropdown select callback",
+      "status": "PASS",
+      "data": "layer:center"
+    },
+    {
+      "name": "2 A close callback",
+      "status": "PASS",
+      "data": "close"
+    },
+    {
+      "name": "3 B order Logo → File → Layer → Color → K (DOM)",
+      "status": "PASS",
+      "data": [
+        "뷰어 홈",
+        "hm-sw-header__document",
+        "레이어",
+        "색상",
+        "팝업 가이드"
+      ]
+    },
+    {
+      "name": "3 B sizes keep SW rules (bar 49, home 80 overlapping file 15px, fields 234/192 x 38)",
+      "status": "PASS",
+      "data": {
+        "bar": {
+          "x": 0,
+          "y": 409,
+          "w": 1920,
+          "h": 49
+        },
+        "home": {
+          "x": 0,
+          "y": 409,
+          "w": 80,
+          "h": 48
+        },
+        "document": {
+          "x": 65,
+          "y": 409,
+          "w": 310,
+          "h": 48
+        },
+        "layer": {
+          "x": 382,
+          "y": 414,
+          "w": 234,
+          "h": 38
+        },
+        "color": {
+          "x": 620,
+          "y": 414,
+          "w": 192,
+          "h": 38
+        }
+      }
+    },
+    {
+      "name": "3 B document dropdown New callback",
+      "status": "PASS",
+      "data": "document:new"
+    },
+    {
+      "name": "3 B layer dropdown opens under the field",
+      "status": "PASS",
+      "data": "true"
+    },
+    {
+      "name": "3 B Escape closes and returns focus to the field",
+      "status": "PASS",
+      "data": null
+    },
+    {
+      "name": "3 B color chip callback (dropdown stays open)",
+      "status": "PASS",
+      "data": "color:red"
+    },
+    {
+      "name": "3 B K guide preview on hover (animation frame advances)",
+      "status": "PASS",
+      "data": {
+        "guide": true
+      }
+    },
+    {
+      "name": "3 B K click callback",
+      "status": "PASS",
+      "data": "popupGuide"
+    },
+    {
+      "name": "4 C order File → 선 → 문자 → 치수 → 인쇄",
+      "status": "PASS",
+      "data": [
+        "file",
+        "선스타일",
+        "문자스타일",
+        "치수스타일",
+        "인쇄"
+      ]
+    },
+    {
+      "name": "4 C first file well has a left edge (consumer wrapper)",
+      "status": "PASS",
+      "data": "1px"
+    },
+    {
+      "name": "4 C line type callback + field value",
+      "status": "PASS",
+      "data": "lineType:center"
+    },
+    {
+      "name": "4 C text style callback + field value",
+      "status": "PASS",
+      "data": "textStyle:dotum"
+    },
+    {
+      "name": "4 C dimension style callback",
+      "status": "PASS",
+      "data": "dimensionStyle:iso"
+    },
+    {
+      "name": "4 C print callback",
+      "status": "PASS",
+      "data": "print"
+    },
+    {
+      "name": "5 D new search field matches the SW field surface (height/top/border/radius/background/shadow/label)",
+      "status": "PASS",
+      "data": {
+        "layer": {
+          "h": 38,
+          "top": 1232,
+          "border": "1px rgb(8, 37, 28)",
+          "radius": "3px",
+          "bg": "linear-gradient(0deg, rgba(0, 0, 0, 0.45",
+          "shadow": "rgba(9, 39, 30, 0.7) 0px 1px 4px 0px"
+        },
+        "search": {
+          "h": 38,
+          "top": 1232,
+          "border": "1px rgb(8, 37, 28)",
+          "radius": "3px",
+          "bg": "linear-gradient(0deg, rgba(0, 0, 0, 0.45",
+          "shadow": "rgba(9, 39, 30, 0.7) 0px 1px 4px 0px"
+        },
+        "label": "12px",
+        "fieldLabel": "12px"
+      }
+    },
+    {
+      "name": "5 D hover ring like existing fields (edge turns yellow, inside unchanged)",
+      "status": "PASS",
+      "data": {
+        "ring": "1",
+        "before": {
+          "inside": [
+            18,
+            50,
+            39
+          ],
+          "edge": [
+            8,
+            37,
+            28
+          ]
+        },
+        "after": {
+          "inside": [
+            18,
+            50,
+            39
+          ],
+          "edge": [
+            172,
+            131,
+            3
+          ]
+        }
+      }
+    },
+    {
+      "name": "5 D Enter commits through SWHeaderInput → search callback",
+      "status": "PASS",
+      "data": "search:WALL-01"
+    },
+    {
+      "name": "5 D search button callback uses committed value",
+      "status": "PASS",
+      "data": "search:WALL-01"
+    },
+    {
+      "name": "5 D Escape restores the committed value",
+      "status": "PASS",
+      "data": "WALL-01"
+    },
+    {
+      "name": "5 D existing color dropdown in the same bar",
+      "status": "PASS",
+      "data": "color:blue"
+    },
+    {
+      "name": "6 B Tab order = display order",
+      "status": "PASS",
+      "data": [
+        "문서: C0020101-006-평면및종단면도(06)",
+        "레이어",
+        "색상",
+        "팝업 가이드"
+      ]
+    },
+    {
+      "name": "7 no page/console errors",
+      "status": "PASS",
+      "data": []
+    }
+  ],
+  "errors": [],
+  "warnings": [
+    "Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently",
+    "Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently"
+  ]
+}