@jskit-ai/users-web 0.1.81 → 0.1.82

package/package.descriptor.mjs

@@ -3,7 +3,7 @@ import { HOME_COG_OUTLET } from "./src/shared/toolsOutletContracts.js";
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/users-web",
-  version: "0.1.81",
+  version: "0.1.82",
   kind: "runtime",
   description: "Users web module: account/profile UI plus shared users web widgets.",
   dependsOn: [
@@ -50,6 +50,34 @@ export default Object.freeze({
           subpath: "./client/components/AccountSettingsClientElement",
           summary: "Exports the package-owned account settings host that renders placement-backed account sections."
         },
+        {
+          subpath: "./client/components/CrudAddEditScreen",
+          summary: "Exports the package-owned CRUD add/edit screen shell used by generated form pages."
+        },
+        {
+          subpath: "./client/components/CrudListBulkActionSurface",
+          summary: "Exports the adaptive CRUD list bulk-action surface for generated list pages."
+        },
+        {
+          subpath: "./client/components/CrudListFilterSurface",
+          summary: "Exports the adaptive CRUD list filter surface for generated list pages."
+        },
+        {
+          subpath: "./client/components/CrudListScreen",
+          summary: "Exports the package-owned CRUD list screen shell used by generated list pages."
+        },
+        {
+          subpath: "./client/components/CrudViewScreen",
+          summary: "Exports the package-owned CRUD view screen shell used by generated detail pages."
+        },
+        {
+          subpath: "./client/bulkActions",
+          summary: "Exports client-side CRUD list bulk-action definition helpers."
+        },
+        {
+          subpath: "./client/filters",
+          summary: "Exports client-side CRUD list filter definition helpers."
+        },
         {
           subpath: "./client/components/ProfileClientElement",
           summary: "Exports profile settings client element scaffold component."
@@ -78,10 +106,26 @@ export default Object.freeze({
           subpath: "./client/composables/useCrudListFilterLookups",
           summary: "Exports lookup-backed CRUD list filter helper for remote autocomplete filters."
         },
+        {
+          subpath: "./client/composables/useCrudAddEditScreen",
+          summary: "Exports the package-owned add/edit screen runtime for generated form pages."
+        },
+        {
+          subpath: "./client/composables/useCrudListBulkActions",
+          summary: "Exports selected-record state and execution runtime for generated CRUD list bulk actions."
+        },
+        {
+          subpath: "./client/composables/useCrudListScreen",
+          summary: "Exports the package-owned list screen runtime for generated list pages."
+        },
         {
           subpath: "./client/composables/useView",
           summary: "Exports read/view operation composable."
         },
+        {
+          subpath: "./client/composables/useCrudViewScreen",
+          summary: "Exports the package-owned view screen runtime for generated detail pages."
+        },
         {
           subpath: "./client/composables/usePagedCollection",
           summary: "Exports paged collection query composable."
@@ -233,15 +277,13 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@tanstack/vue-query": "5.92.12",
         "@mdi/js": "^7.4.47",
-        "@jskit-ai/http-runtime": "0.1.65",
-        "@jskit-ai/realtime": "0.1.65",
-        "@jskit-ai/kernel": "0.1.66",
-        "@jskit-ai/shell-web": "0.1.65",
-        "@jskit-ai/uploads-image-web": "0.1.44",
-        "@jskit-ai/users-core": "0.1.76",
-        vuetify: "^4.0.0"
+        "@jskit-ai/http-runtime": "0.1.66",
+        "@jskit-ai/realtime": "0.1.66",
+        "@jskit-ai/kernel": "0.1.67",
+        "@jskit-ai/shell-web": "0.1.66",
+        "@jskit-ai/uploads-image-web": "0.1.45",
+        "@jskit-ai/users-core": "0.1.77"
       },
       dev: {}
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.81",
+  "version": "0.1.82",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -8,22 +8,33 @@
   "exports": {
     "./client": "./src/client/index.js",
     "./client/components/AccountSettingsClientElement": "./src/client/components/AccountSettingsClientElement.vue",
+    "./client/components/CrudAddEditScreen": "./src/client/components/CrudAddEditScreen.vue",
+    "./client/components/CrudListBulkActionSurface": "./src/client/components/CrudListBulkActionSurface.vue",
+    "./client/components/CrudListFilterSurface": "./src/client/components/CrudListFilterSurface.vue",
+    "./client/components/CrudListScreen": "./src/client/components/CrudListScreen.vue",
+    "./client/components/CrudViewScreen": "./src/client/components/CrudViewScreen.vue",
     "./client/account-settings/sections": "./src/client/account-settings/sections.js",
+    "./client/bulkActions": "./src/client/bulkActions.js",
+    "./client/filters": "./src/client/filters.js",
     "./client/composables/useAddEdit": "./src/client/composables/records/useAddEdit.js",
     "./client/composables/useAccess": "./src/client/composables/useAccess.js",
     "./client/composables/useCommand": "./src/client/composables/useCommand.js",
     "./client/composables/useCrudAddEdit": "./src/client/composables/records/useCrudAddEdit.js",
+    "./client/composables/useCrudAddEditScreen": "./src/client/composables/useCrudAddEditScreen.js",
+    "./client/composables/useCrudListBulkActions": "./src/client/composables/useCrudListBulkActions.js",
     "./client/composables/crudLookupFieldRuntime": "./src/client/composables/crud/crudLookupFieldRuntime.js",
     "./client/composables/useCrudListFilterLookups": "./src/client/composables/useCrudListFilterLookups.js",
     "./client/composables/useCrudListFilters": "./src/client/composables/useCrudListFilters.js",
     "./client/composables/useEndpointResource": "./src/client/composables/runtime/useEndpointResource.js",
     "./client/composables/useList": "./src/client/composables/records/useList.js",
     "./client/composables/useCrudList": "./src/client/composables/records/useCrudList.js",
+    "./client/composables/useCrudListScreen": "./src/client/composables/useCrudListScreen.js",
     "./client/composables/useCrudListParentTitle": "./src/client/composables/useCrudListParentTitle.js",
     "./client/composables/useRealtimeQueryInvalidation": "./src/client/composables/useRealtimeQueryInvalidation.js",
     "./client/composables/useSurfaceRouteContext": "./src/client/composables/useSurfaceRouteContext.js",
     "./client/composables/useView": "./src/client/composables/records/useView.js",
     "./client/composables/useCrudView": "./src/client/composables/records/useCrudView.js",
+    "./client/composables/useCrudViewScreen": "./src/client/composables/useCrudViewScreen.js",
     "./client/composables/usePagedCollection": "./src/client/composables/usePagedCollection.js",
     "./client/composables/usePaths": "./src/client/composables/usePaths.js",
     "./client/composables/runtime/useUiFeedback": "./src/client/composables/runtime/useUiFeedback.js",
@@ -32,18 +43,18 @@
     "./client/support/contractGuards": "./src/client/support/contractGuards.js"
   },
   "dependencies": {
-    "@tanstack/vue-query": "5.92.12",
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.65",
-    "@jskit-ai/kernel": "0.1.66",
-    "@jskit-ai/realtime": "0.1.65",
-    "@jskit-ai/shell-web": "0.1.65",
-    "@jskit-ai/uploads-image-web": "0.1.44",
-    "@jskit-ai/users-core": "0.1.76",
-    "vuetify": "^4.0.0"
+    "@jskit-ai/http-runtime": "0.1.66",
+    "@jskit-ai/kernel": "0.1.67",
+    "@jskit-ai/realtime": "0.1.66",
+    "@jskit-ai/shell-web": "0.1.66",
+    "@jskit-ai/uploads-image-web": "0.1.45",
+    "@jskit-ai/users-core": "0.1.77"
   },
   "peerDependencies": {
+    "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
-    "vue-router": "^5.0.4"
+    "vue-router": "^5.0.4",
+    "vuetify": "^4.0.0"
   }
 }

package/src/client/bulkActions.js

@@ -0,0 +1,47 @@
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+
+function normalizeCrudListBulkAction(rawAction = {}, index = 0) {
+  if (!rawAction || typeof rawAction !== "object" || Array.isArray(rawAction)) {
+    return null;
+  }
+
+  const key = normalizeText(rawAction.key || rawAction.id || `action-${index + 1}`);
+  const label = normalizeText(rawAction.label || rawAction.title);
+  if (!key || !label) {
+    return null;
+  }
+
+  return Object.freeze({
+    key,
+    label,
+    icon: normalizeText(rawAction.icon),
+    color: normalizeText(rawAction.color, { fallback: "primary" }),
+    variant: normalizeText(rawAction.variant, { fallback: "tonal" }),
+    confirmLabel: normalizeText(rawAction.confirmLabel),
+    run: typeof rawAction.run === "function" ? rawAction.run : null,
+    disabled: rawAction.disabled
+  });
+}
+
+function defineCrudListBulkActions(actions = []) {
+  if (!Array.isArray(actions)) {
+    throw new TypeError("defineCrudListBulkActions requires an array.");
+  }
+
+  const normalizedActions = [];
+  const seenKeys = new Set();
+
+  actions.forEach((rawAction, index) => {
+    const action = normalizeCrudListBulkAction(rawAction, index);
+    if (!action || seenKeys.has(action.key)) {
+      return;
+    }
+
+    seenKeys.add(action.key);
+    normalizedActions.push(action);
+  });
+
+  return Object.freeze(normalizedActions);
+}
+
+export { defineCrudListBulkActions };

package/src/client/components/AccountSettingsClientElement.vue

@@ -56,28 +56,41 @@ const activeTab = computed({
 
 <template>
   <section class="settings-view py-2 py-md-4">
-    <v-card class="panel-card" rounded="lg" elevation="1" border>
-      <v-card-item>
-        <v-card-title class="panel-title">Account settings</v-card-title>
-        <v-card-subtitle>Global profile, preferences, notifications, and account controls.</v-card-subtitle>
-        <template #append>
-          <v-btn
-            variant="text"
-            color="secondary"
-            :to="runtime.backNavigationTarget.value.sameOrigin ? runtime.backNavigationTarget.value.href : undefined"
-            :href="runtime.backNavigationTarget.value.sameOrigin ? undefined : runtime.backNavigationTarget.value.href"
-          >
-            Back
-          </v-btn>
-        </template>
-      </v-card-item>
-      <v-divider />
+    <v-sheet class="settings-panel" rounded="lg" border>
+      <header class="settings-panel__header">
+        <div>
+          <h1 class="settings-panel__title">Account settings</h1>
+          <p class="text-body-2 text-medium-emphasis mb-0">
+            Global profile, preferences, notifications, and account controls.
+          </p>
+        </div>
+        <v-btn
+          variant="text"
+          color="secondary"
+          :to="runtime.backNavigationTarget.value.sameOrigin ? runtime.backNavigationTarget.value.href : undefined"
+          :href="runtime.backNavigationTarget.value.sameOrigin ? undefined : runtime.backNavigationTarget.value.href"
+        >
+          Back
+        </v-btn>
+      </header>
 
-      <v-card-text class="pt-4">
+      <div class="settings-panel__body">
         <template v-if="runtime.loadingSettings.value">
           <v-skeleton-loader type="text@2, list-item-two-line@4" class="mb-4" />
           <v-skeleton-loader type="text@2, paragraph, button" />
         </template>
+        <div v-else-if="runtime.settingsLoadError.value" class="settings-panel__state">
+          <h2 class="text-h6 mb-2">Unable to load account settings</h2>
+          <p class="text-body-2 text-medium-emphasis mb-4">{{ runtime.settingsLoadError.value }}</p>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            :loading="runtime.refreshingSettings.value"
+            @click="runtime.refreshSettings"
+          >
+            Retry
+          </v-btn>
+        </div>
         <template v-else-if="sections.length < 1">
           <p class="text-body-2 text-medium-emphasis mb-0">No account settings sections are registered.</p>
         </template>
@@ -109,20 +122,42 @@ const activeTab = computed({
             </v-col>
           </v-row>
         </template>
-      </v-card-text>
-    </v-card>
+      </div>
+    </v-sheet>
   </section>
 </template>
 
 <style scoped>
-.panel-card {
+.settings-panel {
   background-color: rgb(var(--v-theme-surface));
+  overflow: hidden;
+}
+
+.settings-panel__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 1rem 1rem 0;
 }
 
-.panel-title {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: 0.01em;
+.settings-panel__title {
+  font-size: clamp(1.35rem, 2vw, 1.85rem);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 0.35rem;
+}
+
+.settings-panel__body {
+  padding: 1rem;
+}
+
+.settings-panel__state {
+  margin-inline: auto;
+  max-width: 30rem;
+  padding: 2rem 1rem;
+  text-align: center;
 }
 
 .settings-section-list {
@@ -139,4 +174,14 @@ const activeTab = computed({
 :deep(.settings-sections-window .v-window-x-reverse-transition-leave-active) {
   transition: none !important;
 }
+
+@media (max-width: 960px) {
+  .settings-panel__header {
+    flex-direction: column;
+  }
+
+  .settings-panel__header :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
 </style>

package/src/client/components/CrudAddEditScreen.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { computed, unref } from "vue";
+
+const props = defineProps({
+  screen: {
+    type: Object,
+    required: true
+  },
+  resolveLookupItems: {
+    type: Function,
+    default: null
+  },
+  resolveLookupLoading: {
+    type: Function,
+    default: null
+  },
+  resolveLookupSearch: {
+    type: Function,
+    default: null
+  },
+  setLookupSearch: {
+    type: Function,
+    default: null
+  }
+});
+
+const formRuntime = computed(() => props.screen?.formRuntime || {});
+const addEdit = computed(() => props.screen?.addEdit || formRuntime.value?.addEdit || {});
+const formState = computed(() => props.screen?.formState || formRuntime.value?.form || {});
+const mode = computed(() => String(unref(props.screen?.mode) || "new").trim() || "new");
+const title = computed(() => String(unref(props.screen?.title) || "").trim());
+const subtitle = computed(() => String(unref(props.screen?.subtitle) || "").trim());
+const saveLabel = computed(() => String(unref(props.screen?.saveLabel) || "Save").trim() || "Save");
+const cancelTo = computed(() => unref(props.screen?.cancelTo) || "");
+
+function resolveFieldErrors(fieldKey) {
+  if (typeof props.screen?.resolveFieldErrors === "function") {
+    return props.screen.resolveFieldErrors(fieldKey);
+  }
+  if (typeof formRuntime.value?.resolveFieldErrors === "function") {
+    return formRuntime.value.resolveFieldErrors(fieldKey);
+  }
+  return [];
+}
+
+function resolveCancelTo(target = cancelTo.value) {
+  if (typeof props.screen?.resolveCancelTo === "function") {
+    return props.screen.resolveCancelTo(target);
+  }
+  return target || "";
+}
+</script>
+
+<template>
+  <section class="generated-ui-screen generated-ui-screen--operator ui-generator-add-edit-form d-flex flex-column ga-4">
+    <header class="ui-generator-add-edit-form__header">
+      <div class="ui-generator-add-edit-form__copy">
+        <h1 class="ui-generator-add-edit-form__title">{{ title }}</h1>
+        <p v-if="subtitle" class="text-body-2 text-medium-emphasis mb-0">{{ subtitle }}</p>
+      </div>
+      <div class="ui-generator-add-edit-form__actions">
+        <v-btn v-if="cancelTo" color="primary" variant="outlined" :to="resolveCancelTo(cancelTo)">Cancel</v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :loading="addEdit.isSaving"
+          :disabled="addEdit.isSubmitDisabled"
+          @click="addEdit.submit"
+        >
+          {{ saveLabel }}
+        </v-btn>
+      </div>
+    </header>
+
+    <v-sheet rounded="lg" border class="ui-generator-add-edit-form__panel">
+      <div v-if="addEdit.loadError" class="ui-generator-add-edit-form__state">
+        <h2 class="text-h6 mb-2">Unable to load form</h2>
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          {{ addEdit.loadError }}
+        </p>
+        <v-btn
+          v-if="addEdit.canRetryLoad"
+          color="primary"
+          variant="tonal"
+          :loading="addEdit.isFetching"
+          @click="addEdit.refresh"
+        >
+          Retry
+        </v-btn>
+      </div>
+      <template v-else-if="formRuntime.showFormSkeleton">
+        <div class="pa-4">
+          <v-skeleton-loader type="heading, text@2, article" />
+        </div>
+      </template>
+      <v-form v-else class="pa-4" @submit.prevent="addEdit.submit" novalidate>
+        <v-progress-linear v-if="addEdit.isRefetching" indeterminate class="mb-4" />
+        <v-row class="ui-generator-add-edit-form__fields">
+          <slot
+            name="fields"
+            :mode="mode"
+            :form-runtime="formRuntime"
+            :form-state="formState"
+            :add-edit="addEdit"
+            :resolve-field-errors="resolveFieldErrors"
+            :resolve-lookup-items="resolveLookupItems"
+            :resolve-lookup-loading="resolveLookupLoading"
+            :resolve-lookup-search="resolveLookupSearch"
+            :set-lookup-search="setLookupSearch"
+          />
+        </v-row>
+      </v-form>
+    </v-sheet>
+  </section>
+</template>
+
+<style scoped>
+.generated-ui-screen {
+  --generated-ui-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
+  --generated-ui-screen-state-padding: 2.5rem 1.25rem;
+}
+
+.generated-ui-screen--operator {
+  --generated-ui-screen-state-padding: 2rem 1rem;
+}
+
+.ui-generator-add-edit-form__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.ui-generator-add-edit-form__copy {
+  min-width: 0;
+}
+
+.ui-generator-add-edit-form__title {
+  font-size: var(--generated-ui-screen-title-size);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 0.35rem;
+}
+
+.ui-generator-add-edit-form__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.ui-generator-add-edit-form__panel {
+  overflow: hidden;
+}
+
+.ui-generator-add-edit-form__state {
+  margin-inline: auto;
+  max-width: 30rem;
+  padding: var(--generated-ui-screen-state-padding);
+  text-align: center;
+}
+
+.ui-generator-add-edit-form__fields :deep(.v-col) {
+  min-width: 0;
+}
+
+@media (max-width: 960px) {
+  .ui-generator-add-edit-form__header {
+    flex-direction: column;
+  }
+
+  .ui-generator-add-edit-form__actions {
+    width: 100%;
+  }
+
+  .ui-generator-add-edit-form__actions :deep(.v-btn) {
+    min-height: 48px;
+    flex: 1 1 10rem;
+  }
+
+  .ui-generator-add-edit-form__state :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/src/client/components/CrudListBulkActionSurface.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
+
+const props = defineProps({
+  runtime: {
+    type: Object,
+    default: null
+  },
+  title: {
+    type: String,
+    default: "Selection"
+  }
+});
+
+const display = useDisplay();
+const isCompactLayout = computed(() => {
+  const displayName = String(display?.name?.value || "").trim().toLowerCase();
+  return displayName === "xs" || displayName === "sm";
+});
+const actions = computed(() => Array.isArray(props.runtime?.actions) ? props.runtime.actions : []);
+const selectedCount = computed(() => Number(props.runtime?.selectedCount?.value || 0));
+const shouldRender = computed(() =>
+  Boolean(props.runtime?.hasActions?.value) &&
+  Boolean(props.runtime?.hasSelection?.value) &&
+  selectedCount.value > 0
+);
+
+function clearSelection() {
+  props.runtime?.clearSelection?.();
+}
+
+function execute(action = {}) {
+  props.runtime?.execute?.(action);
+}
+
+function isActionDisabled(action = {}) {
+  return Boolean(props.runtime?.isActionDisabled?.(action));
+}
+
+function isActionExecuting(action = {}) {
+  return Boolean(props.runtime?.isActionExecuting?.(action));
+}
+</script>
+
+<template>
+  <section v-if="shouldRender" class="crud-list-bulk-action-surface">
+    <div class="crud-list-bulk-action-surface__summary">
+      <div class="crud-list-bulk-action-surface__copy">
+        <span class="text-overline text-medium-emphasis">{{ title }}</span>
+        <strong>{{ selectedCount }} selected</strong>
+      </div>
+      <v-btn size="small" variant="text" @click="clearSelection">Clear</v-btn>
+    </div>
+
+    <div v-if="!isCompactLayout" class="crud-list-bulk-action-surface__actions">
+      <v-btn
+        v-for="action in actions"
+        :key="action.key"
+        :color="action.color"
+        :variant="action.variant"
+        :prepend-icon="action.icon || undefined"
+        :disabled="isActionDisabled(action)"
+        :loading="isActionExecuting(action)"
+        @click="execute(action)"
+      >
+        {{ action.label }}
+      </v-btn>
+    </div>
+
+    <v-menu v-else location="bottom end">
+      <template #activator="{ props: menuProps }">
+        <v-btn v-bind="menuProps" color="primary" variant="tonal">Bulk actions</v-btn>
+      </template>
+      <v-list density="compact" min-width="180">
+        <v-list-item
+          v-for="action in actions"
+          :key="action.key"
+          :title="action.label"
+          :prepend-icon="action.icon || undefined"
+          :disabled="isActionDisabled(action)"
+          @click="execute(action)"
+        />
+      </v-list>
+    </v-menu>
+  </section>
+</template>
+
+<style scoped>
+.crud-list-bulk-action-surface {
+  align-items: center;
+  background: rgba(var(--v-theme-primary), 0.08);
+  border-block: 1px solid rgba(var(--v-theme-primary), 0.18);
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 0.75rem 1rem;
+}
+
+.crud-list-bulk-action-surface__summary,
+.crud-list-bulk-action-surface__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.crud-list-bulk-action-surface__copy {
+  display: grid;
+  gap: 0.1rem;
+  min-width: 0;
+}
+
+.crud-list-bulk-action-surface :deep(.v-btn) {
+  min-height: 48px;
+}
+
+@media (max-width: 640px) {
+  .crud-list-bulk-action-surface {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>