@tldraw/editor 4.6.0-next.30b99cd52fc8 → 4.6.0-next.35cf541abcf9

package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ThemeManager_exports = {};
+__export(ThemeManager_exports, {
+  ThemeManager: () => ThemeManager,
+  resolveThemes: () => resolveThemes
+});
+module.exports = __toCommonJS(ThemeManager_exports);
+var import_state = require("@tldraw/state");
+var import_utils = require("@tldraw/utils");
+var import_defaultThemes = require("./defaultThemes");
+function resolveThemes(themes) {
+  return { default: import_defaultThemes.DEFAULT_THEME, ...themes };
+}
+class ThemeManager {
+  constructor(editor, options) {
+    this.editor = editor;
+    this._themes = (0, import_state.atom)("ThemeManager._definitions", options.themes);
+    this._currentThemeId = (0, import_state.atom)("ThemeManager._currentThemeName", options.initial);
+  }
+  editor;
+  _themes;
+  _currentThemeId;
+  getColorMode() {
+    return this.editor.user.getIsDarkMode() ? "dark" : "light";
+  }
+  /** Get all registered theme definitions. */
+  getThemes() {
+    return this._themes.get();
+  }
+  /** Get a single theme definition by id. */
+  getTheme(id) {
+    return this._themes.get()[id];
+  }
+  /** Get the id of the current theme. */
+  getCurrentThemeId() {
+    return this._currentThemeId.get();
+  }
+  getCurrentTheme() {
+    return this._themes.get()[this.getCurrentThemeId()];
+  }
+  /** Set the current theme by id. The theme must have been previously registered. */
+  setCurrentTheme(id) {
+    if (process.env.NODE_ENV !== "production") {
+      if (!(id in this._themes.get())) {
+        console.warn(
+          `Theme '${id}' not found. Available themes: ${Object.keys(this._themes.get()).join(", ")}`
+        );
+      }
+    }
+    this._currentThemeId.set(id);
+  }
+  /** Replace all theme definitions, or update them via a callback that receives a deep copy. */
+  updateThemes(themes) {
+    this._themes.update((prev) => {
+      const next = typeof themes === "function" ? themes((0, import_utils.structuredClone)(prev)) : themes;
+      if (process.env.NODE_ENV !== "production") {
+        if (!("default" in next)) {
+          console.warn("The 'default' theme cannot be removed.");
+          return prev;
+        }
+      }
+      if (!(this._currentThemeId.get() in next)) {
+        this._currentThemeId.set("default");
+      }
+      return next;
+    });
+  }
+  /** Register or update a named theme definition. */
+  updateTheme(theme) {
+    this._themes.update((prev) => ({
+      ...prev,
+      [theme.id]: theme
+    }));
+  }
+  /** Clean up any resources held by the manager. */
+  dispose() {
+  }
+}
+__decorateClass([
+  import_state.computed
+], ThemeManager.prototype, "getColorMode", 1);
+//# sourceMappingURL=ThemeManager.js.map

