@ibodr/editor 0.1.8 → 0.1.10

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import * as _ibodr_store from '@ibodr/store';
 import { LegacyMigrations, MigrationSequence, UnknownRecord, SerializedSchema, RecordsDiff, Store, AtomSet, HistoryEntry, StoreSideEffects, SerializedStore, StoreSchema } from '@ibodr/store';
 export * from '@ibodr/store';
 import * as _ibodr_schema from '@ibodr/schema';
-import { DrAsset, RecordProps, DrPropsMigrations, DrUnknownAsset, DrAssetId, DrBinding, DrUnknownBinding, DrShape, VecModel, BoxModel, DrHandle, DrShapeId, DrCursorType, DrUnknownShape, DrShapePartial, DrFontFace, DrShapeCrop, DrParentId, DrGroupShape, DrPageId, DrStore, DrStoreSnapshot, DrUser, DrRichText, StyleProp, DrInstancePresence, DrScribble, DrDefaultHorizontalAlignStyle, DrRecord, DrThemes, DrThemeId, DrTheme, DrInstancePageState, DrInstance, DrDocument, DrCursor, DrCamera, DrPage, DrImageAsset, DrVideoAsset, DrAssetPartial, DrBindingId, DrBindingCreate, DrBindingUpdate, DrCreateShapePartial, StylePropValue, DrAssetStore, DrUserStore, DrStoreProps, CustomRecordInfo, DrThemeColors, DrDefaultColorStyle, DrDefaultColor, ExtractShapeByProps, DrDefaultDashStyle, DrBaseShape, DrStoreSchema } from '@ibodr/schema';
+import { DrAsset, RecordProps, DrPropsMigrations, DrUnknownAsset, DrAssetId, DrBinding, DrUnknownBinding, DrShape, VecModel, BoxModel, DrHandle, DrShapeId, DrCursorType, DrUnknownShape, DrShapePartial, DrFontFace, DrShapeCrop, DrParentId, DrGroupShape, DrPageId, DrBoardBackgroundType, DrStore, DrStoreSnapshot, DrUser, DrRichText, StyleProp, DrInstancePresence, DrScribble, DrDefaultHorizontalAlignStyle, DrRecord, DrThemes, DrThemeId, DrTheme, DrInstancePageState, DrInstance, DrDocument, DrCursor, DrCamera, DrPage, DrImageAsset, DrVideoAsset, DrAssetPartial, DrBindingId, DrBindingCreate, DrBindingUpdate, DrCreateShapePartial, StylePropValue, DrAssetStore, DrUserStore, DrStoreProps, CustomRecordInfo, DrThemeColors, DrDefaultColorStyle, DrDefaultColor, ExtractShapeByProps, DrDefaultDashStyle, DrBaseShape, DrStoreSchema } from '@ibodr/schema';
 export * from '@ibodr/schema';
 import { IndexKey, Awaitable, PerformanceTracker, JsonObject, Timers } from '@ibodr/utils';
 export * from '@ibodr/utils';
@@ -2258,6 +2258,7 @@ interface DrSessionStateSnapshot {
     isDebugMode?: boolean;
     isToolLocked?: boolean;
     isGridMode?: boolean;
+    backgroundType?: DrBoardBackgroundType;
     pageStates?: Array<{
         pageId: DrPageId;
         camera?: {
@@ -4168,7 +4169,7 @@ declare class UserPreferencesManager {
         isWrapMode: boolean;
         isDynamicResizeMode: boolean;
         enhancedA11yMode: boolean;
-        inputMode: "mouse" | "trackpad" | null;
+        inputMode: "trackpad" | "mouse" | null;
         isZoomDirectionInverted: boolean;
     };
     getIsDarkMode(): boolean;
@@ -4187,7 +4188,7 @@ declare class UserPreferencesManager {
     getIsDynamicResizeMode(): boolean;
     getIsPasteAtCursorMode(): boolean;
     getEnhancedA11yMode(): boolean;
-    getInputMode(): "mouse" | "trackpad" | null;
+    getInputMode(): "trackpad" | "mouse" | null;
     getIsZoomDirectionInverted(): boolean;
 }
 
@@ -8352,12 +8353,12 @@ declare class ErrorBoundary extends React$1.Component<React$1.PropsWithChildren<
         error: null;
     };
     componentDidCatch(error: unknown): void;
-    render(): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 }
 /** @internal */
 declare function OptionalErrorBoundary({ children, fallback, ...props }: Omit<DrErrorBoundaryProps, 'fallback'> & {
     fallback: DrErrorFallbackComponent;
-}): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
+}): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 /** @public */
 type HTMLContainerProps = React$1.HTMLAttributes<HTMLDivElement>;

