@doenet/doenetml-iframe 0.7.21-dev.352 → 0.7.21-dev.353

package/README.md

@@ -80,7 +80,7 @@ the inner viewer applies them with the same semantics as the in-process
 
 | Prop change                                                                | Effect                                                                                                      |
 | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `render`, `darkMode`, `flags`, `answerResponseCounts`, callbacks, …         | applied live, no reload (flipping `render` false→true starts the document in the already-loaded realm)       |
+| `render`, `darkMode`, `styleOverrides`, `flags`, `answerResponseCounts`, callbacks, … | applied live, no reload (flipping `render` false→true starts the document in the already-loaded realm)       |
 | `doenetML`, `activityId`, `docId`, `attemptNumber`, `requestedVariantIndex` | the document's core re-initializes **inside the same iframe realm** — the multi-MB bundle is not re-parsed   |
 | `initialState`, `forceDisable` and the other `force*` props, `userId`       | read at (re-)initialization only, exactly like the in-process viewer — change `docId`/`attemptNumber` or remount via `key=` to apply |
 | `standaloneUrl`, `cssUrl`, `doenetmlVersion` (or a version change detected in `doenetML`), `useSharedCoreWorker` | a different bundle/realm is required, so the iframe reloads                                                   |
@@ -88,6 +88,91 @@ the inner viewer applies them with the same semantics as the in-process
 To force a full remount (fresh realm and worker), change the component's
 React `key`.
 
+### Reader style overrides (`styleOverrides`)
+
+Hosts can let a **reader** remap what each style number looks like — for
+example a color-blind user picking colors they can better tell apart — by
+passing a `styleOverrides` prop (type `ReaderStyleOverrides`, re-exported
+from this package). Overrides win over everything authored in the document
+(`<styleDefinition>` and `<stylePalette>` alike) and update live when the
+prop changes:
+
+```tsx
+<DoenetViewer
+    doenetML={source}
+    styleOverrides={{
+        styles: {
+            1: { lineColor: "#0072b2", markerColor: "#0072b2" },
+            2: { lineColor: "#d55e00", lineWidth: 6 },
+        },
+    }}
+/>
+```
+
+A reader can also switch the whole document to one of the built-in style
+palettes by name (case-insensitive) — for example `grayscale`, four grays
+laddered for maximum luminance separation, for readers who distinguish
+styles by lightness alone, or `okabeito` for common color vision
+deficiencies:
+
+```tsx
+<DoenetViewer
+    doenetML={source}
+    styleOverrides={{ palette: "grayscale" }}
+/>
+```
+
+A reader-selected palette replaces the document's base styles everywhere:
+authored `<stylePalette>` selections and `<styleDefinition>` customizations
+are discarded (they were tuned against different colors), style numbers
+beyond the reader palette's size wrap around onto it, and any `styles`
+overrides apply on top of the reader's palette. Unregistered palette names
+are ignored, so offer readers the palette list as fixed choices.
+
+Every style-definition key is overridable except the `*Word` descriptors:
+all colors (including the `*DarkMode` variants), opacities, `lineWidth`,
+`lineStyle`, `markerStyle`, `markerSize`, `markerFilled`, and the fill
+settings. Human-readable color/style words are always re-derived from the
+overridden values, so text style descriptions (e.g. "the blue line") stay
+truthful, and a missing dark-mode color is derived from the reader's
+light-mode color with the same accessibility-aware derivation authored
+styles get. Pass `null` (or omit the prop) to clear all overrides.
+
+The same prop exists on `<DoenetEditor>`, where it applies to the editor's
+rendered preview (the code pane and context help keep showing the authored
+values).
+
+#### Listing the available palettes (`onStylePalettes`)
+
+To build a palette picker, a host needs the palettes that the DoenetML
+version **inside the iframe** supports — this wrapper and the standalone
+bundle ship separately, and a host may pin an older `doenetmlVersion`. The
+`onStylePalettes` callback fires once the bundle has booted, with that
+bundle's palettes:
+
+```tsx
+const [palettes, setPalettes] = React.useState(null);
+
+<DoenetViewer
+    doenetML={source}
+    onStylePalettes={setPalettes}
+    styleOverrides={chosenPalette ? { palette: chosenPalette } : undefined}
+/>;
+```
+
+Each entry is `{ name, description, styles }`, where `styles` is keyed by
+style number (contiguous from 1, always at least four) and each style is a
+fully-resolved style definition — `lineColor`, `markerColor`, `fillColor`,
+`textColor` and their `*DarkMode` variants for swatches in either theme,
+plus `lineWidth`, `lineStyle`, `markerStyle`, and `markerSize` for the
+non-color distinctions palettes also carry, and the `*Word` fields (e.g.
+`"blue"`) for labelling swatches accessibly. Feed a chosen `name` back in as
+the `palette` field of `styleOverrides`.
+
+The callback receives `null` when the booted bundle predates palette
+discovery, which is the host's cue to hide the picker. The same prop exists
+on `<DoenetEditor>`.
+
 Function props (callbacks) are forwarded across the iframe boundary via
 Comlink proxies and always follow the latest identity passed — parents may
 pass inline arrow functions freely; identity churn does not re-render the

