Add AI agent guide, AGENTS.md and useWhen to component catalog

Collapse code examples in demo pages ...

Each .code-example block is now collapsed by default: the header keeps
its title and copy button and gains a chevron toggle (built at runtime
by code-examples.js, works identically in vanilla and Vue demos since
they share the demo bundle). Expanded state is one next-frame class
flip with aria-expanded/aria-controls on the button.

Demo page height drops 50555px -> 32603px (~35% shorter); demo-sync
stays at 0 differences.

Add static demo section sync check ...

scripts/check-demo-sections.mjs verifies without a server that
demo/index.html and demo/vue.html include the identical section
sequence, that every included partial exists in both variants, and
that no partial is orphaned. Wired into release:check as
test:demo-sections.

Split _forms.scss by component ...

- _forms.scss (254): form-group, inputs, selects, form-grid, fieldset
- _file-upload.scss (280): file upload panel + its responsive rules
- _range.scss (46): range slider
- _choice-controls.scss (220): radio, radio-group, switch, checkbox
kit.scss imports them in the original cascade order; screenshots and
demo-sync (27 sections, 0 diffs) confirm no visual change.

Generate CLAUDE.md component catalog from a single source ...

- docs/catalog.json is now the source of truth for the Component Catalog
- scripts/generate-catalog.mjs renders the table into CLAUDE.md (between
  GENERATED markers) and validates every listed prop/slot against the
  actual declarations in src/vue/components/*.js
- fixed stale catalog rows found by the validator: GnUsageMeter, GnSteps,
  GnAvatar, GnStatusCard, GnMetricCard
- test:catalog (--check) wired into release:check

Extract useOverlayTransition composable ...

Encode the CLAUDE.md overlay transition contract (hidden state class on
first render, visible class on nextTick + rAF, unmount after the closing
transition) as a composable; GnModal and GnDrawer now share it.
Composable is unit-tested; demo sync stays at 0 differences.

Add Vue adapter behavior contract tests ...

- vitest + jsdom + @vue/test-utils; 38 tests over utils, GnModal,
  GnToastProvider, GnFileUpload, GnCombobox covering the CLAUDE.md
  behavior contracts (focus trap, a-hide/a-show transition order,
  single-toast replacement, object URL cleanup, combobox ARIA/keyboard)
- wire test:unit into release:check
- fix GnModal never opening when mounted with open=true (watcher had
  no immediate flag; demo only ever toggles open after mount)

Add demo-sync gate and GitLab CI ...

- compare-heights.js wired into release:check as test:demo-sync
- .gitlab-ci.yml: build + release:check on the Playwright docker image
- install pinned playwright chromium locally

Fix v0.4.0 review findings and demo asset paths ...

- Restore visible hover feedback on radio/checkbox (background $color-grey)
- Drop dead checked/hover border-color rules; guard checked with :not(:disabled)
- Tokenize radio border as $border-width-choice and add $range-thumb-size
  so the choice-size bump no longer widens range slider thumbs
- Add cursor: pointer to switch wrapper
- Revert escaped doc snippets to absolute URLs (relative sweep was
  teaching fake ./routes in documentation samples)
- Add compare-heights.js demo sync check with CHROME_PATH fallback;
  ignore screenshots/

v0.4.0 — GnRepeater, redesigned checkbox/radio ...

- Add GnRepeater Vue component for dynamic field groups
- Redesign checkbox and radio styles to match kit aesthetic:
  hard-panel background, accent borders, checkmark/dot indicators,
  hover → primary border, checked → subtle tint + colored mark
- Bump version to 0.4.0

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

Add GnRepeater component for dynamic field groups ...

- New Vue adapter: GnRepeater with v-model, scoped #item slot,
  minItems/maxItems guards, and built-in Add/Remove UI
- SCSS: .repeater, .repeater-header, .repeater-item,
  .repeater-item-body, .repeater-item-actions
- Demo: vanilla repeater with inline JS + GnRepeater in Vue forms
- Build verified: compare-heights reports 0 differences

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

Add GnTagInput component for multi-value string input ...

Features:
- New GnTagInput Vue component with inline chip display
- Enter / paste (with separator split) to add tags
- Backspace in empty field removes last tag
- Unique check and maxItems limit
- Removable chips with x button

Style:
- Add _tag-input.scss with .tag-input, .tag-input-wrap, .tag-input-field
- Chips reuse existing .chip-secondary styling

Demo:
- Add interactive tag input example to Forms section (vanilla + Vue)
- Add code example blocks for HTML and Vue usage

Docs:
- Add GnTagInput to CLAUDE.md component catalog

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

Redesign toast UX: compact layout, progress bar, title-only mode ...

- Replace heavy colored header strip with inline icon+title header
- Add thin bottom progress bar showing remaining lifetime
- Support title-only compact single-line toasts (no text = no body padding)
- Increase tinted background opacity from 0.06 to 0.18 for visibility
- Fix vanilla toast defaults: all variants now use lifetime=4000, alone=true
- Add demo buttons for title-only variants in both vanilla and Vue demos
- Remove hover effect from toast close button
- Adjust close button position (top: 5px) and progress bar margin (1px)

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

v0.3.0 — GnUserCard, NavigationShell footer slot, Vue demo partials ...

Features:
- Add GnUserCard Vue component with compact and full variants
- Add GnNavigationShell #footer slot for custom footer content
- Add profile footer demo in navigation-shell section
- Split demo/vue.html into 27 partials under demo/partials/vue/
- Fix toast open animation (nextTick + requestAnimationFrame pattern)

Style:
- Add .user-card and .user-card-compact to _cards.scss
- Add .profile-identity to _navigation-shell.scss

Docs:
- Add demo synchronization rules to CLAUDE.md

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

Fix Vue demo visual issues and expand component showcase ...

- _forms.scss: rename .checkbox to .switch, create proper .checkbox
  for checkbox (square) vs switch (slider) differentiation
- GnSwitch.js: create dedicated switch component using .switch class
- _forms.scss: add .radio-group with flex-wrap gap for radio layouts
- GnRadioGroup.js: add radio-group class to container
- _cards.scss: fix .card-horizontal .card-media sizing with
  max-height, aspect-ratio, and align-self: start
- demo/vue.html: fix steps data (label → title)
- demo/vue.html: fix definition list data (definition → description)
- demo/vue.html: add Accordion, InputGroup demos
- demo/vue.html: add NavigationShell import (component registered)

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

Fix Vue demo: dark theme, label color, expanded component showcase ...

- demo/vue.html: replace broken CSS custom properties with real kit colors
  (body background #16161E, text #C0CAF5)
- demo/vue.html: update Vue CDN to 3.5.13
- demo/vue.html: expand demo to show 30+ components including
  Drawer, ConfirmDialog, Navigation, Progress, Timeline, Data Display,
  Identity, Chips, Toolbar, Overlays, EmptyState, Skeleton, Toasts
- _forms.scss: add color: $color-text-light to .label so labels are
  readable on dark backgrounds
- Add toast interaction demo buttons

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

Disable BrowserSync ghostMode and fix login-card sizing ...

- gulpfile.js: add ghostMode: false to stop scroll sync across tabs
- _cards.scss: .card.login-card max-width 460px → max-width: 100%; width: 460px

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

Style login card: 460px max-width, max-content submit, centered form-group ...

- .card.login-card max-width 360px -> 460px
- .login-card-submit width 100% -> max-content
- Fix .form-group indentation inside .login-card
- Demo login button: btn-secondary with-icon ph-sign-in

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

Fix demo navigation to rely only on URL hash ...

Removed scroll-based active-section detection. Navigation now uses
`hashchange` event and `window.location.hash` exclusively, preventing
cross-tab state leakage.

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

Add GnLoginCard component for standardized login forms ...

- Create GnLoginCard Vue adapter component with username/password
  fields, optional remember-me checkbox, submit button, and
  forgot-password / sign-up links.
- Add `.login-card` styles in _cards.scss with centered header,
  full-width submit button, and spaced link row.
- Register GnLoginCard in plugin and index exports.
- Add login-card demo block to demo/partials/cards.html.
- Update CLAUDE.md, README, and Vue docs with component entry.

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

Fix copy-button contrast on code-example-header ...

.code-example-header has a $color-primary (light) background, so the
default $color-text-light icon was invisible. Force `.btn-icon` inside
the header to $color-black with matching hover border.

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

Replace code-example-copy with standard btn-icon ...

All copy buttons inside `.code-example` blocks now use `.btn-icon.btn-icon-sm`
with a Phosphor `ph-copy` icon instead of the old text-based `.code-example-copy`.

Updated `code-examples.js` to swap the icon to `ph-check` for 1.2 s after copy,
matching the behaviour of `GnCopyButton`.

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

Replace translucent $surface-panel-muted with solid $color-dark ...

$surface-panel-muted was `rgba($color-text-light, 0.045)` — an ugly,
almost-invisible blue tint. It is now `=#1F2335`, the proper dark panel
background for cards, groups, tables, tabs, drawers, etc.

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

Remove negative margin-top from .docs-section-description ...

Replace `- $space-4` with `+ $space-2` so the description paragraph no
longer overlaps its preceding heading.

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

Add disabled styles for .btn-icon ...

Disabled `.btn-icon` now matches `.btn[disabled]` appearance:
muted text color, transparent background/border, not-allowed cursor,
0.72 opacity, and suppressed hover state.

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

Add compact .btn-icon-sm and fix copy-button demo ...

- Introduce `.btn-icon-sm` (28×28, 18 px icon) in `_buttons.scss` for
  a miniature icon-button variant.
- Remove `.btn-secondary` from demo copy buttons so they render as
  transparent icon-only controls without background.
- Add `size` prop to `GnIconButton` and `GnCopyButton` Vue components.
- Update docs and demo to reflect the new size option.

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

Ensure every icon carries the base `ph` class ...

- `iconNode()` in `src/vue/utils.js` now always prepends `ph` to the
  generated <i> class list, guaranteeing the base Phosphor font-family.
- Fix all raw HTML/JS spinners that used `ph-bold ph-spinner` without
  the base `ph` class: buttons demo, helper.js loading states.

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

Add GnCopyButton component and strict icon rule in docs ...

- Create GnCopyButton Vue adapter component with clipboard copy
  and 3-second icon swap from ph-copy to ph-check.
- Register GnCopyButton in plugin and index exports.
- Add copy-button demo block to demo/partials/buttons.html.
- Update CLAUDE.md, README, and Vue docs with component entry.
- Enforce "all icons must carry the ph class" rule in CLAUDE.md.

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

Remove hover animations from all card variants ...

- Remove transform transitions and hover_touch blocks from:
  .card, .status-card, .metric-card, .card-horizontal, .action-card
- Keep structural hover styles (border-color, background, box-shadow)
  only on the base .card selector
- Clean up transition-property declarations containing transform

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

Add horizontal card to demo page ...

- Insert horizontal card example into demo/partials/cards.html
- Add HTML and Vue code examples for copy-paste
- Rebuild dist

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