srcdev-nuxt-components 9.0.18 → 9.1.1

package/.claude/settings.json

@@ -15,11 +15,13 @@
       "Bash(git mv:*)",
       "Bash(npx tsc:*)",
       "Bash(npx vitest:*)",
-      "Bash(git show:*)"
+      "Bash(git show:*)",
+      "Edit(/.claude/skills/components/**)"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",
-      "/Users/simoncornforth/websites/nuxt-components/.claude/skills"
+      "/Users/simoncornforth/websites/nuxt-components/.claude/skills",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/02.molecules/navigation/site-navigation/tests"
     ]
   }
 }

package/.claude/skills/component-inline-action-button.md

@@ -0,0 +1,79 @@
+# Inline Action Button in a Custom Input Wrapper
+
+## Overview
+
+When a component needs an action button visually attached to an input-like wrapper (e.g. copy-to-clipboard, search-submit), use `InputButtonCore variant="inline"` rather than a raw `<button>`. The `inline` variant applies no built-in styles intentionally — the parent component's CSS provides all context. This keeps the button consistent with the rest of the input system (focus rings, hover tokens, transition timing) without duplicating the button style system.
+
+## Pattern
+
+```vue
+<template>
+  <div class="my-wrapper" :class="{ 'some-state': isActive }">
+    <input class="my-field" ... />
+    <InputButtonCore
+      type="button"
+      variant="inline"
+      class="my-action-button"
+      :button-text="label"
+      :aria-label="label"
+      @click="handleAction"
+    >
+      <template v-if="slots.icon" #left>
+        <slot name="icon"></slot>
+      </template>
+    </InputButtonCore>
+  </div>
+</template>
+```
+
+`aria-label` is not a declared prop on InputButtonCore — it falls through to the root element via Vue's default `inheritAttrs: true`.
+
+## CSS
+
+Target `.my-action-button.input-button-core` inside the wrapper to override InputButtonCore's defaults. Use theme tokens — not private `--_` tokens — for colours that already have theme equivalents:
+
+```css
+@layer components {
+  .my-wrapper {
+    display: flex;
+    align-items: stretch;
+    border: var(--form-element-border-width) solid var(--theme-input-border);
+    border-radius: var(--form-input-border-radius);
+    background-color: var(--theme-input-surface);
+
+    .my-action-button.input-button-core {
+      border-radius: 0;
+      border-inline-start: var(--form-element-border-width) solid var(--theme-input-border);
+      padding-inline: var(--input-padding-inline);
+      min-width: var(--input-min-height);
+      background-color: var(--theme-button-secondary-surface);
+      color: var(--theme-button-secondary-text);
+
+      &:hover {
+        background-color: var(--theme-button-primary-surface);
+        color: var(--theme-button-primary-text);
+      }
+
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+        outline-offset: -4px;
+      }
+    }
+
+    /* Use private tokens only for new semantic states with no theme equivalent */
+    &.some-state {
+      --_state-surface: light-dark(var(--green-01), var(--green-09));
+      --_state-text: light-dark(var(--green-08), var(--green-01));
+
+      .my-action-button.input-button-core {
+        background-color: var(--_state-surface);
+        color: var(--_state-text);
+      }
+    }
+  }
+}
+```
+
+## Real example
+
+`InputCopyCore` — `app/components/forms/input-copy/InputCopyCore.vue`

package/.claude/skills/components/input-copy-core.md

