@abgov/nx-adsp 13.28.1 → 13.30.0

package/src/generators/vue-components/files/src/lib/patterns/WorkspaceTable.vue__tmpl__

@@ -5,9 +5,13 @@
 // consuming view can render badges, formatted values, or action buttons per
 // column without this component knowing anything about the domain.
 //
-// No native GoA sortable-header component exists (checked -- there isn't
-// one), so a sortable column header is hand-rolled here using the standard
-// WAI-ARIA "sortable table header" pattern (aria-sort + a real button), not
+// Sortable headers use the native goa-table-sort-header inside a goa-table with
+// sort-mode="single": the element owns the aria-sort, the direction cycling and
+// the visual affordance. An earlier version of this comment asserted no native
+// sortable-header component existed -- it had shipped since 2.0.0. Check the
+// installed package's registered elements rather than trusting a note like that.
+//
+// The superseded hand-rolled version used the standard
 // invented from scratch.
 import { useSlots } from 'vue';
 import GoabButton from '../primitives/GoabButton.vue';
@@ -44,19 +48,23 @@ withDefaults(
 const emit = defineEmits<{
   retry: [];
   pageChange: [page: number];
-  sort: [key: string];
+  /**
+   * goa-table owns the direction cycling, so both parts arrive together and the
+   * consuming view no longer toggles a direction itself.
+   */
+  sort: [sortBy: string, sortDir: 'asc' | 'desc'];
 }>();
 
 const slots = useSlots();
 
-function ariaSort(
-  column: WorkspaceTableColumn,
-  sortBy?: string,
-  sortDir?: 'asc' | 'desc',
-): 'ascending' | 'descending' | 'none' | undefined {
-  if (!column.sortable) return undefined;
-  if (sortBy !== column.key) return 'none';
-  return sortDir === 'desc' ? 'descending' : 'ascending';
+// goa-table reports direction numerically -- 1 ascending, -1 descending, 0
+// unsorted -- while useApi's ListQuery and every generated view speak
+// 'asc' | 'desc'. Translating here keeps that difference in one place.
+function onNativeSort(event: Event) {
+  const detail = (event as CustomEvent<{ sortBy: string; sortDir: number }>)
+    .detail;
+  if (!detail?.sortBy) return;
+  emit('sort', detail.sortBy, detail.sortDir < 0 ? 'desc' : 'asc');
 }
 </script>
 
@@ -77,25 +85,33 @@ function ariaSort(
     </goa-callout>
 
     <template v-else>
-      <goa-table width="100%">
+      <!-- sort-mode="single" makes goa-table aggregate its sort headers and
+           emit one _sort event; the headers own their own aria-sort and
+           direction cycling, which this component used to hand-roll. -->
+      <!-- The V2 flag is set on both the table and its sort headers: each
+           defaults to version 1, and this workspace is on the V2 design system
+           (the same reason goa-app-header and goa-pagination carry it). Without
+           it the table and its headers render V1 styling inside a V2 app.
+           sort-mode="single" is goa-table's default but stated explicitly: it
+           decides whether the table emits _sort or _multisort, so the listener
+           below only makes sense alongside it. -->
+      <goa-table
+        width="100%"
+        version="2"
+        sort-mode="single"
+        @_sort="onNativeSort"
+      >
         <thead>
           <tr>
-            <th
-              v-for="column in columns"
-              :key="column.key"
-              :aria-sort="ariaSort(column, sortBy, sortDir)"
-            >
-              <button
+            <th v-for="column in columns" :key="column.key">
+              <goa-table-sort-header
                 v-if="column.sortable"
-                type="button"
-                class="sort-button"
-                @click="emit('sort', column.key)"
+                version="2"
+                :name="column.key"
+                :direction="column.key === sortBy ? sortDir : 'none'"
               >
                 {{ column.label }}
-                <span aria-hidden="true">{{
-                  sortBy === column.key ? (sortDir === 'desc' ? '▼' : '▲') : ''
-                }}</span>
-              </button>
+              </goa-table-sort-header>
               <template v-else>{{ column.label }}</template>
             </th>
             <th v-if="slots.actions" />
@@ -133,17 +149,3 @@ function ariaSort(
   </div>
 </template>
 
-<style scoped>
-.sort-button {
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  font-weight: inherit;
-  color: inherit;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--goa-space-2xs, 0.25rem);
-}
-</style>

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

@@ -81,6 +81,32 @@ describe('Vue Components Generator', () => {
     const table = host
       .read('libs/vue-components/src/lib/patterns/WorkspaceTable.vue')
       .toString();
+    // Sorting is the native element's job: goa-table-sort-header inside a
+    // goa-table with sort-mode="single". The hand-rolled button + manual
+    // aria-sort is gone, and the comment that claimed no native component
+    // existed is corrected.
+    expect(table).toContain('<goa-table-sort-header');
+    expect(table).toContain('sort-mode="single"');
+    // goa-table and goa-table-sort-header both default to V1 styling; this
+    // workspace is on V2, the same reason goa-app-header and goa-pagination
+    // carry version="2".
+    // Asserted per element rather than by counting: a count is hostage to the
+    // literal appearing in a comment, which is how this assertion first broke.
+    const compactTable = table.replace(/\s+/g, ' ');
+    expect(compactTable).toContain(
+      '<goa-table width="100%" version="2" sort-mode="single"',
+    );
+    expect(compactTable).toContain(
+      '<goa-table-sort-header v-if="column.sortable" version="2"',
+    );
+    expect(table).toContain('@_sort="onNativeSort"');
+    // Binding forms, not bare words -- the component's own comment explains that
+    // the element owns aria-sort, so the word legitimately appears in it.
+    expect(table).not.toContain(':aria-sort=');
+    expect(table).not.toContain('class="sort-button"');
+    // goa-table reports 1/-1/0; the rest of the stack speaks asc/desc.
+    expect(table).toContain("detail.sortDir < 0 ? 'desc' : 'asc'");
+
     for (const prop of [':pagenumber=', ':itemcount=', ':perpagecount=']) {
       expect(table).toContain(prop);
     }
@@ -129,8 +155,13 @@ describe('Vue Components Generator', () => {
     }
     // Local calendar parts, not UTC: in Alberta new Date('2026-08-28') is
     // 27 Aug 18:00 local, so a stored date would render as the day before.
-    expect(filterBar).toContain('function toIsoDate');
-    expect(filterBar).toContain('function fromIsoDate');
+    // The local-parts date conversion lives in formatters now, used by
+    // FilterBar and by every generated date field, so the rule has one home.
+    expect(filterBar).toContain('toIsoDateString');
+    expect(filterBar).toContain('fromIsoDateString');
+    expect(filterBar).not.toContain('function toIsoDate');
+    expect(formattersSrc).toContain('export function toIsoDateString');
+    expect(formattersSrc).toContain('export function fromIsoDateString');
     // The call form, not the bare name: the component's own comments explain why
     // toISOString() is wrong, so the name legitimately appears in them.
     expect(filterBar).not.toContain('date.toISOString()');

package/src/generators/vue-intake-view/files/shared/src/views/__reviewViewFileName__.vue__tmpl__

@@ -2,6 +2,9 @@
 import { ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { GoabCheckbox } from '<%= goaImportPath %>';
+<% if (steps.some((s) => s.fields.some((f) => f.type === 'date'))) { -%>
+import { formatDate } from '<%= goaImportPath %>';
+<% } -%>
 import { useApi } from '../composables/useApi';
 
 const route = useRoute();
@@ -79,7 +82,11 @@ async function onSubmit() {
         <dl>
 <% step.fields.forEach(function (field) { -%>
           <dt><%- field.label %></dt>
+<% if (field.type === 'date') { -%>
+          <dd>{{ formatDate(record['<%- field.key %>']) }}</dd>
+<% } else { -%>
           <dd>{{ record['<%- field.key %>'] ?? '—' }}</dd>
+<% } -%>
 <% }); -%>
         </dl>
       </goa-container>

package/src/generators/vue-intake-view/files/steps/src/views/__stepViewFileName__.vue__tmpl__

@@ -1,7 +1,24 @@
 <script setup lang="ts">
 import { reactive, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { Stepper, StepErrorSummary, GoabInput } from '<%= goaImportPath %>';
+import {
+  Stepper,
+  StepErrorSummary,
+<% if (stepFields.some((f) => !f.type || f.type === 'text' || f.type === 'number')) { -%>
+  GoabInput,
+<% } -%>
+<% if (stepFields.some((f) => f.type === 'textarea')) { -%>
+  GoabTextarea,
+<% } -%>
+<% if (stepFields.some((f) => f.type === 'date')) { -%>
+  GoabDatePicker,
+  fromIsoDateString,
+  toIsoDateString,
+<% } -%>
+<% if (stepFields.some((f) => f.type === 'select')) { -%>
+  GoabDropdown,
+<% } -%>
+} from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
 const STEPS = [
@@ -19,7 +36,7 @@ const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
 
 const form = reactive({
 <% stepFields.forEach(function (field) { -%>
-  <%- field.key %>: '',
+  <%- field.key %>: <%- field.type === 'date' ? 'undefined as Date | undefined' : "''" %>,
 <% }); -%>
 });
 
@@ -53,7 +70,15 @@ async function load() {
     const data = await get('<%= resource %>', idParam.value);
     completedSteps.value = Array.isArray(data.completedSteps) ? data.completedSteps : [];
 <% stepFields.forEach(function (field) { -%>
+<% if (field.type === 'date') { -%>
+    if (data['<%- field.key %>'] !== undefined)
+      form.<%- field.key %> = fromIsoDateString(data['<%- field.key %>']);
+<% } else if (field.type === 'number') { -%>
+    if (data['<%- field.key %>'] !== undefined)
+      form.<%- field.key %> = String(data['<%- field.key %>']);
+<% } else { -%>
     if (data['<%- field.key %>'] !== undefined) form.<%- field.key %> = data['<%- field.key %>'];
+<% } -%>
 <% }); -%>
   } catch (e) {
     loadError.value = e instanceof Error ? e.message : 'Failed to load.';
@@ -67,7 +92,7 @@ async function load() {
 // rather than reassigned.
 function resetForm() {
 <% stepFields.forEach(function (field) { -%>
-  form.<%- field.key %> = '';
+  form.<%- field.key %> = <%- field.type === 'date' ? 'undefined' : "''" %>;
 <% }); -%>
   errors.value = [];
   completedSteps.value = [];
@@ -94,10 +119,26 @@ function validate(): boolean {
   const found: { message: string; anchor?: string }[] = [];
 <% stepFields.forEach(function (field) { -%>
 <% if (field.required !== false) { -%>
+<% if (field.type === 'date') { -%>
+  if (!form.<%- field.key %>) {
+    found.push({ message: '<%- field.label %> is required.', anchor: '#field-<%- field.key %>' });
+  }
+<% } else if (field.type === 'number') { -%>
+  if (form.<%- field.key %> === '') {
+    found.push({ message: '<%- field.label %> is required.', anchor: '#field-<%- field.key %>' });
+  } else if (!Number.isFinite(Number(form.<%- field.key %>))) {
+    found.push({ message: '<%- field.label %> must be a number.', anchor: '#field-<%- field.key %>' });
+  }
+<% } else { -%>
   if (!form.<%- field.key %> || !form.<%- field.key %>.trim()) {
     found.push({ message: '<%- field.label %> is required.', anchor: '#field-<%- field.key %>' });
   }
 <% } -%>
+<% } else if (field.type === 'number') { -%>
+  if (form.<%- field.key %> !== '' && !Number.isFinite(Number(form.<%- field.key %>))) {
+    found.push({ message: '<%- field.label %> must be a number.', anchor: '#field-<%- field.key %>' });
+  }
+<% } -%>
 <% }); -%>
   errors.value = found;
   return found.length === 0;
@@ -118,8 +159,17 @@ async function onSaveAndContinue() {
   saving.value = true;
   saveError.value = null;
   try {
+    // The form model holds what each control needs (a Date for a picker, a
+    // string for a number input); the API wants wire types.
     const body = {
       ...form,
+<% stepFields.forEach(function (field) { -%>
+<% if (field.type === 'number') { -%>
+      <%- field.key %>: form.<%- field.key %> === '' ? null : Number(form.<%- field.key %>),
+<% } else if (field.type === 'date') { -%>
+      <%- field.key %>: toIsoDateString(form.<%- field.key %>) || null,
+<% } -%>
+<% }); -%>
       completedSteps: [...new Set([...completedSteps.value, '<%- stepKey %>'])],
     };
     // A create has to answer with the new record's id for the wizard to advance
@@ -164,7 +214,21 @@ function goBack() {
 
 <% stepFields.forEach(function (field) { -%>
       <goa-form-item id="field-<%- field.key %>" label="<%- field.label %>"<% if (field.required !== false) { %> requirement="required"<% } %>>
+<% if (field.type === 'textarea') { -%>
+        <GoabTextarea v-model="form.<%- field.key %>" name="<%- field.key %>" />
+<% } else if (field.type === 'number') { -%>
+        <GoabInput v-model="form.<%- field.key %>" name="<%- field.key %>" type="number" />
+<% } else if (field.type === 'date') { -%>
+        <GoabDatePicker v-model="form.<%- field.key %>" name="<%- field.key %>" />
+<% } else if (field.type === 'select') { -%>
+        <GoabDropdown v-model="form.<%- field.key %>" name="<%- field.key %>">
+<% (field.options || []).forEach(function (option) { -%>
+          <goa-dropdown-item value="<%- option.value %>" label="<%- option.label %>" />
+<% }); -%>
+        </GoabDropdown>
+<% } else { -%>
         <GoabInput v-model="form.<%- field.key %>" name="<%- field.key %>" type="text" />
+<% } -%>
       </goa-form-item>
 <% }); -%>
 

package/src/generators/vue-intake-view/schema.d.ts

@@ -1,6 +1,9 @@
 export interface IntakeViewField {
   key: string;
   label: string;
+  type?: 'text' | 'textarea' | 'number' | 'date' | 'select';
+  /** `select` only. Rendered as goa-dropdown-item children. */
+  options?: { value: string; label: string }[];
   required?: boolean;
 }
 

package/src/generators/vue-intake-view/schema.json

@@ -33,7 +33,7 @@
     },
     "steps": {
       "type": "string",
-      "description": "JSON array of steps, in order -- e.g. '[{\"key\":\"personal-info\",\"label\":\"Personal information\",\"fields\":[{\"key\":\"fullName\",\"label\":\"Full name\"}]}]'. Each item: { key, label, fields: [{ key, label, required?: boolean (default true) }] }. A plain array is also accepted when this generator is invoked programmatically. Every field is currently a plain text input -- see the generated AGENTS.md note for other field types."
+      "description": "JSON array of steps, in order -- e.g. '[{\"key\":\"personal-info\",\"label\":\"Personal information\",\"fields\":[{\"key\":\"fullName\",\"label\":\"Full name\"},{\"key\":\"born\",\"label\":\"Date of birth\",\"type\":\"date\"}]}]'. Each item: { key, label, fields: [...] }. Each field: { key, label, type?: \"text\"|\"textarea\"|\"number\"|\"date\"|\"select\" (default \"text\"), options?: [{value,label}] (select only, required for it), required?: boolean (default true) }. A number field is submitted as a number and a date as YYYY-MM-DD built from local calendar parts, not UTC. A plain array is also accepted when this generator is invoked programmatically. Nx's CLI option coercion only supports comma-separated primitive lists for array-typed schema properties, not JSON -- a JSON string is the only CLI syntax that survives Nx's own arg parsing."
     },
     "requiresAuth": {
       "type": "boolean",
@@ -41,6 +41,12 @@
       "default": true
     }
   },
-  "required": ["project", "name", "resource", "route", "steps"],
+  "required": [
+    "project",
+    "name",
+    "resource",
+    "route",
+    "steps"
+  ],
   "additionalProperties": false
 }

package/src/generators/vue-intake-view/vue-intake-view.spec.ts

@@ -138,6 +138,78 @@ describe('Vue Intake View Generator', () => {
     expect(review).toContain('/applications/${idParam.value}/confirmation');
   }, 30000);
 
+  describe('field types', () => {
+    const typedSteps = JSON.stringify([
+      {
+        key: 'details',
+        label: 'Details',
+        fields: [
+          { key: 'name', label: 'Name' },
+          { key: 'story', label: 'Story', type: 'textarea', required: false },
+          { key: 'count', label: 'Count', type: 'number' },
+          { key: 'occurred', label: 'Occurred', type: 'date' },
+          {
+            key: 'species',
+            label: 'Species',
+            type: 'select',
+            options: [{ value: 'wolf', label: 'Wolf' }],
+          },
+        ],
+      },
+      { key: 'review-it', label: 'Review it', fields: [] },
+    ]);
+
+    it('renders the right control for each type', async () => {
+      await generator(host, { ...baseOptions, steps: typedSteps });
+      const step = host
+        .read('apps/test/src/views/DetailsStepView.vue')
+        .toString();
+      expect(step).toContain('<GoabTextarea v-model="form.story"');
+      expect(step).toContain('type="number"');
+      expect(step).toContain('<GoabDatePicker v-model="form.occurred"');
+      expect(step).toContain('<goa-dropdown-item value="wolf" label="Wolf" />');
+    });
+
+    it('coerces number and date on save', async () => {
+      await generator(host, { ...baseOptions, steps: typedSteps });
+      const step = host
+        .read('apps/test/src/views/DetailsStepView.vue')
+        .toString();
+      expect(step).toContain("count: form.count === '' ? null : Number(form.count)");
+      expect(step).toContain('occurred: toIsoDateString(form.occurred) || null');
+      expect(step).toContain("fromIsoDateString(data['occurred'])");
+    });
+
+    it('validates a number and a date without assuming a string', async () => {
+      await generator(host, { ...baseOptions, steps: typedSteps });
+      const step = host
+        .read('apps/test/src/views/DetailsStepView.vue')
+        .toString();
+      expect(step).toContain("if (form.count === '')");
+      expect(step).toContain('Count must be a number.');
+      expect(step).toContain('if (!form.occurred)');
+    });
+
+    it('formats a date field on the review view rather than printing it raw', async () => {
+      await generator(host, { ...baseOptions, steps: typedSteps });
+      const review = host
+        .read('apps/test/src/views/ApplicationReviewView.vue')
+        .toString();
+      expect(review).toContain("formatDate(record['occurred'])");
+    });
+
+    it('every field is still a text input when no types are given', async () => {
+      await generator(host, baseOptions);
+      const step = host
+        .read('apps/test/src/views/PersonalInfoStepView.vue')
+        .toString();
+      expect(step).toContain('type="text"');
+      for (const unused of ['GoabTextarea', 'GoabDatePicker', 'GoabDropdown']) {
+        expect(step).not.toContain(unused);
+      }
+    });
+  });
+
   it('generates a confirmation view showing the reference number', async () => {
     await generator(host, baseOptions);
     const confirmation = host

package/src/generators/vue-workspace-view/files/src/views/__viewFileName__.vue__tmpl__

@@ -111,13 +111,11 @@ function onPageChange(newPage: number) {
   void load();
 }
 
-function onSort(key: string) {
-  if (sortBy.value === key) {
-    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
-  } else {
-    sortBy.value = key;
-    sortDir.value = 'asc';
-  }
+// goa-table-sort-header owns the direction cycling and reports both parts, so
+// this no longer toggles anything -- it just records what the table decided.
+function onSort(key: string, dir: 'asc' | 'desc') {
+  sortBy.value = key;
+  sortDir.value = dir;
   page.value = 1;
   void load();
 }

package/src/generators/vue-workspace-view/vue-workspace-view.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const path = require("path");
 const vue_router_1 = require("../../utils/vue-router");
+const vue_side_menu_1 = require("../../utils/vue-side-menu");
 const vue_components_1 = require("../vue-components/vue-components");
 // Nx's own CLI option coercion (coerceTypesInOptions in nx/src/utils/params)
 // only knows how to split an array-typed option on commas -- it has no JSON
@@ -62,6 +63,11 @@ function default_1(host, options) {
             // A multi-column table at the 1000px default wraps every cell.
             layout: 'wide',
         });
+        // No-op on a header-layout app, which has no side menu.
+        (0, vue_side_menu_1.insertSideMenuItem)(host, normalizedOptions.projectRoot, {
+            label: normalizedOptions.heading,
+            to: normalizedOptions.route,
+        });
         yield (0, devkit_1.formatFiles)(host);
     });
 }

package/src/generators/vue-workspace-view/vue-workspace-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-workspace-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-workspace-view/vue-workspace-view.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vue-workspace-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-workspace-view/vue-workspace-view.ts"],"names":[],"mappings":"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"}

package/src/generators/vue-workspace-view/vue-workspace-view.spec.ts

@@ -9,6 +9,13 @@ import { Schema } from './schema';
 
 // Mirrors the shape vue-app's own template generates -- vue-workspace-view
 // retrofits into this file, so the fixture must match what it actually looks for.
+const APP_VUE_INTERNAL_FIXTURE = `<script setup lang="ts">
+const primaryItems = [
+  { label: 'Home', to: '/' },
+];
+</script>
+`;
+
 const ROUTER_FIXTURE = `import { createRouter, createWebHistory } from 'vue-router';
 import HomeView from '../views/HomeView.vue';
 
@@ -41,6 +48,7 @@ describe('Vue Workspace View Generator', () => {
     host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
     addProjectConfiguration(host, 'test', { root: 'apps/test' });
     host.write('apps/test/src/router/index.ts', ROUTER_FIXTURE);
+    host.write('apps/test/src/App.vue', APP_VUE_INTERNAL_FIXTURE);
   });
 
   it('throws when --project does not exist', async () => {
@@ -104,6 +112,9 @@ describe('Vue Workspace View Generator', () => {
     expect(view).toContain("await list('applications', {");
     expect(view).toContain('pageSize: PAGE_SIZE');
     expect(view).toContain('rows.value = result.rows');
+    // The element decides the direction, so the view records rather than toggles.
+    expect(view).toContain("function onSort(key: string, dir: 'asc' | 'desc')");
+    expect(view).not.toContain("sortDir.value === 'asc' ? 'desc' : 'asc'");
     expect(view).toContain('itemCount.value = result.total');
     expect(view).not.toContain('apiFetch');
     expect(view).not.toContain('URLSearchParams');
@@ -263,6 +274,13 @@ describe('Vue Workspace View Generator', () => {
     expect(view).toContain(':per-page-count="50"');
   }, 30000);
 
+  it('adds nothing to the side menu when the app has no App.vue', async () => {
+    host.delete('apps/test/src/App.vue');
+    // A header-layout app has no side menu; adding a staff view to one must not
+    // fail, it simply has no nav to join.
+    await expect(generator(host, baseOptions)).resolves.not.toThrow();
+  });
+
   it('inserts the route into router/index.ts, requiring auth by default', async () => {
     await generator(host, baseOptions);
 
@@ -274,6 +292,10 @@ describe('Vue Workspace View Generator', () => {
     expect(routerTs).toContain('requiresAuth: true');
     // A data table asks for the wide variant -- the generator knows it emitted one.
     expect(routerTs).toContain("layout: 'wide'");
+    // A staff queue is a nav destination, so the generator adds it to the
+    // app's side-menu list rather than leaving the route reachable only by URL.
+    const appVue = host.read('apps/test/src/App.vue').toString();
+    expect(appVue).toContain("to: '/applications'");
     expect(routerTs).toContain("{ path: '/', component: HomeView }");
   }, 30000);
 

package/src/utils/vue-side-menu.d.ts

@@ -0,0 +1,19 @@
+import { Tree } from '@nx/devkit';
+export interface SideMenuItemSpec {
+    /** Nav label shown in the side menu, e.g. 'Review queue'. */
+    label: string;
+    /** Route path the item navigates to, e.g. '/queue'. */
+    to: string;
+}
+/**
+ * Adds a nav item to a generated app's side menu.
+ *
+ * A no-op when the app has no `primaryItems` array. That is the signal the app
+ * was generated with `--layout=header` (a public app has no side menu at all),
+ * so adding a staff view to it should not fail or warn -- there is simply no nav
+ * to add to.
+ *
+ * Idempotent: re-running a generator, or two generators claiming the same path,
+ * leaves one entry.
+ */
+export declare function insertSideMenuItem(host: Tree, projectRoot: string, item: SideMenuItemSpec): void;

package/src/utils/vue-side-menu.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertSideMenuItem = insertSideMenuItem;
+// Deterministic text insertion into vue-app's `primaryItems` array, mirroring
+// insertVueRoute's approach for the same reason: the template's shape is fixed,
+// so a targeted anchor beats pulling in an AST library for one array entry.
+//
+// The array is a plain literal in App.vue rather than something derived from the
+// router, deliberately: a generated app is an opinionated starting point, and
+// nav order, grouping and labels are decisions the owning team should be able to
+// read and change in one obvious place -- not behaviour resolved at runtime by
+// the shell that every app then has to work around.
+const ANCHOR = 'const primaryItems = [';
+/**
+ * Adds a nav item to a generated app's side menu.
+ *
+ * A no-op when the app has no `primaryItems` array. That is the signal the app
+ * was generated with `--layout=header` (a public app has no side menu at all),
+ * so adding a staff view to it should not fail or warn -- there is simply no nav
+ * to add to.
+ *
+ * Idempotent: re-running a generator, or two generators claiming the same path,
+ * leaves one entry.
+ */
+function insertSideMenuItem(host, projectRoot, item) {
+    var _a;
+    const appPath = `${projectRoot}/src/App.vue`;
+    const content = (_a = host.read(appPath)) === null || _a === void 0 ? void 0 : _a.toString();
+    if (content === undefined)
+        return;
+    const anchorIndex = content.indexOf(ANCHOR);
+    if (anchorIndex === -1)
+        return;
+    if (content.includes(`to: '${item.to}'`))
+        return;
+    const insertAt = anchorIndex + ANCHOR.length;
+    host.write(appPath, content.slice(0, insertAt) +
+        `\n  { label: '${item.label}', to: '${item.to}' },` +
+        content.slice(insertAt));
+}
+//# sourceMappingURL=vue-side-menu.js.map

package/src/utils/vue-side-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-side-menu.js","sourceRoot":"","sources":["../../../../../packages/nx-adsp/src/utils/vue-side-menu.ts"],"names":[],"mappings":";;AA+BA,gDAqBC;AA3CD,8EAA8E;AAC9E,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,iFAAiF;AACjF,8EAA8E;AAC9E,iFAAiF;AACjF,+EAA+E;AAC/E,oDAAoD;AACpD,MAAM,MAAM,GAAG,wBAAwB,CAAC;AAExC;;;;;;;;;;GAUG;AACH,SAAgB,kBAAkB,CAChC,IAAU,EACV,WAAmB,EACnB,IAAsB;;IAEtB,MAAM,OAAO,GAAG,GAAG,WAAW,cAAc,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,0CAAE,QAAQ,EAAE,CAAC;IAC/C,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO;IAElC,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,WAAW,KAAK,CAAC,CAAC;QAAE,OAAO;IAE/B,IAAI,OAAO,CAAC,QAAQ,CAAC,QAAQ,IAAI,CAAC,EAAE,GAAG,CAAC;QAAE,OAAO;IAEjD,MAAM,QAAQ,GAAG,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC;IAC7C,IAAI,CAAC,KAAK,CACR,OAAO,EACP,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC;QACxB,iBAAiB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,EAAE,MAAM;QACnD,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC1B,CAAC;AACJ,CAAC"}