Workflow builder starter kit (tldraw#6412)

Adds a workflow builder template. See the README for more information.

### Change type

- [x] `other`

### Release notes

### API Changes

- `TldrawUiToolbar` now accepts an optional `orientation` prop, which
can be either horizontal or vertical. It's horizontal by default.

---------

Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
Co-authored-by: SergioRiquelmeSanchez <sergioriquelmesanchez@gmail.com>

Author: 3 people

apps/analytics/package.json

@@ -12,7 +12,7 @@
 	"dependencies": {
 		"js-cookie": "^3.0.5",
 		"posthog-js": "^1.248.1",
-		"radix-ui": "^1.3.4",
+		"radix-ui": "^1.4.2",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-ga4": "^2.1.0"

apps/docs/package.json

@@ -72,7 +72,7 @@
 		"next-themes": "^0.3.0",
 		"openai": "^4.96.0",
 		"query-string": "^9.1.1",
-		"radix-ui": "^1.3.4",
+		"radix-ui": "^1.4.2",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-instantsearch": "^7.15.1",

apps/dotcom/client/package.json

@@ -45,7 +45,7 @@
 		"lodash.pick": "^4.4.0",
 		"posthog-js": "^1.248.1",
 		"qrcode": "^1.5.4",
-		"radix-ui": "^1.3.4",
+		"radix-ui": "^1.4.2",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-ga4": "^2.1.0",

apps/dotcom/client/src/tla/utils/i18n.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-restricted-imports */
-
+import { FormatXMLElementFn } from 'intl-messageformat'
+import { ComponentPropsWithoutRef } from 'react'
 import {
 	FormattedMessage,
 	IntlConfig,
@@ -12,9 +13,6 @@ import {
 	useIntl,
 } from 'react-intl'
 
-import { FormatXMLElementFn } from 'intl-messageformat'
-import { ComponentPropsWithoutRef } from 'react'
-
 // Re-export everything and override below what we want to override.
 // eslint-disable-next-line
 export * from 'react-intl'

apps/examples/package.json

@@ -54,7 +54,7 @@
 		"lodash": "^4.17.21",
 		"pdf-lib": "^1.17.1",
 		"pdfjs-dist": "^4.10.38",
-		"radix-ui": "^1.3.4",
+		"radix-ui": "^1.4.2",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-helmet-async": "^1.3.0",

eslint.config.mjs

@@ -400,6 +400,7 @@ export default [
 			'local/prefer-class-methods': 'off',
 			'no-restricted-syntax': 'off',
 			'no-console': 'off',
+			'@typescript-eslint/method-signature-style': 'off',
 		},
 	},
 ]

internal/scripts/dev-template.sh

@@ -9,4 +9,10 @@ if [ -z "$template_name" ]; then
     exit 1
 fi
 
-LAZYREPO_PRETTY_OUTPUT=0 lazy run dev --filter="templates/$template_name" --filter='packages/tldraw' --filter='apps/bemo-worker' 
+if [ ! -d "templates/$template_name" ]; then
+    echo "Template $template_name does not exist"
+    echo "Available templates: $(ls templates | awk 'ORS=", "' | sed 's/, $//')"
+    exit 1
+fi
+
+LAZYREPO_PRETTY_OUTPUT=0 lazy run dev --filter="templates/$template_name" --filter='packages/tldraw' --filter='apps/bemo-worker'

packages/editor/src/lib/editor/Editor.ts

@@ -6333,7 +6333,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 			this.createShapes(shapesToCreate)
 			this.createBindings(bindingsToCreate)
-			this.setSelectedShapes(compact(ids.map((id) => shapeIds.get(id))))
+
+			this.setSelectedShapes(
+				compact(
+					ids.map((oldId) => {
+						const newId = shapeIds.get(oldId)
+						if (!newId) return null
+						if (!this.getShape(newId)) return null
+						return newId
+					})
+				)
+			)
 
 			if (offset !== undefined) {
 				// If we've offset the duplicated shapes, check to see whether their new bounds is entirely

packages/tldraw/package.json

@@ -59,7 +59,7 @@
 		"hotkeys-js": "^3.13.9",
 		"idb": "^7.1.1",
 		"lz-string": "^1.5.0",
-		"radix-ui": "^1.3.4"
+		"radix-ui": "^1.4.2"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0 || ^19.0.0",

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -350,6 +350,7 @@ function useDraggableEvents(
 						})
 
 						tooltipManager.hideAllTooltips()
+						editor.getContainer().focus()
 					})
 				}
 			}