@pie-element/mc-populated-blank 0.2.10 → 0.2.11

package/src/delivery/computeDisplayState.ts

@@ -0,0 +1,101 @@
+export type AudioButtonSkin = { silentUrl: string; playingUrl: string };
+
+export const DEFAULT_AUDIO_BUTTON_SKINS: Record<string, AudioButtonSkin> = {
+  default: {
+    silentUrl:
+      'https://assets.learnosity.com/organisations/844/0c9f2aa3-3cd5-4de7-93ef-541c24ca35da.svg',
+    playingUrl:
+      'https://assets.learnosity.com/organisations/844/231dfdc2-c113-4be5-91fb-e75a0ca5994b.svg',
+  },
+  es: {
+    silentUrl:
+      'https://assets.learnosity.com/organisations/844/27a9d5b5-d873-4bd5-b9ba-22748782d8ba.svg',
+    playingUrl:
+      'https://assets.learnosity.com/organisations/844/120f216d-96b7-4560-94b8-1d90710216b7.svg',
+  },
+};
+
+/**
+ * Resolves the audio button skin to display.
+ * Priority: byLocale[exact] > byLocale[lang] > byLocale.default > customSingle > built-in default
+ */
+export function computeFeatureAudioSkin(params: {
+  locale: unknown;
+  audioButtonSkin: unknown;
+  audioButtonSkinsByLocale: unknown;
+}): AudioButtonSkin {
+  const locale = String(params.locale || '').toLowerCase();
+  const lang = locale.slice(0, 2);
+  const byLocale =
+    params.audioButtonSkinsByLocale && typeof params.audioButtonSkinsByLocale === 'object'
+      ? (params.audioButtonSkinsByLocale as Record<string, unknown>)
+      : {};
+  const customSingle =
+    params.audioButtonSkin && typeof params.audioButtonSkin === 'object'
+      ? (params.audioButtonSkin as AudioButtonSkin)
+      : null;
+  const defaultSkin = locale.startsWith('es')
+    ? DEFAULT_AUDIO_BUTTON_SKINS.es
+    : DEFAULT_AUDIO_BUTTON_SKINS.default;
+  return (byLocale[locale] ||
+    byLocale[lang] ||
+    byLocale.default ||
+    customSingle ||
+    defaultSkin) as AudioButtonSkin;
+}
+
+/**
+ * Returns the choice id that the ClozeMarker and selected-state highlight should display.
+ * When the correct answer is revealed (alwaysShowCorrect or evaluate+showCorrectAnswer),
+ * it shows the correct choice rather than the student's selection.
+ */
+export function computeDisplayChoiceId(params: {
+  selectedId: string;
+  isEvaluateMode: boolean;
+  showCorrectAnswer: boolean;
+  alwaysShowCorrect: boolean;
+  correctChoiceId: string;
+}): string {
+  const { selectedId, isEvaluateMode, showCorrectAnswer, alwaysShowCorrect, correctChoiceId } =
+    params;
+  if (alwaysShowCorrect && correctChoiceId) return correctChoiceId;
+  if (isEvaluateMode && showCorrectAnswer && correctChoiceId) return correctChoiceId;
+  return selectedId;
+}
+
+/**
+ * Returns the screen-reader-only result announcement text shown after evaluate mode scoring.
+ * Empty string means nothing is announced.
+ */
+export function computeResultText(params: {
+  isEvaluateMode: boolean;
+  showCorrectAnswer: boolean;
+  isCorrect: boolean;
+  isIncorrect: boolean;
+  selectedId: string;
+}): string {
+  const { isEvaluateMode, showCorrectAnswer, isCorrect, isIncorrect, selectedId } = params;
+  if (!isEvaluateMode || showCorrectAnswer) return '';
+  if (isCorrect) return 'Correct answer selected';
+  if (isIncorrect && selectedId) return 'Incorrect answer selected';
+  return '';
+}
+
+/**
+ * Returns the visible legend text for the choices fieldset.
+ * Strips HTML, truncates to legendMaxChars with an ellipsis, falls back to answerChoicesLabel.
+ */
+export function computeLegendText(params: {
+  prompt: string;
+  legendMaxChars: number;
+  answerChoicesLabel: string;
+}): string {
+  const { prompt, legendMaxChars, answerChoicesLabel } = params;
+  const plain = prompt
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+  const maxChars = Math.max(8, legendMaxChars);
+  if (!plain) return answerChoicesLabel;
+  return plain.length > maxChars ? `${plain.slice(0, Math.max(1, maxChars - 1))}…` : plain;
+}

