srcdev-nuxt-components 9.2.4 → 9.2.5

package/.claude/skills/setup-postinstall.md

@@ -17,11 +17,17 @@ A consumer app's `postinstall` script runs both automatically after every `npm i
 
 ```json
 "scripts": {
-  "setup:claude": "cp -r node_modules/srcdev-nuxt-components/.claude/skills .claude/skills/srcdev-nuxt-components",
-  "postinstall": "nuxt prepare && npm run setup:claude"
+  "setup:claude": "mkdir -p .claude/skills/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/skills/. .claude/skills/srcdev-nuxt-components",
+  "postinstall": "node node_modules/srcdev-nuxt-components/scripts/copy-snippets.mjs && nuxt prepare && npm run setup:claude"
 }
 ```
 
+This postinstall hook does three things in order:
+
+1. Copies VSCode snippets from the layer to your `.vscode/` folder
+2. Runs `nuxt prepare` to generate type declarations
+3. Runs `setup:claude` to copy skills into `.claude/skills/srcdev-nuxt-components/`
+
 ### 2. Check whether your app needs an env flag for nuxt prepare
 
 Some apps set an env var to switch `nuxt.config.ts` behaviour when running outside the full dev server (e.g. `NUXT_STANDALONE=true`). Check your own `nuxt.config.ts` — if it gates any config behind such a variable, add it to the `postinstall` command:
@@ -42,7 +48,7 @@ From this point on, `npm install` and `npm ci` trigger both steps automatically.
 
 ## Notes
 
+- **Snippet copy must run in consumer app**: npm doesn't invoke postinstall hooks for dependencies. Each consumer app must explicitly call `scripts/copy-snippets.mjs` in its own postinstall to copy VSCode snippets to `.vscode/`. The layer's postinstall is used when the layer runs standalone, but consumers are responsible for their own `.vscode/` folder.
 - Skills land in `.claude/skills/srcdev-nuxt-components/` — safe to re-run without overwriting your own project's skills.
-- VSCode snippets are copied to `.vscode/` automatically by the layer's postinstall — no extra step needed on the consumer's side. They're available in VSCode's autocomplete immediately after `npm install`.
-- `postinstall` also fires on `npm ci`, so CI environments get the skills too if they have a `.claude/` directory in the project.
-- If you do not want `postinstall` running in CI, guard it: `"postinstall": "[ \"$CI\" = \"true\" ] || (nuxt prepare && npm run setup:claude)"`.
+- `postinstall` also fires on `npm ci`, so CI environments get the skills and snippets too if they have a `.claude/` directory in the project.
+- If you do not want `postinstall` running in CI, guard it: `"postinstall": "[ \"$CI\" = \"true\" ] || (node node_modules/srcdev-nuxt-components/scripts/copy-snippets.mjs && nuxt prepare && npm run setup:claude)"`.

package/README.md

@@ -43,16 +43,22 @@ Skills are copied into `.claude/skills/srcdev-nuxt-components/` so they never co
 
 ### Automate with postinstall (recommended)
 
-To ensure skills are always up to date and `nuxt prepare` is never forgotten, combine both into a `postinstall` script. npm runs this automatically after every `npm install`:
+To ensure skills are always up to date, VSCode snippets are installed, and `nuxt prepare` is never forgotten, add a `postinstall` script. npm runs this automatically after every `npm install`:
 
 ```json
 "scripts": {
-  "setup:claude": "cp -r node_modules/srcdev-nuxt-components/.claude/skills .claude/skills/srcdev-nuxt-components",
-  "postinstall": "nuxt prepare && npm run setup:claude"
+  "setup:claude": "mkdir -p .claude/skills/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/skills/. .claude/skills/srcdev-nuxt-components",
+  "postinstall": "node node_modules/srcdev-nuxt-components/scripts/copy-snippets.mjs && nuxt prepare && npm run setup:claude"
 }
 ```
 
