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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.17.0",
+  "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/react-app/files/AGENTS.md__tmpl__

@@ -64,14 +64,15 @@ from `@abgov/react-components` over those components:
 import { GoabButton, GoabAppHeader, GoabButtonGroup } from '@abgov/react-components';
 ```
 
-**Events**: GoA React components use `onGoab*` handlers (not standard React synthetic
-events); the payload is on `e.detail`:
+**Events**: GoA React components use plain `onClick`/`onChange` handlers, not the
+`onGoab*`/`e.detail` pattern some other GoA framework wrappers use. `onChange` receives its
+detail object directly as the callback's sole argument — never wrapped in a synthetic event:
 
 ```tsx
-<GoabButton onGoabClick={handleSave}>Save</GoabButton>
-<GoabInput onGoabChange={(e) => setValue(e.detail.value)} />
-<GoabDropdown onGoabChange={(e) => setSelected(e.detail.value)} />
-<GoabCheckbox onGoabChange={(e) => setChecked(e.detail.checked)} />
+<GoabButton onClick={handleSave}>Save</GoabButton>
+<GoabInput onChange={(detail) => setValue(detail.value)} />
+<GoabDropdown onChange={(detail) => setSelected(detail.value)} />
+<GoabCheckbox onChange={(detail) => setChecked(detail.checked)} />
 ```
 
 Event `detail` shapes vary by component — check the component's gallery page or the

package/src/generators/react-app/react-app.spec.ts

@@ -99,6 +99,20 @@ describe('React App Generator', () => {
     expect(agents).not.toContain('ui-components.alberta.ca');
   }, 30000);
 
+  it('AGENTS.md documents the real onClick/onChange event pattern, not the never-real onGoab*/e.detail one', async () => {
+    // @abgov/react-components has never exposed onGoab*-prefixed handlers or wrapped a
+    // callback's payload in e.detail -- onChange receives its detail object directly. Regression
+    // guard: this doc text drifted from the real API without the generated app code ever being
+    // affected (app.tsx has always used plain onClick), so nothing else would have caught it.
+    const host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    await generator(host, options);
+    const agents = host.read('apps/test/AGENTS.md').toString();
+    expect(agents).not.toContain('onGoabClick');
+    expect(agents).not.toContain('onGoabChange');
+    expect(agents).not.toMatch(/e\.detail\.(value|checked)/);
+    expect(agents).toContain('onChange={(detail) => setValue(detail.value)}');
+  }, 30000);
+
   it('can add nginx proxy', async () => {
     const host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
     await generator(host, {

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

@@ -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__

@@ -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

@@ -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

@@ -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"}
+{"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

@@ -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__

@@ -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__

@@ -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__

@@ -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__

@@ -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__

@@ -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__

@@ -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__

@@ -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

@@ -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);