package/src/delivery/computeLayoutProfile.test.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect } from 'vitest';
+import { computeLayoutProfile } from './computeLayoutProfile';
+
+describe('computeLayoutProfile — isAudioOnlyMode', () => {
+  it('is true when interactionMode is audio_mc_only', () => {
+    const { isAudioOnlyMode } = computeLayoutProfile({ interactionMode: 'audio_mc_only' });
+    expect(isAudioOnlyMode).toBe(true);
+  });
+
+  it('is false for any other interactionMode', () => {
+    expect(computeLayoutProfile({ interactionMode: 'populate_blank' }).isAudioOnlyMode).toBe(false);
+    expect(computeLayoutProfile({ interactionMode: '' }).isAudioOnlyMode).toBe(false);
+    expect(computeLayoutProfile({}).isAudioOnlyMode).toBe(false);
+  });
+});
+
+describe('computeLayoutProfile — isBlankOnlyTemplate', () => {
+  it('is true when template contains only the blank token', () => {
+    expect(computeLayoutProfile({ template: '{{blank}}' }).isBlankOnlyTemplate).toBe(true);
+  });
+
+  it('is true when blank token is wrapped in HTML tags', () => {
+    expect(computeLayoutProfile({ template: '<p>{{blank}}</p>' }).isBlankOnlyTemplate).toBe(true);
+  });
+
+  it('is true when blank token is surrounded by whitespace after stripping', () => {
+    expect(computeLayoutProfile({ template: '  <p>  {{blank}}  </p>  ' }).isBlankOnlyTemplate).toBe(
+      true
+    );
+  });
+
+  it('is true when template contains &nbsp; around the token', () => {
+    expect(computeLayoutProfile({ template: '&nbsp;{{blank}}&nbsp;' }).isBlankOnlyTemplate).toBe(
+      true
+    );
+  });
+
+  it('is false when template has text before the blank token', () => {
+    expect(computeLayoutProfile({ template: 'The word is {{blank}}.' }).isBlankOnlyTemplate).toBe(
+      false
+    );
+  });
+
+  it('is false when template has text after the blank token', () => {
+    expect(
+      computeLayoutProfile({ template: '<p>{{blank}} is the answer.</p>' }).isBlankOnlyTemplate
+    ).toBe(false);
+  });
+
+  it('is false for empty template', () => {
+    expect(computeLayoutProfile({ template: '' }).isBlankOnlyTemplate).toBe(false);
+    expect(computeLayoutProfile({}).isBlankOnlyTemplate).toBe(false);
+  });
+});
+
+describe('computeLayoutProfile — choiceLayout and isHorizontalChoices', () => {
+  it('uses configured choiceLayout=horizontal when provided', () => {
+    const r = computeLayoutProfile({ choiceLayout: 'horizontal' });
+    expect(r.choiceLayout).toBe('horizontal');
+    expect(r.isHorizontalChoices).toBe(true);
+  });
+
+  it('uses configured choiceLayout=vertical when provided', () => {
+    const r = computeLayoutProfile({ choiceLayout: 'vertical' });
+    expect(r.choiceLayout).toBe('vertical');
+    expect(r.isHorizontalChoices).toBe(false);
+  });
+
+  it('defaults to horizontal when isAudioOnlyMode is true and no choiceLayout configured', () => {
+    const r = computeLayoutProfile({ interactionMode: 'audio_mc_only' });
+    expect(r.choiceLayout).toBe('horizontal');
+    expect(r.isHorizontalChoices).toBe(true);
+  });
+
+  it('defaults to horizontal when isBlankOnlyTemplate is true and no choiceLayout configured', () => {
+    const r = computeLayoutProfile({ template: '<p>{{blank}}</p>' });
+    expect(r.choiceLayout).toBe('horizontal');
+    expect(r.isHorizontalChoices).toBe(true);
+  });
+
+  it('defaults to vertical for a normal sentence template', () => {
+    const r = computeLayoutProfile({ template: '<p>The word is {{blank}}.</p>' });
+    expect(r.choiceLayout).toBe('vertical');
+    expect(r.isHorizontalChoices).toBe(false);
+  });
+
+  it('configured choiceLayout overrides audio-only default', () => {
+    const r = computeLayoutProfile({ interactionMode: 'audio_mc_only', choiceLayout: 'vertical' });
+    expect(r.choiceLayout).toBe('vertical');
+  });
+});
+
+describe('computeLayoutProfile — hasInlineSentenceAudioLayout', () => {
+  it('is true when layoutProfile is inline_sentence and hasAudio is true', () => {
+    const r = computeLayoutProfile({ layoutProfile: 'inline_sentence', hasAudio: true });
+    expect(r.hasInlineSentenceAudioLayout).toBe(true);
+  });
+
+  it('is false when layoutProfile is inline_sentence but hasAudio is false', () => {
+    const r = computeLayoutProfile({ layoutProfile: 'inline_sentence', hasAudio: false });
+    expect(r.hasInlineSentenceAudioLayout).toBe(false);
+  });
+
+  it('is false for other profiles even when hasAudio is true', () => {
+    expect(
+      computeLayoutProfile({ layoutProfile: 'audio_blank_only', hasAudio: true })
+        .hasInlineSentenceAudioLayout
+    ).toBe(false);
+    expect(
+      computeLayoutProfile({ layoutProfile: '', hasAudio: true }).hasInlineSentenceAudioLayout
+    ).toBe(false);
+  });
+});
+
+describe('computeLayoutProfile — useFeatureButtonAudio', () => {
+  it('uses explicit boolean true when configured', () => {
+    const r = computeLayoutProfile({ useFeatureButtonAudio: true, hasAudio: false });
+    expect(r.useFeatureButtonAudio).toBe(true);
+  });
+
+  it('uses explicit boolean false when configured', () => {
+    const r = computeLayoutProfile({
+      useFeatureButtonAudio: false,
+      hasAudio: true,
+      layoutProfile: 'audio_blank_only',
+    });
+    expect(r.useFeatureButtonAudio).toBe(false);
+  });
+
+  it('derives true for audio_blank_only profile with hasAudio=true', () => {
+    const r = computeLayoutProfile({ layoutProfile: 'audio_blank_only', hasAudio: true });
+    expect(r.useFeatureButtonAudio).toBe(true);
+  });
+
+  it('derives true for stimulus_image_blank profile with hasAudio=true', () => {
+    const r = computeLayoutProfile({ layoutProfile: 'stimulus_image_blank', hasAudio: true });
+    expect(r.useFeatureButtonAudio).toBe(true);
+  });
+
+  it('derives true for token_sequence profile with hasAudio=true', () => {
+    const r = computeLayoutProfile({ layoutProfile: 'token_sequence', hasAudio: true });
+    expect(r.useFeatureButtonAudio).toBe(true);
+  });
+
+  it('derives false for inline_sentence profile (not in feature-button set)', () => {
+    const r = computeLayoutProfile({ layoutProfile: 'inline_sentence', hasAudio: true });
+    expect(r.useFeatureButtonAudio).toBe(false);
+  });
+
+  it('derives false when hasAudio is false regardless of profile', () => {
+    const r = computeLayoutProfile({ layoutProfile: 'audio_blank_only', hasAudio: false });
+    expect(r.useFeatureButtonAudio).toBe(false);
+  });
+
+  it('treats null as unconfigured and falls back to derived logic', () => {
+    const r = computeLayoutProfile({
+      useFeatureButtonAudio: null,
+      hasAudio: true,
+      layoutProfile: 'audio_blank_only',
+    });
+    expect(r.useFeatureButtonAudio).toBe(true);
+  });
+});

