@tldraw/tldraw 5.0.1 → 5.1.0-canary.0c9c9b6282a5

package/dist-cjs/index.js

@@ -19,7 +19,7 @@ var import_tldraw = require("tldraw");
 __reExport(index_exports, require("tldraw"), module.exports);
 (0, import_tldraw.registerTldrawLibraryVersion)(
   "@tldraw/tldraw",
-  "5.0.1",
+  "5.1.0-canary.0c9c9b6282a5",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-esm/index.mjs

@@ -2,7 +2,7 @@ import { registerTldrawLibraryVersion } from "tldraw";
 export * from "tldraw";
 registerTldrawLibraryVersion(
   "@tldraw/tldraw",
-  "5.0.1",
+  "5.1.0-canary.0c9c9b6282a5",
   "esm"
 );
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,73 +1,73 @@
 {
-  "name": "@tldraw/tldraw",
-  "description": "A tiny little drawing editor.",
-  "version": "5.0.1",
-  "author": {
-    "name": "tldraw Inc.",
-    "email": "hello@tldraw.com"
-  },
-  "homepage": "https://tldraw.dev",
-  "license": "SEE LICENSE IN LICENSE.md",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tldraw/tldraw"
-  },
-  "bugs": {
-    "url": "https://github.com/tldraw/tldraw/issues"
-  },
-  "keywords": [
-    "tldraw",
-    "sdk",
-    "drawing",
-    "app",
-    "development",
-    "whiteboard",
-    "canvas",
-    "infinite"
-  ],
-  "main": "dist-cjs/index.js",
-  "scripts": {
-    "test-ci": "yarn run -T vitest run --passWithNoTests",
-    "test": "yarn run -T vitest --passWithNoTests",
-    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
-    "predev": "node ./scripts/copy-css-files.mjs",
-    "dev": "chokidar '../tldraw/tldraw.css' -c 'node ./scripts/copy-css-files.mjs'",
-    "prebuild": "node ./scripts/copy-css-files.mjs",
-    "build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
-    "build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
-    "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
-    "postpack": "../../internal/scripts/postpack.sh",
-    "pack-tarball": "yarn pack",
-    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
-  },
-  "files": [
-    "tldraw.css",
-    "dist-esm",
-    "dist-cjs",
-    "src"
-  ],
-  "dependencies": {
-    "tldraw": "5.0.1"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0 || ^19.2.1",
-    "react-dom": "^18.2.0 || ^19.2.1"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "chokidar-cli": "^3.0.0",
-    "lazyrepo": "0.0.0-alpha.27",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1"
-  },
-  "module": "dist-esm/index.mjs",
-  "source": "src/index.ts",
-  "exports": {
-    ".": {
-      "import": "./dist-esm/index.mjs",
-      "require": "./dist-cjs/index.js"
-    },
-    "./tldraw.css": "./tldraw.css"
-  }
+	"name": "@tldraw/tldraw",
+	"description": "A tiny little drawing editor.",
+	"version": "5.1.0-canary.0c9c9b6282a5",
+	"author": {
+		"name": "tldraw Inc.",
+		"email": "hello@tldraw.com"
+	},
+	"homepage": "https://tldraw.dev",
+	"license": "SEE LICENSE IN LICENSE.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/tldraw/tldraw"
+	},
+	"bugs": {
+		"url": "https://github.com/tldraw/tldraw/issues"
+	},
+	"keywords": [
+		"tldraw",
+		"sdk",
+		"drawing",
+		"app",
+		"development",
+		"whiteboard",
+		"canvas",
+		"infinite"
+	],
+	"main": "dist-cjs/index.js",
+	"scripts": {
+		"test-ci": "yarn run -T vitest run --passWithNoTests",
+		"test": "yarn run -T vitest --passWithNoTests",
+		"test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
+		"predev": "node ./scripts/copy-css-files.mjs",
+		"dev": "chokidar '../tldraw/tldraw.css' -c 'node ./scripts/copy-css-files.mjs'",
+		"prebuild": "node ./scripts/copy-css-files.mjs",
+		"build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
+		"build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
+		"prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
+		"postpack": "../../internal/scripts/postpack.sh",
+		"pack-tarball": "yarn pack",
+		"lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
+	},
+	"files": [
+		"tldraw.css",
+		"dist-esm",
+		"dist-cjs",
+		"src"
+	],
+	"dependencies": {
+		"tldraw": "workspace:*"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0 || ^19.2.1",
+		"react-dom": "^18.2.0 || ^19.2.1"
+	},
+	"devDependencies": {
+		"@types/react": "^19.2.7",
+		"@types/react-dom": "^19.2.3",
+		"chokidar-cli": "^3.0.0",
+		"lazyrepo": "0.0.0-alpha.27",
+		"react": "^19.2.1",
+		"react-dom": "^19.2.1"
+	},
+	"module": "dist-esm/index.mjs",
+	"source": "src/index.ts",
+	"exports": {
+		".": {
+			"import": "./dist-esm/index.mjs",
+			"require": "./dist-cjs/index.js"
+		},
+		"./tldraw.css": "./tldraw.css"
+	}
 }

