@tldraw/tlschema 4.6.0-next.59173cd7226e → 4.6.0-next.5f57b9516532

package/dist-cjs/index.d.ts

@@ -6272,6 +6272,20 @@ export declare interface TLThemeDefaultColors {
     solid: string;
     cursor: string;
     noteBorder: string;
+    /** Snap indicator line color */
+    snap: string;
+    /** Selection outline stroke */
+    selectionStroke: string;
+    /** Selection handle fill (typically the background color) */
+    selectionFill: string;
+    /** Brush rectangle fill */
+    brushFill: string;
+    /** Brush rectangle stroke */
+    brushStroke: string;
+    /** Selected contrast color (handle fills, etc.) */
+    selectedContrast: string;
+    /** Laser pointer color */
+    laser: string;
     black: TLDefaultColor;
     grey: TLDefaultColor;
     'light-violet': TLDefaultColor;
@@ -6371,7 +6385,7 @@ export declare interface TLThemes {
  *
  * @public
  */
-export declare type TLThemeUiColorKeys = 'background' | 'cursor' | 'negativeSpace' | 'noteBorder' | 'solid' | 'text';
+export declare type TLThemeUiColorKeys = 'background' | 'brushFill' | 'brushStroke' | 'cursor' | 'laser' | 'negativeSpace' | 'noteBorder' | 'selectedContrast' | 'selectionFill' | 'selectionStroke' | 'snap' | 'solid' | 'text';
 
 /**
  * A type for an asset that is available in the editor but whose type is

package/dist-cjs/index.js

@@ -205,7 +205,7 @@ var import_translations = require("./translations/translations");
 var import_b64Vecs = require("./misc/b64Vecs");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/tlschema",
-  "4.6.0-next.59173cd7226e",
+  "4.6.0-next.5f57b9516532",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/styles/StyleProp.js

@@ -30,6 +30,9 @@ class StyleProp {
     this.defaultValue = defaultValue;
     this.type = type;
   }
+  id;
+  defaultValue;
+  type;
   /**
    * Define a new {@link StyleProp}.
    *

package/dist-cjs/styles/StyleProp.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/styles/StyleProp.ts"],
   "sourcesContent": ["import { T } from '@tldraw/validate'\n\n/**\n * A `StyleProp` is a property of a shape that follows some special rules.\n *\n * 1. The same value can be set on lots of shapes at the same time.\n *\n * 2. The last used value is automatically saved and applied to new shapes.\n *\n * For example, {@link DefaultColorStyle} is a style prop used by tldraw's default shapes to set\n * their color. If you try selecting several shapes on tldraw.com and changing their color, you'll\n * see that the color is applied to all of them. Then, if you draw a new shape, it'll have the same\n * color as the one you just set.\n *\n * You can use styles in your own shapes by either defining your own (see {@link StyleProp.define}\n * and {@link StyleProp.defineEnum}) or using tldraw's default ones, like {@link DefaultColorStyle}.\n * When you define a shape, pass a `props` object describing all of your shape's properties, using\n * `StyleProp`s for the ones you want to be styles. See the\n * {@link https://github.com/tldraw/tldraw/tree/main/apps/examples | custom styles example}\n * for more.\n *\n * @public\n */\nexport class StyleProp<Type> implements T.Validatable<Type> {\n\t/**\n\t * Define a new {@link StyleProp}.\n\t *\n\t * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with\n\t * your app/library name.\n\t * @param options -\n\t * - `defaultValue`: The default value for this style prop.\n\t *\n\t * - `type`: Optionally, describe what type of data you expect for this style prop.\n\t *\n\t * @example\n\t * ```ts\n\t * import {T} from '@tldraw/validate'\n\t * import {StyleProp} from '@tldraw/tlschema'\n\t *\n\t * const MyLineWidthProp = StyleProp.define('myApp:lineWidth', {\n\t *   defaultValue: 1,\n\t *   type: T.number,\n\t * })\n\t * ```\n\t * @public\n\t */\n\tstatic define<Type>(\n\t\tuniqueId: string,\n\t\toptions: { defaultValue: Type; type?: T.Validatable<Type> }\n\t) {\n\t\tconst { defaultValue, type = T.any } = options\n\t\treturn new StyleProp<Type>(uniqueId, defaultValue, type)\n\t}\n\n\t/**\n\t * Define a new {@link StyleProp} as a list of possible values.\n\t *\n\t * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with\n\t * your app/library name.\n\t * @param options -\n\t * - `defaultValue`: The default value for this style prop.\n\t *\n\t * - `values`: An array of possible values of this style prop.\n\t *\n\t * @example\n\t * ```ts\n\t * import {StyleProp} from '@tldraw/tlschema'\n\t *\n\t * const MySizeProp = StyleProp.defineEnum('myApp:size', {\n\t *   defaultValue: 'medium',\n\t *   values: ['small', 'medium', 'large'],\n\t * })\n\t * ```\n\t */\n\tstatic defineEnum<const Values extends readonly unknown[]>(\n\t\tuniqueId: string,\n\t\toptions: { defaultValue: Values[number]; values: Values }\n\t) {\n\t\tconst { defaultValue, values } = options\n\t\treturn new EnumStyleProp<Values[number]>(uniqueId, defaultValue, values)\n\t}\n\n\t/** @internal */\n\tprotected constructor(\n\t\treadonly id: string,\n\t\tpublic defaultValue: Type,\n\t\treadonly type: T.Validatable<Type>\n\t) {}\n\n\tsetDefaultValue(value: Type) {\n\t\tthis.defaultValue = value\n\t}\n\n\tvalidate(value: unknown) {\n\t\treturn this.type.validate(value)\n\t}\n\n\tvalidateUsingKnownGoodVersion(prevValue: Type, newValue: unknown) {\n\t\tif (this.type.validateUsingKnownGoodVersion) {\n\t\t\treturn this.type.validateUsingKnownGoodVersion(prevValue, newValue)\n\t\t} else {\n\t\t\treturn this.validate(newValue)\n\t\t}\n\t}\n}\n\n/**\n * See {@link StyleProp} & {@link StyleProp.defineEnum}\n *\n * @public\n */\nexport class EnumStyleProp<T> extends StyleProp<T> {\n\t/** @internal */\n\tconstructor(id: string, defaultValue: T, values: readonly T[]) {\n\t\tsuper(id, defaultValue, T.literalEnum(...values))\n\t\tthis.values = [...values]\n\t}\n\n\treadonly values: T[]\n\n\t/**\n\t * Add new values to this enum style prop at runtime. This is useful for extending\n\t * the built-in styles with custom values (e.g. adding custom colors). Be sure to\n\t * also modify the associated types.\n\t *\n\t * @param newValues - The new values to add.\n\t *\n\t * @public\n\t */\n\taddValues(...newValues: T[]): void {\n\t\tfor (const v of newValues) {\n\t\t\tif (!this.values.includes(v)) {\n\t\t\t\tthis.values.push(v)\n\t\t\t}\n\t\t}\n\t\t// Rebuild the validator with the updated values\n\t\t;(this as any).type = T.literalEnum(...this.values)\n\t}\n\n\t/**\n\t * Remove values from this enum style prop at runtime. This is useful for narrowing\n\t * the built-in styles with custom values (e.g. adding custom colors). Be sure to\n\t * also modify the associated types.\n\t *\n\t * @param valuesToRemove - The values to remove.\n\t *\n\t * @public\n\t */\n\tremoveValues(...valuesToRemove: T[]): void {\n\t\tfor (const v of valuesToRemove) {\n\t\t\tif (this.values.includes(v)) {\n\t\t\t\tthis.values.splice(this.values.indexOf(v), 1)\n\t\t\t}\n\t\t}\n\t\t// Rebuild the validator with the updated values\n\t\t;(this as any).type = T.literalEnum(...this.values)\n\t}\n}\n\n/**\n * @public\n */\nexport type StylePropValue<T extends StyleProp<any>> = T extends StyleProp<infer U> ? U : never\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAuBX,MAAM,UAA+C;AAAA;AAAA,EA4DjD,YACA,IACF,cACE,MACR;AAHQ;AACF;AACE;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAzCH,OAAO,OACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,kBAAE,IAAI,IAAI;AACvC,WAAO,IAAI,UAAgB,UAAU,cAAc,IAAI;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,OAAO,WACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,IAAI;AACjC,WAAO,IAAI,cAA8B,UAAU,cAAc,MAAM;AAAA,EACxE;AAAA,EASA,gBAAgB,OAAa;AAC5B,SAAK,eAAe;AAAA,EACrB;AAAA,EAEA,SAAS,OAAgB;AACxB,WAAO,KAAK,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAEA,8BAA8B,WAAiB,UAAmB;AACjE,QAAI,KAAK,KAAK,+BAA+B;AAC5C,aAAO,KAAK,KAAK,8BAA8B,WAAW,QAAQ;AAAA,IACnE,OAAO;AACN,aAAO,KAAK,SAAS,QAAQ;AAAA,IAC9B;AAAA,EACD;AACD;AAOO,MAAM,sBAAyB,UAAa;AAAA;AAAA,EAElD,YAAY,IAAY,cAAiB,QAAsB;AAC9D,UAAM,IAAI,cAAc,kBAAE,YAAY,GAAG,MAAM,CAAC;AAChD,SAAK,SAAS,CAAC,GAAG,MAAM;AAAA,EACzB;AAAA,EAES;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT,aAAa,WAAsB;AAClC,eAAW,KAAK,WAAW;AAC1B,UAAI,CAAC,KAAK,OAAO,SAAS,CAAC,GAAG;AAC7B,aAAK,OAAO,KAAK,CAAC;AAAA,MACnB;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,kBAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,gBAAgB,gBAA2B;AAC1C,eAAW,KAAK,gBAAgB;AAC/B,UAAI,KAAK,OAAO,SAAS,CAAC,GAAG;AAC5B,aAAK,OAAO,OAAO,KAAK,OAAO,QAAQ,CAAC,GAAG,CAAC;AAAA,MAC7C;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,kBAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AACD;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAuBX,MAAM,UAA+C;AAAA;AAAA,EA4DjD,YACA,IACF,cACE,MACR;AAHQ;AACF;AACE;AAAA,EACP;AAAA,EAHO;AAAA,EACF;AAAA,EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAxCV,OAAO,OACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,kBAAE,IAAI,IAAI;AACvC,WAAO,IAAI,UAAgB,UAAU,cAAc,IAAI;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,OAAO,WACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,IAAI;AACjC,WAAO,IAAI,cAA8B,UAAU,cAAc,MAAM;AAAA,EACxE;AAAA,EASA,gBAAgB,OAAa;AAC5B,SAAK,eAAe;AAAA,EACrB;AAAA,EAEA,SAAS,OAAgB;AACxB,WAAO,KAAK,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAEA,8BAA8B,WAAiB,UAAmB;AACjE,QAAI,KAAK,KAAK,+BAA+B;AAC5C,aAAO,KAAK,KAAK,8BAA8B,WAAW,QAAQ;AAAA,IACnE,OAAO;AACN,aAAO,KAAK,SAAS,QAAQ;AAAA,IAC9B;AAAA,EACD;AACD;AAOO,MAAM,sBAAyB,UAAa;AAAA;AAAA,EAElD,YAAY,IAAY,cAAiB,QAAsB;AAC9D,UAAM,IAAI,cAAc,kBAAE,YAAY,GAAG,MAAM,CAAC;AAChD,SAAK,SAAS,CAAC,GAAG,MAAM;AAAA,EACzB;AAAA,EAES;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT,aAAa,WAAsB;AAClC,eAAW,KAAK,WAAW;AAC1B,UAAI,CAAC,KAAK,OAAO,SAAS,CAAC,GAAG;AAC7B,aAAK,OAAO,KAAK,CAAC;AAAA,MACnB;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,kBAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,gBAAgB,gBAA2B;AAC1C,eAAW,KAAK,gBAAgB;AAC/B,UAAI,KAAK,OAAO,SAAS,CAAC,GAAG;AAC5B,aAAK,OAAO,OAAO,KAAK,OAAO,QAAQ,CAAC,GAAG,CAAC;AAAA,MAC7C;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,kBAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AACD;",
   "names": []
 }

package/dist-cjs/styles/TLTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles/TLTheme.ts"],
-  "sourcesContent": ["import type { TLFontFace } from './TLFontFace'\n\n/**\n * Defines the color variants available for each color in the default theme.\n * Each color has multiple variants for different use cases like fills, strokes,\n * patterns, and UI elements like frames and notes.\n *\n * @example\n * ```ts\n * import { TLDefaultColor } from '@tldraw/tlschema'\n *\n * const blueColor: TLDefaultColor = {\n *   solid: '#4465e9',\n *   semi: '#dce1f8',\n *   pattern: '#6681ee',\n *   fill: '#4465e9',\n *   // ... other variants\n * }\n * ```\n *\n * @public\n */\nexport interface TLDefaultColor {\n\tsolid: string\n\tsemi: string\n\tpattern: string\n\tfill: string // usually same as solid\n\tlinedFill: string // usually slightly lighter than fill\n\tframeHeadingStroke: string\n\tframeHeadingFill: string\n\tframeStroke: string\n\tframeFill: string\n\tframeText: string\n\tnoteFill: string\n\tnoteText: string\n\thighlightSrgb: string\n\thighlightP3: string\n}\n\n/**\n * The color palette for a theme. Contains base UI colors (as strings) and\n * named shape colors (as {@link TLDefaultColor} objects).\n *\n * Extend this interface via module augmentation to add custom colors:\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n *   interface TLThemeColors {\n *     pink: TLDefaultColor\n *   }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeDefaultColors {\n\ttext: string\n\tbackground: string\n\tnegativeSpace: string\n\tsolid: string\n\tcursor: string\n\tnoteBorder: string\n\tblack: TLDefaultColor\n\tgrey: TLDefaultColor\n\t'light-violet': TLDefaultColor\n\tviolet: TLDefaultColor\n\tblue: TLDefaultColor\n\t'light-blue': TLDefaultColor\n\tyellow: TLDefaultColor\n\torange: TLDefaultColor\n\tgreen: TLDefaultColor\n\t'light-green': TLDefaultColor\n\t'light-red': TLDefaultColor\n\tred: TLDefaultColor\n\twhite: TLDefaultColor\n}\n\n/**\n * A font definition within a theme. Maps a font style name to a CSS font-family\n * declaration and optional font face descriptors for loading.\n *\n * @example\n * ```ts\n * import { TLThemeFont } from '@tldraw/tlschema'\n *\n * const customSans: TLThemeFont = {\n *   fontFamily: \"'Inter', sans-serif\",\n *   faces: [\n *     { family: 'Inter', src: { url: 'https://example.com/Inter-Regular.woff2', format: 'woff2' }, weight: 'normal' },\n *     { family: 'Inter', src: { url: 'https://example.com/Inter-Bold.woff2', format: 'woff2' }, weight: 'bold' },\n *   ]\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeFont {\n\t/** CSS font-family declaration, e.g. `\"'Inter', sans-serif\"` */\n\tfontFamily: string\n\t/** Font face definitions for loading. Omit for system fonts that don't need loading. */\n\tfaces?: TLFontFace[]\n\t/**\n\t * Icon for the style panel. Accepts a string icon ID (resolved via `assetUrls.icons`)\n\t * or a React element (`TLUiIconJsx`). Defaults to the built-in icon for known fonts,\n\t * or `'font-draw'` for custom fonts.\n\t */\n\ticon?: unknown\n}\n\n/**\n * The font palette for a theme. Contains named font definitions mapping font style\n * names to their CSS font-family strings and font face descriptors.\n *\n * Extend this interface via module augmentation to add custom fonts:\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n *   interface TLThemeFonts {\n *     cursive: TLThemeFont\n *   }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeFonts {\n\tdraw: TLThemeFont\n\tsans: TLThemeFont\n\tserif: TLThemeFont\n\tmono: TLThemeFont\n}\n\n/**\n * Augment this interface to remove built-in palette colors from themes.\n * Each key you add will be omitted from {@link TLThemeColors}.\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n *   interface TLRemovedDefaultThemeColors {\n *     'light-violet': true\n *     'light-blue': true\n *   }\n * }\n * ```\n *\n * @public\n */\n// oxlint-disable-next-line typescript/no-empty-object-type\nexport interface TLRemovedDefaultThemeColors {}\n\n/**\n * Keys in {@link TLThemeDefaultColors} that are required UI infrastructure colors\n * and cannot be removed via {@link TLRemovedDefaultThemeColors}.\n *\n * @public\n */\nexport type TLThemeUiColorKeys =\n\t| 'text'\n\t| 'background'\n\t| 'negativeSpace'\n\t| 'solid'\n\t| 'cursor'\n\t| 'noteBorder'\n\n/**\n * A color palette for one color mode. UI colors are always required.\n * Palette colors removed via {@link TLRemovedDefaultThemeColors} are omitted.\n *\n * @public\n */\nexport type TLThemeColors = Pick<TLThemeDefaultColors, TLThemeUiColorKeys> &\n\tOmit<TLThemeDefaultColors, TLThemeUiColorKeys | keyof TLRemovedDefaultThemeColors>\n\n/**\n * A theme definition containing shared properties and color/font palettes for\n * both light and dark modes.\n *\n * To remove palette colors from themes, augment {@link TLRemovedDefaultThemeColors}.\n * UI colors (`text`, `background`, `negativeSpace`, `solid`, `cursor`, `noteBorder`)\n * are always required.\n *\n * @example\n * ```ts\n * const myTheme: TLTheme = {\n *   id: 'custom',\n *   fontSize: 16,\n *   lineHeight: 1.35,\n *   strokeWidth: 2,\n *   fonts: DEFAULT_THEME.fonts,\n *   colors: {\n *     light: { ... },\n *     dark: { ... },\n *   },\n * }\n * editor.updateTheme(myTheme)\n * ```\n *\n * @public\n */\nexport interface TLTheme {\n\t/** Unique identifier for this theme. Used as the key in the theme registry. */\n\tid: TLThemeId\n\t/** Base font size in pixels. Shape font sizes are derived by multiplying this value. */\n\tfontSize: number\n\t/** Base line height multiplier. */\n\tlineHeight: number\n\t/** Base stroke width in pixels. Shape stroke widths are derived by multiplying this value. */\n\tstrokeWidth: number\n\t/** Font definitions. Individual fonts may be absent if removed by a custom theme. */\n\tfonts: TLThemeFonts\n\tcolors: {\n\t\tlight: TLThemeColors\n\t\tdark: TLThemeColors\n\t}\n}\n\n/**\n * A registry of available themes. Extend this interface via module\n * augmentation to register custom themes for type-safe theme IDs.\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n *   interface TLThemes {\n *     corporate: TLTheme\n *   }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemes {\n\tdefault: TLTheme\n}\n\n/** @public */\nexport type TLThemeId = keyof TLThemes & string\n"],
+  "sourcesContent": ["import type { TLFontFace } from './TLFontFace'\n\n/**\n * Defines the color variants available for each color in the default theme.\n * Each color has multiple variants for different use cases like fills, strokes,\n * patterns, and UI elements like frames and notes.\n *\n * @example\n * ```ts\n * import { TLDefaultColor } from '@tldraw/tlschema'\n *\n * const blueColor: TLDefaultColor = {\n *   solid: '#4465e9',\n *   semi: '#dce1f8',\n *   pattern: '#6681ee',\n *   fill: '#4465e9',\n *   // ... other variants\n * }\n * ```\n *\n * @public\n */\nexport interface TLDefaultColor {\n\tsolid: string\n\tsemi: string\n\tpattern: string\n\tfill: string // usually same as solid\n\tlinedFill: string // usually slightly lighter than fill\n\tframeHeadingStroke: string\n\tframeHeadingFill: string\n\tframeStroke: string\n\tframeFill: string\n\tframeText: string\n\tnoteFill: string\n\tnoteText: string\n\thighlightSrgb: string\n\thighlightP3: string\n}\n\n/**\n * The color palette for a theme. Contains base UI colors (as strings) and\n * named shape colors (as {@link TLDefaultColor} objects).\n *\n * Extend this interface via module augmentation to add custom colors:\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n *   interface TLThemeColors {\n *     pink: TLDefaultColor\n *   }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeDefaultColors {\n\ttext: string\n\tbackground: string\n\tnegativeSpace: string\n\tsolid: string\n\tcursor: string\n\tnoteBorder: string\n\t/** Snap indicator line color */\n\tsnap: string\n\t/** Selection outline stroke */\n\tselectionStroke: string\n\t/** Selection handle fill (typically the background color) */\n\tselectionFill: string\n\t/** Brush rectangle fill */\n\tbrushFill: string\n\t/** Brush rectangle stroke */\n\tbrushStroke: string\n\t/** Selected contrast color (handle fills, etc.) */\n\tselectedContrast: string\n\t/** Laser pointer color */\n\tlaser: string\n\tblack: TLDefaultColor\n\tgrey: TLDefaultColor\n\t'light-violet': TLDefaultColor\n\tviolet: TLDefaultColor\n\tblue: TLDefaultColor\n\t'light-blue': TLDefaultColor\n\tyellow: TLDefaultColor\n\torange: TLDefaultColor\n\tgreen: TLDefaultColor\n\t'light-green': TLDefaultColor\n\t'light-red': TLDefaultColor\n\tred: TLDefaultColor\n\twhite: TLDefaultColor\n}\n\n/**\n * A font definition within a theme. Maps a font style name to a CSS font-family\n * declaration and optional font face descriptors for loading.\n *\n * @example\n * ```ts\n * import { TLThemeFont } from '@tldraw/tlschema'\n *\n * const customSans: TLThemeFont = {\n *   fontFamily: \"'Inter', sans-serif\",\n *   faces: [\n *     { family: 'Inter', src: { url: 'https://example.com/Inter-Regular.woff2', format: 'woff2' }, weight: 'normal' },\n *     { family: 'Inter', src: { url: 'https://example.com/Inter-Bold.woff2', format: 'woff2' }, weight: 'bold' },\n *   ]\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeFont {\n\t/** CSS font-family declaration, e.g. `\"'Inter', sans-serif\"` */\n\tfontFamily: string\n\t/** Font face definitions for loading. Omit for system fonts that don't need loading. */\n\tfaces?: TLFontFace[]\n\t/**\n\t * Icon for the style panel. Accepts a string icon ID (resolved via `assetUrls.icons`)\n\t * or a React element (`TLUiIconJsx`). Defaults to the built-in icon for known fonts,\n\t * or `'font-draw'` for custom fonts.\n\t */\n\ticon?: unknown\n}\n\n/**\n * The font palette for a theme. Contains named font definitions mapping font style\n * names to their CSS font-family strings and font face descriptors.\n *\n * Extend this interface via module augmentation to add custom fonts:\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n *   interface TLThemeFonts {\n *     cursive: TLThemeFont\n *   }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeFonts {\n\tdraw: TLThemeFont\n\tsans: TLThemeFont\n\tserif: TLThemeFont\n\tmono: TLThemeFont\n}\n\n/**\n * Augment this interface to remove built-in palette colors from themes.\n * Each key you add will be omitted from {@link TLThemeColors}.\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n *   interface TLRemovedDefaultThemeColors {\n *     'light-violet': true\n *     'light-blue': true\n *   }\n * }\n * ```\n *\n * @public\n */\n// oxlint-disable-next-line typescript/no-empty-object-type\nexport interface TLRemovedDefaultThemeColors {}\n\n/**\n * Keys in {@link TLThemeDefaultColors} that are required UI infrastructure colors\n * and cannot be removed via {@link TLRemovedDefaultThemeColors}.\n *\n * @public\n */\nexport type TLThemeUiColorKeys =\n\t| 'text'\n\t| 'background'\n\t| 'negativeSpace'\n\t| 'solid'\n\t| 'cursor'\n\t| 'noteBorder'\n\t| 'snap'\n\t| 'selectionStroke'\n\t| 'selectionFill'\n\t| 'brushFill'\n\t| 'brushStroke'\n\t| 'selectedContrast'\n\t| 'laser'\n\n/**\n * A color palette for one color mode. UI colors are always required.\n * Palette colors removed via {@link TLRemovedDefaultThemeColors} are omitted.\n *\n * @public\n */\nexport type TLThemeColors = Pick<TLThemeDefaultColors, TLThemeUiColorKeys> &\n\tOmit<TLThemeDefaultColors, TLThemeUiColorKeys | keyof TLRemovedDefaultThemeColors>\n\n/**\n * A theme definition containing shared properties and color/font palettes for\n * both light and dark modes.\n *\n * To remove palette colors from themes, augment {@link TLRemovedDefaultThemeColors}.\n * UI colors (`text`, `background`, `negativeSpace`, `solid`, `cursor`, `noteBorder`)\n * are always required.\n *\n * @example\n * ```ts\n * const myTheme: TLTheme = {\n *   id: 'custom',\n *   fontSize: 16,\n *   lineHeight: 1.35,\n *   strokeWidth: 2,\n *   fonts: DEFAULT_THEME.fonts,\n *   colors: {\n *     light: { ... },\n *     dark: { ... },\n *   },\n * }\n * editor.updateTheme(myTheme)\n * ```\n *\n * @public\n */\nexport interface TLTheme {\n\t/** Unique identifier for this theme. Used as the key in the theme registry. */\n\tid: TLThemeId\n\t/** Base font size in pixels. Shape font sizes are derived by multiplying this value. */\n\tfontSize: number\n\t/** Base line height multiplier. */\n\tlineHeight: number\n\t/** Base stroke width in pixels. Shape stroke widths are derived by multiplying this value. */\n\tstrokeWidth: number\n\t/** Font definitions. Individual fonts may be absent if removed by a custom theme. */\n\tfonts: TLThemeFonts\n\tcolors: {\n\t\tlight: TLThemeColors\n\t\tdark: TLThemeColors\n\t}\n}\n\n/**\n * A registry of available themes. Extend this interface via module\n * augmentation to register custom themes for type-safe theme IDs.\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n *   interface TLThemes {\n *     corporate: TLTheme\n *   }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemes {\n\tdefault: TLTheme\n}\n\n/** @public */\nexport type TLThemeId = keyof TLThemes & string\n"],
   "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist-esm/index.d.mts

@@ -6272,6 +6272,20 @@ export declare interface TLThemeDefaultColors {
     solid: string;
     cursor: string;
     noteBorder: string;
+    /** Snap indicator line color */
+    snap: string;
+    /** Selection outline stroke */
+    selectionStroke: string;
+    /** Selection handle fill (typically the background color) */
+    selectionFill: string;
+    /** Brush rectangle fill */
+    brushFill: string;
+    /** Brush rectangle stroke */
+    brushStroke: string;
+    /** Selected contrast color (handle fills, etc.) */
+    selectedContrast: string;
+    /** Laser pointer color */
+    laser: string;
     black: TLDefaultColor;
     grey: TLDefaultColor;
     'light-violet': TLDefaultColor;
@@ -6371,7 +6385,7 @@ export declare interface TLThemes {
  *
  * @public
  */
-export declare type TLThemeUiColorKeys = 'background' | 'cursor' | 'negativeSpace' | 'noteBorder' | 'solid' | 'text';
+export declare type TLThemeUiColorKeys = 'background' | 'brushFill' | 'brushStroke' | 'cursor' | 'laser' | 'negativeSpace' | 'noteBorder' | 'selectedContrast' | 'selectionFill' | 'selectionStroke' | 'snap' | 'solid' | 'text';
 
 /**
  * A type for an asset that is available in the editor but whose type is

package/dist-esm/index.mjs

@@ -198,7 +198,7 @@ import {
 } from "./translations/translations.mjs";
 registerTldrawLibraryVersion(
   "@tldraw/tlschema",
-  "4.6.0-next.59173cd7226e",
+  "4.6.0-next.5f57b9516532",
   "esm"
 );
 import { b64Vecs } from "./misc/b64Vecs.mjs";

package/dist-esm/styles/StyleProp.mjs

@@ -6,6 +6,9 @@ class StyleProp {
     this.defaultValue = defaultValue;
     this.type = type;
   }
+  id;
+  defaultValue;
+  type;
   /**
    * Define a new {@link StyleProp}.
    *

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/styles/StyleProp.ts"],
   "sourcesContent": ["import { T } from '@tldraw/validate'\n\n/**\n * A `StyleProp` is a property of a shape that follows some special rules.\n *\n * 1. The same value can be set on lots of shapes at the same time.\n *\n * 2. The last used value is automatically saved and applied to new shapes.\n *\n * For example, {@link DefaultColorStyle} is a style prop used by tldraw's default shapes to set\n * their color. If you try selecting several shapes on tldraw.com and changing their color, you'll\n * see that the color is applied to all of them. Then, if you draw a new shape, it'll have the same\n * color as the one you just set.\n *\n * You can use styles in your own shapes by either defining your own (see {@link StyleProp.define}\n * and {@link StyleProp.defineEnum}) or using tldraw's default ones, like {@link DefaultColorStyle}.\n * When you define a shape, pass a `props` object describing all of your shape's properties, using\n * `StyleProp`s for the ones you want to be styles. See the\n * {@link https://github.com/tldraw/tldraw/tree/main/apps/examples | custom styles example}\n * for more.\n *\n * @public\n */\nexport class StyleProp<Type> implements T.Validatable<Type> {\n\t/**\n\t * Define a new {@link StyleProp}.\n\t *\n\t * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with\n\t * your app/library name.\n\t * @param options -\n\t * - `defaultValue`: The default value for this style prop.\n\t *\n\t * - `type`: Optionally, describe what type of data you expect for this style prop.\n\t *\n\t * @example\n\t * ```ts\n\t * import {T} from '@tldraw/validate'\n\t * import {StyleProp} from '@tldraw/tlschema'\n\t *\n\t * const MyLineWidthProp = StyleProp.define('myApp:lineWidth', {\n\t *   defaultValue: 1,\n\t *   type: T.number,\n\t * })\n\t * ```\n\t * @public\n\t */\n\tstatic define<Type>(\n\t\tuniqueId: string,\n\t\toptions: { defaultValue: Type; type?: T.Validatable<Type> }\n\t) {\n\t\tconst { defaultValue, type = T.any } = options\n\t\treturn new StyleProp<Type>(uniqueId, defaultValue, type)\n\t}\n\n\t/**\n\t * Define a new {@link StyleProp} as a list of possible values.\n\t *\n\t * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with\n\t * your app/library name.\n\t * @param options -\n\t * - `defaultValue`: The default value for this style prop.\n\t *\n\t * - `values`: An array of possible values of this style prop.\n\t *\n\t * @example\n\t * ```ts\n\t * import {StyleProp} from '@tldraw/tlschema'\n\t *\n\t * const MySizeProp = StyleProp.defineEnum('myApp:size', {\n\t *   defaultValue: 'medium',\n\t *   values: ['small', 'medium', 'large'],\n\t * })\n\t * ```\n\t */\n\tstatic defineEnum<const Values extends readonly unknown[]>(\n\t\tuniqueId: string,\n\t\toptions: { defaultValue: Values[number]; values: Values }\n\t) {\n\t\tconst { defaultValue, values } = options\n\t\treturn new EnumStyleProp<Values[number]>(uniqueId, defaultValue, values)\n\t}\n\n\t/** @internal */\n\tprotected constructor(\n\t\treadonly id: string,\n\t\tpublic defaultValue: Type,\n\t\treadonly type: T.Validatable<Type>\n\t) {}\n\n\tsetDefaultValue(value: Type) {\n\t\tthis.defaultValue = value\n\t}\n\n\tvalidate(value: unknown) {\n\t\treturn this.type.validate(value)\n\t}\n\n\tvalidateUsingKnownGoodVersion(prevValue: Type, newValue: unknown) {\n\t\tif (this.type.validateUsingKnownGoodVersion) {\n\t\t\treturn this.type.validateUsingKnownGoodVersion(prevValue, newValue)\n\t\t} else {\n\t\t\treturn this.validate(newValue)\n\t\t}\n\t}\n}\n\n/**\n * See {@link StyleProp} & {@link StyleProp.defineEnum}\n *\n * @public\n */\nexport class EnumStyleProp<T> extends StyleProp<T> {\n\t/** @internal */\n\tconstructor(id: string, defaultValue: T, values: readonly T[]) {\n\t\tsuper(id, defaultValue, T.literalEnum(...values))\n\t\tthis.values = [...values]\n\t}\n\n\treadonly values: T[]\n\n\t/**\n\t * Add new values to this enum style prop at runtime. This is useful for extending\n\t * the built-in styles with custom values (e.g. adding custom colors). Be sure to\n\t * also modify the associated types.\n\t *\n\t * @param newValues - The new values to add.\n\t *\n\t * @public\n\t */\n\taddValues(...newValues: T[]): void {\n\t\tfor (const v of newValues) {\n\t\t\tif (!this.values.includes(v)) {\n\t\t\t\tthis.values.push(v)\n\t\t\t}\n\t\t}\n\t\t// Rebuild the validator with the updated values\n\t\t;(this as any).type = T.literalEnum(...this.values)\n\t}\n\n\t/**\n\t * Remove values from this enum style prop at runtime. This is useful for narrowing\n\t * the built-in styles with custom values (e.g. adding custom colors). Be sure to\n\t * also modify the associated types.\n\t *\n\t * @param valuesToRemove - The values to remove.\n\t *\n\t * @public\n\t */\n\tremoveValues(...valuesToRemove: T[]): void {\n\t\tfor (const v of valuesToRemove) {\n\t\t\tif (this.values.includes(v)) {\n\t\t\t\tthis.values.splice(this.values.indexOf(v), 1)\n\t\t\t}\n\t\t}\n\t\t// Rebuild the validator with the updated values\n\t\t;(this as any).type = T.literalEnum(...this.values)\n\t}\n}\n\n/**\n * @public\n */\nexport type StylePropValue<T extends StyleProp<any>> = T extends StyleProp<infer U> ? U : never\n"],
-  "mappings": "AAAA,SAAS,SAAS;AAuBX,MAAM,UAA+C;AAAA;AAAA,EA4DjD,YACA,IACF,cACE,MACR;AAHQ;AACF;AACE;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAzCH,OAAO,OACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,EAAE,IAAI,IAAI;AACvC,WAAO,IAAI,UAAgB,UAAU,cAAc,IAAI;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,OAAO,WACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,IAAI;AACjC,WAAO,IAAI,cAA8B,UAAU,cAAc,MAAM;AAAA,EACxE;AAAA,EASA,gBAAgB,OAAa;AAC5B,SAAK,eAAe;AAAA,EACrB;AAAA,EAEA,SAAS,OAAgB;AACxB,WAAO,KAAK,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAEA,8BAA8B,WAAiB,UAAmB;AACjE,QAAI,KAAK,KAAK,+BAA+B;AAC5C,aAAO,KAAK,KAAK,8BAA8B,WAAW,QAAQ;AAAA,IACnE,OAAO;AACN,aAAO,KAAK,SAAS,QAAQ;AAAA,IAC9B;AAAA,EACD;AACD;AAOO,MAAM,sBAAyB,UAAa;AAAA;AAAA,EAElD,YAAY,IAAY,cAAiB,QAAsB;AAC9D,UAAM,IAAI,cAAc,EAAE,YAAY,GAAG,MAAM,CAAC;AAChD,SAAK,SAAS,CAAC,GAAG,MAAM;AAAA,EACzB;AAAA,EAES;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT,aAAa,WAAsB;AAClC,eAAW,KAAK,WAAW;AAC1B,UAAI,CAAC,KAAK,OAAO,SAAS,CAAC,GAAG;AAC7B,aAAK,OAAO,KAAK,CAAC;AAAA,MACnB;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,gBAAgB,gBAA2B;AAC1C,eAAW,KAAK,gBAAgB;AAC/B,UAAI,KAAK,OAAO,SAAS,CAAC,GAAG;AAC5B,aAAK,OAAO,OAAO,KAAK,OAAO,QAAQ,CAAC,GAAG,CAAC;AAAA,MAC7C;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AACD;",
+  "mappings": "AAAA,SAAS,SAAS;AAuBX,MAAM,UAA+C;AAAA;AAAA,EA4DjD,YACA,IACF,cACE,MACR;AAHQ;AACF;AACE;AAAA,EACP;AAAA,EAHO;AAAA,EACF;AAAA,EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAxCV,OAAO,OACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,EAAE,IAAI,IAAI;AACvC,WAAO,IAAI,UAAgB,UAAU,cAAc,IAAI;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,OAAO,WACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,IAAI;AACjC,WAAO,IAAI,cAA8B,UAAU,cAAc,MAAM;AAAA,EACxE;AAAA,EASA,gBAAgB,OAAa;AAC5B,SAAK,eAAe;AAAA,EACrB;AAAA,EAEA,SAAS,OAAgB;AACxB,WAAO,KAAK,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAEA,8BAA8B,WAAiB,UAAmB;AACjE,QAAI,KAAK,KAAK,+BAA+B;AAC5C,aAAO,KAAK,KAAK,8BAA8B,WAAW,QAAQ;AAAA,IACnE,OAAO;AACN,aAAO,KAAK,SAAS,QAAQ;AAAA,IAC9B;AAAA,EACD;AACD;AAOO,MAAM,sBAAyB,UAAa;AAAA;AAAA,EAElD,YAAY,IAAY,cAAiB,QAAsB;AAC9D,UAAM,IAAI,cAAc,EAAE,YAAY,GAAG,MAAM,CAAC;AAChD,SAAK,SAAS,CAAC,GAAG,MAAM;AAAA,EACzB;AAAA,EAES;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT,aAAa,WAAsB;AAClC,eAAW,KAAK,WAAW;AAC1B,UAAI,CAAC,KAAK,OAAO,SAAS,CAAC,GAAG;AAC7B,aAAK,OAAO,KAAK,CAAC;AAAA,MACnB;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,gBAAgB,gBAA2B;AAC1C,eAAW,KAAK,gBAAgB;AAC/B,UAAI,KAAK,OAAO,SAAS,CAAC,GAAG;AAC5B,aAAK,OAAO,OAAO,KAAK,OAAO,QAAQ,CAAC,GAAG,CAAC;AAAA,MAC7C;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AACD;",
   "names": []
 }

package/package.json

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

package/src/styles/TLTheme.ts

@@ -61,6 +61,20 @@ export interface TLThemeDefaultColors {
 	solid: string
 	cursor: string
 	noteBorder: string
+	/** Snap indicator line color */
+	snap: string
+	/** Selection outline stroke */
+	selectionStroke: string
+	/** Selection handle fill (typically the background color) */
+	selectionFill: string
+	/** Brush rectangle fill */
+	brushFill: string
+	/** Brush rectangle stroke */
+	brushStroke: string
+	/** Selected contrast color (handle fills, etc.) */
+	selectedContrast: string
+	/** Laser pointer color */
+	laser: string
 	black: TLDefaultColor
 	grey: TLDefaultColor
 	'light-violet': TLDefaultColor
@@ -164,6 +178,13 @@ export type TLThemeUiColorKeys =
 	| 'solid'
 	| 'cursor'
 	| 'noteBorder'
+	| 'snap'
+	| 'selectionStroke'
+	| 'selectionFill'
+	| 'brushFill'
+	| 'brushStroke'
+	| 'selectedContrast'
+	| 'laser'
 
 /**
  * A color palette for one color mode. UI colors are always required.