feat(sw): viewer layer eye-icon rule, header hover, trailing strip and file name width

User-requested SW Viewer changes (2026-10-21); no new Props, public .d.ts unchanged.
- Layer popup visibility: AI docs (VIEWER §4.1, catalog, design rules, patterns,
  AI_GUIDE) require the Eye / EyeOff icon button, never a switch; example H now
  renders a real layer list with eye buttons; Storybook eye button gets the pointer.
- Viewer header hover: text and icon #FFC600, the #266651 hover face removed; size and
  position unchanged. Status stays display only.
- Trailing strip: status, the trailing icon button (info / license) and SWHeader
  minimize / close are full-height (48px) segments on the window-area face, no gap, top
  and bottom on the object surface border; no line around the license button.
- File name: the measured steps use the file-name basis (header width), not the text
  width, so a short and a long name give the same Open / file-name widths.
- File open icon: the black icon outline of every viewer icon (SWViewerIcon), no frame.

packages/sw/ai/examples/example-layout.css

@@ -1,5 +1,5 @@
-/* Consumer layout for the composed examples (B, C, D). It belongs to the consuming project: it only
-   arranges public SW components and reads the public --hm-sw-header-* tokens provided by <SWTheme>.
+/* Consumer layout for the composed examples (B, C, D, H). It belongs to the consuming project: it only
+   arranges public SW components and reads the public --hm-sw-header-* / --hm-sw-viewer-* tokens provided by <SWTheme>.
    It never styles hm-sw-* classes and adds no new design values. */
 .app-sw-bar {
   display: flex;
@@ -34,3 +34,13 @@
   display: flex;
   border-left: 1px solid var(--hm-sw-header-document-border-color);
 }
+/* Viewer layer list (example H), the same look as Storybook SW/Viewer's layer popup. Panel tokens only.
+   Layer visibility is a 24 x 24 eye icon button (Eye / EyeOff), never a switch or checkbox. */
+.app-viewer-layers { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.app-viewer-layers > li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 3px; }
+.app-viewer-layers > li:hover { background: rgba(154, 146, 132, 0.25); }
+.app-viewer-layers > li[data-visible="false"] { opacity: 0.45; }
+.app-viewer-layer-swatch { flex: 0 0 10px; width: 10px; height: 10px; border: 1px solid var(--hm-sw-viewer-panel-inner-border); border-radius: 9999px; }
+.app-viewer-layer-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: ui-monospace, monospace; font-size: 12px; }
+.app-viewer-layer-eye { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--hm-sw-viewer-panel-heading); cursor: pointer; }
+.app-viewer-layer-eye:hover { background: rgba(154, 146, 132, 0.3); }