@tldraw/tldraw 5.0.1 → 5.1.0-canary.138ec8e1a0c7

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.138ec8e1a0c7",
   "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.138ec8e1a0c7",
   "esm"
 );
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "5.0.1",
+  "version": "5.1.0-canary.138ec8e1a0c7",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -47,7 +47,7 @@
     "src"
   ],
   "dependencies": {
-    "tldraw": "5.0.1"
+    "tldraw": "5.1.0-canary.138ec8e1a0c7"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",

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;
 }
 
 /*
@@ -2337,237 +2341,231 @@ 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__header > .tlui-button:nth-of-type(1) {
-	margin-right: -4px;
-}
-
-.tlui-page-menu__header__title {
-	color: var(--tl-color-text);
-	font-size: 12px;
-	flex-grow: 2;
+.tlui-page-menu__list {
+	flex: 0 0 auto;
+	overflow-x: hidden;
+	overflow-y: auto;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
 }
 
-.tlui-page-menu__name {
-	flex-grow: 2;
-	text-align: start;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.tlui-page-menu__list::-webkit-scrollbar {
+	display: none;
 }
 
-.tlui-page-menu__list {
+.tlui-page-menu__list__content {
 	position: relative;
-	touch-action: auto;
-	flex-direction: column;
-	max-height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-	touch-action: auto;
 }
 
-.tlui-page-menu__item {
+.tlui-page-menu__resize-handle {
+	flex: 0 0 auto;
 	position: relative;
+	height: 7px;
+	margin-bottom: -3px;
+	cursor: ns-resize;
+	touch-action: none;
+	z-index: 999;
 }
 
-.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button[data-state='open'] {
-	opacity: 1;
+.tlui-page-menu__resize-handle::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 0;
+	right: 0;
+	height: 1px;
+	background: var(--tl-color-divider);
+	transition: background-color 100ms;
 }
 
-@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%;
+	flex: 1 1 auto;
+	min-width: 0px;
 }
 
-.tlui-page-menu__item__button:not(:only-child) {
-	flex-grow: 2;
-	margin-inline-end: -2px;
+.tlui-page-menu__item__button::after,
+.tlui-page-menu__item__drag-handle::after {
+	content: none;
 }
 
-.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 > 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__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__sortable__title > .tlui-input__wrapper {
+.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[data-dragging='true'] {
+	background: var(--tl-color-panel);
+	opacity: 1;
 }
 
-.tlui-page_menu__item__sortable__handle {
-	touch-action: none;
-	width: 32px;
-	min-width: 0px;
-	height: 40px;
-	cursor: grab;
+.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__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__submenu > .tlui-button::after {
+	content: none;
+}
+
+.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 {