@tldraw/editor 3.15.0-canary.22a03ce9c171 → 3.15.0-canary.24182c470c85

package/editor.css

@@ -167,7 +167,7 @@
 	--color-text: hsl(0, 0%, 0%);
 	--color-text-0: hsl(0, 0%, 11%);
 	--color-text-1: hsl(0, 0%, 18%);
-	--color-text-3: hsl(220, 2%, 65%);
+	--color-text-3: hsl(204, 4%, 45%);
 	--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);
@@ -222,7 +222,7 @@
 	--color-text: hsl(210, 17%, 98%);
 	--color-text-0: hsl(0, 9%, 94%);
 	--color-text-1: hsl(0, 0%, 85%);
-	--color-text-3: hsl(210, 6%, 45%);
+	--color-text-3: hsl(204, 4%, 75%);
 	--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);
@@ -774,8 +774,7 @@ input,
 	position: static;
 }
 
-.tl-text-wrapper[data-isediting='false'] .tl-text-input,
-.tl-arrow-label[data-isediting='false'] .tl-text-input {
+.tl-text-wrapper[data-isediting='false'] .tl-text-input {
 	opacity: 0;
 	cursor: var(--tl-cursor-default);
 }
@@ -968,14 +967,14 @@ input,
 	font-size: 14px;
 	font-weight: 500;
 	opacity: 0;
-	animation: fade-in 0.2s ease-in-out forwards;
+	animation: tl-fade-in 0.2s ease-in-out forwards;
 	animation-delay: 0.2s;
 	position: absolute;
 	inset: 0px;
 	z-index: var(--layer-canvas-blocker);
 }
 
-@keyframes fade-in {
+@keyframes tl-fade-in {
 	0% {
 		opacity: 0;
 	}
@@ -984,6 +983,19 @@ input,
 	}
 }
 
+.tl-spinner {
+	animation: tl-spin 1s linear infinite;
+}
+
+@keyframes tl-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 /* ---------------------- Brush --------------------- */
 
 .tl-brush {
@@ -1175,7 +1187,7 @@ input,
 
 /* --------------------- Arrow shape -------------------- */
 
-.tl-arrow-label {
+.tl-shape[data-shape-type='arrow'] .tl-text-label {
 	position: absolute;
 	top: -1px;
 	left: -1px;
@@ -1190,33 +1202,15 @@ input,
 	text-shadow: var(--tl-text-outline);
 }
 
-.tl-arrow-label[data-isediting='true'] p {
-	opacity: 0;
-}
-
-.tl-arrow-label__inner {
+.tl-shape[data-shape-type='arrow'] .tl-text-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-arrow-label .tl-arrow {
-	position: relative;
+.tl-shape[data-shape-type='arrow'] .tl-text {
 	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": "A tiny little drawing app (editor).",
-  "version": "3.15.0-canary.22a03ce9c171",
+  "description": "tldraw infinite canvas SDK (editor).",
+  "version": "3.15.0-canary.24182c470c85",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -17,6 +17,7 @@
   },
   "keywords": [
     "tldraw",
+    "sdk",
     "drawing",
     "app",
     "development",
@@ -48,12 +49,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.15.0-canary.22a03ce9c171",
-    "@tldraw/state-react": "3.15.0-canary.22a03ce9c171",
-    "@tldraw/store": "3.15.0-canary.22a03ce9c171",
-    "@tldraw/tlschema": "3.15.0-canary.22a03ce9c171",
-    "@tldraw/utils": "3.15.0-canary.22a03ce9c171",
-    "@tldraw/validate": "3.15.0-canary.22a03ce9c171",
+    "@tldraw/state": "3.15.0-canary.24182c470c85",
+    "@tldraw/state-react": "3.15.0-canary.24182c470c85",
+    "@tldraw/store": "3.15.0-canary.24182c470c85",
+    "@tldraw/tlschema": "3.15.0-canary.24182c470c85",
+    "@tldraw/utils": "3.15.0-canary.24182c470c85",
+    "@tldraw/validate": "3.15.0-canary.24182c470c85",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -264,6 +264,7 @@ export {
 	type TLImageExportOptions,
 	type TLSvgExportOptions,
 	type TLSvgOptions,
+	type TLUpdatePointerOptions,
 } from './lib/editor/types/misc-types'
 export {
 	type TLAdjacentDirection,
@@ -346,6 +347,7 @@ 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,

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)}>
+		<svg {...rest} className={classNames('tl-svg-container', className)} aria-hidden="true">
 			{children}
 		</svg>
 	)

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}>
+		<svg className="tl-overlays__item" ref={rSvg} aria-hidden="true">
 			{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">
+				<svg className="tl-svg-context" aria-hidden="true">
 					<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)}>
+		<svg ref={rSvg} className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			<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">
+			<svg className="tl-cursor" aria-hidden="true">
 				<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">
+		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 			<defs>
 				{gridSteps.map(({ min, mid, step }, i) => {
 					const s = step * size * z

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

@@ -7,5 +7,9 @@ export interface TLHandlesProps {
 
 /** @public @react */
 export const DefaultHandles = ({ children }: TLHandlesProps) => {
-	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
+	return (
+		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
+			{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)}>
+		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			<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)}>
+		<svg className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			{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() {
+export function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {
 	return (
-		<svg width={16} height={16} viewBox="0 0 16 16" aria-hidden="false">
+		<svg
+			width={16}
+			height={16}
+			viewBox="0 0 16 16"
+			aria-hidden="false"
+			{...props}
+			className={classNames('tl-spinner', props.className)}
+		>
 			<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">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
+				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor" />
 			</g>
 		</svg>
 	)