srcdev-nuxt-components 9.1.35 → 9.1.37

package/.claude/settings.json

@@ -18,36 +18,13 @@
       "Bash(git show:*)",
       "Edit(/.claude/skills/components/**)",
       "Bash(npx nuxi:*)",
-      "Bash(node -e \"const t = require\\('/Users/simoncornforth/websites/nuxt-components/node_modules/pinia-plugin-persistedstate'\\); console.log\\(Object.keys\\(t\\)\\)\")",
       "Bash(npx vue-tsc:*)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -5)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 16ac4ef --stat)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -8)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 --stat)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 -- \"*.vue\" \"*.css\")",
       "Bash(npm install:*)",
       "Bash(npm run:*)",
       "Bash(git add:*)",
-      "Bash(ls /Users/simoncornforth/websites/nuxt-components/*.md)",
       "Bash(gh release:*)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components status)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components add .claude/skills/components/services-section.md .claude/skills/components/services-section-grid.md .claude/skills/index.md app/components/03.organisms/services/services-grids/ServicesSectionGrid.vue app/components/03.organisms/services/services-section/ServicesSection.vue app/components/03.organisms/services/services-card/stories/ app/components/03.organisms/services/services-card/tests/ app/components/03.organisms/services/services-grids/stories/ app/components/03.organisms/services/services-grids/tests/ app/components/03.organisms/services/services-section/stories/ app/components/03.organisms/services/services-section/tests/)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components commit -m ':*)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline v9.1.22..HEAD)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline c401cea..HEAD)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 3058d63 --stat)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 0f99d7a --stat)",
       "Bash(node -e ':*)"
     ],
-    "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/app/components/02.molecules/navigation/site-navigation/tests",
-      "/Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/app/pages",
-      "/Users/simoncornforth/websites/nuxt-components/app/assets/styles/extends-layer",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms",
-      "/private/tmp",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video"
-    ]
+    "additionalDirectories": []
   }
 }

package/.claude/settings.local.json

@@ -7,7 +7,35 @@
       "Bash(grep '\"\"typescript\"\"' package.json)",
       "Bash(grep '\"\"@vue/language-server\\\\|@volar\\\\|vue-tsc\"\"' package.json)",
       "Bash(npx nuxi prepare)",
-      "Bash(ls -la /Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/.env*)"
+      "Bash(ls -la /Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/.env*)",
+      "Bash(node -e \"const t = require\\('/Users/simoncornforth/websites/nuxt-components/node_modules/pinia-plugin-persistedstate'\\); console.log\\(Object.keys\\(t\\)\\)\")",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -5)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 16ac4ef --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -8)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 -- \"*.vue\" \"*.css\")",
+      "Bash(ls /Users/simoncornforth/websites/nuxt-components/*.md)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components status)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components add .claude/skills/components/services-section.md .claude/skills/components/services-section-grid.md .claude/skills/index.md app/components/03.organisms/services/services-grids/ServicesSectionGrid.vue app/components/03.organisms/services/services-section/ServicesSection.vue app/components/03.organisms/services/services-card/stories/ app/components/03.organisms/services/services-card/tests/ app/components/03.organisms/services/services-grids/stories/ app/components/03.organisms/services/services-grids/tests/ app/components/03.organisms/services/services-section/stories/ app/components/03.organisms/services/services-section/tests/)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components commit -m ':*)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline v9.1.22..HEAD)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline c401cea..HEAD)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 3058d63 --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 0f99d7a --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components diff app/components/parallax/SectionParallax.vue)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components diff HEAD app/components/parallax/SectionParallax.vue)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components diff --cached)"
+    ],
+    "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/components",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/02.molecules/navigation/site-navigation/tests",
+      "/Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/app/pages",
+      "/Users/simoncornforth/websites/nuxt-components/app/assets/styles/extends-layer",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms",
+      "/private/tmp",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video"
     ]
   }
 }

package/.claude/skills/components/capture-qr-code.md

