Charles BochetandGitHub
563acc3f57
Follow-up to #20525, picks up the clipboard + mouse/pointer events asks from the "Allow to copy to clipboard in front-component" Slack thread. `navigator.geolocation` and `getBoundingClientRect` are intentionally out of scope until we have a permission model. ### `copyToClipboard` host API New SDK function `copyToClipboard` (in `twenty-sdk/front-component`) that goes through the host bridge to `useCopyToClipboard` in `twenty-front`: ```ts import { copyToClipboard } from 'twenty-sdk/front-component'; await copyToClipboard('hello'); ``` Host-side hardening (front-component code is untrusted): - Drops anything that isn't a non-empty string - Caps payload at 64KB - Throttles to 1 call/sec per front-component instance - Snackbar shows a truncated preview so the user can spot a mismatch between the affordance they clicked and what actually got copied ### `mousemove` and pointer events Added to `COMMON_HTML_EVENTS` (and the React mapping) so they fire on every HTML tag the renderer ships: `mousemove`, `pointerdown/up/move`, `pointerover/out/enter/leave/cancel`. Generator rerun for `remote-elements.ts` and `remote-components.ts`. `SerializedEventData` now also forwards pointer geometry: `pointerId`, `pointerType`, `pressure`, `tangentialPressure`, `tiltX/Y`, `twist`, `width/height`, `isPrimary`. Existing positional fields are unchanged. ### Coverage - New Storybook stories: `HostApi/CopyToClipboard` and `HtmlTag/Grouping/Div/Events::PointerMove` - `useFrontComponentExecutionContext` unit tests cover the API call, preview truncation, type guard, length cap, and rate limit - Renderer Storybook suite 227 → 229, prebuild bundle count 219 → 221
Twenty SDK
A CLI and SDK to develop, build, and publish applications that extend Twenty CRM.
Quick start
The recommended way to start is with create-twenty-app:
npx create-twenty-app@latest my-twenty-app
cd my-twenty-app
yarn twenty dev
Documentation
Full documentation is available at docs.twenty.com/developers/extend/apps:
- Getting Started — scaffolding, local server, authentication, dev mode
- Building Apps — entity definitions, API clients, testing, CLI reference
- Publishing — deploy, npm publish, marketplace
Manual installation
If you are adding twenty-sdk to an existing project instead of using create-twenty-app:
yarn add twenty-sdk twenty-client-sdk
Then add a twenty script to your package.json:
{
"scripts": {
"twenty": "twenty"
}
}
Run yarn twenty help to see all available commands.
Configuration
The CLI stores credentials per remote in ~/.twenty/config.json. Run yarn twenty remote:add to configure a remote, or yarn twenty remote:list to see existing ones.
Troubleshooting
- Auth errors: run
yarn twenty remote:addto re-authenticate. - Typings out of date: restart
yarn twenty devto refresh the client and types. - Not seeing changes in dev: make sure dev mode is running (
yarn twenty dev).
Contributing
Development setup
git clone https://github.com/twentyhq/twenty.git
cd twenty
yarn install
Development mode
npx nx run twenty-sdk:dev
Production build
npx nx run twenty-sdk:build
Running the CLI locally
npx nx run twenty-sdk:start -- <command>