package/index.d.ts

@@ -15,6 +15,9 @@ import { MediaLicenseDisplay } from '../packages/utils/dist';
 import { MediaLicenseInfo } from '../packages/utils/dist';
 import { MediaLicenseKind } from '../packages/utils/dist';
 import { mediaLicenses } from '../packages/utils/dist';
+import { ReaderStyleOverrides } from '../packages/utils/dist';
+import { ReaderStyleValueOverrides } from '../packages/utils/dist';
+import { StylePaletteInfo } from '../packages/utils/dist';
 import { WarningRecord } from '../packages/utils/dist';
 
 export { CreativeCommonsVersion }
@@ -32,6 +35,15 @@ export declare const DoenetEditor: default_2.ForwardRefExoticComponent<Omit<Doen
 export { DoenetEditorHandle }
 
 export declare type DoenetEditorIframeProps = DoenetEditorProps & {
+    /**
+     * Called once the standalone bundle inside the iframe has booted, with
+     * the style palettes THAT bundle supports — the source of truth for a
+     * host rendering a palette picker, since the iframe may run a pinned or
+     * older DoenetML version than this wrapper. Receives `null` when the
+     * booted bundle predates palette discovery. Feed a chosen palette name
+     * back in as the `palette` field of `styleOverrides`.
+     */
+    onStylePalettes?: (palettes: StylePaletteInfo[] | null) => void;
     doenetML: string;
     /**
      * The URL of a standalone DoenetML bundle. This may be from the CDN.
@@ -86,10 +98,19 @@ declare type DoenetEditorProps = Omit<React.ComponentProps<typeof DoenetEditor_2
  * v0.7.18 cannot re-render in place; for those the wrapper falls back to
  * reloading the iframe on any prop change, its historical behavior.)
  */
-export declare function DoenetViewer({ doenetML, standaloneUrl: specifiedStandaloneUrl, cssUrl: specifiedCssUrl, doenetmlVersion: specifiedDoenetmlVersion, autodetectVersion, useSharedCoreWorker, mountPolicy, keepLive, ...doenetViewerProps }: DoenetViewerIframeProps): default_2.JSX.Element | null;
+export declare function DoenetViewer({ doenetML, standaloneUrl: specifiedStandaloneUrl, cssUrl: specifiedCssUrl, doenetmlVersion: specifiedDoenetmlVersion, autodetectVersion, useSharedCoreWorker, mountPolicy, keepLive, onStylePalettes, ...doenetViewerProps }: DoenetViewerIframeProps): default_2.JSX.Element | null;
 
 export declare type DoenetViewerIframeProps = DoenetViewerProps & {
     doenetML: string;
+    /**
+     * Called once the standalone bundle inside the iframe has booted, with
+     * the style palettes THAT bundle supports — the source of truth for a
+     * host rendering a palette picker, since the iframe may run a pinned or
+     * older DoenetML version than this wrapper. Receives `null` when the
+     * booted bundle predates palette discovery. Feed a chosen palette name
+     * back in as the `palette` field of `styleOverrides`.
+     */
+    onStylePalettes?: (palettes: StylePaletteInfo[] | null) => void;
     /**
      * The URL of a standalone DoenetML bundle. This may be from the CDN.
      * If autodetectVersion is `true` and a version is detected, this URL is ignored.
@@ -250,6 +271,12 @@ export declare type MountPolicy = {
     maxConcurrentBoots?: number;
 };
 
+export { ReaderStyleOverrides }
+
+export { ReaderStyleValueOverrides }
+
+export { StylePaletteInfo }
+
 export declare const version: string;
 
 export { WarningRecord }

package/index.js

@@ -26957,7 +26957,7 @@ function requireCssesc$1() {
   return cssesc_1$1;
 }
 requireCssesc$1();
-const viewerIframeJsSource = '(function() {\n  "use strict";\n  let lastAugmentedProps = null;\n  let currentFunctionProps = {};\n  const functionPropDispatchers = {};\n  function getFunctionPropDispatcher(key) {\n    let dispatcher = functionPropDispatchers[key];\n    if (!dispatcher) {\n      if (key === "reportScoreAndStateCallback" && typeof doenetWindowedViewer !== "undefined" && doenetWindowedViewer) {\n        dispatcher = (report) => messageParentFromViewer({\n          type: "reportScoreAndState",\n          report\n        });\n      } else {\n        dispatcher = (...callArgs) => currentFunctionProps[key]?.(...callArgs);\n      }\n      functionPropDispatchers[key] = dispatcher;\n    }\n    return dispatcher;\n  }\n  function functionPropArgsToMap(args) {\n    const map = {};\n    for (let i = 0; i < args.length; i += 2) {\n      const key = args[i];\n      const fn = args[i + 1];\n      if (typeof key === "string" && typeof fn === "function") {\n        map[key] = fn;\n      }\n    }\n    return map;\n  }\n  function releaseFunctionProxy(fn) {\n    try {\n      fn?.[ComlinkViewer.releaseProxy]?.();\n    } catch (e) {\n      console.warn(\n        "iframe DoenetViewer: failed to release stale Comlink proxy",\n        e\n      );\n    }\n  }\n  function setCurrentFunctionProps(incoming) {\n    for (const [key, fn] of Object.entries(currentFunctionProps)) {\n      if (incoming[key] !== fn) {\n        releaseFunctionProxy(fn);\n      }\n    }\n    currentFunctionProps = incoming;\n  }\n  function defaultRequestScrollTo(offset) {\n    messageParentFromViewer({ type: "scrollTo", offset });\n  }\n  function syncAugmentedFunctionProps() {\n    if (!lastAugmentedProps) {\n      return;\n    }\n    const next = {};\n    for (const [key, val] of Object.entries(lastAugmentedProps)) {\n      if (typeof val !== "function") {\n        next[key] = val;\n      }\n    }\n    for (const key of Object.keys(currentFunctionProps)) {\n      next[key] = getFunctionPropDispatcher(key);\n    }\n    if (!("requestScrollTo" in next)) {\n      next.requestScrollTo = defaultRequestScrollTo;\n    }\n    lastAugmentedProps = next;\n  }\n  let currentDoenetMLSource = null;\n  function resolveDoenetMLSource(root) {\n    if (currentDoenetMLSource !== null) {\n      return currentDoenetMLSource;\n    }\n    const scriptTag = root.querySelector(\'script[type="text/doenetml"]\');\n    currentDoenetMLSource = scriptTag?.innerHTML ?? "";\n    return currentDoenetMLSource;\n  }\n  async function waitForStandaloneBundle(timeoutMs) {\n    if (typeof window.renderDoenetViewerToContainer === "function") {\n      return true;\n    }\n    const deadline = Date.now() + timeoutMs;\n    while (Date.now() < deadline) {\n      await new Promise((resolve) => setTimeout(resolve, 50));\n      if (typeof window.renderDoenetViewerToContainer === "function") {\n        return true;\n      }\n    }\n    return false;\n  }\n  ComlinkViewer.expose(\n    {\n      renderViewerWithFunctionProps,\n      updateViewerProps(updatedSerializableProps) {\n        if (!lastAugmentedProps) {\n          console.warn(\n            "iframe DoenetViewer: updateViewerProps arrived before renderViewerWithFunctionProps completed — likely a bug in the iframe wrapper\'s queue/replay sequencing."\n          );\n          return;\n        }\n        const { doenetML, ...rest } = updatedSerializableProps;\n        if (typeof doenetML === "string") {\n          currentDoenetMLSource = doenetML;\n        }\n        lastAugmentedProps = {\n          ...lastAugmentedProps,\n          ...rest\n        };\n        renderWithLastAugmentedProps();\n      },\n      updateViewerFunctionProps(...args) {\n        if (!lastAugmentedProps) {\n          console.warn(\n            "iframe DoenetViewer: updateViewerFunctionProps arrived before renderViewerWithFunctionProps completed — likely a bug in the iframe wrapper\'s queue/replay sequencing."\n          );\n          return;\n        }\n        const incoming = functionPropArgsToMap(args);\n        const prevKeys = Object.keys(currentFunctionProps).sort();\n        const nextKeys = Object.keys(incoming).sort();\n        const keysChanged = prevKeys.length !== nextKeys.length || prevKeys.some((key, i) => key !== nextKeys[i]);\n        setCurrentFunctionProps(incoming);\n        if (keysChanged) {\n          syncAugmentedFunctionProps();\n          renderWithLastAugmentedProps();\n        }\n      }\n    },\n    ComlinkViewer.windowEndpoint(globalThis.parent)\n  );\n  function renderViewerWithFunctionProps(...args) {\n    setCurrentFunctionProps(functionPropArgsToMap(args));\n    const augmentedDoenetViewerProps = { ...doenetViewerProps };\n    augmentedDoenetViewerProps.externalVirtualKeyboardProvided = true;\n    for (const propName of doenetViewerPropsSpecified) {\n      if (!(propName in doenetViewerProps) && propName in currentFunctionProps) {\n        augmentedDoenetViewerProps[propName] = getFunctionPropDispatcher(propName);\n      }\n    }\n    if (!doenetViewerPropsSpecified.includes("requestScrollTo")) {\n      augmentedDoenetViewerProps.requestScrollTo = defaultRequestScrollTo;\n    }\n    lastAugmentedProps = augmentedDoenetViewerProps;\n    renderWithLastAugmentedProps();\n  }\n  function renderWithLastAugmentedProps() {\n    const root = document.getElementById("root");\n    window.renderDoenetViewerToContainer(\n      root,\n      resolveDoenetMLSource(root),\n      lastAugmentedProps\n    );\n  }\n  function installSharedCorePortProvider() {\n    let coreCounter = 0;\n    window.doenetGlobalConfig.createExternalCoreWorkerPort = () => {\n      const coreId = `${viewerId}-core-${++coreCounter}`;\n      const channel = new MessageChannel();\n      window.parent.postMessage(\n        { origin: viewerId, data: { type: "createSharedCore", coreId } },\n        window.parent.origin,\n        [channel.port2]\n      );\n      return {\n        port: channel.port1,\n        destroy: (suspectWedge) => {\n          messageParentFromViewer({\n            type: "destroySharedCore",\n            coreId,\n            suspectWedge: Boolean(suspectWedge)\n          });\n        }\n      };\n    };\n  }\n  (async () => {\n    if (await waitForStandaloneBundle(6e4)) {\n      if (typeof doenetSharedCoreWorker !== "undefined" && doenetSharedCoreWorker) {\n        installSharedCorePortProvider();\n      }\n      messageParentFromViewer({ iframeReady: true });\n    } else {\n      messageParentFromViewer({\n        error: "Invalid DoenetML version or DoenetML package not found"\n      });\n    }\n  })().catch((err) => {\n    console.error(\n      "iframe DoenetViewer: unexpected failure while signalling iframeReady",\n      err\n    );\n    try {\n      messageParentFromViewer({\n        error: "iframe viewer failed to initialize"\n      });\n    } catch {\n    }\n  });\n  function messageParentFromViewer(data) {\n    window.parent.postMessage(\n      {\n        origin: viewerId,\n        data\n      },\n      window.parent.origin\n    );\n  }\n})();\n';
+const viewerIframeJsSource = '(function() {\n  "use strict";\n  let lastAugmentedProps = null;\n  let currentFunctionProps = {};\n  const functionPropDispatchers = {};\n  function getFunctionPropDispatcher(key) {\n    let dispatcher = functionPropDispatchers[key];\n    if (!dispatcher) {\n      if (key === "reportScoreAndStateCallback" && typeof doenetWindowedViewer !== "undefined" && doenetWindowedViewer) {\n        dispatcher = (report) => messageParentFromViewer({\n          type: "reportScoreAndState",\n          report\n        });\n      } else {\n        dispatcher = (...callArgs) => currentFunctionProps[key]?.(...callArgs);\n      }\n      functionPropDispatchers[key] = dispatcher;\n    }\n    return dispatcher;\n  }\n  function functionPropArgsToMap(args) {\n    const map = {};\n    for (let i = 0; i < args.length; i += 2) {\n      const key = args[i];\n      const fn = args[i + 1];\n      if (typeof key === "string" && typeof fn === "function") {\n        map[key] = fn;\n      }\n    }\n    return map;\n  }\n  function releaseFunctionProxy(fn) {\n    try {\n      fn?.[ComlinkViewer.releaseProxy]?.();\n    } catch (e) {\n      console.warn(\n        "iframe DoenetViewer: failed to release stale Comlink proxy",\n        e\n      );\n    }\n  }\n  function setCurrentFunctionProps(incoming) {\n    for (const [key, fn] of Object.entries(currentFunctionProps)) {\n      if (incoming[key] !== fn) {\n        releaseFunctionProxy(fn);\n      }\n    }\n    currentFunctionProps = incoming;\n  }\n  function defaultRequestScrollTo(offset) {\n    messageParentFromViewer({ type: "scrollTo", offset });\n  }\n  function syncAugmentedFunctionProps() {\n    if (!lastAugmentedProps) {\n      return;\n    }\n    const next = {};\n    for (const [key, val] of Object.entries(lastAugmentedProps)) {\n      if (typeof val !== "function") {\n        next[key] = val;\n      }\n    }\n    for (const key of Object.keys(currentFunctionProps)) {\n      next[key] = getFunctionPropDispatcher(key);\n    }\n    if (!("requestScrollTo" in next)) {\n      next.requestScrollTo = defaultRequestScrollTo;\n    }\n    lastAugmentedProps = next;\n  }\n  let currentDoenetMLSource = null;\n  function resolveDoenetMLSource(root) {\n    if (currentDoenetMLSource !== null) {\n      return currentDoenetMLSource;\n    }\n    const scriptTag = root.querySelector(\'script[type="text/doenetml"]\');\n    currentDoenetMLSource = scriptTag?.innerHTML ?? "";\n    return currentDoenetMLSource;\n  }\n  async function waitForStandaloneBundle(timeoutMs) {\n    if (typeof window.renderDoenetViewerToContainer === "function") {\n      return true;\n    }\n    const deadline = Date.now() + timeoutMs;\n    while (Date.now() < deadline) {\n      await new Promise((resolve) => setTimeout(resolve, 50));\n      if (typeof window.renderDoenetViewerToContainer === "function") {\n        return true;\n      }\n    }\n    return false;\n  }\n  ComlinkViewer.expose(\n    {\n      renderViewerWithFunctionProps,\n      updateViewerProps(updatedSerializableProps) {\n        if (!lastAugmentedProps) {\n          console.warn(\n            "iframe DoenetViewer: updateViewerProps arrived before renderViewerWithFunctionProps completed — likely a bug in the iframe wrapper\'s queue/replay sequencing."\n          );\n          return;\n        }\n        const { doenetML, ...rest } = updatedSerializableProps;\n        if (typeof doenetML === "string") {\n          currentDoenetMLSource = doenetML;\n        }\n        lastAugmentedProps = {\n          ...lastAugmentedProps,\n          ...rest\n        };\n        renderWithLastAugmentedProps();\n      },\n      updateViewerFunctionProps(...args) {\n        if (!lastAugmentedProps) {\n          console.warn(\n            "iframe DoenetViewer: updateViewerFunctionProps arrived before renderViewerWithFunctionProps completed — likely a bug in the iframe wrapper\'s queue/replay sequencing."\n          );\n          return;\n        }\n        const incoming = functionPropArgsToMap(args);\n        const prevKeys = Object.keys(currentFunctionProps).sort();\n        const nextKeys = Object.keys(incoming).sort();\n        const keysChanged = prevKeys.length !== nextKeys.length || prevKeys.some((key, i) => key !== nextKeys[i]);\n        setCurrentFunctionProps(incoming);\n        if (keysChanged) {\n          syncAugmentedFunctionProps();\n          renderWithLastAugmentedProps();\n        }\n      }\n    },\n    ComlinkViewer.windowEndpoint(globalThis.parent)\n  );\n  function renderViewerWithFunctionProps(...args) {\n    setCurrentFunctionProps(functionPropArgsToMap(args));\n    const augmentedDoenetViewerProps = { ...doenetViewerProps };\n    augmentedDoenetViewerProps.externalVirtualKeyboardProvided = true;\n    for (const propName of doenetViewerPropsSpecified) {\n      if (!(propName in doenetViewerProps) && propName in currentFunctionProps) {\n        augmentedDoenetViewerProps[propName] = getFunctionPropDispatcher(propName);\n      }\n    }\n    if (!doenetViewerPropsSpecified.includes("requestScrollTo")) {\n      augmentedDoenetViewerProps.requestScrollTo = defaultRequestScrollTo;\n    }\n    lastAugmentedProps = augmentedDoenetViewerProps;\n    renderWithLastAugmentedProps();\n  }\n  function renderWithLastAugmentedProps() {\n    const root = document.getElementById("root");\n    window.renderDoenetViewerToContainer(\n      root,\n      resolveDoenetMLSource(root),\n      lastAugmentedProps\n    );\n  }\n  function installSharedCorePortProvider() {\n    let coreCounter = 0;\n    window.doenetGlobalConfig.createExternalCoreWorkerPort = () => {\n      const coreId = `${viewerId}-core-${++coreCounter}`;\n      const channel = new MessageChannel();\n      window.parent.postMessage(\n        { origin: viewerId, data: { type: "createSharedCore", coreId } },\n        window.parent.origin,\n        [channel.port2]\n      );\n      return {\n        port: channel.port1,\n        destroy: (suspectWedge) => {\n          messageParentFromViewer({\n            type: "destroySharedCore",\n            coreId,\n            suspectWedge: Boolean(suspectWedge)\n          });\n        }\n      };\n    };\n  }\n  (async () => {\n    if (await waitForStandaloneBundle(6e4)) {\n      if (typeof doenetSharedCoreWorker !== "undefined" && doenetSharedCoreWorker) {\n        installSharedCorePortProvider();\n      }\n      messageParentFromViewer({\n        iframeReady: true,\n        stylePalettes: readStylePalettesFromBundle()\n      });\n    } else {\n      messageParentFromViewer({\n        error: "Invalid DoenetML version or DoenetML package not found"\n      });\n    }\n  })().catch((err) => {\n    console.error(\n      "iframe DoenetViewer: unexpected failure while signalling iframeReady",\n      err\n    );\n    try {\n      messageParentFromViewer({\n        error: "iframe viewer failed to initialize"\n      });\n    } catch {\n    }\n  });\n  function readStylePalettesFromBundle() {\n    try {\n      return window.getDoenetStylePalettes?.() ?? null;\n    } catch (err) {\n      console.error(\n        "iframe DoenetML: failed to read style palettes from the standalone bundle",\n        err\n      );\n      return null;\n    }\n  }\n  function messageParentFromViewer(data) {\n    window.parent.postMessage(\n      {\n        origin: viewerId,\n        data\n      },\n      window.parent.origin\n    );\n  }\n})();\n';
 const editorIframeJsSource = `(function() {
   "use strict";
   let editorControlHandle = null;
@@ -27126,7 +27126,10 @@ const editorIframeJsSource = `(function() {
   }
   (async () => {
     if (await waitForStandaloneBundle(6e4)) {
-      messageParentFromEditor({ iframeReady: true });
+      messageParentFromEditor({
+        iframeReady: true,
+        stylePalettes: readStylePalettesFromBundle()
+      });
     } else {
       messageParentFromEditor({
         error: "Invalid DoenetML version or DoenetML package not found"
@@ -27144,6 +27147,17 @@ const editorIframeJsSource = `(function() {
     } catch {
     }
   });
+  function readStylePalettesFromBundle() {
+    try {
+      return window.getDoenetStylePalettes?.() ?? null;
+    } catch (err) {
+      console.error(
+        "iframe DoenetML: failed to read style palettes from the standalone bundle",
+        err
+      );
+      return null;
+    }
+  }
   function messageParentFromEditor(data) {
     window.parent.postMessage(
       {
@@ -66089,7 +66103,7 @@ function ExternalVirtualKeyboard({
     }
   );
 }
-const version = "0.7.21-dev.352";
+const version = "0.7.21-dev.353";
 const latestDoenetmlVersion = version;
 function subscribeToPinnedTheme() {
   return () => {
@@ -66113,6 +66127,7 @@ function DoenetViewer({
   useSharedCoreWorker = false,
   mountPolicy,
   keepLive = false,
+  onStylePalettes,
   ...doenetViewerProps
 }) {
   const [id2, _2] = React__default.useState(() => Math.random().toString(36).slice(2));
@@ -66123,6 +66138,8 @@ function DoenetViewer({
   const lastSentFunctionPropsRef = React__default.useRef(null);
   const doenetViewerPropsRef = React__default.useRef(doenetViewerProps);
   doenetViewerPropsRef.current = doenetViewerProps;
+  const onStylePalettesRef = React__default.useRef(onStylePalettes);
+  onStylePalettesRef.current = onStylePalettes;
   const doenetMLRef = React__default.useRef(doenetML);
   doenetMLRef.current = doenetML;
   const windowed = mountPolicy?.mode === "windowed";
@@ -66369,6 +66386,9 @@ function DoenetViewer({
         }
         return setInErrorState(data.error);
       } else if (data.iframeReady) {
+        onStylePalettesRef.current?.(
+          data.stylePalettes ?? null
+        );
         if (ref.current) {
           const viewerIframe = wrap$3(
             windowEndpoint(ref.current.contentWindow)
@@ -66721,6 +66741,9 @@ function serializePropsSnapshot(seed, props) {
       snapshot[key] = val;
     }
   }
+  if (snapshot.styleOverrides === void 0) {
+    snapshot.styleOverrides = null;
+  }
   return JSON.stringify(snapshot);
 }
 function logComlinkError(component, method) {
@@ -66736,6 +66759,7 @@ const DoenetEditor = React__default.forwardRef(function DoenetEditor2({
   width = "100%",
   height = "500px",
   autodetectVersion = true,
+  onStylePalettes,
   ...doenetEditorProps
 }, forwardedRef) {
   const [id2, _2] = React__default.useState(() => Math.random().toString(36).slice(2));
@@ -66746,6 +66770,8 @@ const DoenetEditor = React__default.forwardRef(function DoenetEditor2({
   const lastSentFunctionPropsRef = React__default.useRef(null);
   const doenetEditorPropsRef = React__default.useRef(doenetEditorProps);
   doenetEditorPropsRef.current = doenetEditorProps;
+  const onStylePalettesRef = React__default.useRef(onStylePalettes);
+  onStylePalettesRef.current = onStylePalettes;
   const [inErrorState, setInErrorState] = React__default.useState(null);
   const [ignoreDetectedVersion, setIgnoreDetectedVersion] = React__default.useState(false);
   const [initialDiagnostics, setInitialDiagnostics] = React__default.useState([]);
@@ -66852,6 +66878,9 @@ const DoenetEditor = React__default.forwardRef(function DoenetEditor2({
       if (data.error) {
         return setInErrorState(data.error);
       } else if (data.iframeReady) {
+        onStylePalettesRef.current?.(
+          data.stylePalettes ?? null
+        );
         if (ref.current) {
           const editorIframe = wrap$3(
             windowEndpoint(ref.current.contentWindow)