srcdev-nuxt-components 9.1.29 → 9.1.31

package/README.md

@@ -56,6 +56,21 @@ To ensure skills are always up to date and `nuxt prepare` is never forgotten, co
 
 ---
 
+## Scaffolding a New App
+
+A Claude Code skill is included to scaffold a new Nuxt consumer app from scratch. It generates
+`package.json`, `nuxt.config.ts`, ESLint/Prettier config, the full `app/` directory structure,
+and a `CLAUDE.md` — all pre-wired to extend this layer correctly.
+
+**Trigger it by saying to Claude Code:**
+
+> "Scaffold a new layer consumer app. Repo: `/path/to/repo`, name: `my-app`, domain: `myapp.co.uk`, fonts: `Fraunces, Manrope`."
+
+The skill is available at `.claude/skills/new-app-scaffold.md` once copied into your project
+via `npm run setup:claude`.
+
+---
+
 ## Consumer App Configuration
 
 Configuration options for apps extending this layer. All options go in the consumer's `nuxt.config.ts` under `runtimeConfig.public` and can also be set via environment variable.

package/app/components/01.atoms/banner-video/BannerVideo.vue

@@ -3,10 +3,8 @@
     :is="tag"
     class="banner-video"
     :class="elementClasses"
+    :data-depth="depth"
     :style="{
-      '--_max-height': maxHeight,
-      '--_max-height-tablet': maxHeightTablet,
-      '--_max-height-mobile': maxHeightMobile,
       '--_aspect-ratio': aspectRatio,
       '--_align-self': verticalPosition,
       '--_justify-self': horizontalPosition,