package/src/delivery/computeLayoutProfile.ts

@@ -0,0 +1,72 @@
+const BLANK_TOKEN = '{{blank}}';
+
+export interface LayoutProfileParams {
+  interactionMode?: string;
+  template?: string;
+  choiceLayout?: string;
+  layoutProfile?: string;
+  hasAudio?: boolean;
+  useFeatureButtonAudio?: boolean | null;
+}
+
+export interface LayoutProfileResult {
+  isAudioOnlyMode: boolean;
+  isBlankOnlyTemplate: boolean;
+  choiceLayout: 'horizontal' | 'vertical';
+  isHorizontalChoices: boolean;
+  hasInlineSentenceAudioLayout: boolean;
+  useFeatureButtonAudio: boolean;
+}
+
+const FEATURE_BUTTON_PROFILES = new Set([
+  'audio_blank_only',
+  'stimulus_image_blank',
+  'token_sequence',
+]);
+
+export function computeLayoutProfile(params: LayoutProfileParams): LayoutProfileResult {
+  const {
+    interactionMode = '',
+    template = '',
+    choiceLayout: configuredChoiceLayout,
+    layoutProfile = '',
+    hasAudio = false,
+    useFeatureButtonAudio: configuredFeatureButton,
+  } = params;
+
+  const isAudioOnlyMode = interactionMode === 'audio_mc_only';
+
+  const isBlankOnlyTemplate = (() => {
+    if (!template) return false;
+    const plain = template
+      .replace(/<[^>]+>/g, '')
+      .replace(/&nbsp;/g, ' ')
+      .trim();
+    return plain === BLANK_TOKEN;
+  })();
+
+  const choiceLayout: 'horizontal' | 'vertical' =
+    configuredChoiceLayout === 'horizontal' || configuredChoiceLayout === 'vertical'
+      ? (configuredChoiceLayout as 'horizontal' | 'vertical')
+      : isAudioOnlyMode || isBlankOnlyTemplate
+        ? 'horizontal'
+        : 'vertical';
+
+  const isHorizontalChoices = choiceLayout === 'horizontal';
+
+  const hasInlineSentenceAudioLayout = layoutProfile === 'inline_sentence' && hasAudio;
+
+  const useFeatureButtonAudio =
+    typeof configuredFeatureButton === 'boolean'
+      ? configuredFeatureButton
+      : hasAudio && FEATURE_BUTTON_PROFILES.has(layoutProfile);
+
+  return {
+    isAudioOnlyMode,
+    isBlankOnlyTemplate,
+    choiceLayout,
+    isHorizontalChoices,
+    hasInlineSentenceAudioLayout,
+    useFeatureButtonAudio,
+  };
+}

