@tldraw/tlschema 3.12.0-canary.ceec8eda0db0 → 3.12.0-canary.d0e07565d818

package/dist-cjs/index.d.ts

@@ -1030,6 +1030,13 @@ export declare interface TLDefaultColorThemeColor {
     semi: string;
     pattern: string;
     fill: string;
+    frame: {
+        fill: string;
+        headingFill: string;
+        headingStroke: string;
+        stroke: string;
+        text: string;
+    };
     note: {
         fill: string;
         text: string;
@@ -1121,6 +1128,7 @@ export declare interface TLFrameShapeProps {
     w: number;
     h: number;
     name: string;
+    color: TLDefaultColorStyle;
 }
 
 /** @public */
@@ -1216,6 +1224,7 @@ export declare interface TLImageShapeProps {
     crop: null | TLShapeCrop;
     flipX: boolean;
     flipY: boolean;
+    altText: string;
 }
 
 /**
@@ -1588,6 +1597,7 @@ export declare interface TLVideoShapeProps {
     playing: boolean;
     url: string;
     assetId: null | TLAssetId;
+    altText: string;
 }
 
 /** @public */

package/dist-cjs/index.js

@@ -172,7 +172,7 @@ var import_TLVerticalAlignStyle = require("./styles/TLVerticalAlignStyle");
 var import_translations = require("./translations/translations");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/tlschema",
-  "3.12.0-canary.ceec8eda0db0",
+  "3.12.0-canary.d0e07565d818",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/shapes/TLFrameShape.js

@@ -19,17 +19,37 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var TLFrameShape_exports = {};
 __export(TLFrameShape_exports, {
   frameShapeMigrations: () => frameShapeMigrations,
-  frameShapeProps: () => frameShapeProps
+  frameShapeProps: () => frameShapeProps,
+  frameShapeVersions: () => Versions
 });
 module.exports = __toCommonJS(TLFrameShape_exports);
 var import_validate = require("@tldraw/validate");
 var import_TLShape = require("../records/TLShape");
+var import_TLColorStyle = require("../styles/TLColorStyle");
 const frameShapeProps = {
   w: import_validate.T.nonZeroNumber,
   h: import_validate.T.nonZeroNumber,
-  name: import_validate.T.string
+  name: import_validate.T.string,
+  // because shape colors are an option, we don't want them to be picked up by the editor as a
+  // style prop by default, so instead of a proper style we just supply an equivalent validator.
+  // Check `FrameShapeUtil.configure` for how we replace this with the original
+  // `DefaultColorStyle` style when the option is turned on.
+  color: import_validate.T.literalEnum(...import_TLColorStyle.DefaultColorStyle.values)
 };
+const Versions = (0, import_TLShape.createShapePropsMigrationIds)("frame", {
+  AddColorProp: 1
+});
 const frameShapeMigrations = (0, import_TLShape.createShapePropsMigrationSequence)({
-  sequence: []
+  sequence: [
+    {
+      id: Versions.AddColorProp,
+      up: (props) => {
+        props.color = "black";
+      },
+      down: (props) => {
+        delete props.color;
+      }
+    }
+  ]
 });
 //# sourceMappingURL=TLFrameShape.js.map

package/dist-cjs/shapes/TLFrameShape.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shapes/TLFrameShape.ts"],
-  "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { TLBaseShape } from './TLBaseShape'\n\n/** @public */\nexport interface TLFrameShapeProps {\n\tw: number\n\th: number\n\tname: string\n}\n\n/** @public */\nexport type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>\n\n/** @public */\nexport const frameShapeProps: RecordProps<TLFrameShape> = {\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tname: T.string,\n}\n\n/** @public */\nexport const frameShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [],\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAClB,qBAAkD;AAe3C,MAAM,kBAA6C;AAAA,EACzD,GAAG,kBAAE;AAAA,EACL,GAAG,kBAAE;AAAA,EACL,MAAM,kBAAE;AACT;AAGO,MAAM,2BAAuB,kDAAkC;AAAA,EACrE,UAAU,CAAC;AACZ,CAAC;",
+  "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'\nimport { TLBaseShape } from './TLBaseShape'\n\n/** @public */\nexport interface TLFrameShapeProps {\n\tw: number\n\th: number\n\tname: string\n\tcolor: TLDefaultColorStyle\n}\n\n/** @public */\nexport type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>\n\n/** @public */\nexport const frameShapeProps: RecordProps<TLFrameShape> = {\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tname: T.string,\n\t// because shape colors are an option, we don't want them to be picked up by the editor as a\n\t// style prop by default, so instead of a proper style we just supply an equivalent validator.\n\t// Check `FrameShapeUtil.configure` for how we replace this with the original\n\t// `DefaultColorStyle` style when the option is turned on.\n\tcolor: T.literalEnum(...DefaultColorStyle.values),\n}\n\nconst Versions = createShapePropsMigrationIds('frame', {\n\tAddColorProp: 1,\n})\n\nexport { Versions as frameShapeVersions }\n\n/** @public */\nexport const frameShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.AddColorProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.color = 'black'\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.color\n\t\t\t},\n\t\t},\n\t],\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAClB,qBAAgF;AAEhF,0BAAuD;AAehD,MAAM,kBAA6C;AAAA,EACzD,GAAG,kBAAE;AAAA,EACL,GAAG,kBAAE;AAAA,EACL,MAAM,kBAAE;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,OAAO,kBAAE,YAAY,GAAG,sCAAkB,MAAM;AACjD;AAEA,MAAM,eAAW,6CAA6B,SAAS;AAAA,EACtD,cAAc;AACf,CAAC;AAKM,MAAM,2BAAuB,kDAAkC;AAAA,EACrE,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,QAAQ;AAAA,MACf;AAAA,MACA,MAAM,CAAC,UAAU;AAChB,eAAO,MAAM;AAAA,MACd;AAAA,IACD;AAAA,EACD;AACD,CAAC;",
   "names": []
 }

package/dist-cjs/shapes/TLImageShape.js

@@ -40,13 +40,15 @@ const imageShapeProps = {
   assetId: import_TLBaseAsset.assetIdValidator.nullable(),
   crop: ImageShapeCrop.nullable(),
   flipX: import_validate.T.boolean,
-  flipY: import_validate.T.boolean
+  flipY: import_validate.T.boolean,
+  altText: import_validate.T.string
 };
 const Versions = (0, import_TLShape.createShapePropsMigrationIds)("image", {
   AddUrlProp: 1,
   AddCropProp: 2,
   MakeUrlsValid: 3,
-  AddFlipProps: 4
+  AddFlipProps: 4,
+  AddAltText: 5
 });
 const imageShapeMigrations = (0, import_TLShape.createShapePropsMigrationSequence)({
   sequence: [
@@ -86,6 +88,15 @@ const imageShapeMigrations = (0, import_TLShape.createShapePropsMigrationSequenc
         delete props.flipX;
         delete props.flipY;
       }
+    },
+    {
+      id: Versions.AddAltText,
+      up: (props) => {
+        props.altText = "";
+      },
+      down: (props) => {
+        delete props.altText;
+      }
     }
   ]
 });

