@ibodr/editor 0.1.10 → 0.1.12

package/dist/index.d.ts

@@ -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 {
@@ -43,7 +49,7 @@ interface DrUserPreferences {
     animationSpeed?: number | null;
     areKeyboardShortcutsEnabled?: boolean | null;
     edgeScrollSpeed?: number | null;
-    colorScheme?: 'light' | 'dark' | 'system';
+    colorScheme?: 'light' | 'dark' | 'system' | 'inherit';
     isSnapMode?: boolean | null;
     isWrapMode?: boolean | null;
     isDynamicSizeMode?: boolean | null;
@@ -4154,7 +4160,7 @@ declare class UserPreferencesManager {
     systemColorScheme: _ibodr_state.Atom<"light" | "dark", unknown>;
     disposables: Set<() => void>;
     dispose(): void;
-    constructor(user: DrCurrentUser, colorScheme: 'light' | 'dark' | 'system');
+    constructor(user: DrCurrentUser, colorScheme: 'light' | 'dark' | 'system' | 'inherit');
     updateUserPreferences(userPreferences: Partial<DrUserPreferences>): void;
     getUserPreferences(): {
         id: string;
@@ -4164,7 +4170,7 @@ declare class UserPreferencesManager {
         animationSpeed: number;
         areKeyboardShortcutsEnabled: boolean;
         isSnapMode: boolean;
-        colorScheme: "light" | "dark" | "system" | undefined;
+        colorScheme: "light" | "dark" | "system" | "inherit" | undefined;
         isDarkMode: boolean;
         isWrapMode: boolean;
         isDynamicResizeMode: boolean;
@@ -4529,7 +4535,7 @@ interface DrEditorOptions {
      * - `'dark'` - Always use dark mode.
      * - `'system'` - Follow the OS color scheme preference.
      */
-    colorScheme?: 'light' | 'dark' | 'system';
+    colorScheme?: 'light' | 'dark' | 'system' | 'inherit';
     /**
      * Additional configuration options for the tldraw editor.
      */
@@ -9094,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. */
@@ -9997,8 +10003,10 @@ interface DrawEditorBaseProps {
      * - `'light'` - Always use light mode.
      * - `'dark'` - Always use dark mode.
      * - `'system'` - Follow the OS color scheme preference.
+     * - `'inherit'` - Follow the nearest ancestor's `data-color-mode` attribute
+     *   (for embedding inside a host app that manages its own theme).
      */
-    colorScheme?: 'light' | 'dark' | 'system';
+    colorScheme?: 'light' | 'dark' | 'system' | 'inherit';
     /**
      * Named themes for the editor.
      */
@@ -10427,4 +10435,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

@@ -10,10 +10,10 @@ import { getDefaultTranslationLocale, pageIdValidator, shapeIdValidator, DR_BOAR
 export * from '@ibodr/schema';
 import { T } from '@ibodr/validate';
 export * from '@ibodr/validate';
-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 classNames from 'classnames';
 import { flushSync } from 'react-dom';
 import { openDB, deleteDB } from 'idb';
 import EventEmitter from 'eventemitter3';
@@ -66,23 +66,209 @@ function useMaybeEditor() {
 function EditorProvider({ editor, children }) {
   return /* @__PURE__ */ jsx(EditorContext.Provider, { value: editor, children: /* @__PURE__ */ jsx(IdProvider, { children }) });
 }
-function DefaultBackground() {
+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(
-    "div",
+    "pattern",
     {
-      className: classNames2(
-        "dr-background",
-        backgroundType !== "none" && `dr-background__${backgroundType}`
-      )
+      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(
   "pointerCaptureTrackingObject",
@@ -4048,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(
@@ -4055,7 +4246,7 @@ function DefaultCanvas({ className }) {
       {
         ref: rCanvas,
         draggable: false,
-        className: classNames2("dr-canvas", className),
+        className: classNames("dr-canvas", className),
         "data-testid": "canvas",
         ...events,
         children: [
@@ -4063,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, {}),
@@ -4103,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]);
@@ -4245,7 +4443,7 @@ function MovingCameraHitTestBlocker() {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames2("dr-hit-test-blocker", {
+      className: classNames("dr-hit-test-blocker", {
         "dr-hit-test-blocker__hidden": cameraState === "idle"
       })
     }
@@ -4626,7 +4824,7 @@ My browser: ${navigator.userAgent}`
     "div",
     {
       ref: containerRef,
-      className: classNames2(
+      className: classNames(
         "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
@@ -4645,7 +4843,7 @@ My browser: ${navigator.userAgent}`
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames2("dr-modal", "dr-error-boundary__content", {
+            className: classNames("dr-modal", "dr-error-boundary__content", {
               "dr-error-boundary__content__expanded": shouldShowError && !shouldShowResetConfirmation
             }),
             children: shouldShowResetConfirmation ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4766,7 +4964,7 @@ var DefaultShapeWrapper = forwardRef(function DefaultShapeWrapper2({ children, s
       "data-shape-id": shape.id,
       draggable: false,
       ...props,
-      className: classNames2("dr-shape", isBackground && "dr-shape-background", props.className),
+      className: classNames("dr-shape", isBackground && "dr-shape-background", props.className),
       children
     }
   );
@@ -4780,7 +4978,7 @@ function DefaultSpinner(props) {
       viewBox: "0 0 16 16",
       "aria-hidden": "false",
       ...props,
-      className: classNames2("dr-spinner", props.className),
+      className: classNames("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" })
@@ -4794,10 +4992,10 @@ var DefaultSvgDefs = () => {
   return null;
 };
 function HTMLContainer({ children, className = "", ...rest }) {
-  return /* @__PURE__ */ jsx("div", { ...rest, className: classNames2("dr-html-container", className), children });
+  return /* @__PURE__ */ jsx("div", { ...rest, className: classNames("dr-html-container", className), children });
 }
 function SVGContainer({ children, className = "", ...rest }) {
-  return /* @__PURE__ */ jsx("svg", { ...rest, className: classNames2("dr-svg-container", className), "aria-hidden": "true", children });
+  return /* @__PURE__ */ jsx("svg", { ...rest, className: classNames("dr-svg-container", className), "aria-hidden": "true", children });
 }
 function useIdentity(value, isEqual2) {
   const ref = useRef(value);
@@ -4845,7 +5043,7 @@ var userTypeValidator = T.object({
   animationSpeed: T.number.nullable().optional(),
   areKeyboardShortcutsEnabled: T.boolean.nullable().optional(),
   edgeScrollSpeed: T.number.nullable().optional(),
-  colorScheme: T.literalEnum("light", "dark", "system").optional(),
+  colorScheme: T.literalEnum("light", "dark", "system", "inherit").optional(),
   isSnapMode: T.boolean.nullable().optional(),
   isWrapMode: T.boolean.nullable().optional(),
   isDynamicSizeMode: T.boolean.nullable().optional(),
@@ -24345,6 +24543,25 @@ var Stadium2d = class extends Geometry2d {
     return [a, b, c, d].map((p, i) => p.getSvgPathData(i === 0)).join(" ") + " Z";
   }
 };
+
+// src/lib/utils/resolveInheritedColorMode.ts
+function resolveInheritedColorMode(container) {
+  const doc = container.ownerDocument;
+  const candidates = [];
+  let el = container.parentElement;
+  while (el) {
+    candidates.push(el);
+    el = el.parentElement;
+  }
+  if (doc?.documentElement) {
+    candidates.push(doc.documentElement);
+  }
+  for (const node of candidates) {
+    const mode = node.getAttribute("data-color-mode");
+    if (mode === "dark" || mode === "light") return mode;
+  }
+  return null;
+}
 function useDarkMode() {
   const editor = useEditor();
   const container = useContainer();
@@ -24448,7 +24665,7 @@ var DrawEditor = memo(function DrawEditor2({
       ref: setContainer,
       "data-tldraw": version,
       draggable: false,
-      className: classNames2(`${TL_CONTAINER_CLASS} tl-theme__light`, className),
+      className: classNames(`${TL_CONTAINER_CLASS} tl-theme__light`, className),
       tabIndex: -1,
       role: "application",
       "aria-label": _options?.branding ?? "tldraw",
@@ -24660,6 +24877,36 @@ function DrawEditorWithReadyStore({
       editor.setCurrentTheme(initialTheme);
     }
   }, [editor, initialTheme]);
+  useLayoutEffect(() => {
+    if (!editor || !colorScheme || colorScheme === "system" || colorScheme === "inherit") return;
+    editor.setColorMode(colorScheme);
+  }, [editor, colorScheme]);
+  useLayoutEffect(() => {
+    if (!editor || colorScheme !== "inherit") return;
+    const container2 = editor.getContainer();
+    const sync = () => {
+      const inherited = resolveInheritedColorMode(container2);
+      if (inherited) {
+        editor.setColorMode(inherited);
+      }
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    const targets = /* @__PURE__ */ new Set();
+    let el = container2.parentElement;
+    while (el) {
+      targets.add(el);
+      el = el.parentElement;
+    }
+    targets.add(container2.ownerDocument.documentElement);
+    for (const target of targets) {
+      observer.observe(target, {
+        attributes: true,
+        attributeFilter: ["data-color-mode", "class"]
+      });
+    }
+    return () => observer.disconnect();
+  }, [editor, colorScheme]);
   const crashingError = useSyncExternalStore(
     useCallback(
       (onStoreChange) => {
@@ -24860,7 +25107,7 @@ function getFontsFromRichText(editor, richText, initialState2) {
 // src/index.ts
 registerDrawLibraryVersion(
   "@ibodr/editor",
-  "0.1.10",
+  "0.1.12",
   "esm"
 );
 /*!