package/src/delivery/computeLayoutStyle.test.ts

@@ -0,0 +1,168 @@
+import { describe, expect, it } from 'vitest';
+import { computeLayoutStyle, DEFAULT_LAYOUT_LIMITS } from './computeLayoutStyle';
+
+const NO_CORRECT_ANSWER_VARS = '';
+const base = {
+  configuredLimits: {},
+  customProfilePresets: {},
+  correctAnswerStyleVars: NO_CORRECT_ANSWER_VARS,
+};
+
+// ---------------------------------------------------------------------------
+// blankWidth
+// ---------------------------------------------------------------------------
+describe('blankWidth', () => {
+  it('audio_blank_only → blankWideWidthRem', () => {
+    const { blankWidth } = computeLayoutStyle({
+      ...base,
+      layoutProfile: 'audio_blank_only',
+      isBlankOnlyTemplate: false,
+    });
+    expect(blankWidth).toBe(`${DEFAULT_LAYOUT_LIMITS.blankWideWidthRem}rem`);
+  });
+
+  it('stimulus_image_blank → blankWideWidthRem', () => {
+    const { blankWidth } = computeLayoutStyle({
+      ...base,
+      layoutProfile: 'stimulus_image_blank',
+      isBlankOnlyTemplate: false,
+    });
+    expect(blankWidth).toBe(`${DEFAULT_LAYOUT_LIMITS.blankWideWidthRem}rem`);
+  });
+
+  it('other profile + isBlankOnlyTemplate → blankStandaloneWidthRem', () => {
+    const { blankWidth } = computeLayoutStyle({
+      ...base,
+      layoutProfile: 'token_sequence',
+      isBlankOnlyTemplate: true,
+    });
+    expect(blankWidth).toBe(`${DEFAULT_LAYOUT_LIMITS.blankStandaloneWidthRem}rem`);
+  });
+
+  it('other profile + not blank-only → auto', () => {
+    const { blankWidth } = computeLayoutStyle({
+      ...base,
+      layoutProfile: 'inline_sentence',
+      isBlankOnlyTemplate: false,
+    });
+    expect(blankWidth).toBe('auto');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// blankBorderWidth
+// ---------------------------------------------------------------------------
+describe('blankBorderWidth', () => {
+  it.each([
+    'audio_blank_only',
+    'stimulus_image_blank',
+    'token_sequence',
+  ])('%s → blankUnderlineWideWidthPx (profile preset overrides to 6)', (profile) => {
+    const { blankBorderWidth } = computeLayoutStyle({
+      ...base,
+      layoutProfile: profile,
+      isBlankOnlyTemplate: false,
+    });
+    // All three wide-underline profiles have preset blankUnderlineWideWidthPx: 6
+    expect(blankBorderWidth).toBe('6px');
+  });
+
+  it('other profile → blankUnderlineWidthPx (default 2)', () => {
+    const { blankBorderWidth } = computeLayoutStyle({
+      ...base,
+      layoutProfile: 'inline_sentence',
+      isBlankOnlyTemplate: false,
+    });
+    expect(blankBorderWidth).toBe(`${DEFAULT_LAYOUT_LIMITS.blankUnderlineWidthPx}px`);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// legendMaxChars — uses resolved limits so overrides are respected
+// ---------------------------------------------------------------------------
+describe('legendMaxChars', () => {
+  it('defaults to DEFAULT_LAYOUT_LIMITS.legendMaxChars', () => {
+    const { legendMaxChars } = computeLayoutStyle({
+      ...base,
+      layoutProfile: '',
+      isBlankOnlyTemplate: false,
+    });
+    expect(legendMaxChars).toBe(DEFAULT_LAYOUT_LIMITS.legendMaxChars);
+  });
+
+  it('configuredLimits override is respected', () => {
+    const { legendMaxChars } = computeLayoutStyle({
+      ...base,
+      layoutProfile: '',
+      isBlankOnlyTemplate: false,
+      configuredLimits: { legendMaxChars: 60 },
+    });
+    expect(legendMaxChars).toBe(60);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// limit resolution order: defaults < configuredLimits < profile preset < custom preset
+// ---------------------------------------------------------------------------
+describe('limit resolution order', () => {
+  it('profile preset overrides configuredLimits', () => {
+    // audio_blank_only preset sets choiceGroupGapRem: 1; configured sets it to 0.1
+    const { rootStyle } = computeLayoutStyle({
+      ...base,
+      layoutProfile: 'audio_blank_only',
+      isBlankOnlyTemplate: false,
+      configuredLimits: { choiceGroupGapRem: 0.1 },
+    });
+    expect(rootStyle).toContain('--mpb-choice-group-gap:1rem');
+  });
+
+  it('customProfilePresets override the built-in profile preset', () => {
+    const { rootStyle } = computeLayoutStyle({
+      ...base,
+      layoutProfile: 'audio_blank_only',
+      isBlankOnlyTemplate: false,
+      customProfilePresets: { audio_blank_only: { choiceGroupGapRem: 2 } },
+    });
+    expect(rootStyle).toContain('--mpb-choice-group-gap:2rem');
+  });
+
+  it('ignores customProfilePresets for a different profile', () => {
+    const { rootStyle } = computeLayoutStyle({
+      ...base,
+      layoutProfile: 'audio_blank_only',
+      isBlankOnlyTemplate: false,
+      customProfilePresets: { token_sequence: { choiceGroupGapRem: 99 } },
+    });
+    // audio_blank_only preset value (1) should win, not 99
+    expect(rootStyle).toContain('--mpb-choice-group-gap:1rem');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// rootStyle contains all expected CSS var groups
+// ---------------------------------------------------------------------------
+describe('rootStyle structure', () => {
+  it('includes blank, choice, audio, and grid vars', () => {
+    const { rootStyle } = computeLayoutStyle({
+      ...base,
+      layoutProfile: '',
+      isBlankOnlyTemplate: false,
+    });
+    expect(rootStyle).toContain('--mpb-blank-standalone-width:');
+    expect(rootStyle).toContain('--mpb-choice-width-px:');
+    expect(rootStyle).toContain('--mpb-listen-button-size:');
+    expect(rootStyle).toContain('--mpb-stimulus-grid-column-gap:');
+    expect(rootStyle).toContain('--mpb-token-grid-column-gap:');
+    expect(rootStyle).toContain('--mpb-inline-grid-column-gap:');
+  });
+
+  it('appends correctAnswerStyleVars at the end', () => {
+    const { rootStyle } = computeLayoutStyle({
+      ...base,
+      layoutProfile: '',
+      isBlankOnlyTemplate: false,
+      correctAnswerStyleVars: '--pie-foo:bar',
+    });
+    expect(rootStyle).toMatch(/--pie-foo:bar$/);
+  });
+});

package/src/delivery/computeLayoutStyle.ts

@@ -0,0 +1,128 @@
+import { type LayoutLimits, DEFAULT_LAYOUT_LIMITS } from '../shared/layoutLimits';
+export type { LayoutLimits };
+export { DEFAULT_LAYOUT_LIMITS };
+
+/**
+ * Maps every LayoutLimits key (except legendMaxChars, which is a return value not a CSS var)
+ * to its --mpb-* CSS variable name and CSS unit.
+ * Add a single entry here when adding a new layout limit.
+ */
+export const CSS_VAR_SPEC: Record<
+  Exclude<keyof LayoutLimits, 'legendMaxChars'>,
+  { varName: string; unit: string }
+> = {
+  blankStandaloneWidthRem: { varName: '--mpb-blank-standalone-width', unit: 'rem' },
+  blankWideWidthRem: { varName: '--mpb-blank-wide-width', unit: 'rem' },
+  blankUnderlineWidthPx: { varName: '--mpb-blank-underline-width', unit: 'px' },
+  blankUnderlineWideWidthPx: { varName: '--mpb-blank-underline-wide-width', unit: 'px' },
+  horizontalChoiceWidthPx: { varName: '--mpb-choice-width-px', unit: 'px' },
+  horizontalChoiceWidthVw: { varName: '--mpb-choice-width-vw', unit: 'vw' },
+  horizontalChoiceTileMinHeightRem: { varName: '--mpb-choice-tile-min-height', unit: 'rem' },
+  horizontalChoiceContentMinHeightRem: { varName: '--mpb-choice-content-min-height', unit: 'rem' },
+  choiceImageMaxHeightRem: { varName: '--mpb-choice-image-max-height', unit: 'rem' },
+  selectedImageMaxHeightRem: { varName: '--mpb-selected-image-max-height', unit: 'rem' },
+  choiceGroupGapRem: { varName: '--mpb-choice-group-gap', unit: 'rem' },
+  choiceRowGapRem: { varName: '--mpb-choice-row-gap', unit: 'rem' },
+  horizontalChoiceRadioTopMarginRem: {
+    varName: '--mpb-horizontal-choice-radio-top-margin',
+    unit: 'rem',
+  },
+  narrowHorizontalChoiceMaxWidthPx: { varName: '--mpb-narrow-choice-max-width', unit: 'px' },
+  toggleButtonGapRem: { varName: '--mpb-toggle-button-gap', unit: 'rem' },
+  listenButtonSizePx: { varName: '--mpb-listen-button-size', unit: 'px' },
+  audioBlankTemplateMarginTopRem: { varName: '--mpb-audio-blank-template-margin-top', unit: 'rem' },
+  audioBlankTemplateMarginBottomRem: {
+    varName: '--mpb-audio-blank-template-margin-bottom',
+    unit: 'rem',
+  },
+  audioInstructionsMaxWidthPx: { varName: '--mpb-audio-instructions-max-width', unit: 'px' },
+  stimulusMinColumnPx: { varName: '--mpb-stimulus-min-column', unit: 'px' },
+  textMinColumnPx: { varName: '--mpb-text-min-column', unit: 'px' },
+  stimulusGridColumnGapRem: { varName: '--mpb-stimulus-grid-column-gap', unit: 'rem' },
+  stimulusGridRowGapRem: { varName: '--mpb-stimulus-grid-row-gap', unit: 'rem' },
+  stimulusSentenceMarginTopRem: { varName: '--mpb-stimulus-sentence-margin-top', unit: 'rem' },
+  stimulusChoicesMarginTopRem: { varName: '--mpb-stimulus-choices-margin-top', unit: 'rem' },
+  tokenGridColumnGapRem: { varName: '--mpb-token-grid-column-gap', unit: 'rem' },
+  tokenGridRowGapRem: { varName: '--mpb-token-grid-row-gap', unit: 'rem' },
+  tokenTemplateMarginTopRem: { varName: '--mpb-token-template-margin-top', unit: 'rem' },
+  tokenInlineTokenGapRem: { varName: '--mpb-token-inline-token-gap', unit: 'rem' },
+  tokenChoicesMarginTopRem: { varName: '--mpb-token-choices-margin-top', unit: 'rem' },
+  inlineGridColumnGapRem: { varName: '--mpb-inline-grid-column-gap', unit: 'rem' },
+  inlineGridRowGapRem: { varName: '--mpb-inline-grid-row-gap', unit: 'rem' },
+  inlineTemplateMarginTopRem: { varName: '--mpb-inline-template-margin-top', unit: 'rem' },
+  inlineChoicesMarginTopRem: { varName: '--mpb-inline-choices-margin-top', unit: 'rem' },
+};
+
+export const DEFAULT_LAYOUT_PROFILE_PRESETS: Record<string, Partial<LayoutLimits>> = {
+  audio_blank_only: {
+    blankWideWidthRem: 10,
+    blankUnderlineWideWidthPx: 6,
+    horizontalChoiceTileMinHeightRem: 11.25,
+    horizontalChoiceContentMinHeightRem: 9.375,
+    choiceGroupGapRem: 1,
+    audioBlankTemplateMarginBottomRem: 1.875,
+  },
+  stimulus_image_blank: {
+    blankWideWidthRem: 10,
+    blankUnderlineWideWidthPx: 6,
+  },
+  token_sequence: {
+    blankStandaloneWidthRem: 7,
+    blankUnderlineWideWidthPx: 6,
+  },
+};
+
+export interface LayoutStyleResult {
+  rootStyle: string;
+  blankWidth: string;
+  blankBorderWidth: string;
+  legendMaxChars: number;
+}
+
+export function computeLayoutStyle(params: {
+  layoutProfile: string;
+  isBlankOnlyTemplate: boolean;
+  configuredLimits: unknown;
+  customProfilePresets: unknown;
+  correctAnswerStyleVars: string;
+}): LayoutStyleResult {
+  const { layoutProfile, isBlankOnlyTemplate, correctAnswerStyleVars } = params;
+
+  const configured =
+    params.configuredLimits && typeof params.configuredLimits === 'object'
+      ? (params.configuredLimits as Partial<LayoutLimits>)
+      : {};
+  const customPresets =
+    params.customProfilePresets && typeof params.customProfilePresets === 'object'
+      ? (params.customProfilePresets as Record<string, unknown>)
+      : {};
+  const customForProfile =
+    customPresets[layoutProfile] && typeof customPresets[layoutProfile] === 'object'
+      ? (customPresets[layoutProfile] as Partial<LayoutLimits>)
+      : {};
+  const profilePreset: Partial<LayoutLimits> = {
+    ...(DEFAULT_LAYOUT_PROFILE_PRESETS[layoutProfile] ?? {}),
+    ...customForProfile,
+  };
+  const l: LayoutLimits = { ...DEFAULT_LAYOUT_LIMITS, ...configured, ...profilePreset };
+
+  const wideBlankProfiles = ['audio_blank_only', 'stimulus_image_blank'];
+  const wideUnderlineProfiles = ['audio_blank_only', 'stimulus_image_blank', 'token_sequence'];
+
+  const blankWidth = wideBlankProfiles.includes(layoutProfile)
+    ? `${l.blankWideWidthRem}rem`
+    : isBlankOnlyTemplate
+      ? `${l.blankStandaloneWidthRem}rem`
+      : 'auto';
+
+  const blankBorderWidth = wideUnderlineProfiles.includes(layoutProfile)
+    ? `${l.blankUnderlineWideWidthPx}px`
+    : `${l.blankUnderlineWidthPx}px`;
+
+  const cssVars = (Object.keys(CSS_VAR_SPEC) as (keyof typeof CSS_VAR_SPEC)[]).map(
+    (key) => `${CSS_VAR_SPEC[key].varName}:${l[key]}${CSS_VAR_SPEC[key].unit}`
+  );
+  const rootStyle = [...cssVars, correctAnswerStyleVars].join(';');
+
+  return { rootStyle, blankWidth, blankBorderWidth, legendMaxChars: l.legendMaxChars };
+}