@tldraw/tlschema 4.2.2 → 4.2.3

package/dist-esm/store-migrations.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/store-migrations.ts"],
-  "sourcesContent": ["import { createMigrationIds, createMigrationSequence } from '@tldraw/store'\nimport { IndexKey, objectMapEntries } from '@tldraw/utils'\nimport { TLPage } from './records/TLPage'\nimport { TLShape } from './records/TLShape'\nimport { TLLineShape } from './shapes/TLLineShape'\n\n/**\n * Migration version constants for store-level schema changes.\n * Each version represents a breaking change that requires data transformation.\n *\n * @internal\n */\nconst Versions = createMigrationIds('com.tldraw.store', {\n\tRemoveCodeAndIconShapeTypes: 1,\n\tAddInstancePresenceType: 2,\n\tRemoveTLUserAndPresenceAndAddPointer: 3,\n\tRemoveUserDocument: 4,\n\tFixIndexKeys: 5,\n} as const)\n\n/**\n * Migration version identifiers for store-level migrations.\n * These versions track changes to the overall store structure and data model.\n *\n * @example\n * ```ts\n * import { storeVersions } from '@tldraw/tlschema'\n *\n * // Check if a specific migration version exists\n * const hasRemoveCodeShapes = storeVersions.RemoveCodeAndIconShapeTypes\n * ```\n *\n * @public\n */\nexport { Versions as storeVersions }\n\n/**\n * Store-level migration sequence that handles evolution of the tldraw data model.\n * These migrations run when the store schema version changes and ensure backward\n * compatibility by transforming old data structures to new formats.\n *\n * The migrations handle:\n * - Removal of deprecated shape types (code, icon)\n * - Addition of new record types (instance presence)\n * - Cleanup of obsolete user and presence data\n * - Removal of deprecated user document records\n *\n * @example\n * ```ts\n * import { storeMigrations } from '@tldraw/tlschema'\n * import { migrate } from '@tldraw/store'\n *\n * // Apply store migrations to old data\n * const migratedStore = migrate({\n *   store: oldStoreData,\n *   migrations: storeMigrations,\n *   fromVersion: 0,\n *   toVersion: storeMigrations.currentVersion\n * })\n * ```\n *\n * @public\n */\nexport const storeMigrations = createMigrationSequence({\n\tsequenceId: 'com.tldraw.store',\n\tretroactive: false,\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.RemoveCodeAndIconShapeTypes,\n\t\t\tscope: 'storage',\n\t\t\tup: (storage) => {\n\t\t\t\tfor (const [id, record] of storage.entries()) {\n\t\t\t\t\tif (\n\t\t\t\t\t\trecord.typeName === 'shape' &&\n\t\t\t\t\t\t'type' in record &&\n\t\t\t\t\t\t(record.type === 'icon' || record.type === 'code')\n\t\t\t\t\t) {\n\t\t\t\t\t\tstorage.delete(id)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddInstancePresenceType,\n\t\t\tscope: 'storage',\n\t\t\tup(_storage) {\n\t\t\t\t// noop\n\t\t\t\t// there used to be a down migration for this but we made down migrations optional\n\t\t\t\t// and we don't use them on storage-level migrations so we can just remove it\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t// remove user and presence records and add pointer records\n\t\t\tid: Versions.RemoveTLUserAndPresenceAndAddPointer,\n\t\t\tscope: 'storage',\n\t\t\tup: (storage) => {\n\t\t\t\tfor (const [id, record] of storage.entries()) {\n\t\t\t\t\tif (record.typeName.match(/^(user|user_presence)$/)) {\n\t\t\t\t\t\tstorage.delete(id)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t// remove user document records\n\t\t\tid: Versions.RemoveUserDocument,\n\t\t\tscope: 'storage',\n\t\t\tup: (storage) => {\n\t\t\t\tfor (const [id, record] of storage.entries()) {\n\t\t\t\t\tif (record.typeName.match('user_document')) {\n\t\t\t\t\t\tstorage.delete(id)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.FixIndexKeys,\n\t\t\tscope: 'record',\n\t\t\tup: (record) => {\n\t\t\t\tif (['shape', 'page'].includes(record.typeName) && 'index' in record) {\n\t\t\t\t\tconst recordWithIndex = record as TLShape | TLPage\n\t\t\t\t\t// Our newer fractional indexed library (more correctly) validates that indices\n\t\t\t\t\t// do not end with 0. ('a0' being an exception)\n\t\t\t\t\tif (recordWithIndex.index.endsWith('0') && recordWithIndex.index !== 'a0') {\n\t\t\t\t\t\trecordWithIndex.index = (recordWithIndex.index.slice(0, -1) +\n\t\t\t\t\t\t\tgetNRandomBase62Digits(3)) as IndexKey\n\t\t\t\t\t}\n\t\t\t\t\t// Line shapes have 'points' that have indices as well.\n\t\t\t\t\tif (record.typeName === 'shape' && (recordWithIndex as TLShape).type === 'line') {\n\t\t\t\t\t\tconst lineShape = recordWithIndex as TLLineShape\n\t\t\t\t\t\tfor (const [_, point] of objectMapEntries(lineShape.props.points)) {\n\t\t\t\t\t\t\tif (point.index.endsWith('0') && point.index !== 'a0') {\n\t\t\t\t\t\t\t\tpoint.index = (point.index.slice(0, -1) + getNRandomBase62Digits(3)) as IndexKey\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: () => {\n\t\t\t\t// noop\n\t\t\t\t// Enables tlsync to support older clients so as to not force people to refresh immediately after deploying.\n\t\t\t},\n\t\t},\n\t],\n})\n\nconst BASE_62_DIGITS_WITHOUT_ZERO = '123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'\nconst getRandomBase62Digit = () => {\n\treturn BASE_62_DIGITS_WITHOUT_ZERO.charAt(\n\t\tMath.floor(Math.random() * BASE_62_DIGITS_WITHOUT_ZERO.length)\n\t)\n}\n\nconst getNRandomBase62Digits = (n: number) => {\n\treturn Array.from({ length: n }, getRandomBase62Digit).join('')\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB,+BAA+B;AAC5D,SAAmB,wBAAwB;AAW3C,MAAM,WAAW,mBAAmB,oBAAoB;AAAA,EACvD,6BAA6B;AAAA,EAC7B,yBAAyB;AAAA,EACzB,sCAAsC;AAAA,EACtC,oBAAoB;AAAA,EACpB,cAAc;AACf,CAAU;AA6CH,MAAM,kBAAkB,wBAAwB;AAAA,EACtD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,YAAY;AAChB,mBAAW,CAAC,IAAI,MAAM,KAAK,QAAQ,QAAQ,GAAG;AAC7C,cACC,OAAO,aAAa,WACpB,UAAU,WACT,OAAO,SAAS,UAAU,OAAO,SAAS,SAC1C;AACD,oBAAQ,OAAO,EAAE;AAAA,UAClB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,GAAG,UAAU;AAAA,MAIb;AAAA,IACD;AAAA,IACA;AAAA;AAAA,MAEC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,YAAY;AAChB,mBAAW,CAAC,IAAI,MAAM,KAAK,QAAQ,QAAQ,GAAG;AAC7C,cAAI,OAAO,SAAS,MAAM,wBAAwB,GAAG;AACpD,oBAAQ,OAAO,EAAE;AAAA,UAClB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA;AAAA,MAEC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,YAAY;AAChB,mBAAW,CAAC,IAAI,MAAM,KAAK,QAAQ,QAAQ,GAAG;AAC7C,cAAI,OAAO,SAAS,MAAM,eAAe,GAAG;AAC3C,oBAAQ,OAAO,EAAE;AAAA,UAClB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,WAAW;AACf,YAAI,CAAC,SAAS,MAAM,EAAE,SAAS,OAAO,QAAQ,KAAK,WAAW,QAAQ;AACrE,gBAAM,kBAAkB;AAGxB,cAAI,gBAAgB,MAAM,SAAS,GAAG,KAAK,gBAAgB,UAAU,MAAM;AAC1E,4BAAgB,QAAS,gBAAgB,MAAM,MAAM,GAAG,EAAE,IACzD,uBAAuB,CAAC;AAAA,UAC1B;AAEA,cAAI,OAAO,aAAa,WAAY,gBAA4B,SAAS,QAAQ;AAChF,kBAAM,YAAY;AAClB,uBAAW,CAAC,GAAG,KAAK,KAAK,iBAAiB,UAAU,MAAM,MAAM,GAAG;AAClE,kBAAI,MAAM,MAAM,SAAS,GAAG,KAAK,MAAM,UAAU,MAAM;AACtD,sBAAM,QAAS,MAAM,MAAM,MAAM,GAAG,EAAE,IAAI,uBAAuB,CAAC;AAAA,cACnE;AAAA,YACD;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,MACA,MAAM,MAAM;AAAA,MAGZ;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAED,MAAM,8BAA8B;AACpC,MAAM,uBAAuB,MAAM;AAClC,SAAO,4BAA4B;AAAA,IAClC,KAAK,MAAM,KAAK,OAAO,IAAI,4BAA4B,MAAM;AAAA,EAC9D;AACD;AAEA,MAAM,yBAAyB,CAAC,MAAc;AAC7C,SAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE,KAAK,EAAE;AAC/D;",
+  "sourcesContent": ["import { createMigrationIds, createMigrationSequence } from '@tldraw/store'\nimport { IndexKey, objectMapEntries } from '@tldraw/utils'\nimport { TLPage } from './records/TLPage'\nimport { TLShape } from './records/TLShape'\nimport { TLLineShape } from './shapes/TLLineShape'\n\n/**\n * Migration version constants for store-level schema changes.\n * Each version represents a breaking change that requires data transformation.\n *\n * @internal\n */\nconst Versions = createMigrationIds('com.tldraw.store', {\n\tRemoveCodeAndIconShapeTypes: 1,\n\tAddInstancePresenceType: 2,\n\tRemoveTLUserAndPresenceAndAddPointer: 3,\n\tRemoveUserDocument: 4,\n\tFixIndexKeys: 5,\n} as const)\n\n/**\n * Migration version identifiers for store-level migrations.\n * These versions track changes to the overall store structure and data model.\n *\n * @example\n * ```ts\n * import { storeVersions } from '@tldraw/tlschema'\n *\n * // Check if a specific migration version exists\n * const hasRemoveCodeShapes = storeVersions.RemoveCodeAndIconShapeTypes\n * ```\n *\n * @public\n */\nexport { Versions as storeVersions }\n\n/**\n * Store-level migration sequence that handles evolution of the tldraw data model.\n * These migrations run when the store schema version changes and ensure backward\n * compatibility by transforming old data structures to new formats.\n *\n * The migrations handle:\n * - Removal of deprecated shape types (code, icon)\n * - Addition of new record types (instance presence)\n * - Cleanup of obsolete user and presence data\n * - Removal of deprecated user document records\n *\n * @example\n * ```ts\n * import { storeMigrations } from '@tldraw/tlschema'\n * import { migrate } from '@tldraw/store'\n *\n * // Apply store migrations to old data\n * const migratedStore = migrate({\n *   store: oldStoreData,\n *   migrations: storeMigrations,\n *   fromVersion: 0,\n *   toVersion: storeMigrations.currentVersion\n * })\n * ```\n *\n * @public\n */\nexport const storeMigrations = createMigrationSequence({\n\tsequenceId: 'com.tldraw.store',\n\tretroactive: false,\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.RemoveCodeAndIconShapeTypes,\n\t\t\tscope: 'store',\n\t\t\tup: (store) => {\n\t\t\t\tfor (const [id, record] of objectMapEntries(store)) {\n\t\t\t\t\tif (\n\t\t\t\t\t\trecord.typeName === 'shape' &&\n\t\t\t\t\t\t((record as TLShape).type === 'icon' || (record as TLShape).type === 'code')\n\t\t\t\t\t) {\n\t\t\t\t\t\tdelete store[id]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddInstancePresenceType,\n\t\t\tscope: 'store',\n\t\t\tup(_store) {\n\t\t\t\t// noop\n\t\t\t\t// there used to be a down migration for this but we made down migrations optional\n\t\t\t\t// and we don't use them on store-level migrations so we can just remove it\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t// remove user and presence records and add pointer records\n\t\t\tid: Versions.RemoveTLUserAndPresenceAndAddPointer,\n\t\t\tscope: 'store',\n\t\t\tup: (store) => {\n\t\t\t\tfor (const [id, record] of objectMapEntries(store)) {\n\t\t\t\t\tif (record.typeName.match(/^(user|user_presence)$/)) {\n\t\t\t\t\t\tdelete store[id]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t// remove user document records\n\t\t\tid: Versions.RemoveUserDocument,\n\t\t\tscope: 'store',\n\t\t\tup: (store) => {\n\t\t\t\tfor (const [id, record] of objectMapEntries(store)) {\n\t\t\t\t\tif (record.typeName.match('user_document')) {\n\t\t\t\t\t\tdelete store[id]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.FixIndexKeys,\n\t\t\tscope: 'record',\n\t\t\tup: (record) => {\n\t\t\t\tif (['shape', 'page'].includes(record.typeName) && 'index' in record) {\n\t\t\t\t\tconst recordWithIndex = record as TLShape | TLPage\n\t\t\t\t\t// Our newer fractional indexed library (more correctly) validates that indices\n\t\t\t\t\t// do not end with 0. ('a0' being an exception)\n\t\t\t\t\tif (recordWithIndex.index.endsWith('0') && recordWithIndex.index !== 'a0') {\n\t\t\t\t\t\trecordWithIndex.index = (recordWithIndex.index.slice(0, -1) +\n\t\t\t\t\t\t\tgetNRandomBase62Digits(3)) as IndexKey\n\t\t\t\t\t}\n\t\t\t\t\t// Line shapes have 'points' that have indices as well.\n\t\t\t\t\tif (record.typeName === 'shape' && (recordWithIndex as TLShape).type === 'line') {\n\t\t\t\t\t\tconst lineShape = recordWithIndex as TLLineShape\n\t\t\t\t\t\tfor (const [_, point] of objectMapEntries(lineShape.props.points)) {\n\t\t\t\t\t\t\tif (point.index.endsWith('0') && point.index !== 'a0') {\n\t\t\t\t\t\t\t\tpoint.index = (point.index.slice(0, -1) + getNRandomBase62Digits(3)) as IndexKey\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: () => {\n\t\t\t\t// noop\n\t\t\t\t// Enables tlsync to support older clients so as to not force people to refresh immediately after deploying.\n\t\t\t},\n\t\t},\n\t],\n})\n\nconst BASE_62_DIGITS_WITHOUT_ZERO = '123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'\nconst getRandomBase62Digit = () => {\n\treturn BASE_62_DIGITS_WITHOUT_ZERO.charAt(\n\t\tMath.floor(Math.random() * BASE_62_DIGITS_WITHOUT_ZERO.length)\n\t)\n}\n\nconst getNRandomBase62Digits = (n: number) => {\n\treturn Array.from({ length: n }, getRandomBase62Digit).join('')\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB,+BAA+B;AAC5D,SAAmB,wBAAwB;AAW3C,MAAM,WAAW,mBAAmB,oBAAoB;AAAA,EACvD,6BAA6B;AAAA,EAC7B,yBAAyB;AAAA,EACzB,sCAAsC;AAAA,EACtC,oBAAoB;AAAA,EACpB,cAAc;AACf,CAAU;AA6CH,MAAM,kBAAkB,wBAAwB;AAAA,EACtD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,UAAU;AACd,mBAAW,CAAC,IAAI,MAAM,KAAK,iBAAiB,KAAK,GAAG;AACnD,cACC,OAAO,aAAa,YAClB,OAAmB,SAAS,UAAW,OAAmB,SAAS,SACpE;AACD,mBAAO,MAAM,EAAE;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,GAAG,QAAQ;AAAA,MAIX;AAAA,IACD;AAAA,IACA;AAAA;AAAA,MAEC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,UAAU;AACd,mBAAW,CAAC,IAAI,MAAM,KAAK,iBAAiB,KAAK,GAAG;AACnD,cAAI,OAAO,SAAS,MAAM,wBAAwB,GAAG;AACpD,mBAAO,MAAM,EAAE;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA;AAAA,MAEC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,UAAU;AACd,mBAAW,CAAC,IAAI,MAAM,KAAK,iBAAiB,KAAK,GAAG;AACnD,cAAI,OAAO,SAAS,MAAM,eAAe,GAAG;AAC3C,mBAAO,MAAM,EAAE;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,WAAW;AACf,YAAI,CAAC,SAAS,MAAM,EAAE,SAAS,OAAO,QAAQ,KAAK,WAAW,QAAQ;AACrE,gBAAM,kBAAkB;AAGxB,cAAI,gBAAgB,MAAM,SAAS,GAAG,KAAK,gBAAgB,UAAU,MAAM;AAC1E,4BAAgB,QAAS,gBAAgB,MAAM,MAAM,GAAG,EAAE,IACzD,uBAAuB,CAAC;AAAA,UAC1B;AAEA,cAAI,OAAO,aAAa,WAAY,gBAA4B,SAAS,QAAQ;AAChF,kBAAM,YAAY;AAClB,uBAAW,CAAC,GAAG,KAAK,KAAK,iBAAiB,UAAU,MAAM,MAAM,GAAG;AAClE,kBAAI,MAAM,MAAM,SAAS,GAAG,KAAK,MAAM,UAAU,MAAM;AACtD,sBAAM,QAAS,MAAM,MAAM,MAAM,GAAG,EAAE,IAAI,uBAAuB,CAAC;AAAA,cACnE;AAAA,YACD;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,MACA,MAAM,MAAM;AAAA,MAGZ;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAED,MAAM,8BAA8B;AACpC,MAAM,uBAAuB,MAAM;AAClC,SAAO,4BAA4B;AAAA,IAClC,KAAK,MAAM,KAAK,OAAO,IAAI,4BAA4B,MAAM;AAAA,EAC9D;AACD;AAEA,MAAM,yBAAyB,CAAC,MAAc;AAC7C,SAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE,KAAK,EAAE;AAC/D;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tlschema",
   "description": "tldraw infinite canvas SDK (schema).",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -47,18 +47,18 @@
   "devDependencies": {
     "kleur": "^4.1.5",
     "lazyrepo": "0.0.0-alpha.27",
-    "react": "^19.2.1",
+    "react": "^18.3.1",
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@tldraw/state": "4.2.2",
-    "@tldraw/store": "4.2.2",
-    "@tldraw/utils": "4.2.2",
-    "@tldraw/validate": "4.2.2"
+    "@tldraw/state": "4.2.3",
+    "@tldraw/store": "4.2.3",
+    "@tldraw/utils": "4.2.3",
+    "@tldraw/validate": "4.2.3"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.2.1",
-    "react-dom": "^18.2.0 || ^19.2.1"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/src/__tests__/migrationTestUtils.ts

@@ -1,4 +1,4 @@
-import { devFreeze, Migration, MigrationId } from '@tldraw/store'
+import { Migration, MigrationId } from '@tldraw/store'
 import { mockUniqueId, structuredClone } from '@tldraw/utils'
 import { vi } from 'vitest'
 import { createTLSchema } from '../createTLSchema'
@@ -25,14 +25,8 @@ export function getTestMigration(migrationId: MigrationId) {
 		id: migrationId,
 		up: (stuff: any) => {
 			nextNanoId = 0
-			if (migration.scope === 'record' || migration.scope === 'store') {
-				const result = structuredClone(stuff)
-				return migration.up(result) ?? result
-			}
-			const storage =
-				typeof stuff.entries === 'function' ? stuff : new Map(Object.entries(stuff).map(devFreeze))
-			migration.up(storage)
-			return typeof stuff.entries === 'function' ? storage : Object.fromEntries(storage.entries())
+			const result = structuredClone(stuff)
+			return migration.up(result) ?? result
 		},
 		down: (stuff: any) => {
 			nextNanoId = 0

package/src/assets/TLBookmarkAsset.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest'
+import { getTestMigration } from '../__tests__/migrationTestUtils'
+import { bookmarkAssetVersions } from './TLBookmarkAsset'
+
+describe('TLBookmarkAsset', () => {
+	describe('MakeUrlsValid migration', () => {
+		const { up, down } = getTestMigration(bookmarkAssetVersions.MakeUrlsValid)
+
+		it('should clean invalid src URLs and preserve valid ones', () => {
+			const assetWithInvalidSrc = {
+				id: 'asset:bookmark1',
+				type: 'bookmark',
+				props: {
+					title: 'Test Bookmark',
+					description: 'Test Description',
+					image: 'https://example.com/image.jpg',
+					src: 'invalid-url-format',
+				},
+			}
+
+			const result = up(assetWithInvalidSrc)
+			expect(result.props.src).toBe('')
+
+			// Test valid URL is preserved
+			const assetWithValidSrc = {
+				...assetWithInvalidSrc,
+				props: { ...assetWithInvalidSrc.props, src: 'https://example.com' },
+			}
+			const validResult = up(assetWithValidSrc)
+			expect(validResult.props.src).toBe('https://example.com')
+		})
+
+		it('should be a no-op down migration', () => {
+			const asset = {
+				id: 'asset:bookmark1',
+				type: 'bookmark',
+				props: {
+					title: 'Test Bookmark',
+					description: 'Test Description',
+					image: 'https://example.com/image.jpg',
+					src: 'https://example.com',
+				},
+			}
+
+			const result = down(asset)
+			expect(result).toEqual(asset)
+		})
+	})
+
+	describe('AddFavicon migration', () => {
+		const { up, down } = getTestMigration(bookmarkAssetVersions.AddFavicon)
+
+		it('should add favicon property and clean invalid URLs', () => {
+			// Test adding favicon property to asset without one
+			const assetWithoutFavicon = {
+				id: 'asset:bookmark1',
+				type: 'bookmark',
+				props: {
+					title: 'Test Bookmark',
+					description: 'Test Description',
+					image: 'https://example.com/image.jpg',
+					src: 'https://example.com',
+				},
+			}
+
+			const result = up(assetWithoutFavicon)
+			expect(result.props.favicon).toBe('')
+
+			// Test cleaning invalid favicon URL
+			const assetWithInvalidFavicon = {
+				...assetWithoutFavicon,
+				props: { ...assetWithoutFavicon.props, favicon: 'invalid-url' },
+			}
+			const cleanResult = up(assetWithInvalidFavicon)
+			expect(cleanResult.props.favicon).toBe('')
+		})
+
+		it('should remove favicon property in down migration', () => {
+			const assetWithFavicon = {
+				id: 'asset:bookmark1',
+				type: 'bookmark',
+				props: {
+					title: 'Test Bookmark',
+					description: 'Test Description',
+					image: 'https://example.com/image.jpg',
+					src: 'https://example.com',
+					favicon: 'https://example.com/favicon.ico',
+				},
+			}
+
+			const result = down(assetWithFavicon)
+			expect(result.props).not.toHaveProperty('favicon')
+			expect(result.props.title).toBe('Test Bookmark')
+		})
+	})
+})

package/src/assets/TLImageAsset.test.ts

@@ -0,0 +1,213 @@
+import { describe, expect, it } from 'vitest'
+import { getTestMigration } from '../__tests__/migrationTestUtils'
+import { imageAssetVersions } from './TLImageAsset'
+
+describe('TLImageAsset', () => {
+	describe('AddIsAnimated migration', () => {
+		const { up, down } = getTestMigration(imageAssetVersions.AddIsAnimated)
+
+		it('should add isAnimated property in up migration', () => {
+			const assetWithoutIsAnimated = {
+				id: 'asset:image1',
+				type: 'image',
+				props: {
+					w: 100,
+					h: 100,
+					name: 'test.jpg',
+					mimeType: 'image/jpeg',
+					src: 'https://example.com/test.jpg',
+				},
+			}
+
+			const result = up(assetWithoutIsAnimated)
+			expect(result.props.isAnimated).toBe(false)
+		})
+
+		it('should remove isAnimated property in down migration', () => {
+			const assetWithIsAnimated = {
+				id: 'asset:image3',
+				type: 'image',
+				props: {
+					w: 100,
+					h: 100,
+					name: 'test.jpg',
+					mimeType: 'image/jpeg',
+					src: 'https://example.com/test.jpg',
+					isAnimated: false,
+				},
+			}
+
+			const result = down(assetWithIsAnimated)
+			expect(result.props).not.toHaveProperty('isAnimated')
+		})
+	})
+
+	describe('RenameWidthHeight migration', () => {
+		const { up, down } = getTestMigration(imageAssetVersions.RenameWidthHeight)
+
+		it('should rename width and height to w and h in up migration', () => {
+			const assetWithWidthHeight = {
+				id: 'asset:image1',
+				type: 'image',
+				props: {
+					width: 800,
+					height: 600,
+					name: 'test.jpg',
+					isAnimated: false,
+					mimeType: 'image/jpeg',
+					src: 'https://example.com/test.jpg',
+				},
+			}
+
+			const result = up(assetWithWidthHeight)
+			expect(result.props.w).toBe(800)
+			expect(result.props.h).toBe(600)
+			expect(result.props).not.toHaveProperty('width')
+			expect(result.props).not.toHaveProperty('height')
+		})
+
+		it('should rename w and h to width and height in down migration', () => {
+			const assetWithWH = {
+				id: 'asset:image3',
+				type: 'image',
+				props: {
+					w: 1024,
+					h: 768,
+					name: 'test.png',
+					isAnimated: false,
+					mimeType: 'image/png',
+					src: 'https://example.com/test.png',
+				},
+			}
+
+			const result = down(assetWithWH)
+			expect(result.props.width).toBe(1024)
+			expect(result.props.height).toBe(768)
+			expect(result.props).not.toHaveProperty('w')
+			expect(result.props).not.toHaveProperty('h')
+		})
+	})
+
+	describe('MakeUrlsValid migration', () => {
+		const { up, down: _down } = getTestMigration(imageAssetVersions.MakeUrlsValid)
+
+		it('should clean invalid src URLs in up migration', () => {
+			const assetWithInvalidSrc = {
+				id: 'asset:image1',
+				type: 'image',
+				props: {
+					w: 100,
+					h: 100,
+					name: 'test.jpg',
+					isAnimated: false,
+					mimeType: 'image/jpeg',
+					src: 'invalid-url-format',
+				},
+			}
+
+			const result = up(assetWithInvalidSrc)
+			expect(result.props.src).toBe('')
+		})
+
+		it('should preserve valid src URLs in up migration', () => {
+			const assetWithValidSrc = {
+				id: 'asset:image2',
+				type: 'image',
+				props: {
+					w: 100,
+					h: 100,
+					name: 'test.jpg',
+					isAnimated: false,
+					mimeType: 'image/jpeg',
+					src: 'https://example.com/test.jpg',
+				},
+			}
+
+			const result = up(assetWithValidSrc)
+			expect(result.props.src).toBe('https://example.com/test.jpg')
+		})
+	})
+
+	describe('AddFileSize migration', () => {
+		const { up, down } = getTestMigration(imageAssetVersions.AddFileSize)
+
+		it('should add fileSize property with -1 default in up migration', () => {
+			const assetWithoutFileSize = {
+				id: 'asset:image1',
+				type: 'image',
+				props: {
+					w: 100,
+					h: 100,
+					name: 'test.jpg',
+					isAnimated: false,
+					mimeType: 'image/jpeg',
+					src: 'https://example.com/test.jpg',
+				},
+			}
+
+			const result = up(assetWithoutFileSize)
+			expect(result.props.fileSize).toBe(-1)
+		})
+
+		it('should remove fileSize property in down migration', () => {
+			const assetWithFileSize = {
+				id: 'asset:image3',
+				type: 'image',
+				props: {
+					w: 100,
+					h: 100,
+					name: 'test.jpg',
+					isAnimated: false,
+					mimeType: 'image/jpeg',
+					src: 'https://example.com/test.jpg',
+					fileSize: 50000,
+				},
+			}
+
+			const result = down(assetWithFileSize)
+			expect(result.props).not.toHaveProperty('fileSize')
+		})
+	})
+
+	describe('MakeFileSizeOptional migration', () => {
+		const { up, down } = getTestMigration(imageAssetVersions.MakeFileSizeOptional)
+
+		it('should convert fileSize -1 to undefined in up migration', () => {
+			const assetWithNegativeFileSize = {
+				id: 'asset:image1',
+				type: 'image',
+				props: {
+					w: 100,
+					h: 100,
+					name: 'test.jpg',
+					isAnimated: false,
+					mimeType: 'image/jpeg',
+					src: 'https://example.com/test.jpg',
+					fileSize: -1,
+				},
+			}
+
+			const result = up(assetWithNegativeFileSize)
+			expect(result.props.fileSize).toBeUndefined()
+		})
+
+		it('should convert undefined fileSize to -1 in down migration', () => {
+			const assetWithUndefinedFileSize = {
+				id: 'asset:image5',
+				type: 'image',
+				props: {
+					w: 100,
+					h: 100,
+					name: 'test.jpg',
+					isAnimated: false,
+					mimeType: 'image/jpeg',
+					src: 'https://example.com/test.jpg',
+					fileSize: undefined,
+				},
+			}
+
+			const result = down(assetWithUndefinedFileSize)
+			expect(result.props.fileSize).toBe(-1)
+		})
+	})
+})

package/src/assets/TLVideoAsset.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it } from 'vitest'
+import { getTestMigration } from '../__tests__/migrationTestUtils'
+import { videoAssetVersions } from './TLVideoAsset'
+
+describe('TLVideoAsset', () => {
+	describe('migrations', () => {
+		it('should handle AddIsAnimated migration', () => {
+			const { up, down } = getTestMigration(videoAssetVersions.AddIsAnimated)
+
+			const assetWithoutIsAnimated = {
+				id: 'asset:video1',
+				type: 'video',
+				props: {
+					w: 640,
+					h: 480,
+					name: 'test.mp4',
+					mimeType: 'video/mp4',
+					src: 'https://example.com/test.mp4',
+				},
+			}
+
+			const upResult = up(assetWithoutIsAnimated)
+			expect(upResult.props.isAnimated).toBe(false)
+
+			const downResult = down(upResult)
+			expect(downResult.props).not.toHaveProperty('isAnimated')
+		})
+
+		it('should handle RenameWidthHeight migration', () => {
+			const { up, down } = getTestMigration(videoAssetVersions.RenameWidthHeight)
+
+			const assetWithWidthHeight = {
+				id: 'asset:video1',
+				type: 'video',
+				props: {
+					width: 1920,
+					height: 1080,
+					name: 'test.mp4',
+					isAnimated: true,
+					mimeType: 'video/mp4',
+					src: 'https://example.com/test.mp4',
+				},
+			}
+
+			const upResult = up(assetWithWidthHeight)
+			expect(upResult.props.w).toBe(1920)
+			expect(upResult.props.h).toBe(1080)
+			expect(upResult.props).not.toHaveProperty('width')
+			expect(upResult.props).not.toHaveProperty('height')
+
+			const downResult = down(upResult)
+			expect(downResult.props.width).toBe(1920)
+			expect(downResult.props.height).toBe(1080)
+			expect(downResult.props).not.toHaveProperty('w')
+			expect(downResult.props).not.toHaveProperty('h')
+		})
+
+		it('should handle MakeUrlsValid migration', () => {
+			const { up } = getTestMigration(videoAssetVersions.MakeUrlsValid)
+
+			const assetWithInvalidSrc = {
+				id: 'asset:video1',
+				type: 'video',
+				props: {
+					w: 640,
+					h: 480,
+					name: 'test.mp4',
+					isAnimated: true,
+					mimeType: 'video/mp4',
+					src: 'invalid-url-format',
+				},
+			}
+
+			const result = up(assetWithInvalidSrc)
+			expect(result.props.src).toBe('')
+		})
+
+		it('should handle MakeFileSizeOptional migration', () => {
+			const { up, down } = getTestMigration(videoAssetVersions.MakeFileSizeOptional)
+
+			const assetWithNegativeFileSize = {
+				id: 'asset:video1',
+				type: 'video',
+				props: {
+					w: 640,
+					h: 480,
+					name: 'test.mp4',
+					isAnimated: true,
+					mimeType: 'video/mp4',
+					src: 'https://example.com/test.mp4',
+					fileSize: -1,
+				},
+			}
+
+			const upResult = up(assetWithNegativeFileSize)
+			expect(upResult.props.fileSize).toBeUndefined()
+
+			const downResult = down({
+				...assetWithNegativeFileSize,
+				props: { ...assetWithNegativeFileSize.props, fileSize: undefined },
+			})
+			expect(downResult.props.fileSize).toBe(-1)
+		})
+	})
+})

package/src/bindings/TLArrowBinding.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+import { getTestMigration } from '../__tests__/migrationTestUtils'
+import { arrowBindingVersions } from './TLArrowBinding'
+
+describe('TLArrowBinding', () => {
+	describe('AddSnap migration', () => {
+		const { up, down } = getTestMigration(arrowBindingVersions.AddSnap)
+
+		it('should add snap property with default value "none"', () => {
+			const oldRecord = {
+				props: {
+					terminal: 'end',
+					normalizedAnchor: { x: 0.5, y: 0.5 },
+					isExact: true,
+					isPrecise: false,
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.snap).toBe('none')
+			expect(result.props.terminal).toBe('end')
+		})
+
+		it('should remove snap property on down migration', () => {
+			const newRecord = {
+				props: {
+					terminal: 'end',
+					normalizedAnchor: { x: 0.5, y: 0.5 },
+					isExact: true,
+					isPrecise: false,
+					snap: 'center',
+				},
+			}
+
+			const result = down(newRecord)
+			expect(result.props.snap).toBeUndefined()
+			expect(result.props.terminal).toBe('end')
+		})
+
+		it('should be reversible', () => {
+			const originalRecord = {
+				props: {
+					terminal: 'start',
+					normalizedAnchor: { x: 0.5, y: 0.5 },
+					isExact: true,
+					isPrecise: false,
+				},
+			}
+
+			const upResult = up(originalRecord)
+			const downResult = down(upResult)
+			expect(downResult.props).toEqual(originalRecord.props)
+		})
+	})
+})

package/src/bindings/TLBaseBinding.ts

@@ -1,3 +1,4 @@
+import { BaseRecord } from '@tldraw/store'
 import { JsonObject } from '@tldraw/utils'
 import { T } from '@tldraw/validate'
 import { idValidator } from '../misc/id-validator'
@@ -9,41 +10,33 @@ import { shapeIdValidator } from '../shapes/TLBaseShape'
  * Base interface for all binding types in tldraw. Bindings represent relationships
  * between shapes, such as arrows connecting to other shapes or organizational connections.
  *
- * All default bindings extend this base interface with specific type and property definitions.
+ * All bindings extend this base interface with specific type and property definitions.
  * The binding system enables shapes to maintain relationships that persist through
  * transformations, movements, and other operations.
  *
- * Custom bindings should be defined by augmenting the TLGlobalBindingPropsMap type and getting the binding type from the TLBinding type.
- *
  * @param Type - String literal type identifying the specific binding type (e.g., 'arrow')
  * @param Props - Object containing binding-specific properties and configuration
  *
  * @example
  * ```ts
- * // Define a default binding type
- * interface TLArrowBinding extends TLBaseBinding<'arrow', TLArrowBindingProps> {}
- *
- * interface TLArrowBindingProps {
- *   terminal: 'start' | 'end'
- *   normalizedAnchor: VecModel
- *   isExact: boolean
- *   isPrecise: boolean
- *   snap: ElbowArrowSnap
+ * // Define a custom binding type
+ * interface MyCustomBinding extends TLBaseBinding<'custom', MyCustomProps> {}
+ *
+ * interface MyCustomProps {
+ *   strength: number
+ *   color: string
  * }
  *
  * // Create a binding instance
- * const arrowBinding: TLArrowBinding = {
+ * const binding: MyCustomBinding = {
  *   id: 'binding:abc123',
  *   typeName: 'binding',
- *   type: 'arrow',
+ *   type: 'custom',
  *   fromId: 'shape:source1',
  *   toId: 'shape:target1',
  *   props: {
- *     terminal: 'end',
- *     normalizedAnchor: { x: 0.5, y: 0.5 },
- *     isExact: false,
- *     isPrecise: true,
- *     snap: 'edge'
+ *     strength: 0.8,
+ *     color: 'red'
  *   },
  *   meta: {}
  * }
@@ -51,12 +44,8 @@ import { shapeIdValidator } from '../shapes/TLBaseShape'
  *
  * @public
  */
-export interface TLBaseBinding<Type extends string, Props extends object> {
-	// using real `extends BaseRecord<'binding', TLBindingId>` introduces a circularity in the types
-	// and for that reason those "base members" have to be declared manually here
-	readonly id: TLBindingId
-	readonly typeName: 'binding'
-
+export interface TLBaseBinding<Type extends string, Props extends object>
+	extends BaseRecord<'binding', TLBindingId> {
 	/** The specific type of this binding (e.g., 'arrow', 'custom') */
 	type: Type
 	/** ID of the source shape in this binding relationship */

package/src/createTLSchema.ts

@@ -22,9 +22,8 @@ import {
 	getShapePropKeysByStyle,
 	rootShapeMigrations,
 } from './records/TLShape'
-import { RecordProps, TLPropsMigrations, processPropsMigrations } from './recordsWithProps'
+import { TLPropsMigrations, processPropsMigrations } from './recordsWithProps'
 import { arrowShapeMigrations, arrowShapeProps } from './shapes/TLArrowShape'
-import { TLBaseShape } from './shapes/TLBaseShape'
 import { bookmarkShapeMigrations, bookmarkShapeProps } from './shapes/TLBookmarkShape'
 import { drawShapeMigrations, drawShapeProps } from './shapes/TLDrawShape'
 import { embedShapeMigrations, embedShapeProps } from './shapes/TLEmbedShape'
@@ -148,12 +147,7 @@ export const defaultShapeSchemas = {
 	note: { migrations: noteShapeMigrations, props: noteShapeProps },
 	text: { migrations: textShapeMigrations, props: textShapeProps },
 	video: { migrations: videoShapeMigrations, props: videoShapeProps },
-} satisfies {
-	[T in TLDefaultShape['type']]: {
-		migrations: SchemaPropsInfo['migrations']
-		props: RecordProps<TLBaseShape<T, Extract<TLDefaultShape, { type: T }>['props']>>
-	}
-}
+} satisfies { [T in TLDefaultShape['type']]: SchemaPropsInfo }
 
 /**
  * Default binding schema configurations for all built-in tldraw binding types.