venwork-dev · venwork-dev · Feb 20, 2026 · Feb 20, 2026
diff --git a/.changeset/olive-crabs-smash.md b/.changeset/olive-crabs-smash.md
@@ -0,0 +1,5 @@
+---
+"brand-shell": minor
+---
+
+Expand release PR pack canary coverage to React, Vue, and Svelte npm starter apps.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -45,11 +45,21 @@ jobs:
     if: ${{ !startsWith(github.event.pull_request.title, 'chore(release):') }}
 
   pack-starter-canary:
-    name: Pack + Starter Canary (release PRs)
+    name: Pack + Starter Canary (${{ matrix.starter.name }})
     runs-on: ubuntu-latest
     if: >-
       github.event_name == 'pull_request' &&
       startsWith(github.event.pull_request.title, 'chore(release):')
+    strategy:
+      fail-fast: false
+      matrix:
+        starter:
+          - name: react
+            path: starters/react-npm
+          - name: vue
+            path: starters/vue-npm
+          - name: svelte
+            path: starters/svelte-npm
 
     steps:
       - name: Checkout
@@ -81,13 +91,13 @@ jobs:
           echo "TARBALL=${tarball}" >> "$GITHUB_OUTPUT"
 
       - name: Install tarball into starter
-        run: bun add ./${{ steps.pack.outputs.TARBALL }} --cwd starters/react-npm --exact
+        run: bun add ./${{ steps.pack.outputs.TARBALL }} --cwd ${{ matrix.starter.path }} --exact
 
       - name: Install starter dependencies
-        run: bun install --cwd starters/react-npm --frozen-lockfile
+        run: bun install --cwd ${{ matrix.starter.path }}
 
       - name: Build starter
-        run: bun run --cwd starters/react-npm build
+        run: bun run --cwd ${{ matrix.starter.path }} build
 
   storybook-changes:
     name: Detect Storybook Changes

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -77,14 +77,18 @@ Release is automated through GitHub Actions.
 
 ## Starter Canary
 
-The `starters/react-npm` app is intentionally a "real npm consumer" (no local `dist` aliases).
+The starter apps are intentionally "real npm consumers" (no local `dist` aliases):
 
-Release PRs run a deterministic canary in CI:
+- `starters/react-npm`
+- `starters/vue-npm`
+- `starters/svelte-npm`
+
+Release PRs run a best-effort starter canary smoke in CI:
 
 - build library
 - `npm pack` the exact publish artifact
-- install the tarball into `starters/react-npm`
-- run `bun run build` in the starter
+- install the tarball into each starter
+- run `bun run build` for each starter
 
 ## Pull Request Checklist
 

diff --git a/starters/react-npm/bun.lock b/starters/react-npm/bun.lock
diff --git a/starters/react-npm/src/App.jsx b/starters/react-npm/src/App.jsx
@@ -33,7 +33,7 @@ export function App() {
       <main style={{ padding: "1rem" }}>
         <h1 style={{ margin: 0, fontSize: "1.25rem" }}>Starter smoke</h1>
         <p style={{ marginTop: "0.5rem" }}>
-          This app exists to validate the published package (tagged <code>next</code>) before promoting to <code>latest</code>.
+          This app validates the published npm artifact through the React adapter.
         </p>
       </main>
       <Footer details={details} theme={theme} />

diff --git a/starters/react-npm/src/base.css b/starters/react-npm/src/base.css
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family: "Manrope", "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
+  background: #f8fafc;
+  color: #0f172a;
+}
diff --git a/starters/react-npm/src/main.jsx b/starters/react-npm/src/main.jsx
@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import { App } from "./App";
+import "./base.css";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>

