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

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

@@ -1004,7 +1004,7 @@ const defaultPalette$1 = {
   }
 };
 const okabeItoPalette$1 = {
-  name: "okabeito",
+  name: "okabeIto",
   description: "Colorblind-friendly blues, oranges, greens, and purples adapted from the Okabe-Ito palette, with varied marker shapes and line styles.",
   styles: {
     1: {
@@ -1175,7 +1175,7 @@ const okabeItoPalette$1 = {
   }
 };
 const tolBrightPalette$1 = {
-  name: "tolbright",
+  name: "tolBright",
   description: "Colorblind-friendly bright blues, reds, greens, and purples from Paul Tol's bright palette, with varied marker shapes and line styles.",
   styles: {
     1: {
@@ -1309,7 +1309,7 @@ const tolBrightPalette$1 = {
   }
 };
 const tolMutedPalette$1 = {
-  name: "tolmuted",
+  name: "tolMuted",
   description: "Nine colorblind-friendly muted styles from Paul Tol's muted palette, with varied marker shapes and line styles.",
   styles: {
     1: {
@@ -1508,7 +1508,7 @@ const tolMutedPalette$1 = {
   }
 };
 const tolHighContrastPalette$1 = {
-  name: "tolhighcontrast",
+  name: "tolHighContrast",
   description: "Four maximum-distinction styles from Paul Tol's high-contrast palette, distinguishable even in grayscale.",
   styles: {
     1: {
@@ -2018,7 +2018,7 @@ const categoricalPalette$1 = {
   }
 };
 const grumpyNarwhalPalette$1 = {
-  name: "grumpynarwhal",
+  name: "grumpyNarwhal",
   description: "Six saturated hues — burnt orange, forest green, deep pink, arctic teal, gold, and purple — going neon in dark mode.",
   styles: {
     1: {
@@ -2174,24 +2174,27 @@ function deepFreezePalette$1(palette) {
   Object.freeze(palette.styles);
   return Object.freeze(palette);
 }
+function registerByKey$1(palette) {
+  return [palette.name.toLowerCase(), deepFreezePalette$1(palette)];
+}
 const STYLE_PALETTES$1 = Object.assign(
   /* @__PURE__ */ Object.create(null),
-  {
-    [defaultPalette$1.name]: deepFreezePalette$1(defaultPalette$1),
-    [okabeItoPalette$1.name]: deepFreezePalette$1(okabeItoPalette$1),
-    [tolBrightPalette$1.name]: deepFreezePalette$1(tolBrightPalette$1),
-    [tolMutedPalette$1.name]: deepFreezePalette$1(tolMutedPalette$1),
-    [tolHighContrastPalette$1.name]: deepFreezePalette$1(
-      tolHighContrastPalette$1
-    ),
-    [ibmPalette$1.name]: deepFreezePalette$1(ibmPalette$1),
-    [grayscalePalette$1.name]: deepFreezePalette$1(grayscalePalette$1),
-    [categoricalPalette$1.name]: deepFreezePalette$1(categoricalPalette$1),
-    [grumpyNarwhalPalette$1.name]: deepFreezePalette$1(grumpyNarwhalPalette$1)
-  }
+  Object.fromEntries(
+    [
+      defaultPalette$1,
+      okabeItoPalette$1,
+      tolBrightPalette$1,
+      tolMutedPalette$1,
+      tolHighContrastPalette$1,
+      ibmPalette$1,
+      grayscalePalette$1,
+      categoricalPalette$1,
+      grumpyNarwhalPalette$1
+    ].map(registerByKey$1)
+  )
 );
 Object.freeze(STYLE_PALETTES$1);
-defaultPalette$1.name;
+defaultPalette$1.name.toLowerCase();
 Object.freeze(
   Object.keys(STYLE_PALETTES$1)
 );
@@ -26957,7 +26960,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 +27129,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 +27150,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(
       {
@@ -40049,7 +40066,7 @@ const defaultPalette = {
   }
 };
 const okabeItoPalette = {
-  name: "okabeito",
+  name: "okabeIto",
   description: "Colorblind-friendly blues, oranges, greens, and purples adapted from the Okabe-Ito palette, with varied marker shapes and line styles.",
   styles: {
     1: {
@@ -40220,7 +40237,7 @@ const okabeItoPalette = {
   }
 };
 const tolBrightPalette = {
-  name: "tolbright",
+  name: "tolBright",
   description: "Colorblind-friendly bright blues, reds, greens, and purples from Paul Tol's bright palette, with varied marker shapes and line styles.",
   styles: {
     1: {
@@ -40354,7 +40371,7 @@ const tolBrightPalette = {
   }
 };
 const tolMutedPalette = {
-  name: "tolmuted",
+  name: "tolMuted",
   description: "Nine colorblind-friendly muted styles from Paul Tol's muted palette, with varied marker shapes and line styles.",
   styles: {
     1: {
@@ -40553,7 +40570,7 @@ const tolMutedPalette = {
   }
 };
 const tolHighContrastPalette = {
-  name: "tolhighcontrast",
+  name: "tolHighContrast",
   description: "Four maximum-distinction styles from Paul Tol's high-contrast palette, distinguishable even in grayscale.",
   styles: {
     1: {
@@ -41063,7 +41080,7 @@ const categoricalPalette = {
   }
 };
 const grumpyNarwhalPalette = {
-  name: "grumpynarwhal",
+  name: "grumpyNarwhal",
   description: "Six saturated hues — burnt orange, forest green, deep pink, arctic teal, gold, and purple — going neon in dark mode.",
   styles: {
     1: {
@@ -41219,24 +41236,27 @@ function deepFreezePalette(palette) {
   Object.freeze(palette.styles);
   return Object.freeze(palette);
 }
+function registerByKey(palette) {
+  return [palette.name.toLowerCase(), deepFreezePalette(palette)];
+}
 const STYLE_PALETTES = Object.assign(
   /* @__PURE__ */ Object.create(null),
-  {
-    [defaultPalette.name]: deepFreezePalette(defaultPalette),
-    [okabeItoPalette.name]: deepFreezePalette(okabeItoPalette),
-    [tolBrightPalette.name]: deepFreezePalette(tolBrightPalette),
-    [tolMutedPalette.name]: deepFreezePalette(tolMutedPalette),
-    [tolHighContrastPalette.name]: deepFreezePalette(
-      tolHighContrastPalette
-    ),
-    [ibmPalette.name]: deepFreezePalette(ibmPalette),
-    [grayscalePalette.name]: deepFreezePalette(grayscalePalette),
-    [categoricalPalette.name]: deepFreezePalette(categoricalPalette),
-    [grumpyNarwhalPalette.name]: deepFreezePalette(grumpyNarwhalPalette)
-  }
+  Object.fromEntries(
+    [
+      defaultPalette,
+      okabeItoPalette,
+      tolBrightPalette,
+      tolMutedPalette,
+      tolHighContrastPalette,
+      ibmPalette,
+      grayscalePalette,
+      categoricalPalette,
+      grumpyNarwhalPalette
+    ].map(registerByKey)
+  )
 );
 Object.freeze(STYLE_PALETTES);
-defaultPalette.name;
+defaultPalette.name.toLowerCase();
 Object.freeze(
   Object.keys(STYLE_PALETTES)
 );
@@ -66089,7 +66109,7 @@ function ExternalVirtualKeyboard({
     }
   );
 }
-const version = "0.7.21-dev.352";
+const version = "0.7.21-dev.354";
 const latestDoenetmlVersion = version;
 function subscribeToPinnedTheme() {
   return () => {
@@ -66113,6 +66133,7 @@ function DoenetViewer({
   useSharedCoreWorker = false,
   mountPolicy,
   keepLive = false,
+  onStylePalettes,
   ...doenetViewerProps
 }) {
   const [id2, _2] = React__default.useState(() => Math.random().toString(36).slice(2));
@@ -66123,6 +66144,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 +66392,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 +66747,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 +66765,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 +66776,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 +66884,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)