@jskit-ai/users-web 0.1.107 → 0.1.109

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.107",
+  version: "0.1.109",
   kind: "runtime",
   description: "Users web module: account/profile UI plus shared users web widgets.",
   dependsOn: [
@@ -78,6 +78,10 @@ export default Object.freeze({
           subpath: "./client/filters",
           summary: "Exports client-side CRUD list filter definition helpers."
         },
+        {
+          subpath: "./client/rowActions",
+          summary: "Exports client-side CRUD list row-action definition helpers."
+        },
         {
           subpath: "./client/components/ProfileClientElement",
           summary: "Exports profile settings client element scaffold component."
@@ -114,6 +118,10 @@ export default Object.freeze({
           subpath: "./client/composables/useCrudListBulkActions",
           summary: "Exports selected-record state and execution runtime for generated CRUD list bulk actions."
         },
+        {
+          subpath: "./client/composables/useCrudListRowActions",
+          summary: "Exports per-record action state and execution runtime for generated CRUD list row actions."
+        },
         {
           subpath: "./client/composables/useCrudListScreen",
           summary: "Exports the package-owned list screen runtime for generated list pages."
@@ -278,12 +286,12 @@ export default Object.freeze({
     dependencies: {
       runtime: {
         "@mdi/js": "^7.4.47",
-        "@jskit-ai/http-runtime": "0.1.91",
-        "@jskit-ai/realtime": "0.1.91",
-        "@jskit-ai/kernel": "0.1.92",
-        "@jskit-ai/shell-web": "0.1.91",
-        "@jskit-ai/uploads-image-web": "0.1.70",
-        "@jskit-ai/users-core": "0.1.102"
+        "@jskit-ai/http-runtime": "0.1.93",
+        "@jskit-ai/realtime": "0.1.93",
+        "@jskit-ai/kernel": "0.1.94",
+        "@jskit-ai/shell-web": "0.1.93",
+        "@jskit-ai/uploads-image-web": "0.1.72",
+        "@jskit-ai/users-core": "0.1.104"
       },
       dev: {}
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.107",
+  "version": "0.1.109",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -16,12 +16,14 @@
     "./client/account-settings/sections": "./src/client/account-settings/sections.js",
     "./client/bulkActions": "./src/client/bulkActions.js",
     "./client/filters": "./src/client/filters.js",
+    "./client/rowActions": "./src/client/rowActions.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/useCrudListRowActions": "./src/client/composables/useCrudListRowActions.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",
@@ -44,12 +46,12 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.91",
-    "@jskit-ai/kernel": "0.1.92",
-    "@jskit-ai/realtime": "0.1.91",
-    "@jskit-ai/shell-web": "0.1.91",
-    "@jskit-ai/uploads-image-web": "0.1.70",
-    "@jskit-ai/users-core": "0.1.102"
+    "@jskit-ai/http-runtime": "0.1.93",
+    "@jskit-ai/kernel": "0.1.94",
+    "@jskit-ai/realtime": "0.1.93",
+    "@jskit-ai/shell-web": "0.1.93",
+    "@jskit-ai/uploads-image-web": "0.1.72",
+    "@jskit-ai/users-core": "0.1.104"
   },
   "peerDependencies": {
     "@tanstack/vue-query": "^5.90.5",

package/src/client/components/CrudListRecordActionMenu.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  record: {
+    type: Object,
+    default: () => ({})
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  rowActions: {
+    type: Object,
+    default: null
+  },
+  viewLocation: {
+    type: Object,
+    default: null
+  },
+  editLocation: {
+    type: Object,
+    default: null
+  },
+  showView: {
+    type: Boolean,
+    default: false
+  },
+  showEdit: {
+    type: Boolean,
+    default: false
+  },
+  buttonLabel: {
+    type: String,
+    default: "Actions"
+  },
+  buttonVariant: {
+    type: String,
+    default: "text"
+  },
+  buttonSize: {
+    type: String,
+    default: "small"
+  }
+});
+
+const visibleRowActions = computed(() => {
+  if (typeof props.rowActions?.visibleActionsFor !== "function") {
+    return [];
+  }
+  return props.rowActions.visibleActionsFor(props.record, props.index);
+});
+const hasViewAction = computed(() => Boolean(props.showView && props.viewLocation));
+const hasEditAction = computed(() => Boolean(props.showEdit && props.editLocation));
+const hasActions = computed(() =>
+  hasViewAction.value || hasEditAction.value || visibleRowActions.value.length > 0
+);
+
+function isRowActionLoading(action = {}) {
+  return typeof props.rowActions?.isActionLoading === "function" &&
+    props.rowActions.isActionLoading(action, props.record, props.index);
+}
+
+function isRowActionDisabled(action = {}) {
+  return typeof props.rowActions?.isActionDisabled !== "function" ||
+    props.rowActions.isActionDisabled(action, props.record, props.index);
+}
+
+function runRowAction(action = {}) {
+  if (typeof props.rowActions?.execute !== "function") {
+    return;
+  }
+  void props.rowActions.execute(action, props.record, props.index);
+}
+</script>
+
+<template>
+  <v-menu v-if="hasActions" location="bottom end">
+    <template #activator="{ props: menuProps }">
+      <v-btn
+        v-bind="menuProps"
+        :variant="buttonVariant"
+        :size="buttonSize"
+      >
+        {{ buttonLabel }}
+      </v-btn>
+    </template>
+    <v-list density="compact" min-width="150">
+      <v-list-item
+        v-if="hasViewAction"
+        title="Open"
+        :to="viewLocation"
+      />
+      <v-list-item
+        v-if="hasEditAction"
+        title="Edit"
+        :to="editLocation"
+      />
+      <v-divider v-if="(hasViewAction || hasEditAction) && visibleRowActions.length > 0" />
+      <v-list-item
+        v-for="action in visibleRowActions"
+        :key="action.key"
+        :title="action.label"
+        :base-color="action.color"
+        :disabled="isRowActionDisabled(action)"
+        @click="runRowAction(action)"
+      >
+        <template v-if="isRowActionLoading(action) || action.icon" #prepend>
+          <v-progress-circular
+            v-if="isRowActionLoading(action)"
+            indeterminate
+            size="18"
+            width="2"
+          />
+          <v-icon v-else :icon="action.icon" />
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>

package/src/client/components/CrudListScreen.vue

@@ -3,6 +3,7 @@ import { computed, unref } from "vue";
 import { useRoute } from "vue-router";
 import CrudListBulkActionSurface from "./CrudListBulkActionSurface.vue";
 import CrudListFilterSurface from "./CrudListFilterSurface.vue";
+import CrudListRecordActionMenu from "./CrudListRecordActionMenu.vue";
 
 const props = defineProps({
   screen: {
@@ -46,10 +47,14 @@ const props = defineProps({
 const route = useRoute();
 const records = computed(() => props.screen?.records || {});
 const bulkActions = computed(() => props.screen?.bulkActions || {});
+const rowActions = computed(() => props.screen?.rowActions || {});
 const listFilters = computed(() => props.screen?.listFilters || {});
 const filterRuntime = computed(() => props.screen?.filterRuntime || null);
+const displayRows = computed(() => unref(props.screen?.displayRows) || []);
+const selectableRows = computed(() => unref(props.screen?.selectableRows) || []);
 const listPrimaryAction = computed(() => unref(props.screen?.listPrimaryAction) || "");
 const hasBulkActions = computed(() => Boolean(unref(bulkActions.value?.hasActions)));
+const hasRowActions = computed(() => Boolean(unref(rowActions.value?.hasActions)));
 const hasViewUrl = computed(() => Boolean(props.screen?.hasViewUrl));
 const hasEditUrl = computed(() => Boolean(props.screen?.hasEditUrl));
 const resolvedHeadingTitle = computed(() => String(props.headingTitle || props.titleLabel || "").trim());
@@ -84,6 +89,40 @@ function resolveEditLocation(record) {
     : "";
   return path ? { path, query: route.query } : null;
 }
+
+function hasRowActionsFor(record, index) {
+  return typeof rowActions.value?.hasVisibleActionsFor === "function" &&
+    rowActions.value.hasVisibleActionsFor(record, index);
+}
+
+function isBulkRowSelected(row = {}) {
+  return typeof bulkActions.value?.isRecordSelected === "function" &&
+    bulkActions.value.isRecordSelected(row.record, row.index);
+}
+
+function setBulkRowSelected(row = {}, selected = true) {
+  if (typeof bulkActions.value?.setRecordSelected !== "function") {
+    return;
+  }
+  bulkActions.value.setRecordSelected(row.record, row.index, selected);
+}
+
+function allSelectableRowsSelected() {
+  return selectableRows.value.length > 0 && selectableRows.value.every((row) => isBulkRowSelected(row));
+}
+
+function someSelectableRowsSelected() {
+  return selectableRows.value.some((row) => isBulkRowSelected(row));
+}
+
+function setSelectableRowsSelected(selected = true) {
+  if (typeof bulkActions.value?.setRecordSelected !== "function") {
+    return;
+  }
+  for (const row of selectableRows.value) {
+    bulkActions.value.setRecordSelected(row.record, row.index, selected);
+  }
+}
 </script>
 
 <template>
@@ -143,7 +182,7 @@ function resolveEditLocation(record) {
           <v-btn color="primary" variant="tonal" :loading="records.isFetching" @click="records.reload">Retry</v-btn>
         </div>
 
-        <div v-else-if="records.items.length < 1" class="ui-generator-list-state">
+        <div v-else-if="displayRows.length < 1" class="ui-generator-list-state">
           <h2 class="text-h6 mb-2">{{ emptyTitle }}</h2>
           <p class="text-body-2 text-medium-emphasis mb-4">{{ emptyBody }}</p>
           <v-btn v-if="listPrimaryAction" color="primary" variant="flat" :to="listPrimaryAction">
@@ -154,52 +193,44 @@ function resolveEditLocation(record) {
         <template v-else>
           <div class="ui-generator-list-cards d-md-none">
             <v-sheet
-              v-for="(record, index) in records.items"
-              :key="records.resolveRowKey(record, index)"
+              v-for="row in displayRows"
+              :key="row.key"
               rounded="lg"
               border
               class="ui-generator-list-card"
             >
               <div class="ui-generator-list-card__header">
                 <v-checkbox-btn
-                  v-if="hasBulkActions"
-                  :model-value="bulkActions.isRecordSelected(record, index)"
-                  :aria-label="`Select ${resolveListRecordTitle(record)}`"
+                  v-if="hasBulkActions && row.selectable !== false"
+                  :model-value="isBulkRowSelected(row)"
+                  :aria-label="`Select ${resolveListRecordTitle(row.record)}`"
                   class="ui-generator-list-card__select"
-                  @update:model-value="bulkActions.setRecordSelected(record, index, $event)"
+                  @update:model-value="setBulkRowSelected(row, $event)"
                 />
                 <div class="min-w-0">
-                  <div class="ui-generator-list-card__title">{{ resolveListRecordTitle(record) }}</div>
+                  <div class="ui-generator-list-card__title">{{ resolveListRecordTitle(row.record) }}</div>
                   <div class="text-caption text-medium-emphasis">
-                    {{ records.resolveRowKey(record, index) }}
+                    {{ row.recordKey }}
                   </div>
                 </div>
-                <v-menu v-if="hasViewUrl || hasEditUrl" location="bottom end">
-                  <template #activator="{ props: menuProps }">
-                    <v-btn v-bind="menuProps" variant="text" size="small">Actions</v-btn>
-                  </template>
-                  <v-list density="compact" min-width="140">
-                    <v-list-item
-                      v-if="hasViewUrl"
-                      title="Open"
-                      :to="resolveViewLocation(record)"
-                      :disabled="!resolveViewLocation(record)"
-                    />
-                    <v-list-item
-                      v-if="hasEditUrl"
-                      title="Edit"
-                      :to="resolveEditLocation(record)"
-                      :disabled="!resolveEditLocation(record)"
-                    />
-                  </v-list>
-                </v-menu>
+                <CrudListRecordActionMenu
+                  v-if="hasViewUrl || hasEditUrl || hasRowActionsFor(row.record, row.index)"
+                  :record="row.record"
+                  :index="row.index"
+                  :row-actions="rowActions"
+                  :show-view="hasViewUrl && !row.synthetic"
+                  :show-edit="hasEditUrl && !row.synthetic"
+                  :view-location="resolveViewLocation(row.record)"
+                  :edit-location="resolveEditLocation(row.record)"
+                />
               </div>
               <div class="ui-generator-list-card__fields">
                 <slot
                   name="card-fields"
-                  :record="record"
+                  :record="row.record"
                   :records="records"
-                  :index="index"
+                  :index="row.index"
+                  :row="row"
                   :format-list-card-value="formatListCardValue"
                 />
               </div>
@@ -212,52 +243,72 @@ function resolveEditLocation(record) {
                 <tr>
                   <th v-if="hasBulkActions" class="ui-generator-list-table__select">
                     <v-checkbox-btn
-                      :model-value="bulkActions.allVisibleSelected(records.items)"
+                      :model-value="allSelectableRowsSelected()"
                       :indeterminate="
-                        bulkActions.someVisibleSelected(records.items) &&
-                          !bulkActions.allVisibleSelected(records.items)
+                        someSelectableRowsSelected() &&
+                          !allSelectableRowsSelected()
                       "
                       aria-label="Select visible rows"
-                      @update:model-value="bulkActions.setVisibleSelected(records.items, $event)"
+                      @update:model-value="setSelectableRowsSelected($event)"
                     />
                   </th>
                   <slot name="table-header" />
                   <th v-if="hasViewUrl" class="text-right" />
                   <th v-if="hasEditUrl" class="text-right" />
+                  <th v-if="hasRowActions" class="text-right" />
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="(record, index) in records.items" :key="records.resolveRowKey(record, index)">
+                <tr v-for="row in displayRows" :key="row.key">
                   <td v-if="hasBulkActions" class="ui-generator-list-table__select">
                     <v-checkbox-btn
-                      :model-value="bulkActions.isRecordSelected(record, index)"
-                      :aria-label="`Select ${resolveListRecordTitle(record)}`"
-                      @update:model-value="bulkActions.setRecordSelected(record, index, $event)"
+                      v-if="row.selectable !== false"
+                      :model-value="isBulkRowSelected(row)"
+                      :aria-label="`Select ${resolveListRecordTitle(row.record)}`"
+                      @update:model-value="setBulkRowSelected(row, $event)"
                     />
                   </td>
-                  <slot name="table-row" :record="record" :records="records" :index="index" />
+                  <slot
+                    name="table-row"
+                    :record="row.record"
+                    :records="records"
+                    :index="row.index"
+                    :row="row"
+                  />
                   <td v-if="hasViewUrl" class="text-right">
                     <v-btn
+                      v-if="!row.synthetic"
                       size="small"
                       color="primary"
                       variant="outlined"
-                      :to="resolveViewLocation(record)"
-                      :disabled="!resolveViewLocation(record)"
+                      :to="resolveViewLocation(row.record)"
+                      :disabled="!resolveViewLocation(row.record)"
                     >
                       Open
                     </v-btn>
                   </td>
                   <td v-if="hasEditUrl" class="text-right">
                     <v-btn
+                      v-if="!row.synthetic"
                       size="small"
                       color="primary"
                       variant="tonal"
-                      :to="resolveEditLocation(record)"
-                      :disabled="!resolveEditLocation(record)"
+                      :to="resolveEditLocation(row.record)"
+                      :disabled="!resolveEditLocation(row.record)"
                     >
                       Edit
                     </v-btn>
                   </td>
+                  <td v-if="hasRowActions" class="text-right">
+                    <CrudListRecordActionMenu
+                      v-if="hasRowActionsFor(row.record, row.index)"
+                      :record="row.record"
+                      :index="row.index"
+                      :row-actions="rowActions"
+                      button-label="More"
+                      button-variant="outlined"
+                    />
+                  </td>
                 </tr>
               </tbody>
             </v-table>

package/src/client/components/CrudViewScreen.vue

@@ -97,12 +97,18 @@ const resolvedDescription = computed(() =>
       <template v-else>
         <v-progress-linear v-if="view.isRefetching" indeterminate />
         <div class="pa-4">
+          <slot name="before-fields" :view="view" />
           <v-row class="ui-generator-view-fields">
             <slot name="fields" :view="view" />
           </v-row>
+          <slot name="after-fields" :view="view" />
         </div>
       </template>
     </v-sheet>
+
+    <div v-if="$slots['supporting-content']" class="ui-generator-view-supporting-content">
+      <slot name="supporting-content" :view="view" />
+    </div>
   </section>
 </template>
 
@@ -165,6 +171,10 @@ const resolvedDescription = computed(() =>
   min-width: 0;
 }
 
+.ui-generator-view-supporting-content {
+  min-width: 0;
+}
+
 @media (max-width: 960px) {
   .ui-generator-view-header {
     flex-direction: column;

package/src/client/composables/useCrudListRowActions.js

@@ -0,0 +1,144 @@
+import { computed, ref } from "vue";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import { defineCrudListRowActions } from "../rowActions.js";
+
+function normalizeRowActionKey(actionOrKey = "") {
+  return normalizeText(
+    actionOrKey && typeof actionOrKey === "object"
+      ? actionOrKey.key
+      : actionOrKey
+  );
+}
+
+function normalizeRowId(value = "") {
+  return normalizeText(value);
+}
+
+function createExecutionKey(actionKey = "", recordId = "", index = 0) {
+  return [
+    actionKey,
+    recordId || `index-${index}`
+  ].join(":");
+}
+
+function asContextObject(value = null) {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+
+function useCrudListRowActions(actions = [], {
+  resolveRecordId = null,
+  resolveContext = null
+} = {}) {
+  const normalizedActions = defineCrudListRowActions(actions);
+  const executingKeys = ref([]);
+  const hasActions = computed(() => normalizedActions.length > 0);
+
+  function getRecordId(record = {}, index = 0) {
+    const resolvedId = typeof resolveRecordId === "function"
+      ? resolveRecordId(record, index)
+      : record?.id ?? record?.attributes?.id ?? index;
+    return normalizeRowId(resolvedId);
+  }
+
+  function createActionContext(action = {}, record = {}, index = 0) {
+    const baseContext = typeof resolveContext === "function" ? resolveContext() : {};
+    return {
+      ...asContextObject(baseContext),
+      action,
+      record,
+      index,
+      recordId: getRecordId(record, index)
+    };
+  }
+
+  function findAction(actionOrKey = "") {
+    const actionKey = normalizeRowActionKey(actionOrKey);
+    return normalizedActions.find((action) => action.key === actionKey) || null;
+  }
+
+  function resolveActionFlag(action = {}, flagKey = "", record = {}, index = 0, fallback = false) {
+    const flag = action?.[flagKey];
+    if (typeof flag === "function") {
+      return Boolean(flag(createActionContext(action, record, index)));
+    }
+    if (flag === undefined || flag === null) {
+      return fallback;
+    }
+    return Boolean(flag);
+  }
+
+  function isActionVisible(actionOrKey = "", record = {}, index = 0) {
+    const action = findAction(actionOrKey);
+    return action ? resolveActionFlag(action, "visible", record, index, true) : false;
+  }
+
+  function isActionExecuting(actionOrKey = "", record = {}, index = 0) {
+    const action = findAction(actionOrKey);
+    if (!action) {
+      return false;
+    }
+
+    const executionKey = createExecutionKey(action.key, getRecordId(record, index), index);
+    return executingKeys.value.includes(executionKey);
+  }
+
+  function isActionLoading(actionOrKey = "", record = {}, index = 0) {
+    const action = findAction(actionOrKey);
+    if (!action) {
+      return false;
+    }
+
+    return isActionExecuting(action, record, index) ||
+      resolveActionFlag(action, "loading", record, index, false);
+  }
+
+  function isActionDisabled(actionOrKey = "", record = {}, index = 0) {
+    const action = findAction(actionOrKey);
+    if (!action || !isActionVisible(action, record, index) || !action.run) {
+      return true;
+    }
+
+    return isActionLoading(action, record, index) ||
+      resolveActionFlag(action, "disabled", record, index, false);
+  }
+
+  function visibleActionsFor(record = {}, index = 0) {
+    return normalizedActions.filter((action) => isActionVisible(action, record, index));
+  }
+
+  function hasVisibleActionsFor(record = {}, index = 0) {
+    return visibleActionsFor(record, index).length > 0;
+  }
+
+  async function execute(actionOrKey = "", record = {}, index = 0) {
+    const action = findAction(actionOrKey);
+    if (!action || typeof action.run !== "function" || isActionDisabled(action, record, index)) {
+      return null;
+    }
+
+    const executionKey = createExecutionKey(action.key, getRecordId(record, index), index);
+    executingKeys.value = [...executingKeys.value, executionKey];
+    try {
+      return await action.run(createActionContext(action, record, index));
+    } finally {
+      executingKeys.value = executingKeys.value.filter((key) => key !== executionKey);
+    }
+  }
+
+  return Object.freeze({
+    actions: normalizedActions,
+    hasActions,
+    executingKeys,
+    getRecordId,
+    findAction,
+    isActionVisible,
+    isActionDisabled,
+    isActionLoading,
+    isActionExecuting,
+    visibleActionsFor,
+    hasVisibleActionsFor,
+    execute
+  });
+}
+
+export { useCrudListRowActions };

package/src/client/composables/useCrudListScreen.js

@@ -1,7 +1,8 @@
-import { computed } from "vue";
+import { computed, unref } from "vue";
 import { useCrudList } from "./records/useCrudList.js";
 import { useCrudListBulkActions } from "./useCrudListBulkActions.js";
 import { useCrudListFilters } from "./useCrudListFilters.js";
+import { useCrudListRowActions } from "./useCrudListRowActions.js";
 
 function formatCrudListCardValue(value) {
   if (value === null || value === undefined || value === "") {
@@ -16,6 +17,89 @@ function formatCrudListCardValue(value) {
   return value;
 }
 
+function asList(value = []) {
+  const resolved = unref(value);
+  if (resolved == null) {
+    return [];
+  }
+  return Array.isArray(resolved) ? resolved : [resolved];
+}
+
+function hasSyntheticRowGroups(value = null) {
+  const source = unref(value);
+  return Boolean(
+    source &&
+      typeof source === "object" &&
+      !Array.isArray(source) &&
+      (Object.hasOwn(source, "prepend") || Object.hasOwn(source, "append"))
+  );
+}
+
+function normalizeSyntheticDisplayRow(source = null, index = 0, placement = "prepend") {
+  const rawRow = unref(source);
+  if (!rawRow || typeof rawRow !== "object" || Array.isArray(rawRow)) {
+    return null;
+  }
+
+  const hasWrappedRecord = Object.hasOwn(rawRow, "record");
+  const record = hasWrappedRecord ? unref(rawRow.record) : rawRow;
+  if (!record || typeof record !== "object" || Array.isArray(record)) {
+    return null;
+  }
+
+  const keySource = hasWrappedRecord
+    ? rawRow.key
+    : record.id ?? record.attributes?.id;
+  const recordKey = String(keySource || `synthetic-${placement}-${index + 1}`).trim();
+
+  return Object.freeze({
+    key: `synthetic:${placement}:${recordKey}`,
+    recordKey,
+    record,
+    index: hasWrappedRecord && Number.isInteger(rawRow.index) ? rawRow.index : -1,
+    synthetic: true,
+    selectable: rawRow.selectable === true,
+    placement
+  });
+}
+
+function normalizeSyntheticDisplayRows(value = [], placement = "prepend") {
+  return asList(value)
+    .map((row, index) => normalizeSyntheticDisplayRow(row, index, placement))
+    .filter(Boolean);
+}
+
+function normalizeSyntheticDisplayRowGroups(syntheticRows = null) {
+  const source = unref(syntheticRows);
+  if (hasSyntheticRowGroups(source)) {
+    return Object.freeze({
+      prepend: normalizeSyntheticDisplayRows(source.prepend, "prepend"),
+      append: normalizeSyntheticDisplayRows(source.append, "append")
+    });
+  }
+
+  return Object.freeze({
+    prepend: normalizeSyntheticDisplayRows(source, "prepend"),
+    append: []
+  });
+}
+
+function createCrudListDisplayRow(record = {}, index = 0, records = {}) {
+  const resolveRowKey = typeof records.resolveRowKey === "function"
+    ? records.resolveRowKey
+    : (_record, fallbackIndex) => fallbackIndex;
+  const recordKey = String(resolveRowKey(record, index) || index);
+  return Object.freeze({
+    key: `record:${recordKey}`,
+    recordKey,
+    record,
+    index,
+    synthetic: false,
+    selectable: true,
+    placement: "records"
+  });
+}
+
 function useCrudListScreen({
   adapter = null,
   resource = null,
@@ -30,7 +114,10 @@ function useCrudListScreen({
   recordChangedEvents = [],
   listFilters = {},
   listBulkActions = [],
+  listRowActions = [],
+  syntheticRows = null,
   routeQueryBlacklist = Object.freeze(["include", "cursor", "limit"]),
+  requestQueryParams = null,
   requestRecoveryLabel = "Records",
   fallbackLoadError = "Unable to load records."
 } = {}) {
@@ -63,6 +150,7 @@ function useCrudListScreen({
       queryParamBlacklist: routeQueryBlacklist
     },
     placementSource: `ui-generator.${normalizedResourceNamespace}.list`,
+    requestQueryParams,
     requestRecoveryLabel,
     fallbackLoadError,
     recordIdParam,
@@ -75,6 +163,20 @@ function useCrudListScreen({
         }
       : null
   });
+  const displayRows = computed(() => {
+    const syntheticRowGroups = normalizeSyntheticDisplayRowGroups(syntheticRows);
+    const recordRows = (Array.isArray(records.items) ? records.items : [])
+      .map((record, index) => createCrudListDisplayRow(record, index, records));
+
+    return [
+      ...syntheticRowGroups.prepend,
+      ...recordRows,
+      ...syntheticRowGroups.append
+    ];
+  });
+  const selectableRows = computed(() =>
+    displayRows.value.filter((row) => row.selectable !== false)
+  );
   const bulkActions = useCrudListBulkActions(listBulkActions, {
     resolveRecordId: (record, index) => records.resolveRowKey(record, index),
     resolveContext: () => ({
@@ -82,6 +184,13 @@ function useCrudListScreen({
       reload: records.reload
     })
   });
+  const rowActions = useCrudListRowActions(listRowActions, {
+    resolveRecordId: (record, index) => records.resolveRowKey(record, index),
+    resolveContext: () => ({
+      records,
+      reload: records.reload
+    })
+  });
   const listPrimaryAction = computed(() =>
     newUrlTemplate ? records.resolveParams(newUrlTemplate) : ""
   );
@@ -98,6 +207,10 @@ function useCrudListScreen({
     listFilters,
     filterRuntime,
     bulkActions,
+    listRowActions,
+    rowActions,
+    displayRows,
+    selectableRows,
     listPrimaryAction,
     hasViewUrl: Boolean(viewUrlTemplate),
     hasEditUrl: Boolean(editUrlTemplate),

package/src/client/composables/useCrudViewScreen.js

@@ -12,25 +12,31 @@ function useCrudViewScreen({
   listUrlTemplate = "",
   editUrlTemplate = "",
   recordChangedEvent = "",
+  requestQueryParams = null,
+  readEnabled = true,
+  queryKeyFactory = null,
   requestRecoveryLabel = "Record",
   fallbackLoadError = "Unable to load record.",
   notFoundMessage = "Record not found."
 } = {}) {
   const route = useRoute();
   const normalizedResourceNamespace = String(resourceNamespace || "resource").trim() || "resource";
+  const defaultQueryKeyFactory = (surfaceId = "", workspaceSlug = "") => [
+    "ui-generator",
+    normalizedResourceNamespace,
+    "view",
+    String(surfaceId || ""),
+    String(workspaceSlug || "")
+  ];
   const view = useCrudView({
     adapter: adapter || undefined,
     resource,
     apiUrlTemplate,
     recordIdParam,
     includeRecordIdInQueryKey: true,
-    queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
-      "ui-generator",
-      normalizedResourceNamespace,
-      "view",
-      String(surfaceId || ""),
-      String(workspaceSlug || "")
-    ],
+    queryKeyFactory: typeof queryKeyFactory === "function" ? queryKeyFactory : defaultQueryKeyFactory,
+    requestQueryParams,
+    readEnabled,
     placementSource: `ui-generator.${normalizedResourceNamespace}.view`,
     requestRecoveryLabel,
     fallbackLoadError,

package/src/client/rowActions.js

@@ -0,0 +1,47 @@
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+
+function normalizeCrudListRowAction(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" }),
+    run: typeof rawAction.run === "function" ? rawAction.run : null,
+    visible: rawAction.visible,
+    disabled: rawAction.disabled,
+    loading: rawAction.loading
+  });
+}
+
+function defineCrudListRowActions(actions = []) {
+  if (!Array.isArray(actions)) {
+    throw new TypeError("defineCrudListRowActions requires an array.");
+  }
+
+  const normalizedActions = [];
+  const seenKeys = new Set();
+
+  actions.forEach((rawAction, index) => {
+    const action = normalizeCrudListRowAction(rawAction, index);
+    if (!action || seenKeys.has(action.key)) {
+      return;
+    }
+
+    seenKeys.add(action.key);
+    normalizedActions.push(action);
+  });
+
+  return Object.freeze(normalizedActions);
+}
+
+export { defineCrudListRowActions };

package/test/crudScreenComponents.test.js

@@ -11,6 +11,10 @@ async function readComponent(name) {
   return readFile(path.join(PACKAGE_DIR, "src", "client", "components", name), "utf8");
 }
 
+async function readClientFile(...parts) {
+  return readFile(path.join(PACKAGE_DIR, "src", "client", ...parts), "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");
@@ -18,19 +22,25 @@ test("CRUD screen components own generated list/view/form chrome centrally", asy
 
   assert.match(listSource, /CrudListBulkActionSurface/);
   assert.match(listSource, /CrudListFilterSurface/);
+  assert.match(listSource, /CrudListRecordActionMenu/);
   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, /button-label="More"/);
+  assert.match(listSource, /selectableRows/);
   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(listSource, /<slot[\s\S]*name="table-row"/);
+  assert.match(listSource, /:row="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="before-fields"/);
   assert.match(viewSource, /<slot name="fields"/);
+  assert.match(viewSource, /<slot name="after-fields"/);
+  assert.match(viewSource, /supporting-content/);
 
   assert.match(addEditSource, /generated-ui-screen generated-ui-screen--operator ui-generator-add-edit-form/);
   assert.match(addEditSource, /addEdit\.canRetryLoad/);
@@ -38,6 +48,22 @@ test("CRUD screen components own generated list/view/form chrome centrally", asy
   assert.match(addEditSource, /<slot[\s\S]*name="fields"/);
 });
 
+test("CRUD screen composables expose generated page extension inputs", async () => {
+  const listSource = await readClientFile("composables", "useCrudListScreen.js");
+  const viewSource = await readClientFile("composables", "useCrudViewScreen.js");
+
+  assert.match(listSource, /listRowActions = \[\]/);
+  assert.match(listSource, /syntheticRows = null/);
+  assert.match(listSource, /useCrudListRowActions/);
+  assert.match(listSource, /selectableRows/);
+
+  assert.match(viewSource, /requestQueryParams = null/);
+  assert.match(viewSource, /readEnabled = true/);
+  assert.match(viewSource, /queryKeyFactory = null/);
+  assert.match(viewSource, /requestQueryParams/);
+  assert.match(viewSource, /readEnabled/);
+});
+
 test("account settings load state exposes a local retry action", async () => {
   const source = await readComponent("AccountSettingsClientElement.vue");
 
@@ -49,14 +75,20 @@ test("CRUD screen composables are importable package APIs", async () => {
   const [
     listModule,
     viewModule,
-    addEditModule
+    addEditModule,
+    rowActionsModule,
+    rowActionsRuntimeModule
   ] = 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")
+    import("@jskit-ai/users-web/client/composables/useCrudAddEditScreen"),
+    import("@jskit-ai/users-web/client/rowActions"),
+    import("@jskit-ai/users-web/client/composables/useCrudListRowActions")
   ]);
 
   assert.equal(typeof listModule.useCrudListScreen, "function");
   assert.equal(typeof viewModule.useCrudViewScreen, "function");
   assert.equal(typeof addEditModule.useCrudAddEditScreen, "function");
+  assert.equal(typeof rowActionsModule.defineCrudListRowActions, "function");
+  assert.equal(typeof rowActionsRuntimeModule.useCrudListRowActions, "function");
 });

package/test/exportsContract.test.js

@@ -24,6 +24,7 @@ test("users-web exports are explicit and aligned with production/template usage"
       "./client/account-settings/sections",
       "./client/bulkActions",
       "./client/filters",
+      "./client/rowActions",
       "./client/composables/useAddEdit",
       "./client/composables/useCommand",
       "./client/composables/useEndpointResource",
@@ -33,6 +34,7 @@ test("users-web exports are explicit and aligned with production/template usage"
       "./client/composables/useCrudAddEdit",
       "./client/composables/useCrudAddEditScreen",
       "./client/composables/useCrudListBulkActions",
+      "./client/composables/useCrudListRowActions",
       "./client/composables/useCrudListFilterLookups",
       "./client/composables/useCrudListFilters",
       "./client/composables/useCrudList",

package/test/useCrudListRowActions.test.js

@@ -0,0 +1,77 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+test("useCrudListRowActions manages per-record state and executes action context", async () => {
+  const { defineCrudListRowActions } = await import("@jskit-ai/users-web/client/rowActions");
+  const { useCrudListRowActions } = await import("@jskit-ai/users-web/client/composables/useCrudListRowActions");
+  const calls = [];
+  let finishRun = null;
+  const actions = defineCrudListRowActions([
+    {
+      key: "delete",
+      label: "Delete",
+      color: "error",
+      visible: ({ record }) => record.isOwnerRow !== true,
+      disabled: ({ record }) => record.locked === true,
+      loading: ({ record }) => record.pending === true,
+      async run(context) {
+        calls.push(context);
+        await new Promise((resolve) => {
+          finishRun = resolve;
+        });
+        return "deleted";
+      }
+    }
+  ]);
+  const runtime = useCrudListRowActions(actions, {
+    resolveRecordId: (record) => record.id,
+    resolveContext: () => ({
+      records: "records-token",
+      reload: "reload-token"
+    })
+  });
+
+  assert.equal(runtime.hasActions.value, true);
+  assert.equal(runtime.hasVisibleActionsFor({ id: "owner", isOwnerRow: true }, 0), false);
+  assert.equal(runtime.isActionDisabled("delete", { id: "locked", locked: true }, 1), true);
+  assert.equal(runtime.isActionLoading("delete", { id: "pending", pending: true }, 2), true);
+
+  const record = { id: "10", name: "Worker" };
+  assert.equal(runtime.isActionVisible("delete", record, 3), true);
+  assert.equal(runtime.isActionDisabled("delete", record, 3), false);
+
+  const result = runtime.execute("delete", record, 3);
+  assert.equal(runtime.isActionExecuting("delete", record, 3), true);
+  assert.equal(runtime.isActionLoading("delete", record, 3), true);
+  finishRun();
+
+  assert.equal(await result, "deleted");
+  assert.equal(runtime.isActionExecuting("delete", record, 3), false);
+  assert.equal(calls.length, 1);
+  assert.equal(calls[0].action.key, "delete");
+  assert.equal(calls[0].record, record);
+  assert.equal(calls[0].index, 3);
+  assert.equal(calls[0].recordId, "10");
+  assert.equal(calls[0].records, "records-token");
+  assert.equal(calls[0].reload, "reload-token");
+});
+
+test("defineCrudListRowActions skips malformed and duplicate actions", async () => {
+  const { defineCrudListRowActions } = await import("@jskit-ai/users-web/client/rowActions");
+
+  const actions = defineCrudListRowActions([
+    null,
+    { key: "delete", label: "Delete", color: "error" },
+    { key: "delete", label: "Delete again" },
+    { key: "missing-label" },
+    { label: "Generated key" }
+  ]);
+
+  assert.deepEqual(
+    actions.map((action) => [action.key, action.label, action.color]),
+    [
+      ["delete", "Delete", "error"],
+      ["action-5", "Generated key", "primary"]
+    ]
+  );
+});