@carlonicora/nextjs-jsonapi 1.110.0 → 1.111.1

package/scripts/generate-web-module/templates/components/index.ts

@@ -12,7 +12,6 @@ export { generateMultiSelectorTemplate } from "./multi-selector.template";
 
 // Display components
 export { generateListTemplate } from "./list.template";
-export { generateDetailsTemplate } from "./details.template";
 export { generateContentTemplate } from "./content.template";
 export { generateContainerTemplate } from "./container.template";
 export { generateListContainerTemplate } from "./list-container.template";

package/scripts/generate-web-module/templates/components/list-container.template.ts

@@ -23,8 +23,8 @@ import { Modules } from "@carlonicora/nextjs-jsonapi/core";
 
 function ${names.pascalCase}ListContainerInternal() {
   return (
-    <RoundPageContainer module={Modules.${names.pascalCase}}>
-      <${names.pascalCase}List />
+    <RoundPageContainer module={Modules.${names.pascalCase}} fullWidth>
+      <${names.pascalCase}List fullWidth />
     </RoundPageContainer>
   );
 }

package/scripts/generate-web-module/templates/components/list.template.ts

@@ -32,7 +32,11 @@ import { DataListRetriever, useDataListRetriever } from "@carlonicora/nextjs-jso
 import { useTranslations } from "next-intl";
 import { ReactNode } from "react";
 