@@ -0,0 +1,84 @@
+# CaptureQrCode
+
+Live camera QR code scanner. Streams the device camera, detects QR codes in real time, and displays the decoded results inline. Handles camera errors, page visibility changes, and route navigation — stopping media streams cleanly in all cases.
+
+**File**: `app/components/02.molecules/qr-code/CaptureQrCode.vue`
+
+## Prerequisites
+
+The `nuxt-qrcode` Nuxt module must be registered in the consuming app's `nuxt.config.ts`:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["nuxt-qrcode"],
+});
+```
+
+Camera access requires a secure context (HTTPS or localhost) and the user granting camera permission.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.capture-qr-stream` | root | always present |
+| `.camera-stopped` | inner | shown when camera is off but no error |
+| `.camera-error` | inner | shown when an error has occurred |
+| `.scanned-results` | inner | shown when at least one code has been decoded |
+
+## Behaviour
+
+- Camera starts automatically on mount (`state.cameraOn = true`)
+- When the page becomes hidden (tab switch, minimize), the camera stops and media streams are released
+- On route leave (`onBeforeRouteLeave`), the camera stops and streams are released
+- On `<KeepAlive>` deactivate/activate, camera is stopped/restarted accordingly
+- If the user denies camera permission or another error occurs, the `.camera-error` state is shown with the error message and a **Reset camera** button
+- Detected QR codes replace the previous results — each scan is a fresh result set
+- Results are displayed as a `<ul>` inside `.scanned-results`
+
+## Usage
+
+Drop in where camera scanning is needed. No configuration required beyond the module being present:
+
+```vue
+<CaptureQrCode />
+```
+
+With styling:
+
+```vue
+<CaptureQrCode style-class-passthrough="my-scanner" />
+```
+
+## CSS override
+
+The root element is a square (`aspect-ratio: 1 / 1`) by default. Override in a consuming page or component:
+
+```css
+.my-scanner.capture-qr-stream {
+  aspect-ratio: auto;
+  max-width: 40rem;
+}
+
+.my-scanner .camera-error {
+  padding: 1.6rem;
+  border-radius: 0.8rem;
+  background-color: var(--theme-surface-error);
+}
+
+.my-scanner .scanned-results {
+  margin-block-start: 1.6rem;
+  font-size: 1.4rem;
+}
+```
+
+## Notes
+
+- The component does not emit the detected values — results are rendered inline. To act on scan results in a parent, extend the component or use `nuxt-qrcode`'s `QrcodeStream` directly with `@detect`.
+- Media streams are stopped via two strategies: via the `QrcodeStream` component ref and via a document-level `querySelectorAll("video")` sweep — the sweep acts as a safety net if the ref is unavailable.

package/.claude/skills/components/decode-qr-code.md

@@ -0,0 +1,84 @@
+# DecodeQrCode
+
+QR code decoder for static images. Accepts images via file picker or drag-and-drop, decodes any QR codes found, and displays the results inline.
+
+**File**: `app/components/02.molecules/qr-code/DecodeQrCode.vue`
+
+## Prerequisites
+
+The `nuxt-qrcode` Nuxt module must be registered in the consuming app's `nuxt.config.ts`:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["nuxt-qrcode"],
+});
+```
+
+No camera permission is required — this component works entirely with uploaded or dropped image files.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.decode-qr-code` | root | always present |
+| `.qr-code-capture` | file input | the `QrcodeCapture` file-picker element |
+| `.qr-code-dropzone` | drop zone | the `QrcodeDropZone` drag-and-drop area |
+| `.scanned-results` | inner | shown when at least one code has been decoded |
+
+## Behaviour
+
+- Two input methods are rendered side by side: a file picker (`.qr-code-capture`) and a drag-and-drop zone (`.qr-code-dropzone`)
+- Both share the same `onDetect` handler — results are displayed in the same `.scanned-results` list regardless of input method
+- Detected QR codes replace the previous results — each decode is a fresh result set
+- If the decoded array is empty, `.scanned-results` is hidden
+- The drop zone has a dashed border and minimum height by default — style with `.qr-code-dropzone` to customise
+
+## Usage
+
+Drop in where image-based QR decoding is needed:
+
+```vue
+<DecodeQrCode />
+```
+
+With styling:
+
+```vue
+<DecodeQrCode style-class-passthrough="my-decoder" />
+```
+
+## CSS override
+
+```css
+.my-decoder.decode-qr-code {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.my-decoder .qr-code-dropzone {
+  min-height: 12rem;
+  border-radius: 1rem;
+  border-color: var(--theme-input-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.my-decoder .scanned-results {
+  margin-block-start: 1.6rem;
+  font-size: 1.4rem;
+}
+```
+
+## Notes
+
+- Like `CaptureQrCode`, results are rendered inline and not emitted. To act on results in a parent, extend the component or use `nuxt-qrcode`'s `QrcodeCapture` / `QrcodeDropZone` primitives directly.
+- The component renders both input methods unconditionally. If only one is needed, use the underlying `QrcodeCapture` or `QrcodeDropZone` primitives directly.

package/.claude/skills/components/display-qr-code.md

