@tldraw/tlschema 4.6.0-next.d8328a2dcc3d → 4.6.0-next.e390fde97eab

package/dist-esm/styles/TLFontFace.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist-esm/styles/TLFontStyle.mjs

@@ -9,8 +9,43 @@ const DefaultFontFamilies = {
   serif: "'tldraw_serif', serif",
   mono: "'tldraw_mono', monospace"
 };
+function isFontEntry(value) {
+  return typeof value === "object" && value !== null && "fontFamily" in value;
+}
+function registerFontsFromThemes(definitions) {
+  const fontNames = /* @__PURE__ */ new Set();
+  for (const def of Object.values(definitions)) {
+    if (!def.fonts) continue;
+    for (const [key, value] of Object.entries(def.fonts)) {
+      if (isFontEntry(value)) {
+        fontNames.add(key);
+      }
+    }
+  }
+  const toAdd = [...fontNames].filter((v) => !DefaultFontStyle.values.includes(v));
+  if (toAdd.length > 0) {
+    DefaultFontStyle.addValues(...toAdd);
+  }
+  const toRemove = DefaultFontStyle.values.filter((v) => !fontNames.has(v));
+  if (toRemove.length > 0) {
+    DefaultFontStyle.removeValues(...toRemove);
+  }
+  if (process.env.NODE_ENV !== "production") {
+    for (const def of Object.values(definitions)) {
+      for (const font of fontNames) {
+        if (!def.fonts || !(font in def.fonts)) {
+          console.warn(
+            `Theme '${def.id}' is missing font '${font}'. Shapes using this font won't render correctly in this theme.`
+          );
+        }
+      }
+    }
+  }
+}
 export {
   DefaultFontFamilies,
-  DefaultFontStyle
+  DefaultFontStyle,
+  isFontEntry,
+  registerFontsFromThemes
 };
 //# sourceMappingURL=TLFontStyle.mjs.map