diff --git a/starters/svelte-npm/.gitignore b/starters/svelte-npm/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+bun.lock
diff --git a/starters/svelte-npm/index.html b/starters/svelte-npm/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>brand-shell starter (svelte)</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/starters/svelte-npm/package.json b/starters/svelte-npm/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "brand-shell-starter-svelte",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "vite": "^7.0.0"
+  }
+}
diff --git a/starters/svelte-npm/src/App.svelte b/starters/svelte-npm/src/App.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { brandShell } from "brand-shell/svelte";
+  import "brand-shell/default.css";
+
+  const shellProps = {
+    details: {
+      name: "Brand Shell",
+      homeHref: "/",
+      navLinks: [
+        { label: "Docs", href: "/docs" },
+        { label: "Blog", href: "/blog" }
+      ],
+      primaryAction: { label: "Contact", href: "mailto:hello@example.com" },
+      secondaryAction: {
+        label: "Storybook",
+        href: "https://6992723e39539a58d711f188-ceiwmlxyrh.chromatic.com/",
+        target: "_blank"
+      },
+      github: "https://github.com/venwork-dev/brand-shell",
+      linkedin: "https://linkedin.com/in/example",
+      gmail: "hello@example.com",
+      tagline: "Starter app validating npm package publish output."
+    },
+    theme: {
+      primaryColor: "#2563eb",
+      backgroundColor: "#0f172a",
+      textColor: "#f8fafc"
+    }
+  };
+</script>
+
+<brand-header use:brandShell={shellProps}></brand-header>
+<main style="padding: 1rem;">
+  <h1 style="margin: 0; font-size: 1.25rem;">Starter smoke (Svelte)</h1>
+  <p style="margin-top: 0.5rem;">This app validates the published npm artifact through the Svelte adapter.</p>
+</main>
+<brand-footer use:brandShell={shellProps}></brand-footer>
diff --git a/starters/svelte-npm/src/base.css b/starters/svelte-npm/src/base.css
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family: "Manrope", "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
+  background: #f8fafc;
+  color: #0f172a;
+}
diff --git a/starters/svelte-npm/src/main.js b/starters/svelte-npm/src/main.js
@@ -0,0 +1,8 @@
+import { mount } from "svelte";
+
+import App from "./App.svelte";
+import "./base.css";
+
+mount(App, {
+  target: document.getElementById("app"),
+});
diff --git a/starters/svelte-npm/svelte.config.js b/starters/svelte-npm/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+const config = {
+  preprocess: vitePreprocess(),
+};
+
+export default config;
diff --git a/starters/svelte-npm/vite.config.js b/starters/svelte-npm/vite.config.js
@@ -0,0 +1,6 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [svelte()],
+});
diff --git a/starters/vue-npm/.gitignore b/starters/vue-npm/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+bun.lock
diff --git a/starters/vue-npm/index.html b/starters/vue-npm/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>brand-shell starter (vue)</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/starters/vue-npm/package.json b/starters/vue-npm/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "brand-shell-starter-vue",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "vite": "^7.0.0"
+  }
+}
diff --git a/starters/vue-npm/src/App.vue b/starters/vue-npm/src/App.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { BrandFooter, BrandHeader } from "brand-shell/vue";
+import "brand-shell/default.css";
+
+const details = {
+  name: "Brand Shell",
+  homeHref: "/",
+  navLinks: [
+    { label: "Docs", href: "/docs" },
+    { label: "Blog", href: "/blog" }
+  ],
+  primaryAction: { label: "Contact", href: "mailto:hello@example.com" },
+  secondaryAction: {
+    label: "Storybook",
+    href: "https://6992723e39539a58d711f188-ceiwmlxyrh.chromatic.com/",
+    target: "_blank"
+  },
+  github: "https://github.com/venwork-dev/brand-shell",
+  linkedin: "https://linkedin.com/in/example",
+  gmail: "hello@example.com",
+  tagline: "Starter app validating npm package publish output."
+};
+
+const theme = {
+  primaryColor: "#2563eb",
+  backgroundColor: "#0f172a",
+  textColor: "#f8fafc"
+};
+</script>
+
+<template>
+  <BrandHeader :details="details" :theme="theme" />
+  <main style="padding: 1rem;">
+    <h1 style="margin: 0; font-size: 1.25rem;">Starter smoke (Vue)</h1>
+    <p style="margin-top: 0.5rem;">This app validates the published npm artifact through the Vue adapter.</p>
+  </main>
+  <BrandFooter :details="details" :theme="theme" />
+</template>
diff --git a/starters/vue-npm/src/base.css b/starters/vue-npm/src/base.css
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family: "Manrope", "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
+  background: #f8fafc;
+  color: #0f172a;
+}
diff --git a/starters/vue-npm/src/main.js b/starters/vue-npm/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+
+import App from "./App.vue";
+import "./base.css";
+
+createApp(App).mount("#app");
diff --git a/starters/vue-npm/vite.config.js b/starters/vue-npm/vite.config.js
@@ -0,0 +1,6 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [vue()],
+});