@tldraw/editor 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6

package/editor.css

@@ -163,12 +163,11 @@
 	--color-selected: hsl(214, 84%, 56%);
 	--color-selected-contrast: hsl(0, 0%, 100%);
 	--color-focus: hsl(219, 65%, 50%);
-	--color-tooltip: hsla(200, 14%, 4%, 1);
 	/* Text */
 	--color-text: hsl(0, 0%, 0%);
 	--color-text-0: hsl(0, 0%, 11%);
 	--color-text-1: hsl(0, 0%, 18%);
-	--color-text-3: hsl(204, 4%, 45%);
+	--color-text-3: hsl(220, 2%, 65%);
 	--color-text-shadow: hsl(0, 0%, 100%);
 	--color-text-highlight: hsl(52, 100%, 50%);
 	--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
@@ -219,12 +218,11 @@
 	--color-selected: hsl(217, 89%, 61%);
 	--color-selected-contrast: hsl(0, 0%, 100%);
 	--color-focus: hsl(217, 76%, 80%);
-	--color-tooltip: hsla(0, 0%, 100%, 1);
 	/* Text */
 	--color-text: hsl(210, 17%, 98%);
 	--color-text-0: hsl(0, 9%, 94%);
 	--color-text-1: hsl(0, 0%, 85%);
-	--color-text-3: hsl(204, 4%, 75%);
+	--color-text-3: hsl(210, 6%, 45%);
 	--color-text-shadow: hsl(210, 13%, 18%);
 	--color-text-highlight: hsl(52, 100%, 41%);
 	--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
@@ -776,7 +774,8 @@ input,
 	position: static;
 }
 
-.tl-text-wrapper[data-isediting='false'] .tl-text-input {
+.tl-text-wrapper[data-isediting='false'] .tl-text-input,
+.tl-arrow-label[data-isediting='false'] .tl-text-input {
 	opacity: 0;
 	cursor: var(--tl-cursor-default);
 }
@@ -969,14 +968,14 @@ input,
 	font-size: 14px;
 	font-weight: 500;
 	opacity: 0;
-	animation: tl-fade-in 0.2s ease-in-out forwards;
+	animation: fade-in 0.2s ease-in-out forwards;
 	animation-delay: 0.2s;
 	position: absolute;
 	inset: 0px;
 	z-index: var(--layer-canvas-blocker);
 }
 
-@keyframes tl-fade-in {
+@keyframes fade-in {
 	0% {
 		opacity: 0;
 	}
@@ -985,19 +984,6 @@ input,
 	}
 }
 