package/dist-cjs/shapes/TLImageShape.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shapes/TLImageShape.ts"],
-  "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { assetIdValidator } from '../assets/TLBaseAsset'\nimport { vecModelValidator } from '../misc/geometry-types'\nimport { TLAssetId } from '../records/TLAsset'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { TLShapeCrop } from './ShapeWithCrop'\nimport { TLBaseShape } from './TLBaseShape'\n\n/** @public */\nexport const ImageShapeCrop: T.ObjectValidator<TLShapeCrop> = T.object({\n\ttopLeft: vecModelValidator,\n\tbottomRight: vecModelValidator,\n})\n\n/** @public */\nexport interface TLImageShapeProps {\n\tw: number\n\th: number\n\tplaying: boolean\n\turl: string\n\tassetId: TLAssetId | null\n\tcrop: TLShapeCrop | null\n\tflipX: boolean\n\tflipY: boolean\n}\n\n/** @public */\nexport type TLImageShape = TLBaseShape<'image', TLImageShapeProps>\n\n/** @public */\nexport const imageShapeProps: RecordProps<TLImageShape> = {\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tplaying: T.boolean,\n\turl: T.linkUrl,\n\tassetId: assetIdValidator.nullable(),\n\tcrop: ImageShapeCrop.nullable(),\n\tflipX: T.boolean,\n\tflipY: T.boolean,\n}\n\nconst Versions = createShapePropsMigrationIds('image', {\n\tAddUrlProp: 1,\n\tAddCropProp: 2,\n\tMakeUrlsValid: 3,\n\tAddFlipProps: 4,\n})\n\nexport { Versions as imageShapeVersions }\n\n/** @public */\nexport const imageShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.AddUrlProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.url = ''\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddCropProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.crop = null\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.crop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.MakeUrlsValid,\n\t\t\tup: (props) => {\n\t\t\t\tif (!T.linkUrl.isValid(props.url)) {\n\t\t\t\t\tprops.url = ''\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddFlipProps,\n\t\t\tup: (props) => {\n\t\t\t\tprops.flipX = false\n\t\t\t\tprops.flipY = false\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.flipX\n\t\t\t\tdelete props.flipY\n\t\t\t},\n\t\t},\n\t],\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAClB,yBAAiC;AACjC,4BAAkC;AAElC,qBAAgF;AAMzE,MAAM,iBAAiD,kBAAE,OAAO;AAAA,EACtE,SAAS;AAAA,EACT,aAAa;AACd,CAAC;AAkBM,MAAM,kBAA6C;AAAA,EACzD,GAAG,kBAAE;AAAA,EACL,GAAG,kBAAE;AAAA,EACL,SAAS,kBAAE;AAAA,EACX,KAAK,kBAAE;AAAA,EACP,SAAS,oCAAiB,SAAS;AAAA,EACnC,MAAM,eAAe,SAAS;AAAA,EAC9B,OAAO,kBAAE;AAAA,EACT,OAAO,kBAAE;AACV;AAEA,MAAM,eAAW,6CAA6B,SAAS;AAAA,EACtD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AACf,CAAC;AAKM,MAAM,2BAAuB,kDAAkC;AAAA,EACrE,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,MAAM;AAAA,MACb;AAAA,MACA,MAAM;AAAA,IACP;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,OAAO;AAAA,MACd;AAAA,MACA,MAAM,CAAC,UAAU;AAChB,eAAO,MAAM;AAAA,MACd;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,YAAI,CAAC,kBAAE,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAClC,gBAAM,MAAM;AAAA,QACb;AAAA,MACD;AAAA,MACA,MAAM,CAAC,WAAW;AAAA,MAElB;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,QAAQ;AACd,cAAM,QAAQ;AAAA,MACf;AAAA,MACA,MAAM,CAAC,UAAU;AAChB,eAAO,MAAM;AACb,eAAO,MAAM;AAAA,MACd;AAAA,IACD;AAAA,EACD;AACD,CAAC;",
+  "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { assetIdValidator } from '../assets/TLBaseAsset'\nimport { vecModelValidator } from '../misc/geometry-types'\nimport { TLAssetId } from '../records/TLAsset'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { TLShapeCrop } from './ShapeWithCrop'\nimport { TLBaseShape } from './TLBaseShape'\n\n/** @public */\nexport const ImageShapeCrop: T.ObjectValidator<TLShapeCrop> = T.object({\n\ttopLeft: vecModelValidator,\n\tbottomRight: vecModelValidator,\n})\n\n/** @public */\nexport interface TLImageShapeProps {\n\tw: number\n\th: number\n\tplaying: boolean\n\turl: string\n\tassetId: TLAssetId | null\n\tcrop: TLShapeCrop | null\n\tflipX: boolean\n\tflipY: boolean\n\taltText: string\n}\n\n/** @public */\nexport type TLImageShape = TLBaseShape<'image', TLImageShapeProps>\n\n/** @public */\nexport const imageShapeProps: RecordProps<TLImageShape> = {\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tplaying: T.boolean,\n\turl: T.linkUrl,\n\tassetId: assetIdValidator.nullable(),\n\tcrop: ImageShapeCrop.nullable(),\n\tflipX: T.boolean,\n\tflipY: T.boolean,\n\taltText: T.string,\n}\n\nconst Versions = createShapePropsMigrationIds('image', {\n\tAddUrlProp: 1,\n\tAddCropProp: 2,\n\tMakeUrlsValid: 3,\n\tAddFlipProps: 4,\n\tAddAltText: 5,\n})\n\nexport { Versions as imageShapeVersions }\n\n/** @public */\nexport const imageShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.AddUrlProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.url = ''\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddCropProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.crop = null\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.crop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.MakeUrlsValid,\n\t\t\tup: (props) => {\n\t\t\t\tif (!T.linkUrl.isValid(props.url)) {\n\t\t\t\t\tprops.url = ''\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddFlipProps,\n\t\t\tup: (props) => {\n\t\t\t\tprops.flipX = false\n\t\t\t\tprops.flipY = false\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.flipX\n\t\t\t\tdelete props.flipY\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddAltText,\n\t\t\tup: (props) => {\n\t\t\t\tprops.altText = ''\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.altText\n\t\t\t},\n\t\t},\n\t],\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAClB,yBAAiC;AACjC,4BAAkC;AAElC,qBAAgF;AAMzE,MAAM,iBAAiD,kBAAE,OAAO;AAAA,EACtE,SAAS;AAAA,EACT,aAAa;AACd,CAAC;AAmBM,MAAM,kBAA6C;AAAA,EACzD,GAAG,kBAAE;AAAA,EACL,GAAG,kBAAE;AAAA,EACL,SAAS,kBAAE;AAAA,EACX,KAAK,kBAAE;AAAA,EACP,SAAS,oCAAiB,SAAS;AAAA,EACnC,MAAM,eAAe,SAAS;AAAA,EAC9B,OAAO,kBAAE;AAAA,EACT,OAAO,kBAAE;AAAA,EACT,SAAS,kBAAE;AACZ;AAEA,MAAM,eAAW,6CAA6B,SAAS;AAAA,EACtD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACb,CAAC;AAKM,MAAM,2BAAuB,kDAAkC;AAAA,EACrE,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,MAAM;AAAA,MACb;AAAA,MACA,MAAM;AAAA,IACP;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,OAAO;AAAA,MACd;AAAA,MACA,MAAM,CAAC,UAAU;AAChB,eAAO,MAAM;AAAA,MACd;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,YAAI,CAAC,kBAAE,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAClC,gBAAM,MAAM;AAAA,QACb;AAAA,MACD;AAAA,MACA,MAAM,CAAC,WAAW;AAAA,MAElB;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,QAAQ;AACd,cAAM,QAAQ;AAAA,MACf;AAAA,MACA,MAAM,CAAC,UAAU;AAChB,eAAO,MAAM;AACb,eAAO,MAAM;AAAA,MACd;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,UAAU;AAAA,MACjB;AAAA,MACA,MAAM,CAAC,UAAU;AAChB,eAAO,MAAM;AAAA,MACd;AAAA,IACD;AAAA,EACD;AACD,CAAC;",
   "names": []
 }