package/dist-esm/styles/TLFontStyle.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles/TLFontStyle.ts"],
-  "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { StyleProp } from './StyleProp'\n\n/**\n * Default font style property used by tldraw shapes for text styling.\n * Controls which typeface is used for text content within shapes.\n *\n * Available values:\n * - `draw` - Hand-drawn, sketchy font style\n * - `sans` - Clean sans-serif font\n * - `serif` - Traditional serif font\n * - `mono` - Monospace font for code-like text\n *\n * @example\n * ```ts\n * import { DefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyTextShapeProps {\n *   font: typeof DefaultFontStyle\n *   // other props...\n * }\n *\n * // Create a text shape with monospace font\n * const textShape = {\n *   // ... other properties\n *   props: {\n *     font: 'mono' as const,\n *     // ... other props\n *   }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultFontStyle = StyleProp.defineEnum('tldraw:font', {\n\tdefaultValue: 'draw',\n\tvalues: ['draw', 'sans', 'serif', 'mono'],\n})\n\n/**\n * Type representing a default font style value.\n * This is a union type of all available font style options.\n *\n * @example\n * ```ts\n * import { TLDefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Valid font style values\n * const drawFont: TLDefaultFontStyle = 'draw'\n * const sansFont: TLDefaultFontStyle = 'sans'\n * const serifFont: TLDefaultFontStyle = 'serif'\n * const monoFont: TLDefaultFontStyle = 'mono'\n *\n * // Use in a function parameter\n * function setTextFont(font: TLDefaultFontStyle) {\n *   // Apply font style to text\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultFontStyle = T.TypeOf<typeof DefaultFontStyle>\n\n/**\n * Mapping of font style names to their corresponding CSS font-family declarations.\n * These are the actual CSS font families used when rendering text with each font style.\n *\n * @example\n * ```ts\n * import { DefaultFontFamilies, TLDefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Get CSS font family for a font style\n * const fontStyle: TLDefaultFontStyle = 'mono'\n * const cssFamily = DefaultFontFamilies[fontStyle] // \"'tldraw_mono', monospace\"\n *\n * // Apply to DOM element\n * element.style.fontFamily = DefaultFontFamilies.sans\n * ```\n *\n * @public\n */\nexport const DefaultFontFamilies = {\n\tdraw: \"'tldraw_draw', sans-serif\",\n\tsans: \"'tldraw_sans', sans-serif\",\n\tserif: \"'tldraw_serif', serif\",\n\tmono: \"'tldraw_mono', monospace\",\n}\n"],
-  "mappings": "AACA,SAAS,iBAAiB;AAkCnB,MAAM,mBAAmB,UAAU,WAAW,eAAe;AAAA,EACnE,cAAc;AAAA,EACd,QAAQ,CAAC,QAAQ,QAAQ,SAAS,MAAM;AACzC,CAAC;AA4CM,MAAM,sBAAsB;AAAA,EAClC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACP;",
+  "sourcesContent": ["import { StyleProp } from './StyleProp'\nimport { TLThemeFont, TLThemeFonts, TLThemes } from './TLTheme'\n\n/**\n * Default font style property used by tldraw shapes for text styling.\n * Controls which typeface is used for text content within shapes.\n *\n * Available values:\n * - `draw` - Hand-drawn, sketchy font style\n * - `sans` - Clean sans-serif font\n * - `serif` - Traditional serif font\n * - `mono` - Monospace font for code-like text\n *\n * @example\n * ```ts\n * import { DefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyTextShapeProps {\n *   font: typeof DefaultFontStyle\n *   // other props...\n * }\n *\n * // Create a text shape with monospace font\n * const textShape = {\n *   // ... other properties\n *   props: {\n *     font: 'mono' as const,\n *     // ... other props\n *   }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultFontStyle = StyleProp.defineEnum('tldraw:font', {\n\tdefaultValue: 'draw',\n\tvalues: ['draw', 'sans', 'serif', 'mono'],\n})\n\n/**\n * The names of all available font styles, derived from {@link TLThemeFonts}.\n * Extend {@link TLThemeFonts} to add custom font names.\n *\n * @example\n * ```ts\n * import { TLDefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Valid font style values\n * const drawFont: TLDefaultFontStyle = 'draw'\n * const sansFont: TLDefaultFontStyle = 'sans'\n * const serifFont: TLDefaultFontStyle = 'serif'\n * const monoFont: TLDefaultFontStyle = 'mono'\n *\n * // Use in a function parameter\n * function setTextFont(font: TLDefaultFontStyle) {\n *   // Apply font style to text\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultFontStyle = keyof TLThemeFonts & string\n\n/**\n * Mapping of font style names to their corresponding CSS font-family declarations.\n * These are the actual CSS font families used when rendering text with each font style.\n *\n * @example\n * ```ts\n * import { DefaultFontFamilies, TLDefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Get CSS font family for a font style\n * const fontStyle: TLDefaultFontStyle = 'mono'\n * const cssFamily = DefaultFontFamilies[fontStyle] // \"'tldraw_mono', monospace\"\n *\n * // Apply to DOM element\n * element.style.fontFamily = DefaultFontFamilies.sans\n * ```\n *\n * @public\n */\nexport const DefaultFontFamilies = {\n\tdraw: \"'tldraw_draw', sans-serif\",\n\tsans: \"'tldraw_sans', sans-serif\",\n\tserif: \"'tldraw_serif', serif\",\n\tmono: \"'tldraw_mono', monospace\",\n}\n\n/** @internal */\nexport function isFontEntry(value: unknown): value is TLThemeFont {\n\treturn typeof value === 'object' && value !== null && 'fontFamily' in value\n}\n\n/**\n * Scan theme definitions and sync font registrations to match.\n * A font entry is any key in `TLThemeFonts` whose value is a {@link TLThemeFont}\n * object (i.e. has a `fontFamily` property).\n *\n * Fonts present in themes but not yet registered will be added.\n * Fonts currently registered but absent from all themes will be removed.\n *\n * @public\n */\nexport function registerFontsFromThemes(definitions: TLThemes): void {\n\tconst fontNames = new Set<string>()\n\tfor (const def of Object.values(definitions)) {\n\t\tif (!def.fonts) continue\n\t\tfor (const [key, value] of Object.entries(def.fonts)) {\n\t\t\tif (isFontEntry(value)) {\n\t\t\t\tfontNames.add(key)\n\t\t\t}\n\t\t}\n\t}\n\n\tconst toAdd = [...fontNames].filter((v) => !DefaultFontStyle.values.includes(v as any))\n\tif (toAdd.length > 0) {\n\t\tDefaultFontStyle.addValues(...(toAdd as any))\n\t}\n\n\tconst toRemove = DefaultFontStyle.values.filter((v) => !fontNames.has(v as string))\n\tif (toRemove.length > 0) {\n\t\tDefaultFontStyle.removeValues(...toRemove)\n\t}\n\n\tif (process.env.NODE_ENV !== 'production') {\n\t\tfor (const def of Object.values(definitions)) {\n\t\t\tfor (const font of fontNames) {\n\t\t\t\tif (!def.fonts || !(font in def.fonts)) {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`Theme '${def.id}' is missing font '${font}'. Shapes using this font won't render correctly in this theme.`\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAmCnB,MAAM,mBAAmB,UAAU,WAAW,eAAe;AAAA,EACnE,cAAc;AAAA,EACd,QAAQ,CAAC,QAAQ,QAAQ,SAAS,MAAM;AACzC,CAAC;AA4CM,MAAM,sBAAsB;AAAA,EAClC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACP;AAGO,SAAS,YAAY,OAAsC;AACjE,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,gBAAgB;AACvE;AAYO,SAAS,wBAAwB,aAA6B;AACpE,QAAM,YAAY,oBAAI,IAAY;AAClC,aAAW,OAAO,OAAO,OAAO,WAAW,GAAG;AAC7C,QAAI,CAAC,IAAI,MAAO;AAChB,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,IAAI,KAAK,GAAG;AACrD,UAAI,YAAY,KAAK,GAAG;AACvB,kBAAU,IAAI,GAAG;AAAA,MAClB;AAAA,IACD;AAAA,EACD;AAEA,QAAM,QAAQ,CAAC,GAAG,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,OAAO,SAAS,CAAQ,CAAC;AACtF,MAAI,MAAM,SAAS,GAAG;AACrB,qBAAiB,UAAU,GAAI,KAAa;AAAA,EAC7C;AAEA,QAAM,WAAW,iBAAiB,OAAO,OAAO,CAAC,MAAM,CAAC,UAAU,IAAI,CAAW,CAAC;AAClF,MAAI,SAAS,SAAS,GAAG;AACxB,qBAAiB,aAAa,GAAG,QAAQ;AAAA,EAC1C;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AAC1C,eAAW,OAAO,OAAO,OAAO,WAAW,GAAG;AAC7C,iBAAW,QAAQ,WAAW;AAC7B,YAAI,CAAC,IAAI,SAAS,EAAE,QAAQ,IAAI,QAAQ;AACvC,kBAAQ;AAAA,YACP,UAAU,IAAI,EAAE,sBAAsB,IAAI;AAAA,UAC3C;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;",
   "names": []
 }

