srcdev-nuxt-components 9.1.52 → 9.1.54

package/.claude/settings.json

@@ -8,7 +8,29 @@
       "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:3000/)",
       "Bash(kill %1)",
       "Bash(xargs kill -9)",
-      "Edit(/.claude/skills/components/**)"
+      "Edit(/.claude/skills/components/**)",
+      "Bash(command -v nvm)",
+      "Bash(command -v fnm)",
+      "Bash(command -v volta)",
+      "Bash(npm --version)",
+      "Bash(python3 -c ' *)",
+      "Bash(node -e ' *)",
+      "Bash(/usr/local/bin/node -e \"...\")",
+      "Bash(which node *)",
+      "Read(//usr/local/bin/**)",
+      "Read(//Users/simoncornforth/.nvm/versions/**)",
+      "Read(//opt/homebrew/**)",
+      "Read(//usr/**)",
+      "Bash(/usr/local/Cellar/node@24/24.16.0/bin/node -e ' *)",
+      "Bash(/usr/local/Cellar/node@24/24.16.0/bin/node --version)",
+      "Bash(/usr/local/Cellar/node@24/24.16.0/bin/npm --version)",
+      "Bash(git -C /Users/simoncornforth/websites/instepreflexology log --oneline -3)",
+      "Bash(git -C /Users/simoncornforth/websites/instepreflexology add package-lock.json .nvmrc)",
+      "Bash(git -C /Users/simoncornforth/websites/instepreflexology commit -m ' *)",
+      "Bash(git -C /Users/simoncornforth/websites/instepreflexology push)"
+    ],
+    "additionalDirectories": [
+      "/Users/simoncornforth/websites/instepreflexology"
     ]
   }
 }

package/.claude/skills/index.md

@@ -41,6 +41,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── component-inline-action-button.md — InputButtonCore variant="inline" pattern for buttons embedded in custom input wrappers
 ├── vue-video-autoplay.md             — autoplay on client-side navigation: use <source> child (not :src on <video>), :key, and explicit v.load()
 ├── icon-sets.md                      — icon set packages required by layer components, FOUC prevention, component→package map
+├── vercel-node-version.md            — .nvmrc pinned to Node 24 is required; without it Vercel uses npm 10 which crashes on versionless optional stubs
 ├── robots-env-aware.md               — @nuxtjs/robots: allow crawling on prod domain only, block on preview/staging via env var
 ├── new-app-scaffold.md               — scaffold a new Nuxt consumer app extending this layer (package.json, nuxt.config, app structure, CLAUDE.md)
 ├── qa-panel.md                       — collapsible dev-only panel for toggling component props live on a page (demo pages and consuming apps)

package/.claude/skills/vercel-node-version.md

@@ -0,0 +1,48 @@
+# Vercel Node Version — .nvmrc Required
+
+## Overview
+
+Every project deploying to Vercel must have a `.nvmrc` file pinned to Node 24. Without it, Vercel defaults to Node 22 (npm 10), which crashes with `npm error Invalid Version:` on platform-specific optional packages that npm 11 (Node 24) handles gracefully.
+
+## The problem
+
+When `npm install` runs on macOS with Node 24, it writes stub entries into `package-lock.json` for platform-specific optional packages that don't apply to the current OS. For example:
+
+```json
+"node_modules/oxc-transform/node_modules/@oxc-transform/binding-linux-arm-gnueabihf": {
+  "optional": true
+}
+```
+
+This stub has no `version` field. npm 11 (Node 24) skips it silently. npm 10 (Node 22) calls `semver.valid()` on the empty version string and throws:
+
+```
+npm error Invalid Version:
+npm error A complete log of this run can be found in: ...
+Error: Command "npm install" exited with 1
+```
+
+The build fails even though the package is optional and not needed on Vercel's Linux x86_64 runtime.
+
+## Fix
+
+### 1. Add `.nvmrc` to the project root
+
+```
+24
+```
+
+Vercel reads `.nvmrc` and provisions Node 24 (npm 11), which handles the versionless stubs without error.
+
+### 2. Verify the file exists before every deployment
+
+If `.nvmrc` is ever accidentally deleted, recreate it immediately. This applies to:
+- `nuxt-components` (the layer)
+- Every consumer app (`instepreflexology`, `luxury-locs-by-natasha-nuxt3`, etc.)
+
+## Notes
+
+- The specific stub that first surfaced this was `@oxc-transform/binding-linux-arm-gnueabihf` — a Linux ARM native binary written as a versionless placeholder on macOS.
+- The build works locally on Node 24 regardless, so the failure is silent until Vercel runs.
+- Vercel also respects the `engines.node` field in `package.json`, but `.nvmrc` is simpler and doesn't require a valid semver range.
+- Do **not** attempt to fix by deleting stubs from `package-lock.json` alone — they reappear on the next `npm install`. The `.nvmrc` file is the durable fix.

