Can string modulify be provided by the dev-server?

[samreid]

In phetsims/perennial#456 I added a watch script that automatically modulifies on yaml modification. @brent-phet and @jonathanolson are also discussing adding a step to phettest that designers can commit changes to yaml, and phettest will automatically grunt modulify. I was wondering about another path that may streamline the process even more, if the grunt dev-server can automatically "transpile" the file inline during serving. This could give the same benefits we get from the inline transpiler (do not need to remember to run the task, do not need a watch process, etc).

Some cases and caveats:

• phettest does not run on grunt dev-server (yet). If it did, designers could push yaml changes and see the effect right away
• We still need the Fluent and JSON artifacts for build publications. So we could add that step during grunt build
• If grunt build automatically modulifies, then maybe phettest "build" could be used for designers contributing/testing yaml files.
• It would be great if rosetta could use the yaml files directly too, instead of needing the json

I originally skipped this since it took 0.5s to run grunt modulify. But I see that running grunt modulify in an already running node, only costs about 18ms, so it is likely fine to inline.

[samreid]

With this patch from codex, I can change YAML and refresh the browser to get new strings. No modulify needed.

Here is the prompt:

▌Observe that js/grunt/modulify/modulify.ts creates a *.json and *.ts files, particularly for strings. We would like to
▌add this behavior to the js/grunt/tasks/dev-server.ts so that when those files are requested, it automatically
▌"modulifies" and "transpiles" in-memory. We are limiting our focus to the strings and outputs that come from the *.yaml
▌file. For instance, in the membrane-transport app, /Users/reids/phet/root/membrane-transport/membrane-transport-
▌strings_en.yaml is the ground truth, and modulify creates: /Users/reids/phet/root/membrane-transport/membrane-
▌transport-strings_en.json and /Users/reids/phet/root/membrane-transport/js/MembraneTransportStrings.ts and /Users/
▌reids/phet/root/membrane-transport/js/MembraneTransportFluent.ts. We must streamline development so the user can
▌change the yaml without having to run "modulify" manually or via a watch process. So change the dev-server, when there
▌is a request for any of those 3 file patterns, it modulifies on demand and serves the result. Do not cache. console.log
▌timing information so we can make sure it is acceptably fast.

Details