package/dist/index.mjs

@@ -6,14 +6,14 @@ import { useQuickReactor, useStateTracking, useValue, useReactor, useAtom, useCo
 export * from '@ibodr/state-react';
 import { createComputedCache, Store, squashRecordDiffs, isRecordsDiffEmpty, reverseRecordsDiff, squashRecordDiffsMutable, createEmptyRecordsDiff, AtomMap, AtomSet, IncrementalSetConstructor } from '@ibodr/store';
 export * from '@ibodr/store';
-import { getDefaultTranslationLocale, pageIdValidator, shapeIdValidator, DefaultFontFamilies, UserRecordType, createUserId, registerColorsFromThemes, registerFontsFromThemes, groupShapeProps, groupShapeMigrations, getShapePropKeysByStyle, isShapeId, CameraRecordType, InstancePageStateRecordType, isPageId, PageRecordType, DrDOCUMENT_ID, DrINSTANCE_ID, createBindingId, createShapeId, createCachedUserResolve, isShape, DrPOINTER_ID, pluckPreservingValues, createDrSchema } from '@ibodr/schema';
+import { getDefaultTranslationLocale, pageIdValidator, shapeIdValidator, DR_BOARD_BACKGROUND_TYPES, DefaultFontFamilies, UserRecordType, createUserId, registerColorsFromThemes, registerFontsFromThemes, groupShapeProps, groupShapeMigrations, getShapePropKeysByStyle, isShapeId, CameraRecordType, InstancePageStateRecordType, isPageId, PageRecordType, DrDOCUMENT_ID, DrINSTANCE_ID, createBindingId, createShapeId, createCachedUserResolve, isShape, DrPOINTER_ID, pluckPreservingValues, createDrSchema } from '@ibodr/schema';
 export * from '@ibodr/schema';
 import { T } from '@ibodr/validate';
 export * from '@ibodr/validate';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
+import classNames2 from 'classnames';
 import * as React from 'react';
 import React__default, { createContext, memo, useRef, useEffect, useLayoutEffect, useCallback, forwardRef, useState, useMemo, useSyncExternalStore, useContext, Fragment as Fragment$1, useDebugValue, useId } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { flushSync } from 'react-dom';
 import { openDB, deleteDB } from 'idb';
 import EventEmitter from 'eventemitter3';
@@ -32,8 +32,56 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+function suffixSafeId(id, suffix) {
+  return sanitizeId(`${id}_${suffix}`);
+}
+function useUniqueSafeId(suffix) {
+  return sanitizeId(`${useId()}${suffix ?? ""}`);
+}
+function useSharedSafeId(id) {
+  const idScope = assertExists(useContext(IdContext));
+  return sanitizeId(`${idScope}_${id}`);
+}
+function sanitizeId(id) {
+  return id.replace(/:/g, "_");
+}
+var IdContext = createContext(null);
+function IdProvider({ children }) {
+  const id = useUniqueSafeId();
+  return /* @__PURE__ */ jsx(IdContext.Provider, { value: id, children });
+}
+var EditorContext = createContext(null);
+function useEditor() {
+  const editor = React__default.useContext(EditorContext);
+  if (!editor) {
+    throw new Error(
+      "useEditor must be used inside of the <Draw /> or <DrawEditor /> components"
+    );
+  }
+  return editor;
+}
+function useMaybeEditor() {
+  return React__default.useContext(EditorContext);
+}
+function EditorProvider({ editor, children }) {
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value: editor, children: /* @__PURE__ */ jsx(IdProvider, { children }) });
+}
 function DefaultBackground() {
-  return /* @__PURE__ */ jsx("div", { className: "dr-background" });
+  const editor = useEditor();
+  const backgroundType = useValue(
+    "backgroundType",
+    () => editor.getInstanceState().backgroundType,
+    [editor]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames2(
+        "dr-background",
+        backgroundType !== "none" && `dr-background__${backgroundType}`
+      )
+    }
+  );
 }
 var featureFlags = {};
 var pointerCaptureTrackingObject = createDebugValue(
@@ -326,40 +374,6 @@ function getPointerInfo(editor, e) {
     isPen: e.pointerType === "pen"
   };
 }
