@ibodr/editor 0.1.9 → 0.1.11

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';
@@ -20,8 +20,14 @@ import { Editor as Editor$1 } from '@tiptap/core';
 import { Node as Node$1 } from '@tiptap/pm/model';
 import { EditorProviderProps as EditorProviderProps$1 } from '@tiptap/react';
 
+/** @public */
+interface DrBackgroundProps {
+    x: number;
+    y: number;
+    z: number;
+}
 /** @public @react */
-declare function DefaultBackground(): react_jsx_runtime.JSX.Element;
+declare function DefaultBackground({ x, y, z }: DrBackgroundProps): react_jsx_runtime.JSX.Element;
 
 /** @public */
 interface DrCanvasComponentProps {
@@ -2258,6 +2264,7 @@ interface DrSessionStateSnapshot {
     isDebugMode?: boolean;
     isToolLocked?: boolean;
     isGridMode?: boolean;
+    backgroundType?: DrBoardBackgroundType;
     pageStates?: Array<{
         pageId: DrPageId;
         camera?: {
@@ -4168,7 +4175,7 @@ declare class UserPreferencesManager {
         isWrapMode: boolean;
         isDynamicResizeMode: boolean;
         enhancedA11yMode: boolean;
-        inputMode: "mouse" | "trackpad" | null;
+        inputMode: "trackpad" | "mouse" | null;
         isZoomDirectionInverted: boolean;
     };
     getIsDarkMode(): boolean;
@@ -4187,7 +4194,7 @@ declare class UserPreferencesManager {
     getIsDynamicResizeMode(): boolean;
     getIsPasteAtCursorMode(): boolean;
     getEnhancedA11yMode(): boolean;
-    getInputMode(): "mouse" | "trackpad" | null;
+    getInputMode(): "trackpad" | "mouse" | null;
     getIsZoomDirectionInverted(): boolean;
 }
 
@@ -8352,12 +8359,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>;
@@ -9093,7 +9100,7 @@ interface DrCollaboratorCursorProps {
 
 /** @public */
 interface DrEditorComponents {
-    Background?: ComponentType | null;
+    Background?: ComponentType<DrBackgroundProps> | null;
     Canvas?: ComponentType<DrCanvasComponentProps> | null;
     Grid?: ComponentType<DrGridProps> | null;
     /** Renders a single collaborator cursor. Pass `null` to hide cursors entirely. */
@@ -10426,4 +10433,4 @@ declare function uniq<T>(array: {
     readonly [n: number]: T;
 } | null | undefined): T[];
 
-export { Arc2d, AssetUtil, BaseBoxShapeTool, BaseBoxShapeUtil, BaseFrameLikeShapeUtil, type BatchMeasurementRequest, type BindingOnChangeOptions, type BindingOnCreateOptions, type BindingOnDeleteOptions, type BindingOnShapeChangeOptions, type BindingOnShapeDeleteOptions, type BindingOnShapeIsolateOptions, BindingUtil, type BoundsSnapGeometry, type BoundsSnapPoint, BoundsSnaps, Box, type BoxLike, type CanvasMaxSize, Circle2d, ClickManager, CollaboratorsManager, ContainerProvider, type ContainerProviderProps, CubicBezier2d, CubicSpline2d, DEFAULT_ANIMATION_OPTIONS, DEFAULT_CAMERA_OPTIONS, DEFAULT_THEME, type DebugFlag, type DebugFlagDef, type DebugFlagDefaults, DefaultBackground, DefaultCanvas, DefaultErrorFallback, DefaultGrid, DefaultSelectionBackground, DefaultShapeWrapper, DefaultSpinner, DefaultSvgDefs, type DrAdjacentDirection, type DrAnyAssetUtilConstructor, type DrAnyBindingUtilConstructor, type DrAnyOverlayUtilConstructor, type DrAnyShapeUtilConstructor, type DrAssetUtilConstructor, type DrBaseBoxShape, type DrBaseEventInfo, type DrBaseExternalContent, type DrBindingUtilConstructor, type DrCLickEventName, type DrCameraConstraints, type DrCameraEndPerfEvent, type DrCameraMoveOptions, type DrCameraOptions, type DrCameraStartPerfEvent, type DrCancelEvent, type DrCancelEventInfo, type DrCanvasComponentProps, type DrClickEvent, type DrClickEventInfo, type DrClickState, type DrClipboardPasteRawInfo, type DrClipboardWriteInfo, type DrCollaboratorCursorLayout, type DrCollaboratorCursorProps, type DrCompleteEvent, type DrCompleteEventInfo, type DrContent, type DrCropInfo, type DrCurrentUser, type DrDeepLink, type DrDeepLinkOptions, type DrDragShapesInInfo, type DrDragShapesOutInfo, type DrDragShapesOverInfo, type DrDrawExternalContent, type DrDrawExternalContentSource, type DrDropShapesOverInfo, type DrEditStartInfo, type DrEditorComponents, type DrEditorOptions, type DrEditorRunOptions, type DrEditorSnapshot, type DrEmbedExternalContent, type DrEnterEventHandler, type DrErrorBoundaryProps, type DrErrorExternalContentSource, type DrErrorFallbackComponent, type DrEventHandlers, type DrEventInfo, type DrEventMap, type DrEventMapHandler, type DrEventName, type DrExcalidrawExternalContent, type DrExcalidrawExternalContentSource, type DrExitEventHandler, type DrExportType, type DrExternalAsset, type DrExternalContent, type DrExternalContentSource, type DrFileExternalAsset, type DrFileReplaceExternalContent, type DrFilesExternalContent, type DrFramePerfEvent, type DrGeometryOpts, type DrGetShapeAtPointOptions, type DrGridProps, type DrHandleDragInfo, type DrHistoryBatchOptions, type DrHistoryDiff, type DrHistoryEntry, type DrHistoryMark, type DrImageExportOptions, type DrIndicatorPath, type DrInteractionEndPerfEvent, type DrInteractionStartPerfEvent, type DrInterruptEvent, type DrInterruptEventInfo, type DrKeyboardEvent, type DrKeyboardEventInfo, type DrKeyboardEventName, type DrLoadSessionStateSnapshotOptions, type DrLoadSnapshotOptions, type DrMeasureTextOpts, type DrMeasureTextSpanOpts, type DrMeasuredTextSize, type DrOnMountHandler, type DrOverlay, type DrOverlayEntry, type DrOverlayUtilConstructor, type DrPerfEventMap, type DrPerfFrameTimeStats, type DrPerfLongAnimationFrame, type DrPerfLongAnimationFrameScript, type DrPinchEvent, type DrPinchEventInfo, type DrPinchEventName, type DrPointerEvent, type DrPointerEventInfo, type DrPointerEventName, type DrPointerEventTarget, type DrRenderingShape, type DrResizeHandle, type DrResizeInfo, type DrResizeMode, type DrResizeShapeOptions, type DrRotationSnapshot, type DrSelectionBackgroundProps, type DrSelectionHandle, type DrSessionStateSnapshot, type DrShapeErrorFallbackComponent, type DrShapeIndicatorOverlay, type DrShapeOperationPerfEvent, type DrShapeUtilCanBeLaidOutOpts, type DrShapeUtilCanBindOpts, type DrShapeUtilCanvasSvgDef, type DrShapeUtilConstructor, type DrShapeWrapperProps, type DrStateNodeConstructor, type DrStoreBaseOptions, type DrStoreEventInfo, type DrStoreOptions, type DrStoreSchemaOptions, type DrStoreWithStatus, type DrSvgExportOptions, type DrSvgTextExternalContent, type DrTextExternalContent, type DrTextExternalContentSource, type DrTextOptions, type DrTickEvent, type DrTickEventInfo, type DrUndoRedoPerfEvent, type DrUpdatePointerOptions, type DrUrlExternalAsset, type DrUrlExternalContent, type DrUserPreferences, type DrWheelEvent, type DrWheelEventInfo, DrawEditor, type DrawEditorBaseProps, type DrawEditorProps, type DrawEditorStoreProps, type DrawEditorWithStoreProps, type DrawEditorWithoutStoreProps, type DrawOptions, EASINGS, EVENT_NAME_MAP, Edge2d, EdgeScrollManager, Editor, EditorAtom, EditorContext, EditorProvider, type EditorProviderProps, Ellipse2d, ErrorBoundary, ErrorScreen, FontManager, type GapsSnapIndicator, Geometry2d, Geometry2dFilters, type Geometry2dOptions, Group2d, GroupShapeUtil, HALF_PI, HTMLContainer, type HTMLContainerProps, type HandleSnapGeometry, HandleSnaps, HistoryManager, InputsManager, LoadingScreen, type LoadingScreenProps, LocalIndexedDb, Mat, type MatLike, type MatModel, MenuClickCapture, OptionalErrorBoundary, type OptionalKeys, OverlayManager, type OverlayOptionsWithDisplayValues, OverlayUtil, PI, PI2, type PerfectDashTerminal, PerformanceApiAdapter, PerformanceManager, Point2d, type PointsSnapIndicator, Polygon2d, Polyline2d, ROTATE_CORNER_TO_SELECTION_CORNER, ReadonlySharedStyleMap, Rectangle2d, type RequiredKeys, type ResizeBoxOptions, type RichTextFontVisitor, type RichTextFontVisitorState, type RotateCorner, SIDES, SIN, SVGContainer, type SVGContainerProps, type SafeId, type ScribbleItem, ScribbleManager, type ScribbleSessionOptions, type SelectionCorner, type SelectionEdge, type SelectionHandle, ShapeIndicatorOverlayUtil, ShapeUtil, type SharedStyle, SharedStyleMap, type SnapData, type SnapIndicator, SnapManager, SpatialIndexManager, Stadium2d, StateNode, type StoreName, type SvgExportContext, type SvgExportDef, TAB_ID, Table, TextManager, ThemeManager, TickManager, type TiptapEditor, type TiptapNode, TransformedGeometry2d, type TransformedGeometry2dOptions, USER_COLORS, type UiEvent, type UiEventType, UserPreferencesManager, Vec, type VecLike, activeElementShouldCaptureKeys, angleDistance, applyRotationToSnapshotShapes, approximately, areAnglesCompatible, average, canonicalizeRotation, centerOfCircleFromThreePoints, clamp, clampRadians, clampToBrowserMaxCanvasSize, clockwiseAngleDist, coreShapes, counterClockwiseAngleDist, createDebugValue, createDeepLinkString, createDrCurrentUser, createDrSchemaFromUtils, createDrStore, createSessionStateSnapshotSignal, dataUrlToFile, debugFlags, defaultDrawOptions, defaultUserPreferences, defaultUserStore, degreesToRadians, elementShouldCaptureKeys, extractSessionStateFromLegacySnapshot, featureFlags, getArcMeasure, getColorValue, getCursor, getDefaultCdnBaseUrl, getDroppedShapesToNewParents, getFontsFromRichText, getFreshUserPreferences, getGlobalDocument, getGlobalWindow, getIncrementedName, getOverlayDisplayValues, getOwnerDocument, getOwnerWindow, getPerfectDashProps, getPointInArcT, getPointOnCircle, getPointerInfo, getPointsOnArc, getPolygonVertices, getRotationSnapshot, getSnapshot, getSvgAsImage, getSvgPathFromPoints, getUserPreferences, getVerticesCountForArcLength, hardReset, hardResetEditor, inlineBase64AssetStore, intersectCircleCircle, intersectCirclePolygon, intersectCirclePolyline, intersectLineSegmentCircle, intersectLineSegmentLineSegment, intersectLineSegmentPolygon, intersectLineSegmentPolyline, intersectPolygonBounds, intersectPolygonPolygon, isAccelKey, isSafeFloat, kickoutOccludedShapes, linesIntersect, loadSessionStateSnapshotIntoStore, loadSnapshot, loopToHtmlElement, maybeSnapToGrid, normalizeWheel, openWindow, parseDeepLinkString, perimeterOfEllipse, pointInPolygon, polygonIntersectsPolyline, polygonsIntersect, precise, preventDefault, radiansToDegrees, rangeIntersection, refreshPage, releasePointerCapture, resizeBox, resizeScaled, resolveThemes, rotateSelectionHandle, runtime, sanitizeId, setPointerCapture, setRuntimeOverrides, setUserPreferences, shortAngleDist, snapAngle, stopEventPropagation, strokeShapeIndicators, suffixSafeId, tlenv, tlenvReactive, tlmenus, tltime, toDomPrecision, toFixed, toPrecision, uniq, useColorMode, useContainer, useContainerIfExists, useDelaySvgExport, useDrSchemaFromUtils, useDrStore, useDrawCurrentUser, useEditor, useEditorComponents, useEvent, useGlobalMenuIsOpen, useIsCropping, useIsEditing, useLocalStore, useMaybeEditor, useOnMount, usePassThroughMouseOverEvents, usePassThroughWheelEvents, usePeerIds, usePresence, useReactiveEvent, useRefState, useShallowArrayIdentity, useShallowObjectIdentity, useSharedSafeId, useSvgExportContext, useTransform, useUniqueSafeId, useViewportHeight, userTypeValidator };
+export { Arc2d, AssetUtil, BaseBoxShapeTool, BaseBoxShapeUtil, BaseFrameLikeShapeUtil, type BatchMeasurementRequest, type BindingOnChangeOptions, type BindingOnCreateOptions, type BindingOnDeleteOptions, type BindingOnShapeChangeOptions, type BindingOnShapeDeleteOptions, type BindingOnShapeIsolateOptions, BindingUtil, type BoundsSnapGeometry, type BoundsSnapPoint, BoundsSnaps, Box, type BoxLike, type CanvasMaxSize, Circle2d, ClickManager, CollaboratorsManager, ContainerProvider, type ContainerProviderProps, CubicBezier2d, CubicSpline2d, DEFAULT_ANIMATION_OPTIONS, DEFAULT_CAMERA_OPTIONS, DEFAULT_THEME, type DebugFlag, type DebugFlagDef, type DebugFlagDefaults, DefaultBackground, DefaultCanvas, DefaultErrorFallback, DefaultGrid, DefaultSelectionBackground, DefaultShapeWrapper, DefaultSpinner, DefaultSvgDefs, type DrAdjacentDirection, type DrAnyAssetUtilConstructor, type DrAnyBindingUtilConstructor, type DrAnyOverlayUtilConstructor, type DrAnyShapeUtilConstructor, type DrAssetUtilConstructor, type DrBackgroundProps, type DrBaseBoxShape, type DrBaseEventInfo, type DrBaseExternalContent, type DrBindingUtilConstructor, type DrCLickEventName, type DrCameraConstraints, type DrCameraEndPerfEvent, type DrCameraMoveOptions, type DrCameraOptions, type DrCameraStartPerfEvent, type DrCancelEvent, type DrCancelEventInfo, type DrCanvasComponentProps, type DrClickEvent, type DrClickEventInfo, type DrClickState, type DrClipboardPasteRawInfo, type DrClipboardWriteInfo, type DrCollaboratorCursorLayout, type DrCollaboratorCursorProps, type DrCompleteEvent, type DrCompleteEventInfo, type DrContent, type DrCropInfo, type DrCurrentUser, type DrDeepLink, type DrDeepLinkOptions, type DrDragShapesInInfo, type DrDragShapesOutInfo, type DrDragShapesOverInfo, type DrDrawExternalContent, type DrDrawExternalContentSource, type DrDropShapesOverInfo, type DrEditStartInfo, type DrEditorComponents, type DrEditorOptions, type DrEditorRunOptions, type DrEditorSnapshot, type DrEmbedExternalContent, type DrEnterEventHandler, type DrErrorBoundaryProps, type DrErrorExternalContentSource, type DrErrorFallbackComponent, type DrEventHandlers, type DrEventInfo, type DrEventMap, type DrEventMapHandler, type DrEventName, type DrExcalidrawExternalContent, type DrExcalidrawExternalContentSource, type DrExitEventHandler, type DrExportType, type DrExternalAsset, type DrExternalContent, type DrExternalContentSource, type DrFileExternalAsset, type DrFileReplaceExternalContent, type DrFilesExternalContent, type DrFramePerfEvent, type DrGeometryOpts, type DrGetShapeAtPointOptions, type DrGridProps, type DrHandleDragInfo, type DrHistoryBatchOptions, type DrHistoryDiff, type DrHistoryEntry, type DrHistoryMark, type DrImageExportOptions, type DrIndicatorPath, type DrInteractionEndPerfEvent, type DrInteractionStartPerfEvent, type DrInterruptEvent, type DrInterruptEventInfo, type DrKeyboardEvent, type DrKeyboardEventInfo, type DrKeyboardEventName, type DrLoadSessionStateSnapshotOptions, type DrLoadSnapshotOptions, type DrMeasureTextOpts, type DrMeasureTextSpanOpts, type DrMeasuredTextSize, type DrOnMountHandler, type DrOverlay, type DrOverlayEntry, type DrOverlayUtilConstructor, type DrPerfEventMap, type DrPerfFrameTimeStats, type DrPerfLongAnimationFrame, type DrPerfLongAnimationFrameScript, type DrPinchEvent, type DrPinchEventInfo, type DrPinchEventName, type DrPointerEvent, type DrPointerEventInfo, type DrPointerEventName, type DrPointerEventTarget, type DrRenderingShape, type DrResizeHandle, type DrResizeInfo, type DrResizeMode, type DrResizeShapeOptions, type DrRotationSnapshot, type DrSelectionBackgroundProps, type DrSelectionHandle, type DrSessionStateSnapshot, type DrShapeErrorFallbackComponent, type DrShapeIndicatorOverlay, type DrShapeOperationPerfEvent, type DrShapeUtilCanBeLaidOutOpts, type DrShapeUtilCanBindOpts, type DrShapeUtilCanvasSvgDef, type DrShapeUtilConstructor, type DrShapeWrapperProps, type DrStateNodeConstructor, type DrStoreBaseOptions, type DrStoreEventInfo, type DrStoreOptions, type DrStoreSchemaOptions, type DrStoreWithStatus, type DrSvgExportOptions, type DrSvgTextExternalContent, type DrTextExternalContent, type DrTextExternalContentSource, type DrTextOptions, type DrTickEvent, type DrTickEventInfo, type DrUndoRedoPerfEvent, type DrUpdatePointerOptions, type DrUrlExternalAsset, type DrUrlExternalContent, type DrUserPreferences, type DrWheelEvent, type DrWheelEventInfo, DrawEditor, type DrawEditorBaseProps, type DrawEditorProps, type DrawEditorStoreProps, type DrawEditorWithStoreProps, type DrawEditorWithoutStoreProps, type DrawOptions, EASINGS, EVENT_NAME_MAP, Edge2d, EdgeScrollManager, Editor, EditorAtom, EditorContext, EditorProvider, type EditorProviderProps, Ellipse2d, ErrorBoundary, ErrorScreen, FontManager, type GapsSnapIndicator, Geometry2d, Geometry2dFilters, type Geometry2dOptions, Group2d, GroupShapeUtil, HALF_PI, HTMLContainer, type HTMLContainerProps, type HandleSnapGeometry, HandleSnaps, HistoryManager, InputsManager, LoadingScreen, type LoadingScreenProps, LocalIndexedDb, Mat, type MatLike, type MatModel, MenuClickCapture, OptionalErrorBoundary, type OptionalKeys, OverlayManager, type OverlayOptionsWithDisplayValues, OverlayUtil, PI, PI2, type PerfectDashTerminal, PerformanceApiAdapter, PerformanceManager, Point2d, type PointsSnapIndicator, Polygon2d, Polyline2d, ROTATE_CORNER_TO_SELECTION_CORNER, ReadonlySharedStyleMap, Rectangle2d, type RequiredKeys, type ResizeBoxOptions, type RichTextFontVisitor, type RichTextFontVisitorState, type RotateCorner, SIDES, SIN, SVGContainer, type SVGContainerProps, type SafeId, type ScribbleItem, ScribbleManager, type ScribbleSessionOptions, type SelectionCorner, type SelectionEdge, type SelectionHandle, ShapeIndicatorOverlayUtil, ShapeUtil, type SharedStyle, SharedStyleMap, type SnapData, type SnapIndicator, SnapManager, SpatialIndexManager, Stadium2d, StateNode, type StoreName, type SvgExportContext, type SvgExportDef, TAB_ID, Table, TextManager, ThemeManager, TickManager, type TiptapEditor, type TiptapNode, TransformedGeometry2d, type TransformedGeometry2dOptions, USER_COLORS, type UiEvent, type UiEventType, UserPreferencesManager, Vec, type VecLike, activeElementShouldCaptureKeys, angleDistance, applyRotationToSnapshotShapes, approximately, areAnglesCompatible, average, canonicalizeRotation, centerOfCircleFromThreePoints, clamp, clampRadians, clampToBrowserMaxCanvasSize, clockwiseAngleDist, coreShapes, counterClockwiseAngleDist, createDebugValue, createDeepLinkString, createDrCurrentUser, createDrSchemaFromUtils, createDrStore, createSessionStateSnapshotSignal, dataUrlToFile, debugFlags, defaultDrawOptions, defaultUserPreferences, defaultUserStore, degreesToRadians, elementShouldCaptureKeys, extractSessionStateFromLegacySnapshot, featureFlags, getArcMeasure, getColorValue, getCursor, getDefaultCdnBaseUrl, getDroppedShapesToNewParents, getFontsFromRichText, getFreshUserPreferences, getGlobalDocument, getGlobalWindow, getIncrementedName, getOverlayDisplayValues, getOwnerDocument, getOwnerWindow, getPerfectDashProps, getPointInArcT, getPointOnCircle, getPointerInfo, getPointsOnArc, getPolygonVertices, getRotationSnapshot, getSnapshot, getSvgAsImage, getSvgPathFromPoints, getUserPreferences, getVerticesCountForArcLength, hardReset, hardResetEditor, inlineBase64AssetStore, intersectCircleCircle, intersectCirclePolygon, intersectCirclePolyline, intersectLineSegmentCircle, intersectLineSegmentLineSegment, intersectLineSegmentPolygon, intersectLineSegmentPolyline, intersectPolygonBounds, intersectPolygonPolygon, isAccelKey, isSafeFloat, kickoutOccludedShapes, linesIntersect, loadSessionStateSnapshotIntoStore, loadSnapshot, loopToHtmlElement, maybeSnapToGrid, normalizeWheel, openWindow, parseDeepLinkString, perimeterOfEllipse, pointInPolygon, polygonIntersectsPolyline, polygonsIntersect, precise, preventDefault, radiansToDegrees, rangeIntersection, refreshPage, releasePointerCapture, resizeBox, resizeScaled, resolveThemes, rotateSelectionHandle, runtime, sanitizeId, setPointerCapture, setRuntimeOverrides, setUserPreferences, shortAngleDist, snapAngle, stopEventPropagation, strokeShapeIndicators, suffixSafeId, tlenv, tlenvReactive, tlmenus, tltime, toDomPrecision, toFixed, toPrecision, uniq, useColorMode, useContainer, useContainerIfExists, useDelaySvgExport, useDrSchemaFromUtils, useDrStore, useDrawCurrentUser, useEditor, useEditorComponents, useEvent, useGlobalMenuIsOpen, useIsCropping, useIsEditing, useLocalStore, useMaybeEditor, useOnMount, usePassThroughMouseOverEvents, usePassThroughWheelEvents, usePeerIds, usePresence, useReactiveEvent, useRefState, useShallowArrayIdentity, useShallowObjectIdentity, useSharedSafeId, useSvgExportContext, useTransform, useUniqueSafeId, useViewportHeight, userTypeValidator };

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 * 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 classNames from 'classnames';
 import { flushSync } from 'react-dom';
 import { openDB, deleteDB } from 'idb';
 import EventEmitter from 'eventemitter3';
@@ -32,8 +32,242 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-function DefaultBackground() {
-  return /* @__PURE__ */ jsx("div", { className: "dr-background" });
+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({ x, y, z }) {
+  const editor = useEditor();
+  const backgroundType = useValue(
+    "backgroundType",
+    () => editor.getInstanceState().backgroundType,
+    [editor]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "dr-background" }),
+    backgroundType !== "none" && /* @__PURE__ */ jsx(BoardBackgroundPattern, { type: backgroundType, x, y, z })
+  ] });
+}
+var PATTERN_SPACING = {
+  dots: 24,
+  grid: 48,
+  "hex-grid": 32,
+  lined: 32,
+  "double-line": 40,
+  "double-line-slash": 40,
+  checkered: 20
+};
+var ANGLED_LINE_LENGTH = 4e3;
+function wrap(value, size) {
+  return (value % size + size) % size;
+}
+function getAngledPatternOffset(x, y, z, angleDeg, s) {
+  const rad = angleDeg * Math.PI / 180;
+  const nx = -Math.sin(rad);
+  const ny = Math.cos(rad);
+  const projected = x * z * nx + y * z * ny;
+  return wrap(projected, s);
+}
+function AngledLinePattern({ id, angle, spacing, x, y, z, className }) {
+  const s = spacing * z;
+  const offset = getAngledPatternOffset(x, y, z, angle, s);
+  return /* @__PURE__ */ jsx(
+    "pattern",
+    {
+      id,
+      width: ANGLED_LINE_LENGTH,
+      height: s,
+      patternUnits: "userSpaceOnUse",
+      patternTransform: `rotate(${angle}) translate(0, ${offset})`,
+      children: /* @__PURE__ */ jsx("line", { className, x1: 0, y1: 0, x2: ANGLED_LINE_LENGTH, y2: 0 })
+    }
+  );
+}
+function BoardBackgroundPattern({ type, x, y, z }) {
+  const id = useUniqueSafeId("board-bg");
+  const editor = useEditor();
+  const { gridSteps } = editor.options;
+  switch (type) {
+    case "dots": {
+      return /* @__PURE__ */ jsxs("svg", { className: "dr-background-pattern", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("defs", { children: gridSteps.map(({ step }) => {
+          const s = PATTERN_SPACING.dots * step * z;
+          const ox = wrap(0.5 + x * z, s);
+          const oy = wrap(0.5 + y * z, s);
+          return /* @__PURE__ */ jsx(
+            "pattern",
+            {
+              id: suffixSafeId(id, `${step}`),
+              width: s,
+              height: s,
+              patternUnits: "userSpaceOnUse",
+              children: /* @__PURE__ */ jsx("circle", { className: "dr-bg-dot", cx: ox, cy: oy, r: 1.5 })
+            },
+            step
+          );
+        }) }),
+        gridSteps.map(({ min, mid, step }) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${suffixSafeId(id, `${step}`)})`,
+            opacity: z < mid ? modulate(z, [min, mid], [0, 1], true) : 1
+          },
+          step
+        ))
+      ] });
+    }
+    case "grid":
+    case "checkered": {
+      const lineClass = type === "checkered" ? "dr-bg-line-secondary" : "dr-bg-line";
+      return /* @__PURE__ */ jsxs("svg", { className: "dr-background-pattern", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("defs", { children: gridSteps.map(({ step }) => {
+          const s = PATTERN_SPACING[type] * step * z;
+          const ox = wrap(0.5 + x * z, s);
+          const oy = wrap(0.5 + y * z, s);
+          return /* @__PURE__ */ jsx(
+            "pattern",
+            {
+              id: suffixSafeId(id, `${step}`),
+              width: s,
+              height: s,
+              patternUnits: "userSpaceOnUse",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: lineClass,
+                  d: `M ${ox} 0 L ${ox} ${s} M 0 ${oy} L ${s} ${oy}`
+                }
+              )
+            },
+            step
+          );
+        }) }),
+        gridSteps.map(({ min, mid, step }) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${suffixSafeId(id, `${step}`)})`,
+            opacity: z < mid ? modulate(z, [min, mid], [0, 1], true) : 1
+          },
+          step
+        ))
+      ] });
+    }
+    case "hex-grid": {
+      const r = PATTERN_SPACING["hex-grid"] * z;
+      const width = 3 * r;
+      const height = Math.sqrt(3) * r;
+      const ox = wrap(x * z, width);
+      const oy = wrap(y * z, height);
+      const hexPoints = (cx, cy) => Array.from({ length: 6 }, (_, i) => {
+        const angle = Math.PI / 180 * (60 * i);
+        return `${cx + r * Math.cos(angle)},${cy + r * Math.sin(angle)}`;
+      }).join(" ");
+      return /* @__PURE__ */ jsxs("svg", { className: "dr-background-pattern", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "pattern",
+          {
+            id,
+            width,
+            height,
+            patternUnits: "userSpaceOnUse",
+            patternTransform: `translate(${ox}, ${oy})`,
+            children: [
+              /* @__PURE__ */ jsx("polygon", { className: "dr-bg-line", points: hexPoints(r, height / 2) }),
+              /* @__PURE__ */ jsx("polygon", { className: "dr-bg-line", points: hexPoints(2.5 * r, 0) }),
+              /* @__PURE__ */ jsx("polygon", { className: "dr-bg-line", points: hexPoints(2.5 * r, height) }),
+              /* @__PURE__ */ jsx("polygon", { className: "dr-bg-line", points: hexPoints(-0.5 * r, 0) }),
+              /* @__PURE__ */ jsx("polygon", { className: "dr-bg-line", points: hexPoints(-0.5 * r, height) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
+      ] });
+    }
+    case "lined": {
+      const s = PATTERN_SPACING.lined * z;
+      const oy = wrap(0.5 + y * z, s);
+      return /* @__PURE__ */ jsxs("svg", { className: "dr-background-pattern", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id, width: s, height: s, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("line", { className: "dr-bg-line", x1: 0, y1: oy, x2: s, y2: oy }) }) }),
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
+      ] });
+    }
+    case "double-line":
+    case "double-line-slash": {
+      const s = PATTERN_SPACING[type] * z;
+      const oy = wrap(0.5 + y * z, s);
+      const oySecondary = wrap(oy + s / 2, s);
+      const diagId = suffixSafeId(id, "diag");
+      return /* @__PURE__ */ jsxs("svg", { className: "dr-background-pattern", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("pattern", { id, width: s, height: s, patternUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("line", { className: "dr-bg-line", x1: 0, y1: oy, x2: s, y2: oy }),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                className: "dr-bg-line-secondary",
+                x1: 0,
+                y1: oySecondary,
+                x2: s,
+                y2: oySecondary
+              }
+            )
+          ] }),
+          type === "double-line-slash" && /* @__PURE__ */ jsx(
+            AngledLinePattern,
+            {
+              id: diagId,
+              angle: -65,
+              spacing: 22,
+              x,
+              y,
+              z,
+              className: "dr-bg-line-secondary"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` }),
+        type === "double-line-slash" && /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${diagId})` })
+      ] });
+    }
+    default: {
+      const exhaustiveCheck = type;
+      throw new Error(`Unhandled board background type: ${exhaustiveCheck}`);
+    }
+  }
 }
 var featureFlags = {};
 var pointerCaptureTrackingObject = createDebugValue(
@@ -326,40 +560,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() {
@@ -4034,6 +4234,11 @@ function DefaultCanvas({ className }) {
   );
   const hideShapes = useValue("debug_shapes", () => debugFlags.hideShapes.get(), [debugFlags]);
   const isGridMode = useValue("isGridMode", () => editor.getInstanceState().isGridMode, [editor]);
+  const backgroundType = useValue(
+    "backgroundType",
+    () => editor.getInstanceState().backgroundType,
+    [editor]
+  );
   const { Grid } = useEditorComponents();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -4049,8 +4254,8 @@ function DefaultCanvas({ className }) {
             shapeSvgDefs,
             SvgDefs && /* @__PURE__ */ jsx(SvgDefs, {})
           ] }) }),