-.tl-spinner {
-	animation: tl-spin 1s linear infinite;
-}
-
-@keyframes tl-spin {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
 /* ---------------------- Brush --------------------- */
 
 .tl-brush {
@@ -1189,7 +1175,7 @@ input,
 
 /* --------------------- Arrow shape -------------------- */
 
-.tl-shape[data-shape-type='arrow'] .tl-text-label {
+.tl-arrow-label {
 	position: absolute;
 	top: -1px;
 	left: -1px;
@@ -1204,15 +1190,33 @@ input,
 	text-shadow: var(--tl-text-outline);
 }
 
-.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
+.tl-arrow-label[data-isediting='true'] p {
+	opacity: 0;
+}
+
+.tl-arrow-label__inner {
 	border-radius: var(--radius-1);
 	box-sizing: content-box;
+	position: relative;
 	height: max-content;
 	width: max-content;
+	pointer-events: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
-.tl-shape[data-shape-type='arrow'] .tl-text {
+.tl-arrow-label .tl-arrow {
+	position: relative;
 	height: max-content;
+	padding: inherit;
+	overflow: visible;
+}
+
+.tl-arrow-label textarea {
+	padding: inherit;
+	/* Don't allow textarea to be zero width */
+	min-width: 4px;
 }
 
 .tl-arrow-hint {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
-  "description": "tldraw infinite canvas SDK (editor).",
-  "version": "3.16.0-canary.ffdf566dd0a8",
+  "description": "A tiny little drawing app (editor).",
+  "version": "3.16.0-internal.a478398270c6",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -17,7 +17,6 @@
   },
   "keywords": [
     "tldraw",
-    "sdk",
     "drawing",
     "app",
     "development",
@@ -49,12 +48,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.16.0-canary.ffdf566dd0a8",
-    "@tldraw/state-react": "3.16.0-canary.ffdf566dd0a8",
-    "@tldraw/store": "3.16.0-canary.ffdf566dd0a8",
-    "@tldraw/tlschema": "3.16.0-canary.ffdf566dd0a8",
-    "@tldraw/utils": "3.16.0-canary.ffdf566dd0a8",
-    "@tldraw/validate": "3.16.0-canary.ffdf566dd0a8",
+    "@tldraw/state": "3.16.0-internal.a478398270c6",
+    "@tldraw/state-react": "3.16.0-internal.a478398270c6",
+    "@tldraw/store": "3.16.0-internal.a478398270c6",
+    "@tldraw/tlschema": "3.16.0-internal.a478398270c6",
+    "@tldraw/utils": "3.16.0-internal.a478398270c6",
+    "@tldraw/validate": "3.16.0-internal.a478398270c6",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -67,10 +67,6 @@ export {
 	DefaultShapeIndicators,
 	type TLShapeIndicatorsProps,
 } from './lib/components/default-components/DefaultShapeIndicators'
-export {
-	DefaultShapeWrapper,
-	type TLShapeWrapperProps,
-} from './lib/components/default-components/DefaultShapeWrapper'
 export {
 	DefaultSnapIndicator,
 	type TLSnapIndicatorProps,
@@ -265,11 +261,9 @@ export {
 	type TLCameraMoveOptions,
 	type TLCameraOptions,
 	type TLExportType,
-	type TLGetShapeAtPointOptions,
 	type TLImageExportOptions,
 	type TLSvgExportOptions,
 	type TLSvgOptions,
-	type TLUpdatePointerOptions,
 } from './lib/editor/types/misc-types'
 export {
 	type TLAdjacentDirection,
@@ -293,13 +287,7 @@ export {
 	type ContainerProviderProps,
 } from './lib/hooks/useContainer'
 export { getCursor } from './lib/hooks/useCursor'
-export {
-	EditorContext,
-	EditorProvider,
-	useEditor,
-	useMaybeEditor,
-	type EditorProviderProps,
-} from './lib/hooks/useEditor'
+export { EditorContext, useEditor, useMaybeEditor } from './lib/hooks/useEditor'
 export { useEditorComponents } from './lib/hooks/useEditorComponents'
 export type { TLEditorComponents } from './lib/hooks/useEditorComponents'
 export { useEvent, useReactiveEvent } from './lib/hooks/useEvent'
@@ -352,7 +340,6 @@ export { CubicBezier2d } from './lib/primitives/geometry/CubicBezier2d'
 export { CubicSpline2d } from './lib/primitives/geometry/CubicSpline2d'
 export { Edge2d } from './lib/primitives/geometry/Edge2d'
 export { Ellipse2d } from './lib/primitives/geometry/Ellipse2d'
-export { getVerticesCountForArcLength } from './lib/primitives/geometry/geometry-constants'
 export {
 	Geometry2d,
 	Geometry2dFilters,
@@ -451,7 +438,6 @@ export {
 	setPointerCapture,
 	stopEventPropagation,
 } from './lib/utils/dom'
-export { EditorAtom } from './lib/utils/EditorAtom'
 export { getIncrementedName } from './lib/utils/getIncrementedName'
 export { getPointerInfo } from './lib/utils/getPointerInfo'
 export { getSvgPathFromPoints } from './lib/utils/getSvgPathFromPoints'

package/src/lib/TldrawEditor.tsx

@@ -39,7 +39,6 @@ import { useForceUpdate } from './hooks/useForceUpdate'
 import { useShallowObjectIdentity } from './hooks/useIdentity'
 import { useLocalStore } from './hooks/useLocalStore'
 import { useRefState } from './hooks/useRefState'
-import { useStateAttribute } from './hooks/useStateAttribute'
 import { useZoomCss } from './hooks/useZoomCss'
 import { LicenseProvider } from './license/LicenseProvider'
 import { Watermark } from './license/Watermark'
@@ -647,7 +646,6 @@ function Layout({ children, onMount }: { children: ReactNode; onMount?: TLOnMoun
 	useCursor()
 	useDarkMode()
 	useForceUpdate()
-	useStateAttribute()
 	useOnMount((editor) => {
 		const teardownStore = editor.store.props.onMount(editor)
 		const teardownCallback = onMount?.(editor)

package/src/lib/components/SVGContainer.tsx

@@ -7,7 +7,7 @@ export type SVGContainerProps = React.ComponentProps<'svg'>
 /** @public @react */
 export function SVGContainer({ children, className = '', ...rest }: SVGContainerProps) {
 	return (
-		<svg {...rest} className={classNames('tl-svg-container', className)} aria-hidden="true">
+		<svg {...rest} className={classNames('tl-svg-container', className)}>
 			{children}
 		</svg>
 	)

package/src/lib/components/Shape.tsx

@@ -40,7 +40,7 @@ export const Shape = memo(function Shape({
 }) {
 	const editor = useEditor()
 
-	const { ShapeErrorFallback, ShapeWrapper } = useEditorComponents()
+	const { ShapeErrorFallback } = useEditorComponents()
 
 	const containerRef = useRef<HTMLDivElement>(null)
 	const bgContainerRef = useRef<HTMLDivElement>(null)
@@ -145,22 +145,37 @@ export const Shape = memo(function Shape({
 		[editor]
 	)
 
-	if (!shape || !ShapeWrapper) return null
+	if (!shape) return null
+
+	const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'
 
 	return (
 		<>
 			{util.backgroundComponent && (
-				<ShapeWrapper ref={bgContainerRef} shape={shape} isBackground={true}>
+				<div
+					ref={bgContainerRef}
+					className="tl-shape tl-shape-background"
+					data-shape-type={shape.type}
+					data-shape-id={shape.id}
+					draggable={false}
+				>
 					<OptionalErrorBoundary fallback={ShapeErrorFallback} onError={annotateError}>
 						<InnerShapeBackground shape={shape} util={util} />
 					</OptionalErrorBoundary>
-				</ShapeWrapper>
+				</div>
 			)}
-			<ShapeWrapper ref={containerRef} shape={shape} isBackground={false}>
+			<div
+				ref={containerRef}
+				className="tl-shape"
+				data-shape-type={shape.type}
+				data-shape-is-filled={isFilledShape}
+				data-shape-id={shape.id}
+				draggable={false}
+			>
 				<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
 					<InnerShape shape={shape} util={util} />
 				</OptionalErrorBoundary>
-			</ShapeWrapper>
+			</div>
 		</>
 	)
 })

package/src/lib/components/default-components/DefaultBrush.tsx

@@ -21,7 +21,7 @@ export const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps)
 	const h = toDomPrecision(Math.max(1, brush.h))
 
 	return (
-		<svg className="tl-overlays__item" ref={rSvg} aria-hidden="true">
+		<svg className="tl-overlays__item" ref={rSvg}>
 			{color ? (
 				<g className="tl-brush" opacity={opacity}>
 					<rect width={w} height={h} fill={color} opacity={0.75} />

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -139,7 +139,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				data-testid="canvas"
 				{...events}
 			>
-				<svg className="tl-svg-context" aria-hidden="true">
+				<svg className="tl-svg-context">
 					<defs>
 						{shapeSvgDefs}
 						<CursorDef />

package/src/lib/components/default-components/DefaultCollaboratorHint.tsx

@@ -39,7 +39,7 @@ export function DefaultCollaboratorHint({
 	const cursorHintId = useSharedSafeId('cursor_hint')
 
 	return (
-		<svg ref={rSvg} className={classNames('tl-overlays__item', className)} aria-hidden="true">
+		<svg ref={rSvg} className={classNames('tl-overlays__item', className)}>
 			<use
 				href={`#${cursorHintId}`}
 				color={color}

package/src/lib/components/default-components/DefaultCursor.tsx

@@ -33,7 +33,7 @@ export const DefaultCursor = memo(function DefaultCursor({
 
 	return (
 		<div ref={rCursor} className={classNames('tl-overlays__item', className)}>
-			<svg className="tl-cursor" aria-hidden="true">
+			<svg className="tl-cursor">
 				<use href={`#${cursorId}`} color={color} />
 			</svg>
 			{chatMessage ? (

package/src/lib/components/default-components/DefaultGrid.tsx

@@ -16,7 +16,7 @@ export function DefaultGrid({ x, y, z, size }: TLGridProps) {
 	const editor = useEditor()
 	const { gridSteps } = editor.options
 	return (
-		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg">
 			<defs>
 				{gridSteps.map(({ min, mid, step }, i) => {
 					const s = step * size * z

package/src/lib/components/default-components/DefaultHandles.tsx

@@ -7,9 +7,5 @@ export interface TLHandlesProps {
 
 /** @public @react */
 export const DefaultHandles = ({ children }: TLHandlesProps) => {
-	return (
-		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
-			{children}
-		</svg>
-	)
+	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
 }

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -86,7 +86,7 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 	}, [hidden])
 
 	return (
-		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
+		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)}>
 			<g className="tl-shape-indicator" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>
 				<InnerIndicator editor={editor} id={shapeId} />
 			</g>

package/src/lib/components/default-components/DefaultSnapIndictor.tsx

@@ -163,7 +163,7 @@ export interface TLSnapIndicatorProps {
 /** @public @react */
 export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {
 	return (
-		<svg className={classNames('tl-overlays__item', className)} aria-hidden="true">
+		<svg className={classNames('tl-overlays__item', className)}>
 			{line.type === 'points' ? (
 				<PointsSnapIndicator {...line} zoom={zoom} />
 			) : line.type === 'gaps' ? (

package/src/lib/components/default-components/DefaultSpinner.tsx

@@ -1,19 +1,19 @@
-import classNames from 'classnames'
-
 /** @public @react */
-export function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {
+export function DefaultSpinner() {
 	return (
-		<svg
-			width={16}
-			height={16}
-			viewBox="0 0 16 16"
-			aria-hidden="false"
-			{...props}
-			className={classNames('tl-spinner', props.className)}
-		>
+		<svg width={16} height={16} viewBox="0 0 16 16" aria-hidden="false">
 			<g strokeWidth={2} fill="none" fillRule="evenodd">
 				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor" />
+				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
+					<animateTransform
+						attributeName="transform"
+						type="rotate"
+						from="0 8 8"
+						to="360 8 8"
+						dur="1s"
+						repeatCount="indefinite"
+					/>
+				</path>
 			</g>
 		</svg>
 	)

package/src/lib/config/TLUserPreferences.ts

@@ -17,14 +17,12 @@ export interface TLUserPreferences {
 	// N.B. These are duplicated in TLdrawAppUser.
 	locale?: string | null
 	animationSpeed?: number | null
-	areKeyboardShortcutsEnabled?: boolean | null
 	edgeScrollSpeed?: number | null
 	colorScheme?: 'light' | 'dark' | 'system'
 	isSnapMode?: boolean | null
 	isWrapMode?: boolean | null
 	isDynamicSizeMode?: boolean | null
 	isPasteAtCursorMode?: boolean | null
-	showUiLabels?: boolean | null
 }
 
 interface UserDataSnapshot {
@@ -46,14 +44,12 @@ export const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUser
 	// N.B. These are duplicated in TLdrawAppUser.
 	locale: T.string.nullable().optional(),
 	animationSpeed: T.number.nullable().optional(),
-	areKeyboardShortcutsEnabled: T.boolean.nullable().optional(),
 	edgeScrollSpeed: T.number.nullable().optional(),
 	colorScheme: T.literalEnum('light', 'dark', 'system').optional(),
 	isSnapMode: T.boolean.nullable().optional(),
 	isWrapMode: T.boolean.nullable().optional(),
 	isDynamicSizeMode: T.boolean.nullable().optional(),
 	isPasteAtCursorMode: T.boolean.nullable().optional(),
-	showUiLabels: T.boolean.nullable().optional(),
 })
 
 const Versions = {
@@ -65,8 +61,6 @@ const Versions = {
 	AddDynamicSizeMode: 6,
 	AllowSystemColorScheme: 7,
 	AddPasteAtCursor: 8,
-	AddKeyboardShortcuts: 9,
-	AddShowUiLabels: 10,
 } as const
 
 const CURRENT_VERSION = Math.max(...Object.values(Versions))
@@ -102,12 +96,6 @@ function migrateSnapshot(data: { version: number; user: any }) {
 	if (data.version < Versions.AddPasteAtCursor) {
 		data.user.isPasteAtCursorMode = false
 	}
-	if (data.version < Versions.AddKeyboardShortcuts) {
-		data.user.areKeyboardShortcutsEnabled = true
-	}
-	if (data.version < Versions.AddShowUiLabels) {
-		data.user.showUiLabels = false
-	}
 
 	// finally
 	data.version = CURRENT_VERSION
@@ -151,12 +139,10 @@ export const defaultUserPreferences = Object.freeze({
 	// N.B. These are duplicated in TLdrawAppUser.
 	edgeScrollSpeed: 1,
 	animationSpeed: userPrefersReducedMotion() ? 0 : 1,
-	areKeyboardShortcutsEnabled: true,
 	isSnapMode: false,
 	isWrapMode: false,
 	isDynamicSizeMode: false,
 	isPasteAtCursorMode: false,
-	showUiLabels: false,
 	colorScheme: 'light',
 }) satisfies Readonly<Omit<TLUserPreferences, 'id'>>