package/dist-esm/styles/TLTheme.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=TLTheme.mjs.map

package/dist-esm/styles/TLTheme.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tlschema",
   "description": "tldraw infinite canvas SDK (schema).",
-  "version": "4.6.0-next.d8328a2dcc3d",
+  "version": "4.6.0-next.e390fde97eab",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,10 +50,10 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@tldraw/state": "4.6.0-next.d8328a2dcc3d",
-    "@tldraw/store": "4.6.0-next.d8328a2dcc3d",
-    "@tldraw/utils": "4.6.0-next.d8328a2dcc3d",
-    "@tldraw/validate": "4.6.0-next.d8328a2dcc3d"
+    "@tldraw/state": "4.6.0-next.e390fde97eab",
+    "@tldraw/store": "4.6.0-next.e390fde97eab",
+    "@tldraw/utils": "4.6.0-next.e390fde97eab",
+    "@tldraw/validate": "4.6.0-next.e390fde97eab"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",

package/src/assets/TLBaseAsset.ts

@@ -68,7 +68,8 @@ export const assetIdValidator = idValidator<TLAssetId>('asset')
  * base properties (id, typeName, type, meta) and the type-specific props.
  *
  * @param type - The asset type identifier (e.g., 'image', 'video', 'bookmark')
- * @param props - The validator for the asset's type-specific properties
+ * @param props - A validator or per-key validator record for the asset's type-specific properties
+ * @param meta - An optional per-key validator record for the asset's meta properties
  * @returns A complete validator for the asset record type
  *
  * @example
@@ -83,45 +84,41 @@ export const assetIdValidator = idValidator<TLAssetId>('asset')
  *   description?: string
  * }>
  *