Subject: [PATCH] Make the slots wrap, see https://github.com/phetsims/membrane-transport/issues/432
---
Index: js/grunt/modulify/lib/strings.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/grunt/modulify/lib/strings.ts b/js/grunt/modulify/lib/strings.ts
new file mode 100644
--- /dev/null	(date 1756750161895)
+++ b/js/grunt/modulify/lib/strings.ts	(date 1756750161895)
@@ -0,0 +1,398 @@
+// Copyright 2025, University of Colorado Boulder
+
+/**
+ * Pure utility functions to generate string-related artifacts in-memory so they can be reused by
+ * both the modulify task (disk-writing) and the dev-server (on-demand, no caching).
+ */
+
+import yaml from 'js-yaml';
+import _ from 'lodash';
+import IntentionalAny from '../../../../../phet-core/js/types/IntentionalAny.js';
+import ChipperStringUtils from '../../../common/ChipperStringUtils.js';
+import pascalCase from '../../../common/pascalCase.js';
+import { getFluentParamsFromIndex, NUMBER_LITERAL, ParamInfo, parseFluentToMap } from '../getFluentParams.js';
+
+// ---------------- YAML → JSON (strings_en.json) ----------------
+
+export const safeLoadYaml = ( yamlContents: string ): IntentionalAny => {
+  return yaml.load( yamlContents, { schema: yaml.FAILSAFE_SCHEMA } );
+};
+
+export function nestJSONStringValues( input: IntentionalAny ): IntentionalAny {
+  if ( typeof input === 'string' ) {
+    const replacedString = ChipperStringUtils.replaceFluentReferences( input );
+    return { value: replacedString };
+  }
+  else if ( Array.isArray( input ) ) {
+    return input.map( item => nestJSONStringValues( item ) );
+  }
+  else if ( input !== null && typeof input === 'object' ) {
+    const result: Record<string, IntentionalAny> = {};
+    const inputKeys = Object.keys( input );
+
+    for ( const key of inputKeys ) {
+      if ( key.endsWith( '__simMetadata' ) || key.endsWith( '__deprecated' ) || key.endsWith( '__comment' ) ) {
+        const suffixes = [ '__simMetadata', '__deprecated', '__comment' ] as const;
+        const suffix = suffixes.find( s => key.endsWith( s ) );
+        const originalKey = key.substring( 0, key.length - ( suffix ? suffix.length : 0 ) );
+        if ( inputKeys.includes( originalKey ) ) {
+          continue;
+        }
+        else {
+          console.warn( `Orphaned ${suffix} key found and skipped: ${key}` );
+          continue;
+        }
+      }
+
+      let processedValue = nestJSONStringValues( ( input as Record<string, IntentionalAny> )[ key ] );
+
+      const metadataKey = `${key}__simMetadata`;
+      if ( Object.prototype.hasOwnProperty.call( input, metadataKey ) ) {
+        const metadataObject = ( input as Record<string, IntentionalAny> )[ metadataKey ];
+        if ( typeof processedValue === 'object' && processedValue !== null && !Array.isArray( processedValue ) ) {
+          ( processedValue as Record<string, IntentionalAny> ).simMetadata = metadataObject;
+        }
+        else {
+          processedValue = { value: processedValue, simMetadata: metadataObject };
+        }
+      }
+
+      const deprecatedKey = `${key}__deprecated`;
+      if ( Object.prototype.hasOwnProperty.call( input, deprecatedKey ) ) {
+        const deprecatedValue = ( input as Record<string, IntentionalAny> )[ deprecatedKey ];
+        if ( deprecatedValue !== 'true' ) {
+          throw new Error( `__deprecated must be true, but found: ${deprecatedValue} for key: ${key}` );
+        }
+        if ( typeof processedValue === 'object' && processedValue !== null && !Array.isArray( processedValue ) ) {
+          ( processedValue as Record<string, IntentionalAny> ).deprecated = true;
+        }
+        else {
+          processedValue = { value: processedValue, deprecated: true };
+        }
+      }
+
+      const commentKey = `${key}__comment`;
+      if ( Object.prototype.hasOwnProperty.call( input, commentKey ) ) {
+        const commentValue = ( input as Record<string, IntentionalAny> )[ commentKey ];
+        if ( typeof processedValue === 'object' && processedValue !== null && !Array.isArray( processedValue ) ) {
+          ( processedValue as Record<string, IntentionalAny> )._comment = commentValue;
+        }
+        else {
+          processedValue = { value: processedValue, _comment: commentValue };
+        }
+      }
+
+      ( result as Record<string, IntentionalAny> )[ key ] = processedValue;
+    }
+    return result;
+  }
+  return input;
+}
+
+export function buildStringsJsonFromYamlText( yamlText: string ): string {
+  const parsed = safeLoadYaml( yamlText );
+  const nested = nestJSONStringValues( parsed );
+  return JSON.stringify( nested, null, 2 );
+}
+
+// ---------------- Strings Module (PascalRepoStrings.ts) ----------------
+
+// Simple replace helper (mirrors modulify.ts replace)
+const replaceAll = ( string: string, search: string, replacement: string ): string => string.split( search ).join( replacement );
+
+export function getStringTypesText( jsonObject: IntentionalAny, packageObject: IntentionalAny ): string {
+  const all: IntentionalAny[] = [];
+
+  const visit = ( level: IntentionalAny, pathArr: string[] ) => {
+    Object.keys( level ).forEach( key => {
+      if ( key !== '_comment' ) {
+        if ( level[ key ].value && typeof level[ key ].value === 'string' ) {
+          if ( !level[ key ].deprecated ) {
+            all.push( { path: [ ...pathArr, key ], value: level[ key ].value } );
+          }
+        }
+        else {
+          visit( level[ key ], [ ...pathArr, key ] );
+        }
+      }
+    } );
+  };
+  visit( jsonObject, [] );
+
+  const structure: IntentionalAny = {};
+  for ( const allElement of all ) {
+    const path = allElement.path as string[];
+    let level = structure;
+    for ( let k = 0; k < path.length; k++ ) {
+      const pathElement = path[ k ];
+      const tokens = pathElement.split( '.' );
+      for ( let m = 0; m < tokens.length; m++ ) {
+        const token = tokens[ m ];
+        if ( k === path.length - 1 && m === tokens.length - 1 ) {
+          if ( !( packageObject.phet && packageObject.phet.simFeatures && packageObject.phet.simFeatures.supportsDynamicLocale ) ) {
+            level[ token ] = '{{STRING}}';
+          }
+          level[ `${token}StringProperty` ] = '{{STRING_PROPERTY}}';
+        }
+        else {
+          level[ token ] = level[ token ] || {};
+          level = level[ token ];
+        }
+      }
+    }
+  }
+
+  let text = JSON.stringify( structure, null, 2 );
+  text = replaceAll( text, '"', '\'' );
+  text = replaceAll( text, '\'{{STRING}}\'', 'string' );
+  text = replaceAll( text, '\'{{STRING_PROPERTY}}\'', 'LocalizedStringProperty' );
+  text = replaceAll( text, ': string\n', ': string;\n' );
+  text = replaceAll( text, ': LocalizedStringProperty\n', ': LocalizedStringProperty;\n' );
+  text = replaceAll( text, ',', ';' );
+  return text;
+}
+
+export function getStringModuleText( repo: string, jsonObject: IntentionalAny, packageObject: IntentionalAny ): string {
+  const namespace = _.camelCase( repo );
+  const stringModuleName = `${pascalCase( repo )}Strings`;
+
+  const body = `
+/* eslint-disable */
+/* @formatter:off */
+
+/**
+ * Auto-generated from modulify (dev-server), DO NOT manually modify.
+ */
+
+import getStringModule from '../../chipper/js/browser/getStringModule.js';
+import type LocalizedStringProperty from '../../chipper/js/browser/LocalizedStringProperty.js';
+import ${namespace} from './${namespace}.js';
+
+type StringsType = ${getStringTypesText( jsonObject, packageObject )};
+
+const ${stringModuleName} = getStringModule( '${packageObject.phet?.requirejsNamespace}' ) as StringsType;
+
+${namespace}.register( '${stringModuleName}', ${stringModuleName} );
+
+export default ${stringModuleName};
+`;
+  return body;
+}
+
+// ---------------- Fluent Types (PascalRepoFluent.ts) ----------------
+
+type Leaf = { pathArr: string[]; value: string };
+type Obj = Record<string, IntentionalAny>;
+const IDENT = /^[A-Za-z_$][\w$]*$/;
+const indent = ( lvl: number, spaces = 2 ): string => ' '.repeat( lvl * spaces );
+
+function collectLeaves( obj: Obj, pathArr: string[] = [] ): Leaf[] {
+  const leaves: Leaf[] = [];
+  for ( const [ key, val ] of Object.entries( obj ) ) {
+    if ( val !== null && typeof val === 'object' && !Array.isArray( val ) ) {
+      leaves.push( ...collectLeaves( val as Obj, [ ...pathArr, key ] ) );
+    }
+    else {
+      const replacedString = ChipperStringUtils.replaceFluentReferences( val as string );
+      leaves.push( { pathArr: [ ...pathArr, key ], value: replacedString } );
+    }
+  }
+  return leaves;
+}
+
+function createFluentKey( pathArr: string[] ): string {
+  return pathArr.join( '_' ).replace( /[^a-zA-Z0-9]/g, '_' );
+}
+
+const createAccessor = ( pathArr: string[] ): string => {
+  const parts = pathArr.slice();
+  const lastIdx = parts.length - 1;
+  parts[ lastIdx ] = parts[ lastIdx ] + 'StringProperty';
+  return parts.join( '.' );
+};
+
+function expandDottedKeys( object: Record<string, unknown> ): Record<string, unknown> {
+  const newObject: Record<string, unknown> = {};
+  Object.entries( object ).forEach( ( [ rawKey, value ] ) => {
+    const parts = rawKey.split( '.' );
+    let cursor: Record<string, unknown> = newObject;
+    for ( let i = 0; i < parts.length - 1; i++ ) {
+      const part = parts[ i ];
+      if ( cursor[ part ] === undefined || cursor[ part ] === null ) {
+        cursor[ part ] = {};
+      }
+      cursor = cursor[ part ] as Record<string, unknown>;
+    }
+    const last = parts[ parts.length - 1 ];
+    cursor[ last ] = ( value && typeof value === 'object' && !Array.isArray( value ) ) ? expandDottedKeys( value as Record<string, unknown> ) : value;
+  } );
+  return newObject;
+}
+
+function buildFluentObject( obj: Obj, typeInfoMap: Map<string, ParamInfo[]>, pascalCaseRepo: string, comments: IntentionalAny[] = [], pathArr: string[] = [], lvl = 1 ): string {
+  obj = expandDottedKeys( obj ) as Obj;
+  const lines = [ '{' ];
+  const entries = Object.entries( obj );
+  const getFullPath = ( key: string ) => [ ...pathArr, key ].join( '.' );
+  const levelComments = comments.filter( ( comment: any ) => {
+    if ( !comment.associatedKey ) { return false; }
+    const associatedKeyPath = comment.associatedKey;
+    return entries.some( ( [ key ] ) => {
+      const fullPath = getFullPath( key );
+      return associatedKeyPath === key || associatedKeyPath === fullPath;
+    } );
+  } );
+  const commentsByKey = new Map<string, any[]>();
+  levelComments.forEach( ( comment: any ) => {
+    if ( comment.associatedKey ) {
+      const matchingKey = entries.find( ( [ key ] ) => {
+        const fullPath = getFullPath( key );
+        return comment.associatedKey === key || comment.associatedKey === fullPath;
+      } )?.[ 0 ];
+      if ( matchingKey ) {
+        if ( !commentsByKey.has( matchingKey ) ) { commentsByKey.set( matchingKey, [] ); }
+        commentsByKey.get( matchingKey )!.push( comment );
+      }
+    }
+  } );
+  let commentCounter = 0;
+  entries.forEach( ( [ key, val ], idx ) => {
+    const keyComments = commentsByKey.get( key );
+    if ( keyComments ) {
+      keyComments.forEach( ( comment: any ) => {
+        const commentKey = `_comment_${commentCounter}`;
+        const commentData = JSON.stringify( comment );
+        lines.push( `${indent( lvl )}${commentKey}: new FluentComment( ${commentData} ),` );
+        commentCounter++;
+      } );
+    }
+    const safeKey = IDENT.test( key ) ? key : JSON.stringify( key );
+    const comma = idx < entries.length - 1 ? ',' : '';
+    if ( val !== null && typeof val === 'object' && !Array.isArray( val ) ) {
+      const sub = buildFluentObject( val as Obj, typeInfoMap, pascalCaseRepo, comments, [ ...pathArr, key ], lvl + 1 );
+      lines.push( `${indent( lvl )}${safeKey}: ${sub}${comma}` );
+    }
+    else {
+      const id = createFluentKey( [ ...pathArr, key ] );
+      const paramInfo = typeInfoMap.get( id );
+      const stringPropertyKey = IDENT.test( key + 'StringProperty' ) ? key + 'StringProperty' : JSON.stringify( key + 'StringProperty' );
+      const accessor = createAccessor( [ ...pathArr, key ] );
+      const getter = `_.get( ${pascalCaseRepo}Strings, '${accessor}' )`;
+      if ( ChipperStringUtils.isLegacyStringPattern( val ) || !accessor.startsWith( 'a11y.' ) ) {
+        lines.push( `${indent( lvl )}${stringPropertyKey}: ${getter}${comma}` );
+      }
+      else if ( ( paramInfo ?? [] ).length === 0 ) {
+        lines.push( `${indent( lvl )}${stringPropertyKey}: new FluentConstant( fluentSupport.bundleProperty, '${id}', ${getter} )${comma}` );
+      }
+      else {
+        function generateTypeDefinition( schema: ParamInfo[] ): string {
+          const properties = schema.map( prop => {
+            const name = prop.name;
+            let typeString;
+            if ( prop.variants && Array.isArray( prop.variants ) && prop.variants.length > 0 ) {
+              const variantLiterals = prop.variants.map( v => typeof v === 'number' ? v : ( typeof v === 'string' ? `'${v}'` : ( v.type === NUMBER_LITERAL ? `number | '${v.value}'` : 'never' ) ) ).join( ' | ' );
+              typeString = `${variantLiterals} | TReadOnlyProperty<${variantLiterals}>`;
+            }
+            else {
+              typeString = 'FluentVariable';
+            }
+            return `${name}: ${typeString}`;
+          } );
+          return `{ ${properties.join( ', ' )} }`;
+        }
+        const T = generateTypeDefinition( paramInfo! );
+        lines.push( `${indent( lvl )}${safeKey}: new FluentPattern<${T}>( fluentSupport.bundleProperty, '${id}', ${getter}, ${JSON.stringify( paramInfo )} )${comma}` );
+      }
+    }
+  } );
+  lines.push( `${indent( lvl - 1 )}}` );
+  return lines.join( '\n' );
+}
+
+function parseYamlComments( yamlText: string ): any[] {
+  const lines = yamlText.split( '\n' );
+  const comments: any[] = [];
+  for ( let i = 0; i < lines.length; i++ ) {
+    const line = lines[ i ].trim();
+    if ( line.startsWith( '#' ) ) {
+      const comment = line.substring( 1 ).trim();
+      let associatedKey: string | undefined;
+      for ( let j = i + 1; j < lines.length; j++ ) {
+        const nextLine = lines[ j ].trim();
+        if ( nextLine && !nextLine.startsWith( '#' ) ) {
+          const colonIndex = nextLine.indexOf( ':' );
+          if ( colonIndex > 0 ) {
+            associatedKey = nextLine.substring( 0, colonIndex ).trim();
+          }
+          break;
+        }
+      }
+      comments.push( { comment, associatedKey } );
+    }
+  }
+  return comments;
+}
+
+export function getFluentTypesText( repo: string, yamlText: string ): string {
+  const pascalCaseRepo = pascalCase( repo );
+  const camelCaseRepo = _.camelCase( repo );
+  const yamlObj = safeLoadYaml( yamlText ) as Obj;
+  const comments = parseYamlComments( yamlText );
+  const leaves = collectLeaves( yamlObj );
+  const allKeys = leaves.map( leaf => createFluentKey( leaf.pathArr ) );
+  allKeys.forEach( key => {
+    const count = allKeys.filter( k => k === key ).length;
+    if ( count !== 1 ) {
+      throw new Error( `Duplicate key found in YAML: ${key} appears ${count} times` );
+    }
+  } );
+  const filteredLeaves = leaves.filter( leaf => !ChipperStringUtils.isLegacyStringPattern( leaf.value ) );
+  const ftlContent = filteredLeaves.map( leaf => `${createFluentKey( leaf.pathArr )} = ${leaf.value}` ).join( '\n' );
+  // Build param info
+  const entryIndex = parseFluentToMap( ftlContent );
+  const keyToTypeInfoMap = new Map<string, ParamInfo[]>();
+  leaves.forEach( ( { pathArr } ) => {
+    const fluentKey = createFluentKey( pathArr );
+    keyToTypeInfoMap.set( fluentKey, getFluentParamsFromIndex( entryIndex, fluentKey ) );
+  } );
+  const fluentObjectLiteral = buildFluentObject( yamlObj, keyToTypeInfoMap, pascalCaseRepo, comments, [], 1 );
+
+  const fileContents = `
+/* eslint-disable */
+/* @formatter:off */
+
+import { TReadOnlyProperty } from '../../axon/js/TReadOnlyProperty.js';
+import type { FluentVariable } from '../../chipper/js/browser/FluentPattern.js';
+import FluentPattern from '../../chipper/js/browser/FluentPattern.js';
+import FluentContainer from '../../chipper/js/browser/FluentContainer.js';
+import FluentConstant from '../../chipper/js/browser/FluentConstant.js';
+import FluentComment from '../../chipper/js/browser/FluentComment.js';
+import ${camelCaseRepo} from './${camelCaseRepo}.js';
+import ${pascalCaseRepo}Strings from './${pascalCaseRepo}Strings.js';
+
+const fluentKeyToStringPropertyMap = new Map();
+const addToMapIfDefined = ( key: string, path: string ) => {
+  const sp = _.get( ${pascalCaseRepo}Strings, path );
+  if ( sp ) { fluentKeyToStringPropertyMap.set( key, sp ); }
+};
+
+${filteredLeaves.map( leaf => `addToMapIfDefined( '${createFluentKey( leaf.pathArr )}', '${createAccessor( leaf.pathArr )}' );` ).join( '\n' )}
+
+const createFluentFile = (): string => {
+  let ftl = '';
+  for ( const [ key, stringProperty ] of fluentKeyToStringPropertyMap.entries() ) {
+    ftl += \`\${key} = \${stringProperty.value.replace('\\n','\\n ')}\\n\`;
+  }
+  return ftl;
+};
+
+const fluentSupport = new FluentContainer( createFluentFile, Array.from( fluentKeyToStringPropertyMap.values() ) );
+
+const ${pascalCaseRepo}Fluent = ${fluentObjectLiteral};
+
+export default ${pascalCaseRepo}Fluent;
+
+${camelCaseRepo}.register('${pascalCaseRepo}Fluent', ${pascalCaseRepo}Fluent);
+`;
+  return fileContents;
+}
Index: js/grunt/modulify/createStringModule.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/grunt/modulify/createStringModule.ts b/js/grunt/modulify/createStringModule.ts
--- a/js/grunt/modulify/createStringModule.ts	(revision 3083943ebc58f4c601376743b3de62433b389dd7)
+++ b/js/grunt/modulify/createStringModule.ts	(date 1756746740118)
@@ -7,127 +7,34 @@
  * @author Jesse Greenberg (PhET Interactive Simulations)
  */
 