-function suffixSafeId(id, suffix) {
-  return sanitizeId(`${id}_${suffix}`);
-}
-function useUniqueSafeId(suffix) {
-  return sanitizeId(`${useId()}${suffix ?? ""}`);
-}
-function useSharedSafeId(id) {
-  const idScope = assertExists(useContext(IdContext));
-  return sanitizeId(`${idScope}_${id}`);
-}
-function sanitizeId(id) {
-  return id.replace(/:/g, "_");
-}
-var IdContext = createContext(null);
-function IdProvider({ children }) {
-  const id = useUniqueSafeId();
-  return /* @__PURE__ */ jsx(IdContext.Provider, { value: id, children });
-}
-var EditorContext = createContext(null);
-function useEditor() {
-  const editor = React__default.useContext(EditorContext);
-  if (!editor) {
-    throw new Error(
-      "useEditor must be used inside of the <Draw /> or <DrawEditor /> components"
-    );
-  }
-  return editor;
-}
-function useMaybeEditor() {
-  return React__default.useContext(EditorContext);
-}
-function EditorProvider({ editor, children }) {
-  return /* @__PURE__ */ jsx(EditorContext.Provider, { value: editor, children: /* @__PURE__ */ jsx(IdProvider, { children }) });
-}
 
 // src/lib/hooks/useCanvasEvents.ts
 function useCanvasEvents() {
@@ -4041,7 +4055,7 @@ function DefaultCanvas({ className }) {
       {
         ref: rCanvas,
         draggable: false,
-        className: classNames("dr-canvas", className),
+        className: classNames2("dr-canvas", className),
         "data-testid": "canvas",
         ...events,
         children: [
@@ -4231,7 +4245,7 @@ function MovingCameraHitTestBlocker() {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames("dr-hit-test-blocker", {
+      className: classNames2("dr-hit-test-blocker", {
         "dr-hit-test-blocker__hidden": cameraState === "idle"
       })
     }
@@ -4612,7 +4626,7 @@ My browser: ${navigator.userAgent}`
     "div",
     {
       ref: containerRef,
-      className: classNames(
+      className: classNames2(
         "dr-container tl-error-boundary",
         // error-boundary is sometimes used outside of the theme
         // container, so we need to provide it with a theme for our
@@ -4631,7 +4645,7 @@ My browser: ${navigator.userAgent}`
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames("dr-modal", "dr-error-boundary__content", {
+            className: classNames2("dr-modal", "dr-error-boundary__content", {
               "dr-error-boundary__content__expanded": shouldShowError && !shouldShowResetConfirmation
             }),
             children: shouldShowResetConfirmation ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4752,7 +4766,7 @@ var DefaultShapeWrapper = forwardRef(function DefaultShapeWrapper2({ children, s
       "data-shape-id": shape.id,
       draggable: false,
       ...props,
-      className: classNames("dr-shape", isBackground && "dr-shape-background", props.className),
+      className: classNames2("dr-shape", isBackground && "dr-shape-background", props.className),
       children
     }
   );
@@ -4766,7 +4780,7 @@ function DefaultSpinner(props) {
       viewBox: "0 0 16 16",
       "aria-hidden": "false",
       ...props,
-      className: classNames("dr-spinner", props.className),
+      className: classNames2("dr-spinner", props.className),
       children: /* @__PURE__ */ jsxs("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
         /* @__PURE__ */ jsx("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
         /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor" })
@@ -4780,10 +4794,10 @@ var DefaultSvgDefs = () => {
   return null;
 };
 function HTMLContainer({ children, className = "", ...rest }) {
-  return /* @__PURE__ */ jsx("div", { ...rest, className: classNames("dr-html-container", className), children });
+  return /* @__PURE__ */ jsx("div", { ...rest, className: classNames2("dr-html-container", className), children });
 }
 function SVGContainer({ children, className = "", ...rest }) {
-  return /* @__PURE__ */ jsx("svg", { ...rest, className: classNames("dr-svg-container", className), "aria-hidden": "true", children });
+  return /* @__PURE__ */ jsx("svg", { ...rest, className: classNames2("dr-svg-container", className), "aria-hidden": "true", children });
 }
 function useIdentity(value, isEqual2) {
   const ref = useRef(value);
@@ -5906,6 +5920,7 @@ var sessionStateSnapshotValidator = T.object({
   isDebugMode: T.boolean.optional(),
   isToolLocked: T.boolean.optional(),
   isGridMode: T.boolean.optional(),
+  backgroundType: T.literalEnum(...DR_BOARD_BACKGROUND_TYPES).optional(),
   pageStates: T.arrayOf(
     T.object({
       pageId: pageIdValidator,
@@ -5955,6 +5970,7 @@ function createSessionStateSnapshotSignal(store) {
         isDebugMode: instanceState.isDebugMode,
         isToolLocked: instanceState.isToolLocked,
         isGridMode: instanceState.isGridMode,
+        backgroundType: instanceState.backgroundType,
         pageStates: allPageIds.map((id) => {
           const ps = store.get(InstancePageStateRecordType.createId(id));
           const camera = store.get(CameraRecordType.createId(id));
@@ -5990,6 +6006,7 @@ function loadSessionStateSnapshotIntoStore(store, snapshot, opts) {
     isFocusMode: primary?.isFocusMode ?? secondary?.isFocusMode,
     isToolLocked: primary?.isToolLocked ?? secondary?.isToolLocked,
     isGridMode: primary?.isGridMode ?? secondary?.isGridMode,
+    backgroundType: primary?.backgroundType ?? secondary?.backgroundType,
     exportBackground: primary?.exportBackground ?? secondary?.exportBackground
   });
   store.atomic(() => {
@@ -6037,6 +6054,7 @@ function extractSessionStateFromLegacySnapshot(store) {
     isDebugMode: !!oldInstance.isDebugMode,
     isToolLocked: !!oldInstance.isToolLocked,
     isGridMode: false,
+    backgroundType: oldInstance.backgroundType ?? "none",
     pageStates: instanceRecords.filter((r) => r.typeName === "instance_page_state" && r.instanceId === oldInstance.id).map((ps) => {
       const camera = store[ps.cameraId] ?? { x: 0, y: 0, z: 1 };
       return {
@@ -24430,7 +24448,7 @@ var DrawEditor = memo(function DrawEditor2({
       ref: setContainer,
       "data-tldraw": version,
       draggable: false,
-      className: classNames(`${TL_CONTAINER_CLASS} tl-theme__light`, className),
+      className: classNames2(`${TL_CONTAINER_CLASS} tl-theme__light`, className),
       tabIndex: -1,
       role: "application",
       "aria-label": _options?.branding ?? "tldraw",
@@ -24842,7 +24860,7 @@ function getFontsFromRichText(editor, richText, initialState2) {
 // src/index.ts
 registerDrawLibraryVersion(
   "@ibodr/editor",
-  "0.1.8",
+  "0.1.10",
   "esm"
 );
 /*!