@@ -0,0 +1,64 @@
+# DisplayQrCode
+
+Renders a styled QR code SVG from a string value. Supports colour, size, corner radius, and pixel/marker shape variants.
+
+**File**: `app/components/01.atoms/qr-code/DisplayQrCode.vue`
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `qr-value` | `string` | required | The string to encode into the QR code |
+| `variant` | `QrCodeVariant` | `{ inner: "default", marker: "default", pixel: "default" }` | Shape variants for inner markers, outer markers, and pixels |
+| `radius` | `number` | `0` | Corner rounding applied to pixels/markers (0–1 scale) |
+| `black-color` | `string` | `"currentColor"` | Colour for the dark modules |
+| `white-color` | `string` | `"transparent"` | Colour for the light modules |
+| `size` | `string` | `"256px"` | Width of the QR code (height matches via `aspect-ratio: 1 / 1`) |
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+### QrCodeVariant type
+
+```typescript
+import type { QrCodeVariant } from "srcdev-nuxt-components/types/components";
+
+// Each field accepts: "default" | "circle" | "rounded" | "dots" | "classy" | "classy-rounded"
+const variant: QrCodeVariant = {
+  inner: "circle",
+  marker: "rounded",
+  pixel: "dots",
+};
+```
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.display-qr-code` | root | always present |
+
+## Usage
+
+Minimal — encodes a URL with default styling:
+
+```vue
+<DisplayQrCode qr-value="https://example.com" />
+```
+
+Custom size, colour, and rounded pixels:
+
+```vue
+<DisplayQrCode
+  qr-value="https://example.com"
+  size="320px"
+  black-color="#1a1a2e"
+  white-color="#f5f5f5"
+  :radius="0.5"
+  :variant="{ inner: 'circle', marker: 'rounded', pixel: 'default' }"
+/>
+```
+
+## Notes
+
+- The component renders directly as the `Qrcode` element from `nuxt-qrcode` — there is no wrapper `<div>`. The `.display-qr-code` class is applied to the `Qrcode` root, which renders as an `<svg>`.
+- `size` is applied via CSS `v-bind()` — pass any valid CSS length value (`px`, `rem`, `%`, etc.).
+- `black-color` defaults to `currentColor`, so the QR code inherits the surrounding text colour automatically unless overridden.
+- `white-color` defaults to `transparent`, making the background of the QR code see-through by default.

package/.claude/skills/index.md

@@ -71,7 +71,10 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
-    └── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
+    ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
+    ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
+    ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
+    └── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
 ```
 
 ## Skill file template

package/app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { nextTick } from "vue";
 import BannerVideo from "../BannerVideo.vue";
 
 const defaultProps = {
@@ -41,9 +40,9 @@ describe("BannerVideo", () => {
 
   // ─── Root element ────────────────────────────────────────────────────────
 
-  it("renders a <section> as the root element by default", async () => {
+  it("renders a <div> as the root element by default", async () => {
     const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    expect(wrapper.element.tagName).toBe("SECTION");
+    expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("renders the specified tag as root", async () => {
@@ -194,15 +193,12 @@ describe("BannerVideo", () => {
     expect(wrapper.attributes("data-depth")).toBe("md");
   });
 
-  it.each(["xs", "sm", "md", "lg", "xl"] as const)(
-    "sets data-depth to %s when depth prop is %s",
-    async (depth) => {
-      const wrapper = await mountSuspended(BannerVideo, {
-        props: { ...defaultProps, depth },
-      });
-      expect(wrapper.attributes("data-depth")).toBe(depth);
-    }
-  );
+  it.each(["xs", "sm", "md", "lg", "xl"] as const)("sets data-depth to %s when depth prop is %s", async (depth) => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, depth },
+    });
+    expect(wrapper.attributes("data-depth")).toBe(depth);
+  });
 
   // ─── CSS custom properties ───────────────────────────────────────────────
 
@@ -261,7 +257,10 @@ describe("BannerVideo", () => {
   });
 
   it("reflects verticalPosition prop in --_align-self", async () => {
-    for (const [prop, expected] of [["start", "start"], ["end", "end"]] as const) {
+    for (const [prop, expected] of [
+      ["start", "start"],
+      ["end", "end"],
+    ] as const) {
       const wrapper = await mountSuspended(BannerVideo, {
         props: { ...defaultProps, verticalPosition: prop },
       });
@@ -276,7 +275,10 @@ describe("BannerVideo", () => {
   });
 
   it("reflects horizontalPosition prop in --_justify-self", async () => {
-    for (const [prop, expected] of [["start", "start"], ["end", "end"]] as const) {
+    for (const [prop, expected] of [
+      ["start", "start"],
+      ["end", "end"],
+    ] as const) {
       const wrapper = await mountSuspended(BannerVideo, {
         props: { ...defaultProps, horizontalPosition: prop },
       });

package/app/components/01.atoms/banner-video/tests/__snapshots__/BannerVideo.spec.ts.snap

@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BannerVideo > renders correct HTML structure (all props set) 1`] = `
-"<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+"<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
     <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
-  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
+  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
 `;
 
 exports[`BannerVideo > renders correct HTML structure (default props) 1`] = `
-"<section class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+"<div class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
     <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
-  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></section>"
+  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></div>"
 `;

package/app/components/01.atoms/qr-code/DisplayQrCode.vue

@@ -0,0 +1,50 @@
+<template>
+  <Qrcode
+    :value="qrValue"
+    class="display-qr-code"
+    :variant
+    :radius
+    :black-color
+    :white-color
+    :class="[elementClasses]"
+  />
+</template>
+
+<script setup lang="ts">
+import type { QrCodeVariant } from "~/types/components";
+
+interface Props {
+  qrValue: string;
+  variant?: QrCodeVariant;
+  radius?: number;
+  blackColor?: string;
+  whiteColor?: string;
+  size?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: () => ({ inner: "default", marker: "default", pixel: "default" }),
+  radius: 0,
+  blackColor: "currentColor",
+  whiteColor: "transparent",
+  size: "256px",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .display-qr-code {
+    aspect-ratio: 1 / 1;
+    width: v-bind(size);
+  }
+}
+</style>