-import assert from 'assert';
 import fs, { readFileSync } from 'fs';
-import _ from 'lodash';
 import writeFileAndGitAdd from '../../../../perennial-alias/js/common/writeFileAndGitAdd.js';
-import IntentionalAny from '../../../../phet-core/js/types/IntentionalAny.js';
 import pascalCase from '../../common/pascalCase.js';
 import getCopyrightLineFromFileContents from '../getCopyrightLineFromFileContents.js';
-import { replace } from './modulify.js';
+import { getStringModuleText, getStringTypesText } from './lib/strings.js';
 
 const OFF = 'off';
 
 export default async ( repo: string ): Promise<void> => {
-
   const packageObject = JSON.parse( readFileSync( `../${repo}/package.json`, 'utf8' ) );
+  const jsonObject = JSON.parse( readFileSync( `../${repo}/${repo}-strings_en.json`, 'utf8' ) );
   const stringModuleName = `${pascalCase( repo )}Strings`;
   const relativeStringModuleFile = `js/${stringModuleName}.ts`;
-  const stringModuleFileJS = `../${repo}/js/${stringModuleName}.js`;
-  const namespace = _.camelCase( repo );
 
-  if ( fs.existsSync( stringModuleFileJS ) ) {
-    console.log( 'Found JS string file in TS repo.  It should be deleted manually.  ' + stringModuleFileJS );
-  }
+  // Build the full file contents using the pure generator, but keep disk-specific header here
+  const body = getStringModuleText( repo, jsonObject, packageObject )
+    .replace( '/* @formatter:off */', `/* @formatter:${OFF} */` );
 
   const copyrightLine = await getCopyrightLineFromFileContents( repo, relativeStringModuleFile );
-  await writeFileAndGitAdd( repo, relativeStringModuleFile,
-    `${copyrightLine}
-
-/* eslint-disable */
-/* @formatter:${OFF} */
-
-/**
- * Auto-generated from modulify, DO NOT manually modify.
- */
-
-import getStringModule from '../../chipper/js/browser/getStringModule.js';
-import type LocalizedStringProperty from '../../chipper/js/browser/LocalizedStringProperty.js';
-import ${namespace} from './${namespace}.js';
-
-type StringsType = ${getStringTypes( repo )};
+  const full = `${copyrightLine}
+${body}`;
 
-const ${stringModuleName} = getStringModule( '${packageObject.phet.requirejsNamespace}' ) as StringsType;
-
-${namespace}.register( '${stringModuleName}', ${stringModuleName} );
-
-export default ${stringModuleName};
-` );
+  await writeFileAndGitAdd( repo, relativeStringModuleFile, full );
 };
 
-/**
- * Creates a *.d.ts file that represents the types of the strings for the repo.
- */
-const getStringTypes = ( repo: string ) => {
+// Keep a minimal dependency to ensure the template types can still be produced from JSON on disk if needed
+export const getStringTypes = ( repo: string ) => {
   const packageObject = JSON.parse( readFileSync( `../${repo}/package.json`, 'utf8' ) );
   const json = JSON.parse( readFileSync( `../${repo}/${repo}-strings_en.json`, 'utf8' ) );
-
-  // Track paths to all the keys with values.
-  const all: IntentionalAny[] = [];
-
-  // Recursively collect all of the paths to keys with values.
-  const visit = ( level: IntentionalAny, path: string[] ) => {
-    Object.keys( level ).forEach( key => {
-      if ( key !== '_comment' ) {
-        if ( level[ key ].value && typeof level[ key ].value === 'string' ) {
-
-          // Deprecated means that it is used by release branches, but shouldn't be used in new code, so keep it out of the type.
-          if ( !level[ key ].deprecated ) {
-            all.push( { path: [ ...path, key ], value: level[ key ].value } );
-          }
-        }
-        else {
-          visit( level[ key ], [ ...path, key ] );
-        }
-      }
-    } );
-  };
-  visit( json, [] );
-
-  // Transform to a new structure that matches the types we access at runtime.
-  const structure: IntentionalAny = {};
-  for ( let i = 0; i < all.length; i++ ) {
-    const allElement = all[ i ];
-    const path = allElement.path;
-    let level = structure;
-    for ( let k = 0; k < path.length; k++ ) {
-      const pathElement = path[ k ];
-      const tokens = pathElement.split( '.' );
-      for ( let m = 0; m < tokens.length; m++ ) {
-        const token = tokens[ m ];
-
-        assert( !token.includes( ';' ), `Token ${token} cannot include forbidden characters` );
-        assert( !token.includes( ',' ), `Token ${token} cannot include forbidden characters` );
-        assert( !token.includes( ' ' ), `Token ${token} cannot include forbidden characters` );
-
-        if ( k === path.length - 1 && m === tokens.length - 1 ) {
-          if ( !( packageObject.phet && packageObject.phet.simFeatures && packageObject.phet.simFeatures.supportsDynamicLocale ) ) {
-            level[ token ] = '{{STRING}}'; // instead of value = allElement.value
-          }
-          level[ `${token}StringProperty` ] = '{{STRING_PROPERTY}}';
-        }
-        else {
-          level[ token ] = level[ token ] || {};
-          level = level[ token ];
-        }
-      }
-    }
-  }
-
-  let text = JSON.stringify( structure, null, 2 );
-
-  // Use single quotes instead of the double quotes from JSON
-  text = replace( text, '"', '\'' );
-
-  text = replace( text, '\'{{STRING}}\'', 'string' );
-  text = replace( text, '\'{{STRING_PROPERTY}}\'', 'LocalizedStringProperty' );
-
-  // Add ; to the last in the list
-  text = replace( text, ': string\n', ': string;\n' );
-  text = replace( text, ': LocalizedStringProperty\n', ': LocalizedStringProperty;\n' );
-
-  // Use ; instead of ,
-  text = replace( text, ',', ';' );
-
-  return text;
-};
\ No newline at end of file
+  return getStringTypesText( json, packageObject );
+};
Index: js/grunt/tasks/dev-server.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/grunt/tasks/dev-server.ts b/js/grunt/tasks/dev-server.ts
--- a/js/grunt/tasks/dev-server.ts	(revision 3083943ebc58f4c601376743b3de62433b389dd7)
+++ b/js/grunt/tasks/dev-server.ts	(date 1756747106603)
@@ -34,6 +34,8 @@
 import serveIndex from 'serve-index';
 import dirname from '../../../../perennial-alias/js/common/dirname.js';
 import getOption, { getOptionIfProvided } from '../../../../perennial-alias/js/grunt/tasks/util/getOption.js';
+import pascalCase from '../../common/pascalCase.js';
+import { buildStringsJsonFromYamlText, getStringModuleText, getFluentTypesText } from '../modulify/lib/strings.js';
 
 const options = {
   port: getOptionIfProvided( 'port', 80 ),
@@ -265,6 +267,81 @@
   next();
 } );
 
+// 3.5 On-demand modulify for strings (no caching)
+app.use( async ( req, res, next ) => {
+  const originalPathname = req.path;
+  const parts = originalPathname.split( '/' ).filter( Boolean );
+  if ( parts.length < 2 ) { return next(); }
+
+  const repo = parts[ 0 ];
+  const pascal = pascalCase( repo );
+
+  const isStringsJson = parts.length === 2 && parts[ 1 ] === `${repo}-strings_en.json`;
+  const filename = parts[ parts.length - 1 ];
+  const isStringsTs = filename === `${pascal}Strings.ts`;
+  const isStringsJs = filename === `${pascal}Strings.js`;
+  const isFluentTs = filename === `${pascal}Fluent.ts`;
+  const isFluentJs = filename === `${pascal}Fluent.js`;
+
+  if ( !( isStringsJson || isStringsTs || isStringsJs || isFluentTs || isFluentJs ) ) {
+    return next();
+  }
+
+  const start = Date.now();
+  const yamlPath = path.join( STATIC_ROOT, repo, `${repo}-strings_en.yaml` );
+  try {
+    const yamlText = await fs.readFile( yamlPath, 'utf8' );
+
+    if ( isStringsJson ) {
+      const jsonText = buildStringsJsonFromYamlText( yamlText );
+      await saveToDist( originalPathname, jsonText );
+      console.log( `[dev-server] modulify ${originalPathname} in ${Date.now() - start}ms` );
+      return res.type( 'application/json' ).send( jsonText );
+    }
+
+    // Load package.json and derived JSON object for module generation
+    const packageJsonPath = path.join( STATIC_ROOT, repo, 'package.json' );
+    const packageObject = JSON.parse( await fs.readFile( packageJsonPath, 'utf8' ) );
+
+    if ( isStringsTs || isStringsJs ) {
+      const jsonText = buildStringsJsonFromYamlText( yamlText );
+      const jsonObject = JSON.parse( jsonText );
+      const tsText = getStringModuleText( repo, jsonObject, packageObject );
+      if ( isStringsTs ) {
+        await saveToDist( originalPathname, tsText );
+        console.log( `[dev-server] modulify ${originalPathname} in ${Date.now() - start}ms` );
+        return res.type( 'application/typescript' ).send( tsText );
+      }
+      else {
+        const compiled = await transpileTS( tsText, path.join( STATIC_ROOT, repo, `js/${pascal}Strings.ts` ), originalPathname );
+        await saveToDist( originalPathname, compiled );
+        console.log( `[dev-server] modulify ${originalPathname} in ${Date.now() - start}ms` );
+        return res.type( 'application/javascript' ).send( compiled );
+      }
+    }
+
+    if ( isFluentTs || isFluentJs ) {
+      const tsText = getFluentTypesText( repo, yamlText );
+      if ( isFluentTs ) {
+        await saveToDist( originalPathname, tsText );
+        console.log( `[dev-server] modulify ${originalPathname} in ${Date.now() - start}ms` );
+        return res.type( 'application/typescript' ).send( tsText );
+      }
+      else {
+        const compiled = await transpileTS( tsText, path.join( STATIC_ROOT, repo, `js/${pascal}Fluent.ts` ), originalPathname );
+        await saveToDist( originalPathname, compiled );
+        console.log( `[dev-server] modulify ${originalPathname} in ${Date.now() - start}ms` );
+        return res.type( 'application/javascript' ).send( compiled );
+      }
+    }
+  }
+  catch( e ) {
+    // Fall through to next handlers if YAML or package.json not present
+    VERBOSE && console.log( `On-demand modulify skipped for ${originalPathname}: ${e instanceof Error ? e.message : e}` );
+  }
+  return next();
+} );
+
 // 4. Dynamic JavaScript bundling/transpiling Middleware
 app.use( async ( req, res, next ) => {
 
@@ -350,4 +427,4 @@
   console.log( `PhET Development Server listening at http://localhost:${options.port}/` );
   console.log( `Serving files from: ${STATIC_ROOT}` );
   SAVE_TO_DIST && console.log( `Will save generated files to: ${DIST_DEV_SERVER_DIR}` );
-} );
\ No newline at end of file
+} );
Index: js/grunt/modulify/convertStringsYamlToJson.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/grunt/modulify/convertStringsYamlToJson.ts b/js/grunt/modulify/convertStringsYamlToJson.ts
--- a/js/grunt/modulify/convertStringsYamlToJson.ts	(revision 3083943ebc58f4c601376743b3de62433b389dd7)
+++ b/js/grunt/modulify/convertStringsYamlToJson.ts	(date 1756746687440)
@@ -10,10 +10,8 @@
  */
 
 import fs from 'fs';
