npm - @abgov/nx-adsp - Versions diffs - 13.17.1 → 13.18.0-beta.1 - Mend

@abgov/nx-adsp 13.17.1 → 13.18.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.17.1",
+  "version": "13.18.0-beta.1",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-app/files/AGENTS.md__tmpl__ CHANGED Viewed

@@ -31,8 +31,7 @@ executors read options from `project.json` and do not prompt.
 | File | Purpose |
 |------|---------|
 | `src/main.ts` | Entry — registers Pinia, Router, and Keycloak plugin |
-| `src/App.vue` | Shell — nav header with sign-in/out, hero banner, `<RouterView>` wrapped in `AppLayout` |
-| `src/components/AppLayout.vue` | Shared content gutter (centered, max-width, token padding). Every view lands inside it — no per-view spacing to add. Width via route meta `layout` |
+| `src/App.vue` | Shell — `AppHeader` with sign-in/out in its `utilities` slot, hero banner, `<RouterView>` wrapped in `AppLayout`, `AppFooter` |
 | `src/router/index.ts` | Routes — `/protected` guarded with `requiresAuth` meta |
 | `src/views/HomeView.vue` | Public page — calls public and private APIs |
 | `src/views/ProtectedView.vue` | Authenticated page — shows user info from token |
@@ -151,10 +150,28 @@ the design system supports still works. For components without a wrapper, use th
 across every Vue app in this workspace — fix or extend a wrapper once in
 `libs/vue-components` (or run `nx g @abgov/nx-adsp:vue-components` to restore it).
-> **Interim:** these wrappers are a stopgap until GoA DS ships an official
-> `@abgov/vue-components`. When it lands, delete the `vue-components` lib and
-> repoint imports at that package — the names/props are intended to match, so
-> it's a scope swap.
+> **Interim:** these wrappers (`libs/vue-components/src/lib/primitives/`) are a
+> stopgap until GoA DS ships an official `@abgov/vue-components`. When it lands,
+> delete `primitives/` and repoint imports at that package — the names/props are
+> intended to match, so it's a scope swap. This does **not** apply to the
+> `AppHeader`/`AppLayout`/`AppFooter`/`SessionExpiredBanner` shell components
+> below — those live in the same library's `patterns/` folder and are permanent
+> (app-shell composition has no equivalent in a design-system package).
+### App shell components
+`App.vue` is built from four shared components imported from
+**`<%= goaImportPath %>`**, not hand-rolled markup:
+| Component | Purpose |
+|---|---|
+| `AppHeader` | `goa-microsite-header` + `goa-app-header`. Takes a `heading` prop; put account/sign-in actions in its `utilities` slot (a bare child with no slot is silently dropped by `goa-app-header`) |
+| `AppLayout` | The content gutter every view renders inside (see the key files table). Also renders the skip-to-main-content link |
+| `AppFooter` | `goa-app-footer` with the standard GoA nav/meta links (Services/Contact/Terms of Use, Privacy/Disclaimer/Accessibility) |
+| `SessionExpiredBanner` | A `v-model:show` banner with `signIn`/`dismiss` emits — available in the shared library, not yet wired into this app's `App.vue`. Wiring it to a real Keycloak session-expiry signal needs an `onAuthLogout` callback added to `main.ts`'s Keycloak plugin config; do that before using it |
+These are shared across every Vue app in this workspace — fix or extend one once
+in `libs/vue-components/src/lib/patterns/`, the same way as the `Goab*` wrappers.
 ## Adding a view

package/src/generators/vue-app/files/src/App.vue__tmpl__ CHANGED Viewed

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
 import { RouterView, useRoute } from 'vue-router';
-import AppLayout from './components/AppLayout.vue';
+import { AppHeader, AppLayout, AppFooter } from '<%= goaImportPath %>';
 // Keep the reactive instance — do NOT destructure. useKeycloak() returns a
 // readonly(reactive()); destructuring snapshots each field at setup time, so