-export default function ${names.pascalCase}List() {
+type ${names.pascalCase}ListProps = {
+  fullWidth?: boolean;
+};
+
+export default function ${names.pascalCase}List({ fullWidth }: ${names.pascalCase}ListProps) {
   const t = useTranslations();
 
   const data: DataListRetriever<${names.pascalCase}Interface> = useDataListRetriever({
@@ -50,6 +54,7 @@ export default function ${names.pascalCase}List() {
       tableGeneratorType={Modules.${names.pascalCase}}
       functions={functions}
       title={t(\`entities.${names.pluralCamel.toLowerCase()}\`, { count: 2 })}
+      fullWidth={fullWidth}
     />
   );
 }

package/scripts/generate-web-module/templates/components/selector.template.ts

@@ -21,11 +21,14 @@ export function generateSelectorTemplate(data: FrontendTemplateData): string {
   return `"use client";
 
 import {
+  Button,
   Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
   CommandItem,
   CommandList,
   FormFieldWrapper,
-  Input,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -36,7 +39,7 @@ import { DataListRetriever, useDataListRetriever } from "@carlonicora/nextjs-jso
 import { useDebounce } from "@carlonicora/nextjs-jsonapi/client";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
 
-import { CircleX, RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
+import { ChevronsUpDown, Loader2, XIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -98,12 +101,12 @@ export default function ${names.pascalCase}Selector({
   const set${names.pascalCase} = (${names.camelCase}?: ${names.pascalCase}Interface) => {
     if (onChange) onChange(${names.camelCase});
     if (!${names.camelCase}) {
-      form.setValue(id, undefined, { shouldDirty: true });
+      form.setValue(id, undefined);
       setOpen(false);
       return;
     }
 
-    form.setValue(id, { id: ${names.camelCase}.id, name: ${names.camelCase}.${displayProp} }, { shouldDirty: true });
+    form.setValue(id, { id: ${names.camelCase}.id, name: ${names.camelCase}.${displayProp} });
     setOpen(false);
 
     setTimeout(() => {
@@ -118,62 +121,55 @@ export default function ${names.pascalCase}Selector({
           <Popover open={open} onOpenChange={setOpen} modal={true}>
             <div className="flex w-full flex-row items-center justify-between">
               <PopoverTrigger className="w-full">
-                <div className="flex w-full flex-row items-center justify-start rounded-md">
-                  {field.value ? (
-                    <div className="bg-input/20 dark:bg-input/30 border-input flex h-7 w-full flex-row items-center justify-start rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed">
-                      <span>{field.value?.name ?? ""}</span>
-                    </div>
-                  ) : (
-                    <div className="bg-input/20 dark:bg-input/30 border-input text-muted-foreground flex h-7 w-full flex-row items-center justify-start rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed">
-                      {placeholder ?? t(\`generic.search.placeholder\`, { type: t(\`entities.${i18nKey}\`, { count: 1 }) })}
-                    </div>
-                  )}
-                </div>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={open}
+                  className="h-auto min-h-10 w-full justify-between px-3 py-2"
+                >
+                  <span className={field.value ? "" : "text-muted-foreground"}>
+                    {field.value?.name ?? placeholder ?? t(\`generic.search.placeholder\`, { type: t(\`entities.${i18nKey}\`, { count: 1 }) })}
+                  </span>
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
               </PopoverTrigger>
               {field.value && (
-                <CircleX
-                  className="text-muted hover:text-destructive ml-2 h-4 w-4 shrink-0 cursor-pointer"
+                <XIcon
+                  className="text-muted-foreground hover:text-destructive ml-2 h-5 w-5 cursor-pointer"
                   onClick={() => set${names.pascalCase}()}
                 />
               )}
             </div>
-            <PopoverContent align="start" className="w-(--anchor-width)">
+            <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
               <Command shouldFilter={false}>
-                <div className="relative mb-2 w-full">
-                  <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
-                  <Input
-                    placeholder={t(\`generic.search.placeholder\`, { type: t(\`entities.${i18nKey}\`, { count: 1 }) })}
-                    type="text"
-                    className="w-full pr-8 pl-8"
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    value={searchTerm}
-                  />
-                  {isSearching ? (
-                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
-                  ) : searchTermRef.current ? (
-                    <XIcon
-                      className={\`absolute top-2.5 right-2.5 h-4 w-4 \${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}\`}
-                      onClick={() => {
-                        setSearchTerm("");
-                        search("");
-                      }}
-                    />
-                  ) : (
-                    <></>
-                  )}
-                </div>
+                <CommandInput
+                  placeholder={t(\`generic.search.placeholder\`, { type: t(\`entities.${i18nKey}\`, { count: 1 }) })}
+                  value={searchTerm}
+                  onValueChange={setSearchTerm}
+                />
                 <CommandList>
-                  {data.data &&
-                    data.data.length > 0 &&
-                    (data.data as ${names.pascalCase}Interface[]).map((${names.camelCase}: ${names.pascalCase}Interface) => (
-                      <CommandItem
-                        className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
-                        key={${names.camelCase}.id}
-                        onSelect={() => set${names.pascalCase}(${names.camelCase})}
-                      >
-                        {${names.camelCase}.${displayProp}}
-                      </CommandItem>
-                    ))}
+                  {isSearching && (
+                    <div className="flex items-center justify-center py-6">
+                      <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                    </div>
+                  )}
+                  {!isSearching && data.data && data.data.length === 0 && (
+                    <CommandEmpty>{t(\`generic.search.no_results\`)}</CommandEmpty>
+                  )}
+                  {!isSearching && data.data && data.data.length > 0 && (
+                    <CommandGroup>
+                      {(data.data as ${names.pascalCase}Interface[]).map((${names.camelCase}: ${names.pascalCase}Interface) => (
+                        <CommandItem
+                          key={${names.camelCase}.id}
+                          value={${names.camelCase}.id}
+                          onSelect={() => set${names.pascalCase}(${names.camelCase})}
+                          className="hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent cursor-pointer"
+                        >
+                          {${names.camelCase}.${displayProp}}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  )}
                 </CommandList>
               </Command>
             </PopoverContent>

package/scripts/generate-web-module/templates/data/interface.template.ts

@@ -5,7 +5,15 @@
  */
 
 import { FrontendTemplateData, FrontendField, FrontendRelationship } from "../../types/template-data.interface";
-import { toCamelCase, pluralize } from "../../transformers/name-transformer";
+import { toCamelCase, toPascalCase, pluralize } from "../../transformers/name-transformer";
+
+/**
+ * Build the named `<Pascal>RelationshipMeta` interface name for a relationship
+ * that carries edge fields (mirrors live OpportunityInterface.ts).
+ */
+function relationshipMetaName(rel: FrontendRelationship): string {
+  return `${toPascalCase(rel.alias ?? rel.name)}RelationshipMeta`;
+}
 
 /**
  * Generate the interface file content
@@ -17,17 +25,35 @@ export function generateInterfaceTemplate(data: FrontendTemplateData): string {
   const { names, extendsContent, fields, relationships } = data;
 
   const imports = generateImports(data);
+  const metaInterfaces = generateMetaInterfaces(data);
   const inputType = generateInputType(data);
   const interfaceDefinition = generateInterface(data);
 
   return `${imports}
-
+${metaInterfaces ? `\n${metaInterfaces}\n` : ""}
 ${inputType}
 
 ${interfaceDefinition}
 `;
 }
 
+/**
+ * Generate named `<Pascal>RelationshipMeta` interfaces for relationships that
+ * carry edge fields. Reused by getters and the Input type's meta arrays.
+ */
+function generateMetaInterfaces(data: FrontendTemplateData): string {
+  return data.relationships
+    .filter((rel) => rel.fields && rel.fields.length > 0)
+    .map((rel) => {
+      const metaName = relationshipMetaName(rel);
+      const body = rel
+        .fields!.map((f) => `  ${f.name}${f.nullable ? "?" : ""}: ${f.tsType};`)
+        .join("\n");
+      return `export interface ${metaName} {\n${body}\n}`;
+    })
+    .join("\n\n");
+}
+
 /**
  * Generate import statements
  */
@@ -64,10 +90,11 @@ function generateInputType(data: FrontendTemplateData): string {
 
   const fieldLines: string[] = ["  id: string;"];
 
-  // Add fields (excluding inherited ones if extending Content)
-  const fieldsToInclude = extendsContent
-    ? fields.filter((f) => !["name", "tldr", "abstract"].includes(f.name))
-    : fields;
+  // Add fields (excluding inherited ones if extending Content, and read-only
+  // fields which are server-derived and never sent back in the Input).
+  const fieldsToInclude = (
+    extendsContent ? fields.filter((f) => !["name", "tldr", "abstract"].includes(f.name)) : fields
+  ).filter((f) => !f.readOnly);
 
   fieldsToInclude.forEach((field) => {
     const optional = field.nullable ? "?" : "";
@@ -93,6 +120,12 @@ function generateInputType(data: FrontendTemplateData): string {
       const effectiveMany = rel.alias || rel.name;
       const key = `${toCamelCase(effectiveMany)}Ids`;
       fieldLines.push(`  ${key}?: string[];`);
+
+      // For many relationships with edge fields, also emit a parallel meta array.
+      if (rel.fields && rel.fields.length > 0) {
+        const metaShape = rel.fields.map((f) => `${f.name}: ${f.tsType}`).join("; ");
+        fieldLines.push(`  ${toCamelCase(effectiveMany)}Meta?: { id: string; ${metaShape} }[];`);
+      }
     }
   });
 
@@ -130,11 +163,11 @@ function generateInterface(data: FrontendTemplateData): string {
     if (rel.single) {
       const propertyName = toCamelCase(effectiveName);
 
-      // Build return type - use intersection if relationship has fields
+      // Build return type - intersect with the named meta interface if the
+      // relationship has edge fields.
       let baseType = rel.interfaceName;
       if (rel.fields && rel.fields.length > 0) {
-        const metaFields = rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ");
-        baseType = `${rel.interfaceName} & { ${metaFields} }`;
+        baseType = `${rel.interfaceName} & ${relationshipMetaName(rel)}`;
       }
 
       const type = rel.nullable ? `(${baseType}) | undefined` : baseType;
@@ -142,10 +175,9 @@ function generateInterface(data: FrontendTemplateData): string {
     } else {
       const effectiveMany = rel.alias || rel.name;
       const propertyName = pluralize(toCamelCase(effectiveMany));
-      // Use intersection type if relationship has fields (edge properties)
+      // Intersect with the named meta interface if the relationship has edge fields.
       if (rel.fields && rel.fields.length > 0) {
-        const metaFields = rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ");
-        getterLines.push(`  get ${propertyName}(): (${rel.interfaceName} & { ${metaFields} })[];`);
+        getterLines.push(`  get ${propertyName}(): (${rel.interfaceName} & ${relationshipMetaName(rel)})[];`);
       } else {
         getterLines.push(`  get ${propertyName}(): ${rel.interfaceName}[];`);
       }

package/scripts/generate-web-module/templates/data/model.template.ts

@@ -4,9 +4,33 @@
  * Generates {Module}.ts class file with rehydrate and createJsonApi methods.
  */
 
-import { pluralize, toCamelCase } from "../../transformers/name-transformer";
+import { pluralize, toCamelCase, toPascalCase } from "../../transformers/name-transformer";
+import { resolveRelationshipKey } from "../../transformers/relationship-key";
 import { AUTHOR_VARIANT } from "../../types/field-mapping.types";
-import { FrontendField, FrontendTemplateData } from "../../types/template-data.interface";
+import { FrontendField, FrontendRelationship, FrontendTemplateData } from "../../types/template-data.interface";
+
+/**
+ * Build the named `<Pascal>RelationshipMeta` interface name for a relationship
+ * that carries edge fields (mirrors live Opportunity.ts / OpportunityInterface.ts).
+ *
+ * These named interfaces are declared in the module's OWN `<Module>Interface.ts`
+ * (emitted by interface.template.ts), so the model imports them from there.
+ */
+function relMetaName(rel: FrontendRelationship): string {
+  return `${toPascalCase(rel.alias ?? rel.name)}RelationshipMeta`;
+}
+
+/**
+ * Determine whether the model needs the `formatLocalDate` helper imported.
+ *
+ * True when any data field is a date/datetime, or any relationship edge field
+ * is a date/datetime (edge dates would also be serialized via the helper).
+ */
+function hasDateField(data: FrontendTemplateData): boolean {
+  const fieldIsDate = (type: string) => type === "date" || type === "datetime";
+  if (data.fields.some((f) => fieldIsDate(f.type))) return true;
+  return data.relationships.some((rel) => (rel.fields ?? []).some((f) => fieldIsDate(f.type)));
+}
 
 /**
  * Generate the model file content
@@ -46,9 +70,20 @@ function generateImports(data: FrontendTemplateData): string {
   const { names, extendsContent, relationships } = data;
   const imports: string[] = [];
 
-  // Own interface import
+  // Own interface import — also pull in the named `<Pascal>RelationshipMeta`
+  // interfaces, which are all declared in this module's own Interface file.
+  const ownNamedImports = [`${names.pascalCase}Input`, `${names.pascalCase}Interface`];
+  const seenMeta = new Set<string>();
+  relationships.forEach((rel) => {
+    if (!rel.fields || rel.fields.length === 0) return;
+    const metaName = relMetaName(rel);
+    if (seenMeta.has(metaName)) return;
+    seenMeta.add(metaName);
+    ownNamedImports.push(metaName);
+  });
+  ownNamedImports.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
   imports.push(
-    `import { ${names.pascalCase}Input, ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";`,
+    `import { ${ownNamedImports.join(", ")} } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";`,
   );
 
   // Relationship interface imports (deduplicated, skip self-referential)
@@ -62,13 +97,16 @@ function generateImports(data: FrontendTemplateData): string {
     imports.push(`import { ${rel.interfaceName} } from "${rel.interfaceImportPath}";`);
   });
 
-  // Base class and core imports
+  // Base class and core imports (sorted case-insensitively to match live output)
+  const byName = (a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase());
+  const coreNames = ["JsonApiHydratedDataInterface", "Modules"];
+  if (hasDateField(data)) coreNames.push("formatLocalDate");
   if (extendsContent) {
     imports.push(`import { Content } from "@/features/content/data/Content";`);
-    imports.push(`import { JsonApiHydratedDataInterface, Modules } from "@carlonicora/nextjs-jsonapi/core";`);
+    imports.push(`import { ${coreNames.sort(byName).join(", ")} } from "@carlonicora/nextjs-jsonapi/core";`);
   } else {
     imports.push(
-      `import { AbstractApiData, JsonApiHydratedDataInterface, Modules } from "@carlonicora/nextjs-jsonapi/core";`,
+      `import { ${["AbstractApiData", ...coreNames].sort(byName).join(", ")} } from "@carlonicora/nextjs-jsonapi/core";`,
     );
   }
 
@@ -97,20 +135,18 @@ function generatePrivateFields(data: FrontendTemplateData): string {
       const effectiveName = rel.alias || rel.variant || rel.name;
       if (rel.single) {
         const propName = toCamelCase(effectiveName);
-        // Use intersection type if relationship has fields
+        // Use intersection with the named meta interface if relationship has fields
         let typeDecl = rel.interfaceName;
         if (rel.fields && rel.fields.length > 0) {
-          const metaFields = rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ");
-          typeDecl = `${rel.interfaceName} & { ${metaFields} }`;
+          typeDecl = `${rel.interfaceName} & ${relMetaName(rel)}`;
         }
         lines.push(`  private _${propName}?: ${typeDecl};`);
       } else {
         const effectiveMany = rel.alias || rel.name;
         const propName = pluralize(toCamelCase(effectiveMany));
-        // Use intersection type if relationship has fields (edge properties)
+        // Use intersection with the named meta interface if relationship has fields (edge properties)
         if (rel.fields && rel.fields.length > 0) {
-          const metaFields = rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ");
-          lines.push(`  private _${propName}?: (${rel.interfaceName} & { ${metaFields} })[];`);
+          lines.push(`  private _${propName}?: (${rel.interfaceName} & ${relMetaName(rel)})[];`);
         } else {
           lines.push(`  private _${propName}?: ${rel.interfaceName}[];`);
         }
@@ -147,11 +183,10 @@ function generateGetters(data: FrontendTemplateData): string {
       if (rel.single) {
         const propName = toCamelCase(effectiveName);
 
-        // Build return type - use intersection if relationship has fields
+        // Build return type - intersect with the named meta interface if relationship has fields
         let baseType = rel.interfaceName;
         if (rel.fields && rel.fields.length > 0) {
-          const metaFields = rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ");
-          baseType = `${rel.interfaceName} & { ${metaFields} }`;
+          baseType = `${rel.interfaceName} & ${relMetaName(rel)}`;
         }
 
         if (rel.nullable) {
@@ -167,10 +202,9 @@ function generateGetters(data: FrontendTemplateData): string {
       } else {
         const effectiveMany = rel.alias || rel.name;
         const propName = pluralize(toCamelCase(effectiveMany));
-        // Use intersection type if relationship has fields (edge properties)
+        // Intersect with the named meta interface if relationship has fields (edge properties)
         if (rel.fields && rel.fields.length > 0) {
-          const metaFields = rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ");
-          lines.push(`  get ${propName}(): (${rel.interfaceName} & { ${metaFields} })[] {
+          lines.push(`  get ${propName}(): (${rel.interfaceName} & ${relMetaName(rel)})[] {
     return this._${propName} ?? [];
   }`);
         } else {
@@ -223,11 +257,11 @@ function generateRehydrateMethod(data: FrontendTemplateData): string {
       const effectiveName = rel.alias || rel.variant || rel.name;
       if (rel.single) {
         const propName = toCamelCase(effectiveName);
-        const relationshipKey = toCamelCase(effectiveName);
+        const relationshipKey = resolveRelationshipKey(rel);
 
         // Use _readIncludedWithMeta for relationships with fields
         if (rel.fields && rel.fields.length > 0) {
-          const metaType = `{ ${rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ")} }`;
+          const metaType = relMetaName(rel);
           const singleCast = rel.nullable
             ? ` as (${rel.interfaceName} & ${metaType}) | undefined`
             : ` as ${rel.interfaceName} & ${metaType}`;
@@ -242,11 +276,11 @@ function generateRehydrateMethod(data: FrontendTemplateData): string {
       } else {
         const effectiveMany = rel.alias || rel.name;
         const propName = pluralize(toCamelCase(effectiveMany));
-        const relationshipKey = toCamelCase(effectiveMany);
+        const relationshipKey = resolveRelationshipKey(rel);
 
         // Use _readIncludedWithMeta for relationships with fields (edge properties)
         if (rel.fields && rel.fields.length > 0) {
-          const metaType = `{ ${rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ")} }`;
+          const metaType = relMetaName(rel);
           lines.push(
             `    this._${propName} = this._readIncludedWithMeta<${rel.interfaceName}, ${metaType}>(data, "${relationshipKey}", Modules.${rel.name}) as (${rel.interfaceName} & ${metaType})[];`,
           );
@@ -292,16 +326,25 @@ function generateCreateJsonApiMethod(data: FrontendTemplateData): string {
     lines.push(``);
   }
 
-  // Field serialization (excluding inherited)
-  const fieldsToInclude = extendsContent
-    ? fields.filter((f) => !["name", "tldr", "abstract"].includes(f.name))
-    : fields;
+  // Field serialization (excluding inherited and read-only fields).
+  // read-only fields are server-derived: present in rehydrate/getters but never sent back.
+  const fieldsToInclude = (
+    extendsContent ? fields.filter((f) => !["name", "tldr", "abstract"].includes(f.name)) : fields
+  ).filter((f) => !f.readOnly);
 
   fieldsToInclude.forEach((field) => {
     if (field.isContentField) {
       lines.push(
         `    if (data.${field.name} !== undefined) response.data.attributes.${field.name} = JSON.stringify(data.${field.name});`,
       );
+    } else if (field.type === "date") {
+      lines.push(
+        `    if (data.${field.name} !== undefined) response.data.attributes.${field.name} = formatLocalDate(data.${field.name});`,
+      );
+    } else if (field.type === "datetime") {
+      lines.push(
+        `    if (data.${field.name} !== undefined) response.data.attributes.${field.name} = data.${field.name}.toISOString();`,
+      );
     } else {
       lines.push(
         `    if (data.${field.name} !== undefined) response.data.attributes.${field.name} = data.${field.name};`,
@@ -317,7 +360,7 @@ function generateCreateJsonApiMethod(data: FrontendTemplateData): string {
     relationshipsToSerialize.forEach((rel) => {
       const effectiveName = rel.alias || rel.variant || rel.name;
       const payloadKey = rel.single ? `${toCamelCase(effectiveName)}Id` : `${toCamelCase(effectiveName)}Ids`;
-      const relationshipKey = toCamelCase(effectiveName);
+      const relationshipKey = resolveRelationshipKey(rel);
 
       if (rel.single) {
         lines.push(`    if (data.${payloadKey}) {`);
@@ -337,6 +380,23 @@ function generateCreateJsonApiMethod(data: FrontendTemplateData): string {
           lines.push(`        },`);
         }
 
+        lines.push(`      };`);
+        lines.push(`    }`);
+      } else if (rel.fields && rel.fields.length > 0) {
+        // MANY relationship with edge fields: per-item meta resolved from a meta array.
+        const metaProp = `${toCamelCase(effectiveName)}Meta`;
+        lines.push(`    if (data.${payloadKey} !== undefined) {`);
+        lines.push(`      response.data.relationships.${relationshipKey} = {`);
+        lines.push(`        data: data.${payloadKey}.map((id) => {`);
+        lines.push(`          const meta = data.${metaProp}?.find((m) => m.id === id);`);
+        lines.push(`          return {`);
+        lines.push(`            type: Modules.${rel.name}.name,`);
+        lines.push(`            id,`);
+        lines.push(
+          `            ...(meta ? { meta: { ${rel.fields.map((f) => `${f.name}: meta.${f.name}`).join(", ")} } } : {}),`,
+        );
+        lines.push(`          };`);
+        lines.push(`        }),`);
         lines.push(`      };`);
         lines.push(`    }`);
       } else {

package/scripts/generate-web-module/templates/data/service.template.ts

@@ -22,6 +22,7 @@ export function generateServiceTemplate(data: FrontendTemplateData): string {
   const relationshipMethods = generateRelationshipMethods(data);
   const createMethod = generateCreateMethod(data);
   const updateMethod = generateUpdateMethod(data);
+  const patchMethod = generatePatchMethod(data);
   const deleteMethod = generateDeleteMethod(data);
 
   return `${imports}
@@ -36,6 +37,8 @@ ${createMethod}
 
 ${updateMethod}
 
+${patchMethod}
+
 ${deleteMethod}
 }
 `;
@@ -60,10 +63,13 @@ function generateFindOneMethod(data: FrontendTemplateData): string {
   const { names } = data;
 
   return `  static async findOne(params: { id: string }): Promise<${names.pascalCase}Interface> {
+    const endpoint = new EndpointCreator({ endpoint: Modules.${names.pascalCase}, id: params.id });
+    if (Modules.${names.pascalCase}.inclusions?.lists?.fields) endpoint.limitToFields(Modules.${names.pascalCase}.inclusions.lists.fields);
+    if (Modules.${names.pascalCase}.inclusions?.lists?.types) endpoint.limitToType(Modules.${names.pascalCase}.inclusions.lists.types);
     return this.callApi<${names.pascalCase}Interface>({
       type: Modules.${names.pascalCase},
       method: HttpMethod.GET,
-      endpoint: new EndpointCreator({ endpoint: Modules.${names.pascalCase}, id: params.id }).generate(),
+      endpoint: endpoint.generate(),
     });
   }`;
 }
@@ -174,6 +180,22 @@ function generateUpdateMethod(data: FrontendTemplateData): string {
   }`;
 }
 
+/**
+ * Generate patch method
+ */
+function generatePatchMethod(data: FrontendTemplateData): string {
+  const { names } = data;
+
+  return `  static async patch(params: { id: string } & Partial<Omit<${names.pascalCase}Input, "id">>): Promise<${names.pascalCase}Interface> {
+    return this.callApi({
+      type: Modules.${names.pascalCase},
+      method: HttpMethod.PATCH,
+      endpoint: new EndpointCreator({ endpoint: Modules.${names.pascalCase}, id: params.id }).generate(),
+      input: params,
+    });
+  }`;
+}
+
 /**
  * Generate delete method
  */

package/scripts/generate-web-module/templates/index.ts

@@ -20,7 +20,6 @@ export {
   generateSelectorTemplate,
   generateMultiSelectorTemplate,
   generateListTemplate,
-  generateDetailsTemplate,
   generateContentTemplate,
   generateContainerTemplate,
   generateListContainerTemplate,

package/scripts/generate-web-module/templates/module.template.ts

@@ -20,11 +20,21 @@ export function generateModuleTemplate(data: FrontendTemplateData): string {
   const listFieldNames = getListFieldNames(data);
   const listInclusionFields = listFieldNames.map((f) => `\`${f}\``).join(", ");
 
+  // Feature gating (optional)
+  const featureImport = data.featureId ? `import { FeatureIds } from "@/enums/feature.ids";\n` : "";
+  const featureLine = data.featureId ? `    feature: FeatureIds.${data.featureId},\n` : "";
+
+  // Cross-module inclusions for related entities (optional)
+  const relatedInclusionLines = data.relatedInclusions
+    .map((inc) => `          createJsonApiInclusion("${inc.endpoint}", [${inc.fields.map((f) => `\`${f}\``).join(", ")}]),`)
+    .join("\n");
+  const relatedInclusionBlock = relatedInclusionLines ? `\n${relatedInclusionLines}` : "";
+
   return `import { ${names.pascalCase} } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}";
 import { createJsonApiInclusion } from "@carlonicora/nextjs-jsonapi/core";
 import { ModuleFactory } from "@carlonicora/nextjs-jsonapi/core";
 import { ${DEFAULT_MODULE_ICON} } from "lucide-react";
-
+${featureImport}
 export const ${names.pascalCase}Module = (factory: ModuleFactory) =>
   factory({
     pageUrl: "/${names.pluralKebab}",
@@ -32,11 +42,11 @@ export const ${names.pascalCase}Module = (factory: ModuleFactory) =>
     model: ${names.pascalCase},
     moduleId: "${moduleId}",
     icon: ${DEFAULT_MODULE_ICON},
-    inclusions: {
+${featureLine}    inclusions: {
       lists: {
         fields: [
           createJsonApiInclusion("${endpoint}", [${listInclusionFields}]),
-          createJsonApiInclusion("users", [\`name\`, \`avatar\`]),
+          createJsonApiInclusion("users", [\`name\`, \`avatar\`]),${relatedInclusionBlock}
         ],
       },
     },