-import yaml from 'js-yaml';
 import writeFileAndGitAdd from '../../../../perennial-alias/js/common/writeFileAndGitAdd.js';
-import IntentionalAny from '../../../../phet-core/js/types/IntentionalAny.js';
-import ChipperStringUtils from '../../common/ChipperStringUtils.js';
+import { buildStringsJsonFromYamlText, safeLoadYaml, nestJSONStringValues } from './lib/strings.js';
 
 /**
  * @param repo - The name of a repo, e.g. 'joist'
@@ -21,16 +19,8 @@
 export default async ( repo: string ): Promise<void> => {
   const filePath = `../${repo}/${repo}-strings_en.yaml`;
   const yamlContents = fs.readFileSync( filePath, 'utf8' );
-
-  const parsed = safeLoadYaml( yamlContents );
-
-  // Recursively nest all string values and incorporate simMetadata.
-  const nested = nestJSONStringValues( parsed );
-
-  // Convert to a pretty-printed JSON string.
-  const jsonContents = JSON.stringify( nested, null, 2 );
+  const jsonContents = buildStringsJsonFromYamlText( yamlContents );
   const jsonFilename = `${repo}-strings_en.json`;
-
   await writeFileAndGitAdd( repo, jsonFilename, jsonContents );
 };
 
@@ -39,149 +29,5 @@
  * YAML Scalars are loaded as strings. Otherwise booleans and numbers would be loaded as their native types.
  * @param yamlContents
  */
-export const safeLoadYaml = ( yamlContents: string ): IntentionalAny => {
-  return yaml.load( yamlContents, { schema: yaml.FAILSAFE_SCHEMA } );
-};
-
-/**
- * Recursively processes a YAML-parsed structure:
- * - Wraps string values in an object: ` "string"` becomes `{ "value": "string" }`.
- * - For any key `originalKey`, if a corresponding `originalKey__simMetadata` key exists
- *   at the same level, its value is added as a `simMetadata` property to the object
- *   representing `originalKey`.
- * - For any key `originalKey`, if a corresponding `originalKey__deprecated` key exists
- *   at the same level with value 'true', a `deprecated: true` property is added to the object.
- *   An error is thrown if `__deprecated` has any value other than 'true'.
- * - For any key `originalKey`, if a corresponding `originalKey__comment` key exists
- *   at the same level, its value is added as a `_comment` property to the object.
- * - `__simMetadata`, `__deprecated`, and `__comment` keys themselves are not included 
- *   as top-level keys in the output.
- * - Arrays are processed element-wise. If an array itself has metadata, it will be
- *   wrapped like: `{ value: [processed elements], simMetadata: {...}, deprecated: true, _comment: "..." }`.
- * - Primitives (numbers, booleans, null) are returned as-is, unless they have metadata,
- *   in which case they are wrapped: `{ value: primitive, simMetadata: {...}, deprecated: true, _comment: "..." }`.
- *
- * @param input - The parsed YAML data (can be an object, array, string, or other primitive).
- * @returns The transformed JavaScript structure.
- */
-function nestJSONStringValues( input: IntentionalAny ): IntentionalAny {
-  // Base case 1: Input is a string
-  if ( typeof input === 'string' ) {
-
-    // This allows developers to reference messages with dot notation, which is not valid in Fluent.
-    // We replace dots with underscores so it matches the Fluent key format.
-    const replacedString = ChipperStringUtils.replaceFluentReferences( input );
-    return { value: replacedString };
-  }
-  // Base case 2: Input is an array
-  else if ( Array.isArray( input ) ) {
-    // Recursively process each element of the array
-    return input.map( item => nestJSONStringValues( item ) );
-  }
-  // Recursive step: Input is an object (but not null)
-  else if ( input !== null && typeof input === 'object' ) {
-    const result: Record<string, IntentionalAny> = {};
-    const inputKeys = Object.keys( input ); // Get own keys, which preserves order from yaml.load
-
-    for ( const key of inputKeys ) {
-      // If the key is a metadata key, check if its parent exists.
-      // If so, it will be handled when its parent is processed, so skip.
-      if ( key.endsWith( '__simMetadata' ) || key.endsWith( '__deprecated' ) || key.endsWith( '__comment' ) ) {
-        let originalKey = '';
-        let metadataType = '';
-        
-        if ( key.endsWith( '__simMetadata' ) ) {
-          originalKey = key.substring( 0, key.length - '__simMetadata'.length );
-          metadataType = '__simMetadata';
-        }
-        else if ( key.endsWith( '__deprecated' ) ) {
-          originalKey = key.substring( 0, key.length - '__deprecated'.length );
-          metadataType = '__deprecated';
-        }
-        else if ( key.endsWith( '__comment' ) ) {
-          originalKey = key.substring( 0, key.length - '__comment'.length );
-          metadataType = '__comment';
-        }
-        
-        if ( inputKeys.includes( originalKey ) ) {
-          continue; // This metadata will be picked up by the originalKey
-        }
-        else {
-          // Orphaned metadata key. Decide behavior: warn, error, or process as normal.
-          // For now, let's warn and skip, as it's not meant to be independent.
-          console.warn( `Orphaned ${metadataType} key found and skipped: ${key}` );
-          continue;
-        }
-      }
-
-      // Recursively process the value for the current key
-      let processedValue = nestJSONStringValues( input[ key ] );
-
-      // Check for corresponding __simMetadata for this key
-      const metadataKey = `${key}__simMetadata`;
-
-      // Here's why this is preferred over a simple obj.hasOwnProperty(prop):
-      // Avoids issues with shadowed hasOwnProperty: If obj itself has a property named hasOwnProperty (e.g., const obj = { foo: 1, hasOwnProperty: () => false }), then obj.hasOwnProperty('foo') would call the object's own (potentially incorrect) version. Object.prototype.hasOwnProperty.call(obj, 'foo') explicitly calls the original method from Object.prototype.
-      // Works with objects created via Object.create(null): Objects created with Object.create(null) do not inherit from Object.prototype and therefore don't have a hasOwnProperty method on them at all. obj.hasOwnProperty would throw an error, but Object.prototype.hasOwnProperty.call(obj, prop) still works.
-
-      // eslint-disable-next-line prefer-object-has-own
-      if ( Object.prototype.hasOwnProperty.call( input, metadataKey ) ) {
-        const metadataObject = input[ metadataKey ]; // This is the raw metadata, e.g., { phetioReadOnly: true }
-
-        // If processedValue is already a non-array object (i.e., from a string source or object source),
-        // we can add simMetadata directly to it.
-        if ( typeof processedValue === 'object' && processedValue !== null && !Array.isArray( processedValue ) ) {
-          processedValue.simMetadata = metadataObject;
-        }
-        else {
-          // If processedValue is an array or a primitive (number, boolean, null),
-          // it needs to be wrapped in an object to hold both its value and the simMetadata.
-          processedValue = { value: processedValue, simMetadata: metadataObject };
-        }
-      }
-
-      // Check for corresponding __deprecated for this key
-      const deprecatedKey = `${key}__deprecated`;
-      // eslint-disable-next-line prefer-object-has-own
-      if ( Object.prototype.hasOwnProperty.call( input, deprecatedKey ) ) {
-        const deprecatedValue = input[ deprecatedKey ];
-        
-        // Validate that __deprecated is only true
-        if ( deprecatedValue !== 'true' ) {
-          throw new Error( `__deprecated must be true, but found: ${deprecatedValue} for key: ${key}` );
-        }
-
-        // Ensure processedValue is an object that can hold the deprecated property
-        if ( typeof processedValue === 'object' && processedValue !== null && !Array.isArray( processedValue ) ) {
-          processedValue.deprecated = true;
-        }
-        else {
-          // Wrap primitive or array values
-          processedValue = { value: processedValue, deprecated: true };
-        }
-      }
-
-      // Check for corresponding __comment for this key
-      const commentKey = `${key}__comment`;
-      // eslint-disable-next-line prefer-object-has-own
-      if ( Object.prototype.hasOwnProperty.call( input, commentKey ) ) {
-        const commentValue = input[ commentKey ];
-
-        // Ensure processedValue is an object that can hold the _comment property
-        if ( typeof processedValue === 'object' && processedValue !== null && !Array.isArray( processedValue ) ) {
-          processedValue._comment = commentValue;
-        }
-        else {
-          // Wrap primitive or array values
-          processedValue = { value: processedValue, _comment: commentValue };
-        }
-      }
-
-      result[ key ] = processedValue;
-    }
-    return result;
-  }
-
-  // Base case 3: Input is a number, boolean, or null - return as is.
-  return input;
-}
\ No newline at end of file
+export { safeLoadYaml, nestJSONStringValues };
+// Re-exported for existing imports
Index: js/grunt/modulify/generateFluentTypes.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/grunt/modulify/generateFluentTypes.ts b/js/grunt/modulify/generateFluentTypes.ts
--- a/js/grunt/modulify/generateFluentTypes.ts	(revision 3083943ebc58f4c601376743b3de62433b389dd7)
+++ b/js/grunt/modulify/generateFluentTypes.ts	(date 1756749964469)
@@ -1,461 +1,32 @@
 // Copyright 2025, University of Colorado Boulder
 
 /**
- * Parse a YAML file and convert its contents to types for Fluent.
- *
- * @author Jesse Greenberg (PhET Interactive Simulations)
- * @author Sam Reid (PhET Interactive Simulations)
+ * Parse a YAML file and convert its contents to the Fluent TS module. This refactored version reuses
+ * pure generators from lib/strings so other tools (like the dev server) can build in-memory.
  */
 
 import fs from 'fs';