package/dist-cjs/shapes/TLVideoShape.js

@@ -32,11 +32,13 @@ const videoShapeProps = {
   time: import_validate.T.number,
   playing: import_validate.T.boolean,
   url: import_validate.T.linkUrl,
-  assetId: import_TLBaseAsset.assetIdValidator.nullable()
+  assetId: import_TLBaseAsset.assetIdValidator.nullable(),
+  altText: import_validate.T.string
 };
 const Versions = (0, import_TLShape.createShapePropsMigrationIds)("video", {
   AddUrlProp: 1,
-  MakeUrlsValid: 2
+  MakeUrlsValid: 2,
+  AddAltText: 3
 });
 const videoShapeMigrations = (0, import_TLShape.createShapePropsMigrationSequence)({
   sequence: [
@@ -56,6 +58,15 @@ const videoShapeMigrations = (0, import_TLShape.createShapePropsMigrationSequenc
       },
       down: (_props) => {
       }
+    },
+    {
+      id: Versions.AddAltText,
+      up: (props) => {
+        props.altText = "";
+      },
+      down: (props) => {
+        delete props.altText;
+      }
     }
   ]
 });

package/dist-cjs/shapes/TLVideoShape.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shapes/TLVideoShape.ts"],
-  "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { assetIdValidator } from '../assets/TLBaseAsset'\nimport { TLAssetId } from '../records/TLAsset'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { TLBaseShape } from './TLBaseShape'\n\n/** @public */\nexport interface TLVideoShapeProps {\n\tw: number\n\th: number\n\ttime: number\n\tplaying: boolean\n\turl: string\n\tassetId: TLAssetId | null\n}\n\n/** @public */\nexport type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>\n\n/** @public */\nexport const videoShapeProps: RecordProps<TLVideoShape> = {\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\ttime: T.number,\n\tplaying: T.boolean,\n\turl: T.linkUrl,\n\tassetId: assetIdValidator.nullable(),\n}\n\nconst Versions = createShapePropsMigrationIds('video', {\n\tAddUrlProp: 1,\n\tMakeUrlsValid: 2,\n})\n\nexport { Versions as videoShapeVersions }\n\n/** @public */\nexport const videoShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.AddUrlProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.url = ''\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: Versions.MakeUrlsValid,\n\t\t\tup: (props) => {\n\t\t\t\tif (!T.linkUrl.isValid(props.url)) {\n\t\t\t\t\tprops.url = ''\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t},\n\t],\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAClB,yBAAiC;AAEjC,qBAAgF;AAkBzE,MAAM,kBAA6C;AAAA,EACzD,GAAG,kBAAE;AAAA,EACL,GAAG,kBAAE;AAAA,EACL,MAAM,kBAAE;AAAA,EACR,SAAS,kBAAE;AAAA,EACX,KAAK,kBAAE;AAAA,EACP,SAAS,oCAAiB,SAAS;AACpC;AAEA,MAAM,eAAW,6CAA6B,SAAS;AAAA,EACtD,YAAY;AAAA,EACZ,eAAe;AAChB,CAAC;AAKM,MAAM,2BAAuB,kDAAkC;AAAA,EACrE,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,MAAM;AAAA,MACb;AAAA,MACA,MAAM;AAAA,IACP;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,YAAI,CAAC,kBAAE,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAClC,gBAAM,MAAM;AAAA,QACb;AAAA,MACD;AAAA,MACA,MAAM,CAAC,WAAW;AAAA,MAElB;AAAA,IACD;AAAA,EACD;AACD,CAAC;",
+  "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { assetIdValidator } from '../assets/TLBaseAsset'\nimport { TLAssetId } from '../records/TLAsset'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { TLBaseShape } from './TLBaseShape'\n\n/** @public */\nexport interface TLVideoShapeProps {\n\tw: number\n\th: number\n\ttime: number\n\tplaying: boolean\n\turl: string\n\tassetId: TLAssetId | null\n\taltText: string\n}\n\n/** @public */\nexport type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>\n\n/** @public */\nexport const videoShapeProps: RecordProps<TLVideoShape> = {\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\ttime: T.number,\n\tplaying: T.boolean,\n\turl: T.linkUrl,\n\tassetId: assetIdValidator.nullable(),\n\taltText: T.string,\n}\n\nconst Versions = createShapePropsMigrationIds('video', {\n\tAddUrlProp: 1,\n\tMakeUrlsValid: 2,\n\tAddAltText: 3,\n})\n\nexport { Versions as videoShapeVersions }\n\n/** @public */\nexport const videoShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.AddUrlProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.url = ''\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: Versions.MakeUrlsValid,\n\t\t\tup: (props) => {\n\t\t\t\tif (!T.linkUrl.isValid(props.url)) {\n\t\t\t\t\tprops.url = ''\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddAltText,\n\t\t\tup: (props) => {\n\t\t\t\tprops.altText = ''\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.altText\n\t\t\t},\n\t\t},\n\t],\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAClB,yBAAiC;AAEjC,qBAAgF;AAmBzE,MAAM,kBAA6C;AAAA,EACzD,GAAG,kBAAE;AAAA,EACL,GAAG,kBAAE;AAAA,EACL,MAAM,kBAAE;AAAA,EACR,SAAS,kBAAE;AAAA,EACX,KAAK,kBAAE;AAAA,EACP,SAAS,oCAAiB,SAAS;AAAA,EACnC,SAAS,kBAAE;AACZ;AAEA,MAAM,eAAW,6CAA6B,SAAS;AAAA,EACtD,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,YAAY;AACb,CAAC;AAKM,MAAM,2BAAuB,kDAAkC;AAAA,EACrE,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,MAAM;AAAA,MACb;AAAA,MACA,MAAM;AAAA,IACP;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,YAAI,CAAC,kBAAE,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAClC,gBAAM,MAAM;AAAA,QACb;AAAA,MACD;AAAA,MACA,MAAM,CAAC,WAAW;AAAA,MAElB;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,IAAI,CAAC,UAAU;AACd,cAAM,UAAU;AAAA,MACjB;AAAA,MACA,MAAM,CAAC,UAAU;AAChB,eAAO,MAAM;AAAA,MACd;AAAA,IACD;AAAA,EACD;AACD,CAAC;",
   "names": []
 }