-> If your app uses a standalone env flag for `nuxt prepare` (e.g. `NUXT_STANDALONE=true`), include it in the `postinstall` command. This is project-specific — check your own `nuxt.config.ts` to confirm whether it is needed.
+**What this does:**
+
+1. `copy-snippets.mjs` — copies VSCode snippets (`.code-snippets` files) from the layer to your `.vscode/` folder
+2. `nuxt prepare` — generates Nuxt type declarations
+3. `setup:claude` — copies skills into `.claude/skills/srcdev-nuxt-components/`
+
+> **Note**: The snippet copy must run from your consumer app's postinstall, not the layer's. npm doesn't invoke postinstall hooks for dependencies, so each consumer app is responsible for copying snippets into its own `.vscode/` folder. If your app uses a standalone env flag for `nuxt prepare` (e.g. `NUXT_STANDALONE=true`), add it before `nuxt prepare`. This is project-specific — check your own `nuxt.config.ts` to confirm whether it is needed.
 
 ---
 

package/app/components/02.molecules/pricing-card/CONSUMER-STYLING.md

@@ -5,6 +5,9 @@
 All `--pricing-card-*` tokens are the stable override surface. Set them at any scope (global, page,
 or instance) without touching the component itself.
 
+Note: the price amount defaults to a `$` prefix. Pass `currency-symbol="£"` (or any other symbol) to
+override it — there is no locale-aware formatting, just a literal prefix character.
+
 | Token | Default | Controls |
 |---|---|---|
 | `--pricing-card-border` | `1px solid var(--slate-03)` | Card border |
@@ -26,6 +29,7 @@ or instance) without touching the component itself.
 | `--pricing-card-period-color` | `#666` | Billing period text colour |
 | `--pricing-card-description-color` | `#555` | Plan description text colour |
 | `--pricing-card-feature-color` | `#333` | Feature list text colour |
+| `--pricing-card-cta-align` | `flex-start` | CTA wrapper `align-self` — set to `stretch`, `center`, or `flex-end` to change CTA alignment/width within the card |
 | `--pricing-card-cta-bg` | `var(--theme-button-primary-surface)` | CTA button background |
 | `--pricing-card-cta-bg-hover` | `var(--theme-button-primary-surface-hover)` | CTA button background on hover |
 | `--pricing-card-cta-text` | `var(--theme-button-primary-text)` | CTA button text colour |

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -5,7 +5,7 @@
     <h3 class="pricing-card__name">{{ planName }}</h3>
 
     <div class="pricing-card__price">
-      <span class="pricing-card__amount">${{ price }}</span>
+      <span class="pricing-card__amount">{{ currencySymbol }}{{ price }}</span>
       <span v-if="billingPeriod" class="pricing-card__period">{{ billingPeriod }}</span>
     </div>
 
@@ -42,6 +42,7 @@ interface Props {
   tag?: "div" | "section" | "article";
   planName: string;
   price: number;
+  currencySymbol?: string;
   billingPeriod?: string;
   description?: string;
   features?: string[];
@@ -53,6 +54,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "article",
+  currencySymbol: "$",
   billingPeriod: "one-time",
   description: undefined,
   features: () => [],
@@ -108,6 +110,7 @@ watch(
     --_description-color: var(--pricing-card-description-color, #555);
     --_feature-color: var(--pricing-card-feature-color, #333);
 
+    --_cta-align: var(--pricing-card-cta-align, flex-start);
     --_cta-bg: var(--pricing-card-cta-bg, var(--theme-button-primary-surface));
     --_cta-bg-hover: var(--pricing-card-cta-bg-hover, var(--theme-button-primary-surface-hover));
     --_cta-text: var(--pricing-card-cta-text, var(--theme-button-primary-text));
@@ -206,7 +209,7 @@ watch(
     }
 
     .pricing-card__cta {
-      align-self: flex-start;
+      align-self: var(--_cta-align);
 
       :deep(.input-button-core) {
         padding: var(--_cta-padding);

package/app/components/02.molecules/pricing-card/tests/PricingCard.spec.ts

@@ -19,6 +19,19 @@ describe("PricingCard", () => {
     expect(wrapper.text()).toContain("Get started");
   });
 
+  it("uses custom currency symbol when provided", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Single Site",
+        price: 49,
+        currencySymbol: "£",
+      },
+    });
+
+    expect(wrapper.text()).toContain("£49");
+    expect(wrapper.text()).not.toContain("$49");
+  });
+
   it("renders features from props", () => {
     const features = ["Feature 1", "Feature 2", "Feature 3"];
     const wrapper = mount(PricingCard, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.4",
+  "version": "9.2.5",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",