PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
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!
This commit is contained in:
alex 2024-02-29 16:06:19 +00:00 committed by GitHub
parent ae531da193
commit a0628f9cb2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
206 changed files with 1602 additions and 1263 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.js
View file

@ -46,7 +46,7 @@ module.exports = {
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error',
'import/no-extraneous-dependencies': 'error',
'import/no-internal-modules': ['error', { forbid: ['@tldraw/*/**'] }],
'import/no-internal-modules': ['error', { forbid: ['@tldraw/*/**', 'tldraw/**'] }],
'@typescript-eslint/consistent-type-exports': [
'error',
{ fixMixedExportsWithInlineTypeSpecifier: true },

8
.github/workflows/publish-templates.yml vendored
View file

@ -29,9 +29,9 @@ jobs:
- name: Substitute the latest published version of tldraw
run: |
export TEMPLATE=vite NPM_TAG=latest && \
npm view @tldraw/tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \
npm view tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \
cp "templates/$TEMPLATE/package.json" /tmp/template_package.json && \
jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."@tldraw/tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json"
jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json"
- name: Push vite template to tldraw/vite-template
uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900 # v1.7.2
@ -56,9 +56,9 @@ jobs:
- name: Substitute the latest published version of tldraw
run: |
export TEMPLATE=nextjs NPM_TAG=latest && \
npm view @tldraw/tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \
npm view tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \
cp "templates/$TEMPLATE/package.json" /tmp/template_package.json && \
jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."@tldraw/tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json"
jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json"
- name: Push next.js template to tldraw/nextjs-template
uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900 # v1.7.2

2
apps/docs/components/ExampleCodeBlock.tsx
View file

@ -35,7 +35,7 @@ export default function ExampleCodeBlock({
customSetup={{
dependencies: {
'@tldraw/assets': 'latest',
'@tldraw/tldraw': 'latest',
tldraw: 'latest',
},
}}
files={{

2
apps/docs/components/mdx-components/code.tsx
View file

@ -36,7 +36,7 @@ export function CodeBlock({ code }: { code: SandpackFiles }) {
customSetup={{
dependencies: {
'@tldraw/assets': 'latest',
'@tldraw/tldraw': 'latest',
tldraw: 'latest',
},
}}
files={trimmedCode}

2
apps/docs/content/docs/collaboration.mdx
View file

@ -6,4 +6,4 @@ date: 3/22/2023
order: 8
---
See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `@tldraw/tldraw` library.
See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `tldraw` library.

6
apps/docs/content/docs/editor.mdx
View file

@ -29,7 +29,7 @@ The editor also exposes many _computed_ values which are derived from other reco
You can use these properties directly or you can use them in signals.
```tsx
import { track, useEditor } from '@tldraw/tldraw'
import { track, useEditor } from 'tldraw'
export const SelectedShapeIdsCount = track(() => {
const editor = useEditor()
@ -159,7 +159,7 @@ Note that the paths you pass to [Editor#isIn](?) or [Editor#isInAny](?) can be t
> If all you're interested in is the state below `root`, there is a convenience method, [Editor#getCurrentToolId](?), that can help with the editor's currently selected tool.
```tsx
import { track, useEditor } from '@tldraw/tldraw'
import { track, useEditor } from 'tldraw'
export const BubbleToolUi = track(() => {
const editor = useEditor()
@ -193,7 +193,7 @@ The editor's user preferences are shared between all instances. See the [TLUserP
To create an id for a shape (a [TLShapeId](?)), use the libary's [createShapeId](?) helper.
```ts
import { createShapeId } from '@tldraw/tldraw'
import { createShapeId } from 'tldraw'
createShapeId() // `shape:some-random-uuid`
createShapeId('kyle') // `shape:kyle`

8
apps/docs/content/docs/persistence.mdx
View file

@ -20,8 +20,8 @@ Persistence in tldraw means storing information about the editor's state to a da
Both the `<Tldraw>` or `<TldrawEditor>` components support local persitence and cross-tab synchronization via the `persistenceKey` prop. Passing a value to this prop will persist the contents of the editor locally to the browser's IndexedDb.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function () {
return (
@ -35,8 +35,8 @@ export default function () {
Using a `persistenceKey` will synchronize data automatically with any other tldraw component with the same `persistenceKey` prop, even if that component is in a different browser tab.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function () {
return (

6
apps/docs/content/docs/shapes.mdx
View file

@ -25,7 +25,7 @@ The editor's core shapes are shapes that are built in and always present. At the
### Default shapes
The default shapes are all of the shapes that are included by default in the [Tldraw](?) component, such as the [TLArrowShape](?) or [TLDrawShape](?). They are exported from the `@tldraw/tldraw` library as [defaultShapeUtils](?).
The default shapes are all of the shapes that are included by default in the [Tldraw](?) component, such as the [TLArrowShape](?) or [TLDrawShape](?). They are exported from the `tldraw` library as [defaultShapeUtils](?).
### Custom shapes
@ -96,7 +96,7 @@ You can create your own custom shapes. In the examples below, we will create a c
In tldraw's data model, each shape is represented by a JSON object. Let's first create a type that describes what this object will look like.
```ts
import { TLBaseShape } from '@tldraw/tldraw'
import { TLBaseShape } from 'tldraw'
type CardShape = TLBaseShape<'card', { w: number; h: number }>
```
@ -112,7 +112,7 @@ While tldraw's shapes themselves are simple JSON objects, we use [ShapeUtil](?)
Let's create a [ShapeUtil](?) class for the shape.
```tsx
import { HTMLContainer, ShapeUtil } from '@tldraw/tldraw'
import { HTMLContainer, ShapeUtil } from 'tldraw'
class CardShapeUtil extends ShapeUtil<CardShape> {
static override type = 'card' as const

26
apps/docs/content/getting-started/installation.mdx
View file

@ -6,27 +6,27 @@ date: 3/22/2023
order: 1
---
At the moment the `@tldraw/tldraw` package is in beta. We also ship a canary version which is always up to date with the main branch of tldraw [repository](https://github.com/tldraw/tldraw).
At the moment the `tldraw` package is in beta. We also ship a canary version which is always up to date with the main branch of tldraw [repository](https://github.com/tldraw/tldraw).
## Beta
First, install the `@tldraw/tldraw` package using `@beta` for the latest beta release.
First, install the `tldraw` package using `@beta` for the latest beta release.
<CodeBlock code={{'yarn': 'yarn add @tldraw/tldraw@beta', 'npm': 'npm install @tldraw/tldraw@beta', 'pnpm': 'pnpm add @tldraw/tldraw@beta'}} />
<CodeBlock code={{'yarn': 'yarn add tldraw@beta', 'npm': 'npm install tldraw@beta', 'pnpm': 'pnpm add tldraw@beta'}} />
## Canary
To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev).
To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev).
<CodeBlock code={{'yarn': 'yarn add @tldraw/tldraw@canary', 'npm': 'npm install @tldraw/tldraw@canary', 'pnpm': 'pnpm add @tldraw/tldraw@canary'}} />
<CodeBlock code={{'yarn': 'yarn add tldraw@canary', 'npm': 'npm install tldraw@canary', 'pnpm': 'pnpm add tldraw@canary'}} />
## Usage
You can use the [Tldraw](?) component inside of any React component.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function () {
return (
@ -43,16 +43,16 @@ It's important that the [Tldraw](?) component is wrapped in a parent container t
### CSS
In addition to the [Tldraw](?) component itself, you should also import the `tldraw.css` file from the `@tldraw/tldraw` package.
In addition to the [Tldraw](?) component itself, you should also import the `tldraw.css` file from the `tldraw` package.
```tsx
import '@tldraw/tldraw/tldraw.css'
import 'tldraw/tldraw.css'
```
You can alternatively import this file inside of another CSS file using the `@import` syntax.
```css
@import url('@tldraw/tldraw/tldraw.css');
@import url('tldraw/tldraw.css');
```
If you'd like to deeply change the way that tldraw looks, you can copy the `tldraw.css` file into a new CSS file, make your changes, and import that instead.
@ -80,15 +80,15 @@ This may not be critical to [Tldraw](?) performing correctly, however some featu
The [Tldraw](?) component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you need to import it dynamically.
```tsx
const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, { ssr: false })
const Tldraw = dynamic(async () => (await import('tldraw')).Tldraw, { ssr: false })
```
### Using a bundler
If you're using a bundler like webpack or rollup, you can import the assets directly from the `@tldraw/assets` package. Here you can use `getAssetUrlsByMetaUrl` helper function:
If you're using a bundler like webpack or rollup, you can import the assets directly from the `assets` package. Here you can use `getAssetUrlsByMetaUrl` helper function:
```tsx
import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
import { getAssetUrlsByMetaUrl } from 'assets/urls'
const assetUrls = getAssetUrlsByMetaUrl()

8
apps/docs/content/getting-started/quick-start.mdx
View file

@ -24,7 +24,7 @@ By the end of this guide you will have made something that looks like this:
- Install the tldraw library using this command:
```bash
npm install @tldraw/tldraw@beta
npm install tldraw@beta
```
</li>
<li>
@ -36,7 +36,7 @@ By the end of this guide you will have made something that looks like this:
- Copy and paste this into the file:
```CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap");
@import url("@tldraw/tldraw/tldraw.css");
@import url("tldraw/tldraw.css");
body {
font-family: "Inter";
@ -48,14 +48,14 @@ By the end of this guide you will have made something that looks like this:
<br />
To render the Tldraw component
- Import the `<Tldraw />` component from `@tldraw/tldraw`
- Import the `<Tldraw />` component from `tldraw`
- Import the `index.css` CSS file from earlier
- Wrap the Tldraw component in a `<div>` element with the style attribute set to: `{ position: 'fixed', inset: 0 }`
<p className="">This will render a full screen canvas:</p>
```javascript
import { Tldraw } from "@tldraw/tldraw";
import { Tldraw } from "tldraw";
import "./index.css";
export default function App() {

2
apps/docs/content/sections.json
View file

@ -97,7 +97,7 @@
},
{
"id": "tldraw",
"title": "@tldraw/tldraw",
"title": "tldraw",
"description": "",
"groups": [
{

2
apps/docs/scripts/functions/fetchReleases.ts
View file

@ -63,7 +63,7 @@ export async function fetchReleases() {
fs.writeFileSync(filePath, m)
})
} else {
throw Error(`x Could not get releases for @tldraw/tldraw.`)
throw Error(`x Could not get releases for tldraw.`)
}
} catch (error) {
nicelog(`x Could not generate release content.`)

4
apps/dotcom/package.json
View file

@ -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",

2
apps/dotcom/sentry.client.config.ts
View file

@ -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'

2
apps/dotcom/src/components/BoardHistorySnapshot/BoardHistorySnapshot.tsx
View file

@ -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'

2
apps/dotcom/src/components/CursorChatBubble.tsx
View file

@ -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

2
apps/dotcom/src/components/DefaultErrorFallback/DefaultErrorFallback.tsx
View file

@ -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()

24
apps/dotcom/src/components/DocumentName/DocumentName.tsx
View file

@ -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'

4
apps/dotcom/src/components/ExportMenu.tsx
View file

@ -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'

2
apps/dotcom/src/components/FileMenu.tsx
View file

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

2
apps/dotcom/src/components/IFrameProtector.tsx
View file

@ -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'

2
apps/dotcom/src/components/Links.tsx
View file

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

4
apps/dotcom/src/components/LocalEditor.tsx
View file

@ -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'

4
apps/dotcom/src/components/MultiplayerEditor.tsx
View file

@ -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'

2
apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx
View file

@ -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'

2
apps/dotcom/src/components/PeopleMenu/PeopleMenuAvatar.tsx
View file

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

4
apps/dotcom/src/components/PeopleMenu/PeopleMenuItem.tsx
View file

@ -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 }) {

4
apps/dotcom/src/components/PeopleMenu/UserPresenceColorPicker.tsx
View file

@ -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() {

4
apps/dotcom/src/components/PeopleMenu/UserPresenceEditor.tsx
View file

@ -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'

2
apps/dotcom/src/components/ShareButton.tsx
View file

@ -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>,

4
apps/dotcom/src/components/ShareMenu.tsx
View file

@ -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'

2
apps/dotcom/src/components/SnapshotsEditor.tsx
View file

@ -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'

2
apps/dotcom/src/components/SneakyOnDropOverride.ts
View file

@ -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 }) {

2
apps/dotcom/src/components/StoreErrorScreen.tsx
View file

@ -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 }) {

2
apps/dotcom/src/components/ThemeUpdater/ThemeUpdater.tsx
View file

@ -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()

6
apps/dotcom/src/hooks/useLocalStore.ts
View file

@ -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<

4
apps/dotcom/src/hooks/useMultiplayerAssets.ts
View file

@ -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(

6
apps/dotcom/src/hooks/useRemoteSyncClient.ts
View file

@ -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'

2
apps/dotcom/src/hooks/useShareMenuOpen.ts
View file

@ -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.

2
apps/dotcom/src/hooks/useUrlState.ts
View file

@ -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',

2
apps/dotcom/src/pages/public-snapshot.tsx
View file

@ -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'

2
apps/dotcom/src/utils/cloneAssetForShare.ts
View file

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

2
apps/dotcom/src/utils/context-menu/CursorChatMenuItem.tsx
View file

@ -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() {

2
apps/dotcom/src/utils/createAssetFromFile.ts
View file

@ -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 }) {

7
apps/dotcom/src/utils/createAssetFromUrl.ts
View file

@ -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 {

2
apps/dotcom/src/utils/migration/DebugMenuItems.tsx
View file

@ -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'}`

2
apps/dotcom/src/utils/migration/LocalMigration.tsx
View file

@ -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'

2
apps/dotcom/src/utils/migration/MigrationAnnouncement.tsx
View file

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

2
apps/dotcom/src/utils/migration/migration.tsx
View file

@ -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')

2
apps/dotcom/src/utils/remote-sync/ClientWebSocketAdapter.ts
View file

@ -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)

2
apps/dotcom/src/utils/remote-sync/remote-sync.ts
View file

@ -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 {

6
apps/dotcom/src/utils/sharing.ts
View file

@ -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'

2
apps/dotcom/src/utils/shouldClearDocument.tsx
View file

@ -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) => {

2
apps/dotcom/src/utils/shouldLeaveSharedProject.tsx
View file

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

2
apps/dotcom/src/utils/shouldOverrideDocument.tsx
View file

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

2
apps/dotcom/src/utils/useCursorChat.ts
View file

@ -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

6
apps/dotcom/src/utils/useFileSystem.tsx
View file

@ -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'

2
apps/dotcom/src/utils/userPreferences.ts
View file

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

2
apps/dotcom/styles/globals.css
View file

@ -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 {

2
apps/examples/e2e/shared-e2e.ts
View file

@ -1,5 +1,5 @@
import { PlaywrightTestArgs, PlaywrightWorkerArgs } from '@playwright/test'
import { Editor } from '@tldraw/tldraw'
import { Editor } from 'tldraw'
export function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))

4
apps/examples/e2e/tests/export-snapshots.spec.ts
View file

@ -1,11 +1,11 @@
import test from '@playwright/test'
import { TLShapeId, TLShapePartial } from '@tldraw/tldraw'
import { TLShapeId, TLShapePartial } from 'tldraw'
// import test, { Page, expect } from '@playwright/test'
// import assert from 'assert'
// import { rename, writeFile } from 'fs/promises'
// import { setupPage } from '../shared-e2e'
// import { Editor, TLShapeId, TLShapePartial } from '@tldraw/tldraw'
// import { Editor, TLShapeId, TLShapePartial } from 'tldraw'
// declare const editor: Editor

2
apps/examples/e2e/tests/test-canvas-events.spec.ts
View file

@ -1,5 +1,5 @@
import test, { expect, Page } from '@playwright/test'
import { Editor } from '@tldraw/tldraw'
import { Editor } from 'tldraw'
import { setupPage } from '../shared-e2e'
declare const __tldraw_editor_events: any[]

2
apps/examples/e2e/tests/test-clipboard.spec.ts
View file

@ -1,5 +1,5 @@
import test, { expect } from '@playwright/test'
import { Editor } from '@tldraw/tldraw'
import { Editor } from 'tldraw'
import { setup } from '../shared-e2e'
export function sleep(ms: number) {

2
apps/examples/e2e/tests/test-focus.spec.ts
View file

@ -1,5 +1,5 @@
import test, { expect } from '@playwright/test'
import { Editor } from '@tldraw/tldraw'
import { Editor } from 'tldraw'
declare const EDITOR_A: Editor
declare const EDITOR_B: Editor

2
apps/examples/e2e/tests/test-smoke.spec.ts
View file

@ -1,5 +1,5 @@
import { expect } from '@playwright/test'
import { Editor, TLGeoShape } from '@tldraw/tldraw'
import { Editor, TLGeoShape } from 'tldraw'
import { getAllShapeTypes, setup } from '../shared-e2e'
import test from './fixtures/fixtures'

2
apps/examples/e2e/tests/test-style-panel.spec.ts
View file

@ -1,5 +1,5 @@
import { expect } from '@playwright/test'
import { Editor } from '@tldraw/tldraw'
import { Editor } from 'tldraw'
import { setup } from '../shared-e2e'
import test from './fixtures/fixtures'

2
apps/examples/e2e/tests/test-text.spec.ts
View file

@ -1,5 +1,5 @@
import test, { Page, expect } from '@playwright/test'
import { BoxModel, Editor } from '@tldraw/tldraw'
import { BoxModel, Editor } from 'tldraw'
import { setupPage } from '../shared-e2e'
export function sleep(ms: number) {

2
apps/examples/package.json
View file

@ -36,7 +36,6 @@
"@playwright/test": "^1.38.1",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@tldraw/assets": "workspace:*",
"@tldraw/tldraw": "workspace:*",
"@vercel/analytics": "^1.1.1",
"classnames": "^2.3.2",
"lazyrepo": "0.0.0-alpha.27",
@ -44,6 +43,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.17.0",
"tldraw": "workspace:*",
"vite": "^5.0.0"
},
"devDependencies": {

4
apps/examples/src/examples/api/APIExample.tsx
View file

@ -6,8 +6,8 @@ import {
Tldraw,
createShapeId,
useEditor,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
import { useEffect } from 'react'
// There's a guide at the bottom of this file!

4
apps/examples/src/examples/asset-props/AssetPropsExample.tsx
View file

@ -1,5 +1,5 @@
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function AssetPropsExample() {
return (

4
apps/examples/src/examples/basic/BasicExample.tsx
View file

@ -1,5 +1,5 @@
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function BasicExample() {
return (

2
apps/examples/src/examples/bounds-snapping-shape/BoundsSnappingShape.tsx
View file

@ -1,4 +1,4 @@
import { Editor, Tldraw } from '@tldraw/tldraw'
import { Editor, Tldraw } from 'tldraw'
import { PlayingCardTool } from './PlayingCardShape/playing-card-tool'
import { PlayingCardUtil } from './PlayingCardShape/playing-card-util'
import snapshot from './snapshot.json'

2
apps/examples/src/examples/bounds-snapping-shape/PlayingCardShape/playing-card-tool.tsx
View file

@ -1,4 +1,4 @@
import { BaseBoxShapeTool } from '@tldraw/tldraw'
import { BaseBoxShapeTool } from 'tldraw'
export class PlayingCardTool extends BaseBoxShapeTool {
static override id = 'PlayingCard'
static override initial = 'idle'

2
apps/examples/src/examples/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx
View file

@ -6,7 +6,7 @@ import {
ShapeProps,
T,
TLBaseShape,
} from '@tldraw/tldraw'
} from 'tldraw'
// There's a guide at the bottom of this file!

2
apps/examples/src/examples/bounds-snapping-shape/ui-overrides.tsx
View file

@ -6,7 +6,7 @@ import {
TldrawUiMenuItem,
toolbarItem,
useTools,
} from '@tldraw/tldraw'
} from 'tldraw'
// There's a guide at the bottom of this file!

4
apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx
View file

@ -1,6 +1,6 @@
import { TLEventInfo, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { useCallback, useState } from 'react'
import { TLEventInfo, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file!

4
apps/examples/src/examples/changing-default-colors/ChangingDefaultColorsExample.tsx
View file

@ -1,5 +1,5 @@
import { DefaultColorThemePalette, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { DefaultColorThemePalette, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file!

4
apps/examples/src/examples/context-toolbar/ContextToolbar.tsx
View file

@ -7,8 +7,8 @@ import {
track,
useEditor,
Vec,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
const SIZES = [
{ value: 's', icon: 'size-small' },

4
apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx
View file

@ -1,5 +1,5 @@
import { DefaultActionsMenu, TLComponents, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { DefaultActionsMenu, TLComponents, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
function CustomActionsMenu() {
return (

4
apps/examples/src/examples/custom-components/CustomComponentsExample.tsx
View file

@ -1,6 +1,6 @@
import { Tldraw, TLEditorComponents, toDomPrecision, useTransform } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { useRef } from 'react'
import { Tldraw, TLEditorComponents, toDomPrecision, useTransform } from 'tldraw'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file!

2
apps/examples/src/examples/custom-config/CardShape/CardShapeTool.tsx
View file

@ -1,4 +1,4 @@
import { BaseBoxShapeTool, TLClickEvent } from '@tldraw/tldraw'
import { BaseBoxShapeTool, TLClickEvent } from 'tldraw'
export class CardShapeTool extends BaseBoxShapeTool {
static override id = 'card'
static override initial = 'idle'

4
apps/examples/src/examples/custom-config/CardShape/CardShapeUtil.tsx
View file

@ -1,3 +1,4 @@
import { useState } from 'react'
import {
HTMLContainer,
Rectangle2d,
@ -5,8 +6,7 @@ import {
TLOnResizeHandler,
getDefaultColorTheme,
resizeBox,
} from '@tldraw/tldraw'
import { useState } from 'react'
} from 'tldraw'
import { cardShapeMigrations } from './card-shape-migrations'
import { cardShapeProps } from './card-shape-props'
import { ICardShape } from './card-shape-types'

2
apps/examples/src/examples/custom-config/CardShape/card-shape-migrations.ts
View file

@ -1,4 +1,4 @@
import { defineMigrations } from '@tldraw/tldraw'
import { defineMigrations } from 'tldraw'
// Migrations for the custom card shape (optional but very helpful)
export const cardShapeMigrations = defineMigrations({

2
apps/examples/src/examples/custom-config/CardShape/card-shape-props.ts
View file

@ -1,4 +1,4 @@
import { DefaultColorStyle, ShapeProps, T } from '@tldraw/tldraw'
import { DefaultColorStyle, ShapeProps, T } from 'tldraw'
import { ICardShape } from './card-shape-types'
// Validation for our custom card shape's props, using one of tldraw's default styles

2
apps/examples/src/examples/custom-config/CardShape/card-shape-types.ts
View file

@ -1,4 +1,4 @@
import { TLBaseShape, TLDefaultColorStyle } from '@tldraw/tldraw'
import { TLBaseShape, TLDefaultColorStyle } from 'tldraw'
// A type for our custom card shape
export type ICardShape = TLBaseShape<

4
apps/examples/src/examples/custom-config/CustomConfigExample.tsx
View file

@ -1,5 +1,5 @@
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import { CardShapeTool } from './CardShape/CardShapeTool'
import { CardShapeUtil } from './CardShape/CardShapeUtil'
import { components, uiOverrides } from './ui-overrides'

2
apps/examples/src/examples/custom-config/ui-overrides.tsx
View file

@ -6,7 +6,7 @@ import {
TldrawUiMenuItem,
toolbarItem,
useTools,
} from '@tldraw/tldraw'
} from 'tldraw'
// There's a guide at the bottom of this file!

4
apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx
View file

@ -6,8 +6,8 @@ import {
Tldraw,
TldrawUiMenuGroup,
TldrawUiMenuItem,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
function CustomContextMenu(props: TLUiContextMenuProps) {
return (

4
apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx
View file

@ -5,8 +5,8 @@ import {
Tldraw,
TldrawUiMenuGroup,
TldrawUiMenuItem,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
function CustomDebugMenu() {
return (

4
apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx
View file

@ -5,8 +5,8 @@ import {
Tldraw,
TldrawUiMenuGroup,
TldrawUiMenuItem,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
function CustomHelpMenu() {
return (

4
apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx
View file

@ -5,8 +5,8 @@ import {
TLUiKeyboardShortcutsDialogProps,
Tldraw,
TldrawUiMenuItem,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) {
return (

4
apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx
View file

@ -5,8 +5,8 @@ import {
Tldraw,
TldrawUiMenuGroup,
TldrawUiMenuItem,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
function CustomMainMenu() {
return (

4
apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx
View file

@ -1,5 +1,5 @@
import { TLComponents, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { TLComponents, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
function CustomNavigationPanel() {
return <div className="tlui-navigation-panel">here you are</div>

4
apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx
View file

@ -1,5 +1,5 @@
import { DefaultPageMenu, TLComponents, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { DefaultPageMenu, TLComponents, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
function CustomPageMenu() {
return (

4
apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx
View file

@ -4,8 +4,8 @@ import {
TLComponents,
Tldraw,
TldrawUiMenuItem,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
function CustomQuickActions() {
return (

4
apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx
View file

@ -9,8 +9,8 @@ import {
TldrawUiButtonLabel,
useEditor,
useRelevantStyles,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
} from 'tldraw'
import 'tldraw/tldraw.css'
function CustomStylePanel(props: TLUiStylePanelProps) {
const editor = useEditor()

2
apps/examples/src/examples/custom-styles/CardShape.tsx
View file

@ -8,7 +8,7 @@ import {
TLBaseShape,
TLDefaultColorStyle,
getDefaultColorTheme,
} from '@tldraw/tldraw'
} from 'tldraw'
// There's a guide at the bottom of this file!

4
apps/examples/src/examples/custom-styles/CustomStylesExample.tsx
View file

@ -1,5 +1,5 @@
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import { CardShapeTool, CardShapeUtil } from './CardShape'
import { FilterStyleUi } from './FilterStyleUi'
import { components, uiOverrides } from './ui-overrides'

2
apps/examples/src/examples/custom-styles/FilterStyleUi.tsx
View file

@ -1,4 +1,4 @@
import { track, useEditor } from '@tldraw/tldraw'
import { track, useEditor } from 'tldraw'
import { MyFilterStyle } from './CardShape'
// There's a guide at the bottom of this file!

2
apps/examples/src/examples/custom-styles/ui-overrides.tsx
View file

@ -6,7 +6,7 @@ import {
TldrawUiMenuItem,
toolbarItem,
useTools,
} from '@tldraw/tldraw'
} from 'tldraw'
// There's a guide at the bottom of this file!

Some files were not shown because too many files have changed in this diff Show more