tldraw.css (#1607)

This PR introduces `@tldraw/tldraw/tldraw.css`, an exported CSS file
that replaces the `editor.css` and `ui.css` that were previously copied
from the editor and ui packages. Instead, these files are combined into
the `tldraw.css` file, simplifying the import story when using
`@tldraw/tldraw`.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [tldraw] Removes `editor.css` and `ui.css` exports, replaces with
`tldraw.css`

.gitignore

@@ -50,8 +50,7 @@ tsconfig.build.json
 api-json
 api-md
 
-packages/tldraw/editor.css
+packages/tldraw/tldraw.css
-packages/tldraw/ui.css
 
 packages/assets/embed-icons
 packages/assets/fonts

apps/docs/content/docs/collaboration.mdx

@@ -6,4 +6,6 @@ date: 3/22/2023
 order: 7
 ---
 
-Coming soon.
+Coming soon.
+
+See the [tldraw repository](https://github.com/tldraw/tldraw/tree/main/apps/examples) for an example of how to use yjs with the `@tldraw/tldraw` library.

apps/docs/content/docs/installation.mdx

@@ -6,10 +6,24 @@ date: 3/22/2023
 order: 1
 ---
 
-First, install the `@tldraw/tldraw` package using `@alpha` for the **latest alpha release**. It also has peer dependencies on `signia` and `signia-react` which you will need to install at the same time.
+At the moment the `@tldraw/tldraw` package is in alpha. We also ship a canary version which is always up to date with the main branch of tldraw [repository](https://github.com/tldraw/tldraw).
+
+## Alpha
+
+First, install the `@tldraw/tldraw` package using `@alpha` for the latest.  The package also has peer dependencies on `signia` and `signia-react` which you will need to install at the same time.
 
 ```bash
 yarn add @tldraw/tldraw@alpha signia signia-react
 # or
 npm install @tldraw/tldraw@alpha signia signia-react
 ```
+
+## 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).
+
+```bash
+yarn add @tldraw/tldraw@canary signia signia-react
+# or
+npm install @tldraw/tldraw@canary signia signia-react
+```

apps/docs/content/docs/introduction.mdx

@@ -8,123 +8,42 @@ order: 0
 
 Welcome to the tldraw developer docs.
 
-tldraw is a React component that you can use to create infinite canvas experiences for the web. It is essentially the [tldraw.com](https://www.tldraw.com) application wrapped up and distributed as a React component, but with powerful APIs for creating custom shapes, tools, behaviors, and user interfaces elements.
+Here at tldraw, we make two things: a very good multiplayer whiteboard (at [tldraw.com](https://www.tldraw.com)) and the [open source](https://github.com/tldraw/tldraw) libraries used to create that product. This page is meant to provide documentation and reference for those open source libraries.
 
-![screenshot of tldraw](/images/screenshot.png)
+```tsx 
-
-These docs relate to tldraw's **alpha version**, which is [open source](https://github.com/tldraw/tldraw), permissively licensed under Apache 2.0, and available [on npm](https://www.npmjs.com/package/@tldraw/tldraw) under the alpha and canary versions.
-
-- Want to explore the code? Visit the [GitHub repo](https://github.com/tldraw/tldraw)).
-- Want to dive in? Visit the [examples StackBlitz](https://stackblitz.com/github/tldraw/tldraw/tree/examples?file=src%2F1-basic%2FBasicExample.tsx).
-- Found a bug or integration problem? Please create a ticket [here](https://github.com/tldraw/tldraw/issues).
-- Questions or feedback? Let us know on the [Discord](https://discord.gg/JMbeb96jsh).
-
-And if you are just looking for the regular tldraw app, try [tldraw.com](https://www.tldraw.com).
-
-## Installation
-
-First, install the `@tldraw/tldraw` package using `@alpha` for the **latest alpha release**.  The package also has peer dependencies on `signia` and `signia-react` which you will need to install at the same time.
-
-```bash
-yarn add @tldraw/tldraw@alpha signia signia-react
-# or
-npm install @tldraw/tldraw@alpha signia signia-react
-```
-
-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).
-
-```bash
-yarn add @tldraw/tldraw@canary signia signia-react
-# or
-npm install @tldraw/tldraw@canary signia signia-react
-```
-
-## Usage
-
-You should be able to use the `<Tldraw/>` component in any React editor.
-
-To use the `<Tldraw/>` component, create a file like this one:
-
-```tsx
 import { Tldraw } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 
 export default function () {
 	return (
-		<div
+		<div style={{ position: 'fixed', inset: 0 }}>
-			style={{
-				position: 'fixed',
-				inset: 0,
-			}}
-		>
 			<Tldraw />
 		</div>
 	)
 }
 ```
 
-In addition to the library, you will also need to:
+You can use the `<Tldraw>` React component to build on top of the default tldraw experience. It's easy to use and easy to extend with your own [custom shapes](/docs/shapes), [custom tools](/docs/tools), and [user interface](/docs/user-interface) overrides. 
 
-- import the **CSS files** for the editor and UI
+If you want to go even deeper, you can use the `<TldrawEditor>` component as a more minimal engine without the default tldraw shapes or user interface.
-- probably set a `viewport` meta tag in your **html**.
 
-See below for more detail on these.
+And in either case, you can use the [Editor API](/docs/editor) to drive the experience programatically in order to create or delete shapes, control the camera, or do just about anything you can imagine.
 
-#### Next.js / SSR
+Best of all, you can easily plug tldraw into the [collaboration backend](/docs/collaboration) of your choice.
 
-The `<Tldraw/>` component cannot be server-rendered. If you're using the component in a Next.js app, you will need to import it dynamically. The code to do that will look something like this:
+- Want to explore the code? Visit the [GitHub repo](https://github.com/tldraw/tldraw).
+- Want to try it out? Visit the [examples sandbox](https://stackblitz.com/github/tldraw/tldraw/tree/examples?file=src%2F1-basic%2FBasicExample.tsx).
 
-```tsx
+Otherwise, continue on to the [installation](/docs/installation) and [usage](/docs/usage) guides.
-import dynamic from "next/dynamic"
 
-const Editor = dynamic(
+## Community
-	async () => import('../components/Editor')),
-	{ ssr: false }
-)
 
-export default function MyPage() {
+Found a bug or want to request a feature? Create a issue [here](https://github.com/tldraw/tldraw/issues). To connect with the team and other users, join us on our [Discord](https://discord.gg/JMbeb96jsh).
-	return <Editor/>
-}
-```
 
-### `<Tldraw/>`
+If you spot an issue with these docs, please use the links at the bottom of each page to create a. If you would like to contribute, the docs are part of the [tldraw repo](https://github.com/tldraw/tldraw).
-
-The `<Tldraw/>` component combines several other pieces:
-
-- the tldraw editor (`@tldraw/editor`)
-- the tldraw UI (`@tldraw/ui`)
-- an engine (`@tldraw/sync-client`) for persistence and cross-tab synchronization
-
-> **Note:** In the future, this library will also include an engine for using our collaboration services.
-
-If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.
-
-### CSS
-
-In order to use the `<Tldraw/>` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`):
-
-```ts
-import '@tldraw/tldraw/editor.css'
-import '@tldraw/tldraw/ui.css'
-```
-
-You can overwrite these files with other CSS, customize the styles via package patches, or copy the contents into a different file and import that instead.
-
-In addition to these stylesheets, the root project imports the `src/index.css` file, so its styles are used for every example. Be sure to take a look at this file: you may find some of these styles necessary in your own usage of the `<Tldraw/>` component.
-
-### HTML
-
-You probably also want to update your `index.html`'s meta viewport element as shown below. 
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-```
-
-These may not be critical to `<Tldraw/>` performing correctly, however some features (such as safe area positioning) may not work correctly if these are not set.
 
 ## License
 
-The source code in this repository (as well as our distributions and releases) are currently licensed under Apache-2.0. The examples are licensed under MIT.
+Our open source libraries are licensed and distributed under Apache-2.0. 
 
-These licenses are subject to change in our upcoming 2.0 release. If you are planning to use use tldraw in a commercial product, please reach out at [hello@tldraw.com](mailto://hello@tldraw.com).
+Our plan is to keep these libraries permissively licensed while we develop a commercial offering for teams who want more from tldraw. If you're planning to use use tldraw in a commercial product, please reach out at [hello@tldraw.com](mailto://hello@tldraw.com).

apps/docs/content/docs/usage.mdx

@@ -6,84 +6,47 @@ date: 3/22/2023
 order: 2
 ---
 
-You should be able to use the `<Tldraw/>` component in any React editor.
+The `<Tldraw/>` component is the easiest way to get started with tldraw. It combines several lower-level libraries: the `TldrawEditor` component from `@tldraw/editor` and the `TldrawUi` component from `@tldraw/ui`.
 
 To use the `<Tldraw/>` component, create a file like this one:
 
 ```tsx
 import { Tldraw } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 
-export default function () {
+export default function TldrawExample() {
 	return (
-		<div
+		<div style={{ position: 'fixed', inset: 0 }} >
-			style={{
-				position: 'fixed',
-				inset: 0,
-			}}
-		>
 			<Tldraw />
 		</div>
 	)
 }
 ```
 
-In addition to the library, you will also need to:
-
-- import the **CSS files** for the editor and UI
-- probably set a `viewport` meta tag in your **html**.
-
-See below for more detail on these.
-
-#### A note on next.js / server-rendered react
-
-The `<Tldraw/>` component cannot be server-rendered. If you're using the component in a Next.js app, you will need to import it dynamically. The code to do that will look something like this:
-
-```tsx
-import dynamic from "next/dynamic"
-
-const Editor = dynamic(
-	async () => import('../components/Editor')),
-	{ ssr: false }
-)
-
-export default function MyPage() {
-	return <Editor/>
-}
-```
-
-### `<Tldraw/>`
-
-The `<Tldraw/>` component combines several other pieces:
-
-- the tldraw editor (`@tldraw/editor`)
-- the tldraw UI (`@tldraw/ui`)
-- an engine (`@tldraw/sync-client`) for persistence and cross-tab syncronization
-
-> **Note:** In the future, this library will also include an engine for using our collaboration services.
-
-If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.
-
 ### CSS
 
-In order to use the `<Tldraw/>` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`):
+In order to use the `<Tldraw/>` component, you should also import the `tldraw.css` file from the `@tldraw/tldraw` library. You can alternatively import this file inside of another CSS file using the `@import` syntax.
 
-```ts
+You can overwrite these files with other CSS or copy the contents into a different file and import that instead.
-import '@tldraw/tldraw/editor.css'
-import '@tldraw/tldraw/ui.css'
-```
-
-You can overwrite these files with other CSS, customize the styles via package patches, or copy the contents into a different file and import that instead.
-
-In addition to these stylesheets, the root project imports the `src/index.css` file, so its styles are used for every example. Be sure to take a look at this file: you may find some of these styles necessary in your own usage of the `<Tldraw/>` component.
 
 ### HTML
 
-You probably also want to update your `index.html`'s meta viewport element as shown below. 
+If you're using the tldraw component in a full-screen app, you probably also want to updte your `index.html`'s meta viewport element as shown below. 
 
 ```html
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 ```
 
-These may not be critical to `<Tldraw/>` performing correctly, however some features (such as safe area positioning) may not work correctly if these are not set.
+This change may not be critical to `<Tldraw/>` performing correctly, however some features (such as safe area positioning) will not work correctly if these viewport options are not set.
+
+## Server rendering
+
+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 will need to import it dynamically. Check the [examples repository](https://github.com/tldraw/examples) to see examples.
+
+## Using in Next.js, Create React App, Vite, etc.
+
+Check the [examples repository](https://github.com/tldraw/examples) to see examples of the tldraw component being used in various frameworks.
+
+## Going deeper
+
+If you wanted to have more granular control, you could also use those lower-level components directly. See [this example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for reference.

apps/docs/styles/globals.css

@@ -11,7 +11,7 @@
 		'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
 		'Courier New', monospace;
 
-	--color-tint-1: rgba(144, 144, 144, 0.1);
+	--color-tint-1: rgba(144, 144, 144, 0.08);
 	--color-tint-2: rgba(144, 144, 144, 0.15);
 	--color-tint-3: rgba(144, 144, 144, 0.3);
 	--color-tint-4: rgba(144, 144, 144, 0.5);
@@ -25,6 +25,17 @@
 
 	--shadow-small: 0px 0px 16px -2px rgba(0, 0, 0, 0.12), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
 	--shadow-big: 0px 0px 16px -2px rgba(0, 0, 0, 0.24), 0px 0px 4px 0px rgba(0, 0, 0, 0.24);
+
+	/* Code colors */
+	--hl: #4e484e;
+	--hl-1: rgb(54, 59, 69);
+	--hl-2: rgb(144, 81, 188);
+	--hl-3: rgb(178, 66, 69);
+	--hl-4: rgb(69, 141, 155);
+	--hl-5: rgb(100, 144, 65);
+	--hl-6: rgb(179, 108, 50);
+	--hl-7: rgb(73, 131, 216);
+	--hl-8: rgb(180, 133, 64);
 }
 
 [data-theme='dark'] {
@@ -37,6 +48,17 @@
 
 	--shadow-small: 0px 0px 16px -2px rgba(0, 0, 0, 0.52), 0px 0px 4px 0px rgba(0, 0, 0, 0.62);
 	--shadow-big: 0px 0px 16px -2px rgba(0, 0, 0, 0.54), 0px 0px 4px 0px rgba(0, 0, 0, 0.54);
+
+	/* Code colors */
+	--hl: #c8c5f1;
+	--hl-1: #5c6370;
+	--hl-2: #c678dd;
+	--hl-3: #e06c75;
+	--hl-4: #56b6c2;
+	--hl-5: #98c379;
+	--hl-6: #d19a66;
+	--hl-7: #61aeee;
+	--hl-8: #e6c07b;
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -828,19 +850,19 @@ body {
 /* ------------------- Code Themes ------------------ */
 
 .hljs {
-	color: var(--color-text);
+	color: var(--hl);
 }
 
 .hljs-comment,
 .hljs-quote {
-	color: #5c6370;
+	color: var(--hl-1);
 	font-style: italic;
 }
 
 .hljs-doctag,
 .hljs-keyword,
 .hljs-formula {
-	color: #c678dd;
+	color: var(--hl-2);
 }
 
 .hljs-section,
@@ -848,11 +870,11 @@ body {
 .hljs-selector-tag,
 .hljs-deletion,
 .hljs-subst {
-	color: #e06c75;
+	color: var(--hl-3);
 }
 
 .hljs-literal {
-	color: #56b6c2;
+	color: var(--hl-4);
 }
 
 .hljs-string,
@@ -860,7 +882,7 @@ body {
 .hljs-addition,
 .hljs-attribute,
 .hljs-meta .hljs-string {
-	color: #98c379;
+	color: var(--hl-5);
 }
 
 .hljs-attr,
@@ -871,7 +893,7 @@ body {
 .hljs-selector-attr,
 .hljs-selector-pseudo,
 .hljs-number {
-	color: #d19a66;
+	color: var(--hl-6);
 }
 
 .hljs-symbol,
@@ -880,13 +902,13 @@ body {
 .hljs-meta,
 .hljs-selector-id,
 .hljs-title {
-	color: #61aeee;
+	color: var(--hl-7);
 }
 
 .hljs-built_in,
 .hljs-title.class_,
 .hljs-class .hljs-title {
-	color: #e6c07b;
+	color: var(--hl-8);
 }
 
 .hljs-emphasis {

apps/examples/src/1-basic/BasicExample.tsx

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

apps/examples/src/10-custom-components/CustomComponentsExample.tsx

@@ -1,6 +1,5 @@
 import { Tldraw, TLEditorComponents } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 
 const components: Partial<TLEditorComponents> = {
 	Brush: ({ brush }) => (

apps/examples/src/11-user-presence/UserPresenceExample.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-inner-declarations */
 import { InstancePresenceRecordType, Tldraw } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { useRef } from 'react'
 
 const USER_NAME = 'huppy da arrow'

apps/examples/src/12-ui-events/UiEventsExample.tsx

@@ -1,6 +1,5 @@
 import { TLUiEventHandler, Tldraw } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { useCallback, useState } from 'react'
 
 export default function UiEventsExample() {

apps/examples/src/13-store-events/StoreEventsExample.tsx

@@ -1,6 +1,5 @@
 import { Editor, TLEventMapHandler, Tldraw } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { useCallback, useEffect, useState } from 'react'
 
 export default function StoreEventsExample() {

apps/examples/src/14-persistence/PersistenceExample.tsx

@@ -1,6 +1,5 @@
 import { Tldraw, createTLStore, defaultShapes } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { throttle } from '@tldraw/utils'
 import { useLayoutEffect, useState } from 'react'
 

apps/examples/src/15-custom-zones/ZonesExample.tsx

@@ -1,7 +1,5 @@
 import { Tldraw } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
-
 export default function Example() {
 	return (
 		<div className="tldraw__editor">

apps/examples/src/16-custom-styles/CustomStylesExample.tsx

@@ -1,6 +1,5 @@
 import { TLUiMenuGroup, Tldraw, menuItem, toolbarItem, useEditor } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { TLUiOverrides } from '@tldraw/ui/src/lib/overrides'
 import { track } from 'signia-react'
 import { CardShape, MyFilterStyle } from './CardShape'

apps/examples/src/2-api/APIExample.tsx

@@ -7,8 +7,7 @@ import {
 	createShapeId,
 	useEditor,
 } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { useEffect } from 'react'
 
 // The tldraw component shares its App instance via its onMount callback prop.

apps/examples/src/3-custom-config/CustomConfigExample.tsx

@@ -1,6 +1,5 @@
 import { TLUiMenuGroup, Tldraw, menuItem, toolbarItem } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { CardShape } from './CardShape'
 
 const shapes = [CardShape]

apps/examples/src/4-custom-ui/CustomUiExample.tsx

@@ -1,5 +1,5 @@
 import { Canvas, TldrawEditor, defaultShapes, defaultTools, useEditor } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
 import { useEffect } from 'react'
 import { track } from 'signia-react'
 import './custom-ui.css'

apps/examples/src/5-exploded/ExplodedExample.tsx

@@ -6,8 +6,7 @@ import {
 	defaultShapes,
 	defaultTools,
 } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 
 export default function ExplodedExample() {
 	return (

apps/examples/src/6-scroll/ScrollExample.tsx

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

apps/examples/src/7-multiple/MultipleExample.tsx

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

apps/examples/src/8-error-boundary/ErrorBoundaryExample.tsx

@@ -1,6 +1,5 @@
 import { createShapeId, Tldraw, TLShapePartial } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { ErrorShape } from './ErrorShape'
 
 const shapes = [ErrorShape]

apps/examples/src/9-hide-ui/HideUiExample.tsx

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

apps/examples/src/end-to-end/end-to-end.tsx

@@ -1,6 +1,5 @@
 import { Tldraw } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 
 export default function EndToEnd() {
 	;(window as any).__tldraw_editor_events = []

apps/examples/src/yjs/YjsExample.tsx

@@ -1,6 +1,5 @@
 import { Tldraw, useEditor } from '@tldraw/tldraw'
-import '@tldraw/tldraw/editor.css'
+import '@tldraw/tldraw/tldraw.css'
-import '@tldraw/tldraw/ui.css'
 import { track } from 'signia-react'
 import { useYjsStore } from './useYjsStore'
 

packages/editor/editor.css

@@ -1,6 +1,4 @@
-/*
+/* @tldraw/editor */
-https://alex.dytry.ch/toys/palette/?palette=%7B%22families%22:%5B%22black%22,%22grey%22,%22white%22,%22green%22,%22light-green%22,%22blue%22,%22light-blue%22,%22violet%22,%22light-violet%22,%22red%22,%22light-red%22,%22orange%22,%22yellow%22%5D,%22shades%22:%5B%22light-mode%22,%22dark-mode%22,%22hl-light%22,%22hl-dark%22%5D,%22colors%22:%5B%5B%5B0.2308,0,null%5D,%5B0.9097,0,null%5D,%5B0.2308,0,null%5D,%5B0.2308,0,null%5D%5D,%5B%5B0.7692,0.0145,248.02%5D,%5B0.6778,0.0118,256.72%5D,%5B0.7692,0.0145,248.02%5D,%5B0.7692,0.0145,248.02%5D%5D,%5B%5B1,0,null%5D,%5B0.2308,0,null%5D,%5B1,0,null%5D,%5B1,0,null%5D%5D,%5B%5B0.5851,0.1227,164.1%5D,%5B0.5319,0.0811,162.23%5D,%5B0.8729,0.2083,173.3%5D,%5B0.5851,0.152,173.3%5D%5D,%5B%5B0.7146,0.1835,146.44%5D,%5B0.6384,0.1262,143.36%5D,%5B0.8603,0.2438,140.11%5D,%5B0.6082,0.2286,140.11%5D%5D,%5B%5B0.5566,0.2082,268.35%5D,%5B0.4961,0.1644,270.65%5D,%5B0.7158,0.173,243.85%5D,%5B0.5573,0.178,243.85%5D%5D,%5B%5B0.718,0.1422,246.06%5D,%5B0.6366,0.1055,250.98%5D,%5B0.8615,0.1896,200.03%5D,%5B0.707,0.161,200.03%5D%5D,%5B%5B0.5783,0.2186,319.15%5D,%5B0.5043,0.1647,315.37%5D,%5B0.728,0.2001,307.45%5D,%5B0.5433,0.2927,307.45%5D%5D,%5B%5B0.7904,0.1516,319.77%5D,%5B0.6841,0.1139,315.99%5D,%5B0.812,0.21,327.8%5D,%5B0.5668,0.281,327.8%5D%5D,%5B%5B0.5928,0.2106,26.53%5D,%5B0.5112,0.1455,26.18%5D,%5B0.7326,0.21,20.59%5D,%5B0.554,0.2461,20.59%5D%5D,%5B%5B0.7563,0.146,21.1%5D,%5B0.6561,0.0982,20.86%5D,%5B0.7749,0.178,6.8%5D,%5B0.5565,0.2454,6.8%5D%5D,%5B%5B0.6851,0.1954,44.57%5D,%5B0.5958,0.1366,46.6%5D,%5B0.8207,0.175,68.62%5D,%5B0.6567,0.164,68.61%5D%5D,%5B%5B0.8503,0.1149,68.95%5D,%5B0.7404,0.0813,72.25%5D,%5B0.8939,0.2137,100.36%5D,%5B0.7776,0.186,100.36%5D%5D%5D%7D&selected=3
-*/
 
 .tl-container {
 	width: 100%;

packages/tldraw/package.json

@@ -41,8 +41,7 @@
 		"lint": "yarn run -T tsx ../../scripts/lint.ts"
 	},
 	"files": [
-		"editor.css",
+		"tldraw.css"
-		"ui.css"
 	],
 	"dependencies": {
 		"@tldraw/editor": "workspace:*",

packages/tldraw/scripts/copy-css-files.mjs

@@ -1,8 +1,5 @@
-import { join } from 'path'
+import { readFileSync, writeFileSync } from 'fs'
-
+import { dirname, join } from 'path'
-import { existsSync, rmSync } from 'fs'
-import { copy } from 'fs-extra'
-import { dirname } from 'path'
 import { fileURLToPath } from 'url'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -10,21 +7,21 @@ const __dirname = dirname(__filename)
 
 const packageDir = join(__dirname, '..')
 
-const files = [
+let combinedContent = [
-	{
+	join(packageDir, '..', 'editor', 'editor.css'),
-		from: join(packageDir, '..', 'editor', 'editor.css'),
+	join(packageDir, '..', 'ui', 'ui.css'),
-		to: join(packageDir, 'editor.css'),
+].reduce(
+	(acc, path) => {
+		const content = readFileSync(path, 'utf8')
+		acc += content + '\n'
+		return acc
 	},
-	{
+	`/* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */ 
-		from: join(packageDir, '..', 'ui', 'ui.css'),
+/* This file is created by the copy-css-files.mjs script in @tldraw/tldraw. */
-		to: join(packageDir, 'ui.css'),
+/* It combines @tldraw/editor/editor.css and @tldraw/ui/ui.css */
-	},
-]
 
-for (const { from, to } of files) {
+`
-	if (existsSync(to)) {
+)
-		rmSync(to)
-	}
 
-	await copy(from, to)
+const destination = join(packageDir, 'tldraw.css')
-}
+writeFileSync(destination, combinedContent)

packages/ui/ui.css

@@ -1,3 +1,5 @@
+/* @tldraw/ui */
+
 .tl-container {
 	--layer-panels: 300;
 	--layer-menus: 400;