- * // Create validator for the custom asset
- * const customAssetValidator = createAssetValidator('custom', T.object({
+ * // Create validator using a per-key record (recommended)
+ * const customAssetValidator = createAssetValidator('custom', {
  *   url: T.string,
  *   title: T.string,
  *   description: T.string.optional()
- * }))
- *
- * // Use the validator
- * const assetData = {
- *   id: 'asset:custom123',
- *   typeName: 'asset' as const,
- *   type: 'custom' as const,
- *   props: {
- *     url: 'https://example.com',
- *     title: 'My Custom Asset'
- *   },
- *   meta: {}
- * }
+ * })
  *
- * const validatedAsset = customAssetValidator.validate(assetData)
+ * // Or using a T.object validator
+ * const customAssetValidator2 = createAssetValidator('custom', T.object({
+ *   url: T.string,
+ *   title: T.string,
+ *   description: T.string.optional()
+ * }))
  * ```
  *
  * @public
  */
-export function createAssetValidator<Type extends string, Props extends JsonObject>(
+export function createAssetValidator<
+	Type extends string,
+	Props extends JsonObject,
+	Meta extends JsonObject = JsonObject,
+>(
 	type: Type,
-	props: T.Validator<Props>
+	props?: T.Validator<Props> | { [K in keyof Props]: T.Validatable<Props[K]> },
+	meta?: { [K in keyof Meta]: T.Validatable<Meta[K]> }
 ) {
-	return T.object<{
-		id: TLAssetId
-		typeName: 'asset'
-		type: Type
-		props: Props
-		meta: JsonObject
-	}>({
+	// Determine if props is a Validator instance or a per-key record
+	const propsValidator =
+		props instanceof T.Validator ? props : props ? T.object(props) : (T.jsonValue as any)
+
+	return T.object<TLBaseAsset<Type, Props>>({
 		id: assetIdValidator,
 		typeName: T.literal('asset'),
 		type: T.literal(type),
-		props,
-		meta: T.jsonValue as T.ObjectValidator<JsonObject>,
+		props: propsValidator,
+		meta: meta ? T.object(meta) : (T.jsonValue as T.ObjectValidator<JsonObject>),
 	})
 }

package/src/assets/TLBookmarkAsset.ts

@@ -1,6 +1,6 @@
 import { createMigrationIds, createRecordMigrationSequence } from '@tldraw/store'
 import { T } from '@tldraw/validate'
-import { TLAsset } from '../records/TLAsset'
+import { RecordProps } from '../recordsWithProps'
 import { TLBaseAsset, createAssetValidator } from './TLBaseAsset'
 
 /**
@@ -18,39 +18,19 @@ export type TLBookmarkAsset = TLBaseAsset<
 	}
 >
 
-/**
- * Validator for TLBookmarkAsset records. Validates the structure and data types
- * of bookmark asset properties including title, description, image, favicon, and source URL.
- *
- * @example
- * ```ts
- * const bookmarkData = {
- *   id: 'asset:bookmark1',
- *   typeName: 'asset',
- *   type: 'bookmark',
- *   props: {
- *     title: 'Example Website',
- *     description: 'A great example site',
- *     image: 'https://example.com/preview.jpg',
- *     favicon: 'https://example.com/favicon.ico',
- *     src: 'https://example.com'
- *   }
- * }
- *
- * const isValid = bookmarkAssetValidator.isValid(bookmarkData)
- * ```
- *
- * @public
- */
+/** @public */
+export const bookmarkAssetProps = {
+	title: T.string,
+	description: T.string,
+	image: T.string,
+	favicon: T.string,
+	src: T.srcUrl.nullable(),
+} satisfies RecordProps<TLBookmarkAsset>
+
+/** Validator for bookmark assets. @public */
 export const bookmarkAssetValidator: T.Validator<TLBookmarkAsset> = createAssetValidator(
 	'bookmark',
-	T.object({
-		title: T.string,
-		description: T.string,
-		image: T.string,
-		favicon: T.string,
-		src: T.srcUrl.nullable(),
-	})
+	T.object(bookmarkAssetProps)
 )
 
 const Versions = createMigrationIds('com.tldraw.asset.bookmark', {
@@ -91,7 +71,7 @@ export { Versions as bookmarkAssetVersions }
 export const bookmarkAssetMigrations = createRecordMigrationSequence({
 	sequenceId: 'com.tldraw.asset.bookmark',
 	recordType: 'asset',
-	filter: (asset) => (asset as TLAsset).type === 'bookmark',
+	filter: (asset) => (asset as TLBookmarkAsset).type === 'bookmark',
 	sequence: [
 		{
 			id: Versions.MakeUrlsValid,

package/src/assets/TLImageAsset.ts

@@ -1,6 +1,6 @@
 import { createMigrationIds, createRecordMigrationSequence } from '@tldraw/store'
 import { T } from '@tldraw/validate'
-import { TLAsset } from '../records/TLAsset'
+import { RecordProps } from '../recordsWithProps'
 import { TLBaseAsset, createAssetValidator } from './TLBaseAsset'
 
 /**
@@ -21,48 +21,22 @@ export type TLImageAsset = TLBaseAsset<
 	}
 >
 
-/**
- * Validator for image assets. Validates the structure and properties of TLImageAsset records
- * to ensure data integrity when image assets are stored or retrieved from the tldraw store.
- *
- * @example
- * ```ts
- * import { imageAssetValidator } from '@tldraw/tlschema'
- *
- * const imageAsset = {
- *   id: 'asset:image123',
- *   typeName: 'asset',
- *   type: 'image',
- *   props: {
- *     w: 800,
- *     h: 600,
- *     name: 'photo.jpg',
- *     isAnimated: false,
- *     mimeType: 'image/jpeg',
- *     src: 'https://example.com/photo.jpg',
- *     fileSize: 156000
- *   },
- *   meta: {}
- * }
- *
- * // Validate the asset
- * const isValid = imageAssetValidator.validate(imageAsset)
- * ```
- *
- * @public
- */
+/** @public */
+export const imageAssetProps = {
+	w: T.number,
+	h: T.number,
+	name: T.string,
+	isAnimated: T.boolean,
+	mimeType: T.string.nullable(),
+	src: T.srcUrl.nullable(),
+	fileSize: T.nonZeroNumber.optional(),
+	pixelRatio: T.positiveNumber.optional(),
+} satisfies RecordProps<TLImageAsset>
+
+/** Validator for image assets. @public */
 export const imageAssetValidator: T.Validator<TLImageAsset> = createAssetValidator(
 	'image',
-	T.object({
-		w: T.number,
-		h: T.number,
-		name: T.string,
-		isAnimated: T.boolean,
-		mimeType: T.string.nullable(),
-		src: T.srcUrl.nullable(),
-		fileSize: T.nonZeroNumber.optional(),
-		pixelRatio: T.positiveNumber.optional(),
-	})
+	T.object(imageAssetProps)
 )
 
 const Versions = createMigrationIds('com.tldraw.asset.image', {
@@ -109,7 +83,7 @@ export { Versions as imageAssetVersions }
 export const imageAssetMigrations = createRecordMigrationSequence({
 	sequenceId: 'com.tldraw.asset.image',
 	recordType: 'asset',
-	filter: (asset) => (asset as TLAsset).type === 'image',
+	filter: (asset) => (asset as TLImageAsset).type === 'image',
 	sequence: [
 		{
 			id: Versions.AddIsAnimated,

package/src/assets/TLVideoAsset.ts

@@ -1,6 +1,6 @@
 import { createMigrationIds, createRecordMigrationSequence } from '@tldraw/store'
 import { T } from '@tldraw/validate'
-import { TLAsset } from '../records/TLAsset'
+import { RecordProps } from '../recordsWithProps'
 import { TLBaseAsset, createAssetValidator } from './TLBaseAsset'
 
 /**
@@ -52,46 +52,21 @@ export type TLVideoAsset = TLBaseAsset<
 	}
 >
 
-/**
- * Runtime validator for TLVideoAsset records. This validator ensures that video asset
- * data conforms to the expected structure and types, providing type safety at runtime.
- * It validates dimensions, file metadata, and ensures URLs are properly formatted.
- *
- * @example
- * ```ts
- * import { videoAssetValidator } from '@tldraw/tlschema'
- *
- * // Validate a video asset object
- * const validAsset = videoAssetValidator.validate({
- *   id: 'asset:video123',
- *   typeName: 'asset',
- *   type: 'video',
- *   props: {
- *     w: 1920,
- *     h: 1080,
- *     name: 'video.mp4',
- *     isAnimated: true,
- *     mimeType: 'video/mp4',
- *     src: 'https://example.com/video.mp4',
- *     fileSize: 1024000
- *   },
- *   meta: {}
- * })
- * ```
- *
- * @public
- */
+/** @public */
+export const videoAssetProps = {
+	w: T.number,
+	h: T.number,
+	name: T.string,
+	isAnimated: T.boolean,
+	mimeType: T.string.nullable(),
+	src: T.srcUrl.nullable(),
+	fileSize: T.number.optional(),
+} satisfies RecordProps<TLVideoAsset>
+
+/** Validator for video assets. @public */
 export const videoAssetValidator: T.Validator<TLVideoAsset> = createAssetValidator(
 	'video',
-	T.object({
-		w: T.number,
-		h: T.number,
-		name: T.string,
-		isAnimated: T.boolean,
-		mimeType: T.string.nullable(),
-		src: T.srcUrl.nullable(),
-		fileSize: T.number.optional(),
-	})
+	T.object(videoAssetProps)
 )
 
 const Versions = createMigrationIds('com.tldraw.asset.video', {
@@ -137,7 +112,7 @@ export { Versions as videoAssetVersions }
 export const videoAssetMigrations = createRecordMigrationSequence({
 	sequenceId: 'com.tldraw.asset.video',
 	recordType: 'asset',
-	filter: (asset) => (asset as TLAsset).type === 'video',
+	filter: (asset) => (asset as TLVideoAsset).type === 'video',
 	sequence: [
 		{
 			id: Versions.AddIsAnimated,

package/src/createTLSchema.ts

@@ -1,11 +1,17 @@
 import { LegacyMigrations, MigrationSequence, StoreSchema, StoreValidator } from '@tldraw/store'
 import { objectMapValues } from '@tldraw/utils'
 import { T } from '@tldraw/validate'
-import { bookmarkAssetMigrations } from './assets/TLBookmarkAsset'
-import { imageAssetMigrations } from './assets/TLImageAsset'
-import { videoAssetMigrations } from './assets/TLVideoAsset'
+import { TLBaseAsset } from './assets/TLBaseAsset'
+import { bookmarkAssetMigrations, bookmarkAssetProps } from './assets/TLBookmarkAsset'
+import { imageAssetMigrations, imageAssetProps } from './assets/TLImageAsset'
+import { videoAssetMigrations, videoAssetProps } from './assets/TLVideoAsset'
 import { arrowBindingMigrations, arrowBindingProps } from './bindings/TLArrowBinding'
-import { AssetRecordType, assetMigrations } from './records/TLAsset'
+import {
+	TLDefaultAsset,
+	TLUnknownAsset,
+	assetMigrations,
+	createAssetRecordType,
+} from './records/TLAsset'
 import { TLBinding, TLDefaultBinding, createBindingRecordType } from './records/TLBinding'
 import { CameraRecordType, cameraMigrations } from './records/TLCamera'
 import {
@@ -48,7 +54,7 @@ import { StyleProp } from './styles/StyleProp'
 import { TLStoreProps, createIntegrityChecker, onValidationFailure } from './TLStore'
 
 /**
- * Configuration information for a schema type (shape or binding), including its properties,
+ * Configuration information for a schema type (shape, binding, or asset), including its properties,
  * metadata, and migration sequences for data evolution over time.
  *
  * @public
@@ -73,12 +79,12 @@ export interface SchemaPropsInfo {
 	migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence
 
 	/**
-	 * Validation schema for the shape or binding properties. Maps property names to their validators.
+	 * Validation schema for the shape, binding, or asset properties.
 	 */
 	props?: Record<string, StoreValidator<any>>
 
 	/**
-	 * Validation schema for metadata fields. Maps metadata field names to their validators.
+	 * Validation schema for metadata fields.
 	 */
 	meta?: Record<string, StoreValidator<any>>
 }
@@ -195,6 +201,30 @@ export const defaultBindingSchemas = {
 	arrow: { migrations: arrowBindingMigrations, props: arrowBindingProps },
 } satisfies { [T in TLDefaultBinding['type']]: SchemaPropsInfo }
 
+/**
+ * Default asset schema configurations for all built-in tldraw asset types.
+ *
+ * @public
+ * @example
+ * ```ts
+ * import { createTLSchema, defaultAssetSchemas } from '@tldraw/tlschema'
+ *
+ * const schema = createTLSchema({
+ *   assets: defaultAssetSchemas,
+ * })
+ * ```
+ */
+export const defaultAssetSchemas = {
+	image: { migrations: imageAssetMigrations, props: imageAssetProps },
+	video: { migrations: videoAssetMigrations, props: videoAssetProps },
+	bookmark: { migrations: bookmarkAssetMigrations, props: bookmarkAssetProps },
+} satisfies {
+	[T in TLDefaultAsset['type']]: {
+		migrations: SchemaPropsInfo['migrations']
+		props: RecordProps<TLBaseAsset<T, Extract<TLDefaultAsset, { type: T }>['props']>>
+	}
+}
+
 /**
  * Configuration for extending the user record type with custom metadata
  * validators and migration sequences.
@@ -232,12 +262,13 @@ export interface UserSchemaInfo {
  * validation, and migration sequences for all record types in a tldraw application.
  *
  * The schema includes all core record types (pages, cameras, instances, etc.) plus the
- * shape, binding, and custom record types you specify. Style properties are automatically
- * collected from all shapes to ensure consistency across the application.
+ * shape, binding, asset, and custom record types you specify. Style properties are
+ * automatically collected from all shapes to ensure consistency across the application.
  *
  * @param options - Configuration options for the schema
  *   - shapes - Shape schema configurations. Defaults to defaultShapeSchemas if not provided
  *   - bindings - Binding schema configurations. Defaults to defaultBindingSchemas if not provided
+ *   - assets - Asset schema configurations. Defaults to defaultAssetSchemas if not provided
  *   - user - Custom user record configuration with meta validators and migrations
  *   - records - Custom record type configurations. These are additional record types beyond
  *     the built-in shapes, bindings, assets, etc.
@@ -247,10 +278,15 @@ export interface UserSchemaInfo {
  * @public
  * @example
  * ```ts
