@jskit-ai/users-web 0.1.81 → 0.1.82

package/src/client/filters.js

@@ -0,0 +1,15 @@
+export {
+  CRUD_LIST_FILTER_TYPE_FLAG,
+  CRUD_LIST_FILTER_TYPE_ENUM,
+  CRUD_LIST_FILTER_TYPE_ENUM_MANY,
+  CRUD_LIST_FILTER_TYPE_RECORD_ID,
+  CRUD_LIST_FILTER_TYPE_RECORD_ID_MANY,
+  CRUD_LIST_FILTER_TYPE_DATE,
+  CRUD_LIST_FILTER_TYPE_DATE_RANGE,
+  CRUD_LIST_FILTER_TYPE_NUMBER_RANGE,
+  CRUD_LIST_FILTER_TYPE_PRESENCE,
+  CRUD_LIST_FILTER_PRESENCE_PRESENT,
+  CRUD_LIST_FILTER_PRESENCE_MISSING,
+  CRUD_LIST_FILTER_PRESENCE_OPTIONS,
+  defineCrudListFilters
+} from "@jskit-ai/kernel/shared/support/crudListFilters";

package/src/client/index.js

@@ -2,6 +2,11 @@ import { UsersWebClientProvider } from "./providers/UsersWebClientProvider.js";
 
 export { UsersWebClientProvider } from "./providers/UsersWebClientProvider.js";
 export { default as AccountSettingsClientElement } from "./components/AccountSettingsClientElement.vue";
+export { default as CrudAddEditScreen } from "./components/CrudAddEditScreen.vue";
+export { default as CrudListBulkActionSurface } from "./components/CrudListBulkActionSurface.vue";
+export { default as CrudListFilterSurface } from "./components/CrudListFilterSurface.vue";
+export { default as CrudListScreen } from "./components/CrudListScreen.vue";
+export { default as CrudViewScreen } from "./components/CrudViewScreen.vue";
 
 const clientProviders = Object.freeze([UsersWebClientProvider]);
 

package/templates/src/components/account/settings/AccountSettingsNotificationsSection.vue

@@ -10,12 +10,11 @@ const notifications = props.runtime.notifications;
 </script>
 
 <template>
-  <v-card rounded="lg" elevation="0" border>
-    <v-card-item>
-      <v-card-title class="text-subtitle-1">Notifications</v-card-title>
-    </v-card-item>
-    <v-divider />
-    <v-card-text>
+  <v-sheet rounded="lg" border class="account-settings-section">
+    <header class="account-settings-section__header">
+      <h2 class="account-settings-section__title">Notifications</h2>
+    </header>
+    <div class="account-settings-section__body">
       <v-form @submit.prevent="notifications.submit" novalidate>
         <v-switch
           v-model="notifications.form.productUpdates"
@@ -50,6 +49,33 @@ const notifications = props.runtime.notifications;
           Save notification settings
         </v-btn>
       </v-form>
-    </v-card-text>
-  </v-card>
+    </div>
+  </v-sheet>
 </template>