-import _ from 'lodash';
 import path from 'path';
-import affirm from '../../../../perennial-alias/js/browser-and-node/affirm.js';
 import writeFileAndGitAdd from '../../../../perennial-alias/js/common/writeFileAndGitAdd.js';
-import IntentionalAny from '../../../../phet-core/js/types/IntentionalAny.js';
-import FluentLibrary from '../../browser-and-node/FluentLibrary.js';
-import ChipperStringUtils from '../../common/ChipperStringUtils.js';
 import pascalCase from '../../common/pascalCase.js';
+import { getFluentTypesText } from './lib/strings.js';
 import getCopyrightLineFromFileContents from '../getCopyrightLineFromFileContents.js';
-import { safeLoadYaml } from './convertStringsYamlToJson.js';
-import { getFluentParamsFromIndex, NUMBER_LITERAL, ParamInfo, parseFluentToMap } from './getFluentParams.js';
-
-type Leaf = { pathArr: string[]; value: string };
-type Obj = Record<string, IntentionalAny>;
-
-/** true if key is a valid JS identifier (no quoting needed). */
-const IDENT = /^[A-Za-z_$][\w$]*$/;
-
-/** Indent helper. */
-const indent = ( lvl: number, spaces = 2 ): string => ' '.repeat( lvl * spaces );
-
-type FluentComment = IntentionalAny;
-
-/**
- * Parse comments from raw YAML text while preserving order.
- * Returns an array of FluentComment objects with line numbers and associated keys.
- */
-function parseYamlComments( yamlText: string ): FluentComment[] {
-  const lines = yamlText.split( '\n' );
-  const comments: FluentComment[] = [];
-
-  for ( let i = 0; i < lines.length; i++ ) {
-    const line = lines[ i ].trim();
-
-    // Check if line is a comment (starts with #)
-    if ( line.startsWith( '#' ) ) {
-      const comment = line.substring( 1 ).trim(); // Remove # and trim whitespace
-
-      // Look ahead to find the next non-comment, non-empty line to associate with
-      let associatedKey: string | undefined;
-      for ( let j = i + 1; j < lines.length; j++ ) {
-        const nextLine = lines[ j ].trim();
-        if ( nextLine && !nextLine.startsWith( '#' ) ) {
-          // Extract the key from "key: value" format
-          const colonIndex = nextLine.indexOf( ':' );
-          if ( colonIndex > 0 ) {
-            associatedKey = nextLine.substring( 0, colonIndex ).trim();
-          }
-          break;
-        }
-      }
-
-      comments.push( {
-        comment: comment,
-        associatedKey: associatedKey
-      } );
-    }
-  }
-
-  return comments;
-}
-
-/** Recursively walk object, returning leaf records. */
-function collectLeaves( obj: Obj, pathArr: string[] = [] ): Leaf[] {
-  const leaves: Leaf[] = [];
-  for ( const [ key, val ] of Object.entries( obj ) ) {
-    if ( val !== null && typeof val === 'object' && !Array.isArray( val ) ) {
-      leaves.push( ...collectLeaves( val, [ ...pathArr, key ] ) );
-    }
-    else {
-
-      // Replace fluent references with dot separated values (which is not valid in Fluent syntax) with
-      // underscores. This allows PhET developers to use dot notation when referencing fluent keys,
-      // which is more familiar.
-      const replacedString = ChipperStringUtils.replaceFluentReferences( val );
-      leaves.push( { pathArr: [ ...pathArr, key ], value: replacedString } ); // scalar leaf
-    }
-  }
-  return leaves;
-}
-
-/**
- * Create a key for the fluent file from the path array. Nesting from the YAML is indicated by underscores.
- * Characters that are not valid in Fluent keys are replaced with dashes.
- */
-function createFluentKey( pathArr: string[] ): string {
-
-  return pathArr
-    .join( '_' )
-
-    // This regex matches any character that is not a letter, digit, or underscore.
-    .replace( /[^a-zA-Z0-9]/g, '_' );
-}
-
-/**
- * Creates an accessor path for a StringProperty for the given path array.
- *
- * e.g., for pathArr=['a', 'b.c'], returns "a.b.cStringProperty".
- *
- * @param pathArr - An array with the "path" to the string from nesting in the file.
- */
-const createAccessor = ( pathArr: string[] ): string => {
-
-  affirm( pathArr.length > 0, 'pathArr must contain at least one key' );
-
-  // Clone the array and glue the suffix onto its last element
-  const parts = pathArr.slice();
-  const lastIdx = parts.length - 1;
-  parts[ lastIdx ] = parts[ lastIdx ] + 'StringProperty'; // strip leading dot if given
-
-  // .get is graceful which is nice because strings are removed from the build if they are not used.
-  return parts.join( '.' );
-};
-
-/**
- * Expands “dot-notation” keys into real nested objects.
- *
- * If the key contains one or more dots (e.g. `"a.b.c"`), the key is split on the dot
- * characters and intermediate objects are created so that the value resides
- * at the correct depth:
- *
- *   expandDottedKeys({ "a.b": 1, "x.y.z": 2 })
- *   // { a: { b: 1 }, x: { y: { z: 2 } } }
- *
- * Keys without dots are copied verbatim.
- *
- * If several keys share a common prefix, the resulting sub-objects are merged;
- * when the same final path is encountered more than once, the later value
- * overwrites the earlier one.
- */
-function expandDottedKeys( object: Record<string, unknown> ): Record<string, unknown> {
-  const newObject: Record<string, unknown> = {};
-
-  Object.entries( object ).forEach( ( [ rawKey, value ] ) => {
-    const parts = rawKey.split( '.' );
-
-    // The 'cursor' is the position where we are in the tree as we recursively build the object.
-    let cursor: Record<string, unknown> = newObject;
-
-    for ( let i = 0; i < parts.length - 1; i++ ) {
-      const part = parts[ i ];
-
-      // We have never seen this key before, so we need to create an object for it.
-      // If we HAVE seen it, we will use the existing object and merge into it.
-      if ( cursor[ part ] === undefined || cursor[ part ] === null ) {
-        cursor[ part ] = {};
-      }
-      cursor = cursor[ part ] as Record<string, unknown>;
-    }
-
-    const last = parts[ parts.length - 1 ];
-
-    let nextEntry;
-    if ( value && typeof value === 'object' && !Array.isArray( value ) ) {
-      // If the value is an object, we recursively expand its keys as well.
-      nextEntry = expandDottedKeys( value as Record<string, unknown> );
-    }
-    else {
-      nextEntry = value;
-    }
-
-    // Set the final value in the cursor object.
-    cursor[ last ] = nextEntry;
-
-    cursor[ last ] =
-      ( value && typeof value === 'object' && !Array.isArray( value ) ) ? expandDottedKeys( value as Record<string, unknown> )
-                                                                        : value;
-  } );
-
-  return newObject;
-}
-
-/** Build nested TS literal from YAML, inserting both helpers at leaves and interleaving comments. */
-function buildFluentObject( obj: Obj, typeInfoMap: Map<string, ParamInfo[]>, pascalCaseRepo: string, comments: FluentComment[] = [], pathArr: string[] = [], lvl = 1 ): string {
-
-  // Keys with dots should be expanded into nested objects so that usages can easily access values with
-  // dot notation.
-  obj = expandDottedKeys( obj );
-
-  const lines = [ '{' ];
-  const entries = Object.entries( obj );
-
-  // Helper to get the full key path for a given key at current level
-  const getFullPath = ( key: string ) => [ ...pathArr, key ].join( '.' );
-
-  // Find comments that should be placed at this level
-  const levelComments = comments.filter( comment => {
-    if ( !comment.associatedKey ) {
-      return false;
-    }
-
-    // Check if this comment's associated key matches any key at this level
-    const associatedKeyPath = comment.associatedKey;
-    return entries.some( ( [ key ] ) => {
-      const fullPath = getFullPath( key );
-      return associatedKeyPath === key || associatedKeyPath === fullPath;
-    } );
-  } );
-
-  // Group comments by their associated keys
-  const commentsByKey = new Map<string, FluentComment[]>();
-  levelComments.forEach( comment => {
-    if ( comment.associatedKey ) {
-      // Find the entry key that matches this comment
-      const matchingKey = entries.find( ( [ key ] ) => {
-        const fullPath = getFullPath( key );
-        return comment.associatedKey === key || comment.associatedKey === fullPath;
-      } )?.[ 0 ];
 
-      if ( matchingKey ) {
-        if ( !commentsByKey.has( matchingKey ) ) {
-          commentsByKey.set( matchingKey, [] );
-        }
-        commentsByKey.get( matchingKey )!.push( comment );
-      }
-    }
-  } );
-
-  let commentCounter = 0;
-
-  entries.forEach( ( [ key, val ], idx ) => {
-    // Add comments before this key if any exist
-    const keyComments = commentsByKey.get( key );
-    if ( keyComments ) {
-      keyComments.forEach( comment => {
-        const commentKey = `_comment_${commentCounter}`;
-        const commentData = JSON.stringify( comment );
-        // Comments always need a comma since they're followed by either another comment or the actual key
-        lines.push( `${indent( lvl )}${commentKey}: new FluentComment( ${commentData} ),` );
-        commentCounter++;
-      } );
-    }
-
-    // If the key is not a valid JS identifier, we need to quote it. This can be accomplished by using JSON.stringify.
-    const safeKey = IDENT.test( key ) ? key : JSON.stringify( key );
-    const comma = idx < entries.length - 1 ? ',' : '';
-    if ( val !== null && typeof val === 'object' && !Array.isArray( val ) ) {
-      // recurse
-      const sub = buildFluentObject( val, typeInfoMap, pascalCaseRepo, comments, [ ...pathArr, key ], lvl + 1 );
-      lines.push( `${indent( lvl )}${safeKey}: ${sub}${comma}` );
-    }
-    else {
-      // leaf
-      const id = createFluentKey( [ ...pathArr, key ] );
-
-      const paramInfo = typeInfoMap.get( id );
-      affirm( paramInfo, `Missing type info for ${id}` );
-
-      // Convert param info from the fluent value into a TypeScript type for development.
-      function generateTypeDefinition( schema: ParamInfo[] ): string {
-
-        if ( !Array.isArray( schema ) ) {
-          console.error( 'Input must be an array of property definitions.' );
-          return '{}';
-        }
-
-        const properties = schema.map( prop => {
-          const name = prop.name;
-          let typeString;
-
-          if ( prop.variants && Array.isArray( prop.variants ) && prop.variants.length > 0 ) {
-            // Create the union of string literals
-            const variantLiterals = prop.variants.map( v => {
-
-              if ( typeof v === 'number' ) {
-
-                // If the variant is a number, return it as is, so it will appear in the type like a number literal
-                return v;
-              }
-              else if ( typeof v === 'string' ) {
-                return `'${v}'`;
-              }
-              else {
-
-                affirm( v.type === NUMBER_LITERAL, 'Unexpected variant type, expected string or number literal' );
-
-                return `number | '${v.value}'`;
-
-              }
-            } ).join( ' | ' );
-            // Create the full type string including TReadOnlyProperty
-            typeString = `${variantLiterals} | TReadOnlyProperty<${variantLiterals}>`;
-          }
-          else {
-
-            // If no variants are provided, this will be a string, number, or TReadOnlyProperty of those types.
-            typeString = 'FluentVariable';
-          }
-          return `${name}: ${typeString}`;
-        } );
-
-        return `{ ${properties.join( ', ' )} }`;
-      }
-
-      // Check if there are no parameters (empty cleaned schema)
-
-      // A suffix for the key in the line if it is going to be a StringProperty
-      const stringPropertyKey = IDENT.test( key + 'StringProperty' ) ? key + 'StringProperty' : JSON.stringify( key + 'StringProperty' );
-
-      const accessor = createAccessor( [ ...pathArr, key ] );
-      const getter = `_.get( ${pascalCaseRepo}Strings, '${accessor}' )`;
-
-      // Do not pass the following strings through Fluent:
-      //
-      // - Strings that live outside the `a11y` namespace. They are not currently
-      //   translated; treating them as Fluent may introduce runtime errors if a
-      //   translator inserts Fluent syntax or references another key.
-      //
-      // - Strings that use legacy placeholder patterns such as `{0}` or `{{value}}`.
-      //   These are formatted at runtime with `StringUtils.format` or `StringUtils.fillIn`
-      //   and are therefore incompatible with FluentPattern.
-      //
-      // TODO: https://github.com/phetsims/rosetta/issues/221, Revisit when full Fluent support is available for non-a11y content.
-      if ( ChipperStringUtils.isLegacyStringPattern( val ) || !accessor.startsWith( 'a11y.' ) ) {
-        lines.push( `${indent( lvl )}${stringPropertyKey}: ${getter}${comma}` );
-      }
-      else if ( paramInfo.length === 0 ) {
-
-        // No parameters - use FluentConstant
-        const stringPropertyKey = IDENT.test( key + 'StringProperty' ) ? key + 'StringProperty' : JSON.stringify( key + 'StringProperty' );
-        lines.push( `${indent( lvl )}${stringPropertyKey}: new FluentConstant( fluentSupport.bundleProperty, '${id}', ${getter} )${comma}` );
-      }
-      else {
-
-        // Has parameters - use FluentPattern
-        const T = generateTypeDefinition( paramInfo );
-        lines.push( `${indent( lvl )}${safeKey}: new FluentPattern<${T}>( fluentSupport.bundleProperty, '${id}', ${getter}, ${JSON.stringify( paramInfo )} )${comma}` );
-      }
-    }
-  } );
-  lines.push( `${indent( lvl - 1 )}}` );
-  return lines.join( '\n' );
-}
-
-/** Build nested TS literal from YAML, inserting both helpers at leaves. */
 const generateFluentTypes = async ( repo: string ): Promise<void> => {
-  const pascalCaseRepo = pascalCase( repo );
-  const camelCaseRepo = _.camelCase( repo );
-
   const yamlPath = `../${repo}/${repo}-strings_en.yaml`;
-  const outPath = `js/${pascalCaseRepo}Fluent.ts`;
-
-  // load YAML
+  const outPath = `js/${pascalCase( repo )}Fluent.ts`;
   const yamlText = fs.readFileSync( yamlPath, 'utf8' );
-  const yamlObj = safeLoadYaml( yamlText ) as Obj;
-
-  // Parse comments from the YAML text
-  const comments = parseYamlComments( yamlText );
-
-  // collect all leaves
-  const leaves = collectLeaves( yamlObj );
-
-  // Make sure that there are no key collisions in the fluent keys. Dots and nesting
-  // are all converted to underscores.
-  const allKeys = leaves.map( leaf => createFluentKey( leaf.pathArr ) );
-  allKeys.forEach( key => {
-    const count = allKeys.filter( k => k === key ).length;
-    affirm( count === 1, `Duplicate key found in YAML: ${key} appears ${count} times` );
-  } );
 
-  const filteredLeaves = leaves.filter( leaf => !ChipperStringUtils.isLegacyStringPattern( leaf.value ) );
-
-  // map fluent keys to StringProperty accessors for usage later
-  const fluentKeyMapLines = filteredLeaves.map( leaf => {
-
-    // Create an ID using underscore-separated path segments
-    const id = createFluentKey( leaf.pathArr );
-
-    // Build full path to access the Property
-    const accessor = createAccessor( leaf.pathArr );
-
-    return `addToMapIfDefined( '${id}', '${accessor}' );`;
-  } ).join( '\n' );
+  const fluentModuleText = getFluentTypesText( repo, yamlText );
 
   const copyrightLine = await getCopyrightLineFromFileContents( repo, outPath );
-
-  // create FTL file contents from the english entries in the YAML so that we can create TypeScript types
-  // and verify the syntax.
-  const ftlContent = filteredLeaves.map( leaf => {
-    const id = createFluentKey( leaf.pathArr );
-    return `${id} = ${leaf.value}`;
-  } ).join( '\n' );
-
-  // verify the fluent file to report syntax errors in the english content.
-  FluentLibrary.verifyFluentFile( ftlContent );
-
-  const entryIndex = parseFluentToMap( ftlContent );
-  const keyToTypeInfoMap = new Map<string, ParamInfo[]>();
-  leaves.forEach( ( { pathArr } ) => {
-    const fluentKey = createFluentKey( pathArr );
-    keyToTypeInfoMap.set( fluentKey, getFluentParamsFromIndex( entryIndex, fluentKey ) );
-  } );
-
-  // an object literal that will be used to create the Fluent typescript object
-  const fluentObjectLiteral = buildFluentObject( yamlObj, keyToTypeInfoMap, pascalCaseRepo, comments, [], 1 );
-
-  // template TypeScript file
   const fileContents = `${copyrightLine}
 // AUTOMATICALLY GENERATED – DO NOT EDIT.
 // Generated from ${path.basename( yamlPath )}
 
-/* eslint-disable */
-/* @formatter:off */
-
-import { TReadOnlyProperty } from '../../axon/js/TReadOnlyProperty.js';
-import type { FluentVariable } from '../../chipper/js/browser/FluentPattern.js';
-import FluentPattern from '../../chipper/js/browser/FluentPattern.js';
-import FluentContainer from '../../chipper/js/browser/FluentContainer.js';
-import FluentConstant from '../../chipper/js/browser/FluentConstant.js';
-import FluentComment from '../../chipper/js/browser/FluentComment.js';
-import ${camelCaseRepo} from './${camelCaseRepo}.js';
-import ${pascalCaseRepo}Strings from './${pascalCaseRepo}Strings.js';
+${fluentModuleText}`;
 
-// This map is used to create the fluent file and link to all StringProperties.
-// Accessing StringProperties is also critical for including them in the built sim.
-// However, if strings are unused in Fluent system too, they will be fully excluded from
-// the build. So we need to only add actually used strings.
-const fluentKeyToStringPropertyMap = new Map();
-
-const addToMapIfDefined = ( key: string, path: string ) => {
-  const sp = _.get( ${pascalCaseRepo}Strings, path );
-  if ( sp ) {
-    fluentKeyToStringPropertyMap.set( key, sp );
-  }
-};
-
-${fluentKeyMapLines}
-
-// A function that creates contents for a new Fluent file, which will be needed if any string changes.
-const createFluentFile = (): string => {
-  let ftl = '';
-  for (const [key, stringProperty] of fluentKeyToStringPropertyMap.entries()) {
-    ftl += \`\${key} = \${stringProperty.value.replace('\\n','\\n ')}\\n\`;
-  }
-  return ftl;
-};
-
-const fluentSupport = new FluentContainer( createFluentFile, Array.from(fluentKeyToStringPropertyMap.values()) );
-
-const ${pascalCaseRepo}Fluent = ${fluentObjectLiteral};
-
-export default ${pascalCaseRepo}Fluent;
-
-${camelCaseRepo}.register('${pascalCaseRepo}Fluent', ${pascalCaseRepo}Fluent);
-`;
-
-// 6 write out
   await writeFileAndGitAdd( repo, outPath, fileContents );
 };
 
-export default generateFluentTypes;
\ No newline at end of file
+export default generateFluentTypes;
Index: AGENTS.md
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
--- /dev/null	(date 1756745851593)
+++ b/AGENTS.md	(date 1756745851593)
@@ -0,0 +1,36 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- Source: `js/` (TypeScript/JS). Key areas: `js/browser`, `js/common`, `js/grunt`, `js/scripts`, `js/phet-io`.
+- Tests: `js/test/` (QUnit) and select `*Tests.ts` files alongside features (e.g., `js/browser/MipmapElementTests.ts`).
+- Build templates and assets: `templates/`, HTML wrappers in `wrappers/`, locale data in `data/`.
+- Outputs: `build/`, `dist/` (generated artifacts).
+
+## Build, Test, and Development Commands
+- `npm test`: Runs core unit tests via QUnit.
+- `npm run test-long`: Runs the broader test suite in `js/test/*`.
+- `npm run test-string-keys`: Asserts required main-en string keys exist.
+- `npm run test-deprecated-string-keys`: Ensures deprecated keys are still referenced as expected.
+- `grunt dev` / `grunt production`: Forwards to `../perennial` for dev/prod workflows.
+- `grunt lint` / `grunt type-check`: Forwards to `../perennial-alias` for linting and TS checks.
+Note: Grunt tasks rely on sibling repos `../perennial` and `../perennial-alias`.
+
+## Coding Style & Naming Conventions
+- Indentation: 2 spaces; use `const/let` and strict TypeScript where possible.
+- Filenames: PascalCase for core TS modules (e.g., `ChipperConstants.ts`), kebab-case for scripts/tasks (e.g., `generate-test-html.ts`).
+- Naming: camelCase for variables/functions, PascalCase for classes/types.
+- Linting: `eslint.config.mjs` (and scoped configs in `js/browser*/`). Run `grunt lint` before PRs.
+
+## Testing Guidelines
+- Framework: QUnit.
+- Location: Prefer `js/test/` with meaningful names (e.g., `generationTest.ts`). Co-locate small, focused tests as `*Tests.ts` when helpful.
+- Run: `npm test` for quick checks; `npm run test-long` before merging significant changes.
+
+## Commit & Pull Request Guidelines
+- Commits: Imperative, concise subject (<=72 chars). Reference issues (e.g., `chipper: fix locale map (#123)`), group related changes.
+- PRs: Clear description, scope, and rationale; link issues; include CLI output or screenshots when relevant; note impacts to build/test tasks.
+- CI/readiness: Ensure `grunt lint`, `grunt type-check`, and `npm test` pass.
+
+## Environment & Setup
+- Requires Node and npm. Ensure sibling repos `../perennial` and `../perennial-alias` are present for Grunt tasks.
+- If Node version errors occur, see `perennial-alias`’s node version check and align your local version.

[samreid]

More ideas for next steps:

• load-unbuilt-strings.js can load direct from yaml
• an inline editor and localstorage to edit strings, like the color editor or phet-io studio admin

[samreid]

For openai/codex-cli gpt-5 medium:

▌Read wrappers/a11y-view/index.html then create a sibling wrappers/yaml-editor/
▌index.html that shows the *.yaml translation file for a simulation, like /
▌Users/reids/phet/root/membrane-transport/membrane-transport-strings_en.yaml.
▌This is an editable text field that the user can change. Then when the user is
▌done editing, the "launch" button launches the a11y-view wrapper on the right.
▌Now here's the fun part: it loads the strings the user specified in the yaml-
▌editor. See js/browser/load-unbuilt-strings.js. This only needs to work for
▌"unbuilt" mode, so we can just swap it in there somehow.

▌You will probably need to read js/grunt/modulify/convertStringsYamlToJson.ts

▌I updated the file to match our style and lint settings. Re-read wrappers/yaml-
▌editor/index.html. Then make certain to trim() each string going into the local
▌storage data structure--the sim is loading with wonky layout with " hello"
▌sort of strings that have extra whitespace

▌Use the monaco editor to show better syntax highlighting for the yaml file
▌side. Make the "YAML Strings Editor" text smaller.

▌yaml-editor/?sim=number-pairs&brand=phet&ea&debugger:337 Uncaught (in promise)
▌ReferenceError: Cannot access 'monacoEditor' before initialization
▌ at yaml-editor/?sim=number-pairs&brand=phet&ea&debugger:337:7
▌ at new Promise ()
▌ at ensureMonaco (yaml-editor/?sim=number-
▌pairs&brand=phet&ea&debugger:335:12)
▌ at yaml-editor/?sim=number-pairs&brand=phet&ea&debugger:317:3

▌GET http://localhost/chipper/node_modules/monaco-editor/min/vs/loader.js
▌net::ERR_ABORTED 404 (Not Found). Use a reliable CDN

Details

Subject: [PATCH] hello
---
Index: wrappers/yaml-editor/index.html
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/wrappers/yaml-editor/index.html b/wrappers/yaml-editor/index.html
new file mode 100644
--- /dev/null	(date 1756781776508)
+++ b/wrappers/yaml-editor/index.html	(date 1756781776508)
@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>YAML Strings Editor</title>
+  <style>
+    html {
+      font-family: Arial, Helvetica, sans-serif;
+      line-height: 1.4;
+    }
+
+    body {
+      margin: 1em;
+      background: #eee;
+    }
+
+    .container {
+      display: flex;
+      gap: 1.5em;
+    }
+
+    .left {
+      flex: 1 1 47%;
+      min-width: 360px;
+    }
+
+    .right {
+      flex: 1 1 47%;
+      min-width: 360px;
+    }
+
+    .controls {
+      display: flex;
+      gap: .5em;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: .5em;
+    }
+
+    .controls input[type="text"] {
+      width: 20em;
+    }
+
+    textarea {
+      width: 100%;
+      height: 70vh;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 12px;
+    }
+
+    iframe {
+      width: 100%;
+      height: 80vh;
+      border: 1px solid #bbb;
+      background: #fff;
+    }
+
+    .path {
+      opacity: .7;
+      font-size: .9em;
+      margin: .25em 0 .5em;
+    }
+
+    .error {
+      color: #a00;
+      font-weight: bold;
+    }
+    h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .5em; }
+
+    /* Monaco container */
+    #editor { width: 100%; height: 70vh; border: 1px solid #bbb; background: #fff; display: none; }
+  </style>
+</head>
+<body>
+<h1>YAML Strings Editor</h1>
+<div class="container">
+  <div class="left">
+    <div class="controls">
+      <label for="simInput"><b>sim</b>:</label>
+      <input id="simInput" type="text" placeholder="e.g. membrane-transport"/>
+      <button id="loadBtn">Load YAML</button>
+      <button id="launchBtn">Launch A11y View →</button>
+    </div>
+    <div id="path" class="path"></div>
+    <div id="error" class="error" role="alert" aria-live="polite"></div>
+    <div id="editor" aria-label="YAML Editor"></div>
+    <textarea id="yamlText" placeholder="YAML will load here..."></textarea>
+  </div>
+  <div class="right">
+    <iframe id="viewer" title="A11y View"></iframe>
+  </div>
+</div>
+
+<script>
+  // Very small YAML parser for PhET strings files (mappings + block scalars). Not a full YAML implementation.
+  function parsePhetYaml( yaml ) {
+    const lines = yaml.replace( /\r\n?/g, '\n' ).split( '\n' );
+    const root = {};
+    const stack = [ { indent: -1, obj: root } ];
+    const indentSize = 2; // PhET strings yaml uses 2-space indents
+
+    const setAtPath = ( pathArr, value ) => {
+      let cur = root;
+      for ( let i = 0; i < pathArr.length - 1; i++ ) {
+        const k = pathArr[ i ];
+        if ( !Object.hasOwn( cur, k ) || typeof cur[ k ] !== 'object' ) {
+          cur[ k ] = {};
+        }
+        cur = cur[ k ];
+      }
+      cur[ pathArr[ pathArr.length - 1 ] ] = value;
+    };
+
+    const getIndent = s => s.match( /^ */ )[ 0 ].length;
+
+    let i = 0;
+    while ( i < lines.length ) {
+      const raw = lines[ i ];
+      i++;
+      if ( !raw.trim() || raw.trimStart().startsWith( '#' ) ) { continue; }
+      const indent = getIndent( raw );
+      const line = raw.slice( indent );
+
+      while ( stack.length && indent <= stack[ stack.length - 1 ].indent ) { stack.pop(); }
+
+      // Split key: value at first ':' only
+      const colonIndex = line.indexOf( ':' );
+      if ( colonIndex === -1 ) { continue; }
+      const key = line.slice( 0, colonIndex ).trim();
+      let rest = line.slice( colonIndex + 1 ); // includes possible leading space
+
+      // Block scalar (| or |-)
+      if ( /^\s*\|-\s*$/.test( rest ) || /^\s*\|\s*$/.test( rest ) ) {
+        const blockIndent = indent + indentSize;
+        const blockLines = [];
+        while ( i < lines.length ) {
+          const r = lines[ i ];
+          const rIndent = getIndent( r );
+          if ( r.trim() === '' && rIndent >= blockIndent ) {
+            blockLines.push( '' );
+            i++;
+            continue;
+          }
+          if ( rIndent < blockIndent ) { break; }
+          blockLines.push( r.slice( blockIndent ) );
+          i++;
+        }
+        const value = blockLines.join( '\n' );
+        const pathArr = stack.slice( 1 ).map( e => e.key ).concat( [ key ] );
+        setAtPath( pathArr, value );
+        continue;
+      }
+
+      // Trim one leading space if present
+      rest = rest.replace( /^\s/, '' );
+
+      if ( rest === '' ) {
+        // Nested mapping starts
+        const parent = stack.length ? stack[ stack.length - 1 ].obj : root;
+        parent[ key ] = parent[ key ] || {};
+        stack.push( { indent: indent, obj: parent[ key ], key: key } );
+      }
+      else {
+        // Scalar value
+        let value = rest;
+        // Strip quotes if wrapped
+        if ( ( value.startsWith( '"' ) && value.endsWith( '"' ) ) || ( value.startsWith( '\'' ) && value.endsWith( '\'' ) ) ) {
+          value = value.slice( 1, -1 );
+        }
+        const pathArr = stack.slice( 1 ).map( e => e.key ).concat( [ key ] );
+        setAtPath( pathArr, value );
+      }
+    }
+    return root;
+  }
+
+  // Fluent reference helpers adapted from ChipperStringUtils
+  const FLUENT_PLACEHOLDER_EXPRESSION = /\{\s*(?!\$)([^\s}]+)\s*\}/gu;
+
+  function createFluentKey( dotSeparatedKey ) {
+    return dotSeparatedKey.replace( /[^a-zA-Z0-9]/g, '_' );
+  }
+
+  function isLegacyStringPattern( str ) {
+    return str.includes( '{{' ) || str.includes( '}}' ) || /{\d+}/.test( str );
+  }
+
+  function replaceFluentReferences( str ) {
+    if ( isLegacyStringPattern( str ) ) { return str; }
+    return str.replace( FLUENT_PLACEHOLDER_EXPRESSION, ( _m, key ) => `{ ${createFluentKey( String( key ).trim() )} }` );
+  }
+
+  // Convert parsed YAML object to the JSON form expected by load-unbuilt-strings.js, honoring metadata suffixes
+  function nestJSONStringValues( input ) {
+    if ( typeof input === 'string' ) {
+      // Trim leading/trailing whitespace to avoid layout issues from accidental spaces
+      return { value: replaceFluentReferences( input.trim() ) };
+    }
+    else if ( Array.isArray( input ) ) {
+      return input.map( item => nestJSONStringValues( item ) );
+    }
+    else if ( input && typeof input === 'object' ) {
+      const result = {};
+      const keys = Object.keys( input );
+      for ( const key of keys ) {
+        if ( key.endsWith( '__simMetadata' ) || key.endsWith( '__deprecated' ) || key.endsWith( '__comment' ) ) {
+          const base = key.replace( /__(simMetadata|deprecated|comment)$/, '' );
+          if ( keys.includes( base ) ) { continue; }
+          console.warn( 'Orphaned metadata key skipped:', key );
+          continue;
+        }
+        let processed = nestJSONStringValues( input[ key ] );
+
+        const mdKey = `${key}__simMetadata`;
+        if ( Object.hasOwn( input, mdKey ) ) {
+          const md = input[ mdKey ];
+          if ( processed && typeof processed === 'object' && !Array.isArray( processed ) ) {
+            processed.simMetadata = md;
+          }
+          else {
+            processed = { value: processed, simMetadata: md };
+          }
+        }
+
+        const depKey = `${key}__deprecated`;
+        if ( Object.hasOwn( input, depKey ) ) {
+          const dep = input[ depKey ];
+          if ( dep !== 'true' ) { throw new Error( `__deprecated must be true for key: ${key}` ); }
+          if ( processed && typeof processed === 'object' && !Array.isArray( processed ) ) {
+            processed.deprecated = true;
+          }
+          else {
+            processed = { value: processed, deprecated: true };
+          }
+        }
+
+        const cKey = `${key}__comment`;
+        if ( Object.hasOwn( input, cKey ) ) {
+          const c = input[ cKey ];
+          if ( processed && typeof processed === 'object' && !Array.isArray( processed ) ) {
+            processed._comment = c;
+          }
+          else {
+            processed = { value: processed, _comment: c };
+          }
+        }
+
+        result[ key ] = processed;
+      }
+      return result;
+    }
+    return input; // number/boolean/null
+  }
+
+  const $ = sel => document.querySelector( sel );
+
+  const query = new URLSearchParams( window.location.search );
+  const simInput = $( '#simInput' );
+  const yamlText = $( '#yamlText' );
+  const editorEl = $( '#editor' );
+  const pathEl = $( '#path' );
+  const errorEl = $( '#error' );
+  const viewer = $( '#viewer' );
+  let monacoEditor = null;
+
+  function setError( msg ) { errorEl.textContent = msg || ''; }
+
+  function currentYamlPath( sim ) {
+    return `../../../${sim}/${sim}-strings_en.yaml`;
+  }
+
+  async function loadYamlForSim( sim ) {
+    setError( '' );
+    if ( !sim ) {
+      setError( 'Enter a sim repo name.' );
+      return;
+    }
+    pathEl.textContent = currentYamlPath( sim );
+    try {
+      const res = await fetch( currentYamlPath( sim ), { cache: 'no-store' } );
+      if ( !res.ok ) { throw new Error( `${res.status} ${res.statusText}` ); }
+      const text = await res.text();
+      setEditorValue( text );
+    }
+    catch( e ) {
+      setError( `Failed to load YAML: ${e.message}` );
+    }
+  }
+
+  function launchA11yView() {
+    setError( '' );
+    const sim = ( simInput.value || '' ).trim();
+    if ( !sim ) {
+      setError( 'Enter a sim repo name.' );
+      return;
+    }
+    try {
+      const parsed = parsePhetYaml( getEditorValue() || '' );
+      const wrapped = nestJSONStringValues( parsed );
+      localStorage.setItem( `phet-strings-override-${sim}`, JSON.stringify( wrapped ) );
+    }
+    catch( e ) {
+      setError( `YAML parse failed: ${e.message}` );
+      return;
+    }
+    const params = new URLSearchParams( window.location.search );
+    params.set( 'sim', sim );
+    params.set( 'stringsOverride', '' );
+    const url = `../a11y-view/index.html?${params.toString()}`;
+    viewer.src = url;
+  }
+
+  // Wire up controls
+  $( '#loadBtn' ).addEventListener( 'click', () => loadYamlForSim( simInput.value.trim() ) );
+  $( '#launchBtn' ).addEventListener( 'click', launchA11yView );
+
+  // Initialize from query string if present
+  // Try to initialize Monaco editor lazily; fallback is textarea
+  ensureMonaco();
+
+  if ( query.get( 'sim' ) ) {
+    simInput.value = query.get( 'sim' );
+    loadYamlForSim( simInput.value );
+  }
+
+  function setEditorValue( text ) {
+    if ( monacoEditor ) { monacoEditor.setValue( text ?? '' ); }
+    else { yamlText.value = text ?? ''; }
+  }
+
+  function getEditorValue() {
+    return monacoEditor ? monacoEditor.getValue() : yamlText.value;
+  }
+
+  function ensureMonaco() {
+    return new Promise( resolve => {
+      if ( monacoEditor ) { return resolve( true ); }
+      function initWithBase( baseUrl, onFail ) {
+        const loaderUrl = `${baseUrl}/loader.js`;
+        const script = document.createElement( 'script' );
+        script.src = loaderUrl;
+        script.async = true;
+        script.onload = () => {
+          // eslint-disable-next-line no-undef
+          require.config( { paths: { 'vs': baseUrl } } );
+          // eslint-disable-next-line no-undef
+          require( [ 'vs/editor/editor.main' ], () => {
+          // Register a minimal YAML tokenizer if not present
+          if ( !window.monaco.languages.getEncodedLanguageId || !window.monaco.languages.getEncodedLanguageId( 'yaml' ) ) {
+            try {
+              window.monaco.languages.register( { id: 'yaml' } );
+              window.monaco.languages.setMonarchTokensProvider( 'yaml', {
+                tokenizer: {
+                  root: [
+                    [ /#.*/, 'comment' ],
+                    [ /\s*-\s+[^:]+$/, 'string' ],
+                    [ /(\s*)([\w.-]+)(\s*:\s*)/, [ '', 'key', '' ] ],
+                    [ /"([^"\\]|\\.)*"/, 'string' ],
+                    [ /'([^'\\]|\\.)*'/, 'string' ]
+                  ]
+                }
+              } );
+            }
+            catch( e ) { /* ignore */ }
+          }
+
+          monacoEditor = window.monaco.editor.create( editorEl, {
+            value: yamlText.value || '',
+            language: 'yaml',
+            automaticLayout: true,
+            minimap: { enabled: false },
+            wordWrap: 'on',
+            tabSize: 2
+          } );
+
+          // Swap visibility
+          editorEl.style.display = 'block';
+          yamlText.style.display = 'none';
+          resolve( true );
+        } );
+        };
+        script.onerror = onFail;
+        document.head.appendChild( script );
+      }
+      initWithBase( '../../node_modules/monaco-editor/min/vs', () => {
+        initWithBase( 'https://cdn.jsdelivr.net/npm/monaco-editor@0.47.0/min/vs', () => {
+          resolve( false );
+        } );
+      } );
+    } );
+  }
+</script>
+</body>
+</html>
Index: js/browser/load-unbuilt-strings.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/browser/load-unbuilt-strings.js b/js/browser/load-unbuilt-strings.js
--- a/js/browser/load-unbuilt-strings.js	(revision 3083943ebc58f4c601376743b3de62433b389dd7)
+++ b/js/browser/load-unbuilt-strings.js	(date 1756780442082)
@@ -177,6 +177,29 @@
   // The callback to execute when all string files are processed.
   const finishProcessing = () => {
 
+    // Optional in-browser override of strings for unbuilt mode.
+    try {
+      const params = new window.URLSearchParams( window.location.search );
+      const useOverride = params.has( 'stringsOverride' );
+      if ( useOverride ) {
+        const key = `phet-strings-override-${ourRepo}`;
+        const raw = window.localStorage.getItem( key );
+        if ( raw ) {
+          const overrideObject = JSON.parse( raw );
+
+          // Apply to English locale for this repo using the same processing as file-based loading.
+          ourRequirejsNamespace && processStringFile( overrideObject, ourRequirejsNamespace, 'en' );
+
+          // Clear after applying to avoid unexpected reuse.
+          window.localStorage.removeItem( key );
+        }
+      }
+    }
+    catch( e ) {
+      // Non-fatal: log and continue with default strings.
+      console.log( 'Strings override not applied:', e );
+    }
+
     // Because load-unbuilt-strings' "loading" of the locale data and strings might not have happened BEFORE initialize-globals
     // runs (and sets phet.chipper.locale), we'll attempt to handle the case where it hasn't been set yet. You'll see the same call over in initialize-globals
     phet.chipper.checkAndRemapLocale && phet.chipper.checkAndRemapLocale();

[samreid]

Not sure what to do with this patch. @terracoda said it looked very helpful, like a design tool, but @terracoda and I have also discussed setting up a dev environment on her workstation. @arouinfar said we would additionally need a way for designers to commit yaml and have the modulify update. @jonathanolson and @brent-phet are working on phettest. It also overlaps somewhat with what rosetta is supposed to do, but rosetta has different ways of doing the parts, and showing 2 translations side by side.

[brent-phet]

Thanks, @samreid! @jonathanolson added an item to continue this discussion at tomorrow's dev meeting (9/4/25).

[samreid]

I decided to commit this prototype as part of the demo, anyone feel free to revert it for any reason.

For example: https://bayes.colorado.edu/dev/phettest/chipper/wrappers/yaml-editor/?sim=membrane-transport&brand=phet&ea&debugger

[samreid]

@jonathanolson said he is working on this