@se-studio/project-build 1.0.62 → 1.0.64

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @se-studio/project-build
 
+## 1.0.64
+
+### Patch Changes
+
+- Bulk version bump: patch for all packages
+
+## 1.0.63
+
+### Patch Changes
+
+- Bulk version bump: patch for all packages
+
 ## 1.0.62
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/project-build",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "Build tools and management scripts for SE Studio projects",
   "repository": {
     "type": "git",
@@ -59,13 +59,13 @@
     "@biomejs/wasm-nodejs": "^2.3.14",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",
-    "contentful-management": "^11.68.1",
-    "dotenv": "^17.2.3",
+    "contentful-management": "^11.69.1",
+    "dotenv": "^17.2.4",
     "ts-morph": "27.0.2"
   },
   "devDependencies": {
     "@types/chroma-js": "^3.1.2",
-    "@types/node": "^22.19.8",
+    "@types/node": "^22.19.10",
     "contentful": "^11.10.3",
     "typescript": "^5.9.3"
   },

package/skills/se-marketing-sites/create-collection/SKILL.md

@@ -81,13 +81,13 @@ import {
   type CollectionRenderer,
   cn,
   defineCollection,
+  getPreviewFieldProps,
   RtfOrString,
   UnusedChecker,
 } from '@se-studio/core-ui';
 import { SectionLinks } from '@/elements/SectionLinks';
 import { Section } from '@/framework/Section';
 import type { ICollection, IComponent, IContent } from '@/lib/cms';
-import { getPreviewFieldIdProps } from '@/lib/cms-server';
 import { getSizingInformation } from '@/lib/SizingInformation';
 // import MyCollectionClient from './MyCollectionClient'; // If needed
 