package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/editor/managers/ThemeManager/ThemeManager.ts"],
+  "sourcesContent": ["import { Atom, atom, computed } from '@tldraw/state'\nimport { TLTheme, TLThemeId, TLThemes } from '@tldraw/tlschema'\nimport { structuredClone } from '@tldraw/utils'\nimport type { Editor } from '../../Editor'\nimport { DEFAULT_THEME } from './defaultThemes'\n\n/**\n * Resolve a partial set of user-provided themes into a complete `TLThemes`\n * record by merging with `DEFAULT_THEME`. The result is suitable for passing to\n * `registerColorsFromThemes`, `registerFontsFromThemes`, and the\n * `ThemeManager` constructor.\n *\n * @public\n */\nexport function resolveThemes(themes?: Partial<TLThemes>): TLThemes {\n\treturn { default: DEFAULT_THEME, ...themes } as TLThemes\n}\n\n/**\n * Manages the editor's color themes.\n *\n * Stores named theme definitions (each containing light and dark color palettes\n * alongside shared properties like font size). The current theme is resolved by\n * combining the current theme name with the user's color mode preference.\n *\n * **Terminology:**\n * - **Theme** (`TLTheme`): A named set of colors and typographic values for both light and dark modes.\n * - **Color mode** (`'light' | 'dark'`): The resolved appearance mode, derived from the user's\n *   `colorScheme` preference (`'light' | 'dark' | 'system'`). Access via `getColorMode()`.\n *\n * @public\n */\nexport class ThemeManager {\n\tprivate readonly _themes: Atom<TLThemes>\n\tprivate readonly _currentThemeId: Atom<TLThemeId>\n\n\tconstructor(\n\t\tprivate readonly editor: Editor,\n\t\toptions: {\n\t\t\tthemes: TLThemes\n\t\t\tinitial: TLThemeId\n\t\t}\n\t) {\n\t\tthis._themes = atom('ThemeManager._definitions', options.themes)\n\t\tthis._currentThemeId = atom('ThemeManager._currentThemeName', options.initial)\n\t}\n\n\t/** Get the current color mode based on the user's dark mode preference. */\n\t@computed getColorMode(): 'light' | 'dark' {\n\t\treturn this.editor.user.getIsDarkMode() ? 'dark' : 'light'\n\t}\n\n\t/** Get all registered theme definitions. */\n\tgetThemes(): TLThemes {\n\t\treturn this._themes.get()\n\t}\n\n\t/** Get a single theme definition by id. */\n\tgetTheme(id: TLThemeId): TLTheme | undefined {\n\t\treturn this._themes.get()[id]\n\t}\n\n\t/** Get the id of the current theme. */\n\tgetCurrentThemeId(): TLThemeId {\n\t\treturn this._currentThemeId.get()\n\t}\n\n\tgetCurrentTheme(): TLTheme {\n\t\treturn this._themes.get()[this.getCurrentThemeId()]!\n\t}\n\n\t/** Set the current theme by id. The theme must have been previously registered. */\n\tsetCurrentTheme(id: TLThemeId): void {\n\t\tif (process.env.NODE_ENV !== 'production') {\n\t\t\tif (!(id in this._themes.get())) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Theme '${id}' not found. Available themes: ${Object.keys(this._themes.get()).join(', ')}`\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\n\t\tthis._currentThemeId.set(id)\n\t}\n\n\t/** Replace all theme definitions, or update them via a callback that receives a deep copy. */\n\tupdateThemes(themes: TLThemes | ((themes: TLThemes) => TLThemes)): void {\n\t\tthis._themes.update((prev) => {\n\t\t\tconst next = typeof themes === 'function' ? themes(structuredClone(prev)) : themes\n\t\t\tif (process.env.NODE_ENV !== 'production') {\n\t\t\t\tif (!('default' in next)) {\n\t\t\t\t\tconsole.warn(\"The 'default' theme cannot be removed.\")\n\t\t\t\t\treturn prev\n\t\t\t\t}\n\t\t\t}\n\t\t\t// If the current theme was removed, fall back to 'default'\n\t\t\tif (!(this._currentThemeId.get() in next)) {\n\t\t\t\tthis._currentThemeId.set('default')\n\t\t\t}\n\t\t\treturn next\n\t\t})\n\t}\n\n\t/** Register or update a named theme definition. */\n\tupdateTheme(theme: TLTheme): void {\n\t\tthis._themes.update((prev) => ({\n\t\t\t...prev,\n\t\t\t[theme.id]: theme,\n\t\t}))\n\t}\n\n\t/** Clean up any resources held by the manager. */\n\tdispose() {\n\t\t// currently no subscriptions to tear down, but here for consistency\n\t\t// with the manager pattern and for future use\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAErC,mBAAgC;AAEhC,2BAA8B;AAUvB,SAAS,cAAc,QAAsC;AACnE,SAAO,EAAE,SAAS,oCAAe,GAAG,OAAO;AAC5C;AAgBO,MAAM,aAAa;AAAA,EAIzB,YACkB,QACjB,SAIC;AALgB;AAMjB,SAAK,cAAU,mBAAK,6BAA6B,QAAQ,MAAM;AAC/D,SAAK,sBAAkB,mBAAK,kCAAkC,QAAQ,OAAO;AAAA,EAC9E;AAAA,EARkB;AAAA,EAJD;AAAA,EACA;AAAA,EAcP,eAAiC;AAC1C,WAAO,KAAK,OAAO,KAAK,cAAc,IAAI,SAAS;AAAA,EACpD;AAAA;AAAA,EAGA,YAAsB;AACrB,WAAO,KAAK,QAAQ,IAAI;AAAA,EACzB;AAAA;AAAA,EAGA,SAAS,IAAoC;AAC5C,WAAO,KAAK,QAAQ,IAAI,EAAE,EAAE;AAAA,EAC7B;AAAA;AAAA,EAGA,oBAA+B;AAC9B,WAAO,KAAK,gBAAgB,IAAI;AAAA,EACjC;AAAA,EAEA,kBAA2B;AAC1B,WAAO,KAAK,QAAQ,IAAI,EAAE,KAAK,kBAAkB,CAAC;AAAA,EACnD;AAAA;AAAA,EAGA,gBAAgB,IAAqB;AACpC,QAAI,QAAQ,IAAI,aAAa,cAAc;AAC1C,UAAI,EAAE,MAAM,KAAK,QAAQ,IAAI,IAAI;AAChC,gBAAQ;AAAA,UACP,UAAU,EAAE,kCAAkC,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;AAAA,QACzF;AAAA,MACD;AAAA,IACD;AAEA,SAAK,gBAAgB,IAAI,EAAE;AAAA,EAC5B;AAAA;AAAA,EAGA,aAAa,QAA2D;AACvE,SAAK,QAAQ,OAAO,CAAC,SAAS;AAC7B,YAAM,OAAO,OAAO,WAAW,aAAa,WAAO,8BAAgB,IAAI,CAAC,IAAI;AAC5E,UAAI,QAAQ,IAAI,aAAa,cAAc;AAC1C,YAAI,EAAE,aAAa,OAAO;AACzB,kBAAQ,KAAK,wCAAwC;AACrD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAI,EAAE,KAAK,gBAAgB,IAAI,KAAK,OAAO;AAC1C,aAAK,gBAAgB,IAAI,SAAS;AAAA,MACnC;AACA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AAAA;AAAA,EAGA,YAAY,OAAsB;AACjC,SAAK,QAAQ,OAAO,CAAC,UAAU;AAAA,MAC9B,GAAG;AAAA,MACH,CAAC,MAAM,EAAE,GAAG;AAAA,IACb,EAAE;AAAA,EACH;AAAA;AAAA,EAGA,UAAU;AAAA,EAGV;AACD;AAnEW;AAAA,EAAT;AAAA,GAhBW,aAgBF;",
+  "names": []
+}