[FRONT COMPONENTS] Move to twenty-sdk (#17587)

Move front components from twenty-shared to twenty-sdk

.github/workflows/ci-front.yaml

@@ -27,6 +27,7 @@ jobs:
         packages/twenty-front/**
         packages/twenty-ui/**
         packages/twenty-shared/**
+        packages/twenty-sdk/**
   changed-files-check-e2e:
     uses: ./.github/workflows/changed-files.yaml
     with:
@@ -85,6 +86,7 @@ jobs:
         run: |
           npx nx build twenty-shared
           npx nx build twenty-ui
+          npx nx build twenty-sdk
       - name: Install Playwright
         run: |
           cd packages/twenty-front

packages/twenty-front/package.json

@@ -112,6 +112,7 @@
     "recoil": "^0.7.7",
     "remark-gfm": "^4.0.1",
     "transliteration": "^2.3.5",
+    "twenty-sdk": "workspace:*",
     "twenty-shared": "workspace:*",
     "twenty-ui": "workspace:*",
     "use-debounce": "^10.0.0"

packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx

@@ -1,8 +1,15 @@
+import { Suspense, lazy } from 'react';
+
 import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState';
-import { FrontComponentRenderer } from '@/front-components/components/FrontComponentRenderer';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { isDefined } from 'twenty-shared/utils';
 
+const FrontComponentRenderer = lazy(() =>
+  import('@/front-components/components/FrontComponentRenderer').then(
+    (module) => ({ default: module.FrontComponentRenderer }),
+  ),
+);
+
 export const CommandMenuFrontComponentPage = () => {
   const viewableFrontComponentId = useRecoilComponentValue(
     viewableFrontComponentIdComponentState,
@@ -12,5 +19,9 @@ export const CommandMenuFrontComponentPage = () => {
     return null;
   }
 
-  return <FrontComponentRenderer frontComponentId={viewableFrontComponentId} />;
+  return (
+    <Suspense fallback={null}>
+      <FrontComponentRenderer frontComponentId={viewableFrontComponentId} />
+    </Suspense>
+  );
 };

packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx

@@ -5,7 +5,7 @@ import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 
 import { getMockFrontComponentUrl } from '@/front-components/utils/mockFrontComponent';
-import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-shared/front-component';
+import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component';
 
 type FrontComponentRendererProps = {
   frontComponentId: string;

packages/twenty-front/src/modules/front-components/utils/mockFrontComponent.ts

@@ -3,7 +3,6 @@ import { isDefined } from 'twenty-shared/utils';
 // eslint-disable-next-line
 const mockFrontComponentCode = `
 var r=globalThis.React.useState,s=globalThis.React.useEffect;var n=globalThis.jsx,o=globalThis.jsxs,g=globalThis.React.Fragment;var e=globalThis.RemoteComponents,x=()=>{let[a,l]=r(0),[m,p]=r(0);return s(()=>{let t=setInterval(()=>{p(i=>i+1)},1e3);return()=>clearInterval(t)},[]),o(e.HtmlDiv,{style:{padding:"20px",fontFamily:"Arial, sans-serif",maxWidth:"400px",margin:"0 auto",display:"flex",flexDirection:"column",alignItems:"center"},children:[n(e.HtmlH1,{style:{color:"#333",marginBottom:"20px",fontSize:"24px"},children:"Test Component"}),o(e.HtmlP,{style:{fontSize:"18px",marginBottom:"10px",color:"#666"},children:["Count: ",a]}),o(e.HtmlP,{style:{fontSize:"18px",marginBottom:"20px",color:"#666"},children:["Timer: ",m,"s"]}),n(e.HtmlButton,{onClick:()=>l(a+1),style:{padding:"10px 20px",fontSize:"16px",backgroundColor:"#007bff",color:"white",border:"none",borderRadius:"5px",cursor:"pointer",transition:"all 0.3s ease",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"},onMouseEnter:t=>{t.currentTarget.style.backgroundColor="#0056b3",t.currentTarget.style.transform="translateY(-2px)",t.currentTarget.style.boxShadow="0 4px 8px rgba(0, 0, 0, 0.3)"},onMouseLeave:t=>{t.currentTarget.style.backgroundColor="#007bff",t.currentTarget.style.transform="translateY(0)",t.currentTarget.style.boxShadow="0 2px 4px rgba(0, 0, 0, 0.2)"},children:"Increment"})]})},b=globalThis.jsx(x,{});export{b as default};
-//# sourceMappingURL=test-component.front-component.mjs.map
 `;
 
 let cachedMockBlobUrl: string | null = null;

packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx

@@ -1,10 +1,17 @@
+import { Suspense, lazy } from 'react';
+
 import { isDefined } from 'twenty-shared/utils';
 
 import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
-import { FrontComponentRenderer } from '@/front-components/components/FrontComponentRenderer';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { PageLayoutWidgetNoDataDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay';
 
+const FrontComponentRenderer = lazy(() =>
+  import('@/front-components/components/FrontComponentRenderer').then(
+    (module) => ({ default: module.FrontComponentRenderer }),
+  ),
+);
+
 type FrontComponentWidgetRendererProps = {
   widget: PageLayoutWidget;
 };
@@ -23,5 +30,9 @@ export const FrontComponentWidgetRenderer = ({
 
   const frontComponentId = configuration.frontComponentId;
 
-  return <FrontComponentRenderer frontComponentId={frontComponentId} />;
+  return (
+    <Suspense fallback={null}>
+      <FrontComponentRenderer frontComponentId={frontComponentId} />
+    </Suspense>
+  );
 };

packages/twenty-sdk/package.json

@@ -8,7 +8,9 @@
     "twenty": "dist/cli.cjs"
   },
   "files": [
-    "dist"
+    "dist",
+    "front-component",
+    "front-component-constants"
   ],
   "scripts": {
     "build": "npx rimraf dist && npx vite build"
@@ -26,11 +28,24 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
+    },
+    "./front-component": {
+      "types": "./dist/front-component/index.d.ts",
+      "import": "./dist/front-component.mjs",
+      "require": "./dist/front-component.cjs"
+    },
+    "./front-component-constants": {
+      "types": "./dist/front-component-constants/index.d.ts",
+      "import": "./dist/front-component-constants.mjs",
+      "require": "./dist/front-component-constants.cjs"
     }
   },
   "license": "AGPL-3.0",
   "dependencies": {
     "@genql/cli": "^3.0.3",
+    "@quilted/threads": "^4.0.1",
+    "@remote-dom/core": "^1.10.1",
+    "@remote-dom/react": "^1.2.2",
     "@sniptt/guards": "^0.2.0",
     "archiver": "^7.0.1",
     "axios": "^1.6.0",
@@ -47,19 +62,22 @@
     "inquirer": "^10.0.0",
     "jsonc-parser": "^3.2.0",
     "lodash.camelcase": "^4.3.0",
-    "react": "^19.0.0",
+    "react": "^18.0.0",
     "typescript": "^5.9.2",
     "uuid": "^13.0.0",
     "vite": "^7.0.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^4.2.1",
+    "zod": "^4.1.11"
   },
   "devDependencies": {
+    "@prettier/sync": "^0.5.2",
     "@types/archiver": "^6.0.0",
     "@types/fs-extra": "^11.0.0",
     "@types/inquirer": "^9.0.0",
     "@types/lodash.camelcase": "^4.3.7",
     "@types/node": "^24.0.0",
-    "@types/react": "^19.0.2",
+    "@types/react": "^18",
+    "ts-morph": "^25.0.0",
     "tsx": "^4.7.0",
     "vite-plugin-dts": "^4.5.4",
     "wait-on": "^7.2.0"
@@ -69,6 +87,13 @@
     "yarn": "^4.0.2"
   },
   "typesVersions": {
-    "*": {}
+    "*": {
+      "front-component": [
+        "dist/front-component/index.d.ts"
+      ],
+      "front-component-constants": [
+        "dist/front-component-constants/index.d.ts"
+      ]
+    }
   }
 }

packages/twenty-sdk/project.json

@@ -4,7 +4,8 @@
   "sourceRoot": "packages/twenty-sdk/src",
   "projectType": "library",
   "tags": [
-    "scope:sdk"
+    "scope:sdk",
+    "scope:shared"
   ],
   "targets": {
     "build": {
@@ -13,7 +14,11 @@
         "^build"
       ],
       "outputs": [
-        "{projectRoot}/dist"
+        "{projectRoot}/dist",
+        "{projectRoot}/front-component/package.json",
+        "{projectRoot}/front-component/dist",
+        "{projectRoot}/front-component-constants/package.json",
+        "{projectRoot}/front-component-constants/dist"
       ]
     },
     "dev": {

packages/twenty-sdk/scripts/remote-dom/generators/host-registry.generator.ts

@@ -79,7 +79,11 @@ const generateRegistryMap = (components: ComponentSchema[]): string => {
     )
     .join('\n');
 
-  return `export const componentRegistry = new Map<string, ReturnType<typeof createRemoteComponentRenderer>>([
+  return `type ComponentRegistryValue =
+  | ReturnType<typeof createRemoteComponentRenderer>
+  | typeof RemoteFragmentRenderer;
+
+export const componentRegistry: Map<string, ComponentRegistryValue> = new Map([
 ${entries}
   ['${CUSTOM_ELEMENT_NAMES.FRAGMENT}', RemoteFragmentRenderer],
 ]);`;

packages/twenty-sdk/src/cli/utilities/build/common/front-component-build/utils/replace-html-tags-with-remote-components.ts

@@ -1,7 +1,7 @@
-import { HTML_TAG_TO_REMOTE_COMPONENT } from 'twenty-shared/front-component-constants';
-
 import { isDefined } from 'twenty-shared/utils';
 
+import { HTML_TAG_TO_REMOTE_COMPONENT } from '@/front-component-constants';
+
 const REMOTE_COMPONENTS_GLOBAL_NAMESPACE = 'RemoteComponents';
 
 const buildHtmlTagToRemoteComponentPattern = (): RegExp => {

packages/twenty-sdk/src/cli/utilities/build/manifest/manifest-build.ts

@@ -1,6 +1,3 @@
-import { basename, extname, relative, sep } from 'path';
-import { readFile } from 'fs-extra';
-import { glob } from 'fast-glob';
 import {
   type EntityFilePaths,
   extractDefineEntity,
@@ -8,23 +5,26 @@ import {
   TARGET_FUNCTION_TO_ENTITY_KEY_MAPPING,
 } from '@/cli/utilities/build/manifest/manifest-extract-config';
 import { extractManifestFromFile } from '@/cli/utilities/build/manifest/manifest-extract-config-from-file';
+import { findPathFile } from '@/cli/utilities/file/file-find';
+import { parseJsoncFile } from '@/cli/utilities/file/file-jsonc';
+import { type FrontComponentConfig, type LogicFunctionConfig } from '@/sdk';
+import { glob } from 'fast-glob';
+import * as fs from 'fs-extra';
+import { readFile } from 'fs-extra';
+import { basename, extname, relative, sep } from 'path';
 import {
   type ApplicationManifest,
-  type Manifest,
   type AssetManifest,
   ASSETS_DIR,
   type FieldManifest,
   type FrontComponentManifest,
   type LogicFunctionManifest,
+  type Manifest,
   type ObjectManifest,
   type RoleManifest,
 } from 'twenty-shared/application';
-import { parseJsoncFile } from '@/cli/utilities/file/file-jsonc';
-import { findPathFile } from '@/cli/utilities/file/file-find';
+import { type Sources } from 'twenty-shared/types';
 import { assertUnreachable } from 'twenty-shared/utils';
-import { type FrontComponentConfig, type LogicFunctionConfig } from '@/sdk';
-import type { Sources } from 'twenty-shared/types';
-import * as fs from 'fs-extra';
 
 const loadSources = async (appPath: string): Promise<string[]> => {
   return await glob(['**/*.ts', '**/*.tsx'], {

packages/twenty-sdk/src/front-component/host/components/FrontComponentRenderer.tsx

@@ -3,7 +3,7 @@ import {
   RemoteRootRenderer,
 } from '@remote-dom/react/host';
 import React, { useState } from 'react';
-import { isDefined } from '../../../utils/validation/isDefined';
+import { isDefined } from 'twenty-shared/utils';
 import { FrontComponentWorkerEffect } from '../../remote/components/FrontComponentWorkerEffect';
 import { componentRegistry } from '../generated/host-component-registry';
 

packages/twenty-sdk/src/front-component/host/generated/host-component-registry.ts

@@ -345,10 +345,11 @@ const HtmlHrWrapper = ({
 }: { children?: React.ReactNode } & Record<string, unknown>) => {
   return React.createElement('hr', filterProps(props), children);
 };
-export const componentRegistry = new Map<
-  string,
-  ReturnType<typeof createRemoteComponentRenderer>
->([
+type ComponentRegistryValue =
+  | ReturnType<typeof createRemoteComponentRenderer>
+  | typeof RemoteFragmentRenderer;
+
+export const componentRegistry: Map<string, ComponentRegistryValue> = new Map([
   ['html-div', createRemoteComponentRenderer(HtmlDivWrapper)],
   ['html-span', createRemoteComponentRenderer(HtmlSpanWrapper)],
   ['html-section', createRemoteComponentRenderer(HtmlSectionWrapper)],

packages/twenty-sdk/src/front-component/remote/mock/mock-front-component.ts

@@ -1,7 +1,13 @@
+/* eslint-disable */
 //@ts-nocheck
 import React, { useEffect, useState } from 'react';
 
-import { HtmlButton, HtmlDiv, HtmlH3, HtmlP } from '../generated/remote-components';
+import {
+  HtmlButton,
+  HtmlDiv,
+  HtmlH3,
+  HtmlP,
+} from '../generated/remote-components';
 
 const FrontComponent = () => {
   const [clickCount, setClickCount] = useState(0);

packages/twenty-sdk/tsconfig.json

@@ -25,5 +25,11 @@
     "vite.config.ts",
     "scripts/generateBarrels.ts",
     "jest.config.mjs"
+  ],
+  "exclude": [
+    "src/front-component/remote/mock/**/*",
+    "src/front-component/host/generated/host-component-registry.ts",
+    "src/front-component/remote/generated/remote-components.ts",
+    "src/front-component/remote/generated/remote-elements.ts"
   ]
 }