package/tldraw.css

@@ -1634,6 +1634,10 @@ it from receiving any pointer events or affecting the cursor. */
 	font-size: 12px;
 	flex-grow: 2;
 	text-align: start;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 /*
@@ -1885,6 +1889,11 @@ it from receiving any pointer events or affecting the cursor. */
 	text-align: center;
 }
 
+.tlui-zoom-menu__button[data-state='open']::after {
+	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	opacity: 1;
+}
+
 /* --------------------- Layout --------------------- */
 
 .tlui-layout {
@@ -2337,237 +2346,250 @@ it from receiving any pointer events or affecting the cursor. */
 /* ------------------- Page Select ------------------ */
 
 .tlui-page-menu__wrapper {
-	position: relative;
 	display: flex;
 	flex-direction: column;
-	width: 260px;
-	height: fit-content;
-	max-height: 50vh;
+	width: 220px;
 }
 
 .tlui-page-menu__trigger {
 	width: auto;
 }
 
-.tlui-page-menu__header {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	width: 100%;
-	height: 40px;
-	padding-inline-start: var(--tl-space-4);
-	border-bottom: 1px solid var(--tl-color-divider);
+.tlui-page-menu__trigger[data-state='open']::after {
+	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	opacity: 1;
 }
 
-.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
-	margin-right: -4px;
+.tlui-page-menu__list {
+	flex: 0 0 auto;
+	overflow-x: hidden;
+	overflow-y: auto;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
 }
 
-.tlui-page-menu__header__title {
-	color: var(--tl-color-text);
-	font-size: 12px;
-	flex-grow: 2;
+.tlui-page-menu__list::-webkit-scrollbar {
+	display: none;
 }
 
-.tlui-page-menu__name {
-	flex-grow: 2;
-	text-align: start;
+.tlui-page-menu__list__content {
+	position: relative;
 	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
-.tlui-page-menu__list {
+.tlui-page-menu__resize-handle {
+	flex: 0 0 auto;
 	position: relative;
-	touch-action: auto;
-	flex-direction: column;
-	max-height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-	touch-action: auto;
+	height: 1px;
+	cursor: ns-resize;
+	touch-action: none;
+	background: var(--tl-color-divider);
+	transition: background-color ease-in-out 150ms 80ms;
+	z-index: 999;
 }
 
-.tlui-page-menu__item {
-	position: relative;
+/* Hit test area */
+.tlui-page-menu__resize-handle::after {
+	content: '';
+	position: absolute;
+	inset: -4px 0;
+	background: none;
+	z-index: 2000;
+	pointer-events: all;
 }
 
-.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button[data-state='open'] {
-	opacity: 1;
+/* Thick blue indicator */
+.tlui-page-menu__resize-handle::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 1.5px;
+	background: transparent;
+	pointer-events: none;
+	z-index: 2001;
 }
 
-@media (hover: hover) {
-	.tlui-page-menu__item:hover > .tlui-page_menu__item__submenu > .tlui-button {
-		opacity: 1;
-	}
+.tlui-page-menu__resize-handle[data-resizing='true']::before {
+	background: var(--tl-color-selected);
+	transition: none;
 }
 
-.tlui-page-menu__item:nth-of-type(n + 2) {
-	margin-top: -4px;
+.tlui-page-menu__create-button {
+	flex: 0 0 auto;
+	margin: 0;
 }
 
 .tlui-page-menu__item__button {
-	width: 100%;
-}
-
-.tlui-page-menu__item__button:not(:only-child) {
-	flex-grow: 2;
-	margin-inline-end: -2px;
+	flex: 1 1 auto;
+	min-width: 0px;
 }
 
-.tlui-page-menu__item__button > span {
-	display: block;
-	flex-grow: 2;
-	text-align: start;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.tlui-page-menu__item__button::after,
+.tlui-page-menu__item__drag-handle::after {
+	content: none;
 }
 
-.tlui-page-menu__item__button > span {
+.tlui-page-menu__item__button > .tlui-button__label {
 	padding-inline-end: calc(40px - 12px);
 }
 
-@media (hover: hover) {
-	.tlui-page-menu__item__button > span {
-		padding-inline-end: 0px;
-	}
-
-	.tlui-page-menu__item:hover > .tlui-page-menu__item__button > span {
-		padding-inline-end: calc(40px - 12px);
-	}
-}
-
-.tlui-page-menu__item__button__checkbox {
-	padding-inline-start: 35px;
-}
-
-.tlui-page-menu__item__button__check {
-	position: absolute;
-	inset-inline-start: 0px;
-	width: 24px;
-	padding-inline-start: 10px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--tl-color-text);
-}
-
-.tlui-page_menu__item__sortable {
+.tlui-page-menu__item {
 	position: absolute;
 	top: 0px;
 	inset-inline-start: 0px;
 	width: 100%;
-	height: fit-content;
+	height: 40px;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	overflow: hidden;
+	transition: transform 0.08s ease-out;
+}
+
+.tlui-page-menu__item::before {
+	content: '';
+	position: absolute;
+	inset: 4px;
+	border-radius: var(--tl-radius-2);
+	background: var(--tl-color-muted-2);
+	opacity: 0;
+	pointer-events: none;
+}
+
+.tlui-page-menu__item > * {
+	position: relative;
 	z-index: var(--tl-layer-above);
 }
 
-.tlui-page_menu__item__sortable__title {
+.tlui-page-menu__item[data-iscurrent='true']:not([data-editing='true'])::before {
+	background: var(--tl-color-hint);
+	opacity: 1;
+}
+
+.tlui-page-menu__item__title {
 	flex: 1;
+	height: 40px;
+	position: relative;
 }
 
-.tlui-page_menu__item__sortable__title > .tlui-input__wrapper {
+.tlui-page-menu__item__title::before {
+	content: '';
+	position: absolute;
+	inset: 4px;
+	border-radius: var(--tl-radius-2);
+	border: 1px solid var(--tl-color-primary);
+	pointer-events: none;
+}
+
+.tlui-page-menu__item__title > .tlui-input__wrapper {
 	height: 100%;
 }
 
-.tlui-page_menu__item__sortable:focus-visible {
-	z-index: var(--tl-layer-focused-input);
+.tlui-page-menu__item[data-dragging='true'],
+.tlui-page-menu__item[data-dragging='true'] .tlui-page-menu__item__button,
+.tlui-page-menu__item[data-dragging='true'] .tlui-page-menu__item__drag-handle {
+	cursor: grabbing;
+	transition: none;
 }
 
-.tlui-page_menu__item__sortable__handle {
-	touch-action: none;
-	width: 32px;
-	min-width: 0px;
-	height: 40px;
-	cursor: grab;
+.tlui-page-menu__item[data-dragging='true'] {
+	background: var(--tl-color-panel);
+	opacity: 1;
+}
+
+.tlui-page-menu__item__drag-handle {
+	flex: 0 0 32px;
+	min-width: 32px;
+	padding: 0px;
 	color: var(--tl-color-text-3);
-	flex-shrink: 0;
-	margin-inline-end: -9px;
+	cursor: grab;
+	touch-action: none;
 }
 
-.tlui-page_menu__item__sortable__handle:active {
-	cursor: grabbing;
+.tlui-page-menu__item__drag-handle > .tlui-icon {
+	position: relative;
+	inset-inline-start: 1px;
+}
+
+.tlui-page-menu__item__drag-handle + .tlui-page-menu__item__button {
+	padding-inline-start: 0px;
 }
 
 .tlui-page-menu__item__input {
 	margin-inline-start: 12px;
-	height: 100%;
 }
 
-/* The more menu has complex CSS here: */
-/* If the user can hover, then visible but opacity zero until hover */
-/* If the user cannot hover, then not displayed unless editing, and then opacity 1 */
-
-.tlui-page_menu__item__submenu {
-	pointer-events: all;
+.tlui-page-menu__item__submenu {
 	position: absolute;
 	inset-inline-end: 0px;
 	top: 0px;
 	height: 100%;
-	cursor: pointer;
-	margin: 0px;
-	margin-inline-start: -2px;
 	z-index: 10;
 }
 
-.tlui-page_menu__item__submenu > .tlui-button {
+.tlui-page-menu__item__submenu > .tlui-button {
 	opacity: 0;
+	color: var(--tl-color-text-3);
+}
+
+.tlui-page-menu__item__submenu > .tlui-button::after {
+	content: none;
 }
 
-.tlui-page_menu__item__sortable:focus-visible > .tlui-page_menu__item__submenu > .tlui-button,
-.tlui-page_menu__item__submenu[data-isediting='true'],
-.tlui-page_menu__item__submenu > .tlui-button[data-state='open'],
-.tlui-page_menu__item__submenu > .tlui-button:focus-visible {
+.tlui-page-menu__item:has(.tlui-button:focus-visible)
+	> .tlui-page-menu__item__submenu
+	> .tlui-button,
+.tlui-page-menu__item__submenu > .tlui-button[data-state='open'],
+.tlui-page-menu__item__submenu > .tlui-button:focus-visible {
 	opacity: 1;
 }
 
-.tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+/* Hide the kebab while any row is being dragged: :hover sticks during pointer */
+/* capture, which would otherwise leave the kebab visible mid-drag. */
+.tlui-page-menu__list__content[data-dragging='true']
+	.tlui-page-menu__item
+	> .tlui-page-menu__item__submenu
+	> .tlui-button {
+	opacity: 0;
+}
+
+.tl-container[data-coarse='true'] .tlui-page-menu__item__submenu > .tlui-button {
 	opacity: 1;
 }
 
-.tl-container[dir='rtl'] .tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+.tl-container[data-coarse='true'] .tlui-page-menu__item__button > .tlui-button__label {
+	padding-inline-end: calc(40px - 12px);
 }
 
 @media (hover: hover) {
-	.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
-		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
-		opacity: 1;
+	.tlui-page-menu__resize-handle:hover::before {
+		background: var(--tl-color-selected);
+		height: 2px;
+		transition: background-color 150ms 80ms;
 	}
 
-	.tl-container[dir='rtl']
-		.tlui-page_menu__item__submenu
-		> .tlui-button[data-state='open']:not(:hover)::after {
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	.tlui-page-menu__item:not([data-editing='true']):hover::before {
+		opacity: 1;
 	}
-}
 
-.tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
-	opacity: 1;
-}
-
-.tlui-button__icon {
-	padding: 0px;
-}
+	.tlui-page-menu__item:hover > .tlui-page-menu__item__submenu > .tlui-button {
+		opacity: 1;
+	}
 
-.tlui-page-menu__item__button .tlui-button__icon {
-	margin-inline-end: 4px;
-}
+	.tlui-page-menu__item__button > .tlui-button__label {
+		padding-inline-end: 0px;
+	}
 
-@media (hover: hover) {
-	.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button {
-		opacity: 0;
+	.tlui-page-menu__item:hover > .tlui-page-menu__item__button > .tlui-button__label {
+		padding-inline-end: calc(40px - 12px);
 	}
 
-	.tlui-page_menu__item__submenu:hover > .tlui-button {
-		opacity: 1;
+	.tlui-page-menu__item__submenu > .tlui-button:hover {
+		color: var(--tl-color-text);
 	}
 }
-
 /* -------------- Skip to main content -------------- */
 
 .tl-skip-to-main-content {