- * import { createTLSchema, defaultShapeSchemas, defaultBindingSchemas } from '@tldraw/tlschema'
+ * import {
+ *   createTLSchema,
+ *   defaultShapeSchemas,
+ *   defaultBindingSchemas,
+ *   defaultAssetSchemas,
+ * } from '@tldraw/tlschema'
  * import { Store } from '@tldraw/store'
  *
- * // Create schema with all default shapes and bindings
+ * // Create schema with all default shapes, bindings, and assets
  * const schema = createTLSchema()
  *
  * // Create schema with custom shapes added
@@ -262,6 +298,8 @@ export interface UserSchemaInfo {
  *       migrations: myCustomShapeMigrations,
  *     },
  *   },
+ *   bindings: defaultBindingSchemas,
+ *   assets: defaultAssetSchemas,
  * })
  *
  * // Create schema with custom user metadata
@@ -301,12 +339,14 @@ export interface UserSchemaInfo {
 export function createTLSchema({
 	shapes = defaultShapeSchemas,
 	bindings = defaultBindingSchemas,
+	assets = defaultAssetSchemas,
 	user,
 	records = {},
 	migrations,
 }: {
 	shapes?: Record<string, SchemaPropsInfo>
 	bindings?: Record<string, SchemaPropsInfo>
+	assets?: Record<string, SchemaPropsInfo>
 	user?: UserSchemaInfo
 	records?: Record<string, CustomRecordInfo>
 	migrations?: readonly MigrationSequence[]
@@ -323,6 +363,7 @@ export function createTLSchema({
 
 	const ShapeRecordType = createShapeRecordType(shapes)
 	const BindingRecordType = createBindingRecordType(bindings)
+	const _AssetRecordType = createAssetRecordType(assets)
 	const InstanceRecordType = createInstanceRecordType(stylesById)
 	const CustomUserRecordType = user ? createUserRecordType(user) : UserRecordType
 
@@ -353,7 +394,7 @@ export function createTLSchema({
 
 	return StoreSchema.create(
 		{
-			asset: AssetRecordType,
+			asset: _AssetRecordType,
 			binding: BindingRecordType,
 			camera: CameraRecordType,
 			document: DocumentRecordType,
@@ -380,10 +421,8 @@ export function createTLSchema({
 				rootShapeMigrations,
 
 				userMigrations,
-				bookmarkAssetMigrations,
-				imageAssetMigrations,
-				videoAssetMigrations,
 
+				...processPropsMigrations<TLUnknownAsset>('asset', assets),
 				...processPropsMigrations<TLShape>('shape', shapes),
 				...processPropsMigrations<TLBinding>('binding', bindings),
 				...processCustomRecordMigrations(records),

package/src/index.ts

@@ -32,9 +32,13 @@
 
 import { registerTldrawLibraryVersion } from '@tldraw/utils'
 export { assetIdValidator, createAssetValidator, type TLBaseAsset } from './assets/TLBaseAsset'
-export { type TLBookmarkAsset } from './assets/TLBookmarkAsset'
-export { type TLImageAsset } from './assets/TLImageAsset'
-export { type TLVideoAsset } from './assets/TLVideoAsset'
+export {
+	bookmarkAssetMigrations,
+	bookmarkAssetProps,
+	type TLBookmarkAsset,
+} from './assets/TLBookmarkAsset'
+export { imageAssetMigrations, imageAssetProps, type TLImageAsset } from './assets/TLImageAsset'
+export { videoAssetMigrations, videoAssetProps, type TLVideoAsset } from './assets/TLVideoAsset'
 export {
 	arrowBindingMigrations,
 	arrowBindingProps,
@@ -56,6 +60,7 @@ export {
 } from './createPresenceStateDerivation'
 export {
 	createTLSchema,
+	defaultAssetSchemas,
 	defaultBindingSchemas,
 	defaultShapeSchemas,
 	type SchemaPropsInfo,
@@ -82,11 +87,17 @@ export { scribbleValidator, TL_SCRIBBLE_STATES, type TLScribble } from './misc/T
 export {
 	assetMigrations,
 	AssetRecordType,
-	assetValidator,
+	createAssetPropsMigrationIds,
+	createAssetPropsMigrationSequence,
+	createAssetRecordType,
 	type TLAsset,
 	type TLAssetId,
 	type TLAssetPartial,
 	type TLAssetShape,
+	type TLDefaultAsset,
+	type TLGlobalAssetPropsMap,
+	type TLIndexedAssets,
+	type TLUnknownAsset,
 } from './records/TLAsset'
 export {
 	createBindingId,
@@ -290,21 +301,18 @@ export {
 } from './shapes/TLVideoShape'
 export { EnumStyleProp, StyleProp, type StylePropValue } from './styles/StyleProp'
 export {
-	defaultColorNames,
 	DefaultColorStyle,
-	DefaultColorThemePalette,
-	DefaultLabelColorStyle,
-	getColorValue,
-	getDefaultColorTheme,
+	registerColorsFromThemes,
 	type TLDefaultColorStyle,
-	type TLDefaultColorTheme,
-	type TLDefaultColorThemeColor,
 } from './styles/TLColorStyle'
 export { DefaultDashStyle, type TLDefaultDashStyle } from './styles/TLDashStyle'
 export { DefaultFillStyle, type TLDefaultFillStyle } from './styles/TLFillStyle'
+export { type TLFontFace, type TLFontFaceSource } from './styles/TLFontFace'
 export {
 	DefaultFontFamilies,
 	DefaultFontStyle,
+	isFontEntry,
+	registerFontsFromThemes,
 	type TLDefaultFontStyle,
 } from './styles/TLFontStyle'
 export {
@@ -313,6 +321,18 @@ export {
 } from './styles/TLHorizontalAlignStyle'
 export { DefaultSizeStyle, type TLDefaultSizeStyle } from './styles/TLSizeStyle'
 export { DefaultTextAlignStyle, type TLDefaultTextAlignStyle } from './styles/TLTextAlignStyle'
+export {
+	type TLDefaultColor,
+	type TLRemovedDefaultThemeColors,
+	type TLTheme,
+	type TLThemeColors,
+	type TLThemeDefaultColors,
+	type TLThemeFont,
+	type TLThemeFonts,
+	type TLThemeId,
+	type TLThemes,
+	type TLThemeUiColorKeys,
+} from './styles/TLTheme'
 export {
 	DefaultVerticalAlignStyle,
 	type TLDefaultVerticalAlignStyle,