-          Background && /* @__PURE__ */ jsx("div", { className: "dr-background__wrapper", children: /* @__PURE__ */ jsx(Background, {}) }),
-          isGridMode && Grid && /* @__PURE__ */ jsx(GridWrapper, {}),
+          Background && /* @__PURE__ */ jsx("div", { className: "dr-background__wrapper", children: /* @__PURE__ */ jsx(BackgroundWrapper, {}) }),
+          isGridMode && backgroundType === "none" && Grid && /* @__PURE__ */ jsx(GridWrapper, {}),
           /* @__PURE__ */ jsxs("div", { ref: rHtmlLayer, className: "dr-html-layer dr-shapes", draggable: false, children: [
             /* @__PURE__ */ jsx(OnTheCanvasWrapper, {}),
             SelectionBackground && /* @__PURE__ */ jsx(SelectionBackgroundWrapper, {}),
@@ -4089,6 +4294,13 @@ function GridWrapper() {
   if (!Grid) return null;
   return /* @__PURE__ */ jsx(Grid, { x, y, z, size: gridSize });
 }
+function BackgroundWrapper() {
+  const editor = useEditor();
+  const { x, y, z } = useValue("camera", () => editor.getCamera(), [editor]);
+  const { Background } = useEditorComponents();
+  if (!Background) return null;
+  return /* @__PURE__ */ jsx(Background, { x, y, z });
+}
 function ShapesLayer({ canvasRef }) {
   const editor = useEditor();
   const debugSvg = useValue("debug svg", () => debugFlags.debugSvg.get(), [debugFlags]);
@@ -5906,6 +6118,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 +6168,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 +6204,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 +6252,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 {
@@ -24842,7 +25058,7 @@ function getFontsFromRichText(editor, richText, initialState2) {
 // src/index.ts
 registerDrawLibraryVersion(
   "@ibodr/editor",
-  "0.1.9",
+  "0.1.11",
   "esm"
 );
 /*!