+
+<style scoped>
+.account-settings-section {
+  overflow: hidden;
+}
+
+.account-settings-section__header {
+  padding: 1rem 1rem 0;
+}
+
+.account-settings-section__title {
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.account-settings-section__body {
+  padding: 1rem;
+}
+
+@media (max-width: 640px) {
+  .account-settings-section__body :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/templates/src/components/account/settings/AccountSettingsPreferencesSection.vue

@@ -10,12 +10,11 @@ const preferences = props.runtime.preferences;
 </script>
 
 <template>
-  <v-card rounded="lg" elevation="0" border>
-    <v-card-item>
-      <v-card-title class="text-subtitle-1">Preferences</v-card-title>
-    </v-card-item>
-    <v-divider />
-    <v-card-text>
+  <v-sheet rounded="lg" border class="account-settings-section">
+    <header class="account-settings-section__header">
+      <h2 class="account-settings-section__title">Preferences</h2>
+    </header>
+    <div class="account-settings-section__body">
       <v-form @submit.prevent="preferences.submit" novalidate>
         <v-row>
           <v-col cols="12" md="4">
@@ -120,6 +119,33 @@ const preferences = props.runtime.preferences;
           Save preferences
         </v-btn>
       </v-form>
-    </v-card-text>
-  </v-card>
+    </div>
+  </v-sheet>
 </template>
+
+<style scoped>
+.account-settings-section {
+  overflow: hidden;
+}
+
+.account-settings-section__header {
+  padding: 1rem 1rem 0;
+}
+
+.account-settings-section__title {
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.account-settings-section__body {
+  padding: 1rem;
+}
+
+@media (max-width: 640px) {
+  .account-settings-section__body :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/templates/src/components/account/settings/AccountSettingsProfileSection.vue

@@ -10,12 +10,11 @@ const profile = props.runtime.profile;
 </script>
 
 <template>
-  <v-card rounded="lg" elevation="0" border>
-    <v-card-item>
-      <v-card-title class="text-subtitle-1">Profile</v-card-title>
-    </v-card-item>
-    <v-divider />
-    <v-card-text>
+  <v-sheet rounded="lg" border class="account-settings-section">
+    <header class="account-settings-section__header">
+      <h2 class="account-settings-section__title">Profile</h2>
+    </header>
+    <div class="account-settings-section__body">
       <v-form @submit.prevent="profile.submit" novalidate>
         <v-row class="mb-2">
           <v-col cols="12" md="4" class="d-flex flex-column align-center justify-center">
@@ -89,6 +88,33 @@ const profile = props.runtime.profile;
           Save profile
         </v-btn>
       </v-form>
-    </v-card-text>
-  </v-card>
+    </div>
+  </v-sheet>
 </template>
+
+<style scoped>
+.account-settings-section {
+  overflow: hidden;
+}
+
+.account-settings-section__header {
+  padding: 1rem 1rem 0;
+}
+
+.account-settings-section__title {
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.account-settings-section__body {
+  padding: 1rem;
+}
+
+@media (max-width: 640px) {
+  .account-settings-section__body :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/test/crudListBulkActionSurface.test.js

@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+
+const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
+const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
+
+test("CrudListBulkActionSurface stays adaptive and runtime-owned", async () => {
+  const source = await readFile(
+    path.join(PACKAGE_DIR, "src", "client", "components", "CrudListBulkActionSurface.vue"),
+    "utf8"
+  );
+
+  assert.match(source, /defineProps/);
+  assert.match(source, /useDisplay/);
+  assert.match(source, /v-if="shouldRender"/);
+  assert.match(source, /selectedCount/);
+  assert.match(source, /hasActions/);
+  assert.match(source, /hasSelection/);
+  assert.match(source, /v-menu/);
+  assert.match(source, /Bulk actions/);
+  assert.match(source, /min-height:\s*48px/);
+  assert.doesNotMatch(source, /useCrudList\(/);
+  assert.doesNotMatch(source, /apiSuffix|repository|server/);
+});

package/test/crudListFilterSurface.test.js

@@ -0,0 +1,45 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+
+const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
+const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
+
+test("users-web exposes client-side CRUD list filter definition helpers", async () => {
+  const { defineCrudListFilters } = await import("@jskit-ai/users-web/client/filters");
+
+  const filters = defineCrudListFilters({
+    status: {
+      type: "enum",
+      label: "Status",
+      options: [
+        { value: "active", label: "Active" }
+      ]
+    }
+  });
+
+  assert.equal(filters.status.queryKey, "status");
+  assert.equal(filters.status.options[0].label, "Active");
+});
+
+test("CrudListFilterSurface provides adaptive controls without owning server semantics", async () => {
+  const source = await readFile(
+    path.join(PACKAGE_DIR, "src", "client", "components", "CrudListFilterSurface.vue"),
+    "utf8"
+  );
+
+  assert.match(source, /defineProps/);
+  assert.match(source, /useDisplay/);
+  assert.match(source, /v-if="shouldRender"/);
+  assert.match(source, /filterEntries/);
+  assert.match(source, /runtimeValues\[filter\.key\]/);
+  assert.match(source, /activeChips/);
+  assert.match(source, /clearChip/);
+  assert.match(source, /clearFilters/);
+  assert.match(source, /v-dialog/);
+  assert.match(source, /min-height:\s*48px/);
+  assert.doesNotMatch(source, /useCrudList\(/);
+  assert.doesNotMatch(source, /apiSuffix|server|repository/);
+});

package/test/crudScreenComponents.test.js

@@ -0,0 +1,62 @@
+import assert from "node:assert/strict";
+import path from "node:path";
+import test from "node:test";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+
+const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
+const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
+
+async function readComponent(name) {
+  return readFile(path.join(PACKAGE_DIR, "src", "client", "components", name), "utf8");
+}
+
+test("CRUD screen components own generated list/view/form chrome centrally", async () => {
+  const listSource = await readComponent("CrudListScreen.vue");
+  const viewSource = await readComponent("CrudViewScreen.vue");
+  const addEditSource = await readComponent("CrudAddEditScreen.vue");
+
+  assert.match(listSource, /CrudListBulkActionSurface/);
+  assert.match(listSource, /CrudListFilterSurface/);
+  assert.match(listSource, /ui-generator-list-cards d-md-none/);
+  assert.match(listSource, /ui-generator-list-table d-none d-md-block/);
+  assert.match(listSource, /class="ui-generator-list-fab d-md-none"/);
+  assert.match(listSource, /#activator[\s\S]*Actions/);
+  assert.match(listSource, /min-height:\s*48px/);
+  assert.match(listSource, /<slot[\s\S]*name="card-fields"/);
+  assert.match(listSource, /<slot name="table-header"/);
+  assert.match(listSource, /<slot name="table-row"/);
+
+  assert.match(viewSource, /generated-ui-screen generated-ui-screen--operator ui-generator-view-element/);
+  assert.match(viewSource, /ui-generator-view-panel/);
+  assert.match(viewSource, /@click="view\.refresh"/);
+  assert.match(viewSource, /<slot name="fields"/);
+
+  assert.match(addEditSource, /generated-ui-screen generated-ui-screen--operator ui-generator-add-edit-form/);
+  assert.match(addEditSource, /addEdit\.canRetryLoad/);
+  assert.match(addEditSource, /@click="addEdit\.refresh"/);
+  assert.match(addEditSource, /<slot[\s\S]*name="fields"/);
+});
+
+test("account settings load state exposes a local retry action", async () => {
+  const source = await readComponent("AccountSettingsClientElement.vue");
+
+  assert.match(source, /settingsLoadError/);
+  assert.match(source, /@click="runtime\.refreshSettings"/);
+});
+
+test("CRUD screen composables are importable package APIs", async () => {
+  const [
+    listModule,
+    viewModule,
+    addEditModule
+  ] = await Promise.all([
+    import("@jskit-ai/users-web/client/composables/useCrudListScreen"),
+    import("@jskit-ai/users-web/client/composables/useCrudViewScreen"),
+    import("@jskit-ai/users-web/client/composables/useCrudAddEditScreen")
+  ]);
+
+  assert.equal(typeof listModule.useCrudListScreen, "function");
+  assert.equal(typeof viewModule.useCrudViewScreen, "function");
+  assert.equal(typeof addEditModule.useCrudAddEditScreen, "function");
+});

package/test/errorIntentContract.test.js

@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import path from "node:path";
+import test from "node:test";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+
+const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
+const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
+
+async function readClientSource(relativePath) {
+  return readFile(path.join(PACKAGE_DIR, "src", "client", relativePath), "utf8");
+}
+
+test("users-web reports load errors as local resource-load intent by default", async () => {
+  const source = await readClientSource("composables/runtime/operationUiHelpers.js");
+
+  assert.match(source, /loadChannel = ""/);
+  assert.match(source, /notFoundChannel = ""/);
+  assert.match(source, /intent = "resource-load"/);
+  assert.match(source, /intent: "resource-load"/);
+  assert.doesNotMatch(source, /loadChannel = "banner"/);
+});
+
+test("users-web action feedback lets shell policy choose snackbar presentation", async () => {
+  const source = await readClientSource("composables/runtime/useUiFeedback.js");
+
+  assert.match(source, /successChannel = ""/);
+  assert.match(source, /errorChannel = ""/);
+  assert.match(source, /intent: "action-feedback"/);
+  assert.doesNotMatch(source, /errorChannel = "banner"/);
+});

package/test/exportsContract.test.js

@@ -16,7 +16,14 @@ test("users-web exports are explicit and aligned with production/template usage"
     requiredExports: [
       "./client",
       "./client/components/AccountSettingsClientElement",
+      "./client/components/CrudAddEditScreen",
+      "./client/components/CrudListBulkActionSurface",
+      "./client/components/CrudListFilterSurface",
+      "./client/components/CrudListScreen",
+      "./client/components/CrudViewScreen",
       "./client/account-settings/sections",
+      "./client/bulkActions",
+      "./client/filters",
       "./client/composables/useAddEdit",
       "./client/composables/useCommand",
       "./client/composables/useEndpointResource",
@@ -24,10 +31,14 @@ test("users-web exports are explicit and aligned with production/template usage"
       "./client/composables/usePaths",
       "./client/composables/useView",
       "./client/composables/useCrudAddEdit",
+      "./client/composables/useCrudAddEditScreen",
+      "./client/composables/useCrudListBulkActions",
       "./client/composables/useCrudListFilterLookups",
       "./client/composables/useCrudListFilters",
       "./client/composables/useCrudList",
+      "./client/composables/useCrudListScreen",
       "./client/composables/useCrudView",
+      "./client/composables/useCrudViewScreen",
       "./client/lib/httpClient"
     ]
   });

package/test/resourceLoadStateHelpers.test.js

@@ -1,7 +1,10 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { ref } from "vue";
-import { hasResolvedQueryData } from "../src/client/composables/support/resourceLoadStateHelpers.js";
+import {
+  hasResolvedQueryData,
+  mergeQueryMeta
+} from "../src/client/composables/support/resourceLoadStateHelpers.js";
 
 test("hasResolvedQueryData returns true when the query succeeded", () => {
   const query = {
@@ -37,3 +40,34 @@ test("hasResolvedQueryData returns false when query and payload are unresolved",
     data: ref(null)
   }), false);
 });
+
+test("mergeQueryMeta preserves caller metadata while adding JSKIT refresh policy", () => {
+  assert.deepEqual(
+    mergeQueryMeta(
+      {
+        staleTime: 1000,
+        meta: {
+          owner: "contacts",
+          jskit: {
+            feature: "list"
+          }
+        }
+      },
+      {
+        jskit: {
+          refreshOnPull: true
+        }
+      }
+    ),
+    {
+      staleTime: 1000,
+      meta: {
+        owner: "contacts",
+        jskit: {
+          feature: "list",
+          refreshOnPull: true
+        }
+      }
+    }
+  );
+});

package/test/settingsPlacementContract.test.js

@@ -3,6 +3,7 @@ import path from "node:path";
 import test from "node:test";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
+import { assertGeneratedUiSourceContract } from "@jskit-ai/kernel/shared/support/generatedUiContract";
 import descriptor from "../package.descriptor.mjs";
 
 const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
@@ -110,12 +111,72 @@ test("users-web package-owned account settings host is fully placement-backed",
     "utf8"
   );
 
+  assertGeneratedUiSourceContract(source, {
+    forbidCardShell: true,
+    sourceName: "AccountSettingsClientElement.vue",
+    requiredPatterns: [
+      {
+        id: "account-settings-header",
+        pattern: /settings-panel__header/,
+        message: "Account settings host needs a direct settings panel header."
+      },
+      {
+        id: "account-settings-sections",
+        pattern: /useAccountSettingsSections/,
+        message: "Account settings host must remain placement-backed."
+      }
+    ]
+  });
   assert.match(source, /useAccountSettingsSections/);
+  assert.match(source, /settings-panel__header/);
+  assert.doesNotMatch(source, /<v-card\b|v-card-title|v-card-subtitle/);
   assert.doesNotMatch(source, /AccountSettingsProfileSection/);
   assert.doesNotMatch(source, /AccountSettingsPreferencesSection/);
   assert.doesNotMatch(source, /AccountSettingsNotificationsSection/);
 });
 
+test("users-web profile form element uses a direct panel instead of card scaffolding", async () => {
+  const source = await readFile(path.join(PACKAGE_DIR, "src", "client", "components", "ProfileClientElement.vue"), "utf8");
+
+  assertGeneratedUiSourceContract(source, {
+    forbidCardShell: true,
+    sourceName: "ProfileClientElement.vue",
+    requiredPatterns: [
+      {
+        id: "profile-panel-body",
+        pattern: /profile-client-panel__body/,
+        message: "Profile editor needs a direct panel body."
+      }
+    ]
+  });
+  assert.match(source, /profile-client-panel__body/);
+  assert.doesNotMatch(source, /<v-card\b|v-card-title|v-card-subtitle|v-card-text|v-card-item/);
+});
+
+test("users-web account settings section templates use direct settings panels", async () => {
+  for (const relativePath of [
+    path.join("templates", "src", "components", "account", "settings", "AccountSettingsProfileSection.vue"),
+    path.join("templates", "src", "components", "account", "settings", "AccountSettingsPreferencesSection.vue"),
+    path.join("templates", "src", "components", "account", "settings", "AccountSettingsNotificationsSection.vue")
+  ]) {
+    const source = await readFile(path.join(PACKAGE_DIR, relativePath), "utf8");
+
+    assertGeneratedUiSourceContract(source, {
+      forbidCardShell: true,
+      sourceName: relativePath,
+      requiredPatterns: [
+        {
+          id: "account-settings-section",
+          pattern: /account-settings-section/,
+          message: "Account settings sections need the direct section panel primitive."
+        }
+      ]
+    });
+    assert.match(source, /account-settings-section/);
+    assert.doesNotMatch(source, /<v-card\b|v-card-title|v-card-subtitle/);
+  }
+});
+
 test("users-web descriptor metadata advertises home cog outlet and standard home settings placements", () => {
   assert.deepEqual(
     readOutlets("home-cog:primary-menu"),

package/test/useCrudListBulkActions.test.js

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { nextTick } from "vue";
+
+test("useCrudListBulkActions manages selection and executes action context", async () => {
+  const { defineCrudListBulkActions } = await import("@jskit-ai/users-web/client/bulkActions");
+  const { useCrudListBulkActions } = await import("@jskit-ai/users-web/client/composables/useCrudListBulkActions");
+  const calls = [];
+  const actions = defineCrudListBulkActions([
+    {
+      key: "archive",
+      label: "Archive",
+      async run(context) {
+        calls.push(context);
+        context.clearSelection();
+      }
+    }
+  ]);
+  const runtime = useCrudListBulkActions(actions, {
+    resolveRecordId: (record) => record.id,
+    resolveContext: () => ({
+      reload: "reload-token"
+    })
+  });
+
+  assert.equal(runtime.hasActions.value, true);
+  assert.equal(runtime.hasSelection.value, false);
+
+  runtime.setRecordSelected({ id: "10", label: "A" }, 0, true);
+  runtime.setRecordSelected({ id: "11", label: "B" }, 1, true);
+  await nextTick();
+
+  assert.deepEqual(runtime.selectedIds.value, ["10", "11"]);
+  assert.equal(runtime.selectedCount.value, 2);
+  assert.equal(runtime.allVisibleSelected([{ id: "10" }, { id: "11" }]), true);
+  assert.equal(runtime.someVisibleSelected([{ id: "10" }, { id: "12" }]), true);
+
+  await runtime.execute("archive");
+
+  assert.equal(calls.length, 1);
+  assert.deepEqual(calls[0].selectedIds, ["10", "11"]);
+  assert.deepEqual(calls[0].ids, ["10", "11"]);
+  assert.equal(calls[0].reload, "reload-token");
+  assert.equal(runtime.selectedCount.value, 0);
+});
+
+test("defineCrudListBulkActions skips malformed and duplicate actions", async () => {
+  const { defineCrudListBulkActions } = await import("@jskit-ai/users-web/client/bulkActions");
+
+  const actions = defineCrudListBulkActions([
+    null,
+    { key: "archive", label: "Archive" },
+    { key: "archive", label: "Archive again" },
+    { key: "missing-label" },
+    { label: "Generated key" }
+  ]);
+
+  assert.deepEqual(
+    actions.map((action) => [action.key, action.label, action.color, action.variant]),
+    [
+      ["archive", "Archive", "primary", "tonal"],
+      ["action-5", "Generated key", "primary", "tonal"]
+    ]
+  );
+});