@@ -22,13 +22,8 @@ function logout() { kc.keycloak?.logout({ redirectUri: window.location.origin })
 </script>
 <template>
-  <goa-microsite-header type="alpha" />
-  <goa-app-header url="/" heading="<%= projectName %>">
-    <!-- goa-app-header only renders content placed in a named slot — the
-         "utilities" slot is where GoA's own design system docs put
-         account/sign-in actions (as opposed to "navigation" for nav links).
-         A bare child with no slot attribute renders nothing. -->
-    <div slot="utilities">
+  <AppHeader heading="<%= projectName %>">
+    <template #utilities>
       <goa-button-group alignment="end">
         <span v-if="kc.authenticated && kc.fullName">{{ kc.fullName }}</span>
         <!-- Gate on !authenticated only, never on `ready`: with no load-time SSO
@@ -41,12 +36,13 @@ function logout() { kc.keycloak?.logout({ redirectUri: window.location.origin })
           Sign out
         </goa-button>
       </goa-button-group>
-    </div>
-  </goa-app-header>
+    </template>
+  </AppHeader>
   <goa-hero-banner heading="<%= projectName %>" backgroundurl="/assets/banner.jpg" />
   <AppLayout :variant="layout">
     <RouterView />
   </AppLayout>
+  <AppFooter />
 </template>
 <style>

package/src/generators/vue-app/vue-app.js CHANGED Viewed

@@ -122,6 +122,9 @@ function default_1(host, options) {
             'src/app/App.spec.ts',
             'src/app/NxWelcome.vue',
             'src/components/HelloWorld.vue',
+            // AppLayout now lives in the shared vue-components lib (patterns/) —
+            // remove a stale copy from an app scaffolded before that move.
+            'src/components/AppLayout.vue',
             'src/views/AboutView.vue',
             'vite.config.mts',
         ]) {

package/src/generators/vue-app/vue-app.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vue-app.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-app/vue-app.ts"],"names":[],"mappings":";;AAsHA,~~4BA4MC~~;;~~AAlUD~~,wCAIsB;AACtB,6CAA6E;AAC7E,+DAIoC;AACpC,+DAA4D;AAC5D,iDAK6B;AAC7B,uCAAyC;AACzC,uCAYoB;AACpB,6BAA6B;AAC7B,+DAAuE;AACvE,qEAE0C;AAG1C,SAAe,gBAAgB,CAC7B,IAAU,EACV,OAAe;;QAEf,MAAM,WAAW,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;QACjD,MAAM,WAAW,GAAG,GAAG,IAAA,2BAAkB,EAAC,IAAI,CAAC,CAAC,OAAO,IAAI,WAAW,EAAE,CAAC;QACzE,MAAM,kBAAkB,GAAG,cAAc,WAAW,EAAE,CAAC;QACvD,MAAM,IAAI,GAAG,MAAM,IAAA,4BAAoB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACvD,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC;YAClD,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC;YACpB,CAAC,CAAC,OAAO,CAAC,KAAK;gBACb,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;gBACjB,CAAC,CAAC,EAAE,CAAC;QACT,MAAM,MAAM,GAAG,IAAA,0CAAyB,EAAC,IAAI,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;QACtE,IACE,MAAM;YACN,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EACjE,CAAC;YACD,MAAM,IAAI,KAAK,CACb,gDAAgD,MAAM,CAAC,KAAK,CAAC,QAAQ,iBAAiB;gBACpF,4EAA4E,CAC/E,CAAC;QACJ,CAAC;QACD,MAAM,YAAY,GAAG,MAAM;YACzB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,eAAe,CAAC;YACpC,CAAC,CAAC,eAAe,CAAC;QACpB,uCACK,OAAO,KACV,WAAW;YACX,WAAW;YACX,kBAAkB;YAClB,IAAI;YACJ,YAAY,EACZ,gBAAgB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,IAC7B;IACJ,CAAC;CAAA;AAED,SAAS,QAAQ,CAAC,IAAU,EAAE,OAAyB;;IACrD,MAAM,eAAe,iDAChB,OAAO,GACP,OAAO,CAAC,IAAI,KACf,cAAc,EAAE,IAAA,uBAAc,EAAC,OAAO,CAAC,WAAW,CAAC,EACnD,aAAa,EAAE,MAAA,OAAO,CAAC,aAAa,mCAAI,IAAI;QAC5C,6EAA6E;QAC7E,aAAa,EAAE,IAAA,wCAAuB,EAAC,IAAI,CAAC,EAC5C,IAAI,EAAE,EAAE,GACT,CAAC;IACF,IAAA,sBAAa,EACX,IAAI,EACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAC7B,OAAO,CAAC,WAAW,EACnB,eAAe,CAChB,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;IACrD,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,MAAM,CAC9C,CAAC,SAAS,EAAE,UAAU,EAAE,EAAE;YACxB,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;YAClD,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,cAAc,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC7F,MAAM,EAAE,WAAW,CAAC,QAAQ,KAAK,QAAQ;gBACzC,YAAY,EAAE,KAAK;gBACnB,WAAW,EAAE,EAAE;aAChB,CAAC;YACF,IAAI,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACpC,KAAK,CAAC,WAAW,GAAG;oBAClB,CAAC,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC,EAAE,WAAW,CAAC,QAAQ;iBAClD,CAAC;YACJ,CAAC;YACD,uCAAY,SAAS,KAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAG;QACxD,CAAC,EACD,EAAE,CACH,CAAC;QACF,IAAA,kBAAS,EAAC,IAAI,EAAE,GAAG,OAAO,CAAC,WAAW,kBAAkB,EAAE,YAAY,CAAC,CAAC;IAC1E,CAAC;IACD,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,mBAA+B,IAAU,EAAE,OAAe;;;QACxD,4EAA4E;QAC5E,2EAA2E;QAC3E,MAAM,EAAE,oBAAoB,EAAE,OAAO,EAAE,GAAG,MAAM,qCAAO,SAAS,GAAE,KAAK,CACrE,GAAG,EAAE;YACH,MAAM,IAAI,KAAK,CACb,mGAAmG,CACpG,CAAC;QACJ,CAAC,CACF,CAAC;QAEF,MAAM,iBAAiB,GAAG,MAAM,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEhE,MAAM,OAAO,CAAC,IAAI,EAAE;YAClB,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,QAAQ;YAChB,cAAc,EAAE,QAAQ;YACxB,aAAa,EAAE,YAAY;YAC3B,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,iBAAiB,CAAC,WAAW;SACzC,CAAC,CAAC;QAEH,6EAA6E;QAC7E,0EAA0E;QAC1E,IAAA,kCAAwB,EAAC,IAAI,EAAE,GAAG,iBAAiB,CAAC,WAAW,MAAM,CAAC,CAAC;QACvE,IAAA,kCAAwB,EAAC,IAAI,EAAE,GAAG,iBAAiB,CAAC,WAAW,MAAM,CAAC,CAAC;QAEvE,8EAA8E;QAC9E,+EAA+E;QAC/E,wEAAwE;QACxE,6EAA6E;QAC7E,+EAA+E;QAC/E,6EAA6E;QAC7E,mCAAmC;QACnC,MAAM,IAAA,wBAAsB,EAAC,IAAI,CAAC,CAAC;QAEnC,IAAA,qCAA4B,EAC1B,IAAI,EACJ;YACE,sBAAsB,EAAE,QAAQ;YAChC,uBAAuB,EAAE,OAAO;YAChC,wEAAwE;YACxE,iEAAiE;YACjE,4BAA4B,EAAE,QAAQ;YACtC,KAAK,EAAE,QAAQ;YACf,YAAY,EAAE,QAAQ;SACvB,EACD;YACE,sBAAsB,EAAE,SAAS;YACjC,wBAAwB,EAAE,QAAQ;YAClC,0BAA0B,EAAE,QAAQ;SACrC,CACF,CAAC;QAEF,gFAAgF;QAChF,0EAA0E;QAC1E,0EAA0E;QAC1E,4EAA4E;QAC5E,wEAAwE;QACxE,4EAA4E;QAC5E,KAAK,MAAM,CAAC,IAAI;YACd,aAAa;YACb,iBAAiB;YACjB,qBAAqB;YACrB,uBAAuB;YACvB,+BAA+B;YAC/B,yBAAyB;YACzB,iBAAiB;SAClB,EAAE,CAAC;YACF,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACzD,IAAI,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC,CAAC;YACvD,CAAC;QACH,CAAC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;QAErD,IAAA,+BAAqB,EAAC,IAAI,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC3D,2EAA2E;QAC3E,yEAAyE;QACzE,kBAAkB;QAClB,MAAM,IAAA,cAAa,EAAC,IAAI,CAAC,CAAC;QAE1B,MAAM,MAAM,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QAE5D,4EAA4E;QAC5E,IAAI,UAAU,KAAI,MAAA,MAAM,CAAC,OAAO,CAAC,KAAK,0CAAE,OAAO,CAAA,EAAE,CAAC;YAChD,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,mCACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,KAC/B,WAAW,EAAE,GAAG,iBAAiB,CAAC,WAAW,kBAAkB,GAChE,CAAC;QACJ,CAAC;QAED,yCAAyC;QACzC,wEAAwE;QACxE,4EAA4E;QAC5E,yEAAyE;QACzE,oCAAoC;QACpC,IAAI,MAAA,MAAM,CAAC,OAAO,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;YAClC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,mCACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,KAC/B,UAAU,EAAE,QAAQ,iBAAiB,CAAC,WAAW,EAAE,GACpD,CAAC;QACJ,CAAC;QAED,oFAAoF;QACpF,iEAAiE;QACjE,IAAI,iBAAiB,CAAC,gBAAgB,EAAE,CAAC;YACvC,MAAM,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,MAAA,MAAM,CAAC,IAAI,mCAAI,EAAE,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;QAC7E,CAAC;QAED,MAAM,CAAC,IAAI,GAAG;YACZ,GAAG,CAAC,MAAA,MAAM,CAAC,IAAI,mCAAI,EAAE,CAAC;YACtB,GAAG,IAAA,uBAAe,EAChB,iBAAiB,CAAC,GAAG,EACrB,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAC9B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,WAAC,OAAA,CAAC,CAAC,MAAA,MAAM,CAAC,IAAI,mCAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA,EAAA,CAAC;SACtD,CAAC;QAEF,IAAA,mCAA0B,EAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAEvD,IAAA,0BAAgB,EAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;QAExB,IAAI,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC3B,MAAM,WAAW,GACf,MAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,mCAAI,OAAO,CAAC,WAAW,CAAC;YAC5D,MAAM,QAAQ,GAAG,WAAW,iBAAiB,CAAC,IAAI,CAAC,MAAM,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC;YAC7F,MAAM,IAAA,mCAAkB,EACtB,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,EACvC,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAClC,QAAQ,EACR,WAAW,CACZ,CAAC;YACF,IAAI,OAAO,CAAC,eAAe,EAAE,CAAC;gBAC5B,MAAM,IAAA,qCAAoB,EACxB,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,EACvC,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAClC,QAAQ,EACR,OAAO,CAAC,eAAe,EACvB,WAAW,CACZ,CAAC;gBACF,MAAM,IAAA,sCAAqB,EACzB,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,EACvC,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAClC,QAAQ,EACR,OAAO,CAAC,eAAe,EACvB,cAAc,EACd,WAAW,CACZ,CAAC;YACJ,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;YACjD,MAAM,WAAW,GACf,MAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,mCAAI,OAAO,CAAC,WAAW,CAAC;YAC5D,MAAM,MAAM,GACV,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,WAAW,cAAc,CAAC,0CAAE,QAAQ,EAAE,mCACrE,EAAE,CAAC;YACL,MAAM,MAAM,GACV,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,WAAW,cAAc,CAAC,0CAAE,QAAQ,EAAE,mCACrE,EAAE,CAAC;YACL,MAAM,QAAQ,GACZ,MAAA,MAAA,IAAI;iBACD,IAAI,CAAC,GAAG,iBAAiB,CAAC,WAAW,sBAAsB,CAAC,0CAC3D,QAAQ,EAAE,mCAAI,EAAE,CAAC;YACvB,MAAM,aAAa,GACjB,MAAA,MAAA,IAAI;iBACD,IAAI,CACH,GAAG,iBAAiB,CAAC,WAAW,kCAAkC,CACnE,0CACC,QAAQ,EAAE,mCAAI,EAAE,CAAC;YACvB,MAAM,IAAA,kCAA0B,EAC9B,MAAM,IAAA,oBAAY,EAChB,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,EAC1C,WAAW,EACX;gBACE,WAAW,EAAE,iBAAiB,CAAC,WAAW;gBAC1C,WAAW,EAAE,SAAS;gBACtB,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,MAAM;gBACrC,aAAa,EAAE,+BAAc;gBAC7B,aAAa,EAAE;oBACb,aAAa,EAAE,MAAM;oBACrB,aAAa,EAAE,MAAM;oBACrB,qBAAqB,EAAE,QAAQ;oBAC/B,iCAAiC,EAAE,aAAa;iBACjD;aACF,EACD,IAAI,EACJ,iBAAiB,CAAC,WAAW,CAC9B,CACF,CAAC;QACJ,CAAC;QAED,MAAM,IAAA,2BAAmB,EAAC,IAAI,kCACzB,iBAAiB,KACpB,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,iBAAiB,CAAC,WAAW,IACtC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,IAAA,4BAAmB,EAAC,IAAI,CAAC,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC;CAAA"}
1	+ {"version":3,"file":"vue-app.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-app/vue-app.ts"],"names":[],"mappings":"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"}

package/src/generators/vue-app/vue-app.spec.ts CHANGED Viewed

@@ -116,15 +116,16 @@ describe('Vue App Generator', () => {
   it('wraps views in a shared AppLayout gutter (not a bare tag selector)', async () => {
     await generator(host, options);
-    // Shared layout component provides the content gutter for every view.
-    expect(host.exists('apps/test/src/components/AppLayout.vue')).toBeTruthy();
-    const layout = host
-      .read('apps/test/src/components/AppLayout.vue')
-      .toString();
+    // Layout is a pattern component in the shared lib, not copied into the app.
+    const layoutPath = 'libs/vue-components/src/lib/patterns/AppLayout.vue';
+    expect(host.exists(layoutPath)).toBeTruthy();
+    const layout = host.read(layoutPath).toString();
     // Three named width variants, token-driven padding.
     expect(layout).toContain('form-content');
     expect(layout).toContain('wide-content');
     expect(layout).toContain('--goa-space');
+    // Skip-to-main-content link for keyboard/screen-reader users.
+    expect(layout).toContain('href="#main-content"');
     // App.vue uses AppLayout and no longer relies on the `main > section` gutter
     // (which silently failed when a view's top-level tag wasn't <section>).
@@ -137,7 +138,7 @@ describe('Vue App Generator', () => {
     await generator(host, options);
     // Wrappers live in a shared workspace lib, not copied into the app.
-    const base = 'libs/vue-components/src/lib';
+    const primitives = 'libs/vue-components/src/lib/primitives';
     for (const name of [
       'GoabInput',
       'GoabTextarea',
@@ -147,12 +148,12 @@ describe('Vue App Generator', () => {
       'GoabButton',
       'GoabModal',
     ]) {
-      expect(host.exists(`${base}/${name}.vue`)).toBeTruthy();
+      expect(host.exists(`${primitives}/${name}.vue`)).toBeTruthy();
     }
     expect(host.exists('apps/test/src/components/goa')).toBeFalsy();
     // Real v-model wiring: bind :value and read the new value off the GoA event.
-    const input = host.read(`${base}/GoabInput.vue`).toString();
+    const input = host.read(`${primitives}/GoabInput.vue`).toString();
     expect(input).toContain('defineModel');
     expect(input).toContain('.detail.value');
@@ -163,6 +164,25 @@ describe('Vue App Generator', () => {
     expect(agents).toContain('/vue-components');
   }, 30000);
+  it('provisions the shared app-shell pattern components and App.vue imports them', async () => {
+    await generator(host, options);
+    const patterns = 'libs/vue-components/src/lib/patterns';
+    for (const name of [
+      'AppLayout',
+      'AppHeader',
+      'AppFooter',
+      'SessionExpiredBanner',
+    ]) {
+      expect(host.exists(`${patterns}/${name}.vue`)).toBeTruthy();
+    }
+    const app = host.read('apps/test/src/App.vue').toString();
+    expect(app).toContain("import { AppHeader, AppLayout, AppFooter } from '@proj/vue-components';");
+    expect(app).toContain('<AppHeader heading="test">');
+    expect(app).toContain('<AppFooter />');
+  }, 30000);
   it('inits Keycloak with no hidden iframes so init never hangs', async () => {
     await generator(host, options);
     // Strip // comments — they legitimately reference the disabled iframe options
@@ -255,11 +275,18 @@ describe('Vue App Generator', () => {
     // goa-app-header (v2) only renders content placed in a named slot — GoA's
     // own design system docs put account/sign-in actions in "utilities" (vs.
     // "navigation" for nav links). A bare child with no slot attribute
-    // renders nothing, silently dropping the sign-in button. Regression
-    // guard for exactly that gap.
+    // renders nothing, silently dropping the sign-in button. AppHeader (the
+    // shared pattern component) owns the native `slot="utilities"` div; App.vue
+    // just feeds its named Vue slot. Regression guard for exactly that gap,
+    // now spanning both files since AppHeader was extracted out of App.vue.
     await generator(host, options);
+    const appHeader = host
+      .read('libs/vue-components/src/lib/patterns/AppHeader.vue')
+      .toString();
+    expect(appHeader).toMatch(/<div[^>]*slot="utilities"[^>]*>[\s\S]*<slot name="utilities"/);
     const app = host.read('apps/test/src/App.vue').toString();
-    expect(app).toMatch(/<div slot="utilities">[\s\S]*<goa-button-group/);
+    expect(app).toMatch(/<template #utilities>[\s\S]*<goa-button-group/);
   }, 30000);
   it('removes the @nx/vue demo scaffold and ships a passing App test', async () => {

package/src/generators/vue-components/files/AGENTS.md__tmpl__ CHANGED Viewed

@@ -1,16 +1,25 @@
-# AGENTS.md — vue-components (GoA Design System Vue wrappers)
+# AGENTS.md — vue-components (GoA Design System Vue wrappers + app shell)
-A shared, workspace-local library of thin Vue wrappers over the GoA Design System
-`goa-*` web components (`@abgov/web-components`). Every Vue app in this workspace
-imports these instead of carrying its own copy. Generated by
+A shared, workspace-local library with two distinct kinds of content — every Vue
+app in this workspace imports both instead of carrying its own copy. Generated by
 `@abgov/nx-adsp:vue-components`.
-> **⚠️ Interim library — do not invest in it as permanent.** It exists only
-> because GoA DS has not yet published an official Vue wrapper package. When
-> `@abgov/vue-components` ships, delete this library and repoint imports at it —
+| Folder | Contains | Lifespan |
+|---|---|---|
+| `src/lib/primitives/` | Thin `v-model`/idiomatic-event wrappers over individual `goa-*` elements (`GoabInput`, `GoabButton`, …) | **Interim** — see below |
+| `src/lib/patterns/` | Composite, app-shell components (`AppLayout`, `AppHeader`, `AppFooter`, `SessionExpiredBanner`) | **Permanent** |
+> **⚠️ `primitives/` is interim — do not invest in it as permanent.** It exists
+> only because GoA DS has not yet published an official Vue wrapper package. When
+> `@abgov/vue-components` ships, delete `primitives/` and repoint imports at it —
 > the component names and props are deliberately kept matching, so it should be a
 > scope swap, not a rewrite. Don't add features here that would make that swap
 > harder (see "Don't" below).
+>
+> **`patterns/` is not part of that swap.** App-shell composition (layout,
+> header, footer, banners) has no equivalent in an official design-system
+> package — a design system ships primitives, not your app's shell. Nothing in
+> `patterns/` is deleted when `primitives/` is.
 ## What these wrappers do (and why they're needed)
@@ -45,7 +54,7 @@ Most value elements put the value on `detail.value`; some carry extra keys
 (dropdown adds `label`, radio-group adds `labels`) you can ignore unless you need
 them. Always confirm against the component's page — see below.
-## Wrapping a new component
+## Wrapping a new component (`primitives/`)
 ### 1. Find the event contract
@@ -129,14 +138,35 @@ Don't re-declare props you don't transform — let them fall through. `name` in
 particular is required by most `goa-*` form elements (it's echoed in the event
 detail); just leave it to fall through from the caller.
+## Building a pattern component (`patterns/`)
+A pattern component is app-shell composition — layout, header/footer chrome,
+banners — not a single-element wrapper. Existing examples: `AppLayout`,
+`AppHeader`, `AppFooter`, `SessionExpiredBanner`.
+- It's fine to compose `primitives/` wrappers inside a pattern component (e.g.
+  `SessionExpiredBanner` uses `GoabButton`) — import them with a relative path
+  (`../primitives/GoabButton.vue`), not the package's own public import path.
+- Stay presentational: accept data and behavior via props/`v-model`/`emit`, don't
+  fetch data, call routing APIs, or encode business rules. A pattern component
+  used by every app in the workspace can't assume any one app's routes or
+  domain — that belongs in the app that uses it (see `SessionExpiredBanner`'s own
+  comment for a live example: the component renders the banner, but which
+  Keycloak hook flips `show` is main.ts's job, in the consuming app).
+- `export` it from `src/index.ts` under the "patterns" group, with a one-line
+  purpose comment in this file's app-shell components table (mirrored in each
+  consuming generator's own `AGENTS.md`, e.g. `vue-app/files/AGENTS.md__tmpl__`).
 ## Don't
-- **Don't build net-new visual components or design primitives here.** That's GoA
-  DS's job; this library is only *choreography* (adding `v-model`/idiomatic events
-  to elements that already exist). New primitives would have no home in
-  `@abgov/vue-components` and would block the swap.
-- **Don't add app-specific logic** (fetching, routing, business rules) — this is
-  shared across every app in the workspace. Keep wrappers presentational.
+- **Don't add new `goa-*` element wrappers to `patterns/`, or new composite
+  components to `primitives/`.** Single-element wrappers belong in
+  `primitives/` (interim, deleted on the `@abgov/vue-components` swap);
+  composites belong in `patterns/` (permanent). Putting one in the wrong folder
+  either blocks that swap or gets deleted by it.
+- **Don't add app-specific logic** anywhere in this library (fetching, routing,
+  business rules) — it's shared across every app in the workspace. Keep every
+  component, wrapper or pattern, presentational.
 ## Testing

package/src/generators/vue-components/files/src/index.ts__tmpl__ CHANGED Viewed

@@ -1,12 +1,23 @@
-// GoA Design System Vue wrappers — INTERIM shared library.
-// These add v-model / idiomatic events over the framework-agnostic goa-* custom
-// elements. Remove this library and import from @abgov/vue-components once GoA DS
-// publishes it (see the repo's UX view-patterns spec, foundational gap #2) — the
-// component names/props are intended to match, so it should be a scope swap.
-export { default as GoabInput } from './lib/GoabInput.vue';
-export { default as GoabTextarea } from './lib/GoabTextarea.vue';
-export { default as GoabDropdown } from './lib/GoabDropdown.vue';
-export { default as GoabCheckbox } from './lib/GoabCheckbox.vue';
-export { default as GoabRadioGroup } from './lib/GoabRadioGroup.vue';
-export { default as GoabButton } from './lib/GoabButton.vue';
-export { default as GoabModal } from './lib/GoabModal.vue';
+// GoA Design System Vue wrappers, shared across every Vue app in this workspace.
+//
+// primitives/ — thin v-model/idiomatic-event wrappers over individual goa-*
+// elements. INTERIM: once GoA DS publishes an official @abgov/vue-components,
+// delete these files and repoint imports at it — names/props are kept
+// matching, so it's a scope swap, not a rewrite.
+//
+// patterns/ — composite, app-shell components (layout, header, footer, ...).
+// PERMANENT: these have no equivalent in an official design-system package
+// (that's app-shell composition, not a design-system primitive) and are not
+// deleted when primitives/ is.
+export { default as GoabInput } from './lib/primitives/GoabInput.vue';
+export { default as GoabTextarea } from './lib/primitives/GoabTextarea.vue';
+export { default as GoabDropdown } from './lib/primitives/GoabDropdown.vue';
+export { default as GoabCheckbox } from './lib/primitives/GoabCheckbox.vue';
+export { default as GoabRadioGroup } from './lib/primitives/GoabRadioGroup.vue';
+export { default as GoabButton } from './lib/primitives/GoabButton.vue';
+export { default as GoabModal } from './lib/primitives/GoabModal.vue';
+export { default as AppLayout } from './lib/patterns/AppLayout.vue';
+export { default as AppHeader } from './lib/patterns/AppHeader.vue';
+export { default as AppFooter } from './lib/patterns/AppFooter.vue';
+export { default as SessionExpiredBanner } from './lib/patterns/SessionExpiredBanner.vue';

package/src/generators/vue-components/files/src/lib/patterns/AppFooter.vue__tmpl__ ADDED Viewed

@@ -0,0 +1,14 @@
+<template>
+  <goa-app-footer>
+    <goa-app-footer-nav-section slot="nav" heading="Resources">
+      <a href="https://alberta.ca/services.aspx">Services</a>
+      <a href="https://alberta.ca/contact.aspx">Contact</a>
+      <a href="https://alberta.ca/terms-of-use.aspx">Terms of Use</a>
+    </goa-app-footer-nav-section>
+    <goa-app-footer-meta-section slot="meta">
+      <a href="https://alberta.ca/security-and-privacy.aspx">Privacy</a>
+      <a href="https://alberta.ca/disclaimer.aspx">Disclaimer</a>
+      <a href="https://alberta.ca/accessibility.aspx">Accessibility</a>
+    </goa-app-footer-meta-section>
+  </goa-app-footer>
+</template>

package/src/generators/vue-components/files/src/lib/patterns/AppHeader.vue__tmpl__ ADDED Viewed

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useSlots } from 'vue';
+defineProps<{ heading: string }>();
+const slots = useSlots();
+</script>
+<template>
+  <goa-microsite-header type="alpha" />
+  <goa-app-header url="/" :heading="heading">
+    <!-- goa-app-header only renders content placed in a named slot — the
+         "utilities" slot is where GoA's own design system docs put
+         account/sign-in actions (as opposed to "navigation" for nav links).
+         A bare child with no slot attribute renders nothing. -->
+    <div v-if="slots.utilities" slot="utilities">
+      <slot name="utilities" />
+    </div>
+  </goa-app-header>
+</template>

package/src/generators/{vue-app/files/src/components → vue-components/files/src/lib/patterns}/AppLayout.vue__tmpl__ RENAMED Viewed

@@ -14,6 +14,7 @@ withDefaults(defineProps<{ variant?: 'page' | 'wide' | 'form' }>(), {
 </script>
 <template>
+  <a class="skip-link" href="#main-content">Skip to main content</a>
   <main id="main-content">
     <div :class="`${variant}-content`">
       <slot />
@@ -22,6 +23,22 @@ withDefaults(defineProps<{ variant?: 'page' | 'wide' | 'form' }>(), {
 </template>
 <style scoped>
+/* Visually hidden until focused (e.g. via Tab from the top of the page) — lets
+   keyboard/screen-reader users jump past the header straight to the content. */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 100;
+  padding: var(--goa-space-s, 0.5rem) var(--goa-space-m, 1rem);
+  background: var(--goa-color-interactive-default, #0070c4);
+  color: #fff;
+}
+.skip-link:focus {
+  left: var(--goa-space-m, 1rem);
+}
 .page-content,
 .wide-content,
 .form-content {

package/src/generators/vue-components/files/src/lib/patterns/SessionExpiredBanner.vue__tmpl__ ADDED Viewed

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// Presentational only — not yet wired to a real Keycloak session-expiry signal
+// by any generator. @dsb-norge/vue-keycloak-js has no reactive "expired" field
+// on the useKeycloak() instance; the closest real hook is the `onAuthLogout`
+// callback configured at plugin-install time in main.ts. Wiring that up is a
+// separate change (new shared reactive state + main.ts plumbing); this
+// component just renders the banner once some caller flips `show`.
+import GoabButton from '../primitives/GoabButton.vue';
+const show = defineModel<boolean>('show', { default: false });
+const emit = defineEmits<{ signIn: []; dismiss: [] }>();
+</script>
+<template>
+  <div v-if="show" class="session-expired-banner">
+    <goa-callout type="emergency" heading="Session expired">
+      <p>Your session has expired. Sign in again to continue.</p>
+      <goa-spacer vspacing="s" />
+      <goa-button-group gap="relaxed">
+        <GoabButton type="primary" @click="emit('signIn')">Sign in</GoabButton>
+        <GoabButton type="tertiary" @click="emit('dismiss')">Dismiss</GoabButton>
+      </goa-button-group>
+    </goa-callout>
+    <goa-spacer vspacing="m" />
+  </div>
+</template>

package/src/generators/vue-components/files/src/vue-components.spec.ts__tmpl__ CHANGED Viewed

@@ -1,11 +1,11 @@
 import { describe, it, expect } from 'vitest';
 import * as lib from './index';
-// Smoke test: the barrel resolves and every wrapper SFC compiles under the test
-// runner. It also gives the library a test target with real content, so
-// `nx test vue-components` doesn't fail on "no test files found".
+// Smoke test: the barrel resolves and every wrapper/pattern SFC compiles under
+// the test runner. It also gives the library a test target with real content,
+// so `nx test vue-components` doesn't fail on "no test files found".
 describe('vue-components', () => {
-  it('exports every GoA wrapper', () => {
+  it('exports every GoA primitive wrapper', () => {
     for (const name of [
       'GoabInput',
       'GoabTextarea',
@@ -18,4 +18,15 @@ describe('vue-components', () => {
       expect(lib[name as keyof typeof lib]).toBeTruthy();
     }
   });
+  it('exports every app-shell pattern component', () => {
+    for (const name of [
+      'AppLayout',
+      'AppHeader',
+      'AppFooter',
+      'SessionExpiredBanner',
+    ]) {
+      expect(lib[name as keyof typeof lib]).toBeTruthy();
+    }
+  });
 });

package/src/generators/vue-components/vue-components.spec.ts CHANGED Viewed

@@ -23,7 +23,7 @@ describe('Vue Components Generator', () => {
     const config = readProjectConfiguration(host, 'vue-components');
     expect(config.root).toBe('libs/vue-components');
-    const base = 'libs/vue-components/src/lib';
+    const primitives = 'libs/vue-components/src/lib/primitives';
     for (const name of [
       'GoabInput',
       'GoabTextarea',
@@ -33,10 +33,21 @@ describe('Vue Components Generator', () => {
       'GoabButton',
       'GoabModal',
     ]) {
-      expect(host.exists(`${base}/${name}.vue`)).toBeTruthy();
+      expect(host.exists(`${primitives}/${name}.vue`)).toBeTruthy();
+    }
+    // Permanent app-shell pattern components live alongside the interim wrappers.
+    const patterns = 'libs/vue-components/src/lib/patterns';
+    for (const name of [
+      'AppLayout',
+      'AppHeader',
+      'AppFooter',
+      'SessionExpiredBanner',
+    ]) {
+      expect(host.exists(`${patterns}/${name}.vue`)).toBeTruthy();
     }
     const index = host.read('libs/vue-components/src/index.ts').toString();
     expect(index).toContain('export { default as GoabInput }');
+    expect(index).toContain('export { default as AppLayout }');
     expect(index).toContain('@abgov/vue-components'); // interim marker
     // Ships a spec so the vitest test target isn't empty (vitest exits non-zero
@@ -79,7 +90,7 @@ describe('Vue Components Generator', () => {
     await generator(host);
     await expect(generator(host)).resolves.not.toThrow();
     expect(
-      host.exists('libs/vue-components/src/lib/GoabInput.vue'),
+      host.exists('libs/vue-components/src/lib/primitives/GoabInput.vue'),
     ).toBeTruthy();
   }, 30000);

/package/src/generators/vue-components/files/src/lib/{GoabButton.vue__tmpl__ → primitives/GoabButton.vue__tmpl__} RENAMED Viewed

File without changes

/package/src/generators/vue-components/files/src/lib/{GoabCheckbox.vue__tmpl__ → primitives/GoabCheckbox.vue__tmpl__} RENAMED Viewed

File without changes

/package/src/generators/vue-components/files/src/lib/{GoabDropdown.vue__tmpl__ → primitives/GoabDropdown.vue__tmpl__} RENAMED Viewed

File without changes

/package/src/generators/vue-components/files/src/lib/{GoabInput.vue__tmpl__ → primitives/GoabInput.vue__tmpl__} RENAMED Viewed

File without changes

/package/src/generators/vue-components/files/src/lib/{GoabModal.vue__tmpl__ → primitives/GoabModal.vue__tmpl__} RENAMED Viewed

File without changes

/package/src/generators/vue-components/files/src/lib/{GoabRadioGroup.vue__tmpl__ → primitives/GoabRadioGroup.vue__tmpl__} RENAMED Viewed

File without changes

/package/src/generators/vue-components/files/src/lib/{GoabTextarea.vue__tmpl__ → primitives/GoabTextarea.vue__tmpl__} RENAMED Viewed

File without changes