@jskit-ai/http-web 0.1.79 → 0.1.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/http-web",
-  "version": "0.1.79",
+  "version": "0.1.80",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -44,14 +44,14 @@
     "./client/support/contractGuards": "./src/client/support/contractGuards.js"
   },
   "dependencies": {
-    "@jskit-ai/resource-crud-core": "0.1.176",
+    "@jskit-ai/resource-crud-core": "0.1.177",
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.232",
-    "@jskit-ai/kernel": "0.1.234",
-    "@jskit-ai/realtime": "0.1.231",
-    "@jskit-ai/shell-web": "0.1.238",
+    "@jskit-ai/http-runtime": "0.1.233",
+    "@jskit-ai/kernel": "0.1.235",
+    "@jskit-ai/realtime": "0.1.232",
+    "@jskit-ai/shell-web": "0.1.239",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/patterns/crud-screen-set/PATTERN.md

@@ -42,6 +42,13 @@ questionnaire.
 - Resource-load errors stay inside the screen with retry. Command success and
   failure use JSKIT's shared toast/snackbar feedback path.
 - URLs are route templates or route objects resolved through the screen runtime.
+- Browser URL templates include the configured surface prefix; unlike API
+  suffixes, `/new` and `/` are absolute browser paths. Use the complete route or
+  `paths.page()` for a link without record placeholders, and the owning CRUD
+  runtime's `resolveParams()` for record placeholders.
+- `CrudListScreen` applies `createLabel` to all create actions. Its responsive
+  card and table layouts both remain in the DOM; Playwright text assertions
+  should filter to visible matches rather than match a hidden layout too.
 - Product field components are ordinary application source.
 - Query keys and placement sources describe the resource, not an authoring tool.
 - No generated-file markers, overwrite contracts, receipts, or provenance remain.
@@ -69,6 +76,14 @@ id (or a distinct new-record marker) so form cache entries stay separate.
 The New/Edit examples supply it; list/view screen wrappers derive their
 standard keys from `resourceNamespace`.
 
+Save navigation is configured in the top-level `saveSuccess` object. The default
+prefers a configured record-view URL, then the list. A create-and-list variation
+sets `navigateToView: false` and `listUrlTemplate` to its list route. Set both
+`navigateToView` and `navigateToList` to `false` to stay on the form. A custom
+`addEditOptions.onSaveSuccess` replaces default invalidation and navigation;
+it is unnecessary for ordinary list navigation. The generic CRUD guide explains
+this contract under **Save navigation**.
+
 Ownership and permission-bootstrap mode are different options. For a public
 resource on a public surface, use `ownershipFilter: "public"` in form options
 or lower-level request composables. List/view screen wrappers derive request

package/src/client/components/CrudListScreen.vue

@@ -314,7 +314,7 @@ function setSelectableRowsSelected(selected = true) {
       variant="flat"
       :to="listPrimaryAction"
     >
-      New
+      {{ createLabel }}
     </v-btn>
   </section>
 </template>

package/test/crudScreenComponents.test.js

@@ -3,6 +3,12 @@ import path from "node:path";
 import test from "node:test";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
+import { readFileSync } from "node:fs";
+import { registerHooks } from "node:module";
+import { compileScript, parse } from "@vue/compiler-sfc";
+import { createSSRApp, defineComponent, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { createMemoryHistory, createRouter } from "vue-router";
 
 const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
 const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
@@ -15,6 +21,58 @@ async function readClientFile(...parts) {
   return readFile(path.join(PACKAGE_DIR, "src", "client", ...parts), "utf8");
 }
 
+test("every CRUD list create action retains its configured label and destination", async () => {
+  const componentUrl = new URL("../src/client/components/CrudListScreen.vue", import.meta.url).href;
+  const hooks = registerHooks({
+    load(url, context, nextLoad) {
+      if (!url.endsWith(".vue")) return nextLoad(url, context);
+      if (url !== componentUrl) {
+        return { format: "module", shortCircuit: true, source: "export default { render: () => null };" };
+      }
+      const { descriptor } = parse(readFileSync(new URL(url), "utf8"));
+      return {
+        format: "module", shortCircuit: true,
+        source: compileScript(descriptor, { id: "crud-list-create-label", inlineTemplate: true }).content
+      };
+    }
+  });
+  let CrudListScreen;
+  try {
+    ({ default: CrudListScreen } = await import(componentUrl));
+  } finally {
+    hooks.deregister();
+  }
+
+  for (const populated of [false, true]) {
+    for (const createLabel of [undefined, "Add book"]) {
+      const screen = {
+        records: {}, listPrimaryAction: "/books/new",
+        displayRows: populated ? [{ key: "1", recordKey: "1", record: { title: "Kindred" } }] : [],
+        resolveRecordTitle: (record) => record.title
+      };
+      const app = createSSRApp({ render: () => h(CrudListScreen, {
+        screen, ...(createLabel === undefined ? {} : { createLabel })
+      }) });
+      const router = createRouter({
+        history: createMemoryHistory(), routes: [{ path: "/books", component: { render: () => null } }]
+      });
+      await router.push("/books");
+      app.use(router);
+      app.component("VBtn", defineComponent({
+        props: { to: { type: [String, Object], default: undefined } },
+        setup: (props, { slots }) => () => h("a", { href: props.to }, slots.default?.())
+      }));
+      for (const name of ["VSheet", "VTable", "VTextField", "VSkeletonLoader", "VCheckboxBtn"]) {
+        app.component(name, defineComponent({ setup: (_props, { slots }) => () => h("div", slots.default?.()) }));
+      }
+      const html = await renderToString(app);
+      const labels = [...html.matchAll(/<a[^>]*href="\/books\/new"[^>]*>(.*?)<\/a>/gs)]
+        .map((match) => match[1].trim());
+      assert.deepEqual(labels, Array(populated ? 2 : 3).fill(createLabel ?? "New record"));
+    }
+  }
+});
+
 test("CRUD screen components own list/view/form chrome centrally", async () => {
   const listSource = await readComponent("CrudListScreen.vue");
   const viewSource = await readComponent("CrudViewScreen.vue");

package/test/crudScreenPattern.test.js

@@ -88,6 +88,7 @@ test("the human guide's public create/list configuration works without bootstrap
     form.formState.title = "Public book";
     await form.addEdit.submit();
     assert.deepEqual(writes, [{ title: "Public book" }]);
+    assert.equal(router.currentRoute.value.path, "/books");
     await list.records.reload();
     assert.deepEqual(list.records.items, [{ id: "1", title: "Public book" }]);
     assert.deepEqual(Object.keys(resource.operations), ["list", "view", "create"]);