[pull] main from tldraw:main

apps/dotcom/client/package.json

@@ -11,7 +11,7 @@
 		"defaults"
 	],
 	"scripts": {
-		"dev": "./wait-for-postgres.sh && yarn run -T tsx scripts/dev-app.ts",
+		"dev": "../wait-for-migrations.sh && yarn run -T tsx scripts/dev-app.ts",
 		"build": "yarn run -T tsx scripts/build.ts",
 		"build-i18n": "yarn i18n:extract && yarn i18n:compile",
 		"start": "VITE_PREVIEW=1 yarn run -T tsx scripts/dev-app.ts",

apps/dotcom/client/src/tla/app/TldrawApp.ts

@@ -79,11 +79,11 @@ import { createIntl, defineMessages, setupCreateIntl } from '../utils/i18n'
 import { updateLocalSessionState } from '../utils/local-session-state'
 import { Zero as ZeroPolyfill } from './zero-polyfill'
 
-export interface DragGroupOperation {
+interface DragGroupOperation {
 	reorder?: DragReorderOperation
 }
 
-export type DragState =
+type DragState =
 	| null
 	| {
 			type: 'file'

apps/dotcom/client/src/tla/components/TlaSidebar/components/TlaSidebarInlineInput.tsx

@@ -5,7 +5,7 @@ import { useHasFlag } from '../../../hooks/useHasFlag'
 import { pinIcon } from './pinIcon'
 import styles from '../sidebar.module.css'
 
-export interface TlaSidebarInlineInputProps {
+interface TlaSidebarInlineInputProps {
 	defaultValue?: string
 	placeholder?: string
 	onComplete(value: string): void

apps/dotcom/client/src/tla/components/tla-menu/tla-menu.tsx

@@ -194,7 +194,7 @@ export function TlaMenuSelect<T extends string>({
 
 /* --------------------- Switch --------------------- */
 
-export interface TlaMenuSwitchProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
+interface TlaMenuSwitchProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
 	id: string
 	checked: boolean
 	onChange?(checked: boolean): void

apps/dotcom/client/src/tla/hooks/useDragTracking.ts

@@ -6,12 +6,6 @@ import { Vec } from 'tldraw'
 import { TldrawApp } from '../app/TldrawApp'
 import { useApp } from './useAppState'
 
-export interface DropTarget {
-	id: string
-	element: HTMLElement
-	rect: DOMRect
-}
-
 function detectDragOperations(
 	elements: DragElements,
 	mousePosition: { x: number; y: number },

apps/dotcom/client/src/tla/hooks/useUser.tsx

@@ -4,7 +4,7 @@ import { ReactNode, createContext, useContext, useMemo } from 'react'
 import { DefaultSpinner, LoadingScreen, assert, useShallowObjectIdentity } from 'tldraw'
 import { useMaybeApp } from './useAppState'
 
-export interface TldrawUser {
+interface TldrawUser {
 	id: string
 	clerkUser: UserResource
 	isTldraw: boolean

apps/dotcom/client/src/tla/themes/ui-themes.ts

@@ -11,7 +11,7 @@ export interface UIThemeVariant {
 	tla: Record<string, string>
 }
 
-export interface UITheme {
+interface UITheme {
 	id: string
 	name: string
 	lightBackground: string

apps/dotcom/client/src/utils/analytics.tsx

@@ -41,7 +41,7 @@ export function useAnalyticsConsentValue(): boolean | null {
 	])
 }
 
-export type AnalyticsOptions =
+type AnalyticsOptions =
 	| {
 			optedIn: true
 			user:

apps/dotcom/wait-for-migrations.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Block until `apps/dotcom/zero-cache`'s `migrate --signal-success` HTTP server
+# replies "ok" on localhost:7654, which means Postgres is up and all migrations
+# have been applied. Used by `apps/dotcom/client` and `apps/dotcom/zero-cache`
+# dev scripts to avoid racing against migration startup.
+
+until curl -s http://localhost:7654 | grep -q "ok"; do
+  echo "Waiting for migrations to finish..."
+  sleep 2
+done
+echo "Migrations are ready!"

apps/dotcom/zero-cache/package.json

@@ -14,7 +14,7 @@
 		"dev": "concurrently 'yarn docker-up' 'yarn migrate --signal-success' 'yarn bundle-schema:watch' 'yarn zero-server'",
 		"bundle-schema": "esbuild --bundle --platform=node --format=esm --outfile=./.schema.js ../../../packages/dotcom-shared/src/tlaSchema.ts",
 		"bundle-schema:watch": "esbuild --bundle --watch --platform=node --format=esm --outfile=./.schema.js ../../../packages/dotcom-shared/src/tlaSchema.ts",
-		"zero-server": "nodemon --watch ./.schema.js --exec 'zero-cache-dev' --signal SIGINT",
+		"zero-server": "../wait-for-migrations.sh && nodemon --watch ./.schema.js --exec 'zero-cache-dev' --signal SIGINT",
 		"docker-up": "docker compose --env-file .env -f ./docker/docker-compose.yml up",
 		"docker-down": "docker compose --env-file .env -f ./docker/docker-compose.yml down",
 		"migrate": "yarn tsx ./migrate.ts",

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

@@ -30,7 +30,7 @@ declare module 'tldraw' {
 	}
 }
 
-export type HtmlCssShape = TLShape<typeof HTML_TYPE>
+type HtmlCssShape = TLShape<typeof HTML_TYPE>
 class HtmlCssShapeUtil extends BaseBoxShapeUtil<HtmlCssShape> {
 	static override type = HTML_TYPE
 

apps/mcp-app/src/shared/generated-data.ts

@@ -1,4 +1,4 @@
-export type ArgKind =
+type ArgKind =
 	| 'id'
 	| 'id-or-shape'
 	| 'ids-or-shapes'
@@ -18,7 +18,7 @@ export type RetKind =
 	| 'ids'
 	| 'id-set'
 
-export interface MethodSpec {
+interface MethodSpec {
 	args: ArgKind[]
 	ret: RetKind
 }

apps/mcp-app/src/widget/exec-helpers.ts

@@ -144,7 +144,7 @@ export function createExecHelpers(editor: Editor) {
 	return helpers
 }
 
-export type ExecHelpers = ReturnType<typeof createExecHelpers>
+type ExecHelpers = ReturnType<typeof createExecHelpers>
 
 const EXEC_TIMEOUT_MS = 10_000
 

apps/mcp-app/src/widget/focused/format.ts

@@ -22,7 +22,7 @@ export const FOCUSED_COLORS = [
 	'white',
 ] as const
 
-export type FocusedColor = (typeof FOCUSED_COLORS)[number]
+type FocusedColor = (typeof FOCUSED_COLORS)[number]
 
 export function asColor(color: string): FocusedColor {
 	if (FOCUSED_COLORS.includes(color as FocusedColor)) {
@@ -38,7 +38,7 @@ export function asColor(color: string): FocusedColor {
 
 // ---- Fill ----
 
-export type FocusedFill = 'none' | 'tint' | 'background' | 'solid' | 'pattern'
+type FocusedFill = 'none' | 'tint' | 'background' | 'solid' | 'pattern'
 
 const FOCUSED_TO_SHAPE_FILLS: Record<FocusedFill, TLDefaultFillStyle> = {
 	none: 'none',

apps/mcp-app/src/widget/persistence.ts

@@ -177,7 +177,7 @@ function toAssetRecords(value: unknown): TLAsset[] {
 	return value.filter((a): a is TLAsset => isPlainObject(a) && typeof a.id === 'string')
 }
 
-export interface CheckpointResult {
+interface CheckpointResult {
 	checkpointId: string
 	sessionId: string | null
 	shapes: TLShape[]

internal/health-worker/src/updown_types.ts

@@ -1,6 +1,6 @@
 // docs: https://updown.io/api#webhooks
 
-export interface BaseCheck {
+interface BaseCheck {
 	token: string
 	url: string
 	alias: null
@@ -23,73 +23,73 @@ export interface BaseCheck {
 	http_body: string
 }
 
-export interface FailingCheck extends BaseCheck {
+interface FailingCheck extends BaseCheck {
 	down: true
 	down_since: string
 	up_since: null
 	error: string
 }
 
-export interface SucceedingCheck extends BaseCheck {
+interface SucceedingCheck extends BaseCheck {
 	down: true
 	down_since: null
 	up_since: string
 	error: null
 }
 
-export interface BaseDowntime {
+interface BaseDowntime {
 	id: string
 	error: string
 	started_at: string
 	partial: unknown
 }
 
-export interface OngoingDowntime extends BaseDowntime {
+interface OngoingDowntime extends BaseDowntime {
 	ended_at: null
 	duration: null
 }
 
-export interface FinishedDowntime extends BaseDowntime {
+interface FinishedDowntime extends BaseDowntime {
 	ended_at: string
 	// seconds
 	duration: number
 }
 
-export type CustomHeaders = Record<string, string>
+type CustomHeaders = Record<string, string>
 
-export interface SslCert {
+interface SslCert {
 	subject: string
 	issuer: string
 	from: string
 	to: string
 	algorithm: string
 }
 
-export interface EventDown {
+interface EventDown {
 	event: 'check.down'
 	time: string
 	description: string
 	check: FailingCheck
 	downtime: OngoingDowntime
 }
 
-export interface EventStillDown {
+interface EventStillDown {
 	event: 'check.still_down'
 	time: string
 	description: string
 	check: FailingCheck
 	downtime: OngoingDowntime
 }
 
-export interface EventUp {
+interface EventUp {
 	event: 'check.up'
 	time: string
 	description: string
 	check: SucceedingCheck
 	downtime: FinishedDowntime
 }
 
-export interface EventSslInvalid {
+interface EventSslInvalid {
 	event: 'check.ssl_invalid'
 	time: string
 	description: string
@@ -100,7 +100,7 @@ export interface EventSslInvalid {
 	}
 }
 
-export interface EventSslValid {
+interface EventSslValid {
 	event: 'check.ssl_valid'
 	time: string
 	description: string
@@ -110,7 +110,7 @@ export interface EventSslValid {
 	}
 }
 
-export interface EventSslExpiration {
+interface EventSslExpiration {
 	event: 'check.ssl_expiration'
 	time: string
 	description: string
@@ -121,7 +121,7 @@ export interface EventSslExpiration {
 	}
 }
 
-export interface EventSslRenewed {
+interface EventSslRenewed {
 	event: 'check.ssl_renewed'
 	time: string
 	description: string
@@ -132,7 +132,7 @@ export interface EventSslRenewed {
 	}
 }
 
-export interface EventPerformanceDrop {
+interface EventPerformanceDrop {
 	event: 'check.performance_drop'
 	time: string
 	description: string

packages/editor/api-report.api.md

@@ -1928,6 +1928,12 @@ export function getGlobalWindow(): Window & typeof globalThis;
 // @public
 export function getIncrementedName(name: string, others: string[]): string;
 
+// @public
+export function getOverlayDisplayValues<Overlay extends TLOverlay, DisplayValues extends object>(util: {
+    editor: Editor;
+    options: OverlayOptionsWithDisplayValues<Overlay, DisplayValues>;
+}, overlay: Overlay, colorMode?: 'dark' | 'light'): DisplayValues;
+
 // @internal (undocumented)
 export function getOwnerDocument(nodeOrDocument: Document | Node | null | undefined): Document;
 
@@ -2626,6 +2632,14 @@ export class OverlayManager {
     setHoveredOverlay(id: null | string): void;
 }
 
+// @public (undocumented)
+export interface OverlayOptionsWithDisplayValues<Overlay extends TLOverlay, DisplayValues extends object> {
+    // (undocumented)
+    getCustomDisplayValues(editor: Editor, overlay: Overlay, theme: TLTheme, colorMode: 'dark' | 'light'): Partial<DisplayValues>;
+    // (undocumented)
+    getDefaultDisplayValues(editor: Editor, overlay: Overlay, theme: TLTheme, colorMode: 'dark' | 'light'): DisplayValues;
+}
+
 // @public
 export abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
     constructor(editor: Editor);

packages/editor/src/index.ts

@@ -174,6 +174,10 @@ export {
 	type TLShapeUtilCanvasSvgDef,
 	type TLShapeUtilConstructor,
 } from './lib/editor/shapes/ShapeUtil'
+export {
+	getOverlayDisplayValues,
+	type OverlayOptionsWithDisplayValues,
+} from './lib/editor/overlays/getOverlayDisplayValues'
 export { OverlayManager, type TLOverlayEntry } from './lib/editor/overlays/OverlayManager'
 export {
 	OverlayUtil,

packages/editor/src/lib/editor/overlays/getOverlayDisplayValues.ts

@@ -0,0 +1,51 @@
+import { TLTheme } from '@tldraw/tlschema'
+import type { Editor } from '../Editor'
+import { TLOverlay } from './OverlayUtil'
+
+/** @public */
+export interface OverlayOptionsWithDisplayValues<
+	Overlay extends TLOverlay,
+	DisplayValues extends object,
+> {
+	getDefaultDisplayValues(
+		editor: Editor,
+		overlay: Overlay,
+		theme: TLTheme,
+		colorMode: 'light' | 'dark'
+	): DisplayValues
+	getCustomDisplayValues(
+		editor: Editor,
+		overlay: Overlay,
+		theme: TLTheme,
+		colorMode: 'light' | 'dark'
+	): Partial<DisplayValues>
+}
+
+const dvCache = new WeakMap<
+	TLOverlay,
+	{ theme: TLTheme; colorMode: 'light' | 'dark'; values: object }
+>()
+
+/**
+ * Get the resolved display values for an overlay, merging the base values with any overrides.
+ *
+ * @public
+ */
+export function getOverlayDisplayValues<Overlay extends TLOverlay, DisplayValues extends object>(
+	util: { editor: Editor; options: OverlayOptionsWithDisplayValues<Overlay, DisplayValues> },
+	overlay: Overlay,
+	colorMode?: 'light' | 'dark'
+): DisplayValues {
+	const theme = util.editor.getCurrentTheme()
+	const resolvedColorMode = colorMode ?? util.editor.getColorMode()
+	const cached = dvCache.get(overlay)
+	if (cached && cached.theme === theme && cached.colorMode === resolvedColorMode) {
+		return cached.values as DisplayValues
+	}
+	const values = {
+		...util.options.getDefaultDisplayValues(util.editor, overlay, theme, resolvedColorMode),
+		...util.options.getCustomDisplayValues(util.editor, overlay, theme, resolvedColorMode),
+	}
+	dvCache.set(overlay, { theme, colorMode: resolvedColorMode, values })
+	return values
+}