@tldraw/tlschema 4.6.0-canary.239a3cd0bda5 → 4.6.0-canary.2704cdc4a4e9

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-canary.239a3cd0bda5",
+  "4.6.0-canary.2704cdc4a4e9",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

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-canary.239a3cd0bda5",
+  "4.6.0-canary.2704cdc4a4e9",
   "esm"
 );
 import { b64Vecs } from "./misc/b64Vecs.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tlschema",
   "description": "tldraw infinite canvas SDK (schema).",
-  "version": "4.6.0-canary.239a3cd0bda5",
+  "version": "4.6.0-canary.2704cdc4a4e9",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,10 +50,10 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@tldraw/state": "4.6.0-canary.239a3cd0bda5",
-    "@tldraw/store": "4.6.0-canary.239a3cd0bda5",
-    "@tldraw/utils": "4.6.0-canary.239a3cd0bda5",
-    "@tldraw/validate": "4.6.0-canary.239a3cd0bda5"
+    "@tldraw/state": "4.6.0-canary.2704cdc4a4e9",
+    "@tldraw/store": "4.6.0-canary.2704cdc4a4e9",
+    "@tldraw/utils": "4.6.0-canary.2704cdc4a4e9",
+    "@tldraw/validate": "4.6.0-canary.2704cdc4a4e9"
   },
   "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.