packages/twenty-sdk/vite.config.ts

@@ -52,6 +52,11 @@ export default defineConfig(() => {
   return {
     root: __dirname,
     cacheDir: '../../node_modules/.vite/packages/twenty-sdk',
+    resolve: {
+      alias: {
+        '@/': path.resolve(__dirname, 'src') + '/',
+      },
+    },
     plugins: [
       tsconfigPaths({
         root: __dirname,
@@ -81,6 +86,23 @@ export default defineConfig(() => {
         },
       }),
     ],
+    worker: {
+      format: 'iife',
+      rollupOptions: {
+        output: {
+          inlineDynamicImports: true,
+        },
+      },
+      plugins: () => [
+        {
+          name: 'define-process-env',
+          transform: (code: string) =>
+            code
+              .replace(/process\.env\.NODE_ENV/g, JSON.stringify('production'))
+              .replace(/process\.env/g, '{}'),
+        },
+      ],
+    },
     build: {
       outDir: 'dist',
       lib: { entry: entries, name: 'twenty-sdk' },

packages/twenty-shared/package.json

@@ -18,28 +18,20 @@
     "@prettier/sync": "^0.5.2",
     "@types/babel__preset-env": "^7",
     "@types/handlebars": "^4.1.0",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
     "babel-plugin-module-resolver": "^5.0.2",
     "glob": "^11.1.0",
-    "ts-morph": "^25.0.0",
     "tsx": "^4.19.3",
     "vite": "^7.0.0",
     "vite-plugin-dts": "3.8.1",
     "vite-tsconfig-paths": "^4.2.1"
   },
   "dependencies": {
-    "@quilted/threads": "^4.0.1",
-    "@remote-dom/core": "^1.10.1",
-    "@remote-dom/react": "^1.2.2",
     "@sniptt/guards": "^0.2.0",
     "class-validator": "^0.14.0",
     "handlebars": "^4.7.8",
     "libphonenumber-js": "^1.10.26",
     "lodash.camelcase": "^4.3.0",
     "qs": "^6.11.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "react-router-dom": "^6.4.4",
     "transliteration": "^2.3.5",
     "zod": "^4.1.11"
@@ -70,16 +62,6 @@
       "import": "./dist/database-events.mjs",
       "require": "./dist/database-events.cjs"
     },
-    "./front-component": {
-      "types": "./dist/front-component/index.d.ts",
-      "import": "./dist/front-component.mjs",
-      "require": "./dist/front-component.cjs"
-    },
-    "./front-component-constants": {
-      "types": "./dist/front-component-constants/index.d.ts",
-      "import": "./dist/front-component-constants.mjs",
-      "require": "./dist/front-component-constants.cjs"
-    },
     "./metadata": {
       "types": "./dist/metadata/index.d.ts",
       "import": "./dist/metadata.mjs",
@@ -122,8 +104,6 @@
     "application",
     "constants",
     "database-events",
-    "front-component",
-    "front-component-constants",
     "metadata",
     "testing",
     "translations",
@@ -146,12 +126,6 @@
       "database-events": [
         "dist/database-events/index.d.ts"
       ],
-      "front-component": [
-        "dist/front-component/index.d.ts"
-      ],
-      "front-component-constants": [
-        "dist/front-component-constants/index.d.ts"
-      ],
       "metadata": [
         "dist/metadata/index.d.ts"
       ],

packages/twenty-shared/project.json

@@ -22,10 +22,6 @@
         "{projectRoot}/constants/dist",
         "{projectRoot}/database-events/package.json",
         "{projectRoot}/database-events/dist",
-        "{projectRoot}/front-component/package.json",
-        "{projectRoot}/front-component/dist",
-        "{projectRoot}/front-component-constants/package.json",
-        "{projectRoot}/front-component-constants/dist",
         "{projectRoot}/metadata/package.json",
         "{projectRoot}/metadata/dist",
         "{projectRoot}/testing/package.json",

packages/twenty-shared/src/application/applicationType.ts

@@ -1,5 +1,5 @@
-import { type ApplicationVariables } from '@/sdk';
-import { type SyncableEntityOptions } from '@/application/syncableEntityOptionsType';
+import { type ApplicationVariables } from './applicationVariablesType';
+import { type SyncableEntityOptions } from './syncableEntityOptionsType';
 
 export type ApplicationMarketplaceData = {
   author?: string;

packages/twenty-shared/src/application/manifestType.ts

@@ -1,14 +1,12 @@
-import {
-  type PackageJson,
-  type ApplicationManifest,
-  type ObjectManifest,
-  type LogicFunctionManifest,
-  type AssetManifest,
-  type FrontComponentManifest,
-  type RoleManifest,
-  type FieldManifest,
-} from '@/sdk';
 import { type Sources } from '@/types';
+import { type ApplicationManifest } from './applicationType';
+import { type AssetManifest } from './assetManifestType';
+import { type FieldManifest } from './fieldManifestType';
+import { type FrontComponentManifest } from './frontComponentManifestType';
+import { type LogicFunctionManifest } from './logicFunctionManifestType';
+import { type ObjectManifest } from './objectManifestType';
+import { type PackageJson } from './packageJsonType';
+import { type RoleManifest } from './roleManifestType';
 
 export type Manifest = {
   application: ApplicationManifest;

packages/twenty-shared/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
     "allowJs": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
@@ -17,15 +16,8 @@
   },
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx",
     "scripts/**/*.ts",
     "**/__mocks__/**/*",
     "jest.config.mjs"
-  ],
-  "exclude": [
-    "src/front-component/remote/mock/**/*",
-    "src/front-component/host/generated/host-component-registry.ts",
-    "src/front-component/remote/generated/remote-components.ts",
-    "src/front-component/remote/generated/remote-elements.ts"
   ]
 }

packages/twenty-shared/tsconfig.lib.json

@@ -7,12 +7,10 @@
     "outDir": "../../.cache/tsc",
     "types": ["node"]
   },
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+  "include": ["src/**/*.js", "src/**/*.ts"],
   "exclude": [
     "**/*.spec.ts",
     "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
     "**/__mocks__/**/*"
   ]
 }

packages/twenty-shared/vite.config.ts

@@ -52,24 +52,6 @@ export default defineConfig(() => {
       }),
       dts({ entryRoot: './src', tsconfigPath: tsConfigPath }),
     ],
-    worker: {
-      format: 'iife',
-      rollupOptions: {
-        output: {
-          inlineDynamicImports: true,
-        },
-      },
-      plugins: () => [
-        {
-          name: 'define-process-env',
-          transform(code: string) {
-            return code
-              .replace(/process\.env\.NODE_ENV/g, JSON.stringify('production'))
-              .replace(/process\.env/g, '{}');
-          },
-        },
-      ],
-    },
     build: {
       outDir: 'dist',
       lib: { entry: entries, name: 'twenty-shared' },

yarn.lock

@@ -24887,15 +24887,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18":
-  version: 18.3.7
-  resolution: "@types/react-dom@npm:18.3.7"
-  peerDependencies:
-    "@types/react": ^18.0.0
-  checksum: 10c0/8bd309e2c3d1604a28a736a24f96cbadf6c05d5288cfef8883b74f4054c961b6b3a5e997fd5686e492be903c8f3380dba5ec017eff3906b1256529cd2d39603e
-  languageName: node
-  linkType: hard
-
 "@types/react-dom@npm:^18.2.15":
   version: 18.3.0
   resolution: "@types/react-dom@npm:18.3.0"
@@ -24952,15 +24943,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^19.0.2":
-  version: 19.2.8
-  resolution: "@types/react@npm:19.2.8"
-  dependencies:
-    csstype: "npm:^3.2.2"
-  checksum: 10c0/832834998c4ee971fca72ecf1eb95dc924ad3931a2112c687a4dae498aabd115c5fa4db09186853e34a646226b0223808c8f867df03d17601168f9cf119448de
-  languageName: node
-  linkType: hard
-
 "@types/readdir-glob@npm:*":
   version: 1.1.5
   resolution: "@types/readdir-glob@npm:1.1.5"
@@ -51456,7 +51438,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:18.3.1, react-dom@npm:^18.0.0, react-dom@npm:^18.2.0":
+"react-dom@npm:18.3.1, react-dom@npm:^18.2.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -52022,13 +52004,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^19.0.0":
-  version: 19.2.4
-  resolution: "react@npm:19.2.4"
-  checksum: 10c0/cd2c9ff67a720799cc3b38a516009986f7fc4cb8d3e15716c6211cf098d1357ee3e348ab05ad0600042bbb0fd888530ba92e329198c92eafa0994f5213396596
-  languageName: node
-  linkType: hard
-
 "react@npm:^19.1.0":
   version: 19.2.0
   resolution: "react@npm:19.2.0"
@@ -57656,6 +57631,7 @@ __metadata:
     remark-gfm: "npm:^4.0.1"
     rollup-plugin-visualizer: "npm:^5.14.0"
     transliteration: "npm:^2.3.5"
+    twenty-sdk: "workspace:*"
     twenty-shared: "workspace:*"
     twenty-ui: "workspace:*"
     use-debounce: "npm:^10.0.0"
@@ -57665,18 +57641,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"twenty-sdk@workspace:packages/twenty-sdk":
+"twenty-sdk@workspace:*, twenty-sdk@workspace:packages/twenty-sdk":
   version: 0.0.0-use.local
   resolution: "twenty-sdk@workspace:packages/twenty-sdk"
   dependencies:
     "@genql/cli": "npm:^3.0.3"
+    "@prettier/sync": "npm:^0.5.2"
+    "@quilted/threads": "npm:^4.0.1"
+    "@remote-dom/core": "npm:^1.10.1"
+    "@remote-dom/react": "npm:^1.2.2"
     "@sniptt/guards": "npm:^0.2.0"
     "@types/archiver": "npm:^6.0.0"
     "@types/fs-extra": "npm:^11.0.0"
     "@types/inquirer": "npm:^9.0.0"
     "@types/lodash.camelcase": "npm:^4.3.7"
     "@types/node": "npm:^24.0.0"
-    "@types/react": "npm:^19.0.2"
+    "@types/react": "npm:^18"
     archiver: "npm:^7.0.1"
     axios: "npm:^1.6.0"
     chalk: "npm:^5.3.0"
@@ -57692,7 +57672,8 @@ __metadata:
     inquirer: "npm:^10.0.0"
     jsonc-parser: "npm:^3.2.0"
     lodash.camelcase: "npm:^4.3.0"
-    react: "npm:^19.0.0"
+    react: "npm:^18.0.0"
+    ts-morph: "npm:^25.0.0"
     tsx: "npm:^4.7.0"
     typescript: "npm:^5.9.2"
     uuid: "npm:^13.0.0"
@@ -57700,6 +57681,7 @@ __metadata:
     vite-plugin-dts: "npm:^4.5.4"
     vite-tsconfig-paths: "npm:^4.2.1"
     wait-on: "npm:^7.2.0"
+    zod: "npm:^4.1.11"
   bin:
     twenty: dist/cli.cjs
   languageName: unknown
@@ -57922,14 +57904,9 @@ __metadata:
     "@babel/preset-env": "npm:^7.26.9"
     "@lingui/core": "npm:^5.1.2"
     "@prettier/sync": "npm:^0.5.2"
-    "@quilted/threads": "npm:^4.0.1"
-    "@remote-dom/core": "npm:^1.10.1"
-    "@remote-dom/react": "npm:^1.2.2"
     "@sniptt/guards": "npm:^0.2.0"
     "@types/babel__preset-env": "npm:^7"
     "@types/handlebars": "npm:^4.1.0"
-    "@types/react": "npm:^18"
-    "@types/react-dom": "npm:^18"
     babel-plugin-module-resolver: "npm:^5.0.2"
     class-validator: "npm:^0.14.0"
     glob: "npm:^11.1.0"
@@ -57937,11 +57914,8 @@ __metadata:
     libphonenumber-js: "npm:^1.10.26"
     lodash.camelcase: "npm:^4.3.0"
     qs: "npm:^6.11.2"
-    react: "npm:^18.0.0"
-    react-dom: "npm:^18.0.0"
     react-router-dom: "npm:^6.4.4"
     transliteration: "npm:^2.3.5"
-    ts-morph: "npm:^25.0.0"
     tsx: "npm:^4.19.3"
     vite: "npm:^7.0.0"
     vite-plugin-dts: "npm:3.8.1"