package/app/components/01.atoms/page-row/PageRow.vue

@@ -46,9 +46,21 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
     --_content-max-width: var(--page-row-content-max-width, 1064px);
     --_inset-content-max-width: var(--page-row-inset-content-max-width, 840px);
 
-    --full: minmax(var(--_minimum-content-padding), 1fr);
+    /* Minimum gutter for the outer (full) track: 1rem on narrow viewports, dissolves to 0
+       once the viewport exceeds --_content-max-width + 2 × --_minimum-content-padding,
+       at which point 1fr already provides centering space with no forced floor needed. */
+    --_full-track-min: min(
+      var(--_minimum-content-padding),
+      max(0px, calc((var(--_content-max-width) + var(--_minimum-content-padding) * 2 - 100%) / 2))
+    );
+
+    --full: minmax(var(--_full-track-min), 1fr);
     --popout: minmax(0, calc((var(--_popout-max-width) - var(--_content-max-width)) * 0.5));
-    --content: minmax(0, calc((var(--_content-max-width) - var(--_inset-content-max-width)) * 0.5));
+    --content: clamp(
+      0px,
+      calc((100% - var(--_minimum-content-padding) * 2 - var(--_inset-content-max-width)) * 0.5),
+      calc((var(--_content-max-width) - var(--_inset-content-max-width)) * 0.5)
+    );
     --inset-content: min(var(--_inset-content-max-width), 100% - var(--_minimum-content-padding) * 2);
 
     display: grid;
@@ -83,16 +95,30 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
    * its own children span full width, not just control placement when nested.
    * Specificity (0,2,0) — nested .page-row variant overrides below win at (0,3,0).
    */
-  .page-row.full > *         { grid-column: full; }
-  .page-row.popout > *       { grid-column: popout; }
-  .page-row.inset-content > * { grid-column: inset-content; }
+  .page-row.full > * {
+    grid-column: full;
+  }
+  .page-row.popout > * {
+    grid-column: popout;
+  }
+  .page-row.inset-content > * {
+    grid-column: inset-content;
+  }
 
   /* Nested page-rows: symmetric placement by variant class */
   .page-row > .page-row {
-    &.full         { grid-column: full; }
-    &.popout       { grid-column: popout; }
-    &.content      { grid-column: content; }
-    &.inset-content { grid-column: inset-content; }
+    &.full {
+      grid-column: full;
+    }
+    &.popout {
+      grid-column: popout;
+    }
+    &.content {
+      grid-column: content;
+    }
+    &.inset-content {
+      grid-column: inset-content;
+    }
   }
 
   /*
@@ -101,15 +127,27 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
    * Specificity (0,4,0) beats the symmetric rules above at (0,3,0).
    */
   .page-row > .page-row[data-align="start"] {
-    &.popout        { grid-column: full-start / popout-end; }
-    &.content       { grid-column: full-start / content-end; }
-    &.inset-content { grid-column: full-start / inset-content-end; }
+    &.popout {
+      grid-column: full-start / popout-end;
+    }
+    &.content {
+      grid-column: full-start / content-end;
+    }
+    &.inset-content {
+      grid-column: full-start / inset-content-end;
+    }
   }
 
   .page-row > .page-row[data-align="end"] {
-    &.popout        { grid-column: popout-start / full-end; }
-    &.content       { grid-column: content-start / full-end; }
-    &.inset-content { grid-column: inset-content-start / full-end; }
+    &.popout {
+      grid-column: popout-start / full-end;
+    }
+    &.content {
+      grid-column: content-start / full-end;
+    }
+    &.inset-content {
+      grid-column: inset-content-start / full-end;
+    }
   }
 }
 </style>

package/package.json

@@ -1,20 +1,16 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.52",
+  "version": "9.1.54",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
-  "engines": {
-    "node": ">=20.19.0 <23",
-    "npm": ">=10.0.0"
-  },
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output",
     "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",
     "cleaninstall": "npm run clean && npm run reinstall",
-    "dev": "SRCDEV_STANDALONE=true nuxi dev",
+    "dev": "SRCDEV_STANDALONE=true nuxt dev",
     "build": "SRCDEV_STANDALONE=true nuxt build",
     "generate": "SRCDEV_STANDALONE=true nuxt generate",
     "preview": "SRCDEV_STANDALONE=true nuxt preview",