tldraw_final_v6_final(old version).docx.pdf (#2998)

Rename `@tldraw/tldraw` to just `tldraw`! `@tldraw/tldraw` still exists
as an alias to `tldraw` for folks who are still using that.

### Test Plan

- [x] Unit Tests
- [ ] End to end tests

### Release Notes

- The `@tldraw/tldraw` package has been renamed to `tldraw`. You can
keep using the old version if you want though!

apps/dotcom/package.json

@@ -23,7 +23,6 @@
 		"@sentry/integrations": "^7.34.0",
 		"@sentry/react": "^7.77.0",
 		"@tldraw/assets": "workspace:*",
-		"@tldraw/tldraw": "workspace:*",
 		"@tldraw/tlsync": "workspace:*",
 		"@vercel/analytics": "^1.1.1",
 		"browser-fs-access": "^0.33.0",
@@ -33,7 +32,8 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-helmet-async": "^1.3.0",
-		"react-router-dom": "^6.17.0"
+		"react-router-dom": "^6.17.0",
+		"tldraw": "workspace:*"
 	},
 	"devDependencies": {
 		"@jest/globals": "30.0.0-alpha.2",

apps/dotcom/sentry.client.config.ts

@@ -4,7 +4,7 @@
 
 import { ExtraErrorData } from '@sentry/integrations'
 import * as Sentry from '@sentry/react'
-import { Editor, getErrorAnnotations } from '@tldraw/tldraw'
+import { Editor, getErrorAnnotations } from 'tldraw'
 import { sentryReleaseName } from './sentry-release-name'
 import { env } from './src/utils/env'
 import { setGlobalErrorReporter } from './src/utils/errorReporting'

apps/dotcom/src/components/BoardHistorySnapshot/BoardHistorySnapshot.tsx

@@ -1,6 +1,6 @@
-import { Tldraw, createTLStore, defaultShapeUtils } from '@tldraw/tldraw'
 import { RoomSnapshot } from '@tldraw/tlsync'
 import { useCallback, useState } from 'react'
+import { Tldraw, createTLStore, defaultShapeUtils } from 'tldraw'
 import '../../../styles/core.css'
 import { assetUrls } from '../../utils/assetUrls'
 import { useFileSystem } from '../../utils/useFileSystem'

apps/dotcom/src/components/CursorChatBubble.tsx

@@ -1,4 +1,3 @@
-import { preventDefault, track, useContainer, useEditor, useTranslation } from '@tldraw/tldraw'
 import {
 	ChangeEvent,
 	ClipboardEvent,
@@ -10,6 +9,7 @@ import {
 	useRef,
 	useState,
 } from 'react'
+import { preventDefault, track, useContainer, useEditor, useTranslation } from 'tldraw'
 
 // todo:
 // - not cleaning up

apps/dotcom/src/components/DefaultErrorFallback/DefaultErrorFallback.tsx

@@ -1,7 +1,7 @@
 import { captureException } from '@sentry/react'
-import { DefaultErrorFallback as ErrorFallback } from '@tldraw/tldraw'
 import { useEffect } from 'react'
 import { useRouteError } from 'react-router-dom'
+import { DefaultErrorFallback as ErrorFallback } from 'tldraw'
 
 export function DefaultErrorFallback() {
 	const error = useRouteError()

apps/dotcom/src/components/DocumentName/DocumentName.tsx

@@ -1,3 +1,14 @@
+import {
+	ChangeEvent,
+	KeyboardEvent,
+	ReactNode,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from 'react'
 import {
 	OfflineIndicator,
 	TLUiTranslationKey,
@@ -14,18 +25,7 @@ import {
 	useBreakpoint,
 	useEditor,
 	useTranslation,
-} from '@tldraw/tldraw'
-import {
-	ChangeEvent,
-	KeyboardEvent,
-	ReactNode,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from 'react'
+} from 'tldraw'
 import { FORK_PROJECT_ACTION } from '../../utils/sharing'
 import { SAVE_FILE_COPY_ACTION } from '../../utils/useFileSystem'
 import { getShareUrl } from '../ShareMenu'

apps/dotcom/src/components/ExportMenu.tsx

@@ -1,4 +1,5 @@
 import * as Popover from '@radix-ui/react-popover'
+import React, { useState } from 'react'
 import {
 	TldrawUiMenuContextProvider,
 	TldrawUiMenuGroup,
@@ -8,8 +9,7 @@ import {
 	useContainer,
 	useEditor,
 	useTranslation,
-} from '@tldraw/tldraw'
-import React, { useState } from 'react'
+} from 'tldraw'
 import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen'
 import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'
 import { getSaveFileCopyAction } from '../utils/useFileSystem'

apps/dotcom/src/components/FileMenu.tsx

@@ -4,7 +4,7 @@ import {
 	TldrawUiMenuItem,
 	TldrawUiMenuSubmenu,
 	useActions,
-} from '@tldraw/tldraw'
+} from 'tldraw'
 import {
 	FORK_PROJECT_ACTION,
 	LEAVE_SHARED_PROJECT_ACTION,

apps/dotcom/src/components/IFrameProtector.tsx

@@ -1,5 +1,5 @@
-import { LoadingScreen } from '@tldraw/tldraw'
 import { useEffect, useState, version } from 'react'
+import { LoadingScreen } from 'tldraw'
 import { useUrl } from '../hooks/useUrl'
 import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent'
 

apps/dotcom/src/components/Links.tsx

@@ -1,4 +1,4 @@
-import { TldrawUiMenuGroup, TldrawUiMenuItem } from '@tldraw/tldraw'
+import { TldrawUiMenuGroup, TldrawUiMenuItem } from 'tldraw'
 import { openUrl } from '../utils/url'
 
 export function Links() {

apps/dotcom/src/components/LocalEditor.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import {
 	DefaultDebugMenu,
 	DefaultDebugMenuContent,
@@ -17,8 +18,7 @@ import {
 	TldrawUiMenuItem,
 	ViewSubmenu,
 	useActions,
-} from '@tldraw/tldraw'
-import { useCallback } from 'react'
+} from 'tldraw'
 import { assetUrls } from '../utils/assetUrls'
 import { createAssetFromUrl } from '../utils/createAssetFromUrl'
 import { DebugMenuItems } from '../utils/migration/DebugMenuItems'

apps/dotcom/src/components/MultiplayerEditor.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect } from 'react'
 import {
 	DefaultContextMenu,
 	DefaultContextMenuContent,
@@ -22,8 +23,7 @@ import {
 	lns,
 	useActions,
 	useValue,
-} from '@tldraw/tldraw'
-import { useCallback, useEffect } from 'react'
+} from 'tldraw'
 import { useRemoteSyncClient } from '../hooks/useRemoteSyncClient'
 import { UrlStateParams, useUrlState } from '../hooks/useUrlState'
 import { assetUrls } from '../utils/assetUrls'

apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx

@@ -10,7 +10,7 @@ import {
 	usePeerIds,
 	useTranslation,
 	useValue,
-} from '@tldraw/tldraw'
+} from 'tldraw'
 import { PeopleMenuAvatar } from './PeopleMenuAvatar'
 import { PeopleMenuItem } from './PeopleMenuItem'
 import { PeopleMenuMore } from './PeopleMenuMore'

apps/dotcom/src/components/PeopleMenu/PeopleMenuAvatar.tsx

@@ -1,4 +1,4 @@
-import { usePresence } from '@tldraw/tldraw'
+import { usePresence } from 'tldraw'
 
 export function PeopleMenuAvatar({ userId }: { userId: string }) {
 	const presence = usePresence(userId)

apps/dotcom/src/components/PeopleMenu/PeopleMenuItem.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import {
 	TldrawUiButton,
 	TldrawUiButtonIcon,
@@ -7,8 +8,7 @@ import {
 	usePresence,
 	useTranslation,
 	useUiEvents,
-} from '@tldraw/tldraw'
-import { useCallback } from 'react'
+} from 'tldraw'
 import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent'
 
 export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {

apps/dotcom/src/components/PeopleMenu/UserPresenceColorPicker.tsx

@@ -1,4 +1,5 @@
 import * as Popover from '@radix-ui/react-popover'
+import React, { useCallback, useRef, useState } from 'react'
 import {
 	TldrawUiButton,
 	TldrawUiButtonIcon,
@@ -8,8 +9,7 @@ import {
 	useEditor,
 	useTranslation,
 	useUiEvents,
-} from '@tldraw/tldraw'
-import React, { useCallback, useRef, useState } from 'react'
+} from 'tldraw'
 import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent'
 
 export const UserPresenceColorPicker = track(function UserPresenceColorPicker() {

apps/dotcom/src/components/PeopleMenu/UserPresenceEditor.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useRef, useState } from 'react'
 import {
 	TldrawUiButton,
 	TldrawUiButtonIcon,
@@ -6,8 +7,7 @@ import {
 	useTranslation,
 	useUiEvents,
 	useValue,
-} from '@tldraw/tldraw'
-import { useCallback, useRef, useState } from 'react'
+} from 'tldraw'
 import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent'
 import { UserPresenceColorPicker } from './UserPresenceColorPicker'
 

apps/dotcom/src/components/ShareButton.tsx

@@ -1,5 +1,5 @@
-import { useTranslation } from '@tldraw/tldraw'
 import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react'
+import { useTranslation } from 'tldraw'
 
 export type ShareButtonProps = DetailedHTMLProps<
 	ButtonHTMLAttributes<HTMLButtonElement>,

apps/dotcom/src/components/ShareMenu.tsx

@@ -1,4 +1,5 @@
 import * as Popover from '@radix-ui/react-popover'
+import React, { useEffect, useState } from 'react'
 import {
 	TldrawUiMenuContextProvider,
 	TldrawUiMenuGroup,
@@ -8,8 +9,7 @@ import {
 	useActions,
 	useContainer,
 	useTranslation,
-} from '@tldraw/tldraw'
-import React, { useEffect, useState } from 'react'
+} from 'tldraw'
 import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen'
 import { createQRCodeImageDataString } from '../utils/qrcode'
 import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'

apps/dotcom/src/components/SnapshotsEditor.tsx

@@ -12,7 +12,7 @@ import {
 	TldrawUiMenuGroup,
 	TldrawUiMenuItem,
 	useActions,
-} from '@tldraw/tldraw'
+} from 'tldraw'
 import { UrlStateSync } from '../components/MultiplayerEditor'
 import { StoreErrorScreen } from '../components/StoreErrorScreen'
 import { useLocalStore } from '../hooks/useLocalStore'

apps/dotcom/src/components/SneakyOnDropOverride.ts

@@ -1,5 +1,5 @@
-import { parseAndLoadDocument, useDefaultHelpers, useEditor } from '@tldraw/tldraw'
 import { useEffect } from 'react'
+import { parseAndLoadDocument, useDefaultHelpers, useEditor } from 'tldraw'
 import { shouldOverrideDocument } from '../utils/shouldOverrideDocument'
 
 export function SneakyOnDropOverride({ isMultiplayer }: { isMultiplayer: boolean }) {

apps/dotcom/src/components/StoreErrorScreen.tsx

@@ -1,5 +1,5 @@
-import { ErrorScreen, exhaustiveSwitchError } from '@tldraw/tldraw'
 import { TLIncompatibilityReason } from '@tldraw/tlsync'
+import { ErrorScreen, exhaustiveSwitchError } from 'tldraw'
 import { RemoteSyncError } from '../utils/remote-sync/remote-sync'
 
 export function StoreErrorScreen({ error }: { error: Error }) {

apps/dotcom/src/components/ThemeUpdater/ThemeUpdater.tsx

@@ -1,5 +1,5 @@
-import { useEditor, useValue } from '@tldraw/tldraw'
 import { Helmet } from 'react-helmet-async'
+import { useEditor, useValue } from 'tldraw'
 
 export function ThemeUpdater() {
 	const editor = useEditor()

apps/dotcom/src/hooks/useLocalStore.ts

@@ -1,3 +1,5 @@
+import { schema } from '@tldraw/tlsync'
+import { useEffect, useState } from 'react'
 import {
 	MigrationFailureReason,
 	Result,
@@ -5,9 +7,7 @@ import {
 	TLRecord,
 	TLStore,
 	createTLStore,
-} from '@tldraw/tldraw'
-import { schema } from '@tldraw/tlsync'
-import { useEffect, useState } from 'react'
+} from 'tldraw'
 
 export function useLocalStore(records: TLRecord[], serializedSchema: SerializedSchema) {
 	const [storeResult, setStoreResult] = useState<

apps/dotcom/src/hooks/useMultiplayerAssets.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import {
 	AssetRecordType,
 	DEFAULT_ACCEPTED_IMG_TYPE,
@@ -6,8 +7,7 @@ import {
 	TLAssetId,
 	getHashForString,
 	uniqueId,
-} from '@tldraw/tldraw'
-import { useCallback } from 'react'
+} from 'tldraw'
 
 export function useMultiplayerAssets(assetUploaderUrl: string) {
 	return useCallback(

apps/dotcom/src/hooks/useRemoteSyncClient.ts

@@ -1,3 +1,5 @@
+import { TLSyncClient, schema } from '@tldraw/tlsync'
+import { useEffect, useState } from 'react'
 import {
 	TAB_ID,
 	TLRecord,
@@ -9,9 +11,7 @@ import {
 	getUserPreferences,
 	useTLStore,
 	useValue,
-} from '@tldraw/tldraw'
-import { TLSyncClient, schema } from '@tldraw/tlsync'
-import { useEffect, useState } from 'react'
+} from 'tldraw'
 import { ClientWebSocketAdapter } from '../utils/remote-sync/ClientWebSocketAdapter'
 import { RemoteSyncError, UseSyncClientConfig } from '../utils/remote-sync/remote-sync'
 import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent'

apps/dotcom/src/hooks/useShareMenuOpen.ts

@@ -1,5 +1,5 @@
-import { atom, useMenuIsOpen, useValue } from '@tldraw/tldraw'
 import { useEffect, useRef } from 'react'
+import { atom, useMenuIsOpen, useValue } from 'tldraw'
 
 // When people click the 'create shared project' in the share menu we want to make sure that
 // the menu is not dismissed when the new multiplayer editor mounts.

apps/dotcom/src/hooks/useUrlState.ts

@@ -1,5 +1,5 @@
-import { Editor, MAX_ZOOM, MIN_ZOOM, TLPageId, debounce, react, useEditor } from '@tldraw/tldraw'
 import { default as React, useEffect } from 'react'
+import { Editor, MAX_ZOOM, MIN_ZOOM, TLPageId, debounce, react, useEditor } from 'tldraw'
 
 const PARAMS = {
 	viewport: 'viewport',

apps/dotcom/src/pages/public-snapshot.tsx

@@ -1,4 +1,4 @@
-import { SerializedSchema, TLRecord } from '@tldraw/tldraw'
+import { SerializedSchema, TLRecord } from 'tldraw'
 import '../../styles/globals.css'
 import { IFrameProtector } from '../components/IFrameProtector'
 import { SnapshotsEditor } from '../components/SnapshotsEditor'

apps/dotcom/src/utils/cloneAssetForShare.ts

@@ -1,4 +1,4 @@
-import { TLAsset } from '@tldraw/tldraw'
+import { TLAsset } from 'tldraw'
 
 export async function cloneAssetForShare(
 	asset: TLAsset,

apps/dotcom/src/utils/context-menu/CursorChatMenuItem.tsx

@@ -1,4 +1,4 @@
-import { TldrawUiMenuItem, useActions, useEditor, useValue } from '@tldraw/tldraw'
+import { TldrawUiMenuItem, useActions, useEditor, useValue } from 'tldraw'
 import { CURSOR_CHAT_ACTION } from '../useCursorChat'
 
 export function CursorChatMenuItem() {

apps/dotcom/src/utils/createAssetFromFile.ts

@@ -6,7 +6,7 @@ import {
 	TLAssetId,
 	getHashForString,
 	uniqueId,
-} from '@tldraw/tldraw'
+} from 'tldraw'
 import { ASSET_UPLOADER_URL } from './config'
 
 export async function createAssetFromFile({ file }: { type: 'file'; file: File }) {

apps/dotcom/src/utils/createAssetFromUrl.ts

@@ -1,9 +1,4 @@
-import {
-	AssetRecordType,
-	TLAsset,
-	getHashForString,
-	truncateStringWithEllipsis,
-} from '@tldraw/tldraw'
+import { AssetRecordType, TLAsset, getHashForString, truncateStringWithEllipsis } from 'tldraw'
 import { BOOKMARK_ENDPOINT } from './config'
 
 interface ResponseBody {

apps/dotcom/src/utils/migration/DebugMenuItems.tsx

@@ -1,4 +1,4 @@
-import { TldrawUiMenuGroup, TldrawUiMenuItem } from '@tldraw/tldraw'
+import { TldrawUiMenuGroup, TldrawUiMenuItem } from 'tldraw'
 import { env } from '../env'
 
 const RELEASE_INFO = `${env} ${process.env.NEXT_PUBLIC_TLDRAW_RELEASE_INFO ?? 'unreleased'}`

apps/dotcom/src/utils/migration/LocalMigration.tsx

@@ -1,5 +1,5 @@
-import { useDialogs, useEditor, useToasts } from '@tldraw/tldraw'
 import { useEffect } from 'react'
+import { useDialogs, useEditor, useToasts } from 'tldraw'
 import { MigrationAnnouncement } from './MigrationAnnouncement'
 import { importFromV1LocalRoom, isEditorEmpty } from './migration'
 

apps/dotcom/src/utils/migration/MigrationAnnouncement.tsx

@@ -4,7 +4,7 @@ import {
 	TldrawUiButtonLabel,
 	useEditor,
 	useValue,
-} from '@tldraw/tldraw'
+} from 'tldraw'
 
 export function MigrationAnnouncement({
 	onClose,

apps/dotcom/src/utils/migration/migration.tsx

@@ -1,5 +1,5 @@
-import { Editor, LegacyTldrawDocument, buildFromV1Document } from '@tldraw/tldraw'
 import { openDB } from 'idb'
+import { Editor, LegacyTldrawDocument, buildFromV1Document } from 'tldraw'
 
 export function isEditorEmpty(editor: Editor) {
 	const hasAnyShapes = editor.store.allRecords().some((r) => r.typeName === 'shape')

apps/dotcom/src/utils/remote-sync/ClientWebSocketAdapter.ts

@@ -1,4 +1,3 @@
-import { atom, Atom, TLRecord } from '@tldraw/tldraw'
 import {
 	chunk,
 	serializeMessage,
@@ -7,6 +6,7 @@ import {
 	TLSocketClientSentEvent,
 	TLSocketServerSentEvent,
 } from '@tldraw/tlsync'
+import { atom, Atom, TLRecord } from 'tldraw'
 
 function windowListen(...args: Parameters<typeof window.addEventListener>) {
 	window.addEventListener(...args)

apps/dotcom/src/utils/remote-sync/remote-sync.ts

@@ -1,5 +1,5 @@
-import { Signal, TLStoreSnapshot, TLUserPreferences } from '@tldraw/tldraw'
 import { TLIncompatibilityReason } from '@tldraw/tlsync'
+import { Signal, TLStoreSnapshot, TLUserPreferences } from 'tldraw'
 
 /** @public */
 export class RemoteSyncError extends Error {

apps/dotcom/src/utils/sharing.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import {
 	AssetRecordType,
 	Editor,
@@ -13,9 +15,7 @@ import {
 	TLUiToastsContextType,
 	TLUiTranslationKey,
 	isShape,
-} from '@tldraw/tldraw'
-import { useMemo } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+} from 'tldraw'
 import { useMultiplayerAssets } from '../hooks/useMultiplayerAssets'
 import { getViewportUrlQuery } from '../hooks/useUrlState'
 import { cloneAssetForShare } from './cloneAssetForShare'

apps/dotcom/src/utils/shouldClearDocument.tsx

@@ -8,7 +8,7 @@ import {
 	TldrawUiDialogHeader,
 	TldrawUiDialogTitle,
 	useTranslation,
-} from '@tldraw/tldraw'
+} from 'tldraw'
 
 export async function shouldClearDocument(addDialog: TLUiDialogsContextType['addDialog']) {
 	const shouldContinue = await new Promise<boolean>((resolve) => {

apps/dotcom/src/utils/shouldLeaveSharedProject.tsx

@@ -10,7 +10,7 @@ import {
 	TldrawUiDialogTitle,
 	useLocalStorageState,
 	useTranslation,
-} from '@tldraw/tldraw'
+} from 'tldraw'
 import { userPreferences } from './userPreferences'
 
 export async function shouldLeaveSharedProject(addDialog: TLUiDialogsContextType['addDialog']) {

apps/dotcom/src/utils/shouldOverrideDocument.tsx

@@ -8,7 +8,7 @@ import {
 	TldrawUiDialogHeader,
 	TldrawUiDialogTitle,
 	useTranslation,
-} from '@tldraw/tldraw'
+} from 'tldraw'
 
 /** @public */
 export async function shouldOverrideDocument(addDialog: TLUiDialogsContextType['addDialog']) {

apps/dotcom/src/utils/useCursorChat.ts

@@ -1,5 +1,5 @@
-import { TLUiOverrides } from '@tldraw/tldraw'
 import { useMemo } from 'react'
+import { TLUiOverrides } from 'tldraw'
 import { useHandleUiEvents } from './useHandleUiEvent'
 
 export const CURSOR_CHAT_ACTION = 'open-cursor-chat' as const

apps/dotcom/src/utils/useFileSystem.tsx

@@ -1,3 +1,5 @@
+import { fileOpen, fileSave } from 'browser-fs-access'
+import { useMemo } from 'react'
 import {
 	Editor,
 	TLDRAW_FILE_EXTENSION,
@@ -8,9 +10,7 @@ import {
 	parseAndLoadDocument,
 	serializeTldrawJsonBlob,
 	transact,
-} from '@tldraw/tldraw'
-import { fileOpen, fileSave } from 'browser-fs-access'
-import { useMemo } from 'react'
+} from 'tldraw'
 import { shouldClearDocument } from './shouldClearDocument'
 import { shouldOverrideDocument } from './shouldOverrideDocument'
 import { useHandleUiEvents } from './useHandleUiEvent'

apps/dotcom/src/utils/userPreferences.ts

@@ -1,4 +1,4 @@
-import { T, atom } from '@tldraw/tldraw'
+import { T, atom } from 'tldraw'
 
 const channel =
 	typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel('tldrawUserPreferences') : null

apps/dotcom/styles/globals.css

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Plus+Jakarta+Sans:wght@600;800&display=swap');
-@import url('@tldraw/tldraw/tldraw.css');
+@import url('tldraw/tldraw.css');
 @import url('./z-board.css');
 
 .tldraw__editor {