mxrb 0.1.3 → 0.1.5

data/lib/mxrb/ruby_app/exporter.rb

@@ -0,0 +1,2508 @@
+# frozen_string_literal: true
+
+require 'digest'
+require 'fileutils'
+require 'find'
+require 'json'
+
+module Mxrb
+  module RubyApp
+    # Projects a Mendix model into conventional executable Ruby source while
+    # retaining the complete Mendix-mode tree as the reversible sidecar.
+    # rubocop:disable Metrics
+    class Exporter
+      REST_STATUS_CODES = {
+        'ok' => 200, 'created' => 201, 'accepted' => 202,
+        'nocontent' => 204, 'movedpermanently' => 301, 'found' => 302,
+        'badrequest' => 400, 'unauthorized' => 401, 'forbidden' => 403,
+        'notfound' => 404, 'conflict' => 409, 'internalservererror' => 500
+      }.freeze
+      RUBY_KEYWORDS = %w[
+        alias and begin break case class def defined do else elsif end ensure false
+        for if in module next nil not or redo rescue retry return self super then
+        true undef unless until when while yield
+      ].freeze
+      RECORD_RESERVED = %w[attributes id initialize mendix_id mendix_name to_h type].freeze
+
+      def initialize(mpr_path, output_dir, mendix_sidecar:)
+        @mpr_path = File.expand_path(mpr_path)
+        @output_dir = File.expand_path(output_dir)
+        @mendix_sidecar = File.expand_path(mendix_sidecar)
+      end
+
+      def export!
+        FileUtils.mkdir_p(@output_dir)
+        runtime_mpr = copy_runtime_mpr
+        embedded_sources = read_embedded_sources
+        Mxrb.open(@mpr_path) do |project|
+          @project = project
+          @coverage = []
+          @nanoflow_entries = []
+          @page_entries = []
+          modules = project.modules.map { export_module(_1) }
+          @module_manifests = modules
+          write_support_files
+          copy_frontend_theme
+          restore_embedded_sources(embedded_sources)
+          write_manifest(project, modules, runtime_mpr)
+        end
+        @output_dir
+      ensure
+        @project = nil
+        @module_manifests = nil
+      end
+
+      private
+
+      def read_embedded_sources
+        mpr = IO::MprFile.open(@mpr_path, readonly: true)
+        mpr.ruby_app_sources
+      ensure
+        mpr&.close
+      end
+
+      def restore_embedded_sources(files)
+        files.each do |file|
+          contents = file.fetch(:contents)
+          checksum = Digest::SHA256.hexdigest(contents)
+          raise SerializationError, "embedded Ruby source checksum mismatch: #{file.fetch(:path)}" \
+            unless checksum == file.fetch(:sha256)
+
+          path = RubyApp.safe_source_path(@output_dir, file.fetch(:path))
+          FileUtils.mkdir_p(File.dirname(path))
+          File.binwrite(path, contents)
+          File.chmod(RubyApp.safe_source_mode(file[:mode], file.fetch(:path)), path)
+        end
+      end
+
+      def copy_runtime_mpr
+        directory = File.join(@output_dir, '.mxrb', 'runtime')
+        FileUtils.mkdir_p(directory)
+        destination = File.join(directory, File.basename(@mpr_path))
+        FileUtils.cp(@mpr_path, destination)
+        source_contents = File.join(File.dirname(@mpr_path), 'mprcontents')
+        FileUtils.cp_r(source_contents, directory, remove_destination: true) if File.directory?(source_contents)
+        destination
+      end
+
+      def export_module(mod)
+        namespace = ruby_constant(mod.name)
+        root = underscore(mod.name)
+        entities = mod.entities.map { export_entity(_1, mod, namespace, root) }
+        microflows = mod.microflows.map { export_service(_1, mod, namespace, root, :microflow) }
+        nanoflows = mod.nanoflows.map { export_nanoflow(_1, mod, root) }
+        pages = mod.pages.map { export_page(_1, mod, namespace, root) }
+        endpoints = export_endpoints(mod)
+        {
+          'name' => mod.name, 'ruby_namespace' => namespace,
+          'module_roles' => runtime_value(mod.module_roles),
+          'models' => entities.reject { _1['dto'] },
+          'dtos' => entities.select { _1['dto'] },
+          'services' => microflows, 'nanoflows' => nanoflows, 'pages' => pages,
+          'endpoints' => endpoints,
+          'enumerations' => mod.enumerations.map { enumeration_manifest(mod, _1) },
+          'associations' => mod.associations.map { association_manifest(mod, _1) },
+          'scheduled_events' => mod.scheduled_events.map { runtime_value(_1) }
+        }
+      end
+
+      def export_entity(entity, mod, namespace, root)
+        dto = !entity.persistable && !entity.oql_view?
+        class_name = ruby_constant(entity.name, suffix: dto ? 'Dto' : nil)
+        base_name = underscore(entity.name)
+        base_name = "#{base_name}_dto" if dto && !base_name.end_with?('_dto')
+        category = dto ? 'dtos' : 'models'
+        relative = File.join('app', category, root, "#{base_name}.rb")
+        qualified = "#{mod.name}.#{entity.name}"
+        attributes = entity.attributes.map { attribute_manifest(_1) }
+        write(
+          relative,
+          entity_source(
+            namespace, class_name, qualified, entity.id, attributes,
+            dto:, persistable: entity.persistable == true
+          )
+        )
+        add_coverage(entity.id, qualified, dto ? 'dto' : 'model', relative, 'executable_bidirectional')
+        {
+          'name' => qualified, 'id' => entity.id, 'ruby_class' => "#{namespace}::#{class_name}",
+          'path' => relative, 'dto' => dto, 'persistable' => entity.persistable == true,
+          'attributes' => attributes,
+          'system_members' => runtime_value(entity.system_members || {}),
+          'access_rules' => runtime_value(entity.access_rules || []),
+          'lifecycle' => runtime_value(entity.respond_to?(:lifecycle) ? entity.lifecycle : [])
+        }
+      end
+
+      def association_manifest(mod, association)
+        entities = @project.modules.flat_map do |project_module|
+          project_module.entities.map do |entity|
+            [entity.id.to_s, "#{project_module.name}.#{entity.name}"]
+          end
+        end.to_h
+        {
+          'name' => "#{mod.name}.#{association.name}", 'id' => association.id,
+          'type' => association.association_type.to_s,
+          'from_entity' => entities[association.from_entity_id.to_s] || association.from_entity_id.to_s,
+          'to_entity' => entities[association.to_entity_id.to_s] || association.to_entity_id.to_s
+        }
+      end
+
+      def export_service(flow, mod, namespace, root, kind)
+        class_name = ruby_constant(flow.name)
+        relative = File.join('app', 'services', root, "#{underscore(flow.name)}.rb")
+        qualified = "#{mod.name}.#{flow.name}"
+        write(relative, service_source(namespace, class_name, qualified, flow.id))
+        add_coverage(flow.id, qualified, kind.to_s, relative, 'runtime_source_preserved')
+        {
+          'name' => qualified, 'id' => flow.id,
+          'ruby_class' => "#{namespace}::#{class_name}", 'path' => relative,
+          'kind' => kind.to_s, 'parameters' => flow.parameters.map { flow_parameter_manifest(_1) },
+          'allowed_module_roles' => flow.allowed_module_roles.map(&:to_s)
+        }
+      end
+
+      def flow_parameter_manifest(parameter)
+        variable_type = parameter['VariableType'] || parameter['Type'] || {}
+        {
+          'name' => parameter['Name'].to_s,
+          'type' => variable_type['$Type'].to_s,
+          'entity' => variable_type['Entity'],
+          'required' => parameter['IsRequired'] != false
+        }.compact
+      end
+
+      def export_endpoints(mod)
+        mod.infrastructure_documents.filter_map do |document|
+          next unless document[:type] == 'Rest$PublishedRestService'
+
+          rest_service_manifest(mod, document)
+        end
+      end
+
+      def rest_service_manifest(mod, document)
+        source = document.fetch(:doc)
+        operations = IO::BsonCodec.parse_array(source['Resources'])[:items].flat_map do |resource|
+          IO::BsonCodec.parse_array(resource['Operations'])[:items].map do |operation|
+            rest_operation_manifest(mod, source, resource, operation)
+          end
+        end
+        add_coverage(
+          document.fetch(:id), "#{mod.name}.#{document.fetch(:name)}", 'published_rest_service',
+          relative(@mendix_sidecar), 'executable_backend_route'
+        )
+        {
+          'name' => "#{mod.name}.#{document.fetch(:name)}", 'path' => source['Path'].to_s,
+          'version' => source['Version'].to_s, 'enable_cors' => source['EnableCors'] == true,
+          'requires_authentication' => source['RequiresAuthentication'] == true,
+          'operations' => operations
+        }
+      end
+
+      def rest_operation_manifest(mod, service, resource, operation)
+        microflow = operation['Microflow'].to_s
+        microflow = "#{mod.name}.#{microflow}" unless microflow.empty? || microflow.include?('.')
+        service_path = service['Path'].to_s.sub(%r{\A/+}, '').sub(%r{/+\z}, '')
+        operation_path = operation['Path'].to_s.sub(%r{\A/+}, '')
+        {
+          'name' => resource['Name'].to_s, 'method' => operation['HttpMethod'].to_s.upcase,
+          'path' => "/#{[service_path, operation_path].reject(&:empty?).join('/')}",
+          'microflow' => microflow, 'success_status' => rest_success_status(operation['SuccessStatusCode'])
+        }
+      end
+
+      def rest_success_status(value)
+        return 200 if value.nil? || value.to_s.empty?
+
+        raw = value.is_a?(Hash) ? (value['Value'] || value['Name'] || value['$Type']) : value
+        integer = raw.to_s[/\d{3}/]
+        return integer.to_i if integer
+
+        REST_STATUS_CODES.fetch(raw.to_s.gsub(/[^A-Za-z]/, '').downcase, 200)
+      end
+
+      def export_nanoflow(flow, mod, root)
+        qualified = "#{mod.name}.#{flow.name}"
+        relative = File.join('frontend', 'src', 'nanoflows', root, "#{underscore(flow.name)}.ts")
+        write(relative, nanoflow_typescript(flow, qualified))
+        entry = {
+          'name' => qualified, 'id' => flow.id, 'path' => relative,
+          'kind' => 'nanoflow', 'runtime' => 'frontend'
+        }
+        @nanoflow_entries << entry.merge('import_name' => "Nanoflow#{@nanoflow_entries.size}")
+        add_coverage(flow.id, qualified, 'nanoflow', relative, 'frontend_executable')
+        entry
+      end
+
+      def nanoflow_typescript(flow, qualified)
+        plan = nanoflow_plan(flow, qualified)
+        parameters = nanoflow_parameter_type(flow.parameters)
+        result_type = nanoflow_result_type(flow.respond_to?(:return_type) ? flow.return_type : nil)
+        start = plan.fetch('objects').find { _1['type'] == 'StartEvent' }
+        cases = plan.fetch('objects').filter_map do |object|
+          nanoflow_typescript_case(object, plan.fetch('flows'), result_type)
+        end
+        <<~TS
+          import { defineNanoflow } from '../../runtime/nanoflow';
+          import type { EntityTypeMap, NanoflowParameters, RuntimeValue } from '../../types';
+
+          type Parameters = NanoflowParameters & #{parameters};
+
+          export default defineNanoflow<Parameters, #{result_type}>({
+            name: #{JSON.generate(qualified)},
+            id: #{JSON.generate(flow.id.to_s)},
+            parameters: #{JSON.generate(plan.fetch('parameters'))}
+          }, runtime => {
+            let current = #{JSON.generate(start && start['id'])};
+            for (let step = 0; step < 10_000; step += 1) {
+              switch (current) {
+          #{cases.join("\n")}
+                default:
+                  throw runtime.missing(current);
+              }
+            }
+            throw runtime.exceeded();
+          });
+        TS
+      end
+
+      def nanoflow_parameter_type(parameters)
+        fields = parameters.filter_map do |parameter|
+          next unless parameter.is_a?(Hash)
+
+          "  #{JSON.generate(parameter['Name'].to_s)}: #{typescript_flow_type(parameter['VariableType'])};"
+        end
+        "{\n#{fields.join("\n")}\n}"
+      end
+
+      def nanoflow_result_type(type)
+        typescript_flow_type('$Type' => type.to_s).delete_suffix(' | null')
+      end
+
+      def typescript_flow_type(type)
+        type = {} unless type.is_a?(Hash)
+        kind = (type['$Type'] || type['Type']).to_s
+        entity = type['Entity'].to_s
+        return "EntityTypeMap[#{JSON.generate(entity)}] | null" if kind.end_with?('ObjectType') && !entity.empty?
+        return "Array<EntityTypeMap[#{JSON.generate(entity)}]>" if kind.end_with?('ListType') && !entity.empty?
+        return 'boolean' if kind.match?(/Boolean/)
+        return 'number' if kind.match?(/Integer|Long|Decimal|Float/)
+        return 'string' if kind.match?(/String|DateTime|Enumeration/)
+        return 'undefined' if kind.empty? || kind.match?(/Void|MicroflowReturnType/)
+
+        'RuntimeValue | undefined'
+      end
+
+      def nanoflow_typescript_case(object, flows, result_type)
+        return if object['type'] == 'MicroflowParameter'
+
+        outgoing = flows.select { _1['origin'] == object['id'] }
+        body = case object['type']
+               when 'EndEvent' then nanoflow_end_source(object, result_type)
+               when 'ExclusiveSplit' then nanoflow_split_source(object, outgoing)
+               when 'ActionActivity' then nanoflow_action_source(object['action']) + nanoflow_next_source(outgoing)
+               else nanoflow_next_source(outgoing)
+               end
+        <<~TS.chomp
+                case #{JSON.generate(object['id'])}: {
+          #{indent(body, 10)}
+                }
+        TS
+      end
+
+      def nanoflow_end_source(object, result_type)
+        expression = JSON.generate(object['return'].to_s)
+        value = case result_type
+                when 'boolean' then "runtime.boolean(#{expression})"
+                when 'number' then "runtime.number(#{expression})"
+                when 'string' then "runtime.string(#{expression})"
+                when 'undefined' then 'undefined'
+                else "runtime.value(#{expression}) as #{result_type}"
+                end
+        "return runtime.complete(#{value});"
+      end
+
+      def nanoflow_split_source(object, flows)
+        cases = flows.reject { _1['case'].to_s.empty? }.map do |edge|
+          "case #{JSON.generate(edge['case'].to_s)}: current = #{JSON.generate(edge['destination'])}; break;"
+        end
+        fallback = flows.find { _1['case'].to_s.empty? }
+        default = if fallback
+                    "current = #{JSON.generate(fallback['destination'])}; break;"
+                  else
+                    "throw runtime.stopped(#{JSON.generate(object['type'])});"
+                  end
+        <<~TS.chomp
+          switch (String(runtime.condition(#{JSON.generate(object['condition'].to_s)}))) {
+          #{indent(cases.join("\n"), 2)}
+            default: #{default}
+          }
+          break;
+        TS
+      end
+
+      def nanoflow_action_source(action)
+        action ||= {}
+        case action['type']
+        when 'LogMessage'
+          "runtime.log(#{JSON.generate(action['message'].to_s)});\n"
+        when 'CreateVariable', 'ChangeVariable'
+          "runtime.set(#{JSON.generate(action['variable'].to_s)}, " \
+            "runtime.value(#{JSON.generate(action['value'].to_s)}));\n"
+        when 'Change'
+          changes = action.fetch('changes', []).to_h do |change|
+            [change['member'].to_s, change['value'].to_s]
+          end
+          "runtime.change(#{JSON.generate(action['variable'].to_s)}, #{JSON.generate(changes)});\n"
+        else
+          "throw runtime.unsupported(#{JSON.generate(action['type'].to_s)});\n"
+        end
+      end
+
+      def nanoflow_next_source(flows)
+        edge = flows.first
+        return "throw runtime.stopped('node');" unless edge
+
+        "current = #{JSON.generate(edge['destination'])};\nbreak;"
+      end
+
+      def indent(source, spaces)
+        prefix = ' ' * spaces
+        source.to_s.lines.map { "#{prefix}#{_1}" }.join.chomp
+      end
+
+      def nanoflow_plan(flow, qualified)
+        {
+          'name' => qualified, 'id' => flow.id,
+          'parameters' => flow.parameters.filter_map { _1['Name'] if _1.is_a?(Hash) },
+          'objects' => flow.objects.filter_map { nanoflow_object(_1) },
+          'flows' => flow.flows.reject { _1['IsErrorHandler'] == true }.map do |edge|
+            {
+              'origin' => native_identifier(edge['OriginPointer']),
+              'destination' => native_identifier(edge['DestinationPointer']),
+              'case' => nanoflow_case(edge)
+            }
+          end
+        }
+      end
+
+      def nanoflow_object(object)
+        return unless object.is_a?(Hash)
+
+        type = object['$Type'].to_s.delete_prefix('Microflows$')
+        result = { 'id' => native_identifier(object), 'type' => type }
+        result['return'] = object['ReturnValue'].to_s if type == 'EndEvent'
+        result['condition'] = object.dig('SplitCondition', 'Expression').to_s if type == 'ExclusiveSplit'
+        result['action'] = nanoflow_action(object['Action']) if type == 'ActionActivity'
+        result
+      end
+
+      def nanoflow_action(action)
+        return {} unless action.is_a?(Hash)
+
+        type = action['$Type'].to_s.delete_prefix('Microflows$').delete_suffix('Action')
+        result = { 'type' => type }
+        case type
+        when 'CreateVariable'
+          result.merge!('variable' => action['VariableName'].to_s, 'value' => action['InitialValue'].to_s)
+        when 'ChangeVariable'
+          result.merge!('variable' => action['ChangeVariableName'].to_s, 'value' => action['Value'].to_s)
+        when 'Change'
+          changes = native_items(action['Items']).map do |item|
+            member = (item['Attribute'].to_s.empty? ? item['Association'] : item['Attribute']).to_s
+            { 'member' => member.split(%r{[./]}).last, 'value' => item['Value'].to_s }
+          end
+          result.merge!('variable' => action['ChangeVariableName'].to_s, 'changes' => changes)
+        when 'LogMessage'
+          result['message'] = action.dig('MessageTemplate', 'Text').to_s
+        end
+        result
+      end
+
+      def nanoflow_case(edge)
+        value = native_items(edge['CaseValues']).first || edge['NewCaseValue'] || {}
+        value['$Type'] == 'Microflows$NoCase' ? '' : value['Value'].to_s
+      end
+
+      def native_items(value)
+        IO::BsonCodec.parse_array(value)[:items]
+      rescue StandardError
+        Array(value).drop(value.is_a?(Array) && value.first.is_a?(Integer) ? 1 : 0)
+      end
+
+      def native_identifier(value)
+        IO::BsonCodec.extract_id(value.is_a?(Hash) ? value['$ID'] : value).to_s
+      end
+
+      def export_page(page, mod, namespace, root)
+        class_name = ruby_constant(page.name, suffix: 'Page')
+        relative = File.join('app', 'pages', root, "#{underscore(page.name)}_page.rb")
+        qualified = "#{mod.name}.#{page.name}"
+        widgets = page.widgets.map { widget_manifest(_1) }
+        write(
+          relative,
+          page_source(namespace, class_name, qualified, page.id, page.title, widgets,
+                      appearance_class: page.appearance_class,
+                      appearance_style: page.appearance_style,
+                      data_source: page.data_source)
+        )
+        add_coverage(page.id, qualified, 'page', relative, 'native_projection_source_preserved')
+        manifest = {
+          'name' => qualified, 'id' => page.id, 'title' => page.title,
+          'ruby_class' => "#{namespace}::#{class_name}", 'path' => relative,
+          'appearance_class' => page.appearance_class,
+          'appearance_style' => page.appearance_style,
+          'data_source' => page.data_source,
+          'allowed_module_roles' => page.allowed_module_roles.map(&:to_s),
+          'widgets' => widgets
+        }
+        export_frontend_page(manifest, root, page.name)
+        manifest
+      end
+
+      def export_frontend_page(manifest, root, page_name)
+        relative = File.join('frontend', 'src', 'pages', root, "#{underscore(page_name)}.tsx")
+        component = "#{typescript_identifier(manifest.fetch('name'))}Page"
+        definition = manifest.slice('name', 'title', 'appearance_class', 'appearance_style', 'widgets')
+        declarations = []
+        compiled_widgets = definition.fetch('widgets').each_with_index.map do |widget, index|
+          frontend_widget_jsx(widget, [index], declarations, 6)
+        end
+        widget_tree = compiled_widgets.map(&:first).join("\n")
+        definition_source = frontend_page_definition_source(definition, compiled_widgets.map(&:last))
+        write(relative, <<~TS)
+          import type { PageComponentProps, PageDefinition, WidgetDefinition } from '../../types';
+
+          #{declarations.join("\n\n")}
+
+          export const definition = #{definition_source} satisfies PageDefinition;
+
+          export default function #{component}({ busy, Widget: PageWidget }: PageComponentProps) {
+            return <main className="mxrb-page region-content mx-scrollcontainer-wrapper"
+              aria-busy={busy} data-page={definition.name}>
+          #{widget_tree}
+            </main>;
+          }
+        TS
+        @page_entries << {
+          'name' => manifest.fetch('name'), 'path' => relative,
+          'import_name' => component
+        }
+      end
+
+      def frontend_widget_jsx(widget, path, declarations, indent)
+        identifier = "widget#{path.join('_')}"
+        children = Array(widget['children'])
+        compiled = widget.reject { |key, _value| key == 'children' }
+        nested_widgets = children.each_with_index.map do |child, index|
+          frontend_widget_jsx(child, path + [index], declarations, indent + 2)
+        end
+        source = JSON.pretty_generate(compiled)
+        unless nested_widgets.empty?
+          source = source.sub(/\n}\z/, ",\n  \"children\": [#{nested_widgets.map(&:last).join(', ')}]\n}")
+        end
+        declarations << "const #{identifier} = #{source} satisfies WidgetDefinition;"
+        padding = ' ' * indent
+        return ["#{padding}<PageWidget widget={#{identifier}} index={#{path.last}} />", identifier] if children.empty?
+
+        nested = nested_widgets.map(&:first).join("\n")
+        jsx = <<~TS.chomp
+          #{padding}<PageWidget widget={#{identifier}} index={#{path.last}}>
+          #{nested}
+          #{padding}</PageWidget>
+        TS
+        [jsx, identifier]
+      end
+
+      def frontend_page_definition_source(definition, widget_identifiers)
+        source = JSON.pretty_generate(definition.reject { |key, _value| key == 'widgets' })
+        source.sub(/\n}\z/, ",\n  \"widgets\": [#{widget_identifiers.join(', ')}]\n}")
+      end
+
+      def attribute_manifest(attribute)
+        value = {
+          'name' => attribute.name, 'ruby_name' => ruby_method_name(attribute.name),
+          'type' => attribute.type.to_s, 'required' => attribute.required == true,
+          'default' => attribute.default_value, 'id' => attribute.id
+        }
+        enumeration = native_identifier(attribute.respond_to?(:enumeration) ? attribute.enumeration : nil)
+        value['enumeration'] = enumeration unless enumeration.empty?
+        value
+      end
+
+      def enumeration_manifest(mod, enumeration)
+        name = enumeration['Name'].to_s
+        {
+          'name' => "#{mod.name}.#{name}",
+          'id' => native_identifier(enumeration['$ID']),
+          'values' => native_items(enumeration['Values']).map do |value|
+            value_name = value['Name'].to_s
+            { 'name' => value_name, 'caption' => translated_caption(value['Caption'], value_name) }
+          end
+        }
+      end
+
+      def translated_caption(caption, fallback)
+        translation = native_items(caption.is_a?(Hash) ? caption['Items'] : nil).first
+        text = translation.is_a?(Hash) ? translation['Text'].to_s : ''
+        text.empty? ? fallback : text
+      end
+
+      def widget_manifest(widget)
+        options = runtime_value(widget.fetch(:options, {}))
+        value = { 'type' => runtime_widget_type(widget), 'name' => widget.fetch(:name, '').to_s }
+        value['options'] = options unless options.empty?
+        caption = options['caption']
+        value['caption'] = caption unless caption.to_s.empty?
+        events = runtime_value(widget.fetch(:events, []))
+        value['events'] = events unless events.empty?
+        children = Array(widget[:children]).map { widget_manifest(_1) }
+        value['children'] = children unless children.empty?
+        value
+      end
+
+      def runtime_widget_type(widget)
+        type = widget.fetch(:type).to_s
+        return type unless type == 'text_box'
+
+        path = widget.dig(:options, :attribute).to_s.tr('/', '.')
+        module_name, entity_name, attribute_name = path.split('.', 3)
+        return type unless attribute_name
+
+        entity = @project.modules.find { _1.name == module_name }
+                         &.entities&.find { _1.name == entity_name }
+        attribute = entity&.attributes&.find { _1.name == attribute_name }
+        %i[integer long decimal autonumber].include?(attribute&.type) ? 'number_input' : type
+      end
+
+      def runtime_value(value)
+        case value
+        when Hash
+          value.each_with_object({}) do |(key, child), result|
+            next if key.to_s == 'deep_structure'
+
+            result[key.to_s] = runtime_value(child)
+          end
+        when Array then value.map { runtime_value(_1) }
+        when Symbol then value.to_s
+        when String, Numeric, TrueClass, FalseClass, NilClass then value
+        else value.to_s
+        end
+      end
+
+      def entity_source(namespace, class_name, qualified, id, attributes, dto:, persistable:)
+        declarations = attributes.map do |attribute|
+          "    attribute :#{attribute.fetch('ruby_name')}, type: :#{attribute.fetch('type')}, " \
+            "mendix_name: #{attribute.fetch('name').inspect}, required: #{attribute.fetch('required')}, " \
+            "default: #{attribute.fetch('default').inspect}"
+        end
+        <<~RUBY
+          # frozen_string_literal: true
+
+          module #{namespace}
+            class #{class_name} < Mxrb::RubyApp::#{dto ? 'DTO' : 'Record'}
+              mendix_name #{qualified.inspect}, id: #{id.inspect}
+              persistence #{persistable}
+          #{declarations.join("\n")}
+            end
+          end
+        RUBY
+      end
+
+      def service_source(namespace, class_name, qualified, id)
+        <<~RUBY
+          # frozen_string_literal: true
+
+          module #{namespace}
+            class #{class_name} < Mxrb::RubyApp::Service
+              mendix_name #{qualified.inspect}, id: #{id.inspect}
+
+              def call(**arguments)
+                native_call(arguments)
+              end
+            end
+          end
+        RUBY
+      end
+
+      def page_source(namespace, class_name, qualified, id, title, widgets,
+                      appearance_class:, appearance_style:, data_source:)
+        <<~RUBY
+          # frozen_string_literal: true
+
+          module #{namespace}
+            class #{class_name} < Mxrb::RubyApp::Page
+              mendix_name #{qualified.inspect}, id: #{id.inspect}
+              configure title: #{title.inspect}, widgets: #{widgets.inspect},
+                        appearance_class: #{appearance_class.inspect},
+                        appearance_style: #{appearance_style.inspect},
+                        data_source: #{data_source.inspect}
+            end
+          end
+        RUBY
+      end
+
+      def write_support_files
+        write('Gemfile', gemfile)
+        write('.gitignore', ruby_gitignore)
+        write('.env.example', ruby_env_example)
+        %w[development qa staging production].each do |name|
+          write(File.join('config', 'environments', "#{name}.env.example"), environment_example(name))
+        end
+        write('project.rb', project_source)
+        write(File.join('config', 'application.rb'), application_source)
+        write(File.join('config', 'adapters.rb'), adapters_source)
+        write(File.join('bin', 'server'), server_source)
+        File.chmod(0o755, File.join(@output_dir, 'bin', 'server'))
+        write(File.join('frontend', 'package.json'), frontend_package)
+        write(File.join('frontend', 'vite.config.ts'), vite_config)
+        write(File.join('frontend', 'tsconfig.json'), frontend_tsconfig)
+        write(File.join('frontend', 'index.html'), frontend_index)
+        write(File.join('frontend', 'src', 'vite-env.d.ts'), "/// <reference types=\"vite/client\" />\n")
+        write(File.join('frontend', 'src', 'main.tsx'), frontend_main)
+        write(File.join('frontend', 'src', 'types.ts'), frontend_types)
+        write(File.join('frontend', 'src', 'api', 'client.ts'), frontend_api_client)
+        write(File.join('frontend', 'src', 'runtime', 'nanoflow.ts'), frontend_nanoflow_runtime)
+        write(File.join('frontend', 'src', 'runtime', 'marketplace.tsx'), frontend_marketplace_runtime)
+        write(File.join('frontend', 'src', 'nanoflows.ts'), frontend_nanoflows)
+        write(File.join('frontend', 'src', 'pages.ts'), frontend_pages)
+        write(File.join('frontend', 'src', 'app', 'App.tsx'), frontend_app)
+        write(File.join('frontend', 'src', 'App.tsx'), "export { default } from './app/App';\n")
+        write(File.join('frontend', 'src', 'app.css'), frontend_css)
+        write('README.md', readme)
+      end
+
+      def copy_frontend_theme
+        root = File.join(@output_dir, 'frontend', 'src', 'mendix')
+        FileUtils.mkdir_p(root)
+        %w[theme themesource].each do |directory|
+          source = File.join(@mendix_sidecar, directory)
+          next unless File.directory?(source)
+
+          copy_frontend_web_assets(source, File.join(root, directory))
+        end
+        fallback = File.join(root, 'theme', 'web', 'main.scss')
+        write(relative(fallback), '') unless File.file?(fallback)
+      end
+
+      def copy_frontend_web_assets(source, destination)
+        FileUtils.rm_rf(destination)
+        Find.find(source) do |path|
+          relative_path = path.delete_prefix("#{source}/")
+          Find.prune if File.directory?(path) && relative_path.split(File::SEPARATOR).include?('native')
+          next if path == source
+          next if File.file?(path) && %w[.js .jsx].include?(File.extname(path).downcase)
+
+          target = File.join(destination, relative_path)
+          if File.directory?(path)
+            FileUtils.mkdir_p(target)
+          else
+            FileUtils.mkdir_p(File.dirname(target))
+            FileUtils.cp(path, target)
+          end
+        end
+      end
+
+      def write_manifest(project, modules, runtime_mpr)
+        native_coverage(project)
+        payload = {
+          'format_version' => 1, 'mode' => 'ruby',
+          'project' => { 'name' => project.name, 'mendix_version' => project.mendix_version },
+          'navigation' => runtime_value(project.navigation.to_h),
+          'source' => {
+            'name' => File.basename(@mpr_path),
+            'sha256' => Digest::SHA256.file(@mpr_path).hexdigest
+          },
+          'modules' => modules, 'coverage' => @coverage,
+          'frontend' => {
+            'framework' => 'react', 'language' => 'typescript', 'bundler' => 'vite',
+            'source' => 'frontend/src', 'types' => 'frontend/src/types.ts',
+            'typecheck' => 'npm run typecheck', 'build' => 'frontend/dist'
+          },
+          'round_trip' => {
+            'compiler' => 'project.rb',
+            'mendix_project' => relative(File.join(@mendix_sidecar, 'project.rb')),
+            'runtime_mpr' => relative(runtime_mpr),
+            'editable_mendix_source' => relative(@mendix_sidecar)
+          }
+        }
+        preset = Preset.detect(@output_dir)
+        payload['ruby_stack'] = Preset.manifest(preset) if preset
+        write(MANIFEST_PATH, JSON.pretty_generate(payload) << "\n")
+      end
+
+      def native_coverage(project)
+        known_ids = @coverage.to_h { [_1.fetch('id').to_s, true] }
+        project.all_units.each do |unit|
+          next if known_ids[unit.fetch('UnitID').to_s]
+
+          document = project.parse_bson(unit)
+          name = document['Name'] || document['name'] || document['$Type']
+          add_coverage(
+            unit['UnitID'], name.to_s, document['$Type'].to_s,
+            relative(@mendix_sidecar), 'preserved_native'
+          )
+        end
+      end
+
+      def add_coverage(id, name, kind, path, status)
+        @coverage << {
+          'id' => id.to_s, 'name' => name.to_s, 'kind' => kind.to_s,
+          'ruby_path' => path, 'status' => status
+        }
+      end
+
+      def ruby_constant(value, suffix: nil)
+        parts = value.to_s.gsub(/([a-z\d])([A-Z])/, '\\1_\\2')
+                     .split(/[^A-Za-z0-9]+/).reject(&:empty?)
+        constant = parts.map { _1[0].upcase + _1[1..].to_s.downcase }.join
+        constant = "Artifact#{constant}" if constant.empty? || constant.match?(/\A\d/)
+        constant = "#{constant}#{suffix}" if suffix && !constant.end_with?(suffix)
+        constant
+      end
+
+      def ruby_method_name(value)
+        name = underscore(value)
+        name = "field_#{name}" if name.match?(/\A\d/) || RUBY_KEYWORDS.include?(name) || RECORD_RESERVED.include?(name)
+        name.empty? ? 'field' : name
+      end
+
+      def underscore(value)
+        value.to_s.gsub(/([A-Z]+)([A-Z][a-z])/, '\\1_\\2')
+             .gsub(/([a-z\d])([A-Z])/, '\\1_\\2')
+             .gsub(/[^A-Za-z0-9]+/, '_').gsub(/\A_+|_+\z/, '').downcase
+      end
+
+      def relative(path)
+        Pathname.new(path).relative_path_from(Pathname.new(@output_dir)).to_s
+      end
+
+      def write(relative_path, contents)
+        path = File.join(@output_dir, relative_path)
+        FileUtils.mkdir_p(File.dirname(path))
+        File.write(path, contents)
+      end
+
+      def gemfile
+        <<~RUBY
+          # frozen_string_literal: true
+
+          source 'https://rubygems.org'
+          gem 'mxrb'
+        RUBY
+      end
+
+      def ruby_gitignore
+        <<~TEXT
+          .env
+          .env.*
+          !.env.example
+          config/environments/*.env
+          !config/environments/*.env.example
+          .mxrb/runtime/*.sqlite3
+          frontend/node_modules/
+          frontend/dist/
+        TEXT
+      end
+
+      def ruby_env_example
+        <<~TEXT
+          # Base values; environment profiles override this file.
+          MXRB_ENV=development
+        TEXT
+      end
+
+      def environment_example(name)
+        <<~TEXT
+          # Copy to #{name}.env. Process ENV has highest precedence.
+          MXRB_DATABASE_PATH=.mxrb/runtime/#{name}.sqlite3
+          MXRB_SHARED_STORE_PATH=.mxrb/runtime/#{name}-shared.sqlite3
+          MXRB_SESSION_TTL=3600
+          MXRB_SCHEDULER_LEASE_TTL=300
+          MXRB_ALLOW_DESTRUCTIVE_MIGRATIONS=false
+          MXRB_AUTH_TOKENS=
+          MXRB_USERS_JSON=
+        TEXT
+      end
+
+      def project_source
+        <<~RUBY
+          # frozen_string_literal: true
+
+          require 'mxrb'
+
+          mendix_version = #{@project.mendix_version.inspect}
+          Mxrb::RubyApp.compile(__dir__, mendix_version:)
+        RUBY
+      end
+
+      def application_source
+        <<~RUBY
+          # frozen_string_literal: true
+
+          require 'mxrb'
+
+          MXRB_APPLICATION_ROOT = File.expand_path('..', __dir__)
+        RUBY
+      end
+
+      def adapters_source
+        <<~RUBY
+          # frozen_string_literal: true
+
+          # Register only the integrations this application uses. Credentials
+          # belong in ignored environment files or a deployment secret manager.
+          #
+          # Mxrb::RubyApp::Registry.register_adapter(:app_service) do |name, document, variables|
+          #   MyAppServiceClient.call(name, document:, variables:)
+          # end
+          #
+          # Legacy Custom Actions use Ruby implementations only. Register every
+          # permitted action explicitly by its qualified Mendix name.
+          #
+          # Mxrb::RubyApp::Registry.register_java_custom_action('MyModule.MyAction') do |arguments|
+          #   MyRubyAction.call(arguments)
+          # end
+          #
+          # Supported kinds: :app_service, :web_service, :import_xml,
+          # :import_mapping, :export_mapping, and :document.
+        RUBY
+      end
+
+      def server_source
+        <<~RUBY
+          #!/usr/bin/env ruby
+          # frozen_string_literal: true
+
+          require_relative '../config/application'
+
+          host = ENV.fetch('HOST', '127.0.0.1')
+          port = Integer(ENV.fetch('PORT', '9292'))
+          frontend_port = Integer(ENV.fetch('FRONTEND_PORT', '5173'))
+          supervisor = Mxrb::RubyApp::Supervisor.new(
+            MXRB_APPLICATION_ROOT, host:, api_port: port, frontend_port:
+          )
+          puts "[mxrb] Ruby API: http://\#{host}:\#{port}"
+          puts "[mxrb] React + Vite: http://\#{host}:\#{frontend_port}"
+          trap('INT') { Thread.new { supervisor.shutdown } }
+          supervisor.start
+        RUBY
+      end
+
+      def frontend_package
+        JSON.pretty_generate(
+          'name' => underscore(@project.name), 'private' => true, 'version' => '0.0.0',
+          'type' => 'module',
+          'scripts' => {
+            'dev' => 'vite', 'typecheck' => 'tsc --noEmit',
+            'build' => 'npm run typecheck && vite build', 'preview' => 'vite preview'
+          },
+          'dependencies' => { 'react' => '^19.2.8', 'react-dom' => '^19.2.8' },
+          'devDependencies' => {
+            '@types/node' => '^26.2.0', '@types/react' => '^19.2.18',
+            '@types/react-dom' => '^19.2.4', '@vitejs/plugin-react' => '^6.0.5',
+            'sass-embedded' => '^1.90.0', 'typescript' => '^7.0.2', 'vite' => '^8.2.1'
+          }
+        ) << "\n"
+      end
+
+      def frontend_tsconfig
+        JSON.pretty_generate(
+          'compilerOptions' => {
+            'target' => 'ES2022', 'useDefineForClassFields' => true,
+            'lib' => %w[ES2022 DOM DOM.Iterable], 'allowJs' => false,
+            'skipLibCheck' => true, 'esModuleInterop' => true,
+            'allowSyntheticDefaultImports' => true, 'strict' => true,
+            'noImplicitAny' => true, 'useUnknownInCatchVariables' => true,
+            'forceConsistentCasingInFileNames' => true, 'module' => 'ESNext',
+            'moduleResolution' => 'Bundler', 'resolveJsonModule' => true,
+            'isolatedModules' => true, 'noEmit' => true, 'jsx' => 'react-jsx'
+          },
+          'include' => ['src', 'vite.config.ts']
+        ) << "\n"
+      end
+
+      def vite_config
+        <<~JS
+          import { defineConfig } from 'vite';
+          import react from '@vitejs/plugin-react';
+
+          const apiPort = process.env.MXRB_API_PORT || '9292';
+
+          export default defineConfig({
+            plugins: [react()],
+            css: {
+              preprocessorOptions: {
+                scss: {
+                  // Mendix Atlas still depends on the legacy global Sass module model.
+                  silenceDeprecations: ['import', 'global-builtin']
+                }
+              }
+            },
+            server: { proxy: { '/api': `http://127.0.0.1:${apiPort}` } }
+          });
+        JS
+      end
+
+      def frontend_index
+        <<~HTML
+          <!doctype html>
+          <html lang="en">
+            <head>
+              <meta charset="utf-8">
+              <meta name="viewport" content="width=device-width,initial-scale=1">
+              <title>#{escape_html(@project.name)} · MXRB Ruby</title>
+            </head>
+            <body>
+              <div id="root"></div>
+              <script type="module" src="/src/main.tsx"></script>
+            </body>
+          </html>
+        HTML
+      end
+
+      def frontend_main
+        <<~JS
+          import React from 'react';
+          import { createRoot } from 'react-dom/client';
+          import App from './app/App';
+          import './app.css';
+          import './mendix/theme/web/main.scss';
+
+          const root = document.getElementById('root');
+          if (!root) throw new Error('MXRB frontend root element is missing');
+
+          createRoot(root).render(
+            <React.StrictMode><App /></React.StrictMode>
+          );
+        JS
+      end
+
+      def frontend_nanoflows
+        imports = @nanoflow_entries.map do |entry|
+          relative = entry.fetch('path').delete_prefix('frontend/src/')
+          "import #{entry.fetch('import_name')} from './#{relative.delete_suffix('.ts')}';"
+        end
+        mappings = @nanoflow_entries.map do |entry|
+          "  #{entry.fetch('name').inspect}: #{entry.fetch('import_name')}"
+        end
+        <<~TS
+          import type { RegisteredNanoflow } from './types';
+
+          #{imports.join("\n")}
+
+          const nanoflows: Record<string, RegisteredNanoflow> = {
+          #{mappings.join(",\n")}
+          };
+
+          export default nanoflows;
+        TS
+      end
+
+      def frontend_pages
+        imports = @page_entries.map do |entry|
+          relative = entry.fetch('path').delete_prefix('frontend/src/')
+          "import #{entry.fetch('import_name')} from './#{relative.delete_suffix('.tsx')}';"
+        end
+        mappings = @page_entries.map do |entry|
+          "  #{JSON.generate(entry.fetch('name'))}: #{entry.fetch('import_name')}"
+        end
+        <<~TS
+          import type { ComponentType } from 'react';
+          import type { PageComponentProps } from './types';
+
+          #{imports.join("\n")}
+
+          const pages: Record<string, ComponentType<PageComponentProps>> = {
+          #{mappings.join(",\n")}
+          };
+
+          export default pages;
+        TS
+      end
+
+      def frontend_api_client
+        <<~'TS'
+          import type { ApiFailure, RuntimeValue } from '../types';
+
+          const errorMessage = (payload: unknown, status: number): string => {
+            if (payload && typeof payload === 'object' && 'error' in payload) {
+              const error = payload.error;
+              if (error && typeof error === 'object' && 'message' in error) return String(error.message);
+            }
+            return `HTTP ${status}`;
+          };
+
+          export const api = async <T = RuntimeValue | undefined>(
+            path: string, options: RequestInit = {}, token: string | null = null
+          ): Promise<T> => {
+            const headers = new Headers(options.headers);
+            headers.set('Content-Type', 'application/json');
+            if (token) headers.set('Authorization', `Bearer ${token}`);
+            const response = await fetch(path, { ...options, headers });
+            const payload: unknown = await response.json();
+            if (!response.ok) {
+              const error: ApiFailure = new Error(errorMessage(payload, response.status));
+              error.status = response.status;
+              throw error;
+            }
+            return payload as T;
+          };
+        TS
+      end
+
+      def frontend_nanoflow_runtime
+        <<~'TS'
+          import type {
+            EntityRecord, NanoflowExecution, NanoflowMetadata, NanoflowParameters,
+            RegisteredNanoflow, RuntimeValue
+          } from '../types';
+
+          type ChangeExpressions = Record<string, string>;
+          type Comparable = string | number;
+
+          const isRecord = (value: RuntimeValue | undefined): value is EntityRecord => {
+            return Boolean(value && typeof value === 'object'
+              && 'id' in value && 'type' in value && 'attributes' in value);
+          };
+
+          const attributes = (value: RuntimeValue | undefined): Record<string, RuntimeValue | undefined> => {
+            return isRecord(value) ? value.attributes : {};
+          };
+
+          const memberName = (value: string): string => value.split(/[./]/).at(-1) || value;
+
+          export class NanoflowRuntime<P extends NanoflowParameters = NanoflowParameters> {
+            readonly variables: NanoflowParameters;
+            readonly #changes = new Map<string, EntityRecord>();
+
+            constructor(parameters: P, readonly metadata: NanoflowMetadata) {
+              this.variables = structuredClone(parameters);
+            }
+
+            value(source: string | undefined, context: EntityRecord | null = null): RuntimeValue | undefined {
+              const text = (source || '').trim();
+              if (/\s(?:and|or)\s|(?:=|!=|>=|<=|>|<)/.test(text)) {
+                return this.condition(text, context);
+              }
+              const wrapped = text.match(/^toString\((.*)\)$/);
+              if (wrapped) return this.string(wrapped[1], context);
+              if (text === '$currentObject') return context;
+              const variable = text.match(/^\$([A-Za-z_]\w*)$/);
+              if (variable) return this.variables[variable[1]] ?? context;
+              const member = text.match(/^\$([A-Za-z_]\w*)\/([A-Za-z_][\w.]*)$/);
+              if (member) {
+                return attributes(this.variables[member[1]] ?? context)[memberName(member[2])];
+              }
+              if (text === 'empty') return null;
+              if (text === 'true') return true;
+              if (text === 'false') return false;
+              if (/^-?\d+(?:\.\d+)?$/.test(text)) return Number(text);
+              if (/^'.*'$/.test(text)) return text.slice(1, -1).replaceAll("''", "'");
+              return text;
+            }
+
+            condition(source: string | undefined, context: EntityRecord | null = null): boolean {
+              const text = (source || '').trim().replace(/^\((.*)\)$/, '$1');
+              const orParts = text.split(/\s+or\s+/);
+              if (orParts.length > 1) return orParts.some(part => this.condition(part, context));
+              const andParts = text.split(/\s+and\s+/);
+              if (andParts.length > 1) return andParts.every(part => this.condition(part, context));
+              const comparison = text.match(/^(.*?)\s*(=|!=|>=|<=|>|<)\s*(.*?)$/);
+              if (!comparison) return Boolean(this.value(text, context));
+              const left = this.value(comparison[1], context);
+              const right = this.value(comparison[3], context);
+              switch (comparison[2]) {
+                case '=': return left === right;
+                case '!=': return left !== right;
+                case '>': return this.comparable(left) > this.comparable(right);
+                case '<': return this.comparable(left) < this.comparable(right);
+                case '>=': return this.comparable(left) >= this.comparable(right);
+                case '<=': return this.comparable(left) <= this.comparable(right);
+                default: return false;
+              }
+            }
+
+            boolean(source: string | undefined, context: EntityRecord | null = null): boolean {
+              return this.condition(source, context);
+            }
+
+            number(source: string | undefined, context: EntityRecord | null = null): number {
+              return Number(this.value(source, context));
+            }
+
+            string(source: string | undefined, context: EntityRecord | null = null): string {
+              return String(this.value(source, context) ?? '');
+            }
+
+            set(name: string, value: RuntimeValue | undefined): void {
+              this.variables[name] = value;
+            }
+
+            log(message: string): void {
+              console.info(`[nanoflow] ${message || this.metadata.name}`);
+            }
+
+            change(variable: string, expressions: ChangeExpressions): void {
+              const record = this.variables[variable];
+              if (!isRecord(record)) throw new Error(`Nanoflow object $${variable} is missing`);
+              Object.entries(expressions).forEach(([member, expression]) => {
+                record.attributes[member] = this.value(expression, record);
+              });
+              this.#changes.set(`${record.type}:${record.id}`, record);
+            }
+
+            complete<R>(result: R): NanoflowExecution<R> {
+              return { result, variables: this.variables, changes: [...this.#changes.values()] };
+            }
+
+            missing(current: string | null): Error {
+              return new Error(`Nanoflow ${this.metadata.name} points to missing object ${current || '(none)'}`);
+            }
+
+            stopped(type: string): Error {
+              return new Error(`Nanoflow ${this.metadata.name} stops at ${type}`);
+            }
+
+            unsupported(type: string): Error {
+              return new Error(`Unsupported frontend nanoflow action: ${type || '(empty)'}`);
+            }
+
+            exceeded(): Error {
+              return new Error(`Nanoflow ${this.metadata.name} exceeded 10000 steps`);
+            }
+
+            private comparable(value: RuntimeValue | undefined): Comparable {
+              return typeof value === 'number' ? value : String(value ?? '');
+            }
+          }
+
+          export const defineNanoflow = <P extends NanoflowParameters, R extends RuntimeValue | undefined>(
+            metadata: NanoflowMetadata,
+            compiled: (runtime: NanoflowRuntime<P>) => NanoflowExecution<R> | Promise<NanoflowExecution<R>>
+          ): RegisteredNanoflow => ({
+            ...metadata,
+            execute: async parameters => compiled(new NanoflowRuntime(parameters as P, metadata))
+          });
+        TS
+      end
+
+      def frontend_marketplace_runtime
+        <<~'TS'
+          import { useState } from 'react';
+          import type { ReactNode } from 'react';
+          import type { EntityRecord, RuntimeValue, WidgetDefinition } from '../types';
+
+          export interface MarketplaceWidgetProps {
+            widget: WidgetDefinition;
+            context: EntityRecord | null;
+            children?: ReactNode;
+            onChange(attribute: string | undefined, value: RuntimeValue): unknown;
+          }
+
+          type Properties = Record<string, unknown>;
+
+          const asProperties = (value: unknown): Properties =>
+            value && typeof value === 'object' && !Array.isArray(value) ? value as Properties : {};
+
+          const firstText = (properties: Properties, keys: string[], fallback: string): string => {
+            for (const key of keys) {
+              const value = properties[key];
+              if (typeof value === 'string' && value.trim()) return value;
+              if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+            }
+            return fallback;
+          };
+
+          const findAttribute = (value: unknown): string | undefined => {
+            if (!value || typeof value !== 'object') return undefined;
+            if (Array.isArray(value)) {
+              for (const child of value) {
+                const found = findAttribute(child);
+                if (found) return found;
+              }
+              return undefined;
+            }
+            for (const [key, child] of Object.entries(value as Properties)) {
+              if (/attribute/i.test(key) && typeof child === 'string' && child.includes('.')) return child;
+              const found = findAttribute(child);
+              if (found) return found;
+            }
+            return undefined;
+          };
+
+          const memberName = (value: string | undefined): string =>
+            (value || '').split(/[./]/).pop() || '';
+
+          const numericValue = (value: RuntimeValue | undefined, fallback = 0): number => {
+            const number = Number(value);
+            return Number.isFinite(number) ? number : fallback;
+          };
+
+          const chart = (name: string, children?: ReactNode) => <>
+            <figure className="mxrb-marketplace-chart">
+              <svg viewBox="0 0 240 100" role="img" aria-label={name}>
+                <title>{name}</title>
+                <polyline points="8,82 48,55 88,68 128,25 168,42 228,12" fill="none"
+                  stroke="currentColor" strokeWidth="4" />
+                <line x1="8" y1="90" x2="232" y2="90" stroke="currentColor" />
+              </svg>
+              <figcaption>{name}</figcaption>
+            </figure>
+            {children}
+          </>;
+
+          export function MarketplaceWidget({ widget, context, children, onChange }: MarketplaceWidgetProps) {
+            const options = widget.options || {};
+            const properties = asProperties(options.properties);
+            const id = String(options.widget_id || options.native_type || widget.name).toLowerCase();
+            const name = String(options.widget_name || widget.name);
+            const attribute = findAttribute(properties);
+            const current = context?.attributes?.[memberName(attribute)];
+            const [localValue, setLocalValue] = useState<RuntimeValue>(current ?? 0);
+            const update = (value: RuntimeValue) => {
+              setLocalValue(value);
+              return onChange(attribute, value);
+            };
+            const label = firstText(
+              properties,
+              ['label', 'value', 'caption', 'title', 'legend', 'textMessage', 'alternativeText'],
+              name
+            );
+
+            if (/(area|bar|bubble|column|custom|heatmap|line|pie|time)chart/.test(id)
+                || id.includes('timeseries') || id.includes('heatmap')) return chart(name, children);
+            if (id.includes('progresscircle') || id.includes('progressbar')) {
+              const value = numericValue(current ?? localValue, 50);
+              return <label>{label}<progress value={value} max={100}>{value}%</progress></label>;
+            }
+            if (id.includes('rangeslider')) {
+              const start = Array.isArray(localValue) ? numericValue(localValue[0]) : numericValue(localValue);
+              return <label>{label}<input aria-label={`${label} minimum`} type="range" value={start}
+                onChange={event => update(Number(event.target.value))} /></label>;
+            }
+            if (id.includes('slider')) {
+              return <label>{label}<input aria-label={label} type="range"
+                value={numericValue(current ?? localValue)}
+                onChange={event => update(Number(event.target.value))} /></label>;
+            }
+            if (id.includes('starrating') || id.endsWith('.rating')) {
+              const rating = numericValue(current ?? localValue);
+              return <fieldset className="mxrb-marketplace-rating"><legend>{label}</legend>
+                {[1, 2, 3, 4, 5].map(value => <button type="button" key={value}
+                  aria-label={`${value} stars`} aria-pressed={value <= rating}
+                  onClick={() => update(value)}>{value <= rating ? '★' : '☆'}</button>)}
+              </fieldset>;
+            }
+            if (id.includes('switch')) {
+              return <label><input type="checkbox" checked={Boolean(current ?? localValue)}
+                onChange={event => update(event.target.checked)} />{label}</label>;
+            }
+            if (id.includes('badgebutton')) return <button type="button">{label}</button>;
+            if (id.includes('badge')) return <output className="mxrb-marketplace-badge">{label}</output>;
+            if (id.includes('accordion')) return <details><summary>{label}</summary>{children}</details>;
+            if (id.includes('fieldset')) return <fieldset><legend>{label}</legend>{children}</fieldset>;
+            if (id.includes('accessibilityhelper')) return <div aria-live="polite">{children}</div>;
+            if (id.includes('htmlelement')) return <article>{children || label}</article>;
+            if (id.endsWith('.image')) {
+              const source = firstText(properties, ['imageUrl', 'url'], '');
+              return source ? <img src={source} alt={label} /> : <span>{label}</span>;
+            }
+            if (id.includes('languageselector')) return <label>{label}<select defaultValue="pt-BR">
+              <option value="pt-BR">Português</option><option value="en-US">English</option>
+            </select></label>;
+            if (id.includes('popupmenu')) return <details><summary>{label}</summary>{children || 'Menu'}</details>;
+            if (id.includes('timeline')) return <ol className="mxrb-marketplace-timeline"><li>{label}</li>{children}</ol>;
+            if (id.includes('tooltip')) return <span title={label}>{children || label}</span>;
+            if (id.includes('treenode') || id.includes('treeview')) return <ul><li>{label}{children}</li></ul>;
+            if (id.includes('videoplayer')) {
+              const source = firstText(properties, ['videoUrl', 'videoURL', 'url'], '');
+              return <video controls src={source || undefined}>{label}</video>;
+            }
+            if (id.includes('barcodescanner')) return <button type="button">{label}</button>;
+
+            return <section className="mxrb-marketplace-generic" aria-label={name}>
+              <strong>{name}</strong>{children}
+            </section>;
+          }
+        TS
+      end
+
+      def frontend_types # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
+        modules = @module_manifests || []
+        entities = modules.flat_map { |mod| Array(mod['models']) + Array(mod['dtos']) }
+        pages = modules.flat_map { |mod| Array(mod['pages']) }
+        enumerations = modules.flat_map { |mod| Array(mod['enumerations']) }
+        enumeration_types = enumerations.map do |enumeration|
+          name = typescript_identifier(enumeration.fetch('name'))
+          values = enumeration.fetch('values', []).map { JSON.generate(_1.fetch('name')) }
+          "export type #{name} = #{values.empty? ? 'never' : values.join(' | ')};"
+        end
+        entity_types = entities.flat_map do |entity|
+          name = typescript_identifier(entity.fetch('name'))
+          attributes = entity.fetch('attributes', []).map do |attribute|
+            optional = attribute['required'] ? '' : '?'
+            type = typescript_attribute_type(attribute, enumerations)
+            "  #{JSON.generate(attribute.fetch('name'))}#{optional}: #{type};"
+          end
+          [
+            "export interface #{name}Attributes {\n#{attributes.join("\n")}\n}",
+            "export type #{name}Record = EntityRecord<#{name}Attributes, #{JSON.generate(entity.fetch('name'))}>;"
+          ]
+        end
+        entity_map = entities.map do |entity|
+          "  #{JSON.generate(entity.fetch('name'))}: #{typescript_identifier(entity.fetch('name'))}Record;"
+        end
+        page_types = pages.map do |page|
+          name = typescript_identifier(page.fetch('name'))
+          widgets = page.fetch('widgets', []).flat_map { frontend_widget_names(_1) }.uniq
+          widget_names = widgets.empty? ? 'never' : widgets.map { JSON.generate(_1) }.join(' | ')
+          "export type #{name}WidgetName = #{widget_names};"
+        end
+        page_map = pages.map do |page|
+          name = typescript_identifier(page.fetch('name'))
+          qualified = JSON.generate(page.fetch('name'))
+          "  #{qualified}: PageDefinition<#{qualified}, #{name}WidgetName>;"
+        end
+        <<~TS
+          // Generated from the Mendix domain, page, widget, effect, and API contracts.
+          import type { ComponentType, ReactNode } from 'react';
+
+          export type RuntimeScalar = string | number | boolean | null;
+          export type RuntimeValue = RuntimeScalar | EntityRecord | RuntimeValue[] | { [key: string]: RuntimeValue };
+          export type RuntimeVariables = Record<string, RuntimeValue | undefined>;
+
+          export interface EntityRecord<
+            Attributes extends object = Record<string, RuntimeValue | undefined>,
+            Name extends string = string
+          > {
+            id: string;
+            type: Name;
+            attributes: Attributes;
+            transient?: boolean;
+          }
+
+          export interface WidgetEvent {
+            event: string;
+            kind: 'microflow' | 'nanoflow' | 'page' | string;
+            handler: string;
+            arguments?: Record<string, string>;
+          }
+
+          export interface WidgetColumn {
+            name?: string;
+            attribute?: string;
+            caption?: string;
+          }
+
+          export interface WidgetTab {
+            name: string;
+            caption?: string;
+            widgets?: WidgetDefinition[];
+          }
+
+          export interface WidgetOptions {
+            [key: string]: unknown;
+            association?: string;
+            attribute?: string;
+            caption?: string;
+            class?: string;
+            columns?: WidgetColumn[];
+            display_attribute?: string;
+            dynamic_class?: string;
+            entity?: string;
+            items?: RuntimeValue[] | Record<string, RuntimeValue>;
+            lines?: number;
+            native_type?: string;
+            options?: RuntimeValue[] | Record<string, RuntimeValue>;
+            pageSize?: number;
+            page_size?: number;
+            parameters?: string[];
+            read_only?: boolean;
+            sort?: Array<{ attribute: string; direction?: string }>;
+            style?: string;
+            tabs?: WidgetTab[];
+            target_entity?: string;
+            toolbar?: { buttons?: Array<{ type: string }> };
+            values?: RuntimeValue[] | Record<string, RuntimeValue>;
+            visible?: string | boolean;
+            platform?: string;
+            properties?: Record<string, unknown>;
+            widget_id?: string;
+            widget_name?: string;
+          }
+
+          export interface WidgetDefinition<Name extends string = string> {
+            type: string;
+            name: Name;
+            caption?: string;
+            options?: WidgetOptions;
+            events?: WidgetEvent[];
+            children?: WidgetDefinition[];
+          }
+
+          export interface PageDefinition<Name extends string = string, WidgetName extends string = string> {
+            name: Name;
+            title: string;
+            appearance_class?: string;
+            appearance_style?: string;
+            data_source?: { kind: 'microflow' | 'nanoflow' | string; name: string } | null;
+            widgets: WidgetDefinition<WidgetName>[];
+          }
+
+          export interface PageComponentProps {
+            busy: boolean;
+            Widget: ComponentType<PageWidgetProps>;
+          }
+
+          export interface PageWidgetProps {
+            widget: WidgetDefinition;
+            index: number;
+            children?: ReactNode;
+          }
+
+          export interface AttributeDefinition {
+            name: string;
+            type: string;
+            enumeration?: string;
+          }
+
+          export interface EntityDefinition {
+            name: string;
+            attributes?: AttributeDefinition[];
+          }
+
+          export interface EnumerationDefinition {
+            id: string;
+            name: string;
+            values: Array<{ name: string; caption: string }>;
+          }
+
+          export interface AssociationDefinition {
+            name: string;
+            from_entity: string;
+            to_entity: string;
+            type: string;
+          }
+
+          export interface NavigationItem {
+            page?: string;
+            caption?: Record<string, string>;
+            items?: NavigationItem[];
+          }
+
+          export interface NavigationProfile {
+            kind: string;
+            home_page?: string;
+            items?: NavigationItem[];
+          }
+
+          export interface RuntimeModule {
+            name: string;
+            models?: EntityDefinition[];
+            dtos?: EntityDefinition[];
+            pages: PageDefinition[];
+            enumerations?: EnumerationDefinition[];
+            associations?: AssociationDefinition[];
+          }
+
+          export interface ApplicationSchema {
+            project: { name: string; mendix_version: string };
+            navigation?: { profiles?: NavigationProfile[] };
+            modules: RuntimeModule[];
+          }
+
+          export interface OpenPageEffect {
+            type: 'open_page';
+            page: string;
+            arguments?: Record<string, RuntimeValue>;
+          }
+
+          export interface RuntimeEffect {
+            type: string;
+            [key: string]: RuntimeValue | undefined;
+          }
+
+          export interface InvocationResult {
+            result?: RuntimeValue;
+            context?: EntityRecord | null;
+            effects?: Array<OpenPageEffect | RuntimeEffect>;
+          }
+
+          export interface EntityCollectionResponse<T extends EntityRecord = EntityRecord> {
+            records: T[];
+          }
+
+          export interface Session {
+            id?: string;
+            username?: string;
+            [key: string]: RuntimeValue | undefined;
+          }
+
+          export interface LoginResponse {
+            token: string;
+          }
+
+          export interface ApiFailure extends Error {
+            status?: number;
+          }
+
+          export type ApiRequest = <T = RuntimeValue | undefined>(
+            path: string, options?: RequestInit
+          ) => Promise<T>;
+
+          export type NanoflowParameters = RuntimeVariables;
+
+          export interface NanoflowMetadata {
+            name: string;
+            id: string;
+            parameters: string[];
+          }
+
+          export interface NanoflowExecution<R = RuntimeValue | undefined> {
+            result: R;
+            variables: NanoflowParameters;
+            changes: EntityRecord[];
+          }
+
+          export interface RegisteredNanoflow extends NanoflowMetadata {
+            execute(parameters: NanoflowParameters): Promise<NanoflowExecution>;
+          }
+
+          #{enumeration_types.join("\n")}
+
+          #{entity_types.join("\n\n")}
+
+          export interface EntityTypeMap {
+          #{entity_map.join("\n")}
+          }
+          export type EntityName = keyof EntityTypeMap;
+
+          #{page_types.join("\n")}
+
+          export interface PageTypeMap {
+          #{page_map.join("\n")}
+          }
+          export type PageName = keyof PageTypeMap;
+        TS
+      end # rubocop:enable Metrics/AbcSize, Metrics/MethodLength
+
+      def frontend_widget_names(widget)
+        [widget['name'].to_s, *Array(widget['children']).flat_map { frontend_widget_names(_1) }]
+          .reject(&:empty?)
+      end
+
+      def typescript_attribute_type(attribute, enumerations)
+        if attribute['type'] == 'enum'
+          enumeration = enumerations.find do |candidate|
+            [candidate['id'], candidate['name']].include?(attribute['enumeration'])
+          end
+          return typescript_identifier(enumeration['name']) if enumeration
+        end
+
+        {
+          'boolean' => 'boolean', 'integer' => 'number', 'long' => 'number',
+          'autonumber' => 'number', 'decimal' => 'number', 'datetime' => 'string',
+          'binary' => 'string'
+        }.fetch(attribute['type'].to_s, 'string')
+      end
+
+      def typescript_identifier(value)
+        parts = value.to_s.split(/[^A-Za-z0-9]+/).reject(&:empty?)
+        identifier = parts.map { _1[0].to_s.upcase + _1[1..].to_s }.join
+        return 'MxrbType' if identifier.empty?
+
+        identifier.match?(/\A[A-Za-z_]/) ? identifier : "Mx#{identifier}"
+      end
+
+      def frontend_app
+        <<~'JS'
+          import { useCallback, useEffect, useRef, useState } from 'react';
+          import type { CSSProperties, FormEvent, ReactNode } from 'react';
+          import { api } from '../api/client';
+          import { MarketplaceWidget } from '../runtime/marketplace';
+          import nanoflows from '../nanoflows';
+          import pages from '../pages';
+          import type {
+            ApiFailure, ApiRequest, ApplicationSchema, EntityCollectionResponse, EntityRecord,
+            InvocationResult, LoginResponse, NavigationItem, OpenPageEffect, PageDefinition,
+            PageWidgetProps, RuntimeValue, RuntimeVariables, Session, WidgetDefinition,
+            WidgetEvent, WidgetOptions
+          } from '../types';
+
+          const TOKEN_KEY = 'mxrb.session.token';
+
+          type ErrorHandler = (failure: unknown) => void;
+          type SaveRecord = (
+            record: EntityRecord | null, changes: Record<string, RuntimeValue | undefined>
+          ) => Promise<EntityRecord | null>;
+          type InvokeHandler = (
+            name: string, parameters?: RuntimeVariables, contextOverride?: EntityRecord | null
+          ) => Promise<unknown>;
+          type NavigateHandler = (name: string, context?: EntityRecord | null) => Promise<unknown>;
+          type SelectRecord = (record: EntityRecord | null) => void;
+
+          interface WidgetRuntimeProps {
+            widget: WidgetDefinition;
+            children?: ReactNode;
+            moduleName: string;
+            invoke: InvokeHandler;
+            invokeNanoflow: InvokeHandler;
+            navigate: NavigateHandler;
+            context?: EntityRecord | null;
+            pageContext: EntityRecord | null;
+            revision: number;
+            schema: ApplicationSchema;
+            request: ApiRequest;
+            saveRecord: SaveRecord;
+            onError: ErrorHandler;
+            onMutation: () => void;
+            onSelectRecord: SelectRecord;
+          }
+
+          interface BoundFieldProps {
+            widget: WidgetDefinition;
+            record: EntityRecord | null;
+            schema: ApplicationSchema;
+            request: ApiRequest;
+            saveRecord: SaveRecord;
+            revision: number;
+            onChanged?: (record: EntityRecord) => unknown;
+            onError: ErrorHandler;
+          }
+
+          interface DataGridProps {
+            widget: WidgetDefinition;
+            request: ApiRequest;
+            pageContext: EntityRecord | null;
+            revision: number;
+            onError: ErrorHandler;
+            onMutation: () => void;
+            onRowAction: (record: EntityRecord) => unknown;
+            onSelectRecord: SelectRecord;
+          }
+
+          type GalleryProps = Omit<WidgetRuntimeProps, 'context'>;
+
+          interface LoginProps {
+            onLogin: (username: string, password: string) => Promise<void>;
+            error: ApiFailure | null;
+            busy: boolean;
+          }
+
+          const classes = (...values: Array<string | false | null | undefined>): string =>
+            values.filter(Boolean).join(' ');
+          const isEntityRecord = (value: RuntimeValue | undefined): value is EntityRecord =>
+            Boolean(value && typeof value === 'object' && !Array.isArray(value)
+              && 'id' in value && 'type' in value && 'attributes' in value);
+          const attributes = (object: RuntimeValue | undefined): Record<string, RuntimeValue | undefined> =>
+            isEntityRecord(object) ? object.attributes : {};
+          const memberName = (value: string | undefined): string =>
+            (value || '').split(/[./]/).pop() || '';
+          const entityCollectionPath = (
+            entity: string, association: string | undefined, context: EntityRecord | null
+          ): string => {
+            const path = `/api/entities/${encodeURIComponent(entity)}`;
+            if (!association || !context?.type || !context?.id) return path;
+            const query = new URLSearchParams({
+              association, context_type: context.type, context_id: context.id
+            });
+            return `${path}?${query}`;
+          };
+          const expressionValue = (
+            source: string | undefined, context: EntityRecord | null,
+            variables: RuntimeVariables = {}
+          ): RuntimeValue | undefined => {
+            const text = (source || '').trim();
+            const wrapped = text.match(/^toString\((.*)\)$/);
+            if (wrapped) return String(expressionValue(wrapped[1], context, variables) ?? '');
+            if (text === '$currentObject') return context;
+            const variable = text.match(/^\$([A-Za-z_]\w*)$/);
+            if (variable) return variables[variable[1]] ?? context;
+            const member = text.match(/^\$([A-Za-z_]\w*)\/([A-Za-z_][\w.]*)$/);
+            if (member) return attributes(variables[member[1]] ?? context)[memberName(member[2])];
+            if (text === 'empty') return null;
+            if (text === 'true') return true;
+            if (text === 'false') return false;
+            if (/^'.*'$/.test(text)) return text.slice(1, -1).replaceAll("''", "'");
+            return text;
+          };
+          const conditionValue = (
+            source: string | undefined, context: EntityRecord | null,
+            variables: RuntimeVariables = {}
+          ): boolean => {
+            const text = (source || '').trim().replace(/^\((.*)\)$/, '$1');
+            const orParts = text.split(/\s+or\s+/);
+            if (orParts.length > 1) return orParts.some(part => conditionValue(part, context, variables));
+            const andParts = text.split(/\s+and\s+/);
+            if (andParts.length > 1) return andParts.every(part => conditionValue(part, context, variables));
+            const comparison = text.match(/^(.*?)\s*(=|!=|>=|<=|>|<)\s*(.*?)$/);
+            if (!comparison) return Boolean(expressionValue(text, context, variables));
+            const left = expressionValue(comparison[1], context, variables);
+            const right = expressionValue(comparison[3], context, variables);
+            if (comparison[2] === '=') return left === right;
+            if (comparison[2] === '!=') return left !== right;
+            const comparable = (value: RuntimeValue | undefined): string | number =>
+              typeof value === 'number' ? value : String(value ?? '');
+            if (comparison[2] === '>') return comparable(left) > comparable(right);
+            if (comparison[2] === '<') return comparable(left) < comparable(right);
+            if (comparison[2] === '>=') return comparable(left) >= comparable(right);
+            return comparable(left) <= comparable(right);
+          };
+          const isVisible = (source: string | boolean | undefined, context: EntityRecord | null): boolean => {
+            if (typeof source === 'boolean') return source;
+            return !source || conditionValue(source, context);
+          };
+          const dynamicClass = (source: string | undefined, context: EntityRecord | null): string => {
+            let text = source || '';
+            text = text.replace(/\(?if\s+(.+?)\s+then\s+'([^']*)'\s+else\s+'([^']*)'\)?/g,
+              (_match: string, condition: string, yes: string, no: string) =>
+                conditionValue(condition, context) ? yes : no);
+            text = text.replace(/toString\(\$[A-Za-z_]\w*\/([A-Za-z_][\w.]*)\)/g,
+              (_match: string, member: string) => String(attributes(context)[memberName(member)] ?? ''));
+            text = text.replace(/\$[A-Za-z_]\w*\/([A-Za-z_][\w.]*)/g,
+              (_match: string, member: string) => String(attributes(context)[memberName(member)] ?? ''));
+            return text.replace(/[+()']/g, ' ').replace(/\s+/g, ' ').trim();
+          };
+          const caption = (
+            widget: WidgetDefinition, options: WidgetOptions, context: EntityRecord | null
+          ): string => {
+            let value = options.caption || widget.caption || widget.name;
+            (options.parameters || []).forEach((parameter, index) => {
+              value = value.replaceAll(`{${index + 1}}`, String(expressionValue(parameter, context) ?? ''));
+            });
+            return value;
+          };
+          const inlineStyle = (value: string | undefined): CSSProperties =>
+            Object.fromEntries((value || '').split(';').filter(Boolean).map((rule: string) => {
+            const [property, ...parts] = rule.split(':');
+            const name = property.trim().replace(/-([a-z])/g,
+              (_match: string, letter: string) => letter.toUpperCase());
+            return [name, parts.join(':').trim()];
+          }));
+
+          const eventArguments = (event: WidgetEvent | undefined, context: EntityRecord | null): RuntimeVariables => Object.fromEntries(
+            Object.entries(event?.arguments || {}).map(([name, expression]) => [name, expressionValue(expression, context)])
+          );
+
+          const recordValue = (record: EntityRecord | null, attribute: string | undefined): RuntimeValue | undefined =>
+            attributes(record || undefined)[memberName(attribute)];
+          const displayValue = (value: RuntimeValue | undefined): string | number | boolean => {
+            if (value == null) return '';
+            if (Array.isArray(value)) return value.map(displayValue).join(', ');
+            if (isEntityRecord(value)) return Object.values(value.attributes).find(item =>
+              ['string', 'number', 'boolean'].includes(typeof item)) as string | number | boolean || value.id;
+            if (typeof value === 'object') return JSON.stringify(value);
+            return String(value);
+          };
+
+          const choiceValue = (value: RuntimeValue, key: string): RuntimeValue | undefined => {
+            if (isEntityRecord(value)) return key === 'id' ? value.id : value.attributes[key];
+            if (value && typeof value === 'object' && !Array.isArray(value)) return value[key];
+            return undefined;
+          };
+
+          const draftValue = (value: RuntimeValue | undefined): string | number | boolean => {
+            if (isEntityRecord(value)) return value.id;
+            return ['string', 'number', 'boolean'].includes(typeof value)
+              ? value as string | number | boolean : '';
+          };
+
+          const apiFailure = (failure: unknown): ApiFailure => {
+            if (failure instanceof Error) return failure as ApiFailure;
+            return new Error(String(failure));
+          };
+
+          const sortRecords = (
+            records: EntityRecord[], sortings: Array<{ attribute: string; direction?: string }> = []
+          ) => {
+            const result = records.slice();
+            sortings.slice().reverse().forEach(sorting => {
+              const member = memberName(sorting.attribute);
+              const direction = sorting.direction === 'Descending' ? -1 : 1;
+              result.sort((left, right) => direction * String(
+                left.attributes?.[member] ?? ''
+              ).localeCompare(String(right.attributes?.[member] ?? ''), undefined, { numeric: true }));
+            });
+            return result;
+          };
+
+          function BoundField({
+            widget, record, schema, request, saveRecord, revision, onChanged, onError
+          }: BoundFieldProps) {
+            const options = widget.options || {};
+            const member = memberName(options.attribute || widget.name);
+            const kind = widget.type;
+            const value = recordValue(record, member);
+            const [draft, setDraft] = useState<string | number | boolean>(
+              kind === 'check_box' ? Boolean(value) : draftValue(value)
+            );
+            const [references, setReferences] = useState<EntityRecord[]>([]);
+            const associations = (schema?.modules || []).flatMap(module => module.associations || []);
+            const association = associations.find(item =>
+              item.name === options.attribute || memberName(item.name) === member
+            );
+            const referenceEntity = options.entity || options.target_entity || association?.to_entity;
+            const entityDefinition = (schema?.modules || []).flatMap(module =>
+              [...(module.models || []), ...(module.dtos || [])]
+            ).find(entity => entity.name === record?.type);
+            const attributeDefinition = (entityDefinition?.attributes || []).find(attribute =>
+              attribute.name === member
+            );
+            const enumeration = (schema?.modules || []).flatMap(module =>
+              module.enumerations || []
+            ).find(item => item.id === attributeDefinition?.enumeration
+              || item.name === attributeDefinition?.enumeration);
+
+            useEffect(() => {
+              setDraft(kind === 'check_box' ? Boolean(value) : draftValue(value));
+            }, [kind, record?.id, value]);
+
+            useEffect(() => {
+              if (kind !== 'reference_selector' || !referenceEntity) return;
+              request<EntityCollectionResponse>(`/api/entities/${encodeURIComponent(referenceEntity)}`)
+                .then(payload => setReferences(payload.records || [])).catch(onError);
+            }, [kind, referenceEntity, revision, request, onError]);
+
+            const persist = (next: string | number | boolean) => {
+              setDraft(next);
+              if (!record?.type || !record?.id || !member) return Promise.resolve(record);
+              let normalized: RuntimeValue = next;
+              if (kind === 'number_input') normalized = next === '' ? null : Number(next);
+              if (kind === 'reference_selector') {
+                normalized = references.find(item => item.id === next) || null;
+              }
+              return saveRecord(record, { [member]: normalized }).then(updated => {
+                if (!updated) return null;
+                if (onChanged) return onChanged(updated);
+                return updated;
+              });
+            };
+            const disabled = !record?.id || !member || options.read_only === true;
+
+            if (kind === 'text_area') {
+              return <textarea rows={options.lines || 4} value={String(draft)} disabled={disabled}
+                onChange={event => setDraft(event.target.value)} onBlur={() => persist(draft)} />;
+            }
+            if (kind === 'check_box') {
+              return <input type="checkbox" checked={Boolean(draft)} disabled={disabled}
+                onChange={event => persist(event.target.checked)} />;
+            }
+            if (kind === 'drop_down' || kind === 'reference_selector') {
+              const enumValues = (enumeration?.values || []).map(item => ({
+                id: item.name, label: item.caption || item.name
+              }));
+              const configuredValue = options.values || options.items || options.options || enumValues;
+              const configured: RuntimeValue[] = Array.isArray(configuredValue)
+                ? configuredValue : configuredValue ? Object.values(configuredValue) : [];
+              const choices: RuntimeValue[] = kind === 'reference_selector' ? references : configured;
+              return <select value={String(draft)} disabled={disabled} onChange={event => persist(event.target.value)}>
+                <option value="">—</option>
+                {draft && !choices.some(item => (choiceValue(item, 'id') || choiceValue(item, 'value') || item) === draft) ?
+                  <option value={String(draft)}>{displayValue(value)}</option> : null}
+                {choices.map((item, index) => <option
+                  key={String(choiceValue(item, 'id') || choiceValue(item, 'value') || index)}
+                  value={String(choiceValue(item, 'id') || choiceValue(item, 'value') || item)}>
+                  {displayValue(choiceValue(item, 'label') || choiceValue(item, 'caption')
+                    || (isEntityRecord(item) ? recordValue(item, options.display_attribute) : undefined)
+                    || choiceValue(item, 'id') || choiceValue(item, 'value') || item)}
+                </option>)}
+              </select>;
+            }
+            const inputType = kind === 'date_picker' ? 'date' : kind === 'number_input' ? 'number' : 'text';
+            const inputValue = inputType === 'date' ? String(draft).slice(0, 10)
+              : typeof draft === 'boolean' ? String(draft) : draft;
+            return <input type={inputType} value={inputValue} disabled={disabled}
+              onChange={event => setDraft(event.target.value)} onBlur={() => persist(draft)} />;
+          }
+
+          function DataGrid({ widget, request, pageContext, revision, onError, onMutation,
+                              onRowAction, onSelectRecord }: DataGridProps) {
+            const options = widget.options || {};
+            const [records, setRecords] = useState<EntityRecord[]>([]);
+            const [pageNumber, setPageNumber] = useState(0);
+            const [reload, setReload] = useState(0);
+            const [selected, setSelected] = useState<EntityRecord | null>(null);
+            const [loading, setLoading] = useState(false);
+            const pageSize = Math.max(1, Number(options.page_size || options.pageSize || 20));
+
+            useEffect(() => {
+              if (!options.entity) return;
+              setLoading(true);
+              request<EntityCollectionResponse>(
+                entityCollectionPath(options.entity, options.association, pageContext)
+              ).then(payload => {
+                let values = payload.records || [];
+                values = sortRecords(values, options.sort || []);
+                setRecords(values);
+                setPageNumber(current => Math.min(current, Math.max(0, Math.ceil(values.length / pageSize) - 1)));
+              }).catch(onError).finally(() => setLoading(false));
+            }, [options.entity, options.association, pageContext?.type, pageContext?.id,
+                pageSize, reload, revision, request, onError]);
+
+            const mutate = <T,>(operation: Promise<T>): Promise<T> => operation.then(result => {
+              setReload(value => value + 1);
+              onMutation();
+              return result;
+            }).catch(failure => {
+              onError(failure);
+              throw failure;
+            });
+            const createRecord = () => mutate(request<EntityRecord>(`/api/entities/${encodeURIComponent(options.entity || '')}`, {
+              method: 'POST', body: '{}'
+            })).then(record => {
+              setSelected(record);
+              if (record) onSelectRecord(record);
+            });
+            const deleteRecord = () => selected && mutate(request(
+              `/api/entities/${encodeURIComponent(options.entity || '')}/${encodeURIComponent(selected.id)}`,
+              { method: 'DELETE' }
+            )).then(() => { setSelected(null); onSelectRecord(null); });
+            const toolbar = options.toolbar?.buttons || [{ type: 'new' }, { type: 'delete' }];
+            const pageCount = Math.max(1, Math.ceil(records.length / pageSize));
+            const visible = records.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
+
+            return <div className={classes('mxrb-data-grid-runtime', loading && 'is-loading')}
+              data-entity={options.entity || ''}>
+              <div className="mxrb-grid-toolbar">
+                {toolbar.some(button => button.type === 'new') ? <button type="button" onClick={createRecord}>New</button> : null}
+                {toolbar.some(button => button.type === 'delete') ? <button type="button" disabled={!selected} onClick={deleteRecord}>Delete</button> : null}
+                <button type="button" onClick={() => setReload(value => value + 1)}>Reload</button>
+              </div>
+              <table><thead><tr>{(options.columns || []).map(column =>
+                <th key={column.name || column.attribute}>{column.caption || column.name}</th>)}</tr></thead>
+                <tbody>{visible.map(record => <tr key={record.id}
+                  className={selected?.id === record.id ? 'is-selected' : ''}
+                  onClick={() => { setSelected(record); onSelectRecord(record); onRowAction(record); }}>
+                  {(options.columns || []).map(column => <td key={column.name || column.attribute}>
+                    {displayValue(recordValue(record, column.attribute || column.name))}
+                  </td>)}
+                </tr>)}</tbody></table>
+              <div className="mxrb-grid-pagination">
+                <button type="button" disabled={pageNumber === 0}
+                  onClick={() => setPageNumber(value => value - 1)}>Previous</button>
+                <span>Page {pageNumber + 1} of {pageCount} · {records.length} rows</span>
+                <button type="button" disabled={pageNumber + 1 >= pageCount}
+                  onClick={() => setPageNumber(value => value + 1)}>Next</button>
+              </div>
+            </div>;
+          }
+
+          function Gallery({ widget, moduleName, invoke, invokeNanoflow, navigate, pageContext, revision,
+                             schema, request, saveRecord, onError, onMutation, onSelectRecord }: GalleryProps) {
+            const options = widget.options || {};
+            const [records, setRecords] = useState<EntityRecord[]>([]);
+            useEffect(() => {
+              if (!options.entity) return;
+              request<EntityCollectionResponse>(
+                entityCollectionPath(options.entity, options.association, pageContext)
+              ).then(payload => {
+                setRecords(sortRecords(payload.records || [], options.sort || []));
+              }).catch(onError);
+            }, [options.entity, options.association, pageContext?.type, pageContext?.id,
+                revision, request, onError]);
+            return <div className={classes('mxrb-widget', 'mxrb-gallery', options.class)}
+              data-widget-name={widget.name} data-widget-type={widget.type}>
+              <div className="mxrb-gallery-items gallery-items">
+                {records.map(record => <div className="mxrb-gallery-item gallery-item" key={record.id}>
+                  {(widget.children || []).map((child, index) => <Widget key={`${child.name}-${index}`}
+                    widget={child} moduleName={moduleName} invoke={invoke} invokeNanoflow={invokeNanoflow}
+                    navigate={navigate} context={record} schema={schema} request={request}
+                    saveRecord={saveRecord} onError={onError} onMutation={onMutation}
+                    onSelectRecord={onSelectRecord}
+                    pageContext={pageContext} revision={revision} />)}
+                </div>)}
+              </div>
+            </div>;
+          }
+
+          function Widget({ widget, children: compiledChildren, moduleName, invoke, invokeNanoflow, navigate,
+                            context, pageContext, revision, schema, request, saveRecord,
+                            onError, onMutation, onSelectRecord }: WidgetRuntimeProps) {
+            const options = widget.options || {};
+            if (!isVisible(options.visible, context || pageContext)) return null;
+            const className = classes('mxrb-widget', `mxrb-${widget.type}`, `mx-name-${widget.name}`,
+              options.class,
+              dynamicClass(options.dynamic_class, context || pageContext));
+            const runtimeProps = {
+              'data-widget-name': widget.name,
+              'data-widget-type': widget.type
+            };
+            const children = compiledChildren ?? (widget.children || []).map((child, index) =>
+              <Widget key={`${child.name}-${index}`} widget={child} moduleName={moduleName} invoke={invoke}
+                invokeNanoflow={invokeNanoflow} navigate={navigate}
+                context={context} pageContext={pageContext} revision={revision} schema={schema}
+                request={request} saveRecord={saveRecord} onError={onError} onMutation={onMutation}
+                onSelectRecord={onSelectRecord} />);
+            const click = (widget.events || []).find(event => event.event === 'on_click');
+            const change = (widget.events || []).find(event => event.event === 'on_change');
+            const runEvent = (
+              event: WidgetEvent | undefined, eventContext: EntityRecord | null = context || pageContext
+            ): Promise<unknown> => {
+              if (!event) return Promise.resolve();
+              const handler = event.handler.includes('.') ? event.handler : `${moduleName}.${event.handler}`;
+              const parameters = eventArguments(event, eventContext);
+              if (event.kind === 'nanoflow') return invokeNanoflow(handler, parameters, eventContext);
+              if (event.kind === 'page') {
+                const candidate = Object.values(parameters)[0];
+                const targetContext = isEntityRecord(candidate) ? candidate : pageContext || context || null;
+                return navigate(handler, targetContext);
+              }
+              return invoke(handler, parameters, eventContext);
+            };
+            const onClick = click ? () => runEvent(click) : undefined;
+            const onChanged = (updated: EntityRecord) => runEvent(change, updated);
+
+            switch (widget.type) {
+              case 'container':
+                return <div {...runtimeProps} className={className} style={inlineStyle(options.style)} onClick={onClick}
+                  role={onClick ? 'button' : undefined} tabIndex={onClick ? 0 : undefined}>
+                  {children}
+                </div>;
+              case 'text':
+                return <span {...runtimeProps} className={className}>{caption(widget, options, context || pageContext)}</span>;
+              case 'button':
+                return <button {...runtimeProps} type="button" className={className} onClick={onClick}>
+                  {caption(widget, options, context || pageContext)}
+                </button>;
+              case 'text_area':
+                return <label {...runtimeProps} className={className}>{caption(widget, options, context || pageContext)}
+                  <BoundField widget={widget} record={context || pageContext} schema={schema}
+                    request={request} saveRecord={saveRecord} revision={revision}
+                    onChanged={onChanged} onError={onError} />
+                </label>;
+              case 'text_box':
+              case 'number_input':
+                return <label {...runtimeProps} className={className}>{caption(widget, options, context || pageContext)}
+                  <BoundField widget={widget} record={context || pageContext} schema={schema}
+                    request={request} saveRecord={saveRecord} revision={revision}
+                    onChanged={onChanged} onError={onError} />
+                </label>;
+              case 'check_box':
+                return <label {...runtimeProps} className={className}>
+                  <BoundField widget={widget} record={context || pageContext} schema={schema}
+                    request={request} saveRecord={saveRecord} revision={revision}
+                    onChanged={onChanged} onError={onError} />
+                  {caption(widget, options, context || pageContext)}
+                </label>;
+              case 'date_picker':
+                return <label {...runtimeProps} className={className}>{caption(widget, options, context || pageContext)}
+                  <BoundField widget={widget} record={context || pageContext} schema={schema}
+                    request={request} saveRecord={saveRecord} revision={revision}
+                    onChanged={onChanged} onError={onError} />
+                </label>;
+              case 'drop_down':
+              case 'reference_selector':
+                return <label {...runtimeProps} className={className}>{caption(widget, options, context || pageContext)}
+                  <BoundField widget={widget} record={context || pageContext} schema={schema}
+                    request={request} saveRecord={saveRecord} revision={revision}
+                    onChanged={onChanged} onError={onError} />
+                </label>;
+              case 'tab_control':
+                return <div {...runtimeProps} className={className}>{(options.tabs || []).map(tab =>
+                  <section key={tab.name}><h3>{tab.caption || tab.name}</h3>
+                    {(tab.widgets || []).map((child, index) =>
+                      <Widget key={`${child.name}-${index}`} widget={child} moduleName={moduleName} invoke={invoke}
+                        invokeNanoflow={invokeNanoflow} navigate={navigate}
+                        context={context} pageContext={pageContext} revision={revision} schema={schema}
+                        request={request} saveRecord={saveRecord} onError={onError} onMutation={onMutation}
+                        onSelectRecord={onSelectRecord} />)}
+                  </section>)}</div>;
+              case 'data_grid':
+                return <div {...runtimeProps} className={className}><DataGrid widget={widget} request={request}
+                  pageContext={pageContext} revision={revision} onError={onError}
+                  onMutation={onMutation} onSelectRecord={onSelectRecord}
+                  onRowAction={record => runEvent(change || click, record)} />
+                </div>;
+              case 'gallery':
+                return <Gallery widget={widget} moduleName={moduleName} invoke={invoke}
+                  invokeNanoflow={invokeNanoflow} navigate={navigate}
+                  pageContext={pageContext} revision={revision} schema={schema} request={request}
+                  saveRecord={saveRecord} onError={onError} onMutation={onMutation}
+                  onSelectRecord={onSelectRecord} />;
+              case 'pluggable_widget':
+                return <div {...runtimeProps} className={classes(className, 'mxrb-marketplace-widget')}
+                  data-widget-id={options.widget_id || ''}>
+                  <MarketplaceWidget widget={widget} context={context || pageContext}
+                    onChange={(attribute, value) => {
+                      const active = context || pageContext;
+                      const member = memberName(attribute);
+                      if (!active || !member) return Promise.resolve(active);
+                      return saveRecord(active, { [member]: value }).then(updated => {
+                        if (updated) return onChanged(updated);
+                        return updated;
+                      });
+                    }}>{children}</MarketplaceWidget>
+                </div>;
+              case 'native_widget':
+                return <div {...runtimeProps} className={classes(className, 'mxrb-native-widget')}
+                  data-native-type={options.native_type || ''} role="alert">
+                  Could not render widget {widget.name}: unsupported native type {options.native_type || 'unknown'}
+                </div>;
+              default:
+                return <div {...runtimeProps} className={className} role="alert">
+                  Could not render widget {widget.name}: unsupported type {widget.type}
+                </div>;
+            }
+          }
+
+          function navigationItems(items: NavigationItem[], openPage: (name: string) => unknown) {
+            return (items || []).map((item, index) => <li key={`${item.page || item.caption?.en_US}-${index}`}>
+              {item.page ? <button type="button" onClick={() => openPage(item.page!)}>
+                {item.caption?.en_US || item.page}
+              </button> : <span>{item.caption?.en_US || ''}</span>}
+              {item.items?.length ? <ul>{navigationItems(item.items, openPage)}</ul> : null}
+            </li>);
+          }
+
+          function Login({ onLogin, error, busy }: LoginProps) {
+            const [username, setUsername] = useState('');
+            const [password, setPassword] = useState('');
+            const submit = (event: FormEvent<HTMLFormElement>) => {
+              event.preventDefault();
+              onLogin(username, password).finally(() => setPassword(''));
+            };
+            return <main className="mxrb-login">
+              <form onSubmit={submit}>
+                <h1>Sign in</h1>
+                <label>Username<input autoComplete="username" value={username}
+                  onChange={event => setUsername(event.target.value)} /></label>
+                <label>Password<input type="password" autoComplete="current-password" value={password}
+                  onChange={event => setPassword(event.target.value)} /></label>
+                <button type="submit" disabled={busy || !username || !password}>Sign in</button>
+                {error ? <p role="alert">{error.message}</p> : null}
+              </form>
+            </main>;
+          }
+
+          export default function App() {
+            const [schema, setSchema] = useState<ApplicationSchema | null>(null);
+            const [page, setPage] = useState<PageDefinition | null>(null);
+            const [pageContext, setPageContext] = useState<EntityRecord | null>(null);
+            const [error, setError] = useState<ApiFailure | null>(null);
+            const [busy, setBusy] = useState(false);
+            const initialLoadStarted = useRef(false);
+            const invocationInFlight = useRef(false);
+            const [revision, setRevision] = useState(0);
+            const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY));
+            const [session, setSession] = useState<Session | null>(null);
+            const [authRequired, setAuthRequired] = useState(false);
+
+            const handleError = useCallback((failure: unknown) => {
+              const normalized = apiFailure(failure);
+              if (normalized.status === 401) setAuthRequired(true);
+              setError(normalized);
+            }, []);
+            const request: ApiRequest = useCallback(
+              (path: string, options: RequestInit = {}) => api(path, options, token), [token]
+            );
+
+            const openPage = async (
+              name: string, context: EntityRecord | null = null, activeToken = token
+            ): Promise<void> => {
+              try {
+                const value = await api<PageDefinition>(
+                  `/api/pages/${encodeURIComponent(name)}`, {}, activeToken
+                );
+                let resolvedContext = context;
+                if (!resolvedContext && value.data_source?.name) {
+                  if (value.data_source.kind === 'nanoflow') {
+                    const source = nanoflows[value.data_source.name as keyof typeof nanoflows];
+                    if (!source) throw new Error(`Page data source nanoflow not found: ${value.data_source.name}`);
+                    const execution = await source.execute({});
+                    resolvedContext = isEntityRecord(execution.result)
+                      ? { ...execution.result, transient: true } : null;
+                  } else {
+                    const payload = await api<InvocationResult>(
+                      `/api/microflows/${encodeURIComponent(value.data_source.name)}`,
+                      { method: 'POST', body: '{}' }, activeToken
+                    );
+                    const candidate = payload.context || payload.result;
+                    resolvedContext = isEntityRecord(candidate)
+                      ? { ...candidate, transient: true } : null;
+                  }
+                }
+                setPage(value);
+                setPageContext(resolvedContext);
+                setRevision(current => current + 1);
+                setError(null);
+              } catch (failure) {
+                handleError(failure);
+              }
+            };
+
+            const loadApplication = async (activeToken = token) => {
+              try {
+                if (activeToken) {
+                  const currentSession = await api<Session>('/api/session', {}, activeToken);
+                  setSession(currentSession);
+                }
+                const value = await api<ApplicationSchema>('/api/schema', {}, activeToken);
+                setSchema(value);
+                setAuthRequired(false);
+                setError(null);
+                const profile = value.navigation?.profiles?.find(item => item.kind === 'Responsive')
+                  || value.navigation?.profiles?.[0];
+                const fallback = value.modules.flatMap(module => module.pages)[0]?.name;
+                await openPage(profile?.home_page || fallback, null, activeToken);
+              } catch (failure) {
+                const normalized = apiFailure(failure);
+                if (normalized.status === 401) {
+                  localStorage.removeItem(TOKEN_KEY);
+                  setToken(null);
+                  setSession(null);
+                  setAuthRequired(true);
+                }
+                setError(normalized);
+              }
+            };
+
+            useEffect(() => {
+              if (initialLoadStarted.current) return;
+              initialLoadStarted.current = true;
+              loadApplication(token);
+            }, []);
+
+            const login = async (username: string, password: string): Promise<void> => {
+              setBusy(true);
+              try {
+                const authenticated = await api<LoginResponse>('/api/login', {
+                  method: 'POST', body: JSON.stringify({ username, password })
+                });
+                localStorage.setItem(TOKEN_KEY, authenticated.token);
+                setToken(authenticated.token);
+                await loadApplication(authenticated.token);
+              } catch (failure) {
+                setError(apiFailure(failure));
+              } finally {
+                setBusy(false);
+              }
+            };
+
+            const logout = async () => {
+              try {
+                await api('/api/logout', { method: 'POST' }, token);
+              } catch (failure) {
+                const normalized = apiFailure(failure);
+                if (normalized.status !== 401) setError(normalized);
+              } finally {
+                localStorage.removeItem(TOKEN_KEY);
+                setToken(null);
+                setSession(null);
+                setSchema(null);
+                setPage(null);
+                setAuthRequired(true);
+              }
+            };
+
+            const refreshPageContext = () => {
+              if (!pageContext?.type || !pageContext?.id) return Promise.resolve();
+            return request<EntityRecord>(
+              `/api/entities/${encodeURIComponent(pageContext.type)}/${encodeURIComponent(pageContext.id)}`
+              ).then(setPageContext).catch(handleError);
+            };
+
+            const saveRecord: SaveRecord = useCallback((record, changes) => {
+              if (!record?.type || !record?.id) return Promise.resolve(record);
+              if (record.transient) {
+                const updated: EntityRecord = {
+                  ...record, attributes: { ...record.attributes, ...changes }
+                };
+                setPageContext(current => current?.id === updated.id ? updated : current);
+                setRevision(value => value + 1);
+                setError(null);
+                return Promise.resolve(updated);
+              }
+              return request<EntityRecord>(`/api/entities/${encodeURIComponent(record.type)}/${encodeURIComponent(record.id)}`, {
+                method: 'PATCH', body: JSON.stringify(changes)
+              }).then(updated => {
+                setPageContext(current => current?.id === updated.id ? updated : current);
+                setRevision(value => value + 1);
+                setError(null);
+                return updated;
+              }).catch(failure => {
+                const normalized = apiFailure(failure);
+                if (normalized.status === 404) {
+                  const updated: EntityRecord = {
+                    ...record, attributes: { ...record.attributes, ...changes }
+                  };
+                  setPageContext(current => current?.id === updated.id ? updated : current);
+                  setRevision(value => value + 1);
+                  setError(null);
+                  return updated;
+                }
+                handleError(failure);
+                return null;
+              });
+            }, [request, handleError]);
+
+            const markMutation = useCallback(() => setRevision(value => value + 1), []);
+            const selectRecord: SelectRecord = useCallback(record => setPageContext(record), []);
+
+            const invoke: InvokeHandler = (name, parameters = {}, contextOverride = null) => {
+              if (invocationInFlight.current) return Promise.resolve(null);
+              invocationInFlight.current = true;
+              setBusy(true);
+              const activeContext = pageContext || contextOverride;
+              return request<InvocationResult>(`/api/microflows/${encodeURIComponent(name)}`, {
+                method: 'POST', body: JSON.stringify({
+                  ...parameters, ...(activeContext ? { __mxrb_context: activeContext } : {})
+                })
+                })
+                  .then(payload => {
+                    setRevision(value => value + 1);
+                    if (payload.context) setPageContext(payload.context);
+                    const navigation = (payload.effects || []).find(
+                      (effect): effect is OpenPageEffect => effect.type === 'open_page'
+                    );
+                    if (navigation?.page) {
+                      const context = Object.values(navigation.arguments || {})[0]
+                        || payload.context || payload.result || null;
+                      return openPage(navigation.page, context as EntityRecord | null).then(() => payload);
+                    }
+                    return payload.context ? Promise.resolve(payload) : refreshPageContext().then(() => payload);
+                  }).catch(handleError).finally(() => {
+                    invocationInFlight.current = false;
+                    setBusy(false);
+                  });
+            };
+
+            const invokeNanoflow: InvokeHandler = async (
+              name, parameters = {}, contextOverride = null
+            ) => {
+              setBusy(true);
+              try {
+              const definition = nanoflows[name as keyof typeof nanoflows];
+              const resolvedParameters: RuntimeVariables = { ...parameters };
+              const activeContext = contextOverride || pageContext;
+              if (definition?.parameters?.length === 1 && !(definition.parameters[0] in resolvedParameters)
+                  && activeContext) {
+                resolvedParameters[definition.parameters[0]] = activeContext;
+              }
+              if (!definition) throw new Error(`Nanoflow frontend not found: ${name}`);
+              const execution = await definition.execute(resolvedParameters);
+              for (const changed of execution.changes) {
+                await saveRecord(changed, changed.attributes);
+              }
+              setError(null);
+                return execution.result;
+              } catch (failure) {
+                setError(apiFailure(failure));
+                return null;
+              } finally {
+                setBusy(false);
+              }
+            };
+
+            if (authRequired) return <Login onLogin={login} error={error} busy={busy} />;
+            if (!schema || !page) return <main className="mxrb-loading">Loading application…</main>;
+            const profile = schema.navigation?.profiles?.find(item => item.kind === 'Responsive')
+              || schema.navigation?.profiles?.[0];
+          const moduleName = page.name.split('.')[0];
+          const PageComponent = pages[page.name as keyof typeof pages];
+          const PageWidget = ({ widget, children }: PageWidgetProps) =>
+            <Widget widget={widget} moduleName={moduleName} invoke={invoke}
+              invokeNanoflow={invokeNanoflow} navigate={openPage}
+              context={pageContext} pageContext={pageContext} revision={revision} schema={schema}
+              request={request} saveRecord={saveRecord} onError={handleError}
+              onMutation={markMutation} onSelectRecord={selectRecord}>{children}</Widget>;
+
+          return <div className={classes('mxrb-app-shell', 'mx-page', page.appearance_class)} style={inlineStyle(page.appearance_style)}>
+              {profile?.items?.length || session ? <nav className="mxrb-navigation region-sidebar">
+                {profile?.items?.length ? <ul>{navigationItems(profile.items, openPage)}</ul> : null}
+                {session ? <button type="button" onClick={logout}>Sign out</button> : null}
+              </nav> : null}
+            {PageComponent ? <PageComponent busy={busy} Widget={PageWidget} /> :
+              <main className="mxrb-page region-content" role="alert">
+                Generated React page not found: {page.name}
+              </main>}
+              {error ? <aside className="mxrb-runtime-error" role="alert">
+                <button type="button" onClick={() => setError(null)}>×</button>{error.message}
+              </aside> : null}
+            </div>;
+          }
+        JS
+      end
+
+      def frontend_css
+        <<~CSS
+          :root { font: 16px/1.5 system-ui, sans-serif; }
+          * { box-sizing: border-box; }
+          html, body, #root { min-height: 100%; margin: 0; }
+          button, input, textarea, select { font: inherit; }
+          .mxrb-app-shell { min-height: 100vh; }
+          .mxrb-page { min-height: 100vh; }
+          .mxrb-page[aria-busy='true'] { cursor: progress; pointer-events: none; }
+          .mxrb-navigation { position: fixed; z-index: 20; right: 1rem; top: 1rem; }
+          .mxrb-navigation ul { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
+          .mxrb-navigation button { border: 1px solid currentColor; border-radius: .4rem; background: transparent; color: inherit; cursor: pointer; }
+          .mxrb-text { display: block; }
+          .mxrb-runtime-error { position: fixed; z-index: 50; right: 1rem; bottom: 1rem; max-width: 34rem; padding: 1rem; border-radius: .5rem; background: #7f1d1d; color: white; box-shadow: 0 .5rem 2rem #0008; }
+          .mxrb-runtime-error button { float: right; border: 0; background: transparent; color: inherit; cursor: pointer; }
+          .mxrb-loading { display: grid; min-height: 100vh; place-items: center; }
+          .mxrb-login { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
+          .mxrb-login form { display: grid; width: min(24rem, 100%); gap: 1rem; padding: 2rem; border: 1px solid #d1d5db; border-radius: .75rem; }
+          .mxrb-login label { display: grid; gap: .25rem; }
+          .mxrb-marketplace-widget { display: block; min-width: 0; }
+          .mxrb-marketplace-widget img, .mxrb-marketplace-widget video,
+          .mxrb-marketplace-chart svg { display: block; width: 100%; height: 12rem; max-width: 100%; }
+          .mxrb-marketplace-chart { margin: .5rem 0; }
+          .mxrb-marketplace-rating { display: inline-flex; border: 0; padding: 0; }
+          .mxrb-marketplace-rating button { border: 0; background: transparent; cursor: pointer; }
+          .mxrb-marketplace-badge { display: inline-block; padding: .125rem .5rem; border-radius: 999px; background: #e5e7eb; }
+          .mxrb-grid-toolbar, .mxrb-grid-pagination { display: flex; align-items: center; gap: .5rem; margin-block: .5rem; }
+          .mxrb-data-grid-runtime table { width: 100%; border-collapse: collapse; }
+          .mxrb-data-grid-runtime th, .mxrb-data-grid-runtime td { padding: .5rem; border-bottom: 1px solid #d1d5db; text-align: left; }
+          .mxrb-data-grid-runtime tbody tr { cursor: pointer; }
+          .mxrb-data-grid-runtime tbody tr.is-selected { background: #dbeafe; }
+          .mxrb-native-widget:empty { min-height: 1px; }
+        CSS
+      end
+
+      def readme
+        <<~MARKDOWN
+          # #{@project.name}
+
+          Executable Ruby application exported by MXRB.
+
+          ## Run
+
+          ```sh
+          bundle install
+          npm install --prefix frontend
+          bundle exec mxrb run .
+          ```
+
+          `mxrb run` supervises the Ruby API and React + TypeScript + Vite development server
+          together. Vite proxies `/api` to Ruby, so both processes behave as one
+          application. Use `--server-port` for Ruby and `--client-port` for Vite;
+          `--api-port` and `--port` remain compatibility aliases. Generated models,
+          DTOs, services, and pages live under `app/`.
+          The generated `frontend/src/types.ts` covers domain records, pages, widgets,
+          contexts, effects, and API payloads; `npm run typecheck` validates it strictly.
+          Service bodies are ordinary Ruby; their default implementation delegates to
+          MXRB's pure-Ruby interpreter.
+
+          Browser CRUD uses the same authenticated entity API as microflows. Configure
+          users and bearer tokens through ignored environment files. External app/web
+          services, mappings, XML imports, and documents are explicit Ruby integrations
+          registered in `config/adapters.rb`; keep credentials out of that committed file.
+
+          ## Recompile to Mendix
+
+          ```sh
+          bundle exec mxrb generate project.rb build/#{File.basename(@mpr_path)}
+          ```
+
+          The complete bidirectional Mendix source remains under `.mxrb/mendix`. The
+          `.mxrb/ruby-app.json` coverage manifest maps stable Mendix IDs to Ruby files and
+          records artifacts that remain preserved natively.
+        MARKDOWN
+      end
+
+      def escape_html(value)
+        value.to_s.gsub('&', '&amp;').gsub('<', '&lt;').gsub('>', '&gt;').gsub('"', '&quot;')
+      end
+    end
+    # rubocop:enable Metrics
+  end
+end