@@ -162,7 +162,7 @@ const CoreMyCollection: React.FC<
       <div className="text-center space-y-4">
         {heading && (
           <Element
-            {...getPreviewFieldIdProps(id, 'heading')}
+            {...getPreviewFieldProps(rendererConfig, id, 'heading')}
             className={cn(sizingInformation.h2)}
           >
             {heading}
@@ -170,7 +170,7 @@ const CoreMyCollection: React.FC<
         )}
         {body && (
           <RtfOrString
-            {...getPreviewFieldIdProps(id, 'body')}
+            {...getPreviewFieldProps(rendererConfig, id, 'body')}
             content={body}
             className="rtf-standard"
             rendererConfig={rendererConfig}
@@ -197,6 +197,7 @@ const CoreMyCollection: React.FC<
       {links && (
         <SectionLinks
           links={links}
+          rendererConfig={rendererConfig}
           trackingLocation={cmsLabel}
           analyticsContext={contentContext.analyticsContext}
           className="justify-center"
@@ -215,7 +216,11 @@ const MyCollection: React.FC<
   }
 > = ({ information, ...rest }) => {
   return (
-    <Section componentName={information.collectionType} information={information}>
+    <Section
+      componentName={information.collectionType}
+      information={information}
+      previewHelpers={rest.rendererConfig?.previewHelpers}
+    >
       <CoreMyCollection
         {...rest}
         positionClassName="col-span-full"
@@ -271,13 +276,16 @@ export const MyCollectionRegistration = defineCollection({
 2.  **Use `defineCollection`**:
     *   Instead of `defineComponent`.
     *   Pass both `usedFields` and `cardUsedFields`.
-3.  **Handle `contents`**:
+3.  **Preview helpers**:
+    *   Use `getPreviewFieldProps(rendererConfig, id, fieldId)` from `@se-studio/core-ui` for CMS preview (do not import from cms-server – avoids circular dependency). For responsive visuals use `getPreviewResponsiveVisualFieldProps(rendererConfig, id, 'visual', 'mobileVisual')`.
+    *   For collections that fetch data: use `rendererConfig?.fetchHelpers?.getRelatedArticles?.(information, contentContext, count)` instead of importing from cms-server.
+4.  **Handle `contents`**:
     *   Check `if (contents && contents.length > 0)`.
     *   Filter with `contents.filter(isComponent)`.
     *   Map over the result to render items.
-4.  **Isolate Client Logic**:
+5.  **Isolate Client Logic**:
     *   **ENSURE SERVER COMPONENT** for the main file.
     *   If a carousel/slider/filter is needed, move that logic to `[Name]Client.tsx`.
     *   Pass server-rendered cards as `children` to the client wrapper.
-5.  **Register**:
+6.  **Register**:
     *   Add to `collectionRegistrations` in `src/lib/registrations.ts`.

package/skills/se-marketing-sites/create-component/SKILL.md

@@ -72,13 +72,13 @@ import {
   convertText,
   cn,
   defineComponent,
+  getPreviewFieldProps,
   RtfOrString,
   UnusedChecker,
 } from '@se-studio/core-ui';
 import { SectionLinks } from '@/elements/SectionLinks';
 import { Section } from '@/framework/Section';
 import type { IComponent, IContent } from '@/lib/cms';
-import { getPreviewFieldIdProps } from '@/lib/cms-server';
 import { getSizingInformation } from '@/lib/SizingInformation';
 // If interactivity is needed:
 // import MyNewComponentClient from './MyNewComponentClient';
@@ -123,7 +123,7 @@ export const CoreMyNewComponent: React.FC<
     <div className={cn('space-y-6', positionClassName)}>
       {heading && (
         <Element
-          {...getPreviewFieldIdProps(id, 'heading')}
+          {...getPreviewFieldProps(rendererConfig, id, 'heading')}
           className={cn(sizingInformation.h1)}
         >
           {convertText(heading)}
@@ -131,7 +131,7 @@ export const CoreMyNewComponent: React.FC<
       )}
       {body && (
         <RtfOrString
-          {...getPreviewFieldIdProps(id, 'body')}
+          {...getPreviewFieldProps(rendererConfig, id, 'body')}
           content={body}
           className={cn('rtf-standard')}
           rendererConfig={rendererConfig}
@@ -146,6 +146,7 @@ export const CoreMyNewComponent: React.FC<
       {links && (
         <SectionLinks
           links={links}
+          rendererConfig={rendererConfig}
           trackingLocation={cmsLabel}
           analyticsContext={contentContext?.analyticsContext}
         />
@@ -164,7 +165,11 @@ const MyNewComponent: React.FC<
     }
 > = ({ information, componentType, ...rest }) => {
   return (
-    <Section componentName={componentType} information={information}>
+    <Section
+      componentName={componentType}
+      information={information}
+      previewHelpers={rest.rendererConfig?.previewHelpers}
+    >
       <CoreMyNewComponent
         {...rest}
         positionClassName="col-span-full laptop:col-start-2 laptop:col-span-10"
@@ -224,7 +229,7 @@ export const MyNewRegistration = defineComponent({
     *   Check field existence (`field &&`).
     *   Use `convertText()` for strings.
     *   Use `<RtfOrString>` for rich text.
-    *   Apply `getPreviewFieldIdProps()` for CMS preview.
+    *   Use `getPreviewFieldProps(rendererConfig, id, fieldId)` from `@se-studio/core-ui` for CMS preview (do not import from cms-server – avoids circular dependency). For responsive visuals use `getPreviewResponsiveVisualFieldProps(rendererConfig, id, 'visual', 'mobileVisual')`.
 4.  **Handle Interactivity (If Needed)**:
     *   Create separate `[Name]Client.tsx` or `[Name]Animator.tsx`.
     *   Add `'use client'` to that file only.

package/skills/se-marketing-sites/lib-cms-structure/SKILL.md

@@ -61,6 +61,20 @@ registrations.ts  →  cms.ts  →  builds maps  →  cms-server.ts
 
 Add new components/collections in `registrations.ts`. The `cms.ts` imports from it and builds the maps used by `cms-server.ts`.
 
+## Circular Dependency: Do Not Import cms-server in Components/Collections
+
+Components and collections in the registration chain (imported by `registrations.ts`) must **not** import from `cms-server` directly. Doing so creates a circular dependency (cms-server → cms → registrations → components → cms-server) that causes TDZ errors during RSC serialization.
+
+**Instead**, use the helpers from `@se-studio/core-ui`:
+
+- `getPreviewFieldProps(rendererConfig, id, fieldId)` – for field preview props
+- `getPreviewResponsiveVisualFieldProps(rendererConfig, id, visualFieldId, mobileVisualFieldId)` – for responsive visuals
+- `rendererConfig.previewHelpers?.getPreviewParentProps?.(information)`
+- `rendererConfig.fetchHelpers?.getAllArticleLinks?.()`
+- `rendererConfig.fetchHelpers?.getRelatedArticles?.(information, contentContext, count)`
+
+These are passed via `projectRendererConfig` in `cms-server.ts`. `Section` and `SectionLinks` accept `previewHelpers` / `rendererConfig` props. See `docs/SERVER_CLIENT_BOUNDARIES.md`.
+
 ## See Also
 
 - **register-cms-features** – Adding components and collections