package/dist-cjs/styles/TLColorStyle.js

@@ -45,11 +45,18 @@ const DefaultColorThemePalette = {
   lightMode: {
     id: "light",
     text: "#000000",
-    background: "rgb(249, 250, 251)",
+    background: "#f9fafb",
     solid: "#fcfffe",
     black: {
       solid: "#1d1d1d",
       fill: "#1d1d1d",
+      frame: {
+        headingStroke: "#717171",
+        headingFill: "#ffffff",
+        stroke: "#717171",
+        fill: "#ffffff",
+        text: "#000000"
+      },
       note: {
         fill: "#FCE19C",
         text: "#000000"
@@ -64,6 +71,13 @@ const DefaultColorThemePalette = {
     blue: {
       solid: "#4465e9",
       fill: "#4465e9",
+      frame: {
+        headingStroke: "#6681ec",
+        headingFill: "#f9fafe",
+        stroke: "#6681ec",
+        fill: "#f9fafe",
+        text: "#000000"
+      },
       note: {
         fill: "#8AA3FF",
         text: "#000000"
@@ -78,6 +92,13 @@ const DefaultColorThemePalette = {
     green: {
       solid: "#099268",
       fill: "#099268",
+      frame: {
+        headingStroke: "#37a684",
+        headingFill: "#f8fcfa",
+        stroke: "#37a684",
+        fill: "#f8fcfa",
+        text: "#000000"
+      },
       note: {
         fill: "#6FC896",
         text: "#000000"
@@ -92,6 +113,13 @@ const DefaultColorThemePalette = {
     grey: {
       solid: "#9fa8b2",
       fill: "#9fa8b2",
+      frame: {
+        headingStroke: "#aaaaab",
+        headingFill: "#fbfcfc",
+        stroke: "#aaaaab",
+        fill: "#fcfcfd",
+        text: "#000000"
+      },
       note: {
         fill: "#C0CAD3",
         text: "#000000"
@@ -106,6 +134,13 @@ const DefaultColorThemePalette = {
     "light-blue": {
       solid: "#4ba1f1",
       fill: "#4ba1f1",
+      frame: {
+        headingStroke: "#6cb2f3",
+        headingFill: "#f8fbfe",
+        stroke: "#6cb2f3",
+        fill: "#fafcff",
+        text: "#000000"
+      },
       note: {
         fill: "#9BC4FD",
         text: "#000000"
@@ -120,6 +155,13 @@ const DefaultColorThemePalette = {
     "light-green": {
       solid: "#4cb05e",
       fill: "#4cb05e",
+      frame: {
+        headingStroke: "#6dbe7c",
+        headingFill: "#f8fcf9",
+        stroke: "#6dbe7c",
+        fill: "#fafdfa",
+        text: "#000000"
+      },
       note: {
         fill: "#98D08A",
         text: "#000000"
@@ -134,6 +176,13 @@ const DefaultColorThemePalette = {
     "light-red": {
       solid: "#f87777",
       fill: "#f87777",
+      frame: {
+        headingStroke: "#f89090",
+        headingFill: "#fffafa",
+        stroke: "#f89090",
+        fill: "#fffbfb",
+        text: "#000000"
+      },
       note: {
         fill: "#F7A5A1",
         text: "#000000"
@@ -148,6 +197,13 @@ const DefaultColorThemePalette = {
     "light-violet": {
       solid: "#e085f4",
       fill: "#e085f4",
+      frame: {
+        headingStroke: "#e59bf5",
+        headingFill: "#fefaff",
+        stroke: "#e59bf5",
+        fill: "#fefbff",
+        text: "#000000"
+      },
       note: {
         fill: "#DFB0F9",
         text: "#000000"
@@ -162,6 +218,13 @@ const DefaultColorThemePalette = {
     orange: {
       solid: "#e16919",
       fill: "#e16919",
+      frame: {
+        headingStroke: "#e68544",
+        headingFill: "#fef9f6",
+        stroke: "#e68544",
+        fill: "#fef9f6",
+        text: "#000000"
+      },
       note: {
         fill: "#FAA475",
         text: "#000000"
@@ -176,6 +239,13 @@ const DefaultColorThemePalette = {
     red: {
       solid: "#e03131",
       fill: "#e03131",
+      frame: {
+        headingStroke: "#e55757",
+        headingFill: "#fef7f7",
+        stroke: "#e55757",
+        fill: "#fef9f9",
+        text: "#000000"
+      },
       note: {
         fill: "#FC8282",
         text: "#000000"
@@ -190,6 +260,13 @@ const DefaultColorThemePalette = {
     violet: {
       solid: "#ae3ec9",
       fill: "#ae3ec9",
+      frame: {
+        headingStroke: "#bc62d3",
+        headingFill: "#fcf7fd",
+        stroke: "#bc62d3",
+        fill: "#fdf9fd",
+        text: "#000000"
+      },
       note: {
         fill: "#DB91FD",
         text: "#000000"
@@ -204,6 +281,13 @@ const DefaultColorThemePalette = {
     yellow: {
       solid: "#f1ac4b",
       fill: "#f1ac4b",
+      frame: {
+        headingStroke: "#f3bb6c",
+        headingFill: "#fefcf8",
+        stroke: "#f3bb6c",
+        fill: "#fffdfa",
+        text: "#000000"
+      },
       note: {
         fill: "#FED49A",
         text: "#000000"
@@ -220,6 +304,13 @@ const DefaultColorThemePalette = {
       fill: "#FFFFFF",
       semi: "#f5f5f5",
       pattern: "#f9f9f9",
+      frame: {
+        headingStroke: "#7d7d7d",
+        headingFill: "#ffffff",
+        stroke: "#7d7d7d",
+        fill: "#ffffff",
+        text: "#000000"
+      },
       note: {
         fill: "#FFFFFF",
         text: "#000000"
@@ -238,6 +329,13 @@ const DefaultColorThemePalette = {
     black: {
       solid: "#f2f2f2",
       fill: "#f2f2f2",
+      frame: {
+        headingStroke: "#5c5c5c",
+        headingFill: "#252525",
+        stroke: "#5c5c5c",
+        fill: "#0c0c0c",
+        text: "#f2f2f2"
+      },
       note: {
         fill: "#2c2c2c",
         text: "#f2f2f2"
@@ -253,6 +351,13 @@ const DefaultColorThemePalette = {
       solid: "#4f72fc",
       // 3c60f0
       fill: "#4f72fc",
+      frame: {
+        headingStroke: "#384994",
+        headingFill: "#1C2036",
+        stroke: "#384994",
+        fill: "#11141f",
+        text: "#f2f2f2"
+      },
       note: {
         fill: "#2A3F98",
         text: "#f2f2f2"
@@ -267,6 +372,13 @@ const DefaultColorThemePalette = {
     green: {
       solid: "#099268",
       fill: "#099268",
+      frame: {
+        headingStroke: "#10513C",
+        headingFill: "#14241f",
+        stroke: "#10513C",
+        fill: "#0E1614",
+        text: "#f2f2f2"
+      },
       note: {
         fill: "#014429",
         text: "#f2f2f2"
@@ -281,6 +393,13 @@ const DefaultColorThemePalette = {
     grey: {
       solid: "#9398b0",
       fill: "#9398b0",
+      frame: {
+        headingStroke: "#42474D",
+        headingFill: "#23262A",
+        stroke: "#42474D",
+        fill: "#151719",
+        text: "#f2f2f2"
+      },
       note: {
         fill: "#56595F",
         text: "#f2f2f2"
@@ -295,6 +414,13 @@ const DefaultColorThemePalette = {
     "light-blue": {
       solid: "#4dabf7",
       fill: "#4dabf7",
+      frame: {
+        headingStroke: "#075797",
+        headingFill: "#142839",
+        stroke: "#075797",
+        fill: "#0B1823",
+        text: "#f2f2f2"
+      },
       note: {
         fill: "#1F5495",
         text: "#f2f2f2"
@@ -309,6 +435,13 @@ const DefaultColorThemePalette = {
     "light-green": {
       solid: "#40c057",
       fill: "#40c057",
+      frame: {
+        headingStroke: "#1C5427",
+        headingFill: "#18251A",
+        stroke: "#1C5427",
+        fill: "#0F1911",
+        text: "#f2f2f2"
+      },
       note: {
         fill: "#21581D",
         text: "#f2f2f2"
@@ -323,12 +456,27 @@ const DefaultColorThemePalette = {
     "light-red": {
       solid: "#ff8787",
       fill: "#ff8787",
+      frame: {
+        headingStroke: "#6f3232",
+        // Darker and desaturated variant of solid
+        headingFill: "#341818",
+        // Deep, muted dark red
+        stroke: "#6f3232",
+        // Matches headingStroke
+        fill: "#181212",
+        // Darker, muted background shade
+        text: "#f2f2f2"
+        // Consistent bright text color
+      },
       note: {
-        fill: "#923632",
+        fill: "#7a3333",
+        // Medium-dark, muted variant of solid
         text: "#f2f2f2"
       },
-      semi: "#3b3235",
+      semi: "#3c2b2b",
+      // Subdued, darker neutral-red tone
       pattern: "#a56767",
+      // Existing pattern shade retained
       highlight: {
         srgb: "#db005b",
         p3: "color(display-p3 0.7849 0.0585 0.3589)"
@@ -337,6 +485,13 @@ const DefaultColorThemePalette = {
     "light-violet": {
       solid: "#e599f7",
       fill: "#e599f7",
+      frame: {
+        headingStroke: "#6c367a",
+        headingFill: "#2D2230",
+        stroke: "#6c367a",
+        fill: "#1C151E",
+        text: "#f2f2f2"
+      },
       note: {
         fill: "#762F8E",
         text: "#f2f2f2"
@@ -351,12 +506,27 @@ const DefaultColorThemePalette = {
     orange: {
       solid: "#f76707",
       fill: "#f76707",
+      frame: {
+        headingStroke: "#773a0e",
+        // Darker, muted version of solid
+        headingFill: "#2f1d13",
+        // Deep, warm, muted background
+        stroke: "#773a0e",
+        // Matches headingStroke
+        fill: "#1c1512",
+        // Darker, richer muted background
+        text: "#f2f2f2"
+        // Bright text for contrast
+      },
       note: {
-        fill: "#843906",
+        fill: "#7c3905",
+        // Muted dark variant for note fill
         text: "#f2f2f2"
       },
-      semi: "#3a2e2a",
+      semi: "#3b2e27",
+      // Muted neutral-orange tone
       pattern: "#9f552d",
+      // Retained existing shade
       highlight: {
         srgb: "#d07a00",
         p3: "color(display-p3 0.7699 0.4937 0.0085)"
@@ -365,12 +535,27 @@ const DefaultColorThemePalette = {
     red: {
       solid: "#e03131",
       fill: "#e03131",
+      frame: {
+        headingStroke: "#701e1e",
+        // Darker, muted variation of solid
+        headingFill: "#301616",
+        // Deep, muted reddish backdrop
+        stroke: "#701e1e",
+        // Matches headingStroke
+        fill: "#1b1313",
+        // Rich, dark muted background
+        text: "#f2f2f2"
+        // Bright text for readability
+      },
       note: {
-        fill: "#89231A",
+        fill: "#7e201f",
+        // Muted dark variant for note fill
         text: "#f2f2f2"
       },
-      semi: "#36292b",
+      semi: "#382726",
+      // Dark neutral-red tone
       pattern: "#8f3734",
+      // Existing pattern color retained
       highlight: {
         srgb: "#de002c",
         p3: "color(display-p3 0.7978 0.0509 0.2035)"
@@ -379,12 +564,27 @@ const DefaultColorThemePalette = {
     violet: {
       solid: "#ae3ec9",
       fill: "#ae3ec9",
+      frame: {
+        headingStroke: "#6d1583",
+        // Darker, muted variation of solid
+        headingFill: "#27152e",
+        // Deep, rich muted violet backdrop
+        stroke: "#6d1583",
+        // Matches headingStroke
+        fill: "#1b0f21",
+        // Darker muted violet background
+        text: "#f2f2f2"
+        // Consistent bright text color
+      },
       note: {
-        fill: "#681683",
+        fill: "#5f1c70",
+        // Muted dark variant for note fill
         text: "#f2f2f2"
       },
-      semi: "#31293c",
+      semi: "#342938",
+      // Dark neutral-violet tone
       pattern: "#763a8b",
+      // Retained existing pattern color
       highlight: {
         srgb: "#9e00ee",
         p3: "color(display-p3 0.5651 0.0079 0.8986)"
@@ -393,12 +593,27 @@ const DefaultColorThemePalette = {
     yellow: {
       solid: "#ffc034",
       fill: "#ffc034",
+      frame: {
+        headingStroke: "#684e12",
+        // Darker, muted variant of solid
+        headingFill: "#2a2113",
+        // Rich, muted dark-yellow background
+        stroke: "#684e12",
+        // Matches headingStroke
+        fill: "#1e1911",
+        // Darker muted shade for background fill
+        text: "#f2f2f2"
+        // Bright text color for readability
+      },
       note: {
-        fill: "#98571B",
+        fill: "#8a5e1c",
+        // Muted, dark complementary variant
         text: "#f2f2f2"
       },
-      semi: "#3c3934",
+      semi: "#3b352b",
+      // Dark muted neutral-yellow tone
       pattern: "#fecb92",
+      // Existing shade retained
       highlight: {
         srgb: "#d2b700",
         p3: "color(display-p3 0.8078 0.7225 0.0312)"
@@ -409,6 +624,13 @@ const DefaultColorThemePalette = {
       fill: "#f3f3f3",
       semi: "#f5f5f5",
       pattern: "#f9f9f9",
+      frame: {
+        headingStroke: "#ffffff",
+        headingFill: "#ffffff",
+        stroke: "#ffffff",
+        fill: "#ffffff",
+        text: "#000000"
+      },
       note: {
         fill: "#eaeaea",
         text: "#1d1d1d"