@@ -55,12 +53,12 @@ interface Props {
   imgWidth?: number;
   /** Intrinsic height of the poster image — required for NuxtImg optimisation. */
   imgHeight?: number;
-  /** Maximum height at desktop (≥64em). Defaults to `"56rem"`. */
-  maxHeight?: string;
-  /** Maximum height at tablet (48em–64em). Falls back to `maxHeight` when unset. */
-  maxHeightTablet?: string;
-  /** Maximum height on mobile (<48em). Falls back to `maxHeightTablet` then `maxHeight` when unset. */
-  maxHeightMobile?: string;
+  /**
+   * Depth tier controlling the responsive max-height via a `clamp()` scale.
+   * Each tier maps to a `--theme-banner-video-max-height-{depth}` CSS token that
+   * consuming pages can override. Defaults to `"md"`.
+   */
+  depth?: "xs" | "sm" | "md" | "lg" | "xl";
   /**
    * CSS aspect-ratio of the banner container (e.g. `"16/9"`, `"21/9"`, `"4/3"`).
    * Provides the intrinsic height that `max-height` caps at larger viewport widths.
@@ -76,13 +74,11 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  tag: "section",
+  tag: "div",
   alt: "",
   imgWidth: 1920,
   imgHeight: 1080,
-  maxHeight: "56rem",
-  maxHeightTablet: undefined,
-  maxHeightMobile: undefined,
+  depth: "md",
   aspectRatio: "21/9",
   objectFit: "cover",
   verticalPosition: "center",
@@ -156,19 +152,29 @@ onActivated(() => {
 <style lang="css">
 @layer components {
   .banner-video {
+    --_max-height: var(--theme-banner-video-max-height, clamp(28rem, 38vw, 56rem));
+
     display: grid;
     grid-template-areas: "media";
     aspect-ratio: var(--_aspect-ratio, 16/9);
-    max-height: var(--_max-height-mobile, var(--_max-height, 56rem));
+    max-height: var(--_max-height);
     width: 100%;
     overflow: hidden;
 
-    @media (min-width: 48em) {
-      max-height: var(--_max-height-tablet, var(--_max-height, 56rem));
+    &[data-depth="xs"] {
+      --_max-height: var(--theme-banner-video-max-height-xs, clamp(12rem, 15vw, 24rem));
     }
-
-    @media (min-width: 64em) {
-      max-height: var(--_max-height, 56rem);
+    &[data-depth="sm"] {
+      --_max-height: var(--theme-banner-video-max-height-sm, clamp(18rem, 22vw, 36rem));
+    }
+    &[data-depth="md"] {
+      --_max-height: var(--theme-banner-video-max-height-md, clamp(28rem, 38vw, 56rem));
+    }
+    &[data-depth="lg"] {
+      --_max-height: var(--theme-banner-video-max-height-lg, clamp(40rem, 52vw, 72rem));
+    }
+    &[data-depth="xl"] {
+      --_max-height: var(--theme-banner-video-max-height-xl, clamp(52rem, 65vw, 90rem));
     }
 
     .video {

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

@@ -36,19 +36,10 @@ const meta: Meta<typeof BannerVideo> = {
       description: "HTML element rendered as the root",
       table: { category: "Markup" },
     },
-    maxHeight: {
-      control: "text",
-      description: "Maximum height at desktop (≥64em). Defaults to 56rem",
-      table: { category: "Layout" },
-    },
-    maxHeightTablet: {
-      control: "text",
-      description: "Maximum height at tablet (48em–64em). Falls back to maxHeight when unset",
-      table: { category: "Layout" },
-    },
-    maxHeightMobile: {
-      control: "text",
-      description: "Maximum height on mobile (<48em). Falls back through tablet → desktop when unset",
+    depth: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+      description: "Responsive max-height tier. Each maps to a clamp() scale; override via --theme-banner-video-max-height-{depth}",
       table: { category: "Layout" },
     },
     aspectRatio: {
@@ -82,7 +73,7 @@ const meta: Meta<typeof BannerVideo> = {
     docs: {
       description: {
         component:
-          "A full-width banner that plays a muted, looping mp4 video. The poster image is shown before the video loads, when the video fails to play, and whenever the user has `prefers-reduced-motion: reduce` set. The banner is sized via `aspect-ratio` with per-breakpoint `max-height` caps — no fixed pixel heights. `objectFit` controls how media fills the frame. `verticalPosition` and `horizontalPosition` control the crop focal point — the video uses CSS grid alignment (`align-self`/`justify-self`) while the fallback image uses `object-position`.",
+          "A full-width banner that plays a muted, looping mp4 video. The poster image is shown before the video loads, when the video fails to play, and whenever the user has `prefers-reduced-motion: reduce` set. The banner is sized via `aspect-ratio` with a responsive `max-height` driven by the `depth` tier (`xs` → `xl`). Each tier uses a `clamp()` scale and exposes a `--theme-banner-video-max-height-{depth}` token for consuming pages to override. `objectFit` controls how media fills the frame. `verticalPosition` and `horizontalPosition` control the crop focal point.",
       },
     },
   },
@@ -99,7 +90,7 @@ export const Default: Story = {
     imgWidth: 1920,
     imgHeight: 1080,
     tag: "section",
-    maxHeight: "56rem",
+    depth: "md",
     aspectRatio: "21/9",
     objectFit: "cover",
     verticalPosition: "center",
@@ -108,83 +99,81 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Default props. The lake video plays muted and looped at a 21/9 aspect ratio, capped at 56rem on desktop.",
+        story: "Default props. The lake video plays muted and looped at a 21/9 aspect ratio with the md depth tier (clamp 28rem → 56rem).",
       },
     },
   },
 };
 
-export const Widescreen: Story = {
+export const Compact: Story = {
   args: {
     ...Default.args,
-    aspectRatio: "21/9",
-    maxHeight: "80rem",
+    depth: "xs",
+    verticalPosition: "end",
   },
   parameters: {
     docs: {
       description: {
-        story: "A wider cinematic crop with a raised maxHeight, giving the banner more vertical presence on large screens.",
+        story: "xs depth tier (clamp 12rem → 24rem) — a thin strip banner. verticalPosition: 'end' crops to the bottom of the frame.",
       },
     },
   },
 };
 
-export const Standard169: Story = {
+export const Shallow: Story = {
   args: {
     ...Default.args,
-    aspectRatio: "16/9",
-    maxHeight: "56rem",
+    depth: "sm",
   },
   parameters: {
     docs: {
       description: {
-        story: "Standard 16/9 aspect ratio — matches a typical video's native ratio, so objectPosition has minimal visible effect unless the frame is very narrow.",
+        story: "sm depth tier (clamp 18rem → 36rem) — a shorter banner suitable for secondary sections.",
       },
     },
   },
 };
 
-export const ShortBanner: Story = {
+export const Deep: Story = {
   args: {
     ...Default.args,
-    maxHeight: "32rem",
-    verticalPosition: "end",
+    depth: "lg",
+    aspectRatio: "21/9",
   },
   parameters: {
     docs: {
       description: {
-        story: "A shallower banner capped at 32rem. verticalPosition: 'end' shifts the crop to show the bottom of the frame.",
+        story: "lg depth tier (clamp 40rem → 72rem) — a tall cinematic banner with more vertical presence on large screens.",
       },
     },
   },
 };
 
-export const FullViewportHeight: Story = {
+export const Hero: Story = {
   args: {
     ...Default.args,
-    maxHeight: "100vh",
+    depth: "xl",
     aspectRatio: "16/9",
   },
   parameters: {
     docs: {
       description: {
-        story: "maxHeight set to 100vh — the banner fills the full viewport height on large screens and aspect-ratio controls height on smaller ones.",
+        story: "xl depth tier (clamp 52rem → 90rem) — near full-screen hero. Pair with a 16/9 ratio to maximise coverage.",
       },
     },
   },
 };
 
-export const ResponsiveBreakpoints: Story = {
+export const Standard169: Story = {
   args: {
     ...Default.args,
-    maxHeight: "56rem",
-    maxHeightTablet: "40rem",
-    maxHeightMobile: "24rem",
+    aspectRatio: "16/9",
+    depth: "md",
   },
   parameters: {
     docs: {
       description: {
-        story: "Per-breakpoint max-height: 56rem desktop, 40rem tablet (≥48em), 24rem mobile (<48em). Resize the viewport to see each cap take effect.",
+        story: "Standard 16/9 aspect ratio with md depth — matches a typical video's native ratio.",
       },
     },
   },

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

@@ -31,7 +31,8 @@ describe("BannerVideo", () => {
         alt: "Lake banner",
         imgWidth: 1280,
         imgHeight: 720,
-        height: "40rem",
+        depth: "xl",
+        aspectRatio: "16/9",
         styleClassPassthrough: ["full-bleed"],
       },
     });
@@ -186,49 +187,24 @@ describe("BannerVideo", () => {
     expect(wrapper.find("img[data-nuxt-img]").attributes("decoding")).toBe("async");
   });
 
-  // ─── CSS custom properties ───────────────────────────────────────────────
-
-  it("sets --_max-height to 56rem by default", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_max-height")).toBe("56rem");
-  });
-
-  it("reflects maxHeight prop in --_max-height", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
-      props: { ...defaultProps, maxHeight: "80rem" },
-    });
-    const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_max-height")).toBe("80rem");
-  });
+  // ─── depth / data-depth ──────────────────────────────────────────────────
 
-  it("does not set --_max-height-tablet when maxHeightTablet is not provided", async () => {
+  it("sets data-depth to md by default", async () => {
     const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_max-height-tablet")).toBe("");
+    expect(wrapper.attributes("data-depth")).toBe("md");
   });
 
-  it("reflects maxHeightTablet prop in --_max-height-tablet", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
-      props: { ...defaultProps, maxHeightTablet: "48rem" },
-    });
-    const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_max-height-tablet")).toBe("48rem");
-  });
-
-  it("does not set --_max-height-mobile when maxHeightMobile is not provided", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_max-height-mobile")).toBe("");
-  });
+  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("reflects maxHeightMobile prop in --_max-height-mobile", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
-      props: { ...defaultProps, maxHeightMobile: "32rem" },
-    });
-    const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_max-height-mobile")).toBe("32rem");
-  });
+  // ─── CSS custom properties ───────────────────────────────────────────────
 
   it("sets --_aspect-ratio to 21/9 by default", async () => {
     const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });

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" style="--_max-height: 56rem; --_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;" height="40rem"><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" 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>"
 `;
 
 exports[`BannerVideo > renders correct HTML structure (default props) 1`] = `
-"<section class="banner-video" style="--_max-height: 56rem; --_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;">
+"<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;">
     <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>"
 `;

package/app/components/01.atoms/grid-stack/GridStack.vue

@@ -0,0 +1,34 @@
+<template>
+  <component :is="tag" class="grid-stack" :class="[elementClasses]">
+    <div v-for="(_, name) in $slots" :key="name" class="grid-stack__layer">
+      <slot :name="name"></slot>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+  .grid-stack {
+    display: grid;
+    grid-template-areas: "stack";
+
+    .grid-stack__layer {
+      grid-area: stack;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/grid-stack/stories/GridStack.stories.ts

@@ -0,0 +1,162 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import GridStackComponent from "../GridStack.vue";
+import BannerVideoComponent from "../../banner-video/BannerVideo.vue";
+
+interface GridStackArgs {
+  tag: "div" | "section" | "article" | "main";
+  styleClassPassthrough: string[];
+}
+
+export default {
+  title: "Atoms/Layout/GridStack",
+  component: GridStackComponent,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "HTML element rendered as the root",
+      table: { category: "Markup" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "div",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Stacks slot content in the z-axis using `grid-template-areas` — no `position: absolute`. All named slots share a single grid area (`stack`), so they overlap in DOM order: the last slot renders on top. The container sizes to the tallest child (usually the base layer). Slot names are free-form; `layer-1`, `layer-2`, etc. is the conventional pattern.",
+      },
+    },
+  },
+} as Meta<GridStackArgs>;
+
+// ── Two layers ──────────────────────────────────────────────────────────────
+
+const TwoLayersTemplate: StoryFn<GridStackArgs> = (args) => ({
+  components: { GridStackComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <GridStackComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+      <template #layer-1>
+        <div style="display: flex; align-items: center; justify-content: center; min-block-size: 24rem; background: #e2e8f0; border-radius: 0.8rem; font-size: 1.4rem; font-weight: 600; color: #475569;">
+          layer-1 (base)
+        </div>
+      </template>
+      <template #layer-2>
+        <div style="display: flex; align-items: flex-end; justify-content: flex-start; padding: 2rem; background: linear-gradient(to top, rgba(15,23,42,0.6) 0%, transparent 60%); border-radius: 0.8rem; pointer-events: none; color: white; font-size: 1.4rem; font-weight: 600;">
+          layer-2 (overlay)
+        </div>
+      </template>
+    </GridStackComponent>
+  `,
+});
+
+export const TwoLayers = TwoLayersTemplate.bind({});
+TwoLayers.args = {};
+TwoLayers.parameters = {
+  docs: {
+    description: {
+      story:
+        "The most common use: a base layer that drives the container height, with a second layer overlaid on top. The overlay uses `pointer-events: none` so the base layer remains interactive.",
+    },
+  },
+};
+
+// ── Three layers ─────────────────────────────────────────────────────────────
+
+const ThreeLayersTemplate: StoryFn<GridStackArgs> = (args) => ({
+  components: { GridStackComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <GridStackComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+      <template #layer-1>
+        <div style="display: flex; align-items: center; justify-content: center; min-block-size: 28rem; background: #e2e8f0; border-radius: 0.8rem; font-size: 1.4rem; font-weight: 600; color: #475569;">
+          layer-1 (base)
+        </div>
+      </template>
+      <template #layer-2>
+        <div style="display: flex; align-items: center; justify-content: center; margin: 2rem; border-radius: 0.6rem; border: 2px dashed #f97316; background: rgba(249,115,22,0.1); color: #c2410c; font-size: 1.4rem; font-weight: 600;">
+          layer-2 (mid)
+        </div>
+      </template>
+      <template #layer-3>
+        <div style="display: flex; align-items: flex-end; justify-content: flex-start; padding: 2rem; background: linear-gradient(to top, rgba(15,23,42,0.6) 0%, transparent 50%); border-radius: 0.8rem; pointer-events: none; color: white; font-size: 1.4rem; font-weight: 600;">
+          layer-3 (top)
+        </div>
+      </template>
+    </GridStackComponent>
+  `,
+});
+
+export const ThreeLayers = ThreeLayersTemplate.bind({});
+ThreeLayers.args = {};
+ThreeLayers.parameters = {
+  docs: {
+    description: {
+      story:
+        "Three layers stacked in the same grid area. DOM order is z-order — layer-3 is always on top regardless of z-index. The dashed mid-layer shows how intermediate layers behave.",
+    },
+  },
+};
+
+// ── BannerVideo with overlay ──────────────────────────────────────────────────
+
+const VideoOverlayTemplate: StoryFn<GridStackArgs> = (args) => ({
+  components: { GridStackComponent, BannerVideoComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <GridStackComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+      <template #layer-1>
+        <BannerVideoComponent
+          src="/images/banners/video/lake-banner.mp4"
+          poster="/images/banners/video/lake-banner.jpg"
+          alt="A serene lake landscape"
+          :img-width="1920"
+          :img-height="1080"
+          max-height="56rem"
+          aspect-ratio="21/9"
+          object-fit="cover"
+          vertical-position="center"
+          horizontal-position="center"
+        />
+      </template>
+      <template #layer-2>
+        <div style="display: grid; place-items: center; pointer-events: none;">
+          <div style="text-align: center; padding: 2.4rem; pointer-events: auto;">
+            <p style="font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: white; margin-block-end: 0.8rem; opacity: 0.8;">
+              GridStack layer-2
+            </p>
+            <h2 style="font-size: 4rem; font-weight: 700; color: white; margin-block-end: 1.2rem; text-shadow: 0 2px 12px rgba(0,0,0,0.5);">
+              Content over video
+            </h2>
+            <p style="font-size: 1.6rem; color: white; opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,0.4);">
+              No <code style="font-family: monospace; background: rgba(0,0,0,0.3); padding: 0.1em 0.4em; border-radius: 0.3rem;">position: absolute</code> required.
+            </p>
+          </div>
+        </div>
+      </template>
+    </GridStackComponent>
+  `,
+});
+
+export const WithVideoOverlay = VideoOverlayTemplate.bind({});
+WithVideoOverlay.args = {};
+WithVideoOverlay.parameters = {
+  docs: {
+    description: {
+      story:
+        "The primary intended use case: a BannerVideo as the base layer with a content overlay on top. The overlay container uses `pointer-events: none` so the video remains interactive; `pointer-events: auto` is restored on the text content itself.",
+    },
+  },
+};

package/app/components/01.atoms/grid-stack/tests/GridStack.spec.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import GridStack from "../GridStack.vue";
+
+describe("GridStack", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(GridStack);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders as div by default", async () => {
+    const wrapper = await mountSuspended(GridStack);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders a different tag when provided", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      props: { tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  it("renders slot content", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      slots: {
+        "layer-1": "<div>Layer 1</div>",
+      },
+    });
+    expect(wrapper.text()).toContain("Layer 1");
+  });
+
+  it("renders multiple slots as stacked layers", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      slots: {
+        "layer-1": "<div>Layer 1</div>",
+        "layer-2": "<div>Layer 2</div>",
+        "layer-3": "<div>Layer 3</div>",
+      },
+    });
+    const layers = wrapper.findAll(".grid-stack__layer");
+    expect(layers).toHaveLength(3);
+    expect(layers[0]!.text()).toBe("Layer 1");
+    expect(layers[1]!.text()).toBe("Layer 2");
+    expect(layers[2]!.text()).toBe("Layer 3");
+  });
+
+  it("renders no layers when no slots are provided", async () => {
+    const wrapper = await mountSuspended(GridStack);
+    expect(wrapper.findAll(".grid-stack__layer")).toHaveLength(0);
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      props: { styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+});

package/app/composables/useCanonicalUrl.ts

@@ -0,0 +1,23 @@
+export const useCanonicalUrl = () => {
+  const route = useRoute();
+  const config = useRuntimeConfig();
+
+  const canonicalHost = config.public.canonicalHost;
+
+  // Construct the canonical URL
+  const canonicalUrl = `https://${canonicalHost}${route.path}`;
+
+  // Set the canonical link in the head
+  useHead({
+    link: [
+      {
+        rel: 'canonical',
+        href: canonicalUrl,
+      },
+    ],
+  });
+
+  return {
+    canonicalUrl,
+  };
+};

package/app/composables/useCapitalize.ts

@@ -0,0 +1,3 @@
+export function useCapitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}