@jskit-ai/http-web 0.1.22 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/http-web",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -44,14 +44,14 @@
     "./client/support/contractGuards": "./src/client/support/contractGuards.js"
   },
   "dependencies": {
-    "@jskit-ai/resource-crud-core": "0.1.119",
+    "@jskit-ai/resource-crud-core": "0.1.121",
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.175",
-    "@jskit-ai/kernel": "0.1.177",
-    "@jskit-ai/realtime": "0.1.174",
-    "@jskit-ai/shell-web": "0.1.181",
+    "@jskit-ai/http-runtime": "0.1.177",
+    "@jskit-ai/kernel": "0.1.179",
+    "@jskit-ai/realtime": "0.1.176",
+    "@jskit-ai/shell-web": "0.1.183",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

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

@@ -35,6 +35,7 @@ questionnaire.
 
 - Route pages stay thin and use `useCrudListScreen()`, `useCrudViewScreen()`,
   or `useCrudAddEditScreen()`.
+- Route pages do not add a page header or standalone heading by default.
 - Transport and validators come from the shared resource contract.
 - Initial visible loading uses structure-matching skeletons; pending buttons use
   stable disabled labels, never spinners.

package/patterns/crud-screen-set/example/books/BookEditPage.vue

@@ -12,8 +12,6 @@ const routeRecordId = computed(() => String(route.params.bookId || "").trim());
 
 const screen = useCrudAddEditScreen({
   mode: "edit",
-  title: "Edit book",
-  subtitle: "Update this catalogue entry.",
   saveLabel: "Save changes",
   cancelTo: "/books/:bookId",
   preserveCancelQuery: true,

package/patterns/crud-screen-set/example/books/BookListPage.vue

@@ -25,11 +25,7 @@ const screen = useCrudListScreen({
 <template>
   <CrudListScreen
     :screen="screen"
-    title-label="Books"
-    heading-title="My books"
-    subtitle="Search and maintain your catalogue."
     create-label="Add book"
-    empty-title="No books yet"
     empty-body="Add your first book to begin the catalogue."
   >
     <template #card-fields="{ record, formatListCardValue }">

package/patterns/crud-screen-set/example/books/BookNewPage.vue

@@ -7,8 +7,6 @@ import { bookFormFields } from "./formFields.js";
 
 const screen = useCrudAddEditScreen({
   mode: "new",
-  title: "Add book",
-  subtitle: "Add a book to your catalogue.",
   saveLabel: "Save book",
   cancelTo: "/books",
   resource: bookResource,

package/patterns/crud-screen-set/example/books/BookViewPage.vue

@@ -30,7 +30,6 @@ const deleteAction = useCrudDeleteAction({
     :screen="screen"
     resource-singular-title="Book"
     resource-plural-title="Books"
-    description="Review this catalogue entry."
   >
     <template #actions>
       <CrudDeleteAction :action="deleteAction" resource-singular-title="Book" />

package/src/client/components/CrudAddEditScreen.vue

@@ -28,8 +28,6 @@ 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) || "");
 
@@ -53,27 +51,20 @@ function resolveCancelTo(target = cancelTo.value) {
 
 <template>
   <section class="crud-screen crud-screen--operator crud-add-edit-form d-flex flex-column ga-4">
-    <header class="crud-add-edit-form__header">
-      <div class="crud-add-edit-form__copy">
-        <h1 class="crud-add-edit-form__title">{{ title }}</h1>
-        <p v-if="subtitle" class="text-body-2 text-medium-emphasis mb-0">{{ subtitle }}</p>
-      </div>
-      <div class="crud-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"
-          :disabled="addEdit.isSubmitDisabled"
-          @click="addEdit.submit"
-        >
-          {{ addEdit.isSaving ? "Saving…" : saveLabel }}
-        </v-btn>
-      </div>
-    </header>
+    <div class="crud-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"
+        :disabled="addEdit.isSubmitDisabled"
+        @click="addEdit.submit"
+      >
+        {{ addEdit.isSaving ? "Saving…" : saveLabel }}
+      </v-btn>
+    </div>
 
     <v-sheet rounded="lg" border class="crud-add-edit-form__panel">
       <div v-if="addEdit.loadError" class="crud-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>
@@ -89,7 +80,7 @@ function resolveCancelTo(target = cancelTo.value) {
       </div>
       <template v-else-if="formRuntime.showFormSkeleton">
         <div class="pa-4">
-          <v-skeleton-loader type="heading, text@2, article" />
+          <v-skeleton-loader type="text@2, article" />
         </div>
       </template>
       <v-form v-else class="pa-4" @submit.prevent="addEdit.submit" novalidate>
@@ -114,7 +105,6 @@ function resolveCancelTo(target = cancelTo.value) {
 
 <style scoped>
 .crud-screen {
-  --crud-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
   --crud-screen-state-padding: 2.5rem 1.25rem;
 }
 
@@ -122,25 +112,6 @@ function resolveCancelTo(target = cancelTo.value) {
   --crud-screen-state-padding: 2rem 1rem;
 }
 
-.crud-add-edit-form__header {
-  align-items: flex-start;
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-}
-
-.crud-add-edit-form__copy {
-  min-width: 0;
-}
-
-.crud-add-edit-form__title {
-  font-size: var(--crud-screen-title-size);
-  font-weight: 650;
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-  margin: 0 0 0.35rem;
-}
-
 .crud-add-edit-form__actions {
   display: flex;
   flex-wrap: wrap;
@@ -164,10 +135,6 @@ function resolveCancelTo(target = cancelTo.value) {
 }
 
 @media (max-width: 960px) {
-  .crud-add-edit-form__header {
-    flex-direction: column;
-  }
-
   .crud-add-edit-form__actions {
     width: 100%;
   }

package/src/client/components/CrudListScreen.vue

@@ -10,34 +10,14 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  titleLabel: {
-    type: String,
-    default: "Records"
-  },
-  headingTitle: {
-    type: String,
-    default: ""
-  },
-  subtitle: {
-    type: String,
-    default: ""
-  },
   createLabel: {
     type: String,
     default: "New record"
   },
-  loadErrorTitle: {
-    type: String,
-    default: "Unable to load records"
-  },
   loadErrorBody: {
     type: String,
     default: "Check the connection and try again."
   },
-  emptyTitle: {
-    type: String,
-    default: "No records yet"
-  },
   emptyBody: {
     type: String,
     default: "Create the first record to start using this workflow."
@@ -57,10 +37,6 @@ const hasBulkActions = computed(() => Boolean(unref(bulkActions.value?.hasAction
 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());
-const resolvedSubtitle = computed(() =>
-  String(props.subtitle || `Search, review, and update ${props.titleLabel} from this screen.`).trim()
-);
 
 function resolveListRecordTitle(record) {
   if (typeof props.screen?.resolveRecordTitle === "function") {
@@ -127,32 +103,25 @@ function setSelectableRowsSelected(selected = true) {
 
 <template>
   <section class="crud-screen crud-screen--operator crud-list-element d-flex flex-column ga-4">
-    <header class="crud-list-header">
-      <div class="crud-list-header__copy">
-        <p class="text-overline text-medium-emphasis mb-1">{{ titleLabel }}</p>
-        <h1 class="crud-list-header__title">{{ resolvedHeadingTitle }}</h1>
-        <p class="text-body-2 text-medium-emphasis mb-0">{{ resolvedSubtitle }}</p>
-      </div>
-      <div class="crud-list-header__actions">
-        <v-btn
-          color="primary"
-          variant="tonal"
-          :disabled="records.isFetching"
-          @click="records.reload"
-        >
-          {{ records.isFetching ? "Refreshing…" : "Refresh" }}
-        </v-btn>
-        <v-btn
-          v-if="listPrimaryAction"
-          class="crud-list-header__primary-action"
-          color="primary"
-          variant="flat"
-          :to="listPrimaryAction"
-        >
-          {{ createLabel }}
-        </v-btn>
-      </div>
-    </header>
+    <div class="crud-list-actions">
+      <v-btn
+        color="primary"
+        variant="tonal"
+        :disabled="records.isFetching"
+        @click="records.reload"
+      >
+        {{ records.isFetching ? "Refreshing…" : "Refresh" }}
+      </v-btn>
+      <v-btn
+        v-if="listPrimaryAction"
+        class="crud-list-primary-action"
+        color="primary"
+        variant="flat"
+        :to="listPrimaryAction"
+      >
+        {{ createLabel }}
+      </v-btn>
+    </div>
 
     <v-sheet rounded="lg" border class="crud-list-panel">
       <div class="crud-list-toolbar">
@@ -182,7 +151,6 @@ function setSelectableRowsSelected(selected = true) {
       </template>
       <template v-else>
         <div v-if="records.loadError" class="crud-list-state">
-          <h2 class="text-h6 mb-2">{{ loadErrorTitle }}</h2>
           <p class="text-body-2 text-medium-emphasis mb-4">{{ loadErrorBody }}</p>
           <v-btn
             color="primary"
@@ -195,7 +163,6 @@ function setSelectableRowsSelected(selected = true) {
         </div>
 
         <div v-else-if="displayRows.length < 1" class="crud-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">
             {{ createLabel }}
@@ -354,7 +321,6 @@ function setSelectableRowsSelected(selected = true) {
 
 <style scoped>
 .crud-screen {
-  --crud-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
   --crud-screen-state-padding: 2.5rem 1.25rem;
 }
 
@@ -362,26 +328,7 @@ function setSelectableRowsSelected(selected = true) {
   --crud-screen-state-padding: 2rem 1rem;
 }
 
-.crud-list-header {
-  align-items: flex-start;
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-}
-
-.crud-list-header__copy {
-  min-width: 0;
-}
-
-.crud-list-header__title {
-  font-size: var(--crud-screen-title-size);
-  font-weight: 650;
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-  margin: 0 0 0.35rem;
-}
-
-.crud-list-header__actions {
+.crud-list-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -495,11 +442,7 @@ function setSelectableRowsSelected(selected = true) {
 }
 
 @media (max-width: 960px) {
-  .crud-list-header {
-    flex-direction: column;
-  }
-
-  .crud-list-header__actions {
+  .crud-list-actions {
     width: 100%;
   }
 
@@ -507,7 +450,7 @@ function setSelectableRowsSelected(selected = true) {
     min-height: 48px;
   }
 
-  .crud-list-header__primary-action {
+  .crud-list-primary-action {
     display: none;
   }
 

package/src/client/components/CrudViewScreen.vue

@@ -13,58 +13,38 @@ const props = defineProps({
   resourcePluralTitle: {
     type: String,
     default: "Records"
-  },
-  description: {
-    type: String,
-    default: ""
-  },
-  unavailableTitle: {
-    type: String,
-    default: "Record unavailable"
   }
 });
 
 const view = computed(() => props.screen?.view || {});
-const recordTitle = computed(() => unref(props.screen?.recordTitle) || props.resourceSingularTitle);
 const listLocation = computed(() => unref(props.screen?.listLocation) || null);
 const editLocation = computed(() => unref(props.screen?.editLocation) || null);
-const resolvedDescription = computed(() =>
-  String(props.description || `Review this ${props.resourceSingularTitle} record.`).trim()
-);
 </script>
 
 <template>
   <section class="crud-screen crud-screen--operator crud-view-element d-flex flex-column ga-4">
-    <header class="crud-view-header">
-      <div class="crud-view-header__copy">
-        <p class="text-overline text-medium-emphasis mb-1">{{ resourceSingularTitle }}</p>
-        <h1 class="crud-view-header__title">{{ recordTitle }}</h1>
-        <p class="text-body-2 text-medium-emphasis mb-0">{{ resolvedDescription }}</p>
-      </div>
-      <div class="crud-view-header__actions">
-        <v-btn
-          v-if="listLocation"
-          color="primary"
-          variant="outlined"
-          :to="listLocation"
-        >
-          Back to {{ resourcePluralTitle }}
-        </v-btn>
-        <slot name="actions" :screen="screen" :view="view" />
-        <v-btn
-          v-if="editLocation"
-          color="primary"
-          variant="flat"
-          :to="editLocation"
-        >
-          Edit
-        </v-btn>
-      </div>
-    </header>
+    <div class="crud-view-actions">
+      <v-btn
+        v-if="listLocation"
+        color="primary"
+        variant="outlined"
+        :to="listLocation"
+      >
+        Back to {{ resourcePluralTitle }}
+      </v-btn>
+      <slot name="actions" :screen="screen" :view="view" />
+      <v-btn
+        v-if="editLocation"
+        color="primary"
+        variant="flat"
+        :to="editLocation"
+      >
+        Edit
+      </v-btn>
+    </div>
 
     <v-sheet rounded="lg" border class="crud-view-panel">
       <div v-if="view.loadError || view.isNotFound" class="crud-view-state">
-        <h2 class="text-h6 mb-2">{{ unavailableTitle }}</h2>
         <p class="text-body-2 text-medium-emphasis mb-4">
           {{ view.loadError || `This ${resourceSingularTitle} could not be found.` }}
         </p>
@@ -114,7 +94,6 @@ const resolvedDescription = computed(() =>
 
 <style scoped>
 .crud-screen {
-  --crud-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
   --crud-screen-state-padding: 2.5rem 1.25rem;
 }
 
@@ -122,27 +101,7 @@ const resolvedDescription = computed(() =>
   --crud-screen-state-padding: 2rem 1rem;
 }
 
-.crud-view-header {
-  align-items: flex-start;
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-}
-
-.crud-view-header__copy {
-  min-width: 0;
-}
-
-.crud-view-header__title {
-  font-size: var(--crud-screen-title-size);
-  font-weight: 650;
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-  margin: 0 0 0.35rem;
-  overflow-wrap: anywhere;
-}
-
-.crud-view-header__actions {
+.crud-view-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -176,15 +135,11 @@ const resolvedDescription = computed(() =>
 }
 
 @media (max-width: 960px) {
-  .crud-view-header {
-    flex-direction: column;
-  }
-
-  .crud-view-header__actions {
+  .crud-view-actions {
     width: 100%;
   }
 
-  .crud-view-header__actions :deep(.v-btn) {
+  .crud-view-actions :deep(.v-btn) {
     min-height: 48px;
     flex: 1 1 10rem;
   }