@@ -0,0 +1,66 @@
+# InputCopyCore
+
+Readonly input that displays a value with a one-click copy-to-clipboard button. Intended for license keys, API tokens, share URLs, etc.
+
+**File**: `app/components/forms/input-copy/InputCopyCore.vue`
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | required | `id` attribute on the `<input>` |
+| `value` | `string` | required | Text to display and copy |
+| `copy-label` | `string` | `"Copy"` | Button label before copying |
+| `copied-label` | `string` | `"Copied!"` | Button label after a successful copy |
+| `feedback-duration` | `number` | `2000` | ms to show the copied state before resetting |
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+## Emits
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `copy` | `value: string` | Fires on successful clipboard write |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `icon` | Optional icon shown to the left of the button label (passes through to InputButtonCore `#left`) |
+
+## Behaviour
+
+- Calls `navigator.clipboard.writeText(value)` on button click
+- On success: adds `.copied` class to root, shows `copiedLabel`, emits `copy`
+- After `feedbackDuration` ms: removes `.copied` class, reverts button label
+- Clipboard failure is caught silently — no `.copied` state is set
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.input-copy-core` | root | always present |
+| `.copied` | root | present during feedback window |
+| `.input-copy-field` | `<input>` | the readonly text field |
+| `.input-copy-button` | button | extra class added to InputButtonCore root |
+
+## Usage
+
+```vue
+<InputCopyCore
+  id="license-key-input"
+  value="sk_live_abc123def456"
+  copy-label="Copy key"
+  copied-label="Copied!"
+  :feedback-duration="2000"
+/>
+```
+
+With icon slot (e.g. using a Radix icon):
+
+```vue
+<InputCopyCore id="api-key" value="sk_live_abc123def456">
+  <template #icon>
+    <Icon name="radix-icons:clipboard" class="icon" />
+  </template>
+</InputCopyCore>
+```

package/.claude/skills/components/page-hero-highlights.md

@@ -19,6 +19,8 @@ The layout uses a 4-row CSS Grid with `subgrid` — no `translate`, negative mar
 | `highlightsJustify`     | `"start" \| "center" \| "end" \| "space-between" \| "space-around"` | `"start"`   | Alignment of highlight items along the main axis                                                                                |
 | `maxWidth`              | `string`                                                            | `undefined` | Cap the central content column (e.g. `"1064px"`). Gutters grow to enforce the constraint; below this width they hold at `16px`. |
 | `contentAlign`          | `"start" \| "center"`                                               | `"center"`  | When `maxWidth` is set: `"center"` grows gutters equally; `"start"` pins content to the left with a fixed `16px` left gutter.   |
+| `contentPanel`          | `boolean`                                                           | `true`      | When `true`, renders a decorative panel behind the content slot and offsets the highlights strip. Set to `false` for a flat layout with no backdrop. |
+| `highlightTitleBaseline`| `boolean`                                                           | `false`     | When `true`, fixes the highlight title row to a set height so titles align at a common baseline. Override `--highlight-title-height` to tune. |
 | `styleClassPassthrough` | `string \| string[]`                                                | `[]`        | Extra classes on the root element                                                                                               |
 
 ## Slots
@@ -83,6 +85,64 @@ Example with `HeroText` in the header slot:
 </PageHeroHighlights>
 ```
 
+## PageHeroHighlightsHeader companion component
+
+A co-located companion component for laying out the `#header` slot. Provides a responsive two-area layout: `#start` (title/description) and `#end` (action buttons), stacking vertically on mobile and sitting side-by-side on wider viewports.
+
+Located at: `app/components/04.templates/page-hero-highlights/PageHeroHighlightsHeader.vue`
+
+### PageHeroHighlightsHeader props
+
+| Prop                    | Type                 | Default | Description                       |
+| ----------------------- | -------------------- | ------- | --------------------------------- |
+| `styleClassPassthrough` | `string \| string[]` | `[]`    | Extra classes on the root element |
+
+### PageHeroHighlightsHeader slots
+
+| Slot    | Purpose                                                   |
+| ------- | --------------------------------------------------------- |
+| `start` | Title and description — always rendered, fills full width when `#end` is absent |
+| `end`   | Action buttons — `.phh-end` is only mounted when this slot is provided |
+
+### CSS tokens
+
+| Token              | Default  | Description                              |
+| ------------------ | -------- | ---------------------------------------- |
+| `--phh-padding-block` | `1.6rem` | Block padding on the header              |
+| `--phh-gap`        | `1.6rem` | Gap between `#start` and `#end` areas    |
+| `--phh-end-gap`    | `0.8rem` | Gap between items within `#end`          |
+
+### Usage
+
+```vue
+<PageHeroHighlights tag="section">
+  <template #header="{ headingId }">
+    <PageHeroHighlightsHeader>
+      <template #start>
+        <h1 :id="headingId" class="page-heading-1">Surplus needs</h1>
+        <p class="page-body-normal">Let us know what you need help with.</p>
+      </template>
+      <template #end>
+        <HelpButton />
+        <Button>Create new need</Button>
+      </template>
+    </PageHeroHighlightsHeader>
+  </template>
+  ...
+</PageHeroHighlights>
+```
+
+Omit `#end` for a single-element header — `#start` fills full width with no layout change needed:
+
+```vue
+<PageHeroHighlightsHeader>
+  <template #start>
+    <h1 :id="headingId">Dashboard</h1>
+    <p>Overview of your account activity.</p>
+  </template>
+</PageHeroHighlightsHeader>
+```
+
 ## With aria-labelledby (section tag)
 
 When `tag="section"`, `aria-labelledby` is set automatically. Wire the heading id via the scoped slot prop:

package/.claude/skills/components/site-navigation.md

@@ -0,0 +1,120 @@
+# SiteNavigation
+
+## Overview
+
+`SiteNavigation` is a responsive site-wide navigation component. It renders a horizontal link list on wide viewports and automatically collapses to a burger-menu + slide-down panel on narrow viewports. Collapse is driven by a `ResizeObserver` that compares the list's natural `scrollWidth` against the nav container's `clientWidth` — no breakpoint prop needed.
+
+Both the horizontal list and the panel include animated active/hover indicator decorators (underline indicator + background highlight) that snap into position using CSS custom properties set via JavaScript.
+
+## Component location
+
+`app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue`
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `navItemData` | `NavItemData` | — (required) | Navigation items — see type below |
+| `navAlign` | `"left" \| "center" \| "right"` | `"left"` | Alignment of the horizontal nav list |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<nav>` |
+
+## NavItemData type
+
+```ts
+import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+
+const navItemData: NavItemData = {
+  main: [
+    { text: "Home",     href: "/" },
+    { text: "About",    href: "/about" },
+    { text: "Services", href: "/services", cssName: "is-featured" },
+    { text: "Contact",  href: "/contact", iconName: "heroicons:envelope", isExternal: false },
+  ],
+};
+```
+
+`NavItem` fields:
+
+| Field | Type | Description |
+|---|---|---|
+| `text` | `string` | Link label |
+| `href` | `string` | Link destination |
+| `isExternal` | `boolean?` | Passed to NuxtLink `:external` — opens in new tab |
+| `iconName` | `string?` | Iconify icon name rendered before the label |
+| `cssName` | `string?` | CSS class applied to the `<li>` element |
+
+## Basic usage
+
+```vue
+<SiteNavigation :nav-item-data="navItemData" nav-align="left" />
+```
+
+Always use hyphenated prop names in templates (ESLint enforces this).
+
+## CSS token API
+
+Set these tokens on a parent element (e.g. your `<header>`) to theme the navigation.
+
+```css
+.your-header {
+  /* ── Decorators ────────────────────────────────────── */
+  --site-nav-decorator-indicator-color: var(--rose-05);  /* underline bar */
+
+  /* ── Horizontal nav links ──────────────────────────── */
+  --site-nav-link-color:        var(--warm-01);
+  --site-nav-link-hover-color:  var(--rose-04);
+  --site-nav-link-active-color: var(--rose-05);
+  --site-nav-link-size:         1.6rem;
+  --site-nav-link-weight:       400;
+  --site-nav-link-tracking:     0.06em;
+  --site-nav-gap:               2.2rem;
+  --site-nav-transition:        250ms ease;
+
+  /* ── Mobile panel ──────────────────────────────────── */
+  --site-nav-panel-bg:                  var(--page-bg, #1a1614);
+  --site-nav-panel-border-color:        color-mix(in oklch, var(--rose-05) 35%, transparent);
+  --site-nav-panel-link-color:          var(--warm-01);
+  --site-nav-panel-link-hover-color:    var(--rose-04);
+  --site-nav-panel-link-active-color:   var(--rose-05);
+  --site-nav-panel-padding-block:       1.4rem;
+  --site-nav-panel-padding-inline:      1.5rem;
+  --site-nav-panel-slide-duration:      350ms;
+  --site-nav-panel-slide-easing:        cubic-bezier(0.4, 0, 0.2, 1);
+  --site-nav-panel-decorator-indicator-color: var(--rose-05);
+  --site-nav-panel-indicator-left:      0;      /* position the panel indicator bar */
+  --site-nav-panel-indicator-right:     auto;
+
+  /* ── Burger button ─────────────────────────────────── */
+  --site-nav-burger-color:      var(--warm-01);
+  --site-nav-burger-width:      22px;
+  --site-nav-burger-height:     1.5px;
+  --site-nav-burger-gap:        5px;
+  --site-nav-burger-transition: 300ms ease;
+
+  /* ── Backdrop (teleported to <body>) ───────────────── */
+  --site-nav-backdrop-bg:       oklch(0% 0 0 / 55%);
+  --site-nav-backdrop-blur:     3px;
+  --site-nav-backdrop-duration: 350ms;
+}
+```
+
+## Behaviour notes
+
+- **Collapse detection**: `ResizeObserver` fires on every container resize. The list's `scrollWidth` is cached whenever the list is in the DOM; that cached value is compared against the container's `clientWidth` to set `isCollapsed`.
+- **isLoaded state**: The component uses `useState("site-nav-loaded")` — a Nuxt shared state — to gate visibility until the first measurement is complete, preventing a flash of the wrong nav state on load. The nav renders `opacity: 0` until `is-loaded` is applied.
+- **Teleport**: The backdrop overlay is teleported to `<body>` via `<Teleport>` and is only mounted when `isCollapsed && isLoaded`.
+- **Panel inert**: The `#site-nav-panel` div receives `:inert="!isMenuOpen ? true : undefined"` — it is inert (keyboard/pointer-inaccessible) when closed.
+- **Decorator init**: `initNavDecorators()` and `initPanelDecorators()` inject `<li>` elements with CSS-driven indicator `<div>`s. They query `[data-nav-item]` / `[data-panel-nav-item]` to find links, and look for `router-link-active` to set the initial active position.
+
+## Accessibility
+
+- Root `<nav>` has `aria-label="Site navigation"`.
+- Burger button uses `aria-expanded` (string `"true"/"false"`) and `aria-controls="site-nav-panel"`.
+- Backdrop and indicator `<li>` elements are `aria-hidden="true"`.
+- Panel div is `inert` when closed.
+
+## Related files
+
+- Type: `app/types/components/navigation-horizontal.d.ts`
+- Tests: `app/components/02.molecules/navigation/site-navigation/tests/SiteNavigation.spec.ts`
+- Story: `app/components/02.molecules/navigation/site-navigation/stories/SiteNavigation.stories.ts`

package/.claude/skills/icon-sets.md

@@ -0,0 +1,45 @@
+# Icon Sets
+
+## Overview
+
+`@nuxt/icon` can serve icons from two sources:
+
+1. **Local package** (`@iconify-json/*` installed in the project) — SVG is inlined at build/SSR time, zero runtime cost, no flash.
+2. **Iconify CDN** (`api.iconify.design`) — icon is fetched client-side after JS loads, causing a visible flash of content (FOUC) on first page load.
+
+The layer uses several icon sets across its components. Because these are in the layer's `devDependencies` (not `dependencies`), they are **not automatically installed** in consumer apps. Any missing set falls back to the CDN and will flash.
+
+## How the layer signals missing sets
+
+The layer's `modules/icon-sets.ts` runs at dev/build time and logs an info message listing any icon sets that are used by layer components but not found in the consumer's project. Check the terminal output when running `nuxt dev` or `nuxt build`.
+
+## Component → icon set mapping
+
+| Icon set | Package | Used by |
+|----------|---------|---------|
+| `akar-icons` | `@iconify-json/akar-icons` | DisplayToast, display-prompt variants |
+| `bi` | `@iconify-json/bi` | NavigationItems (overflow caret) |
+| `bitcoin-icons` | `@iconify-json/bitcoin-icons` | Display components |
+| `gravity-ui` | `@iconify-json/gravity-ui` | NavigationItems (burger/ellipsis overflow) |
+| `ic` | `@iconify-json/ic` | CarouselBasic, CarouselFlip, CarouselInfinite, SliderGallery, CanvasSwitcher |
+| `lucide` | `@iconify-json/lucide` | ColourFinder, TreatmentConsultant |
+| `material-symbols` | `@iconify-json/material-symbols` | ServicesSection, form components |
+| `mdi` | `@iconify-json/mdi` | NavigationHorizontal, form components, ServicesCard |
+| `radix-icons` | `@iconify-json/radix-icons` | InputPasswordWithLabel, InputError, DisplayThemeSwitch |
+
+## Fix: install missing packages
+
+```bash
+npm install @iconify-json/akar-icons @iconify-json/bi @iconify-json/bitcoin-icons \
+  @iconify-json/gravity-ui @iconify-json/ic @iconify-json/lucide \
+  @iconify-json/material-symbols @iconify-json/mdi @iconify-json/radix-icons
+```
+
+Only install the sets you actually need — unused ones cost nothing either way, but the install above covers everything the layer ships.
+
+## Notes
+
+- The layer's build-time info message only lists sets missing from the **consumer's own project**. It is not a hard error.
+- A consumer app can install any additional icon sets it needs for its own components — these won't conflict.
+- If you're not using a particular layer component (e.g. `ColourFinder`), missing `@iconify-json/lucide` won't cause any visible problem.
+- The `peerDependencies` + `peerDependenciesMeta (optional: true)` in the layer's `package.json` is the npm-standard signal — package managers like npm 7+ will show a notice for missing optional peers during install.

package/.claude/skills/index.md

@@ -19,6 +19,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ```text
 .claude/skills/
 ├── index.md                    — this file
+├── performance-review.md       — spawn a subagent to inspect recently written code for Vue/Nuxt performance issues before dev handoff
 ├── storybook-add-story.md      — create a Storybook story for a component
 ├── storybook-add-font.md       — add a new font to Storybook
 ├── testing-add-unit-test.md    — create a Vitest unit test with snapshots
@@ -31,6 +32,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── css-grid-max-width-gutters.md             — cap a centre grid column width by growing gutters, with start/center alignment variants
 ├── component-aria-landmark.md        — useAriaLabelledById composable: aria-labelledby for section/main/article/aside tags
 ├── component-export-types.md         — move inline component types to app/types/components/ barrel for consumer imports
+├── component-inline-action-button.md — InputButtonCore variant="inline" pattern for buttons embedded in custom input wrappers
+├── icon-sets.md                      — icon set packages required by layer components, FOUC prevention, component→package map
+├── robots-env-aware.md               — @nuxtjs/robots: allow crawling on prod domain only, block on preview/staging via env var
 └── components/
     ├── accordian-core.md       — AccordianCore indexed dynamic slots (accordian-{n}-summary/icon/content), exclusive-open grouping
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
@@ -44,7 +48,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
-    └── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
+    ├── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
+    ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
+    └── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
 ```
 
 ## Skill file template

package/.claude/skills/performance-review.md

@@ -0,0 +1,105 @@
+# Performance Review
+
+## Overview
+
+Spawn a subagent to inspect recently written or modified code for performance issues and report findings back before handoff to dev. Run this after code is written and ready for review.
+
+## When to invoke
+
+Invoke this skill (`/performance-review`) after completing any of:
+- A new component
+- A significant edit to an existing component
+- A new composable
+- A test file that exercises heavy setup
+
+## Steps
+
+### 1. Identify files to review
+
+Collect the list of files changed in this conversation. If unclear, run `git diff --name-only HEAD` to get recently modified files.
+
+### 2. Spawn the performance review subagent
+
+Use the Agent tool with `subagent_type: "general-purpose"` and the following prompt, substituting `{FILE_LIST}` with the actual file paths:
+
+---
+
+**Subagent prompt template:**
+
+```
+You are a Vue 3 / Nuxt performance reviewer. Inspect the following files for performance issues and produce a concise report.
+
+Files to review:
+{FILE_LIST}
+
+Read each file in full, then check for the following issues. Report only issues that are actually present — do not flag hypothetical problems.
+
+─── Vue / Nuxt Reactivity ───────────────────────────────────────
+□ Expensive operations inside computed properties (should be pure/cheap)
+□ `watch` with no `{ immediate }` where it could cause double-execution on mount
+□ Large objects stored in `ref()` where `shallowRef()` would suffice
+□ Reactive state that is never mutated (should be a plain const)
+□ Missing `watchEffect` cleanup / `onUnmounted` teardown for subscriptions or timers
+
+─── Template Rendering ──────────────────────────────────────────
+□ `v-for` without a stable `:key` (or using array index as key on mutable lists)
+□ Heavy inline expressions in templates (should be computed properties)
+□ `v-if` + `v-for` on the same element (use a wrapping element or computed filter)
+□ Components mounted unconditionally that could be `v-if`-deferred until needed
+□ Missing `v-once` on truly static subtrees
+□ Transitions on elements that trigger layout (width/height) rather than transform/opacity
+
+─── CSS / Styling ───────────────────────────────────────────────
+□ CSS custom properties defined but never consumed (dead tokens)
+□ Expensive selectors: deep descendant chains, universal selectors inside scoped blocks
+□ `transition: all` (transitions every property — prefer explicit property list)
+□ Animations that animate layout properties (top/left/width/height) instead of transform
+□ `v-bind()` in CSS used for values that never change (should be a static custom property)
+
+─── Images / Assets ─────────────────────────────────────────────
+□ `NuxtImg` without explicit `width` and `height` (causes layout shift + Vercel width fallback)
+□ Images without `loading="lazy"` where above-the-fold loading is not required
+□ Large inline SVGs that could be icon components
+
+─── Bundle / Imports ────────────────────────────────────────────
+□ Manual imports of Vue internals (`ref`, `computed`, etc.) — these are auto-imported in Nuxt
+□ Entire libraries imported where only specific named exports are needed
+□ Unused imports left in the file
+
+─── Data & Logic ────────────────────────────────────────────────
+□ Large static data arrays defined inside `<script setup>` (re-created on every HMR — move outside the component or to a separate module)
+□ Nested loops or O(n²) logic in computed properties or render functions
+□ Repeated `.find()` / `.filter()` calls on the same array within a single render — consolidate into one computed
+□ `setTimeout` / `setInterval` not cleared in `onUnmounted`
+
+─── Report format ───────────────────────────────────────────────
+For each issue found, output:
+
+**File:** `path/to/file.vue` (line N)
+**Issue:** One-sentence description of the problem
+**Impact:** Low / Medium / High
+**Fix:** Concrete code change or approach to resolve it
+
+Group findings by file. If no issues are found in a file, skip it.
+End the report with a one-line summary: total issues found, breakdown by impact level.
+```
+
+---
+
+### 3. Review the report
+
+Read the subagent's findings. For each **High** or **Medium** impact issue:
+- Apply the fix immediately if it is straightforward and does not change behaviour
+- Flag it to the user with the suggested fix if it requires a design decision
+
+For **Low** impact issues, present them as a list for the user to decide on.
+
+### 4. Confirm completion
+
+After applying any fixes, re-run the subagent on the modified files to confirm no new issues were introduced.
+
+## Notes
+
+- This skill is read-only when used via the subagent — it does not edit files directly. Edits are made by the main agent after reviewing the report.
+- Focus on issues that are actually present in the code — do not pre-emptively flag patterns that might become a problem.
+- The subagent uses `subagent_type: "general-purpose"` so it has access to all tools (Read, Grep, Glob) needed to inspect the files.

package/.claude/skills/robots-env-aware.md

@@ -0,0 +1,69 @@
+# Environment-Aware robots.txt and Meta Robots
+
+## Overview
+
+SSR apps often run on multiple domains — a preview/staging URL (e.g. Vercel's auto-generated domain) and the real production domain. This skill sets up `@nuxtjs/robots` so that crawling is allowed only on the production host, and blocked everywhere else — covering both `robots.txt` and `<meta name="robots">` injection.
+
+## Prerequisites
+
+- SSR deployment (e.g. Vercel)
+- `@nuxtjs/robots` installed: `npm install @nuxtjs/robots`
+
+## Steps
+
+### 1. Derive `isProduction` at the top of `nuxt.config.ts`
+
+Before `defineNuxtConfig`, read the canonical host from an env var and compare it to the known production domain:
+
+```ts
+const PROD_HOST = "yourdomain.com"
+const canonicalHost = process.env.NUXT_PUBLIC_CANONICAL_HOST ?? "your-preview.vercel.app"
+const isProduction = canonicalHost === PROD_HOST
+```
+
+Using `??` means local dev and Vercel preview deployments default to the non-production host, so no special local config is needed.
+
+### 2. Wire `canonicalHost` into `runtimeConfig` and add the robots module
+
+```ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      canonicalHost,   // shorthand — value comes from the const above
+    },
+  },
+  modules: ["@nuxtjs/robots"],
+  robots: {
+    enabled: isProduction,
+    groups: [
+      {
+        userAgent: ["*"],
+        allow: ["/"],
+      },
+    ],
+    sitemap: [`https://${PROD_HOST}/sitemap.xml`],
+  },
+})
+```
+
+When `enabled: false` the module:
+- Serves `robots.txt` with `Disallow: /` for all user agents
+- Injects `<meta name="robots" content="noindex, nofollow">` on every page
+
+When `enabled: true` it serves the `groups` config and no blocking meta tag.
+
+### 3. Set the env var in Vercel
+
+In the Vercel dashboard → Project → Settings → Environment Variables:
+
+| Name | Value | Environment |
+|---|---|---|
+| `NUXT_PUBLIC_CANONICAL_HOST` | `yourdomain.com` | **Production** only |
+
+Leave it unset for Preview and Development — the `??` fallback in step 1 handles those.
+
+## Notes
+
+- The `sitemap` URL always points to the production host (hardcoded via `PROD_HOST`) so it is never wrong regardless of which environment serves the file
+- `NUXT_PUBLIC_CANONICAL_HOST` follows Nuxt's standard automatic env var mapping for `runtimeConfig.public.canonicalHost`
+- No `sitemap.xml` is required immediately — remove the `sitemap` line until one is generated

package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_error.css

@@ -14,7 +14,7 @@
   --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
   --theme-input-surface-focus: light-dark(var(--slate-01), var(--slate-10));
 
-  --theme-input-border: var(--red-10);
+  --theme-input-border: var(--red-06);
   --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
   --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
 

package/app/assets/styles/setup/02.colours/_amber.css

@@ -7,6 +7,6 @@
   --amber-06: oklch(0.501 0.166 75);
   --amber-07: oklch(0.433 0.144 75);
   --amber-08: oklch(0.383 0.123 75);
-  --amber-09: oklch(0.338 0.1 75);
-  --amber-10: oklch(0.288 0.072 75);
+  --amber-09: oklch(0.238 0.1 75);
+  --amber-10: oklch(0.188 0.072 75);
 }

package/app/assets/styles/setup/03.theming/default/_dark.css

@@ -32,6 +32,16 @@
   --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
   --glass-panel-highlight: rgba(255, 255, 255, 0.04);
 
+  /* ===========================================
+     HERO TEXT VARIABLES
+     =========================================== */
+  --hero-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
+
+  /* ===========================================
+     EYEBROW TEXT VARIABLES
+     =========================================== */
+  --eyebrow-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
+
   /* ===========================================
      STEPPER LIST VARIABLES
      =========================================== */
@@ -66,8 +76,16 @@
   /* ===========================================
      TREATMENT CONSULTANT VARIABLES
      =========================================== */
-  --treatment-consultant-primary-colour: var(--blue-03);
-  --treatment-consultant-border-colour: var(--blue-03);
+  --treatment-consultant-primary-colour: var(--amber-02);
+  --treatment-consultant-primary-foreground: var(--amber-02);
+
+  --treatment-consultant-muted-colour: var(--amber-05);
+  --treatment-consultant-muted-foreground: var(--amber-05);
+
+  --treatment-consultant-background: var(--amber-10);
+  --treatment-consultant-foreground: var(--amber-02);
+
+  --treatment-consultant-border-colour: var(--amber-03);
 
   --treatment-consultant-checked-surface-colour: var(--green-10);
   --treatment-consultant-checked-stroke-colour: var(--green-03);